//<![CDATA[
// Call this function when the page has been loaded
if (GBrowserIsCompatible()){
	var side_bar_html = "";
	var gmarkers = [];
	var htmls = [];
  var i = 0;
  // arrays to hold variants of the info window html with get direction forms open
  var to_htmls = [];
  var from_htmls = [];

	function createMarker(point,name,html) {
    var marker = new GMarker(point);

    // The info window version with the "from here" form open
    to_htmls[i] = html + '<br /><br />Route beschrijving: <b>Naar hier</b> - <a href="javascript:fromhere(' + i + ')">Van hier</a>' +
       '<br /><br />Start adres:<br /><form action="javascript:getDirections()">' +
       '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br />' +
       '<INPUT value="Toon route" TYPE="SUBMIT">' +
       '<input type="hidden" id="daddr" value="'+name+"@"+ point.lat() + ',' + point.lng() +
           '"/>';

    // The info window version with the "to here" form open
    from_htmls[i] = html + '<br /><br />Route beschrijving: <a href="javascript:tohere(' + i + ')">Naar hier</a> - <b>Van hier</b>' +
       '<br /><br />Eind adres:<br /><form action="javascript:getDirections()">' +
       '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br />' +
       '<input value="Toon route" type="submit">' +
       '<input type="hidden" id="saddr" value="'+name+"@"+ point.lat() + ',' + point.lng() +
           '"/>';


    // The inactive version of the direction info
    html = html + '<br /><br />Route beschrijving: <a href="javascript:tohere('+i+')">Naar hier</a> - <a href="javascript:fromhere('+i+')">Van hier</a>';

    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
    side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br />';
    i++;
    return marker;
  }

  // ===== request the directions =====
  function getDirections() {
    var saddr = document.getElementById("saddr").value
    var daddr = document.getElementById("daddr").value
    gdir.load("from: "+saddr+" to: "+daddr);
    var directionsbox = document.getElementById("directions");
    directionsbox.style.display = "block";
  }

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

  // functions that open the directions forms
  function tohere(i) {
    gmarkers[i].openInfoWindowHtml(to_htmls[i]);
  }
  function fromhere(i) {
    gmarkers[i].openInfoWindowHtml(from_htmls[i]);
  }

	// create the map
  var map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(51.03689, 3.72076), 12);

  // === create a GDirections Object ===
  var gdir=new GDirections(map, document.getElementById("directions"));

  // === Array for decoding the failure codes ===
  var reasons=[];
  reasons[G_GEO_SUCCESS]            = "Success";
  reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
  reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
  reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
  reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
  reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
  reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
  reasons[G_GEO_BAD_REQUEST]        = "A directions request could not be successfully parsed.";
  reasons[G_GEO_MISSING_QUERY]      = "No query was specified in the input.";
  reasons[G_GEO_UNKNOWN_DIRECTIONS] = "The GDirections object could not compute directions between the points.";

  // === catch Directions errors ===
  GEvent.addListener(gdir, "error", function() {
    var code = gdir.getStatus().code;
    var reason="Code "+code;
    if (reasons[code]) {
      reason = reasons[code]
    }
    alert("Kon beschrijving niet ophalen vanwege volgende fout: "+reason);
  });

  // Read the data from example.xml
  var request = GXmlHttp.create();
  request.open("GET", "/club/sporthallen.xml", 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");

      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");
        // create the marker
        var marker = createMarker(point,label,html);
        map.addOverlay(marker);
      }
      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;
    }
  }
  request.send(null);
}else{
	alert("Sorry, the Google Maps API is niet compatibel met uw browser");
}
//]]>