// Funciones para tratar el mapa    

    // Objeto utilizado para las tiendas. Consta del nombre, latitud, longitud, direccion, enlace y ciudad.
    function tienda(nombre,x,y,direccion,enlace,ciudad)
    {
        this.nombre = nombre;
        this.x = x;
        this.y = y;
        this.direccion= direccion;
        this.ciudad= ciudad;
        this.enlace=enlace;
    }
	
    // Objeto utilizado para tratar las ciudades. Consta del nombre, latitud y longitud
    function ciudad(nombre,x,y){
        this.nombre = nombre;
        this.x = x;
        this.y = y;
    }

    // Funcion utilizada para comprobar que no se dejan en blanco los datos obligatorios de los formularios
	function compruebaDatos(formulario){
      if (formulario.nombre.value == "")
     {
        alert("Tienes que introducir el nombre de la tienda");
        return false;
     }

  if (formulario.latitud.value == "")
     {
        alert("Tienes que pinchar en el mapa para introducir las coordenadas de la tienda");
        return false;
     }

  if (formulario.longitud.value == "")
     {
        alert("Tienes que pinchar en el mapa para introducir las coordenadas de la tienda");
        return false;
     }

  return true;
}

var map;


function cargaMapa(){   
	
    map = new GMap2(document.getElementById("map"));
        
    map.setCenter(new GLatLng(40.41164171074953, -3.7398040294647217), 11, G_HYBRID_MAP); // Lo centramos en el expocomic
    map.addControl(new GLargeMapControl3D());
    map.addControl(new GMapTypeControl());

    map.enableDoubleClickZoom();  
    map.enableContinuousZoom();
    map.enableScrollWheelZoom();
    
    
    





    
//    map.setCenter(new GLatLng(41.37350769909042, 2.15256929397583), 12); // Lo centrams en el salon del comic de Barcelona
                        
    var marker;
    
          
    GDownloadUrl("datos.xml", function(data, responseCode) {    
         var xml = GXml.parse(data);
         //var markers = xml.documentElement.getElementsByTagName("tienda");		
         var markers = xml.getElementsByTagName("tienda");		
  
  
         var listaCiudades = "";
         var arrayCiudades = new Array();
         var contador = 0;
         var listadoEnlaces = "";

         for (var i = 0; i < markers.length; i++) {						
		  var tiendaActual =  new tienda(markers[i].getAttribute("nombre"),
		                      parseFloat(markers[i].getAttribute("longitud")),parseFloat(markers[i].getAttribute("latitud")),				   markers[i].getAttribute("direccion"),markers[i].getAttribute("enlace"), markers[i].getAttribute("ciudad"));		
              marker = createMarker(tiendaActual);   
              map.addOverlay(marker);
       
              // Comprobamos que no hemos guardado la ciudad
               if (listaCiudades.indexOf(markers[i].getAttribute("ciudad")) == -1 ) {
                         listaCiudades+= "," + markers[i].getAttribute("ciudad");       
                         arrayCiudades[contador] = new ciudad(markers[i].getAttribute("ciudad"),  parseFloat(markers[i].getAttribute("longitud")), parseFloat(markers[i].getAttribute("latitud")));
                         contador++;  
              }


            }
             
             // Los metemos en la pagina, en su capa correspondiente
             listadoEnlaces +="<div style='float:left;margin-right:10px'>";          
             for (i=0;i<arrayCiudades.length;i++){
                     var ciudadActual = arrayCiudades[i];
                     
                     if (Math.floor(arrayCiudades.length /2) == i) {
                         listadoEnlaces +="</div><div style='float:left;margin-right:10px'>";        
                     }
                     listadoEnlaces += "<a href='javascript:centrarPunto(" +  ciudadActual.x+","+ciudadActual.y+")'>"+ciudadActual.nombre +"</a><br>";
              }
              listadoEnlaces +="</div>";
                        
              
             document.getElementById('listado').innerHTML = listadoEnlaces;   
         
      });
    
    // Para sacar el punto actual
    GEvent.addListener(map, "click", function(overlay, point)  {
		  document.formularioAlta.longitud.value=point.x;
		  document.formularioAlta.latitud.value=point.y;

		  document.formularioModificacion.longitud.value=point.x;
		  document.formularioModificacion.latitud.value=point.y;

		  document.formularioBaja.longitud.value=point.x;
		  document.formularioBaja.latitud.value=point.y; 
    });

}
   


    // Creates a marker whose info window displays the given number
      function createMarker(tiendaActual) {
          
          var enlace=tiendaActual.enlace;
          var nombre=tiendaActual.nombre;
          var direccion=tiendaActual.direccion;
          var web = tiendaActual.enlace;
	      var latitud = tiendaActual.y;
	      var longitud = tiendaActual.x;
      
	  
          var marker = new GMarker(new GPoint(longitud,latitud));
          var html = "<div id='pestana'><span style='color:#000000'><b>" + nombre + "-" + direccion;
          html = sustituirEspaciosBlanco(html);

 		  if (enlace != '')
              html += "<br/><a href='" + enlace + "' target='_blank'>Pagina&nbsp;web</a>";
		
          html += "</b></span>";
          html += "<div id='calle' style='width: 500px; height: 280px;'></div>";
          
	      //html += "<a href='javascript:ampliar("+latitud+","+longitud+")'>Ampliar</a></div>";			      
	      
	      
          GEvent.addListener(marker, "click", function() {
                
               
                 
                 
                 GEvent.addListener(marker, "infowindowopen", function(){
                       var puntoTienda = new GLatLng(latitud, longitud)
                       var panoClient = new GStreetviewClient();      
                       panoClient.getNearestPanorama(puntoTienda, showPanoData);
                       
                        function showPanoData(panoData) {
                 
                         if (panoData.code == 200){                       
                            panoramaOptions = { latlng:puntoTienda };
                            var myPano = new GStreetviewPanorama(document.getElementById("calle"), panoramaOptions);                           
                            
                          } 
                        }   
                                 
                   } );
                   
                   
                 marker.openInfoWindowHtml(html); 
                 
                    
                 
                 
                 
                   

     	  document.formularioModificacion.nombre.value=nombre;
          document.formularioModificacion.direccion.value=direccion;
          document.formularioModificacion.web.value=web;		  
          document.formularioModificacion.longitud.value=longitud;
	      document.formularioModificacion.latitud.value=latitud;


          document.formularioBaja.nombre.value=nombre;
		  document.formularioBaja.longitud.value=longitud;
		  document.formularioBaja.latitud.value=latitud;

        });
        return marker;
      }



   // En Firefox los espacios en blanco del XML se convierten en saltos de linea.
   // Este metodo los sustituye por nbsp
    function sustituirEspaciosBlanco(cadena){
       var resultado = "";
       for (i=0;i<cadena.length;i++){
              if (cadena.charAt(i) == ' ')  resultado += '&nbsp;'; 
              else resultado += cadena.charAt(i);
        }
         return resultado;
     }
 
     function centrarPunto(puntoX,puntoY){               
          map.panTo(new GLatLng(puntoY, puntoX));      
          map.setZoom(12) 
      }
     

    function ampliar(latitud,longitud){
        
   //       document.getElementById("calle").style.width="800px";
    //      document.getElementById("calle").style.height="500px";
          
           var puntoTienda = new GLatLng(latitud, longitud)

            var panoClient = new GStreetviewClient();      
            panoClient.getNearestPanorama(puntoTienda, showPanoData);

 
         function showPanoData(panoData) {
                  if (panoData.code == 200){                       
                     panoramaOptions = { latlng:puntoTienda };                     
                     var myPano = new GStreetviewPanorama(document.getElementById("map"), panoramaOptions);               
                

          }
       }
  }