///////////////////////////////////////////////////////////////////////////////////////
// GOOGLE MAPS
////////////////////////////////////////////////////////////////////////////////////////
    var donde_estoy="modulos/home/google_maps_malaga/";
	
	var geocoder;
	var map;
    var center;
	var gmarkers = [];
	var gmarkers_punto = [];
	numero_marcas=1;
    var tooltip = document.createElement("div");
		
	
	function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
		var anchor=marker.getIcon().iconAnchor;
		var width=marker.getIcon().iconSize.width;
		var height=tooltip.clientHeight;
		var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width-18, offset.y - point.y -anchor.y -height-2));
		pos.apply(tooltip);
		tooltip.style.visibility="visible";
      }
	  
	/////////////
   // Crear marca, y pogon texto 
   ////////////////
  
	function createMarker(point,myIcon,dia,url_dia,nombre,cofradia_id,imagen,url_ficha ,url_itinerario,url_galeria_fotografica,url_informacion_completa,comentarios_url,comentarios_numero,anecdotas_url,anecdotas_numero) {
		
	  var marker = new GMarker(point,{icon:myIcon});
      var comentarios="<tr><td colspan='2'>&nbsp;</td></tr>"; 
      var anecdotas="<tr><td colspan='2'>&nbsp;</td></tr>";
	
       comentarios="<tr><td colspan='2'><a href='" + comentarios_url + "' style='font-weight:bold; text-decoration:none; color:black'>comentarios (" + comentarios_numero + ") ver &#9658;</a> </td></tr>";
		 
	   anecdotas="<tr><td colspan='2'><a href='" + anecdotas_url + "' style='font-weight:bold; text-decoration:none; color:black'>anecdotas (" + anecdotas_numero + ") ver &#9658;</a></td></tr>";
	
	 
	  var html="<div id='pest_cofradia'><table width='300' border='0' cellspacing='0' cellpadding='0'><tr><td width='103' rowspan='5' align='center' valign='middle'><img src='" + imagen + "'></td><td colspan='2'><span class='cofradia'><b>" + nombre + "</b></span></td></tr><tr><td width='174'>" + dia + " </td><td width='123'><a href='cofradias_dias.php?dia_semana=" + url_dia + "' target='_self'>ver dia </a> </td></tr>"+ comentarios +" "+ anecdotas +"<tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan='3'><span class='margen'><a href='cofradias_ficha.php?dia_semana=" + url_dia + "&id=" + cofradia_id + "' target='_self'>ver cofradia </a></span><span class='margen'><a href='" + url_itinerario + "'>ver itinerario</a></span><span class='margen'><a href='" + url_galeria_fotografica + "'>galer&iacute;a fotogr&aacute;fica</a></span></td></tr></table></div>";
	 
		  ficha='<div class="caja_pinteres">';
		  				  
		  ficha+='<div class="titulo"><b>'+nombre+'</b></div>'
		  ficha+='</div>';
		  
	  marker.tooltip = ficha ;
	    
	   GEvent.addListener(marker, "click", function() {
		 marker.openInfoWindowHtml(html);
	  });
		   
	  GEvent.addListener(marker,"mouseover", function() {
          		showTooltip(marker);
       });
       GEvent.addListener(marker,"mouseout", function() {
				tooltip.style.visibility="hidden"
       });
		
		
	  return marker;
	}


///////////////////////////////////////
// CONTROL DE ZOOMM MAS
//////////////////////////////////////
var Control_Zoom_IN = function() {	};

Control_Zoom_IN.prototype = new GControl(true);

Control_Zoom_IN.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML = '<img style="cursor:pointer" src="'+ donde_estoy +'images/ico_ampliar.png" border="0">';
	
	container.style.width='30px';
	container.style.height='30px';
	
	
	GEvent.addDomListener(container, "click", function() {
		map.zoomIn();
	});
	
	map.getContainer().appendChild(container);
	
	return container;
};

Control_Zoom_IN.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 10));
}
/////////////////////////////


///////////////////////////////////////
// CONTROL DE ZOOMM MENOS
//////////////////////////////////////
var Control_Zoom_OUT = function() {	};

Control_Zoom_OUT.prototype = new GControl(true);

Control_Zoom_OUT.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML = '<img style="cursor:pointer" src="'+ donde_estoy +'images/ico_alejar.png" border="0">';
	container.style.width='30px';
	container.style.height='30px';
	
	
	GEvent.addDomListener(container, "click", function() {
		map.zoomOut();
		
	});
	
	map.getContainer().appendChild(container);
	
	return container;
};

Control_Zoom_OUT.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(35, 10));
}
/////////////////////////////


///////////////////////////////////////
// CONTROL DE MAPA -- SATELITE
//////////////////////////////////////
var Control_MAPA_SATELITE = function() {	};

Control_MAPA_SATELITE.prototype = new GControl(true);

Control_MAPA_SATELITE.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML = '<img style="cursor:pointer" src="'+ donde_estoy +'images/ico_satelite.png" border="0">';
	container.style.width='30px';
	container.style.height='30px';
	container.style.left='280px';
	
	GEvent.addDomListener(container, "click", function() {
		map.setMapType(G_SATELLITE_MAP);
	});
	
	map.getContainer().appendChild(container);
	
	return container;
};

Control_MAPA_SATELITE.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(130, 10));
}

///////////////////////////////////////
// CONTROL DE MAPA -- DIBUJO
//////////////////////////////////////
var Control_MAPA_DIBUJO = function() {	};

Control_MAPA_DIBUJO.prototype = new GControl(true);

