var map;
var layers;
var centerLatitude = 20.838278;
var centerLongitude = -157.016602;
var startZoom = 7;
clusterIconSize = 53;
						var iconCluster = new GIcon();
						iconCluster.image = '/images/icono_cluster1.png',
						iconCluster.iconSize = new GSize(clusterIconSize, clusterIconSize);
						iconCluster.iconAnchor = new GPoint(13, 25);
						iconCluster.infoWindowAnchor = new GPoint(13, 1);
						iconCluster.infoShadowAnchor = new GPoint(26, 13);
						
						//create an icon for the pins
						var iconSingle = new GIcon();
						iconSingle.image = "/images/layout/mapicon-dives.gif";
						iconSingle.shadow = "/images/layout/mapicon-shadow.png";
						iconSingle.iconSize = new GSize(17, 17);
						iconSingle.shadowSize = new GSize(24, 24);
						iconSingle.iconAnchor = new GPoint(9, 9);
						iconSingle.infoWindowAnchor = new GPoint(12, 0);

function init() {
	//map = new GMap2(document.getElementById("map"));
	//map.enableContinuousZoom();
    //map.setMapType(G_HYBRID_MAP);
	var mcOptions = { gridSize: 25, maxZoom: 10};
	var markerCluster = new MarkerClusterer(map, [], mcOptions);
    
    layers = {centers: [], dives: [], photos: [], uwphotos: []};
    
    ctrls = $('.map-layers-controls');
    checks = $('input.check', ctrls);
checks.click(function(e) {
        
		//uncheckear todos los checkers menos el recién elegido
		//checkear el elegido
        var isCheck =  $(this)[0].checked;
        var name = $(this).attr('name');
        
        if(name == 'dives'){
        	//Coger centers y si esta checked, uncheckear
        	var elem = $('#centers')[0].checked;
        	if(elem){
        		$('#centers')[0].checked = false;
        		hideLayer('dives');
        	}
        }
        if(name == 'centers'){
        	//Coger dives y si esta checked, uncheckear
        	var elem = $('#dives')[0].checked;
        	if(elem){
        		$('#dives')[0].checked = false;
        		hideLayer('centers');
        	}                            
        }
        document.getElementById('photos').disabled=true;
        document.getElementById('centers').disabled=true;
        document.getElementById('dives').disabled=true;
        document.getElementById('uwphotos').disabled=true;
        $("#message").show();
        map.disableDragging();  
        
        if (isCheck) {
            showLayer(name);
        } else {
            hideLayer(name);
        }

    });

    
    
    geocoder = new GClientGeocoder();

	var restricter = new TRestricter(map);
	restricter.zoomLevels(4, 15);                                                
						
	//map.addControl(new GLargeMapControl);
	//map.addControl(new GMapTypeControl());
	//map.addControl(new GOverviewMapControl);
	//map.enableScrollWheelZoom();


	//var punto = new GLatLng(18.388932561525365,-64.65728759765625);
	//map.setCenter(punto, 11);        
	

	if(searched == 0){
	//updateMarkers(); //Esto es solo para cuando se muestra la capa de dive sites
	updateLayers();
	

	GEvent.addListener(map,'zoomend',function() {
        document.getElementById('photos').disabled=true;
        document.getElementById('centers').disabled=true;
        document.getElementById('dives').disabled=true;
        document.getElementById('uwphotos').disabled=true;
        $("#message").show();
        map.disableDragging(); 
        
		//updateMarkers();
		updateLayers();
	});
							
	GEvent.addListener(map,'dragend',function() {
        document.getElementById('photos').disabled=true;
        document.getElementById('centers').disabled=true;
        document.getElementById('dives').disabled=true;
        document.getElementById('uwphotos').disabled=true;
        $("#message").show();
        map.disableDragging(); 
        
		//updateMarkers();
		updateLayers();
	});
	}

	// FOR SEARCHES ********************************************************************************************
    if (icons instanceof Array && icons.length > 1) {
        
        var bounds = new GLatLngBounds(); //Calcula los bounds necesarios                            
        for(var i = 0; i < icons.length; i++) {
            //map.addOverlay(createMarker(icons[i]));
            markerCluster.addMarker(createMarker(icons[i]));
            bounds.extend(new GLatLng(parseFloat(icons[i].y), parseFloat(icons[i].x)));
            
        }
        
        map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
        //map.setCenter(new GLatLng(23.85368893828006, -53.96484375), 2);
        //map.setZoom(map.getBoundsZoomLevel(bounds)); //Ajusta el zoom
        //map.panTo(bounds.getCenter()); //Situa en el centro del bounds
        $("#message").hide();
        map.enableDragging();
        
    } else if (icons.length == 1) {
        //Solo hay un pto a mostrar
        
        map.setCenter(new GLatLng(parseFloat(icons[0].y), parseFloat(icons[0].x)), Number(icons[0].z));        
		markerCluster.addMarker(createMarker(icons[0]));
        //map.addOverlay(createMarker(icons[0]));
        $("#message").hide();
        map.enableDragging();
    }
	//END DEL FOR SEARCHES ********************************************************************************************
	
	
}

