var map;
var gdir;
var request;

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 = [];
var completeHtml = '';

// Array for decoding the failure codes
var reasons=[];
reasons[G_GEO_SUCCESS]            = "Succes";
reasons[G_GEO_MISSING_ADDRESS]    = "Vul een geldig adres in a.u.b.";
reasons[G_GEO_UNKNOWN_ADDRESS]    = "Adres niet gevonden.";
reasons[G_GEO_UNAVAILABLE_ADDRESS]= "De coordinaten van het opgegeven adres kunnen niet worden gevonden.";
reasons[G_GEO_BAD_KEY]            = "De opgegeven API sleutel is ongeldig of komt niet overeen met het gebruikte domein.";
reasons[G_GEO_TOO_MANY_QUERIES]   = "Maximale aantal zoekacties per dag is overschreden.";
reasons[G_GEO_SERVER_ERROR]       = "Server error, uw verzoek kan niet behandeld worden.";
reasons[G_GEO_BAD_REQUEST]        = "Uw route kan niet bepaald worden. Controleer het start adres.";
reasons[G_GEO_MISSING_QUERY]      = "Ongeldig adres.";
reasons[G_GEO_UNKNOWN_DIRECTIONS] = "Geen route beschikbaar.";

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

	// The info window version with the "to here" form open
	to_htmls[i] = html +
	   '<br>Start adres:<form action="javascript:getDirections()">' +
	   '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><input type="checkbox" id="nl" checked="checked" />NL<br>' +
	   '<INPUT value="Plan route" TYPE="SUBMIT">' +
	   '<input type="hidden" id="daddr" value="'+name+"@"+ point.lat() + ',' + point.lng() +
	   '"/>'

	// The inactive version of the direction info
	if(googleMapsSettings["showDirections"] == true) {

	html = html + '<br><a href="javascript:tohere('+i+')">Route plannen</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++;
	completeHtml = html;
	return marker;

}

// Request the directions
function getDirections() {
	if(document.getElementById("nl").checked == true){
		var saddr = document.getElementById("saddr").value + ",nl"
	} else{
	  var saddr = document.getElementById("saddr").value
	}
	var daddr = document.getElementById("daddr").value
	gdir.load("from: "+saddr+" to: "+daddr);
	map.closeInfoWindow();
}

// 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]);
}

function loadXml() {
	  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);
		marker.openInfoWindowHtml(completeHtml);
	  }
	  // Put the assembled side_bar_html contents into the side_bar div
	  document.getElementById("side_bar").innerHTML = side_bar_html;
	}
}
function addGoogleMap() {

	// Create the map
	map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(51.15,5.77046), 9);
	map.addControl(new GSmallZoomControl());

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

	// Catch Directions errors
	GEvent.addListener(gdir, "error", function() {
	  var code = gdir.getStatus().code;
	  var reason="Code "+code;
	  if (reasons[code]) {
		reason = reasons[code]
	  }

	  alert(reason);
	});

	// Read the data from marker.xml
	request = GXmlHttp.create();
	request.open("GET", googleMapsSettings["linkToXML"], true);
	request.onreadystatechange = function() {
	  loadXml();
	}
	request.send(null);
}