//Se crean las variables que contendrán el mapa y el marker manager
var map, mng;
//Nombre de la provincia y población de la feria.
var feria="VALENCIA";
var provincia="VALENCIA";
//Variables para centrar el mapa en la feria y que la tabla superior y la sidebar estén correctamente al iniciar el mapa.
var listenerFeria;
var listenerProv;
var feriaLat, feriaLong, feriaZoom = 11;
//Latitud y Longitud Iniciales: CAMBIARLAS PARA CADA FERIA
//Zoom inicial, sobre el mapa de españa del inicio
var iniLat =40.463667 , iniLong=-3.749220 , iniZoom=5; //$Estas eran las coordenadas del mapa inicial centrado en madrid
//var iniLat =39.476236 , iniLong=-0.375095 , iniZoom=6;
//Latitud y longitud de la última provincia pulsada, (la que aparece en la tablita de encima del mapa)
var ultimLat, ultimLong;
//Variable con el contenido de la barra lateral cuando estemos en el nivel de Provincias
var listProv = document.createElement('ul');
listProv.style.listStyleImage= "url('img/blueb.gif')";
//Variable con el contenido de la barra lateral cuando estemos en el nivel de Poblaciones
var listPobl = document.createElement('ul');
listPobl.style.listStyleImage= "url('img/blueb.gif')";
//Variable con el contenido de la barra lateral cuando estemos en el nivel de Promociones
var listProm = document.createElement('ul');
listProm.style.listStyleImage= "url('img/blueb.gif')";
//Variables para incluir el link "Provincias" en la barra lateral cuando se selecciona una provincia para poder volver al nivel anterior
var Prov = document.createElement('ul');
	Prov.style.listStyleImage= "url('img/arrow.gif')";
var Pa = document.createElement('li');
	Pa.innerHTML = '<p style="cursor: pointer;font-weight:bolder">Provincias (inicio)</p>';
	Pa.getElementsByTagName('p')[0].onclick=p1;
	Prov.appendChild(Pa);
//Variables para incluir el link "Problaciones" en la barra lateral cuando se selecciona una población para poder volver al nivel anterior	
var Pobl = document.createElement('ul');
	Pobl.style.listStyleImage= "url('img/arrow.gif')";
var Pb = document.createElement('li');
	Pb.innerHTML = '<p style="cursor: pointer;font-weight:bolder">Poblaciones (atr&aacute;s)</p>';	
	Pb.getElementsByTagName('p')[0].onclick=p2;
	Pobl.appendChild(Pb);
//Función que vacía la barra lateral de contenido, sea este el que sea
function vaciarSidebar(){
	var sidebar=document.getElementById('sidebar');
	while (sidebar.hasChildNodes()){
		sidebar.removeChild(sidebar.childNodes[0]);
	}
}
//Función que se ejecuta al pulsar sobre el link "Provincias"
function p1(){
	vaciarSidebar();
	map.setCenter(new GLatLng(iniLat, iniLong), iniZoom);
	document.getElementById('sidebar').appendChild(listProv);
	document.getElementById('Poblacion').style.display="none";
	document.getElementById('Provincia').style.display="none";
}
//Función que se ejecuta al pulsar sobre el link "Poblaciones"
function p2(){
	vaciarSidebar();
	map.setCenter(new GLatLng(ultimLat, ultimLong), 8);
	document.getElementById('sidebar').appendChild(Prov);
	document.getElementById('sidebar').appendChild(listPobl);
	document.getElementById('Poblacion').style.display="none";
}
//Función que crea un script de javascript con una página php auxiliar. Se emplea para crear la ficha de la promoción.
function ficha(url){
			var jsel = document.createElement('SCRIPT');
			jsel.type = "text/javascript";
			jsel.src = url;
			document.body.appendChild(jsel);
			};
