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

// global variables
      var map;
      var request;
	var bounds = new GLatLngBounds();

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


// This function zooms in or out
    // its not necessary to check for out of range zoom numbers, because the API checks
    function myzoom(a) {
      map.setZoom(map.getZoom() + a);
    }

// Replaces the in-page window onload function
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload); 


function load() {
if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventualkly be placed in the sidebar
      var side_bar_html = "";
       
        
// Create our custom marker icons 
//var icons = new Array();
//icons["red"] = new GIcon(); 
//icons["red"].image = "images/markeri.png"; 
//icons["red"].shadow="images/shadowpic.png";
//icons["red"].shadow="images/shadow50.png"; 
//icons["red"].iconSize=new GSize(20, 34); 
//icons["red"].iconSize=new GSize(27, 34); 
//icons["red"].shadowSize=new GSize(40, 34); 
//icons["red"].shadowSize=new GSize(37, 34); 
//icons["red"].iconAnchor=new GPoint(6, 20); 
//icons["red"].infoWindowAnchor=new GPoint(5, 1); 


var icons = new Array();

// for tan sand
icons["tan"] = new GIcon(); 
icons["tan"].image = "images/markertan.png"; 
icons["tan"].iconSize=new GSize(27, 34); 
icons["tan"].iconAnchor=new GPoint(10, 34); 
icons["tan"].infoWindowAnchor=new GPoint(10, 8);

// for yellow sand
icons["yellow"] = new GIcon(); 
icons["yellow"].image = "images/markeryellow.png"; 
icons["yellow"].iconSize=new GSize(27, 34); 
icons["yellow"].iconAnchor=new GPoint(10, 34); 
icons["yellow"].infoWindowAnchor=new GPoint(10, 8); 

// for black sand
icons["black"] = new GIcon(); 
icons["black"].image = "images/markerblack.png"; 
icons["black"].iconSize=new GSize(27, 34); 
icons["black"].iconAnchor=new GPoint(10, 34); 
icons["black"].infoWindowAnchor=new GPoint(10, 8); 

// for grey sand
icons["grey"] = new GIcon(); 
icons["grey"].image = "images/markergrey.png"; 
icons["grey"].iconSize=new GSize(27, 34); 
icons["grey"].iconAnchor=new GPoint(10, 34); 
icons["grey"].infoWindowAnchor=new GPoint(10, 8); 

// for white sand
icons["white"] = new GIcon(); 
icons["white"].image = "images/markerwhite.png"; 
icons["white"].iconSize=new GSize(27, 34); 
icons["white"].iconAnchor=new GPoint(10, 34); 
icons["white"].infoWindowAnchor=new GPoint(10, 8); 

// for green sand
icons["green"] = new GIcon(); 
icons["green"].image = "images/markergreen.png"; 
icons["green"].iconSize=new GSize(27, 34); 
icons["green"].iconAnchor=new GPoint(10, 34); 
icons["green"].infoWindowAnchor=new GPoint(10, 8); 

// for red sand
icons["red"] = new GIcon(); 
icons["red"].image = "images/markerred.png"; 
icons["red"].iconSize=new GSize(27, 34); 
icons["red"].iconAnchor=new GPoint(10, 34); 
icons["red"].infoWindowAnchor=new GPoint(10, 8); 

// for thank you heart
icons["heart"] = new GIcon(); 
icons["heart"].image = "images/heart.png"; 
icons["heart"].iconSize=new GSize(66, 57); 
icons["heart"].iconAnchor=new GPoint(10, 34); 
icons["heart"].infoWindowAnchor=new GPoint(30, 8); 

// for apollo11
icons["apollo"] = new GIcon(); 
icons["apollo"].image = "images/apollo.png"; 
icons["apollo"].iconSize=new GSize(66, 57); 
icons["apollo"].iconAnchor=new GPoint(10, 34); 
icons["apollo"].infoWindowAnchor=new GPoint(30, 8); 


function get_icon(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
      // iconColor = "red";
      return;
   }
   if (!icons[iconColor]) {
      icons[iconColor] = new GIcon(icons["red"]);
      icons[iconColor].image = "mapIcons/marker_"+ iconColor +".png";
   } 
   return icons[iconColor];
}
      // ==================================================
      // A function to create a tabbed marker and set up the event window
      // This version accepts a variable number of tabs, passed in the arrays htmls[] and labels[]
      function createTabbedMarker(point,label,tabs,icon) {
        var marker;
        if (icon) {
           marker = new GMarker(point,get_icon(icon));
        } else {
           marker = new GMarker(point);
        }
        var marker_num = gmarkers.length;
        marker.marker_num = marker_num;
        marker.tabs = tabs;
        gmarkers[marker_num] = marker;
        
        GEvent.addListener(gmarkers[marker_num], "click", function() {
          marker.openInfoWindowTabsHtml(gmarkers[marker_num].tabs);
        });
        // add a line to the sidebar html
        side_bar_html += '<li>' + '<a href="javascript:myclick(' + marker_num + ')">' + label + '</a></li>';
        return marker;
      }
      // ==================================================
      


      

