//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 serramap() {  

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

//make the following variables available to all functions within jotmap() 
var locationsListHtml = "";
var i = 0;
		
// This grabs the house with flag icon from Google's server.  The points specify where, in relation to the LAT and LONG the icon should be placed, shadow placed, info window opended

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


      // A function to create the marker and set up the event window
      function createMarker(point,label,html,Icon, title) {
        var marker = new GMarker(point,{icon:Icon, title:title});
        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
        locationsListHtml += '<li><a href="javascript:myclick(' + i + ')">' + label + '</a></li>';
        i++;
        return marker;
      }

      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.setCenter(new GLatLng(52.48278, -94.921875), 3);


		//calling the XML document and retrieving the data    
      var request = GXmlHttp.create();
      request.open("GET", "Clubs/serraClubs.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 title = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html,Icon,title);
            map.addOverlay(marker);
          }
          // put the assembled contents into the courtslist div
          document.getElementById("locationsList").innerHTML = locationsListHtml;
        }
      }//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