☰

Google Classic Maps / Panoramio - Easy and Enhanced Photo Viewer - For both Chrome and Firefox

A faster and easier way to explore 80 million images, handy EXIF image data/information, the place where it was taken and latitude/longitude. - Travel around the world, without leaving you secure home.

当前为 2015-03-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            Google Classic Maps / Panoramio - Easy and Enhanced Photo Viewer - For both Chrome and Firefox
  3. // @description     A faster and easier way to explore 80 million images, handy EXIF image data/information, the place where it was taken and latitude/longitude. - Travel around the world, without leaving you secure home.
  4. // @namespace       GCMP-EEPW-20150306-SDF-MOFM 
  5. // @version         0.45
  6.  
  7. // @include         https://maps.google.*/maps*
  8. // @match           https://maps.google.se/maps*
  9. // @match           http://static.panoramio.com/photos/*.jpg
  10. // @match           http://www.panoramio.com/map*
  11.  
  12. // @require         http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
  13.  
  14. // @grant           GM_getValue
  15. // @grant           GM_setValue
  16. // @grant           GM_deleteValue
  17. // @grant           GM_xmlhttpRequest
  18.  
  19. // @created         2015-03-06
  20. // @released        2015-00-00
  21. // @updated         2015-00-00
  22. // @history         @version 0.25 - Alpha version: @released - 2015-03-12
  23. // @history         @version 0.45 - Beta version: @released - 2015-03-17
  24.  
  25. // @compatible		Greasemonkey, Tampermonkey
  26. // @license         GNU GPL v3 (http://www.gnu.org/copyleft/gpl.html) 
  27. // @copyright		2015+, Magnus Fohlström
  28. // ==/UserScript==
  29.  
  30. /*jshint -W014, -W030, -W082*/
  31. // -W014, laxbreak, Bad line breaking before '+'
  32. // -W030, Expected assignment or funtion call insted saw an expression
  33.  
  34.  
  35. (function($){
  36.  
  37.     //----------------------------------------------------------------------------------------------------------//
  38.     //													Config													//
  39.     //----------------------------------------------------------------------------------------------------------//
  40.  
  41.     //----------------------------------------------------------------------------------------------------------//
  42.     //												Start Variables												//
  43.     //----------------------------------------------------------------------------------------------------------//
  44.  
  45.     GM_getValue('startState') === undefined && GM_setValue('startState','Large');
  46.  
  47.     var locDoc = window.location.href,
  48.         lstate = 3,
  49.         g = window;
  50.  
  51.     //----------------------------------------------------------------------------------------------------------//
  52.     //													Helpers													//
  53.     //----------------------------------------------------------------------------------------------------------//
  54.  
  55.     String.prototype.formatString = function(){
  56.         return this.toString()
  57.             .split(/\s+/g).join(' ')
  58.             .split('{').join('{\n\t')
  59.             .split('; ').join(';')
  60.             .split(';').join(';\n\t')
  61.             .split('*/').join('*/\n')
  62.             .split('}').join('}\n');
  63.     };
  64.  
  65.     String.prototype.inString = function(string){
  66.         return string !== undefined ? string.search(this) !== -1 : false;
  67.     };
  68.  
  69.     function inURL(search){
  70.         var winLoc = window.location.href;
  71.         return winLoc.search(search) !== -1;
  72.     }
  73.  
  74.     function l( name, fn, showthis ){
  75.         ( lstate !== 0 && lstate == (showthis || lstate) || lstate == 'all' ) && console.log( name, fn !== undefined ? fn : '' );
  76.     }
  77.  
  78.     function isEven(value) {
  79.         return ( value % 2 === 0 );
  80.     }
  81.  
  82.     $.fn.extend({
  83.         exists: function(){
  84.             return this.length === 0 ? 0 : this.length;
  85.         }
  86.     });
  87.  
  88.     g.ms = 0;
  89.     function timer(ms)
  90.     {
  91.         g.ms = ms;
  92.         setTimeout(function(){ g.ms = 0; },ms);
  93.     }
  94.  
  95.     //----------------------------------------------------------------------------------------------------------//
  96.     //													The Script												//
  97.     //----------------------------------------------------------------------------------------------------------//
  98.  
  99.     function fn_BasicNew() {
  100.  
  101.         $( '<style id="CssBasic"></style>' ).appendTo('head');
  102.  
  103.         var CssBasic =
  104.             'img[src*="/photos/small/"] {'
  105.                 +		'cursor: pointer !important;'
  106.                 +		'}'
  107.                 +	'img[src*="/photos/small/"]:hover:after {'
  108.                 +		"content: 'Enter enhanced view';"
  109.                 +		'position: absolute;'
  110.                 +		'padding: 5px;'
  111.                 +		'border: 1px solid gray;'
  112.                 +		'background: whitesmoke;'
  113.                 +		'font-size: 14px;'
  114.                 +		'z-index: 65000;'
  115.                 +		'}'
  116.  
  117.                 +	'.largePanorama {'
  118.                 +		'position: absolute;'
  119.                 +		'top: 50%;'
  120.                 +		'left: 50%;'
  121.                 +		'transform: translate(-50%,-50%);'
  122.                 +		'z-index: 10000;'
  123.                 +		'border-radius: 15px;'
  124.                 +		'padding: 0px 6px 20px;'
  125.                 +		'border-width: 3px;'
  126.                 +		'border-style: outset;'
  127.                 +		'border-color: rgba(127, 127, 127, 0.31);'
  128.                 +		'background-color: rgba(236, 236, 236, 0.85);'
  129.                 +		'box-shadow: 5px 5px 20px 10px rgba(0, 33, 32, 0.31);'
  130.                 +		'}'
  131.                 +	'.largePanorama > img.theImg {'
  132.                 +		'border-width: 3px;'
  133.                 +		'border-style: inset;'
  134.                 +		'border-color: rgba(255, 255, 255, 0.6);'
  135.                 +		'background-color: rgba(144, 144, 144, 0.65);'
  136.                 +		'box-shadow: 4px 2px 20px 1px rgba(170, 170, 170, 0.85);'
  137.                 +		'transform: rotate(0deg);'
  138.                 +		'}'
  139.                 +	'.largePanorama a {'
  140.                 +		'color: #15c;'
  141.                 +		'}'
  142.  
  143.                 +	'.largePanorama .zoom, .largePanorama .close, .largePanorama .Size, .largePanorama .TheTitle, '
  144.                 +	'.largePanorama .pano, .largePanorama .more, .largePanorama #rotate span {'
  145.                 +		'cursor: pointer;'
  146.                 +		'}'
  147.  
  148.                 +	'.largePanorama .TheTitle {'
  149.                 +		'padding: 17px 4px;'
  150.                 +		'z-index: 35000;'
  151.                 +		'min-width: calc(100% - 4px) !important;'
  152.                 +		'max-width: calc(100% - 4px) !important;'
  153.                 +		'}'
  154.                 +	'.largePanorama .TheTitle b {'
  155.                 +		'float: left;'
  156.                 +		'cursor: initial;'
  157.                 +		'max-width: calc(100% - 80px) !important;'
  158.                 +		'margin-top: -7px;'
  159.                 +		'}'
  160.  
  161.                 +	'.largePanorama .more {'
  162.                 +		'float: right;'
  163.                 +		'z-index: 20000;'
  164.                 +		'}'
  165.                 +	'.largePanorama .more ul {'
  166.                 +		'display: none;'
  167.                 +		'position: absolute;'
  168.                 +		'padding: 4px 4px 4px 3px;'
  169.                 +		'margin-top: -14px;'
  170.                 +		'margin-left: -24px;'
  171.                 +		'border-style: outset;'
  172.                 +		'border-width: 2px;'
  173.                 +		'border-radius: 8px;'
  174.                 +		'border-color: rgb(209, 209, 209);'
  175.                 +		'background-color: rgba(215, 215, 215, 0.85);'
  176.                 +		'box-shadow: 1px 2px 8px 3px rgba(0, 60, 62, 0.27);'
  177.                 +		'z-index: 20000;'
  178.                 +		'}'
  179.                 +	'.largePanorama .more ul li {'
  180.                 +		'border-radius: 4px;'
  181.                 +		'line-height: 35px;'
  182.                 +		'padding: 0 10px;'
  183.                 +		'}'
  184.                 +	'.largePanorama .more ul li:hover {'
  185.                 +		'background-color: rgb(104, 122, 138);'
  186.                 +		'}'
  187.                 +	'.largePanorama .more ul li a {'
  188.                 +		'color: rgb(0, 36, 47);'
  189.                 +		'text-decoration: none;'
  190.                 +		'white-space: nowrap;'
  191.                 +		'}'
  192.                 +	'.largePanorama .more ul li:hover a {'
  193.                 +		'color: aliceblue;'
  194.                 +		'}'
  195.                 +	'.largePanorama .moreArrow.skiptranslate {'
  196.                 +		'font-size: 20px;'
  197.                 +		'height: 35px;'
  198.                 +		'right: 0;'
  199.                 +		'padding: 0 5px;'
  200.                 +		'margin-top: -19px;'
  201.                 +		'line-height: 40px;'
  202.                 +		'position: absolute;'
  203.                 +		'float: right;'
  204.                 +		'}'
  205.                 +	'.largePanorama .moreArrow.skiptranslate:hover {'
  206.                 +		'color: blue !important;'
  207.                 +		'}'
  208.  
  209.                 +	'.largePanorama .Size {'
  210.                 +		'position: absolute;'
  211.                 +		'z-index: 1000;'
  212.                 +		'bottom: 4px;'
  213.                 +		'left: 50%;'
  214.                 +		'transform: translate(-50%);'
  215.                 +		'white-space: nowrap;'
  216.                 +		'}'
  217.                 +	'.largePanorama .Size span {'
  218.                 +		'padding: 0 8px;'
  219.                 +		'}'
  220.                 +	'.largePanorama .Size span:hover {'
  221.                 +		'box-shadow: 0px -1px 18px 6px rgba(229, 229, 229, 1);'
  222.                 +		'background-color: rgba(229, 229, 229, 1);'
  223.                 +		'}'
  224.                 +	'.largePanorama .Size a {'
  225.                 +		'color: black;'
  226.                 +		'position: relative;'
  227.                 +		'text-decoration: none;'
  228.                 +		'}'
  229.  
  230.                 +	'.largePanorama .pano {'
  231.                 +		'position: absolute;'
  232.                 +		'bottom: -3px;'
  233.                 +		'width: calc(100% - 16px);'
  234.                 +		'padding: 7px 0px;'
  235.                 +		'margin-left: 0px;'
  236.                 +		'}'
  237.  
  238.                 +	'.largePanorama #rotate {'
  239.                 +		'position: relative;'
  240.                 +		'margin-right: 25px;'
  241.                 +		'width: 50px;'
  242.                 +		'top: -10px;'
  243.                 +		'float: right;'
  244.                 +		'z-index: 4000;'
  245.                 +		'}'
  246.                 +	'.largePanorama #rotate span {'
  247.                 +		'position: absolute;'
  248.                 +		'font-size: 20px;'
  249.                 +		'z-index: 45000;'
  250.                 +		'}'
  251.                 +	'.largePanorama #rotate span:hover {'
  252.                 +		'color: blue;'
  253.                 +		'}'
  254.  
  255.                 +	'.largePanorama span.rotateLeft.skiptranslate {'
  256.                 +		'-webkit-transform: rotate(90deg);'
  257.                 +		'transform: rotate(90deg);'
  258.                 +		'right: 30px;'
  259.                 +		'}'
  260.                 +	'.largePanorama span.rotateRight.skiptranslate {'
  261.                 +		'-webkit-transform: rotate(270deg);'
  262.                 +		'transform: rotate(270deg);'
  263.                 +		'right: 0px;'
  264.                 +		'}'
  265.  
  266.                 +	'.largePanorama #imageDetails {'
  267.                 +		'position: absolute;'
  268.                 +		'display: none;'
  269.                 +		'top: 50%;'
  270.                 +		'left: 50%;'
  271.                 +		'transform: translate(-50%,-50%);'
  272.                 +		'z-index: 30000;'
  273.                 +		'}'
  274.  
  275.                 +	'.largePanorama .interim-info-card {'
  276.                 +		'padding: 15px;'
  277.                 +		'margin: 0 0 13px;'
  278.                 +		'background-color: rgba(255, 255, 255, 0.85);'
  279.                 +		'border-radius: 15px;'
  280.                 +		'border-color: rgba(123, 123, 123, 0.85);'
  281.                 +		'border-width: 3px;'
  282.                 +		'border-style: outset;'
  283.                 +		'box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.4);'
  284.                 +		'}'
  285.                 +	'.largePanorama .justImg {'
  286.                 +		'display: inline-block;'
  287.                 +		'width: 100%;'
  288.                 +		'margin-left: 0px;'
  289.                 +		'}'
  290.                 +	'.largePanorama .justImg span {'
  291.                 +		'margin-right: 25px;'
  292.                 +		'}'
  293.                 +	'.largePanorama .interim-info-card>h2 {'
  294.                 +		'margin: 0 0 5px;'
  295.                 +		'font-size: 16px;'
  296.                 +		'font-weight: normal;'
  297.                 +		'text-align: center;'
  298.                 +		'line-height: 40px;'
  299.                 +		'}'
  300.                 +	'.largePanorama .interim-info-card a {'
  301.                 +		'color: rgb(0, 0, 222) !important;'
  302.                 +		'}'
  303.                 +	'.largePanorama #details {'
  304.                 +		'margin: 0;'
  305.                 +		'padding: 0;'
  306.                 +		'list-style: none;'
  307.                 +		'}'
  308.                 +	'.largePanorama #details li {'
  309.                 +		'margin-bottom: 6px;'
  310.                 +		'padding-top: 0;'
  311.                 +		'font-size: 13px;'
  312.                 +		'color: #999;'
  313.                 +		'clear: both;'
  314.                 +		'}'
  315.                 +	'.largePanorama #map_info_breadcrumbs {'
  316.                 +		'margin-top: 15px;'
  317.                 +		'text-align: center;'
  318.                 +		'}'
  319.                 +	'.largePanorama #place {'
  320.                 +		'color: #999;'
  321.                 +		'}'
  322.                 +	'.largePanorama h2, .largePanorama #place, .largePanorama #details * {'
  323.                 +		'color: rgb(66, 66, 66) !important;'
  324.                 +		'}'
  325.                 +	'.largePanorama .geo {'
  326.                 +		'margin-top: 5px;'
  327.                 +		'}'
  328.  
  329.                 +	'.gm-style-iw * {'
  330.                 +		'overflow: hidden !important;'
  331.                 +		'}'
  332.                 +	'.gm-style-iw {'
  333.                 +		'left: 10px !important;'
  334.                 +		'}'
  335.  
  336.                 +   '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div, '
  337.                 +   '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(2), '
  338.                 +   '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(4) '
  339.                 +       '{ width: 279px !important; max-width: 279px !important;}'
  340.                 +   'div.gm-style-iw, div.gm-style-iw > div, .map-info-window '
  341.                 +       '{ width: 263px !important; max-width: 263px !important;}'
  342.                 +   '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(3)'
  343.                 +       '{ right: 5px !important; top: 9px !important; }';
  344.                 
  345.         $( '#CssBasic' ).html( CssBasic.formatString() );
  346.     }
  347.  
  348.     function googleMaps(){
  349.  
  350.         window.location.href.search('www.panoramio.com/map') > 0 && (
  351.             $( document ).on('hover mouseenter', 'img', function(){
  352.                 var ImgParent = $( this ).parents('.map-info-window-img-outer'),
  353.                     mainParent = $( this ).parents('.gm-style-iw').parent(),
  354.                     mainParentWidth = mainParent.width(),
  355.                     search='/photos/small/',
  356.                     src = $( this ).attr('src');
  357.  
  358.                 if( src.search(search) == -1 ) {
  359.                     src.search('logo-tos.png') > 0 &&
  360.                     $( this ).addClass('panoLinkClick').closest('a').attr('href', ImgParent.find('.map-info-window-img-inner a').attr('href') );
  361.                     return false; }
  362.  
  363.                 ImgParent.hasClass( 'Donne' ) || (
  364.                     ImgParent.addClass( 'Donne' ).find('.map-info-window-img-footer-logo a').attr('href', $( this ).closest('a').attr('href') ),
  365.                     $( this ).unwrap()
  366.                 );
  367.             })
  368.         );
  369.  
  370.         $( document ).on('click', 'img', function(e){
  371.  
  372.             var panoPhoto,
  373.                 linkLarge,linkHuge,linkOrginal,linkWrongPosition,reloadHref,
  374.                 insertMore,insertRotate,
  375.                 startState,startStateLink,
  376.                 sizeLarge,sizeHuge,sizeOrginal,
  377.                 state,pop,cl,tagcl,panocl,
  378.                 panoElem,theTitle,elem,img,
  379.                 search='/photos/small/',
  380.                 src = $( this ).attr('src'),
  381.                 removePano = $('.largePanorama');
  382.  
  383.             removePano.length && removePano.remove();
  384.  
  385.             if( src.search(search) == -1 )  {
  386.                 ( src.search('logo-tos.png') > 0 || src.search('iw_panoramio.png') > 0 || src.search('/mw-panoramio/photos/thumbnail/') > 0 ) && (
  387.                     e.which != 3 && e.which == 1 && (
  388.                         window.open( $( this ).closest('a').attr('href'), '_blank' ),
  389.                         e.preventDefault()
  390.                     )
  391.                 );
  392.                 return false;
  393.             }
  394.  
  395.             pop = src.split(search).pop();
  396.             cl = pop.split('.').shift();
  397.     //		tagcl = '.'+cl;
  398.  
  399.             elem = $( '.zoom' );
  400.             img = $( '.theImg' );
  401.  
  402.             panocl = '.largePanorama';
  403.  
  404.             panoPhoto = 'http://www.panoramio.com/photo/' + cl;
  405.             linkLarge = 'http://static.panoramio.com/photos/large/' + pop;
  406.             linkHuge = 'http://static.panoramio.com/photos/1920x1280/' + pop;
  407.             linkOrginal = 'http://static.panoramio.com/photos/original/' + pop;
  408.             linkWrongPosition = 'http://www.panoramio.com/map_photo/?id=' + cl;
  409.  
  410.             panoElem = $( this ).parent().next().clone();
  411.             theTitle = $( this ).parent().parent().prev().clone().addClass('TheTitle');
  412.  
  413.             sizeLarge = new Image(); sizeHuge = new Image(); sizeOrginal = new Image();
  414.             sizeLarge.src = linkLarge; sizeHuge.src = linkHuge; sizeOrginal.src = linkOrginal;
  415.  
  416.             startState = GM_getValue('startState');
  417.             startStateLink = startState == 'Huge' ? linkHuge : startState == 'Large' && linkLarge;
  418.  
  419.             reloadHref = locDoc.search('maps.google') > 0 ? $(document).find('#link').attr('href') : locDoc.search('www.panoramio.com/map') > 0 && window.location.href;
  420.  
  421.             insertMore =
  422.                 '<div class="more"><span class="moreArrow skiptranslate">▼</span>'
  423.                     +		'<ul>'
  424.                     +			'<li><a class="reLoad" target="_self" href="'+reloadHref+'">Reload Map this Location</a></li>'
  425.                     +			'<li class="linkOrginal"><a target="_blank" href="'+linkOrginal+'">Orginal in new TAB</a></li>'
  426.                     +			'<li><a target=" _blank" href="'+linkWrongPosition+'">Sugest Location</a></li>'
  427.                     +			'<li><a class="imageRotate">Image Rotate</a></li>'
  428.                     +			'<li><a class="imageDetails">Image Details</a></li>'
  429.                     +			'<li><a class="configStartState">Default Size</a></li>'
  430.                     +		'</ul>'
  431.                     +	'</div>';
  432.  
  433.             insertRotate =
  434.                 '<div id="rotate">'
  435.                     +		'<span class="rotates rotateLeft skiptranslate">▼</span>'
  436.                     +		'<span class="rotates rotateRight skiptranslate">▼</span>'
  437.                     +	'</div>';
  438.  
  439.             function fn_defArea() {
  440.  
  441.                 var fn_defHtml = function(){
  442.                     var theImg		= 	$('.theImg'),
  443.                         rotates 	= 	parseInt( $( '.largePanorama' ).attr('data-rotate') ),
  444.                         imgWidth 	= 	theImg.width(),
  445.                         imgHeight 	= 	theImg.height(),
  446.                         areaResize 	= 	rotates === 0 	? 	'"0, 0, '+imgWidth+', '+(imgHeight/2)+'"' :
  447.                                         rotates == 	90 	? 	'"0, 0, '+(imgWidth/2)+', '+imgHeight+'"' :
  448.                                         rotates == 	180 ? 	'"0,'+(imgHeight/2)+', '+imgWidth+', '+imgHeight+'"' :
  449.                                         rotates == 	270 && 	'"'+(imgWidth/2)+', 0, '+imgWidth+', '+imgHeight+'"',
  450.                         areaClose 	= 	rotates === 0 	? 	'"0,'+(imgHeight/2)+', '+imgWidth+', '+imgHeight+'"' :
  451.                                         rotates == 	90 	? 	'"'+(imgWidth/2)+', 0, '+imgWidth+', '+imgHeight+'"' :
  452.                                         rotates == 	180 ? 	'"0, 0, '+imgWidth+', '+(imgHeight/2)+'"' :
  453.                                         rotates == 	270 && 	'"0, 0, '+(imgWidth/2)+', '+imgHeight+'"';
  454.  
  455.                     $('#mymap').html( '<area class="zoom" shape="rect" coords=' + areaResize + ' title="Zoom" data-rotate="'+rotates+'">' +
  456.                                       '<area class="close" shape="rect" coords=' + areaClose + ' title="Close" data-rotate="'+rotates+'">' );
  457.  
  458.                 },	fn_defListner = function(){
  459.                     elem = $('.zoom');
  460.                     img = $( '.theImg');
  461.                     elem.on('mouseup', function(e) {
  462.                         state = img.attr('src').search('large') > 0 ? 'Huge':'Large';
  463.                         e.which == 1 && this == e.target && (
  464.                             state == 'Huge' ? img.attr('src',linkHuge) : state == 'Large' && img.attr('src',linkLarge),
  465.                                 elem.parent().attr('data-state',state),
  466.                                 fn_defArea() ); });
  467.                     $( '.close' ).on('mouseup', function(e) {
  468.                         e.which == 1 && this == e.target && (
  469.                             $('.largePanorama').remove(),
  470.                                 $( document ).off('click', '.largePanorama, .zoom' ) ); });
  471.                 };
  472.                 setTimeout(fn_defHtml,10 );
  473.                 setTimeout(fn_defListner,20 );
  474.             }
  475.  
  476.             src.search(search) !== -1 && (
  477.                 $( 	'<div class="largePanorama '+cl+'" data-rotate="0" style="visibility:hidden;">'
  478.                     +		'<img class="theImg" usemap=" #mymap" src="'+startStateLink+'" />'
  479.                     +		'<map name="mymap" id="mymap" data-state="'+startState+'" />'
  480.                     +	'</div>' ).appendTo('body') );
  481.  
  482.             function fn_afterImgLoaded() {
  483.  
  484.                 $( theTitle ).prependTo( panocl ); $( insertMore ).appendTo( '.TheTitle' ); $( panoElem.clone().addClass('pano') ).appendTo( panocl );
  485.                 $( '<div id="imageDetails" class="'+cl+'"></div>' ).appendTo( panocl );
  486.  
  487.                 GM_xmlhttpRequest({
  488.                     method: "GET",
  489.                     url: panoPhoto,
  490.                     crossDomain: true,
  491.                     //onerror:
  492.                     onprogress: function(res) {
  493.                         var msg = "\n\r\t "
  494.                                 + "Onprogress Report."
  495.     //                            + "\nresponseText: " + res.responseText
  496.                                 + "\nreadyState: " + res.readyState
  497.                                 + "\nresponseHeaders: " + res.responseHeaders
  498.                                 + "\nstatus: " + res.status
  499.                                 + "\nstatusText: " + res.statusText
  500.                                 + "\nfinalUrl: " + res.finalUrl;
  501.     //						+ "\n\nContent-length: " + res.responseHeaders.match('Content-Length: \\d+').toString().split(': ').pop()
  502.  
  503.                     //    res.readyState == 4 &&
  504.                         console.log(msg);
  505.                     },
  506.                     onload: function(res) {
  507.                         var domain,href,split;
  508.                         res = res.responseText;
  509.  
  510.                         $('#imageDetails').html( $(res).find('#details').parent() );
  511.                         $( panoElem.clone().addClass('justImg') ).prependTo('.largePanorama .interim-info-card');
  512.  
  513.                         $('<div id="map_info_breadcrumbs"></div>').insertAfter('#details');
  514.                         $( $(res).find('#place') ).insertAfter('#details');
  515.  
  516.                         $( $(res).find('#map_info_breadcrumbs').html() ).appendTo('#map_info_breadcrumbs');
  517.                         $( '<span> • </span>' ).appendTo('#map_info_breadcrumbs');
  518.                         $( $(res).find('#map_info_name a') ).appendTo('#map_info_breadcrumbs');
  519.                         $( $(res).find('#location .geo') ).appendTo('#map_info_breadcrumbs');
  520.  
  521.                         $('#map_info_breadcrumbs').find('a').each(function(id,el){
  522.                                 domain = 'http://www.panoramio.com/map/',
  523.                                 href = $( el ).attr('href'),
  524.                                 split = href.split('/map/').pop();
  525.                             $( el ).addClass('nr'+id);
  526.                             split = split.replace('&z=12&','&z=1&').replace('&z=9&','&z=5&').replace('&z=4&','&z=1&');
  527.                             id !== 1 ? $( el ).attr('href', domain +  split) : $( el ).attr('href', domain);
  528.                         });
  529.                         $('.nr0').attr('href') == $('.nr1').attr('href') && $('.nr1').attr('href', domain +  split.replace('&z=1&','&z=12&').replace('&z=5&','&z=12&'));
  530.                     }
  531.                 });
  532.  
  533.                 function createLinks() {
  534.  
  535.                     //http://developer-agent.com/wp-content/uploads/2015/02/images_no_image_jpg14.jpg
  536.                     $(	'<div class="Size">'
  537.                         +		'<span class="LargeBottonLink"><a target=" _blank" href="'+linkLarge+'">Normal: '+( sizeLarge.naturalWidth + 'x' + sizeLarge.naturalHeight )+'</a></span>'
  538.                         +		'<span class="HugeBottonLink"><a target=" _blank" href="'+linkHuge+'">Large: '+( sizeHuge.naturalWidth + 'x' + sizeHuge.naturalHeight )+'</a></span>'
  539.                         +		'<span class="OrginalBottonLink"><a target=" _blank" href="'+linkOrginal+'">Orginal: '+( sizeOrginal.naturalWidth + 'x' + sizeOrginal.naturalHeight )+'</a></span>'
  540.                         +	'</div>' ).appendTo( panocl );
  541.  
  542.                     sizeOrginal = sizeOrginal.naturalWidth, sizeHuge = sizeHuge.naturalWidth;
  543.  
  544.                     sizeOrginal === sizeHuge ?
  545.                         $( '.OrginalBottonLink' ).hide() :
  546.                         sizeOrginal  >  sizeHuge && $( '.moreArrow, .OrginalBottonLink a' ).css('color','darkred');
  547.  
  548.                     sizeOrginal === sizeHuge && sizeOrginal === sizeLarge.naturalWidth &&
  549.                     $( '.HugeBottonLink, .OrginalBottonLink' ).hide();
  550.  
  551.                     sizeOrginal === 0 && $( '.linkOrginal' ).hide();
  552.  
  553.                     $( '.Size span' ).each(function(id,el){
  554.                         $( el ).text().search('0x0') > 0 && $( el ).hide(); });
  555.                 }
  556.  
  557.                 var override = setTimeout(function(){
  558.                     clearInterval(checkSize); $('.Size').length === 0 && createLinks();
  559.                     },2500),
  560.                     checkSize = setInterval(function(){
  561.                         sizeOrginal.naturalWidth > 10 && sizeHuge.naturalWidth > 10 && sizeLarge.naturalWidth > 10 && (
  562.                         clearTimeout(override), clearInterval(checkSize), $('.Size').length === 0 && createLinks() );
  563.                     },25);
  564.  
  565.                 $( '.moreArrow, .moreArrow font, .more' ).on('mousedown', function(e) {
  566.                     e.which == 1 && this == e.target && (
  567.                         $( '.more ul' ).show(), timer( 512 ),
  568.                             $( '.reLoad' ).attr('href', $(document).find('#link').attr('href') ) ); });
  569.  
  570.                 $( '.configStartState' ).on('click', function(e) {
  571.                     e.which == 1 && this == e.target && GM_setValue('startState', img.attr('src').search('large') > 0 ? 'Large':'Huge'); });
  572.  
  573.                 $( '.imageDetails, .TheTitle, .Size, .pano' ).on('mouseup', function(e) {
  574.                     var elemLoc = $( '#imageDetails' );
  575.                     l('elemLoc',elemLoc);
  576.                     g.ms === 0 && e.which == 1 && this == e.target && ( timer(64), elemLoc.is(':hidden') ? elemLoc.show(128) : elemLoc.hide(128) ); });
  577.  
  578.                 $( '.imageRotate' ).on('mouseup', function(e) {
  579.                     var elemLoc = $( '.largePanorama'), rotate = $( '#rotate' );
  580.                     e.which == 1 && this == e.target && (
  581.                         rotate.size() === 0 ? $( insertRotate ).appendTo( '.TheTitle'  ) : rotate.remove(),
  582.                             $( '.rotates' ).on('click', function(e) {
  583.                                 var rotate = parseInt( elemLoc.attr('data-rotate') );
  584.                                 e.which == 1 && this == e.target && (
  585.                                     rotate = $( this ).hasClass('rotateRight') ? ( rotate == 270 ? 0 : rotate + 90 ):( rotate === 0 ? 270 : rotate - 90 ),
  586.                                         elemLoc.attr('data-rotate', rotate ).css('cssText','transform: translate(-50%,-50%) rotate('+rotate+'deg)'),
  587.                                         $( '#imageDetails' ).css('cssText','transform: translate(-50%,-50%) rotate(-'+rotate+'deg)'),
  588.                                         fn_defArea() ); }) ); });
  589.  
  590.                 $( '#imageDetails' ).on('mouseleave', function(e) {
  591.                     $( this ).hide(256); });
  592.  
  593.                 $( '.more ul' ).on('mouseleave', function(e) {
  594.                     g.ms === 0 && this == e.target && $( this ).hide(); });
  595.  
  596.                 $( '.more li a' ).on('click', function(e) {
  597.                     g.ms === 0 && e.which == 1 && this == e.target && $( '.more ul' ).hide(); });
  598.             }
  599.  
  600.             var checkLoaded = setInterval(function(){
  601.                 $( '.theImg').width() > 50 && (
  602.                     clearInterval(checkLoaded), fn_afterImgLoaded(), $( panocl ).css('cssText',''), fn_defArea() );
  603.             },25);
  604.  
  605.             setInterval( function() {
  606.                 var elemLoc = $( '.largePanorama font');
  607.                 elemLoc.length > 0 && ( elemLoc.each( function(id,el) { $( el ).replaceWith( $( el ).text() ); }) );
  608.             },3000 );
  609.         });
  610.     }
  611.  
  612.     //----------------------------------------------------------------------------------------------------------//
  613.     //												  Run Sequence												//
  614.     //----------------------------------------------------------------------------------------------------------//
  615.  
  616.     $( document ).ready(function(){
  617.  
  618.         var rImg = $('img');
  619.  
  620.         ( locDoc.search('maps.google') > 0 || locDoc.search('www.panoramio.com/map') > 0 ) ? ( fn_BasicNew(), googleMaps() ) : (
  621.             locDoc.search('static.panoramio.com/photos/') > 0 && ( $(rImg).width() === 0 || $(rImg).width() === 0 ) ) && (
  622.                 rImg.attr('width', rImg.get(0).naturalWidth).attr('height', rImg.get(0).naturalHeight ),
  623.                 rImg.simulate('click'),
  624.                 console.log('IMG width', rImg.get(0).naturalWidth),
  625.                 console.log('IMG width var', rImg.get(0).naturalWidth),
  626.                 alert('IMG width')
  627.             );
  628.     });
  629.  
  630.     //----------------------------------------------------------------------------------------------------------//
  631.     //												    The END													//
  632.     //----------------------------------------------------------------------------------------------------------//
  633.  
  634.     $( document ).on('click','*',function(e){
  635.         this == e.target && console.log('target',e.target); });
  636.  
  637.  
  638.  
  639. }(jQuery));