//el objeto GMap2 que estamos utilizando como mapa
var map;

//variable global que almacena el json con los markers que devuelve el servidor
var markers;

//variable global que almacena el json con la "cuenta" de markers que ha devuelto el servidor
var countMarkers;

//variable que utilizo para que los elementos de cada grupo esten a un z-level distinto.
//por defecto google pone los overlays mas al sur para que esten a un z-level superior (encima)
//yo quiero que los grupos vayan estando por capas, de manera que el primero que se anade
//este mas abajo y los grupos siguientes encima.
//para ello, vario este z_index_correction multiplicandolo x 10 con cada grupo que se anade
var z_index_correction = 1;

//variable que almacenara un timeout para que no se ejecuten muchas peticiones ajax en un corto periodo tiempo
var updateMarkersTimeOut;

//funcion para hacer un log debug
log = function(msg){
    debug = true;//cambiar a false para anular mensajes de debugging
    if(debug){
        if(typeof console == "undefined"){
            window.alert(msg);
        } else {
            console.log(msg);
        }
    }
}




/**
* Establece y devuelve la infowindow y el contenido segun el json de un marker
*/
function getInfoWindow(markerJson){
	var marker = {};
	marker.infoWindowHtml = (markerJson.html) ? markerJson.html : markerJson.name;
	return marker.infoWindowHtml;
}



/**
* Funcion que dibuja un circle en el mapa, dado una lat y lng que hace de centro
* y un radio dado en kms.
**/
function drawCircle(lat, lng, radius)
{
   lat = parseFloat(lat);
   lng = parseFloat(lng);
   radius = parseFloat(radius);


   var d2r = Math.PI / 180; // degrees to radians
   var r2d = 180 / Math.PI; //radians to degrees
   var earthsradius = 6371.0 //radio de la tierra en kms.
   var points = 35; //puntos que vamos a utilizar para dibujar el circulo


   // find the raidus in lat/lon
   var rlat = (radius / earthsradius) * r2d;
   var rlng = rlat / Math.cos(lat * d2r);

   var extp = new Array();
   for (var i=0; i < points+1; i++) // one extra here makes sure we connect the
   {
      var theta = Math.PI * (i / (points/2));
      ex = lng + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
      ey = lat + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
      extp.push(new GPoint(ex, ey));
   }

  //map.addOverlay(new GPolyline(extp, "#000000", 5, 0.5));
  circle = new GPolygon(extp,"#000000",2, 0.3,"#FFFFFF", 0.3);
  map.addOverlay(circle);//NO LO VAMOS A DIBUJAR

  return (circle);

}


/**
* Anade un marker al mapa y establece sus eventos, etc.
*/
function addMarker(markerJson) {



	var customIcon = new GIcon(G_DEFAULT_ICON);
    //customIcon.image = (markerJson.icon) ? markerJson.icon : "/admin/templates/js/marker-green.png";
    //customIcon = markerJson.icon;

     if(markerJson.icon){
        customIcon.image = markerJson.icon.image;
        if(markerJson.icon.shadow) customIcon.shadow = markerJson.icon.shadow;
        customIcon.iconSize = new GSize(markerJson.icon.iconSize.width, markerJson.icon.iconSize.height);
        if(markerJson.icon.shadowSize) customIcon.shadowSize = new GSize(markerJson.icon.shadowSize.width, markerJson.icon.shadowSize.height);
        customIcon.iconAnchor = new GPoint(markerJson.icon.iconAnchor.x, markerJson.icon.iconAnchor.y);
        customIcon.infoWindowAnchor = new GPoint(markerJson.icon.infoWindowAnchor.x, markerJson.icon.infoWindowAnchor.y);
        customIcon.imageMap = markerJson.icon.imageMap;
    }

    if(markerJson.id_entity == mejorMarca.id){
        customIcon.image = "/scripts/maps/markers/golfinspain-3/this_golf_course.png";
        customIcon.shadow = "/scripts/maps/markers/golfinspain-3/this_golf_course_shadow.png";
        customIcon.iconSize = new GSize(31, 38);
		customIcon.shadowSize = new GSize(48, 38);
		customIcon.iconAnchor = new GPoint(15, 38);
		customIcon.infoWindowAnchor = new GPoint(15,0);

//		en firefox y otros navegadores, hay que especificra un imageMap.
//		imageMap es un array de 4 puntos, que indica, con respecto al tamano
//		de la imagen, el area sobre el que se puede hacer click.
//		los cuatro puntos son, por este orden:
//		left/top corner
//		right/top corner
//		right/bottom
//		left/bottom corner
//
//		el primer elemento de cada subpar es la coordenada x, teniendo en cuenta que la coordenada left/top es 0,0
//		el segundo elemento de cada subpar es ela coordena y
//		por ejemplo: para una figura de 50 x 60 pixels, si quisieramos que todo el area fuera clickable, tendríamos
//		[0,0, 50,0, 50,60, 0,60]

		customIcon.imageMap = [0,0, 31,0, 31,38, 0,38];
    }

	var title = markerJson.name;
	var markerOptions = {draggable:false,
	                     icon:customIcon
//	                     title:title,
	                    /* zIndexProcess:function(){
	                         z_index = Math.abs(GOverlay.getZIndex(markerJson.lat) * z_index_correction);
	                         return z_index;
	                     }*/};

	var marker = new GMarker(new GLatLng(markerJson.lat, markerJson.lng), markerOptions);
	var tooltip = new Tooltip(marker, title, 2);
	marker.tooltip = tooltip;



	GEvent.addListener(marker, 'click',
		   function() {
				marker.infoWindowHtml = getInfoWindow(markerJson);
				marker.openInfoWindowHtml(marker.infoWindowHtml, {maxWidth:400});
				map.currentMarker = marker;

				//guardamos los bounds del mapa en una variable,
				//para comprobar posteriormente, cuando se cierre la ventana, que
				//si ha habido un desplazamiento del mapa para mostrar la infowindow
				//y si lo ha habido, hacer una update de los markers
				//map.boundsWhenMarkerClicked = map.getBounds();
		   }
	);


	GEvent.addListener(marker, 'infowindowopen', function(){
	    marker.noTooltip = true;
	    marker.tooltip.hide();
	});

	GEvent.addListener(marker, 'infowindowclose',
        function(){
            marker.noTooltip = false;
        }
	);

	GEvent.addListener(marker,'mouseover',function(){
	    if(!marker.noTooltip){
	       marker.tooltip.show();
	       setTimeout(function() {marker.tooltip.hide()}, 2000);
	    }

	});


	GEvent.addListener(marker,'mouseout',function(){
	    marker.tooltip.hide();
	});


	map.addOverlay(marker);
	map.addOverlay(tooltip);
	marker.data = markerJson;

	return marker;
}