Control_MAPA_DIBUJO.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML = '<img style="cursor:pointer" src="'+ donde_estoy +'images/ico_mapa.png" border="0">';
	container.style.width='30px';
	container.style.height='30px';
	container.style.left='380px';
	
	
	GEvent.addDomListener(container, "click", function() {
		map.setMapType(G_NORMAL_MAP);
	});
	
	map.getContainer().appendChild(container);
	
	return container;
};

Control_MAPA_DIBUJO.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(50, 10));
}


	  

/////////////////////////////////////////////////////////////////

    //Cargar el mapa con las opciones que desses
    function load() {

      if (GBrowserIsCompatible()) {
	 	  
		map = new GMap2(document.getElementById("map")); // Mapa de google
		
		
        map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
        tooltip.style.visibility="hidden";
	  
		geocoder = new GClientGeocoder();
		
		// Controles de zoom
  	 	map.addControl(new Control_Zoom_IN());
		map.addControl(new Control_Zoom_OUT());
		
		// tipo del mapa
		map.addControl(new Control_MAPA_DIBUJO()); // Control del mapa de dibujo
		map.addControl(new Control_MAPA_SATELITE()); // Control del mapa de satelite
		
		
		
      // ====== Restringir el zoom a un maximo y un minimo =====
      // Get the list of map types      
      var mt = map.getMapTypes();
      // Sobreesccribe las funciones de getMinimumResolution() y getMaximumResolution() 

      for (var i=0; i<mt.length; i++) {
        mt[i].getMinimumResolution = function() {return 8;} // Zoom minimo 13
        mt[i].getMaximumResolution = function() {return 18;}  // Zoom maximo 7
      }
	  
	  
	   center = new GLatLng(36.723475, -4.420452); // Centro de Malaga	  		
		

		map.setCenter(center,14); //Centro del mapa, con zoom de 13
        map.setMapType(G_NORMAL_MAP);

////////////////////////////////////////////////////////
      // Add a move listener to restrict the bounds range
      GEvent.addListener(map, "move", function() {
        checkBounds();
      });

      // The allowed region which the whole map must be within
	  // Limite de la region donde se mueve
	   var allowedBounds = new GLatLngBounds(new GLatLng(35.478565,-6.635742),new GLatLng(38.099983,-2.263184)); 
      
      // If the map position is out of range, move it back
      function checkBounds() {
        // Perform the check and return if OK
        if (allowedBounds.contains(map.getCenter())) {
          return;
        }
        // It`s not OK, so find the nearest allowed point and move there
        var C = map.getCenter();
        var X = C.lng();
        var Y = C.lat();

        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();

        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
		

        if (X < AminX) {X = AminX;}
        if (X > AmaxX) {X = AmaxX;}
        if (Y < AminY) {Y = AminY;}
        if (Y > AmaxY) {Y = AmaxY;}
        //alert ("Restricting "+Y+" "+X);
        map.setCenter(new GLatLng(Y,X));
      }


///////////////////////////////////////////////////////

        // Download the data in data.xml and load it on the map. The format we
        // expect is:
        // <markers>
        //   <marker lat="37.441" lng="-122.141"/>
        //   <marker lat="37.322" lng="-121.213"/>
        // </markers>
				
        GDownloadUrl(donde_estoy +"coordenadas.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
				
          for (var i = 0; i < markers.length; i++) {
				
		    var latitud              = markers[i].getAttribute("latitud")
            var longitud             = markers[i].getAttribute("longitud")
		    var dia                  = markers[i].getAttribute("dia")
			var url_dia              = markers[i].getAttribute("url_dia")
			
			var nombre               = markers[i].getAttribute("nombre")
			var cofradia_id          = markers[i].getAttribute("cofradia_id")
			
			var imagen               = markers[i].getAttribute("imagen")
			
		    var url_ficha                 = markers[i].getAttribute("url_ficha")
            var url_itinerario            = markers[i].getAttribute("url_itinerario")
		    var url_galeria_fotografica   = markers[i].getAttribute("url_galeria_fotografica")
			var url_informacion_completa  = markers[i].getAttribute("url_informacion_completa")
			
			var comentarios_url           = markers[i].getAttribute("comentarios_url")
		    var comentarios_numero        = markers[i].getAttribute("comentarios_numero")
			
			var anecdotas_url           = markers[i].getAttribute("anecdotas_url")
			var anecdotas_numero        = markers[i].getAttribute("anecdotas_numero")

		       
		  // Icono de del sitio	  			
			var icon = new GIcon();
		
				icon.image = donde_estoy +"images/ico_pinteres.png";
				icon.shadow = donde_estoy +"images/sombra_pinteres.png";
				icon.iconSize = new GSize(17, 20);
				icon.shadowSize = new GSize(27, 20);
				icon.iconAnchor = new GPoint(17, 20);
				icon.infoWindowAnchor = new GPoint(16, 10);
		
		
            var point = new GLatLng(parseFloat(latitud),
                                    parseFloat(longitud));
		
		  // Poner el punto
	      map.addOverlay(createMarker(point,icon,dia,url_dia,nombre,cofradia_id,imagen,url_ficha,url_itinerario,url_galeria_fotografica,url_informacion_completa,comentarios_url,comentarios_numero,anecdotas_url,anecdotas_numero));
			
          }
		   ///////////////////////////////////////////
		/// Crear las marcas y mostrar solo segun el zoom
		//////////////////////////////////////////
		/*
		var mgr = new GMarkerManager(map);
		 mgr.addMarkers(marcas_lugares, 12); // Iconos de ciudaddes con zoom 7 y mas
		 mgr.refresh();
		 */
		 
		  
	 
        });
        
     
	   }
   } 
   
   
   
    //]]>