var map, cluster, iconN, icon1;

	$(document).ready(function(){
		initialize();
		$("form").submit(function(){
			$("#noResult").slideUp("slow");
			$("#details").html('');
			map.closeInfoWindow();			
			$.getJSON('/rsc/lib/markers.php5', {"type_cl" : $("#type_cl").attr('checked'),"type_ch" : $("#type_ch").attr('checked'),
				"etablissement" : $("#etablissement").val(), "medecin" : $("#medecin").val(), "localite": $("#localite").val()}, onGetJSON);
			return false;
		});		
	});

	function loadCard(href) {
		$("#details").load(href, function(){$(document).scrollTop($("#pied").offset().top)});
	}

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(47,1.8), 6);
        map.setUIToDefault();
		map.disableScrollWheelZoom() ;
		GEvent.addListener(map, 'zoomend', function() { map.closeInfoWindow(); });
		
		iconN = new GIcon();
		iconN.image = '/rsc/lib/multi-s.png';
		iconN.iconSize = new GSize(27, 27);
		iconN.iconAnchor = new GPoint(13, 13);
		iconN.infoWindowAnchor = new GPoint(13, 13);

		icon1 = new GIcon();
		icon1.image = '/rsc/lib/single-s.png';
		icon1.iconSize = new GSize(27, 27);
		icon1.iconAnchor = new GPoint(13, 13);
		icon1.infoWindowAnchor = new GPoint(13, 13);
	
		$.getJSON('/rsc/lib/markers.php5', {"type_cl" : "true","type_ch" : "true", "etablissement" : "", "medecin" : "", "localite" : ""}, onGetJSON);
      }
    }	

	function onGetJSON(json) {
		var marker, markersArray = [];

		if (cluster) {
			cluster.removeMarkers();
			delete cluster;
		}
		if(json.length == 0)
		{
			map.setCenter(new GLatLng(47,1.8), 6);			 
			$("#noResult").slideDown("slow");
			return false;
		}		
		for (var i = 0; i < json.length; i++) {			
			marker = newMarker(new GLatLng(json[i].lat, json[i].lng), json[i].name, json[i].description, icon1);
			GEvent.addListener(marker, 'mouseover', function() { this.setImage('/rsc/lib/single-h.png')});
			GEvent.addListener(marker, 'mouseout', function() { this.setImage('/rsc/lib/single-s.png')});
			markersArray.push(marker);			
		}	
		cluster = new ClusterMarker(map, { 
			markers:markersArray,
			clusterMarkerIcon: iconN,
			clusterMarkerImage: '/rsc/lib/multi-s.png',
			clusterMarkerImageHighlight: '/rsc/lib/multi-h.png',
			clusterMarkerClick:myClusterClick,
			fitMapMaxZoom:14,
			clusterMarkerTitle:"Cliquer pour afficher le détail de %count centres"} );
		cluster.fitMapToMarkers();
		
		if(json.length > 130)
		{
			map.setCenter(new GLatLng(47.2,1.9), 6);
		}	
		
	}

	function newMarker(markerLocation, markerName, markerDescription, icon1) {
		var marker = new GMarker(markerLocation,
			{title:markerName, icon: icon1});
		marker.description = markerDescription;
		GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml('<p>'+marker.description+'</p>');
		});
		return marker;
	}

	function myClusterClick(args) {
		cluster.defaultClickAction=function(){
			map.setCenter(args.clusterMarker.getLatLng(), map.getBoundsZoomLevel(args.clusterMarker.clusterGroupBounds))
			delete cluster.defaultClickAction;
		}
		var html='<table style="width:340px;"><tr><td><h4>'+args.clusteredMarkers.length+' centres d\'embolisation</h4></td>\n\
			<td style="font-size:10px;text-align:right;"><a  href="javascript:void(0)" onclick="cluster.defaultClickAction()" title="Zoomer sur ce regroupement">Zoomer</a></td></tr></table>\n\
		<div style="height:15em; overflow:auto; width:23em; margin-top:10px;">';
		for (i=0; i < args.clusteredMarkers.length; i++) {
			html+= '<div style="border:solid 1px #EDE6F9;padding:10px;'+((i>0) ? 'border-top:none;':'')+((i % 2 == 1 ) ? 'background-color:#F1ECFB;':'background-color:#F7F5FD;')+'">'+args.clusteredMarkers[i].description+'<a style="font-size:10px;" href="javascript:cluster.triggerClick('+args.clusteredMarkers[i].index+')">Centrer la carte sur ce point</a><br/></div>';
			
		}
		html+='</div>';
		
		map.openInfoWindowHtml(args.clusterMarker.getLatLng(), html);
	}