var gmarkers = [];
    var iconHandicap = new GIcon(); 
    iconHandicap.image = 'handicap2.gif';
    iconHandicap.shadow = 'shadow.png';
    iconHandicap.iconSize = new GSize(21, 31);
    iconHandicap.shadowSize = new GSize(52, 29);
    iconHandicap.iconAnchor = new GPoint(7, 29);
    iconHandicap.infoWindowAnchor = new GPoint(11, 10);
	
    var iconUnisex = new GIcon(); 
    iconUnisex.image = 'unisex2.gif';
    iconUnisex.shadow = 'shadow.png';
    iconUnisex.iconSize = new GSize(21, 31);
    iconUnisex.shadowSize = new GSize(52, 29);
    iconUnisex.iconAnchor = new GPoint(7, 29);
    iconUnisex.infoWindowAnchor = new GPoint(11, 10);
	
    var iconPissoir = new GIcon(); 
    iconPissoir.image = 'pissoir2.gif';
    iconPissoir.shadow = 'shadow.png';
    iconPissoir.iconSize = new GSize(21, 31);
    iconPissoir.shadowSize = new GSize(52, 29);
    iconPissoir.iconAnchor = new GPoint(7, 29);
    iconPissoir.infoWindowAnchor = new GPoint(11, 10);
	
    var customIcons = [];
    customIcons["handicap"] = iconHandicap;
    customIcons["unisex"] = iconUnisex;
	customIcons["pissoir"] = iconPissoir;

  function fitMapToMarkers(){
   var noneVisible=true, i, bounds=new GLatLngBounds();
   for(i=0; i<gmarkers.length; i++){
	if(!gmarkers[i].isHidden()){
	 bounds.extend(gmarkers[i].getLatLng());
	 noneVisible=false;
	}
   }
   if(!noneVisible){
	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
	map.savePosition();
   }
  }


	
			// A function to create the marker and set up the event window
        function createMarker(point,name,html,category, id) {
        var marker = new GMarker(point,customIcons[category]);
        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;                                 
        marker.myname = name;
		marker.id=id;
        GEvent.addListener(marker, "click", function() {
	  	marker.openInfoWindowHtml(html, {maxWidth:450, maxHeight:400, autoScroll:true});
        });
        gmarkers.push(marker);
        return marker;
      }

      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].show();
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
		fitMapToMarkers();
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].hide();
          }
        }
        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        map.closeInfoWindow();
		fitMapToMarkers();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }

function makeSidebar(){
	var links={}, html, i, category;
	//	first loop thru the markers getting all categories used
	//	save any categories found in the categories variable
	for(i=0; i<gmarkers.length; i++){
		//	create empty array for each category that exists
		links[gmarkers[i].mycategory]=[];
	}
	for(i=0; i<gmarkers.length; i++){
		if(!gmarkers[i].isHidden()){
			category=gmarkers[i].mycategory;
			//	add links - creating an array of links for each category
			html='<a href="javascript:myclick('+i+')">'+gmarkers[i].myname+'</a><br>';
			links[category].push(html);
		}
	}
	html='';
	var tempStr;
	for(category in links){
		//	build category header
		tempStr=category;
		tempStr=tempStr.replace(/^./, tempStr.charAt(0).toUpperCase());
		html+='<b>'+tempStr+'</b><br />';
		for(i=0; i<links[category].length; i++){
			//	add all markers in this category
			html+=links[category][i];
		}
	}
	document.getElementById("side_bar").innerHTML = html;
}



