//gmarkers needed globally so it is declared outside of all of the functions 
var gmarkers = [];

// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
      }

//this function called window.onload
function jotmap() {  

//check to see if the browser supports google maps api  
if (GBrowserIsCompatible()) {

//make the following variables available to all functions within jotmap() 
var courtsListHtml = "";
var i = 0;

var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(32, 32);
baseIcon.shadowSize = new GSize(32, 32);
baseIcon.iconAnchor = new GPoint(15, 15);
baseIcon.infoWindowAnchor = new GPoint(17, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
baseIcon.transparent = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";

		
// === Create an associative array of GIcons() ===
      var gicons = [];
      gicons["standard"] = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon21.png");
		gicons["target"] = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon2.png");


//var Icon = new GIcon();
//Icon.image = "http://maps.google.com/mapfiles/kml/pal2/icon10.png";



      // A function to create the marker and set up the event window
      function createMarker(point,label,html,icontype) {
        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 courtslist div
        gmarkers[i] = marker;
        // this will scroll through the list and for every marker add another link to the courtslist under the map
			courtsListHtml += '<a href="javascript:myclick(' + i + ')" class="' + icontype + '">' + label + '</a> | ';
			i++;
        return marker;
      }

      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.setCenter(new GLatLng(45.321254, -80.0354), 6);


		//calling the XML document and retrieving the data    
      var request = GXmlHttp.create();
      request.open("GET", "aboriginal_victims_support_grant_map.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 attributes 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 icontype = markers[i].getAttribute("icontype");
            // create the marker
            var marker = createMarker(point,label,html,icontype);
            map.addOverlay(marker);
          }
          // put the assembled contents into the courtslist div
          document.getElementById("courtslist").innerHTML = courtsListHtml;
        }
      }//end of function requesting XML doc
      request.send(null);
    }//end of browser compatible , If not compatible alert user

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

}//end of function onload