function updateMarkers() {
	document.getElementById('photos').disabled=true;
	document.getElementById('centers').disabled=true;
	document.getElementById('dives').disabled=true;
	document.getElementById('uwphotos').disabled=true;
	
	//remove the existing points
	map.clearOverlays();
	$("#message-zoom").hide();
	//create the boundry for the data to provide
	//initial filtering
	var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	var getVars = 'ne=' + northEast.toUrlValue()
	+ '&sw=' + southWest.toUrlValue()

	//log the URL for testing
	//GLog.writeUrl('/map/clusterizer.json?'+getVars);

	//retrieve the points
	var request = GXmlHttp.create();
	request.open('GET', '/map/clusterizer.json?'+getVars, true);
	request.onreadystatechange = function() {
		$("#message").show();
		if (request.readyState == 4) {
			$("#message").hide();
			document.getElementById('photos').disabled=false;
			document.getElementById('centers').disabled=false;
			document.getElementById('dives').disabled=false;
			document.getElementById('uwphotos').disabled=false;
			
			var points = eval(request.responseText);

			//if lat & long are 0, entonces es que hay hacer zoom. Sino mostramos los puntos
			if(points[0].lat == 0 & points[0].lng == 0){
				//Show message to zoom in because of too many markers
				$("#message-zoom").show();
			}else{			
				//create each point from the list
				for (i in points) {
					var point = new GLatLng(points[i].lat,points[i].lng);
					var marker = createMarkerDive(point, points[i].type, points[i].num, points[i].html);
					map.addOverlay(marker);
				}
			}
		}
	}
	request.send(null);
}

var createMarker = function(data) {
	
    var thumbnail 		= data.thumbnail;
    var shadow 			= data.shadow;
    
    var icon 			= new GIcon();
    icon.image 			= thumbnail[0];
    icon.shadow 		= shadow[0];
    icon.iconSize 		= new GSize(thumbnail[1], thumbnail[2]);
    icon.shadowSize 	= new GSize(shadow[1], shadow[2]);
    icon.iconAnchor 	= new GPoint(thumbnail[1]/2, thumbnail[2]/2);
    icon.infoWindowAnchor = new GPoint(thumbnail[1]/2, 0);
    
    var marker = new GMarker(new GLatLng(parseFloat(data.y), parseFloat(data.x)), {icon: icon});
    var html   = data.html;
    
    GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html, {maxWidth:350});
    });
    return marker;
};


