﻿// ==================================
// JScript File
// mapsEngineResultados.js
// APEX Technologies
// Elson J. Frontany
// ==================================

	var gmarker;
//	var gmap;
//	var gmap2;
	var gcontextmenu;
	
	// 2009-05-06	SS		set default location
//	var lat = 18.467248;
//	var lng = -66.10896;

 	// =====================================================
	// | 
	// =====================================================
	function placeProperties() { 
	    var i=0;
	    if (typeof(avisosList) == 'undefined' || avisosList == null )return;
	    
		totalMarkers = $.evalJSON(avisosList).Properties.length;

       // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        var baseIcon = new GIcon();
        baseIcon.iconSize = new GSize(27, 46);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        var pointerIcon = new GIcon(baseIcon);
        pointerIcon.image = "App_Images/Maps/pin-yellow.png";
        // Set up our GMarkerOptions object
        markerOptions = { icon:pointerIcon, draggable: false };
		
		// Iteract with array
		
		
		
			var index=0;
		
		for (var marks in $.evalJSON(avisosList).Properties){
			if(index == totalMarkers)break;
			index++;
			marker = $.evalJSON(avisosList).Properties[marks];
		   lat = marker.stdLAT ;
		   lng = marker.stdLNG ;
		   title = marker.title;
		   desc = marker.description;
		   img = marker.img;
		   price = marker.price;
		   clasicode = marker.clasicode;
		   address1 = marker.stdAddress1;
		   address2 = marker.stdAddress2;

		  //alert("LAT:" + lat + "; LNG:" + lng);
		  var point = new GLatLng(lat, lng);

//		<div style="width:450px; overflow:hidden; padding:4px; background-color:#F2EDDB;">
//			<img src="#PHOTO" class="mapPhoto" />
//			<p class="mapPrice">#PRICE</p>
//			<p class="mapTitle">#TITLE</p>
//			<p class="mapAddress">#ADDRESS1</p>
//			<p class="mapAddress">#ADDRESS2</p>
//			<p class="mapNormal">clasicode <b class="mapClasicode">#CLASICODE</b></p>
//		</div>
		  var imgSrc = '<img src="'+((img!="")?img:'App_Images/resultados/sinFoto.gif')+'" class="mapPhoto" />';
		  var tmpMarker = new GMarker(point, markerOptions)
		  var tmpTooltip = '<div style="width:350px; overflow:hidden; padding:4px; background-color:#F2EDDB; border:1px solid #CCC;z-index:20;">'+imgSrc+'<p class="mapPrice">'+price+'</p><p class="mapTitle">'+title+'</p><p class="mapAddress">'+address1+'</p><p class="mapAddress">'+address2+'</p><p class="mapNormal">clasicode <b class="mapClasicode">'+clasicode+'</b></p></div>';

		  //tmpMarker.bindInfoWindow('<div style="width:450px; overflow:hidden; padding:4px; background-color:#F2EDDB;"><img src="'+img+'" class="mapPhoto" /><p class="mapPrice">'+price+'</p><p class="mapTitle">'+title+'</p><p class="mapAddress">'+address1+'</p><p class="mapAddress">'+address2+'</p><p class="mapNormal">clasicode <b class="mapClasicode">'+clasicode+'</b></p></div>');
		  tmpMarker.uniqueID = clasicode;

		  var tmpFrag = document.createElement('div');
		  tmpFrag.setAttribute('id', clasicode);
		  tmpFrag.innerHTML = tmpTooltip;
		  tmpTooltip = tmpFrag;

		  var tooltip = new Tooltip(tmpMarker,tmpTooltip,4); 
		  tmpMarker.tooltip = tooltip;

		  GEvent.addListener(tmpMarker,'mouseover',function(){ 
		  	this.setImage('App_Images/Maps/pin-red.png');
		  	this.tooltip.show();
		  }); 
		  GEvent.addListener(tmpMarker,'mouseout',function(){
		  	this.setImage('App_Images/Maps/pin-yellow.png');
		  	this.tooltip.hide();
		  });
		  GEvent.addListener(tmpMarker,'click',function(){
			//alert('http://192.168.11.34:1026/Clasificados/ResultadoDetalle.aspx?id=' + this.uniqueID);
		  	top.window.location = 'http://www.elnuevodia.com/clasificados/ResultadoDetalle.aspx?id=' + this.uniqueID;
		  });
		  
		  
			  if (typeof(gmap2)!= "undefined")
			 {	
//				alert('2');
				gmap2.addOverlay(new GMarker(point, markerOptions));
				//gmap2.setCenter(point);
				
				document.getElementById("hidLatitude").value = lat;
				document.getElementById("hidLongitude").value = lng; 

			 }
			  
			  if (typeof(gmap)!= "undefined")
			  {



//					alert('1');
		  			gmap.addOverlay(tmpMarker);
					gmap.addOverlay(tooltip);
		  			//gmap.setCenter(point);
//		  			var settime = 'var smallMapFrame = parent.document.getElementById("frmSmallMap.document");alert(smallMapFrame);';
//		  			
//		  			setTimeout(settime, "2000");
		  			
		  			
//		  			smallMapFrame.window.location.reload(true);
		  			
			  }
			
			 
		}
		
//		gmap.setCenter(point);
//		gmap2.setCenter(point);

	}
	// =====================================================
	// | 
	// =====================================================
	function resetProperties(){
		gmap.clearOverlays();
		placeProperties();
	}
	
	function resetProperties2(){
		gmap2.clearOverlays();
		placeProperties();
	}



	// =====================================================
	// === functions that perform the context menu options ===
	// | 
	// =====================================================
	function zoomIn() {
		// perform the requested operation
		gmap.zoomIn();
		// hide the context menu now that it has been used
		gcontextmenu.style.visibility="hidden";
	}      
	function zoomOut() {
		// perform the requested operation
		gmap.zoomOut();
		// hide the context menu now that it has been used
		gcontextmenu.style.visibility="hidden";
	}      
	function zoomInHere() {
		// perform the requested operation
		var point = gmap.fromContainerPixelToLatLng(clickedPixel)
		gmap.zoomIn(point,true);
		// hide the context menu now that it has been used
		gcontextmenu.style.visibility="hidden";
	}      
	function zoomOutHere() {
		// perform the requested operation
		var point = gmap.fromContainerPixelToLatLng(clickedPixel)
		gmap.setCenter(point,map.getZoom()-1); // There is no map.zoomOut() equivalent
		// hide the context menu now that it has been used
		gcontextmenu.style.visibility="hidden";
	}      
	function centreMapHere() {
		// perform the requested operation
		var point = gmap.fromContainerPixelToLatLng(clickedPixel)
		gmap.setCenter(point);
		// hide the context menu now that it has been used
		gcontextmenu.style.visibility="hidden";
	}
	function clearMarkers(){
	    gmap.clearOverlays();
		gcontextmenu.style.visibility="hidden";
	}
	function getMapLegendPos(mapLevel){
		var returnVal = 0;
		switch(mapLevel){
			case 19:
			case 18:
			case 17: returnVal = 7; break;
			case 16:
			case 15: returnVal = 6; break;
			case 14:
			case 13: returnVal = 5; break;
			case 12:
			case 11: returnVal = 4; break;
			case 10:
			case 9: returnVal = 3; break;
			case 8:
			case 7: returnVal = 2; break;
			case 6:
			case 5:
			case 4: returnVal = 1; break;
			case 3:
			case 2:
			case 1: returnVal = 0; break;
			default: returnVal = 0; break;
		}
		return returnVal;
	}
	function setMapLegend(zoomLevel){ 
		var tmpMapLegendPos = getMapLegendPos(zoomLevel);
		$('#mapZoomLegend').css('background-position', '0px -' + (tmpMapLegendPos*20) + 'px' );
	}

	// Initialize Map Maximize
    function initialize() {
    
      if (GBrowserIsCompatible()) {
		      
        var map = new GMap2(document.getElementById("mapMaxMain"));
        map.setCenter(new GLatLng(18.245003052249714, -66.48651123046875), 9);
//map.setCenter(new GLatLng(lat, lng), 16);
        //map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
		map.setMapType(G_NORMAL_MAP); 


      // === create the context menu div ===
      var contextmenu = document.createElement("div");
      contextmenu.style.visibility="hidden";
      contextmenu.style.background="#ffffff";
      contextmenu.style.border="1px solid #8888FF";

      // RIGHT CLICK MENU
      contextmenu.innerHTML = '<a href="javascript:zoomIn()"><div class="context">&nbsp;&nbsp;Zoom in&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomOut()"><div class="context">&nbsp;&nbsp;Zoom out&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomInHere()"><div class="context">&nbsp;&nbsp;Zoom in here&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomOutHere()"><div class="context">&nbsp;&nbsp;Zoom out here&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:centreMapHere()"><div class="context">&nbsp;&nbsp;Centre map here&nbsp;&nbsp;</div></a>'
                            ;

      map.getContainer().appendChild(contextmenu);

      // === listen for singlerightclick ===
      GEvent.addListener(map,"singlerightclick",function(pixel,tile) {
        // store the "pixel" info in case we need it later
        // adjust the context menu location if near an egde
        // create a GControlPosition
        // apply it to the context menu, and make the context menu visible
        clickedPixel = pixel;
        var x=pixel.x;
        var y=pixel.y;
        if (x > map.getSize().width - 120) { x = map.getSize().width - 120 }
        if (y > map.getSize().height - 100) { y = map.getSize().height - 100 }
        var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));  
        pos.apply(contextmenu);
        contextmenu.style.visibility = "visible";
      });

      // === If the user clicks on the map, close the context menu ===
      GEvent.addListener(map, "click", function() {
        contextmenu.style.visibility="hidden";
      });

		gmap = map;
		gcontextmenu = contextmenu;

      }
    }
	
	
	// Initialize map Minimize
    function initialize2() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("mapMinMain"));
        map.setCenter(new GLatLng(18.245003052249714, -66.48651123046875), 7);
        //map.addControl(new GSmallMapControl());
        //map.addControl(new GMapTypeControl());
		//map.setMapType(G_MAP); 

		// === If the user clicks on the map, close the context menu ===
		GEvent.addListener(map, "click", function() {
			parent.document.getElementById('frmBigMap').style.display = 'block';
			parent.document.getElementById('frmBigMap').src = parent.document.getElementById('frmBigMap').src;
		});
		gmap2 = map;
      }
    }



 // ============================================ Setting Area =============================================


