//// ==================================
//// JScript File
//// mapsEngineResultados.js
//// APEX Technologies
//// Elson J. Frontany
//// ==================================

//	var gmarker;
//	var gmap;
//	var gmap2;
//	var gcontextmenu;

// 	// =====================================================
//	// | 
//	// =====================================================
//	function placeProperties() { 
//	    var i=0;
//	  
//		totalMarkers = $.evalJSON(avisosListDetalle).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(avisosListDetalle).Properties){
//		if(index == totalMarkers)break;
//			index++;
//			marker = $.evalJSON(avisosListDetalle).Properties[marks];
//		   lat = marker.stdLAT ;
//		   lng = marker.stdLNG ;
//		  //alert("LAT:" + lat + "; LNG:" + lng);
//		  var point = new GLatLng(lat, lng);
//		  gmap.addOverlay(new GMarker(point, markerOptions));
//		}
//		gmap.setCenter(point);
//		
//	}
//	// =====================================================
//	// | 
//	// =====================================================
//	function resetProperties(){
//		gmap.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("mapDetalleMain"));
//        map.setCenter(new GLatLng(18.467248, -66.10896), 16);
//        //map.addControl(new GSmallMapControl());
//        //map.addControl(new GMapTypeControl());
//		map.setMapType(G_HYBRID_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";
//      });
//		//GEvent.addListener(map, "singlerightclick", mapSingleRightClick); 


//		gmap = map;
//		gcontextmenu = contextmenu;

//      }
//    }
//	
//	
//	
//	
//	// =============================== SETTING AREA =====================================
//	// On Page Load (onLoad)
////	$(document).ready(function(){
////		// Declare tmp variable
////		var tmpDiv;

////		// Initialize mapMaximize =========================================
////		// Set width & Height for mapMaximize
////		$('#mapDetalle').css('width', '291px');
////		$('#mapDetalle').css('border', '1px solid #D6D6D6');
////		$('#mapDetalle').css('padding', '6px');


////		// Insert Node in Div (PlaceHolder)
////		tmpDiv = document.createElement("div");
////		tmpDiv.setAttribute('id', 'mapDetalleMain');
////		$('#mapDetalle').append(tmpDiv);
////		$('#mapDetalleMain').css('width', '291px');
////		$('#mapDetalleMain').css('height', '217px');

////		// Insert Node in Div (PlaceHolder)
////		tmpDiv = document.createElement("div");
////		tmpDiv.setAttribute('id', 'mapDetalleBottom');
////		$('#mapDetalle').append(tmpDiv);
////		$('#mapDetalleBottom').css('width', '293px');
////		$('#mapDetalleBottom').css('height', '38px');
////		$('#mapDetalleBottom').css('background-image', 'url(App_Images/Maps/mapDetalleBottom.jpg)');
////		
////		// Insert Node in Div (#mapDetalleBottom)
////		tmpDiv = document.createElement("div");
////		tmpDiv.setAttribute('id', 'mapZoomIN');
////		$('#mapDetalleBottom').append(tmpDiv);
////		tmpDiv = document.createElement("div");
////		tmpDiv.setAttribute('id', 'mapZoomLegend');
////		$('#mapDetalleBottom').append(tmpDiv);
////		tmpDiv = document.createElement("div");
////		tmpDiv.setAttribute('id', 'mapZoomOUT');
////		$('#mapDetalleBottom').append(tmpDiv);
////		tmpDiv = document.createElement("div");
////		tmpDiv.setAttribute('id', 'mapExpand');
////		$('#mapDetalleBottom').append(tmpDiv);

////		$('#mapZoomIN').click(function(){
////			zoomIn();
////			setMapLegend(gmap.getZoom());
////		});
////		$('#mapZoomOUT').click(function(){
////			zoomOut();
////			setMapLegend(gmap.getZoom());
////		});
////		$('#mapExpand').click(function(){
////			alert('Expand Map');
////		});



////		// Init GoogleMap (mapDetalle)
////		initialize();