function createMarkerDive(point, type, num, html) {
	//create the marker with the appropriate icon
	if(type=='c') {
		var marker = new LabeledMarker(point,{icon:iconCluster,labelText:num,"labelOffset":new GSize(8, 0)});
		GEvent.addListener(marker, "click", function() {
			var zoom = map.getZoom()+2; 
			map.setCenter(point, zoom);
		});	
			
	} else {
		var marker = new GMarker(point,iconSingle);
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html, {maxWidth:350});
		});	
	
	}
	return marker;
}
	window.onload = init;


//*******************************************************************
//Control de layers
//*******************************************************************
var createMarker;
var ctrls;
var checks;

var layermore = []; 
var init = 0;
layermore[0] = new GLayer("org.wikipedia.en");
layermore[1] = new GLayer("com.panoramio.all");
layermore[0].Visible = false;
layermore[0].Added = false;
layermore[1].Visible = false;
layermore[1].Added = false;

var urls = {centers:'xscripts/centers.json',
        	dives:'xscripts/dives.json',
        	uwphotos:'xscripts/photos.json'};

	function toggleLayer(i) {
		  if (layermore[i].Visible) {
		    layermore[i].hide();
		  } else {
		    if(layermore[i].Added) {
		      layermore[i].show();
		    } else {
		      map.addOverlay(layermore[i]);
		      layermore[i].Added = true;
		    }
		  }
		  layermore[i].Visible = !layermore[i].Visible;
		  
		document.getElementById('photos').disabled=false;
	    document.getElementById('centers').disabled=false;
	    document.getElementById('dives').disabled=false;
	    document.getElementById('uwphotos').disabled=false;
	    $("#message").hide();
	    map.enableDragging();  
	}	  
	
//En el document.ready de la pagina
	
    
    var showLayer = function(name) {
        //Mostrar capa
        if(name == 'photos'){
        	toggleLayer(1);
        	map.enableDragging();
        }else if(name == 'dives'){
        	updateMarkers();
        	map.enableDragging();
        }else{
            document.getElementById('photos').disabled=true;
			document.getElementById('centers').disabled=true;
			document.getElementById('dives').disabled=true;
			document.getElementById('uwphotos').disabled=true;
            $("#message").show();
        	
        	$.ajax({
            	url: urls[name],
                dataType: 'json',
                success: function(json) {
                
                	//clear all markers
                    var m = layers[name];
                    for(var i = 0; i < json.length; i++) {
	                    var marker = createMarker(json[i]);
                        m.push(marker);
    	                map.addOverlay(marker);
            	    }

                    var m = [];
                    document.getElementById('photos').disabled=false;
        			document.getElementById('centers').disabled=false;
        			document.getElementById('dives').disabled=false;
        			document.getElementById('uwphotos').disabled=false;
                    $("#message").hide();
                    map.enableDragging();

                }
	        });
        }                            
    };
  
	var hideLayer = function(name) {
    	if(name == 'photos'){
    		toggleLayer(1);
    	}else{
            var m = layers[name];
            map.clearOverlays();
            m = [];
            //Si queda UWPhotos o Dives o Centers, entonces lo vuelves a mostrar!
            if(document.getElementById('uwphotos').checked){
            	showLayer('uwphotos');
            }
            if(document.getElementById('dives').checked){
            	showLayer('dives');
            }
            if(document.getElementById('centers').checked){
            	showLayer('centers');
            }
            
        }
    		
			//document.getElementById('photos').disabled=false;
            //document.getElementById('centers').disabled=false;
            //document.getElementById('dives').disabled=false;
            //document.getElementById('uwphotos').disabled=false;
        	//$("#message").hide();
        	//$("#message-zoom").hide();
        	//map.enableDragging();
    };
 
    var updateLayers = function() {

        checks.each(function() {
        
            var isCheck =  $(this)[0].checked;
            var name = $(this).attr('name');                           	
        	
            if (isCheck) {
                showLayer(name);
            } else {
            	if(init > 2){
                	hideLayer(name);
                }
                init++;
            }
        });
    }