//	// On Page Load (onLoad)
//	$(document).ready(function(){
//		// Declare tmp variable
//		var tmpDiv;
//		alert('entre');
//		if (typeof (document.getElementById("mapMaximize")) != 'undefined')
//		{
//		// Initialize mapMaximize =========================================
//		// Set width & Height for mapMaximize
//			$('#mapMaximize').css('width', '737px');

//			// Insert Node in Div (PlaceHolder)
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapMaxTop');
//			$('#mapMaximize').append(tmpDiv);
//			$('#mapMaxTop').css('width', '737px');
//			$('#mapMaxTop').css('height', '30px');
//			$('#mapMaxTop').css('background-image', 'url(App_Images/Maps/mapMaxTop.jpg)');

//			// Insert Node in Div (PlaceHolder)
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapMaxMain');
//			$('#mapMaximize').append(tmpDiv);
//			$('#mapMaxMain').css('width', '737px');
//			$('#mapMaxMain').css('height', '350px');

//			// Insert Node in Div (PlaceHolder)
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapMaxBottom');
//			$('#mapMaximize').append(tmpDiv);
//			$('#mapMaxBottom').css('width', '737px');
//			$('#mapMaxBottom').css('height', '38px');
//			$('#mapMaxBottom').css('background-image', 'url(App_Images/Maps/mapMaxBottom.jpg)');

