//************************************************************************
// Functions to implement Google Map API use
//   version by Mary Swim 
//************************************************************************
//  Originally designed with "map hack" code from: 
//    http://stuff.rancidbacon.com/google-maps-embed-how-to/demo2.html 
//    http://gmaps.yellowbkpk.com/jared/CommunityWalkSample.html
//  Updated for api with code from:
//     http://byrdmiddle.org/maps/map.htm   
//     http://www.commchurch.freeserve.co.uk/   
//     http://www.econym.demon.co.uk/googlemaps/
//************************************************************************
 
//************************************************************************
// Declare globals 
//************************************************************************

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

// arrays to hold variants of the info window html with get direction forms open
   var to_htmls = [];
   var from_htmls = [];

// variable to collect the html which will eventually be placed in the sidebar
   var sidebar_html = '<table>';  

// index for locations from xml file
   var i = 0; 

//************************************************************************
// Initialization function to set up the map 
//************************************************************************
   function initMap() {    
     if (GBrowserIsCompatible()) {
  
     // create the map
     var map = new GMap(document.getElementById("mapbox"));
     map.addControl(new GLargeMapControl());
     map.addControl(new GMapTypeControl());
     map.centerAndZoom(new GPoint(-80.1003945, 40.100000), 8);

     // Read the data from xml file 
     var request = GXmlHttp.create();
     request.open("GET", "rinkmaps.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");

         // obtain the attributes of each marker and create it (modify this to add or delete attributes)          
         for (var i = 0; i < markers.length; i++) {
           var loc = markers[i].getAttribute("loc")
           var addr1 = markers[i].getAttribute("addr1");
           var addr2 = markers[i].getAttribute("addr2");
           var lat = parseFloat(markers[i].getAttribute("lat"));
           var lng = parseFloat(markers[i].getAttribute("lng"));
           var pin = markers[i].getAttribute("pin");

           var point = new GPoint(lng,lat);
 	     html = "<br>" + addr1 + "<br>" + addr2

  	     // Create a lettered icon for this point 
	     if (i < 25) j=i;  else j=25;
  	     var letter = String.fromCharCode("A".charCodeAt(0) + j); 
           pin  = "markers/marker" + pin + letter + ".png";
           // create the marker
           var marker = createMarker(point,loc,html,pin);
           map.addOverlay(marker);
         }

         // after all markers read, put the assembled sidebar_html contents into the sidebar div
         sidebar_html += "</table>"
         document.getElementById("sidebar").innerHTML = sidebar_html;
        }
      }
      request.send(null);
    }

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

//************************************************************************
// Function to create the marker and set up the event window
//************************************************************************
  function createMarker(point,name,html,ico) {
    // Create a base icon for all of our markers that specifies the shadow, icon dimensions, etc.
    var baseIcon = new GIcon(); 
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    baseIcon.infoShadowAnchor = new GPoint(18, 25);

    // Create a lettered icon for this point using our icon class from above
    var icon = new GIcon(baseIcon);
    icon.image = ico;

    // Create a bold version of name
    var nameb = "<b>" + name + "</b>"

    // Create info window version with the "from here" form open
    to_htmls[i] = nameb + html + 
         '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' 
         + '- <a href="javascript:nohere(' + i + ')">x</a>' +
         '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
         '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value=" " /><br>' +
         '<INPUT value="Get Directions" TYPE="SUBMIT">' +
         '<input type="hidden" name="daddr" value="' + point.y + ',' + point.x + "(" + name + ")" + 
         '"/>';
 
    // Create the info window version with the "to here" form open
    from_htmls[i] = nameb + html + 
         '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' 
         + '- <a href="javascript:nohere(' + i + ')">x</a>' +
         '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
         '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value=" " /><br>' +
         '<INPUT value="Get Directions" TYPE="SUBMIT">' +
         '<input type="hidden" name="saddr" value="' + point.y + ',' + point.x + "(" + name + ")" + 
         '"/>';

    // Create the inactive version of the direction info (declare with "var" or pin click won't work)
    var htmlinfo = html + 
         '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - ' + 
                         '<a href="javascript:fromhere('+i+')">From here</a>';

    // FF 1.5 fix (wrap info-window text in div tags)
    htmlinfo = '<div style="white-space:nowrap;">' + nameb + htmlinfo + '</div>';
  
   //Save inactive version as default to open
     htmls[i] = htmlinfo;

   var marker = new GMarker(point,icon);
   GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(htmlinfo);
     });
   // save the info we need to use later for the sidebar
   gmarkers[i] = marker;

   // add a line to the sidebar html for this location
   sidebar_html += '<tr><td ><a href="javascript:myclick(' + i + ')"> <img src="' + ico + '" border="0"></a><td><br>'  
                + nameb + html  + '</tr>';
   i++;
   return marker;
 }

//************************************************************************
// Function to pick up the click and opens the corresponding info window
//************************************************************************
  function myclick(i) {
    gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+htmls[i]+'</div>');
  }

//************************************************************************
// Functions to open the various directions forms
//************************************************************************
  function tohere(i) {
    gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+ to_htmls[i]+'</div>');
  }

  function fromhere(i) {
    gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+ from_htmls[i] +'</div>');
  }

  function nohere(i) {
    gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+ htmls[i] +'</div>');
  }