////		// Place Properties in array ===================================
////		placeProperties();
////		
////	});

	var gmarker;
	var gmap;
	var gmap2;
	var gcontextmenu;

 	// =====================================================
	// | 
	// =====================================================
	function placeProperties() { 
	    var i=0;
		totalMarkers = $.evalJSON(avisosListDetalle).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 };
		
		$.each($.evalJSON(avisosListDetalle).Properties, function(i, marker){
		   lat = marker.stdLAT ;
		   lng = marker.stdLNG ;
		   var point = new GLatLng(lat, lng);
		   gmap.addOverlay(new GMarker(point, markerOptions));
		});
		
		if(totalMarkers>0) {
			gmap.setCenter(new GLatLng(lat, lng));
			setMapLegend(gmap.getZoom());
		}
		
	}
	// =====================================================
	// | 
	// =====================================================
	function resetProperties(){
		gmap.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("mapDetalleMain"));
        map.setCenter(new GLatLng(18.467248, -66.10896), 16);
        //map.addControl(new GSmallMapControl());
        //map.addControl(new GMapTypeControl());
		map.setMapType(G_HYBRID_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";
      });
		//GEvent.addListener(map, "singlerightclick", mapSingleRightClick); 


		gmap = map;
		gcontextmenu = contextmenu;

      }
    }
	
	 // On Page Load (onLoad)
	$(document).ready(function(){
		// Declare tmp variable
		if (document.getElementById("mapDetalle") == null)return false;
		var tmpDiv;

		// Initialize mapMaximize =========================================
		// Set width & Height for mapMaximize
		$('#mapDetalle').css('width', '307px');
		$('#mapDetalle').css('border', '1px solid #D6D6D6');
		$('#mapDetalle').css('padding', '6px');
		$('#mapDetalle').css('margin-top', '10px');

		// Insert Node in Div (PlaceHolder)
		tmpDiv = document.createElement("div");
		tmpDiv.setAttribute('id', 'mapDetalleMain');
		$('#mapDetalle').append(tmpDiv);
		$('#mapDetalleMain').css('width', '291px');
		$('#mapDetalleMain').css('height', '217px');
        $('#mapDetalleMain').css('overflow', 'hidden');

		// Insert Node in Div (PlaceHolder)
		tmpDiv = document.createElement("div");
		tmpDiv.setAttribute('id', 'mapDetalleBottom');
		$('#mapDetalle').append(tmpDiv);
		$('#mapDetalleBottom').css('width', '293px');
		$('#mapDetalleBottom').css('height', '38px');
		$('#mapDetalleBottom').css('background-image', 'url(App_Images/Maps/mapDetalleBottom2.jpg)');
		
		// Insert Node in Div (#mapDetalleBottom)
		tmpDiv = document.createElement("div");
		tmpDiv.setAttribute('id', 'mapZoomIN');
		$('#mapDetalleBottom').append(tmpDiv);
		tmpDiv = document.createElement("div");
		tmpDiv.setAttribute('id', 'mapZoomLegend');
		$('#mapDetalleBottom').append(tmpDiv);
		
		
		$('#mapZoomLegend').css('width', '54px' );
		$('#mapZoomLegend').css('height', '20px' );
		$('#mapZoomLegend').css('margin-top', '11px' );
		$('#mapZoomLegend').css('margin-left', '2px' );
		$('#mapZoomLegend').css('float', 'left' );
		$('#mapZoomLegend').css('background-position', '0px 0px' );
		$('#mapZoomLegend').css('background-image', 'url(App_Images/Maps/mapIconZoomLegend.gif)' );
		
		
		tmpDiv = document.createElement("div");
		tmpDiv.setAttribute('id', 'mapZoomOUT');
		$('#mapDetalleBottom').append(tmpDiv);
		//tmpDiv = document.createElement("div");
		//tmpDiv.setAttribute('id', 'mapExpand');
		//$('#mapDetalleBottom').append(tmpDiv);


		$('#mapZoomIN').css('cursor', 'pointer');
		$('#mapZoomIN').css('width', '17px');
		$('#mapZoomIN').css('background-image', 'url(App_Images/Maps/mapIconZoomIN.gif)');
		$('#mapZoomIN').css('height', '17px');
		$('#mapZoomIN').css('margin-top', '10px');
		$('#mapZoomIN').css('margin-left', '7px');
		$('#mapZoomIN').css('float', 'left');
		
		$('#mapZoomIN').click(function(){
			zoomIn();
			setMapLegend(gmap.getZoom());
		});
		
		$('#mapZoomOUT').css('cursor', 'pointer');
		$('#mapZoomOUT').css('width', '17px');
		$('#mapZoomOUT').css('background-image', 'url(App_Images/Maps/mapIconZoomOUT.gif)');
		$('#mapZoomOUT').css('height', '17px');
		$('#mapZoomOUT').css('margin-top', '10px');
		$('#mapZoomOUT').css('margin-left', '3px');
		$('#mapZoomOUT').css('float', 'left');
		
		
		$('#mapZoomOUT').click(function(){
			zoomOut();
			setMapLegend(gmap.getZoom());
		});
		//$('#mapExpand').click(function(){
		//	alert('Expand Map');
		//});



		// Init GoogleMap (mapDetalle)
		initialize();


		// Place Properties in array ===================================
		placeProperties();
		
	});
	
	
	// =============================== SETTING AREA =====================================
