$(document).ready(function(){
//************************************************* code pour le formulaire demande de Station *************************************************
	//Demande d'ouverture de Station
	/*$("#btStations").click( function() {
		
			$.post('/global/includes/stations.php', 
				{  }, 
				function(result) {
		
		
					if ($("#contentFormStations")) {
				
						//Remplace les événements du select par ceux de la nouvelle période
						$("#contentFormStations").empty();
						$("#contentFormStations").append(result);

					}
				}
			)
			
	});	*/
//*************************************************fin du code pour le formulaire demande de Station *************************************************


	//load();
 if (GBrowserIsCompatible()) {
   
   
   
   var gicons = [];
   var gmarkers = [];
   
	//Création de la carte
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(47.217003, -1.555252), 13);
	$.lamap = map;
	
	
	//Création de la liste des Stations Marguerites Ouvertes
	var i = $("#nbreStations").val();
	var iconeStation = new GIcon(G_DEFAULT_ICON);
	iconeStation.image = "/global/images/pictoStation.gif";
    iconeStation.shadow = "/global/images/shadow.png";
	iconeStation.iconAnchor = new GPoint(9, 15);
	iconeStation.iconSize = new GSize(28, 16);
	iconeStation.imageMap = new Array(0,0,28,0,28,16,0,16);
	
	var icon = new GIcon();
   icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
   icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
   icon.iconSize = new GSize(24, 24);
   icon.iconAnchor = new GPoint(12,24);
   icon.infoWindowAnchor = new GPoint(5, 1);
   iconeStation.imageMap = new Array(0,0,24,0,24,24,0,24);
   
   var icon2 = new GIcon();
   icon2.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
   icon2.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
   icon2.iconSize = new GSize(28, 28);
   icon2.iconAnchor = new GPoint(12,24);
   icon2.infoWindowAnchor = new GPoint(5, 1);
   iconeStation.imageMap = new Array(0,0,24,0,24,24,0,24);
   
   gicons["parking"] = new GIcon(icon2,"/global/images/logoNGE-carte.gif"); 
   gicons["pompe"] = new GIcon(icon,"/global/images/pompe.gif"); 
	
	markerOptions = { icon:iconeStation };
	for(var j=1;j<=i;j++) {
		var lat = $("#latStation"+j).val();
		var longi = $("#longStation"+j).val();
		var messageStation = $("#messageStation"+j).val();
		var nomStation = $("#nomStation"+j).val();
		
		//afficheStations(map,lat,longi,nomStation, messageStation,j);
		var messageStation2 = messageStation;
		messageStation2 = messageStation2.replace(String.fromCharCode(34),'\\\"','g');
		messageStation2 = messageStation2.replace(String.fromCharCode(10),' ','g');
		messageStation2 = messageStation2.replace(String.fromCharCode(13),' ','g');
		//var html = $("#liste").html() + "<div class='element'><a id='station"+j+"' onclick='javascript:afficheBulle("+lat+","+longi+",\""+messageStation2.replace('\'','&middot;','g')+"\");' >"+nomStation.replace('\'','&middot;','g')+"</a></div>";
		var html = $("#liste").html() + "<div class='element'><a id='station"+j+"' onclick='javascript:afficheBulle("+lat+","+longi+",\"" + j + "\");' >"+nomStation.replace('\'','&middot;','g')+"</a></div>";
		$("#liste").html(html);
		map.addOverlay(createMarkerS(lat,longi,messageStation,nomStation,j,markerOptions));
	}
	
	var checks = '<div class="element"><input type="checkbox" id="pompasse" value="pompe" /> <label for="pompe" class="labelCheckbox" id="pompe"><img src="/global/images/pompe-small.gif" alt="Stations Carburant" class="pompe" /> Stations Carburant</label></div>'
	$("#checkboxes").html(checks);
	
	var check = '<div class="element"><input type="checkbox" value="parking" id="parkings" /> <label for="parking" class="labelCheckbox" id="parking"><img src="/global/images/logoNGE.gif" alt="Parking gratuits NGE" class="parking" /> Parkings gratuits NGE</label></div>'
	$("#checkbox").html(check);
	//afficheStations(map,$("#latStation5").val(),$("#longStation5").val(),"test", "test",5);
	//map.openInfoWindowHtml(new GLatLng(lat,longi),html);
	
	
	//Création de la liste des Emplacements proposés
	var k = $("#nbreEmplacements").val();
	var url = $("#urlFormStation").val();
	var iconeEmplacement = new GIcon(G_DEFAULT_ICON);
	iconeEmplacement.image = "/global/images/pictoProjetStation.gif";
	iconeEmplacement.shadow = "/global/images/shadow.png";
	iconeEmplacement.iconSize = new GSize(20, 20);
	iconeEmplacement.imageMap = new Array(0,0,20,0,20,20,0,20);
	markerOptions2 = { icon:iconeEmplacement };
	var markersE = new Array();	
	for (var l=1;l<=k;l++) {
		var lat = $("#latEmplacement"+l).val();
		var longi = $("#longEmplacement"+l).val();
		var messageEmplacement = $("#messageEmplacement"+l).val();
		var nomEmplacement = $("#nomEmplacement"+l).val();
		map.addOverlay(createMarkerE(lat,longi,nomEmplacement,messageEmplacement,markerOptions2,url));

	}
	function createMarker(point,name,html,category) {
		 var ic;
		 switch(category){
			 case '2' :
				 var ic = "pompe";
				 break;
			 case '3' :
				 var ic = "parking";
				 break;
			 
		 }
		 
		 
		 //alert(ic);
	   var marker = new GMarker(point,gicons[ic]);
	   // === Store the category and name info as a marker properties ===
	   marker.mycategory = ic;                                 
	   marker.myname = name;
	   GEvent.addListener(marker, "click", function() {
		 marker.openInfoWindowHtml(html);
	   });
	   gmarkers.push(marker);
	   return marker;
	 }
	 
	 GDownloadUrl("/global/xml/imarguerite.xml", function(doc) {
				var xmlDoc = GXml.parse(doc);
				var markers = xmlDoc.documentElement.getElementsByTagName("marker");
				
				for (var i = 0; i < markers.length; i++) {
					// obtain the attribues of each marker
					var lat = parseFloat(markers[i].getAttribute("lat"));
					var lng = parseFloat(markers[i].getAttribute("lng"));
					var point = new GLatLng(lat,lng);
					var type = markers[i].getAttribute("type");
					var message = markers[i].getAttribute("texte");
					var titre = utf8_decode(markers[i].getAttribute("titre"));
					var id = markers[i].getAttribute("id");
					
				  
					 var html = "<div class='messageGoogle'>";
					 html += "<div><strong><font color=\"#ff6600\">"+titre+"</font></strong></div>";
					 html += "<div>"+message+"</div>";
					 html += "<br />";
					 html += "</div>";
					
					var marker = createMarker(point,name,html,type);
					map.addOverlay(marker);
				}
		
				// == show or hide the categories initially ==
				
				
				
				if($("#pompe").is(":checked")){show("pompe");}else{hide("pompe")}
				if($("#parking").is(":checked")){show("parking");}else{hide("parking")}
				
				
				
			});
				  
	 
			function show(category) {
			  //alert(category);
			   for (var i=0; i<gmarkers.length; i++) {
				 if (gmarkers[i].mycategory == category) {
					//alert('show : '+category);
				   gmarkers[i].show();
				 }
			   }
			 }
		 
			 // == hides all markers of a particular category, and ensures the checkbox is cleared ==
			 function hide(category) {
			  //alert(category);
			   for (var i=0; i<gmarkers.length; i++) {
				 if (gmarkers[i].mycategory == category) {
				  
				   gmarkers[i].hide();
				   //alert('hide : '+category);
				 }
			   }
			   map.closeInfoWindow();
			 }
			 
			 function hideStart(category) {
			   for (var i=0; i<gmarkers.length; i++) {
				 if (gmarkers[i].mycategory == category) {
				   gmarkers[i].hide();
				 }
			   }
			   //map.closeInfoWindow();
			 }
		 
			 // == a checkbox has been clicked ==
			 function boxclick(box,category,id_type) {
				 //alert(category);
				if(box.hasClass("active")){
				  hide(category);
				  box.removeClass("active");
				}else{
				  show(category);
				  box.addClass("active");
				}
			   
			   // == rebuild the side bar
			   //makeSidebar();
			 }
			 
			  $("#pompe").click(function(){
				  boxclick($(this),'pompe',2);
				  if($("#pompe").hasClass("active"))map.setZoom(12);
			  });
			  $("#parking").click(function(){
				  boxclick($(this),'parking',3);
			  });
	
  }
});

