var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
var bounds = new GLatLngBounds();
var categoria_id = 0;
var control = 0;
var keyword = "";
var atractivo_id;
var latitud;
var longitud;
var map;
var nwmapa;
// Array de GIcons, para facil seleccion de los mismos
var icons = [];
// Create some custom icons
function crear_iconos(){
	var myAjax = new Ajax('../maps/carga_iconos.php',
	{
		method: 'post',
		postBody: 'id=',
		onComplete: function(){
			load_iconos(this.transport);
		}
	}).request();
}
// funcion precargadora de los iconos del mapa
function load_iconos(req){
	var iconos = (req.responseXML).firstChild;
	for (var p=0;p<iconos.childNodes.length;p++) {
		 var newIcon = new GIcon();
		 newIcon.image =  "../maps/images/"+iconos.childNodes[p].attributes[1].value
         newIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
         newIcon.iconSize = new GSize(25, 25);
         newIcon.shadowSize = new GSize(60, 25);
         newIcon.iconAnchor = new GPoint(12, 12);
         newIcon.infoWindowAnchor = new GPoint(9,8);
         newIcon.infoShadowAnchor = new GPoint(18, 25);
         newIcon.transparent = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";
         icons[iconos.childNodes[p].attributes[0].value] = newIcon;
    }     
   cargar_mapa();
}
// the icon information is passed to this function
function createMarker(point,name,html,icontype,newmapa){	
	var marker = new GMarker(point,icons[icontype]);
	marker.tooltip = '<div class="tooltip"><nobr>'+name+'</nobr></div>';
	// === store the name so that the tooltip function can use it ===
	GEvent.addListener(marker, "click", function() {
		add_mapa(newmapa);
		marker.openInfoWindowHtml(html);		
	});
	// save the info we need to use later for the side_bar
	gmarkers[i] = marker;
	htmls[i] = html;
	// add a line to the side_bar html
	side_bar_html += '<div onclick=myclick(' + i + ',"'+ newmapa +'") class="concesionarios">' + name + '</div>';
	i++;
	return marker;
}
// ===== This function is invoked when the mouse goes over an entry in the side_bar =====
// It launches the tooltip on the icon
function mymouseover(i) {
	showTooltip(gmarkers[i])
}
// ===== This function is invoked when the mouse leaves an entry in the side_bar =====
// It hides the tooltip
function mymouseout() {
	tooltip.style.visibility="hidden";
}
function add_mapa(newmapa){
	if(nwmapa){
		nwmapa.hide();
	}
	if(newmapa){					
		var sw = new GLatLng(latitud-0.0036,longitud-0.005);
	    var ne = new GLatLng(latitud+0.0036,longitud+0.005);
		nwmapa = new GGroundOverlay("maps/images/"+newmapa, new GLatLngBounds(sw,ne)); 
		map.addOverlay(nwmapa); 
	}	
}
function myclick(i,newmapa) {
	add_mapa(newmapa);
	gmarkers[i].openInfoWindowHtml(htmls[i]);	
}
function pretty(a,b) {
	return '<table border="0" cellpadding="0" cellspacing="0"><tr><td width="100%" class="EWTitle" nowrap>' + a +
	'<a href="javascript:ew.hide()"><img width="14" height="13" title="Close the EWindow" src="eclose.gif" border=0 style="position:absolute;right:4px;top:4px"></a>' +
	'</td></tr>' +
	'<tr><td nowrap>' + b + '</td></tr></table>';
}
function setCategoria(id){
	categoria_id = id;
}
function setUrlXml(){
	var urln = "../maps/Generador_xml.php"; // URL to point	
	urln = urln+'?id_cat='+categoria_id+'&control='+control+'&keyword='+keyword+'&atractivo_id='+atractivo_id; // Set value for URL with params
	return urln;
}
function cargar_mapa(){
	map = new GMap2(document.getElementById("map"),{draggableCursor:'url(fcur.cur),default'});
	map.enableScrollWheelZoom();
	map.addControl(new GLargeMapControl());
	map.addControl(new GHierarchicalMapTypeControl());	
	map.addMapType(G_PHYSICAL_MAP); 	
	map.addControl(new GOverviewMapControl());	
	map.setCenter(new GLatLng(-0.199394,-78.484955), 15);
	
}
// Read the data from archivo xml
function cargar_puntos(){
	if (map){
		map.clearOverlays();
	}
	side_bar_html = "";	
	document.getElementById("side_bar").innerHTML = "";
	document.getElementById("div_loader").style.display = '';	
	var request = GXmlHttp.create();
	request.open("GET", setUrlXml(), true);	
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = GXml.parse(request.responseText);
			// obtain the array of markers and loop through it
			var markers = xmlDoc.getElementsByTagName("marker");							
			if(markers.length > 0){		
				for (var j=0;j<markers.length;j++) {
					// obtain the attribues of each marker
					var lat = parseFloat(markers[j].attributes[0].value);
					var lng = parseFloat(markers[j].attributes[1].value);
					var point = new GLatLng(lat,lng);
					var html = markers[j].attributes[2].value;				
					var label = markers[j].attributes[3].value;
					var icontype = parseInt(markers[j].attributes[4].value);
					latitud = parseFloat(markers[j].attributes[5].value);
					longitud = parseFloat(markers[j].attributes[6].value);					
					var newmapa = markers[j].attributes[7].value;				
					if(!latitud){
						map.panTo(new GLatLng(-0.199394,-78.484955));						
					}else{
						map.panTo(new GLatLng(lat,lng));						
					}
					// create the marker
					var marker = createMarker(point,label,html,icontype,newmapa);
					map.addOverlay(marker);
				}	
			}else{	
				if(!latitud){
					map.panTo(new GLatLng(-0.199394,-78.484955));					
				}else{					
					map.panTo(new GLatLng(latitud,longitud));					
				}		
			}			
			// put the assembled side_bar_html contents into the side_bar div
			if(control == 1){
				document.getElementById("texto_buscar").innerHTML = "Resultados '"+keyword+"':";							
			}		
			document.getElementById("side_bar").innerHTML = side_bar_html;
			document.getElementById("div_loader").style.display = "none";
			if (control == 1 && markers.length == 0){
				document.getElementById("side_bar").innerHTML = "<div class='link' style='text-align:center;'>No se encontraron locales</div>";
				map.panTo(new GLatLng(-0.199394,-78.484955));
			}			
			if (control == 3 && markers.length > 0){
				myclick(0,newmapa);
			}
		}
	}
	request.send(null);
}