//	// On Page Load (onLoad)
//	$(document).ready(function(){
//		// Declare tmp variable
//		var tmpDiv;

//		// Initialize mapMaximize =========================================
//		// Set width & Height for mapMaximize
//		$('#mapDetalle').css('width', '307px');
//		$('#mapDetalle').css('border', '1px solid #D6D6D6');
//		$('#mapDetalle').css('padding', '6px');
//		$('#mapDetalle').css('margin-top', '10px');

//		// Insert Node in Div (PlaceHolder)
//		tmpDiv = document.createElement("div");
//		tmpDiv.setAttribute('id', 'mapDetalleMain');
//		$('#mapDetalle').append(tmpDiv);
//		$('#mapDetalleMain').css('width', '291px');
//		$('#mapDetalleMain').css('height', '217px');

//		// Insert Node in Div (PlaceHolder)
//		tmpDiv = document.createElement("div");
//		tmpDiv.setAttribute('id', 'mapDetalleBottom');
//		$('#mapDetalle').append(tmpDiv);
//		$('#mapDetalleBottom').css('width', '293px');
//		$('#mapDetalleBottom').css('height', '38px');
//		$('#mapDetalleBottom').css('background-image', 'url(App_Images/Maps/mapDetalleBottom.jpg)');
//		
//		// Insert Node in Div (#mapDetalleBottom)
//		tmpDiv = document.createElement("div");
//		tmpDiv.setAttribute('id', 'mapZoomIN');
//		$('#mapDetalleBottom').append(tmpDiv);
//		tmpDiv = document.createElement("div");
//		tmpDiv.setAttribute('id', 'mapZoomLegend');
//		$('#mapDetalleBottom').append(tmpDiv);
//		tmpDiv = document.createElement("div");
//		tmpDiv.setAttribute('id', 'mapZoomOUT');
//		$('#mapDetalleBottom').append(tmpDiv);
//		//tmpDiv = document.createElement("div");
//		//tmpDiv.setAttribute('id', 'mapExpand');
//		//$('#mapDetalleBottom').append(tmpDiv);

//		alert(document.getElementById("mapZoomIN"));

//		$('#mapZoomIN').click(function(){
//			zoomIn();
//			setMapLegend(gmap.getZoom());
//		});
//		$('#mapZoomOUT').click(function(){
//			zoomOut();
//			setMapLegend(gmap.getZoom());
//		});
//		//$('#mapExpand').click(function(){
//		//	alert('Expand Map');
//		//});



//		// Init GoogleMap (mapDetalle)
//		initialize();


//		// Place Properties in array ===================================
//		placeProperties();
//		
//	});