// this variable will collect the html which will eventualkly be placed in the side_bar
var side_bar_html = "";

// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var i = 0;

var rubrique_old = "";

//http://www.mapsofworld.com/lat_long/egypt-lat-long.html

// A function to create the marker and set up the event window
function createMarker(point,name,html,rubrique,icontype) {
	// === create a marker with the requested icon ===
	//var marker = new GMarker(point, gicons[icontype]);
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	// save the info we need to use later for the side_bar
	gmarkers[i] = marker;
	htmls[i] = html;
	// add a line to the side_bar html
	if(rubrique_old!=rubrique){
		side_bar_html += '<br /><br /><b>'+rubrique+' :</b> <a href="javascript:myclick(' + i + ')">' + name + '</a>';
	}else{
		side_bar_html += ' - <a href="javascript:myclick(' + i + ')">' + name + '</a>';
	}
	rubrique_old = rubrique;
	i++;
	return marker;
}


// This function picks up the click and opens the corresponding info window
function myclick(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i],{maxWidth: 450});
}


function initialize(carte_url) {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map_canvas"),
		{ size: new GSize(570,700) } );
		map.setCenter(new GLatLng(28.07,30.33), 6); 
		
		var customUI = map.getDefaultUI();
		// Remove MapType.G_HYBRID_MAP
		//  customUI.maptypes.hybrid = false;
		map.setUI(customUI);
		
		// === Create an associative array of GIcons() ===
		//   var gicons = [];
		//  gicons["yellow"] = new GIcon(G_DEFAULT_ICON, "colour086.png");
		//  gicons["purple"] = new GIcon(G_DEFAULT_ICON, "colour108.png");
		//  gicons["white"]  = new GIcon(G_DEFAULT_ICON, "colour125.png");
		
		
		GDownloadUrl("../../module/gmap/carte-"+carte_url+".xml", function(data) {
		
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var rubrique = markers[i].getAttribute("rubrique");
				var point = new GLatLng(lat,lng);
				var html = markers[i].getAttribute("html");
				var label = markers[i].getAttribute("label");
				// === read the icontype attribute ===
				var icontype = markers[i].getAttribute("icontype");
				// === create the marker, passing the icontype string ===
				var marker = createMarker(point,label,html,rubrique,icontype);
				map.addOverlay(marker);
			}
			$("#map_canvas").before("<p><b>Lieux pr&eacute;sents sur la carte :</b> "+side_bar_html+"</p>");
		});
				
		$("#map_canvas").after("<p><b><a href=\"../../module/gmap/carte-"+carte_url+".kml\">Exporter cette carte pour le logiciel Google Earth</a></b></p>");
	}
}