//			// Insert Node in Div (#mapMaxTop)
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapHide');
//			$('#mapMaxTop').append(tmpDiv);
//			$('#mapHide').click(function(){
//				alert('Minimize Map');
//			});

//			// Insert Node in Div (#mapMaxBottom)
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapZoomIN');
//			$('#mapMaxBottom').append(tmpDiv);
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapZoomLegend');
//			$('#mapMaxBottom').append(tmpDiv);
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapZoomOUT');
//			$('#mapMaxBottom').append(tmpDiv);

//			$('#mapZoomIN').click(function(){
//				zoomIn();
//				setMapLegend(gmap.getZoom());
//			});
//			$('#mapZoomOUT').click(function(){
//				zoomOut();
//				setMapLegend(gmap.getZoom());
//			});

//			// Init GoogleMap (mapMaximize)
//			initialize();
//		}

//		if (typeof (document.getElementById("mapMinimize")) != 'undefined')
//		{

//			// Initialize mapMinimize =========================================
//			// Set width & Height for mapMinimize
//			$('#mapMinimize').css('width', '194px');
//			$('#mapMinimize').css('overflow', 'hidden');

//			// Insert Node in Div (PlaceHolder)
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapMinMain');
//			$('#mapMinimize').append(tmpDiv);
//			$('#mapMinMain').css('width', '192px');
//			$('#mapMinMain').css('height', '145px');
//			$('#mapMinMain').css('border', '1px solid #959593');

//			// Insert Node in Div (PlaceHolder)
//			tmpDiv = document.createElement("div");
//			tmpDiv.setAttribute('id', 'mapMinBottom');
//			$('#mapMinimize').append(tmpDiv);
//			$('#mapMinBottom').css('width', '194px');
//			$('#mapMinBottom').css('height', '38px');
//			$('#mapMinBottom').css('background-image', 'url(App_Images/Maps/mapMinBottom.jpg)');

//			// Init GoogleMap (mapMinimize)
//			initialize2();
//			
//		}




////		// Place Properties in array ===================================
////		placeProperties();
//		
//	});