function refreshMap(){

    map.clearOverlays();//limpiamos los markers que hubiera

    //anadimos los markers
	if(markers != undefined && countMarkers.total > 0){

	    //para calcular los limites necesarios para el mapa,
        //de manera que quepan todos en el area seleccionada.
        var latlngbounds = new GLatLngBounds( );

	    for (j in markers){
			var grupo = markers[j];
			for(m in grupo){
				var currentMarker = grupo[m];
				var latLngTmp = new GLatLng(currentMarker.lat, currentMarker.lng);
				latlngbounds.extend( latLngTmp);
				addMarker(currentMarker);
			}

			//modifico el z-index, para que el siguiente grupo este por encima en el z-index
            z_index_correction = z_index_correction * 10;
		}

		var circle = drawCircle(mejorMarca.lat, mejorMarca.lng, map.radius);

        //centramos para que se vea el punto necesario
		map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );
        //map.setCenter(circle.getBounds().getCenter( ), map.getBoundsZoomLevel(circle.getBounds()) );

		//map.currentMarker.openInfoWindowHtml(map.currentMarker.infoWindowHtml, {maxWidth:220});


    }



}



/**
* Funcion que lanza el updateMarkers por AJAX con un pequeno delay
* por si se producen nuevas peticiones en ese intervalo de tiempo
* que solo la ultima tenga lugar
**/
function updateMarkersWithDelay(){
    //neutralizamos el anterior timeout si lo hubiera
    if(updateMarkersTimeOut)
        clearTimeout(updateMarkersTimeOut);

    //y establecemos el nuevo
    updateMarkersTimeOut = setTimeout("updateMarkers();", 500);
}


/**
* Funcion que envia una peticion al servidor para que le devuelva markers
* segun los bounds y zoom del mapa, asi como los datos del formulario relacionado
* al devolver respuesta el servidor, se hace un refreshMap
**/
function updateMarkers(){

    //segun los strategies que tenemos ahora, necesitamos enviar:
    //lat, lng y radius y el action que va a responder con json
    var params = {
        a:'a=fichaCampo',
        lat: 'lat=' + mejorMarca.lat,
        lng: 'lng=' + mejorMarca.lng,
		lang: 'lang='+lang,
        r: 'r=' + map.radius
    };//parametros que vamos a enviar en el $_GET de la peticion AJAX


    var getVars = '';
	for(prop in params){
	    if(params[prop])
	       getVars += params[prop] + "&";
	}

    getVars = '?' + getVars;

	var url = '/scripts/maps/index.php' + getVars;

	//obtenemos los markers por ajax - json
	GDownloadUrl(url, function(response, httpStatus){
		if(httpStatus == 200){
			json = eval("("+response+")");
			markers = json.markers;
			countMarkers = json.countMarkers;
		}

		//ahora que tenemos markers, hacemos un refreshMap() para redibujar los markers
		//devueltos por el server
		refreshMap();
	});

}


function initGoogleMap()
{
		if (GBrowserIsCompatible()) {

				map = new GMap2(document.getElementById("map"));

				//inicialmente el radio del mapa
                map.radius = 10;

				map.disableDoubleClickZoom();
				map.enableScrollWheelZoom();//habilitar zoom in - out con la rueda del raton

				map.addMapType(G_PHYSICAL_MAP);
			    map.addControl(new GMenuMapTypeControl());
			   // map.addControl(new GSmallMapControl());
                map.setMapType(G_PHYSICAL_MAP);


                //cuando cambie el slide hacemos un update de los markers
                map.zoomendListener = GEvent.addListener(map, 'load', function(){
            	    $('#radius-slider').bind('slidechange', function(event, ui) {
                        map.radius = ui.value;
                        updateMarkers();
                    });
            	});


                updateMarkers();
//                refreshMap(markers, countMarkers);

		}
}

window.onunload = GUnload;