//<![CDATA[
		   
if (GBrowserIsCompatible()) {

	// this variable will collect the html which will eventualkly be placed in the side_bar
	var side_bar_html = "";
	var gmarkers = [];
	var htmls = [];
	var ii = 0;
	
	var icon = new GIcon();
	icon.image = "kontakt/ring.png";
	icon.iconSize = new GSize(16, 16);
	icon.iconAnchor = new GPoint(16, 16);
	icon.infoWindowAnchor = new GPoint(10, 3);

	
	// A function to create the marker and set up the event window
	function createMarker(point,name,html) {

		var marker = new GMarker(point, icon);

		GEvent.addListener(marker, "click", function() {
		  marker.openInfoWindowHtml(html+' <br /> <br /> ');
		});
		gmarkers[ii] = marker;
		htmls[ii] = html;
		side_bar_html += '<a href="javascript:myclick(' + ii + ')">' + name + '</a><br>';
		ii++;
		return marker;
	}


	// This function picks up the click and opens the corresponding info window
	function myclick(i) {
		GEvent.trigger(gmarkers[i], "click");
	}
	var map = null;
	
	function initialize(){	
		if(GBrowserIsCompatible()){
			map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
			map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng(55.669151,12.511873), 11);
			var mapDiv = document.getElementById("map");
			mapDiv.style.background = "none";
		}
	}
	
	function load(xmlToLoad){
		side_bar_html = "";	
		// create the map
	
		
		// Read the data from example.xml
		var request = GXmlHttp.create();
		request.open("GET", xmlToLoad, true);
		request.onreadystatechange = function() {
		
			if (request.readyState == 4) {
				
				var xmlDoc = GXml.parse(request.responseText);
				// obtain the array of markers and loop through it
				var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			  
				var centre = xmlDoc.documentElement.getElementsByTagName("centre");
				var lat = parseFloat(centre[0].getAttribute("lat"));
				var lng = parseFloat(centre[0].getAttribute("lng"));
				var zoom = parseInt(centre[0].getAttribute("zoom"));
				map.setCenter(new GLatLng(lat,lng), zoom);
				 
				// hide the info window, otherwise it still stays open where the removed marker used to be
				map.getInfoWindow().hide();
				
				map.clearOverlays();            
				
				// empty the arrays
				gmarkers = [];
				htmls = [];
				ii = 0;
				
				// reset the side_bar
				side_bar_html="";
				
				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 label = markers[i].getAttribute("label");
					var point = new GLatLng(lat,lng);	
					var html = "<b>"+label+"</b>";
					html += markers[i].childNodes[0].nodeValue;	
				  // create the marker
				  var marker = createMarker(point,label,html);
				  map.addOverlay(marker); 
				}
				if(xmlToLoad == "kontakt/retograad.xml"){				  
				var point = new GLatLng(55.7355,12.511873);				
				icon.iconSize = new GSize(32, 32);
				var marker = new GMarker(point, icon);
				GEvent.addListener(marker, "click", function() {
					load('kontakt/retograad_kbh.xml');
				});
				map.addOverlay(marker);			
				icon.iconSize = new GSize(16, 16);
				}
			  // put the assembled side_bar_html contents into the side_bar div
			  if (document.getElementById("side_bar")) {
				  //erik
				  document.getElementById("side_bar").innerHTML = side_bar_html;
			  }
			}
		}
		request.send(null);
	}
	

}
else {
  alert("Beklager, jeg kan ikke vise kortet med denne browser");
}

//]]>