var map;
var centerLatitude = 30;
var centerLongitude = 0;
var startZoom = 3;
var existingMarkers = {};

    var ico_si_coche = new GIcon();
    ico_si_coche.image = "img/test3.png";
    ico_si_coche.shadow = "img/shadow-test2.png";
    //ico_si_coche.iconSize = new GSize(32, 32);
	ico_si_coche.iconSize = new GSize(35.0, 35.0);
    ico_si_coche.shadowSize = new GSize(53.0, 35.0);
    ico_si_coche.iconAnchor = new GPoint(17.0, 17.0);
    ico_si_coche.infoWindowAnchor = new GPoint(9, 2);
    ico_si_coche.infoShadowAnchor = new GPoint(18, 25);

function init() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setMapType(G_PHYSICAL_MAP );
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	updateMarkers();
	GEvent.addListener(map,'zoomend',function() {
		updateMarkers();
	});
	GEvent.addListener(map,'moveend',function() {
		updateMarkers();
	});
}
function updateMarkers() {
	//remove the existing points
	//map.clearOverlays();
	//create the boundary for the data
	var mapBounds = map.getBounds();
	c = document.getElementById('foo');
	
	var ne = mapBounds.getNorthEast();
	var sw = mapBounds.getSouthWest();
	
	var lat_max = ne.lat();
	var lat_min = sw.lat();
	var lng_max = ne.lng();
	var lng_min = sw.lng();
	var getVars = 'f_lat_max=' + lat_max
				+ '&f_lat_min=' + lat_min
				+ '&f_lng_max=' + lng_max
				+ '&f_lng_min=' + lng_min;
				
	//log the URL for testing
	//GLog.writeUrl('vao_preview_xml.php.php?'+getVars);
	//retrieve the points using Ajax
	var request = GXmlHttp.create();
	c.innerHTML = '<p style="text-align:center;"><img src="img/esperandob.gif"/></p>';
	request.open('GET', 'vao_preview_xml.php?'+getVars, true);
	request.onreadystatechange = function() {
		//loop though each of the points in memory and remove those that
		//aren't going to be shown
		for(k in existingMarkers) {
        	if(!mapBounds.contains(existingMarkers[k].getPoint())) {
           		map.removeOverlay(existingMarkers[k]);
           		delete existingMarkers[k];
        	}
    	}	
	
		if (request.readyState == 4) {
			var xml = request.responseXML.documentElement;
			c.innerHTML = '';
			var markers = xml.getElementsByTagName("Usuario");
			for (var i = 0; i < markers.length; i++) {
				var latlng = new GLatLng(markers[i].getAttribute("lat"),markers[i].getAttribute("lng"));
				var nombre = markers[i].getAttribute("nombre");
				var sexo = markers[i].getAttribute("sexo");
				var ano_nacimiento = markers[i].getAttribute("ano_nacimiento");
				var comentarios = markers[i].getAttribute("comentarios");
				var hora_entrada = markers[i].getAttribute("hora_entrada");
				var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
				var point_d = new GLatLng(parseFloat(markers[i].getAttribute("lat_d")),
                                    parseFloat(markers[i].getAttribute("lng_d")));
				
				if(!existingMarkers[i] && mapBounds.contains(latlng)) {
					var infoTabs = crea_html(nombre, comentarios, hora_entrada, sexo, ano_nacimiento);	
					existingMarkers[i] = addMarker(point, point_d, infoTabs, i);
					//existingMarkers[i] = createMarker(latlng, markers[i].getAttribute("nombre"));
					map.addOverlay(existingMarkers[i]);
       			}

			}

		}
	}
	request.send(null);
}
//Crear un icono
	
function addMarker(point, point_d, infoTabs, i) {
	var marker=[];
	marker[i] = new GMarker(point, ico_si_coche);
	GEvent.addListener(marker[i], "click", function() {
		marker[i].openInfoWindowTabsHtml(infoTabs);

/* 		var dMapDiv = document.getElementById("minimap");
		var detailMap = new GMap2(dMapDiv);
		detailMap.setCenter(point_d , 15);
		detailMap.addControl(new GSmallMapControl());
		var CopyrightDiv = dMapDiv.firstChild.nextSibling;
		var CopyrightImg = dMapDiv.firstChild.nextSibling.nextSibling;
		CopyrightDiv.style.display = "none"; 
		CopyrightImg.style.display = "none";
		
		var marker_d = new GMarker(point_d, ico_si_coche);
		detailMap.addOverlay(marker_d); */
	});
	return marker[i];
	//map.addOverlay(marker[i]);
} 


window.onload = init;