function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  //alert('Query Variable ' + variable + ' not found');
}




      // A function to create the marker and set up the event window
      function createMarker(point,name,html, soort) {
        var icon = new GIcon();
        if( soort == "2" ) {
        	icon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
        }
        else {
        	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(12, 20);icon.shadowSize = new GSize(22, 20);
        icon.iconAnchor = new GPoint(6, 20);
        icon.infoWindowAnchor = new GPoint(5, 1);
        var marker = new GMarker(point, icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers[i] = marker;
        htmls[i] = html;

        // ======= Add the entry to the select box =====
        select_html += "<option> " + name + "</option>";
        // ==========================================================

        i++;
        return marker;
      }


      // ======= This function handles selections from the select box ====
      // === If the dummy entry is selected, the info window is closed ==
      function handleSelected(opt) {
        var i = opt.selectedIndex - 1;
        if (i > -1) {
          GEvent.trigger(gmarkers[i],"click");
        }
        else {
          map.closeInfoWindow();
        }
      }


var select_html = "<select name='placeSelect' id='placeSelect' onChange='handleSelected(this)'>" +
                  "<option selected> - Select a location - </option>";
var gmarkers = [];
var htmls = [];
var i = 0;


function showMap() {

    if (GBrowserIsCompatible()) {
      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 52.378019,4.899516), 15);

      // Read the data from 100.xml

      GDownloadUrl("http://www.daarzijnweweer.nl/xml.php?selected=" + getQueryVariable("selected") + "&mood=" + getQueryVariable("mood") + "&category=" + 11, function (doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	var selectedMarker = -1;

        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 html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");
          var soort = markers[i].getAttribute("soort");
	  if( markers[i].getAttribute("selected") == "true" ) {
	  	selectedMarker = i;
	  }
          // create the marker
          var marker = createMarker(point,label,html, soort);
          gmarkers[i] = marker;
          htmls[i] = html;
          map.addOverlay(marker);
        }
        // ===== final part of the select box =====
        select_html += "</select>";
        if(document.getElementById("selection")) {
        	document.getElementById("selection").innerHTML = select_html;
        }
        if(document.getElementById("categoryselection")) {
	        	document.getElementById("categoryselection").innerHTML = "<form name='categorieSelect' id='categorieSelect' action='/map/' method='get'><select name='category' onChange='this.form.submit();'><option value=''> - Select a category - </option><option value='31'>bagels</option><option value='18'>breakfast</option><option value='11'>Central Station</option><option value='14'>Dam</option><option value='10'>De Pijp</option><option value='21'>dinner</option><option value='4'>Drink</option><option value='7'>Haarlemmerdijk</option><option value='20'>have a coffee</option><option value='6'>Hip</option><option value='24'>juice</option><option value='17'>Koningsplein</option><option value='3'>Leidseplein</option><option value='19'>lunch</option><option value='16'>Museumplein</option><option value='28'>Nieuwmarkt</option><option value='32'>Oost</option><option value='12'>Oosterpark</option><option value='29'>Oud-West</option><option value='25'>Overtoom</option><option value='22'>posh</option><option value='8'>Rembrandtplein</option><option value='15'>Schiphol</option><option value='13'>Spui</option><option value='30'>Starbucks</option><option value='23'>view</option><option value='33'>Weesperplein</option><option value='26'>Westerpark</option><option value='27'>Zuid-Oost</option></select></form>";
        }
        if(selectedMarker != -1) {
          gmarkers[selectedMarker].openInfoWindowHtml(markers[selectedMarker].getAttribute("html"));
          map.setCenter(new GLatLng(parseFloat(markers[selectedMarker].getAttribute("lat")), parseFloat(markers[selectedMarker].getAttribute("lng"))), 15);
          //document.getElementById("placeSelect").selectedIndex = selectedMarker+1;	
        }
        
      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/
    // http://www.econym.demon.co.uk/googlemaps/

  return;
}