$(document).unload(function(){
	GUnload();
});

//fonction d'affichage du formulaire demande de station
function choixEmplacement(nom) {
			$.post('/global/includes/stations.php', 
				{ quartier : nom }, 
				function(result) {
		
		
					if ($("#contentFormStations")) {
				
						//Remplace les événements du select par ceux de la nouvelle période
						$("#contentFormStations").empty();
						$("#contentFormStations").append(result);
						

					}
				}
			)
			//Caché le plan
			$("#map").hide();
			$("#introStations").hide();
			$("#legende").hide();
			$(".uneStationChezVous").hide();
			$("#listeStations").hide();
			//Réaffiche le plan si il est caché
			$("#flashStations").show();
			
}



//Cache le formulaire de demande de  station et réaffiche le plan
function btRetourPlan() {
	$("#contentFormStations").empty();
	//$("#flashStations").hide();
	
	$("#map").show();
	$("#introStations").show();
	$("#legende").show();
	$(".uneStationChezVous").show();
	$("#listeStations").show();
	
}

//fonction pour la validation du formulaire stations
function validationStation() {
			var letat = $("#etat").val();
			var lenom = $('#nom').val();
			var leprenom = $('#prenom').val();
			var ladresse = $('#adresse').val();
			var lemail = $('#email').val();
			var lequartier = $('#quartier').val();
			var lecommentaire = $('#commentaire').val();
	
			
			
			$.post('/global/includes/stations.php', 
				{ 	etat : letat,
					nom : lenom,
					prenom : leprenom,
					adresse : ladresse,
					email : lemail,
					quartier : lequartier,
					commentaire : lecommentaire }, 
				function(result) {
		
		
					if ($("#contentFormStations")) {
				
						//Recharge le formulaire
						$("#contentFormStations").empty();
						$("#contentFormStations").append(result);

					}
				}
			)
			return false;
}

