var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var htmls_flash = [];
var index = 0;
var bounds = new GLatLngBounds();
var categoria_id = 0;
var control = 0;
var keyword = "";
var atractivo_id;
var map;
var aux;
var mover_centro = 0;
var altura = 11;
var icono_agrupacion;
var clusterer;
// 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_mapa/"+iconos.childNodes[p].attributes[1].value
         newIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
         newIcon.iconSize = new GSize(20, 20);
         newIcon.shadowSize = new GSize(45, 20);
         newIcon.iconAnchor = new GPoint(10, 10);
         newIcon.infoWindowAnchor = new GPoint(9, 2);
         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;
    } 
    crear_icono_agrupacion();
    cargar_mapa();
}
function crear_icono(icono){
	 var newIcon = new GIcon();
	 newIcon.image =  "../maps/images/iconos_mapa/"+icono;
	 newIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	 newIcon.iconSize = new GSize(20, 20);
     newIcon.shadowSize = new GSize(45, 20);
     newIcon.iconAnchor = new GPoint(10, 10);
	 newIcon.infoWindowAnchor = new GPoint(9, 2);
	 newIcon.infoShadowAnchor = new GPoint(18, 25);
	 newIcon.transparent = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";
	 var aux = icons.length;
	 aux+=1;
	 icons[aux] = newIcon;
	 return aux;
}
function crear_icono_agrupacion(){
	 var newIcon = new GIcon();
	 newIcon.image =  "../maps/images/iconos_mapa/agrupacion.png";
	 newIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	 newIcon.iconSize = new GSize(40, 40);
     newIcon.shadowSize = new GSize(45, 30);
     newIcon.iconAnchor = new GPoint(20, 20);
	 newIcon.infoWindowAnchor = new GPoint(20, 2);
	 newIcon.infoShadowAnchor = new GPoint(18, 25);
	 newIcon.transparent = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";	 
	 icono_agrupacion = newIcon;
}
// ====== This function displays the tooltip ======
// Esta funcion despliega el tooltip para los iconos de los mapas
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, offset.y - point.y -anchor.y -height));
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
}
// the icon information is passed to this function
function createMarker(point,name,html,html_flash,icontype,icono) {
	var marker = new GMarker(point,icons[icontype]);
	//if(lang == "english"){
		if (name.length > 35){
			name = name.substring(0,35);
			name = name.substring(0,strrpos(name,' '));
			name = name+"...";
		}
    //}
	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() {		
		if(html_flash){
			var infoTabs = [
			  new GInfoWindowTab("Info", html),
			  new GInfoWindowTab("360º view", html_flash)
			];	
			marker.openInfoWindowTabs(infoTabs);
		}else{
			marker.openInfoWindowHtml(html);	
		}		
	});
	// save the info we need to use later for the side_bar
	gmarkers[index] = marker;
	htmls[index] = html;
	if(html_flash){
		htmls_flash[index] = html_flash; 		
	}  
	// add a line to the side_bar html
	side_bar_html += "<div onclick='myclick(" + index + ")' id='div_"+index+"' class='link'><img src='../maps/images/iconos_mapa/"+icono+"' style='width:15px;height:15px;'>&nbsp;"+name+"</div>";	
	index++;
	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 myclick(i) {	
	if(htmls_flash[i]){
		var infoTabs = [
		  new GInfoWindowTab("Info", htmls[i]),
		  new GInfoWindowTab("360º view", htmls_flash[i])
		];	
		gmarkers[i].openInfoWindowTabs(infoTabs);
	}else{
		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='+aux+'&keyword='+keyword.replace("ñ","n").replace("á","a").replace("é","e").replace("í","i").replace("ó","o").replace("ú","u")+'&atractivo_id='+atractivo_id+'&lang='+lang; // Set value for URL with params
	return urln;
}
function cargar_mapa(){
	document.getElementById("map").innerHTML = "";
	map = new GMap2(document.getElementById("map"),{draggableCursor:'url(fcur.cur),default'});
	map.setUIToDefault();	
	map.enableScrollWheelZoom();
	map.setMapType(G_HYBRID_MAP);	
	map.addControl(new GLargeMapControl3D());
	//map.addControl(new StreetViewControl());
	map.addControl(new GHierarchicalMapTypeControl());
	map.addMapType(G_PHYSICAL_MAP);
	map.addMapType(G_SATELLITE_3D_MAP);
	//map.addOverlay(new GLayer("com.panoramio.all"));	
	//map.setCenter(new GLatLng(-0.220654,-78.511873), 14);	
	//var ov = new GOverviewMapControl();
	//map.addControl(ov);
	//ov.hide(true); 
	// ====== init StreetView ======
	//setTimeout("add_street_overlay()",8000);
	// ====== set up marker mouseover tooltip div ======
	var tooltip = document.createElement("div");
	map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
	tooltip.style.visibility="hidden";	
	clusterer = new Clusterer(map);
}
function add_street_overlay(){
	var streetOverlay = new GStreetviewOverlay();
	map.addOverlay(streetOverlay);
}
function disable_checks(control){
	var chk_ids = document.getElementsByName('cat');
    var cnt_ids = chk_ids.length;
    var accion="";
    if(control == 1) {
    	accion = true;
    }else if (control == 2){
    	accion = false;
    }
    if (cnt_ids){
        for(i=0;i<cnt_ids;i++) {            
            chk_ids[i].disabled = accion;            
        }
    }	
}
// Read the data from archivo xml
function cargar_puntos(){
	if (map){
		map.clearOverlays();
	}	
	map.setCenter(new GLatLng(-0.220654,-78.511873), 14);
	if(lang == "english"){
		texto_mas = "more";
	    texto_y = "and";		
	}else{
		texto_mas = "más";
	    texto_y = "y";
	}	
	clusterer.RemoveAllMarkers();
	clusterer.SetIcon(icono_agrupacion);
	clusterer.SetMaxVisibleMarkers(150);
	clusterer.SetMaxLinesPerInfoBox(10);
	clusterer.SetMinMarkersPerCluster(10);		
	document.getElementById("side_bar").innerHTML = "";
	document.getElementById('loader').style.display = '';
	disable_checks(1);
	side_bar_html = "";	
	var request = GXmlHttp.create();
	request.open("GET", setUrlXml(), true);	
	request.onreadystatechange = function() {
		if (request.readyState == 4) {			
			var xmlDoc = GXml.parse(request.responseText);
			document.getElementById('loader').style.display = 'none';						
			// obtain the array of markers and loop through it
			var markers = xmlDoc.getElementsByTagName("marker");
			if(markers.length > 0){
				document.getElementById('texto_titulo').innerHTML += " <font size='1'>("+markers.length+")</font>";
			}						
			for (var i=0;i<markers.length;i++) {
				// obtain the attribues of each marker
				var lat = parseFloat(markers[i].attributes[0].value);
				var lng = parseFloat(markers[i].attributes[1].value);
				var point = new GLatLng(lat,lng);
				var html = markers[i].attributes[2].value;
				var label = markers[i].attributes[3].value;
				var icontype = parseInt(markers[i].attributes[4].value);
				var icono = markers[i].attributes[5].value;				
				var ruta = markers[i].attributes[6].value;
				var color = markers[i].attributes[7].value;
				var nuevo_icono = markers[i].attributes[8].value;
				var html_flash = markers[i].attributes[9].value;
				if(nuevo_icono){
					icontype = crear_icono(nuevo_icono);
				}
				if(ruta == 1){	// en caso de ser ruta					 
					var poly; 	
					var points = new Array();
					var lineColor = color; 	
					var lineWeight = 8; 
					var lineOpacity = .6;					
					for (j=0;j<markers[i].childNodes[0].childNodes.length;j++){						 				
						points.push(new GLatLng(markers[i].childNodes[0].childNodes[j].childNodes[0].childNodes[0].data*1,markers[i].childNodes[0].childNodes[j].childNodes[1].childNodes[0].data*1));						
					}					
					poly = new GPolyline(points, lineColor, lineWeight, lineOpacity); // creo la ruta					
					map.addOverlay(poly);
					var largo = poly.getLength()/1000;				
					for (j=0;j<markers[i].childNodes[1].childNodes.length;j++){	// añado puntos de la ruta
						var lat_ruta = parseFloat(markers[i].childNodes[1].childNodes[j].attributes[0].value);
						var lng_ruta= parseFloat(markers[i].childNodes[1].childNodes[j].attributes[1].value);
						var punto = new GLatLng(lat_ruta,lng_ruta);
						var contenido = markers[i].childNodes[1].childNodes[j].attributes[2].value;
						var titulo = markers[i].childNodes[1].childNodes[j].attributes[3].value;
						var new_icon = markers[i].childNodes[1].childNodes[j].attributes[4].value;	
						var new_flash = markers[i].childNodes[1].childNodes[j].attributes[5].value;	
						var ruta_icontype;						
						if(new_icon){
							ruta_icontype = crear_icono(new_icon);
						}else{
							ruta_icontype = icontype
						}
						contenido+= "<b>Total "+label+": </b>" + largo.toFixed(2) + ' Km';	
						// create the marker										
						var marker = createMarker(punto,(j+1)+".- "+titulo,contenido,new_flash,ruta_icontype,icono);				
				        //map.addOverlay(marker);	
				        clusterer.AddMarker(marker,(index-1)+"*"+(j+1)+".- "+titulo);										
					}					
				}else if(ruta == 2){	// en caso de ser poligono					 
					var polygon; 	
					var points = new Array();
					var lineColor = color; 	
					var lineWeight = 8; 
					var lineOpacity = .4;					
					for (j=0;j<markers[i].childNodes[0].childNodes.length;j++){						 				
						points.push(new GLatLng(markers[i].childNodes[0].childNodes[j].childNodes[0].childNodes[0].data*1,markers[i].childNodes[0].childNodes[j].childNodes[1].childNodes[0].data*1));						
					}					
					polygon = new GPolygon(points,lineColor,lineWeight,lineOpacity,lineColor,lineOpacity); // creo el poligono					
					map.addOverlay(polygon);
					//var largo = poly.getLength()/1000;				
					for (j=0;j<markers[i].childNodes[1].childNodes.length;j++){	// añado puntos del poligono
						var lat_ruta = parseFloat(markers[i].childNodes[1].childNodes[j].attributes[0].value);
						var lng_ruta= parseFloat(markers[i].childNodes[1].childNodes[j].attributes[1].value);
						var punto = new GLatLng(lat_ruta,lng_ruta);
						var contenido = markers[i].childNodes[1].childNodes[j].attributes[2].value;
						var titulo = markers[i].childNodes[1].childNodes[j].attributes[3].value;
						var new_icon = markers[i].childNodes[1].childNodes[j].attributes[4].value;	
						var new_flash = markers[i].childNodes[1].childNodes[j].attributes[5].value;	
						var ruta_icontype;	
						if(new_icon){
							ruta_icontype = crear_icono(new_icon);
						}else{
							ruta_icontype = icontype
						}
						//contenido+= "<b>Total "+label+": </b>" + largo.toFixed(2) + ' Km';	
						// create the marker										
						var marker = createMarker(punto,(j+1)+".- "+titulo,contenido,new_flash,ruta_icontype,icono);				
				        //map.addOverlay(marker);	
				        clusterer.AddMarker(marker,(index-1)+"*"+(j+1)+".- "+titulo);
				        abrir = 0;											
					}					
				}else{	// caso contrario solo genera los puntos
					// create the marker
					var marker = createMarker(point,label,html,html_flash,icontype,icono);				
				    //map.addOverlay(marker);	
				    clusterer.AddMarker(marker,(index-1)+"*"+label);									
				}					
			}										
			// put the assembled side_bar_html contents into the side_bar div
			document.getElementById("side_bar").innerHTML = side_bar_html;
			if (control == 1 && markers.length == 0){
				document.getElementById("side_bar").innerHTML = "<div class='link' style='text-align:center;'>"+mensaje+"</div>";
			}
			if(mover_centro == 1){
				if(lat && lng){
					map.setCenter(new GLatLng(lat,lng), altura);
				}
				mover_centro = 0;
			}
			if (abrir == 1 && markers.length > 0){	//en caso de recibir parametros	
				if(ruta == 1){  //en caso de ser ruta					
					if(lat && lng){
						map.setCenter(new GLatLng(lat,lng),altura);
					}
					abrir = 0;
				}else{
					myclick(0);
					abrir = 0;
				}
			}
			disable_checks(2);				
		}
	}
	request.send(null);	
	aux = 0;
}