//Global - Very specific to this page
// this variable will collect the html which will eventualkly be placed in the side_bar
var side_bar_html = "";
var side_bar_html_comingsoon = "";

// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var i = 0;


// === Create an associative array of GIcons() ===
var gicons = [];
gicons["lfr"] = new GIcon(G_DEFAULT_ICON, "./images/map_pin.png");
gicons["lfr"].iconSize = new GSize(22, 32);
gicons["cairndow"] = new GIcon(G_DEFAULT_ICON, "");
gicons["cairndow"].iconSize = new GSize(22, 32);	  
gicons["comingsoon"] = new GIcon(G_DEFAULT_ICON, "");
gicons["comingsoon"].iconSize = new GSize(22, 32);

// A function to create the marker and set up the event window
function createMarker(point,name,intro,link,html,icontype,last) {
	if(name == 'Cairndow') {
	var marker = new GMarker(point, gicons["cairndow"]);
}
else {
    var marker = new GMarker(point, gicons[icontype]);
}
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
var htmlxtra = "";
if(last == true) { htmlxtra = ' class="last"' };
if(icontype == "lfr") {
    side_bar_html += '<li' + htmlxtra + '><div><a href="' + link + '"><strong>' + name + '</strong></a><div class="margin-top5">' + intro + '</div><div class="margin-top5"><a href="javascript:myclick(' + i + ')">View in map</a></div></div></li>';
}
else {
	side_bar_html_comingsoon += '<li' + htmlxtra + '><a href="javascript:myclick(' + i + ')">' + name + '</a></li>';
}
i++;
return marker;
}

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


function initialize() {
	if (GBrowserIsCompatible()) {
	  
		//ORIG
		var map = new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(52.36627132364143, -0.6758308410644531), 9);
		
		// Read the data from example.xml
		var request = GXmlHttp.create();
		request.open("GET", "./development_locations.php", true);
		request.onreadystatechange = function() {
		if (request.readyState == 4) {
		  var xmlDoc = request.responseXML;
		  // 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 = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
		    var label = markers[i].getAttribute("label");
		    var intro = markers[i].getAttribute("intro");
		    var link = markers[i].getAttribute("link");
			var last = false;
			if (i == markers.length - 1) { last = true };
		    // create the marker
		    var marker = createMarker(point,label,intro,link,html,"lfr",last);
		    map.addOverlay(marker);
		  }
		  // put the assembled side_bar_html contents into the side_bar div
		  document.getElementById("devloc_sidebar").innerHTML = side_bar_html;
		}
		}
		request.send(null);
	  
		// Read the data from example.xml
		//Second list
		/*var request2 = GXmlHttp.create();
		request2.open("GET", "./comingsoon_locations.php", true);
		request2.onreadystatechange = function() {	
		if (request2.readyState == 4) {
		  var xmlDoc = request2.responseXML;
		  // 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 = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
		    var label = markers[i].getAttribute("label");
			var last = false;
			if (i == markers.length - 1) { last = true };			
		    // create the marker
		    var marker = createMarker(point,label,html,"comingsoon",last);
		    map.addOverlay(marker);
		  }
		  // put the assembled side_bar_html contents into the side_bar div
		  document.getElementById("devloc_sidebar_comingsoon").innerHTML = side_bar_html_comingsoon;
		}
		}
		request2.send(null);*/

	    //ORIG
	    // Add 10 markers to the map at random locations
	   /* var bounds = map.getBounds();
	    var southWest = bounds.getSouthWest();
	    var northEast = bounds.getNorthEast();
	    var lngSpan = northEast.lng() - southWest.lng();
	    var latSpan = northEast.lat() - southWest.lat();
	    for (var i = 0; i < 10; i++) {
	      var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
	                              southWest.lng() + lngSpan * Math.random());
	      map.addOverlay(new GMarker(point));
	    }*/
	}
	else {
	  alert("Sorry, the Google Maps API is not compatible with this browser");
	}
}