//function de création de marker Emplacement
function createMarkerE(lat,lng,nom,message,options,url) {
		var point = new GLatLng(lat,lng);
		var marker  = new GMarker(point,options);
		GEvent.addListener(marker, "click", function() {
			var html = "<div id='messageGoogle'>";
			html += message;
			//html += "<br /><a href='#' id='choixEmplacement' onclick='javascript:choixEmplacement(\""+nom+"\");return false;'>votez pour cet emplacement</a>";
			html += "<br /><a href='#' id='choixEmplacement' onclick='javascript:window.location.assign(\""+url+"?station="+escape(nom)+"\");return false;'>votez pour cet emplacement</a>";
			html += "</div>";
			marker.openInfoWindowHtml(html);
		});
		return marker;
}

//function de création de marker Station
function createMarkerS(lat,lng,message, nom,j, options) {
		var point = new GLatLng(lat,lng);
		var marker  = new GMarker(point,options);
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml("<div id='messageGoogle'>"+message+"</div>");
		});
		return marker;
}

function afficheStations(map,lat,longi,nomStation, messageStation,j) {
 
		var html =  $("#liste").html() + "<a id='station"+j+"' >"+nomStation+"</a>";
		$("#liste").html(html);
		
		$("#station"+j).click( function() {
			alert(j);
			//map.openInfoWindowHtml(new GLatLng(lat,longi),messageStation);
		});
}

/*function afficheBulle(lat,longi,messageStation) {
 
	$.lamap.openInfoWindowHtml(new GLatLng(lat,longi),"<div id='messageGoogle'>"+messageStation+"</div>");

}*/

function afficheBulle(lat,longi,indStation) {
 
	$.lamap.openInfoWindowHtml(new GLatLng(lat,longi),"<div id='messageGoogle'>"+$("#messageStation"+indStation).val()+"</div>");
}