// JavaScript Document

document.write("<p>This interactive map shows all of the swimming and paddling pools in Cambridge.</p>")
document.write("<p>The information in this map can also be found elsewhere in the <a href='/ccm/navigation/leisure-and-entertainment/swimming-and-paddling-pools/'>swimming and paddling pools</a> pages.</p>")
document.write("<h2>How to use this map</h2>")
document.write("<p>Click on a marker on the map to see contact details for each pool.</p>")
document.write("<p>You can also click on a link in the list below the map to see the information.</p>")
document.write("<div id='gmap'></div>")
document.write("<div id='markers'>")
document.write("<h2>Pool</h2>")
document.write("<ul id='gmarkers'>")
document.write("</ul>")
document.write("</div>")

//<![CDATA[
if (GBrowserIsCompatible()) {

 // Create generic marker icon
 var icon = new GIcon();
 icon.image = "http://www.cambridge.gov.uk/public/googlemaps/icons/20blue.png";
 icon.shadow = "http://www.cambridge.gov.uk/public/googlemaps/icons/20shadow.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 icons = [];
 // Create specific icons for each category
 //icons["pad"] = new GIcon(icon, "http://www.cambridge.gov.uk/public/googlemaps/icons/20blue.png");
 //icons["pof"] = new GIcon(icon, "http://www.cambridge.gov.uk/public/googlemaps/icons/20red.png");
 //icons["free"] = new GIcon(icon, "http://www.cambridge.gov.uk/public/googlemaps/icons/20green.png");

 // Create the marker and set up the event window
 function createMarker(point, name, html/*, category*/) {
  var marker = new GMarker(point, {
   icon: icon/*s[category]*/, title: name
  });
  GEvent.addListener(marker, "click", function() {
   marker.openInfoWindowHtml('<div class="info" style="height: 215px; width: 250px;"><h2>' + name + '</h2>' + html + '</div>');
  });
  // save the info we need to use later for the side_bar
  gmarkers[i] = marker;
  htmls[i] = html;
  names[i] = name;
  // add a line to the side_bar html
  sidebar_html += '<li><a href="javascript:myclick(' + i + ')">' + name + '</a></li>';
  i++;
  return marker;
 }
	  
 // Create the map
 var map = new GMap2(document.getElementById("gmap"));
 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 map.addControl(new GScaleControl());
 map.addControl(new GOverviewMapControl());
 map.enableScrollWheelZoom();
 map.setCenter(new GLatLng(52.21000, 0.13800), 13, map.getMapTypes()[0]);

 // Collect the HTML for the sidebar
 var sidebar_html = "";
 // Arrays to hold copies of the markers and HTML
 var gmarkers = [];
 var htmls = [];
 var names = [];
 var i = 0;
 
 // This function picks up the click and opens the corresponding info window
 function myclick(i) {
  gmarkers[i].openInfoWindowHtml('<div class="info" style="height: 215px; width: 250px;"><h2>' + names[i] + '</h2>' + htmls[i] + '</div>');
 }
	
 // Read the data from example.xml
 var request = GXmlHttp.create();
 request.open("GET", "/public/googlemaps/swimmingpools.xml", 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 = GXml.value(markers[i].getElementsByTagName("lat")[0]);
    var lng = GXml.value(markers[i].getElementsByTagName("lng")[0]);
    var point = new GLatLng(lat, lng);
    var name = GXml.value(markers[i].getElementsByTagName("name")[0]);
	var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
	//var category = GXml.value(markers[i].getElementsByTagName("category")[0]);
    // create the marker
    var marker = createMarker(point, name, html/*, category*/);
    map.addOverlay(marker);
   }
   
   // put the assembled side_bar_html contents into the side_bar div
   document.getElementById("gmarkers").innerHTML = sidebar_html;
  }
 }
 request.send(null);
}

else {
 alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>