// 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");
      }

// clear all markers
		function zapMap() {
			map.clearOverlays();
		}


// This function zooms in or out
   // function myzoom(a) {
     // map.(map.getZoom() + a);
   //}

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


function load() {
if (GBrowserIsCompatible()) {
      // collect the html for the sidebar
      var side_bar_html = "";
       
// define the markers	   
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); 

// for on notice
icons["onnotice"] = new GIcon(); 
icons["onnotice"].image = "images/onnotice.png"; 
icons["onnotice"].iconSize=new GSize(87, 33); 
icons["onnotice"].iconAnchor=new GPoint(10, 34); 
icons["onnotice"].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 and define the global 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.setZoom(map.getBoundsZoomLevel(bounds)); 
   map.setCenter(center, map.getBoundsZoomLevel(bounds));
   //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 
   
}





	// Read the data from the 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");

     
      
      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");

        
         var point = new GLatLng(lat,lng);
         // get the tab info
         tabInfo = markers[i].getElementsByTagName("tab");
         tabs = new Array();
         if (tabInfo.length > 0) {

            for (var j = 0; j < tabInfo.length; j++) {
               var tabLabel = getNodeValue(tabInfo[j].getElementsByTagName("label"));
               var tabHtml = getNodeValue(tabInfo[j].getElementsByTagName("contents"));
              
               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);
		

	  // ============================ floats a div with specified ID over the map. 
      var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(0,0));
      pos.apply(document.getElementById("twitwidget"));
      map.getContainer().appendChild(document.getElementById("twitwidget"));
	  
	  //var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(124,0));
     //pos.apply(document.getElementById("button"));
      //map.getContainer().appendChild(document.getElementById("button"));
      // ============================

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

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