//Esta función selecciona los elementos que se deben de mostrar en la barra lateral de entre los que conforman la lista ben de Poblaciones bien de Promociones.
function seleccionar(elementos, org){
	//el .length está porque si no, si le pongo (i in listPobl.childNodes) el ultimo valor en lugar del valor final pone length
	for (i=0;i<elementos.childNodes.length;i++){
		if(elementos.childNodes[i]){
			if (elementos.childNodes[i].className == org){
				elementos.childNodes[i].style.display="";
			}
			else{elementos.childNodes[i].style.display="none";}
		}
	}	
}
//Esta función crea el gestor de evetos para cada marcador.
function Listener(marcador, id,  marker, tipo){
	return function(){
		//Si es un marcador de provincia
		if(tipo=="provincia"){
			//Se centra el mapa en el punto en que está el marcador
			map.setCenter(new GLatLng(marker.lat, marker.long), 8);
			//se elimina el contenido de la barra lateral
			vaciarSidebar();
			//Se seleccionan las poblaciones a mostrar
			seleccionar(listPobl, marker.itm);
			//Se agrega el link "Provincia" y las poblaciones de la provincia a la barra lateral 
			document.getElementById('sidebar').appendChild(Prov);
			document.getElementById('sidebar').appendChild(listPobl);
			//Se agrega el nombre de Provincia actual a la tablita sobre el mapa y se elimina el nombre de Población actual, de haber sido seleccionada alguna
			document.getElementById('Poblacion').style.display="none";
			document.getElementById('Provincia').innerHTML = marker.itm+" (atr&aacute;s)";
			document.getElementById('Provincia').onclick = p2;
			document.getElementById('Provincia').style.display="";
			ultimLat = marker.lat;
			ultimLong = marker.long;
		}
		//Si es un marcador de poblacion
	   if (tipo=="poblacion"){
			//Se centra el mapa en el punto en que está el marcador		   
			map.setCenter(new GLatLng(marker.lat, marker.long), 11);
			//Se eliminan las poblaciones de la barra lateral
			document.getElementById('sidebar').removeChild(listPobl);
			//Se seleccionan las promociones de la población seleccionada
			seleccionar(listProm, marker.itm);
			//Se agrega a la barra lateral el link "Poblacion" así como las promociones de la población seleccionada
			document.getElementById('sidebar').appendChild(Pobl);
			document.getElementById('sidebar').appendChild(listProm);
			//Se agrega el nombre de Poblacion actual a la tablita sobre el mapa
			document.getElementById('Poblacion').innerHTML=marker.itm;
			document.getElementById('Poblacion').style.display="";
		}
		//Si es un marcador de promocion
	   if (tipo=="promocion"){ 
	   //Se crea el globo
	   // globo anterior, lo modifico para insertar la imagen
		// marcador.openInfoWindowHtml('<table width="300"><tr><td rowspan="2"><img width="120" src=\'../logosgrandes/'+marker.logo+'\'></td><td width="10" rowspan="2">&nbsp;</td><td>'+marker.itm+'</td>  </tr><tr><td>'+marker.promotora+'<a></a></td>  </tr></table>');
		
		marcador.openInfoWindowHtml('<table width="300"><tr><td rowspan="2"><img width="120" src=\'../logosgrandes/'+marker.logo+'\'></td><td width="10" rowspan="2">&nbsp;</td><td>'+marker.itm+'</td>  </tr><tr><td>'+marker.promotora+'<a></a></td>  </tr></table>');
		//Se crea la ficha
		ficha('pagina.php?id='+marker.id);
		document.getElementById("ficha").style.display="";
		}
		//Esto era necesario si los elementos de la barra lateral eran de tipo <a>. Ahora son de tipo <p>, con lo que no es necesario, pero por si acaso.
		return false;
	}
}
//Esta función crea los marcadores
function createMarker(marker, tipo){
	// Coordenadas del marcador
   var coords = new GLatLng(marker.lat, marker.long);
   // Marcador
   var marcador = new GMarker(coords);
   //Gestor de eventos del marcador
   var handler = Listener(marcador, id, marker, tipo);
   GEvent.addListener(marcador, "click", handler);
   //Elemento de la barra lateral
   var listItem = document.createElement('li');
   if(tipo=="poblacion"){
	  listItem.className = marker.prov;
   }
   if (tipo=="promocion"){	   
	  listItem.className = marker.pobl;
   }
   listItem.innerHTML = '<p style="cursor: pointer;">'+marker.itm+'</p>';
   listItem.getElementsByTagName('p')[0].onclick = handler;
   if (tipo=="provincia"){
	   listProv.appendChild(listItem);
	   if(marker.itm == provincia){
		   listenerProv = handler;
	   }
   }
   if (tipo=="poblacion"){
	   listPobl.appendChild(listItem);
	   if(marker.itm == feria){
		   listenerFeria = handler;
		   feriaLat = marker.lat;
		   feriaLong = marker.long;
	   }
   }
   if (tipo=="promocion"){
	   listProm.appendChild(listItem);
   }
   return marcador; 
}
//Función que crea los marcadores de las provincias
function addProvincias(provs){
//array de marcadores	
var marcadores = [];
   for(id in provs){
    //marcador
	var mkr = createMarker(provs[id], "provincia"); 
	//se introduce el marcador en el array de marcadores
	marcadores.push(mkr);
	}
	//se agregan los marcadores al marker manager indicando el zoom mínimo y máximo en que se muestran
   mng.addMarkers(marcadores, 0, 6);
}
//Función que crea los marcadores de las poblaciones
function addPoblaciones(pobls){
//array de marcadores	
var marcadores = [];
   for(id in pobls){
	//marcador
	var mkr = createMarker(pobls[id], "poblacion"); 
	//se introduce el marcador en el array de marcadores
	marcadores.push(mkr);
	}
	//se agregan los marcadores al marker manager indicando el zoom mínimo y máximo en que se muestran
   mng.addMarkers(marcadores, 7, 10);
}
//Función que crea los marcadores de las promociones
function addPromociones(promos){
//Array de marcadores
var marcadores = [];
   for(id in promos){
	//marcador
	var mkr = createMarker(promos[id], "promocion"); 
	//se introduce el marcador en el array de marcadores
	marcadores.push(mkr);
	}
	//se agregan losmarcadores al marker manager indicando el zoom mínimo y máximo en que se muestran
   mng.addMarkers(marcadores, 11, 17);
}

//Función que carga el mapa
function load() {
	//Se crea el mapa
   map = new GMap(document.getElementById("map"));
   document.getElementById("Sp").onclick=p1;
   //Se añaden los controles al mapa
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   //Se añade el contenido inicial a la barra lateral
   //document.getElementById('sidebar').appendChild(listProv);
   //Se centra el mapa con el zoom inicial
   map.setCenter(new GLatLng(iniLat, iniLong), iniZoom);
   //Se crea el marker manager para el mapa
   mng = new MarkerManager(map);
   //Se agregan las provincias
   addProvincias(provincias);
   //Se agregan las poblaciones
   addPoblaciones(poblaciones);
   //Se agregan las promociones
   addPromociones(promociones);
   listenerProv();
   listenerFeria();
   map.setCenter(new GLatLng(feriaLat, feriaLong), feriaZoom);
   //Esta función es necesaria para que se muestren los marcadores porque se han agregado con "addMarkers" si se hubieran agregado uno por uno con "addMArker, no sería necesaria.
   mng.refresh();
}