// Rebuild the sidebar to match currently displayed markers
/* function makeSidebar() {

  var oldheader;
  var html = "";
  for (var i= 0; i < gmarkers.length; i++) {
   if (!gmarkers[i].isHidden()) {
   var header = gmarkers[i].mycategory;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += "<b>"+ header+"</b><br>";
    html += '<a href="javascript:myclick('+i+')">' +
gmarkers[i].myname + '</a><br>';
    oldheader = header;
   }
  }
  document.getElementById("side_bar").innerHTML = html;
 } */
	
	//function ZoomIn() {
     //   map.setZoom(18);
    //}
	
	function ZoomIn(lat, lng) {
        map.setCenter(new GLatLng(lat, lng), 17);
		map.setMapType(G_HYBRID_MAP);
    }
	
    //function ZoomOut() {
    //  map.setZoom(4);
	//	map.setMapType(G_NORMAL_MAP);
    //}
   
    var varlat = 55.678068;
	var varlong = 12.575397;
	var zoom = 14;
	function ResetZoom(){
	map.setCenter(new GLatLng(varlat,varlong),zoom);
	map.setMapType(G_NORMAL_MAP);
	}
	
	
      // create the map
      function load() {
      if (GBrowserIsCompatible()) {
	  map = new GMap2(document.getElementById("MYmap"));
	  map.addMapType(G_SATELLITE_3D_MAP);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
	  //map.enableGoogleBar();
	  map.setCenter(new GLatLng(55.678068,12.575397), 14);

      // Read the data
      GDownloadUrl("map_data.xml.php", function(data) {
        var xmlDoc = GXml.parse(data);
        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 name = markers[i].getAttribute("name");
          var adresse = markers[i].getAttribute("adresse");
		  var postnummer = markers[i].getAttribute("postnummer");
		  var by = markers[i].getAttribute("by");
		  var url=markers[i].getAttribute("wordpressUrl");
		  
		  //	get the id from the xml (you need to update map_data.xml.php so it returns id field from mysql)
		  var id=markers[i].getAttribute("id");	

var html = "<b>Toilet: </b>" + name + " <br><b>Adresse: </b>" + adresse + "<br><b>Postnr. og by: </b>" + postnummer + " " + by + "<br><b>Koordinater: </b>" + lat + ", " + lng + '<br><b>Googles k&oslash;rselsvejledning: </b><a href="http://maps.google.dk/maps?f=q&hl=da&z=17&geocode=&q=' + lat + "," + lng + '">Ruteplan</a><br><br>Maybe read some more informations about the toilet and make a comment to a blog. Something like <a href="' + url + '">this.</a>but opening in the exact message telling about the toilet.<br><br>Maybe this site should show toilets for the hole Denmark <a href="http://www.toiletmap.gov.au/browse.aspx?type=area&amp;id=6f950288-da86-450a-9171-e67f5b98c6df">like this site.</a><div align="center"><br />S&oslash;g i n&aelig;rheden: f.eks. pizza, caf&eacute;, tog osv.<form id="form" action="http://maps.google.dk/maps" method="get"" target="_blank">'+ '<input type="text" SIZE=35 MAXLENGTH=80 name="q" id="q" value="" />'+ '<INPUT value="S&Oslash;G" TYPE="SUBMIT">'+ '<input type="hidden" name="near" value="' + name+ ' @' + point.lat() + ',' + point.lng() + '"/><br /><a href="javascript:ZoomIn(' + lat + ',' + lng + ')"><img src="zoomin.gif" alt="Zoom In" title="Zoom In" border="0" height="24" width="26"></a><a href="javascript:ResetZoom()"><img src="resetzoom.gif" alt="Reset Zoom" title="Reset Zoom" border="0" height="24" width="26"></a><a href="#" onclick="map.closeInfoWindow()"><img src="close.gif" alt="Close" title="Close" border="0" height="24" width="21"></a></div>';
		  
		  
          var category = markers[i].getAttribute("category");
          // create the marker ** id now passed to createmarker function too **
          var marker = createMarker(point, name + '<br>' + adresse + '<br>', html, category, id);
          map.addOverlay(marker);
        }

        // == show or hide the categories initially ==
        show("handicap");
        show("unisex");
        show("pissoir");
        // == create the initial sidebar ==
        makeSidebar();
		
		var id=getUrlParam('id');
		if (id!='') {
			//	which marker is represented by id and zoom in/center on it
			        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].id.toString() == id) {
            map.setCenter(gmarkers[i].getLatLng());
			myclick(i);
          }
        }
		}
		
      });
    }
 }


function getUrlParam(name) {
	var query=window.location.search.substring(1);
	var vars=query.split('&');
	var pair;
	for (var i=0; i<vars.length; i++) {
		pair=vars[i].split('=');
		if (pair[0]==name) {
			return pair[1];
		}
	}
}