function getNodeValue(Element) {
if ((Element.length>0) && Element[0] && Element[0].firstChild && Element[0].firstChild.nodeValue)
   return Element[0].firstChild.nodeValue;
}


      // create the map
      var map = new GMap2(document.getElementById("sandmap"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
	  new GKeyboardHandler(map);
	  //map.setCenter(new GLatLng(21.94304553343818, -123.75), 2);
      map.setCenter(new GLatLng(21.769025, -110.039062), 2, G_SATELLITE_MAP);
	  //map.addOverlay(new GLayer("org.wikipedia.en"));
	  

GMap2.prototype.centerAndZoomOnBounds = function(bounds) {
   var center_lat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) / 2.0;
   var center_lng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) / 2.0;
   // var center = new GLatLng(center_lat,center_lng)
   var center = new GLatLng(21.769025, -110.039062)
   map.setCenter(center, map.getBoundsZoomLevel(bounds));
}


	// Read the data from the associated xml file
   request = GXmlHttp.create();
   // open file and fake a data refresh 
   request.open("GET","sanddata.xml"+"?NoCache="+escape(Date()), true);
   request.onreadystatechange = processTabbedXML;
   request.send(null); 

    }

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

function processTabbedXML() {
   if (request.readyState == 4) {
      if ((request.status != 200) && (request.status != 304)) {
         alert("file not found");
         return;
      }
      // var xmlDoc = request.responseXML;
      var xmlDoc = GXml.parse(request.responseText);
      // obtain the array of markers and loop through it
      var markers = xmlDoc.documentElement.getElementsByTagName("marker");

      // alert("processing "+markers.length+" markers");
      // map.clearOverlays();
      // bug in clearOverlays
      for (var i=0; i<gmarkers.length; i++) {
         map.removeOverlay(gmarkers[i]);
		 
      }
      
      gmarkers = new Array();
      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 label = markers[i].getAttribute("label");
         var icon = markers[i].getAttribute("icon");

         // alert("point["+i+"] label="+label+":("+lat+", "+lng+")");
         if (isNaN(lat) || isNaN(lng)) {
            alert("bad point "+i);
            continue;
         }
         var point = new GLatLng(lat,lng);
         // get the tab info
         tabInfo = markers[i].getElementsByTagName("tab");
         tabs = new Array();
         if (tabInfo.length > 0) {
            // alert("processing "+tabInfo.length+" tabs");
            for (var j = 0; j < tabInfo.length; j++) {
               var tabLabel = getNodeValue(tabInfo[j].getElementsByTagName("label"));
               var tabHtml = getNodeValue(tabInfo[j].getElementsByTagName("contents"));
               // alert("point["+i+"] tab["+j+"] label="+tabLabel+", contents="+tabHtml);
               if ((j==0) && (tabInfo.length > 2)){ //  adjust the width so that the info window is large enough for this many tabs
                  tabHtml = '<div>' + tabHtml + '</div>';
               }
               tabs.push(new GInfoWindowTab(tabLabel,tabHtml));
            }
         } else { 
            // alert("no tabs point "+i);
            var tabLabel = "Nothing";
            var tabHtml = markers[i].getAttribute("html");
            tabs.push(new GInfoWindowTab(tabLabel,tabHtml));
         }      

         // create the marker
         var marker = createTabbedMarker(point,label,tabs, icon);
         bounds.extend(point);

         map.addOverlay(marker);
      }
      map.centerAndZoomOnBounds(bounds);

      // put the assembled sidebar_html contents into the sidebar div
      document.getElementById("side_bar").innerHTML = side_bar_html;
      side_bar_html = "";
   }
}
} // end of onLoad function