//googlemap tutorial url:
//http://www.econym.demon.co.uk/googlemaps/index.htm
//to style the infowindow text:
//http://www.econym.demon.co.uk/googlemaps/css.htm
//to add a "loading" screen overlay while maps are loading:
//http://www.acme.com/javascript/#OverlayMessage


if (GBrowserIsCompatible()) {

// global variables
    var map;
    var request;
	var bounds = new GLatLngBounds();
	var sidebar_html = "";
	var gmarkers = [];
	
	// ====== Create the MapType ==============
	
	// ===== The Mercator map, exactly like that in the "custommaptile" example =====
    var tilelayers = [new GTileLayer(new GCopyrightCollection(""),0,3)];
    	tilelayers[0].getCopyright 	= function	(a,b) {
        //return {prefix:"usmap: ", copyrightTexts:["comedycentral"]};
      }
		tilelayers[0].getTileUrl 	= function 	(a,b) {
        return "us0_"+(a.y+1)+"x"+(a.x+1)+".gif";
      } ;
    var proj = new GMercatorProjection(3);
		proj.tileCheckRange = function(a,b,c) {
        	var tileBounds = Math.pow(2,b);
        	if (a.y<0 || a.y >= tileBounds) {return false;}
        	if (a.x<0 || a.x >= tileBounds) {return false;}
        	return true;
     	 }
    var custommap = new GMapType(tilelayers, new GMercatorProjection(3), "usMap",{errorMessage:"No Data Available"});
		custommap.getProjection = function() {return proj;}
		
	// == Open a map with these two custom map types ==
	var map = new GMap2(document.getElementById("map"));
    	map.setCenter(new GLatLng(0,0), 1, custommap);
    	map.addMapType(custommap);
    	map.disableDragging(); 
    	//set the map div background-color 
    	document.getElementById("map").style.backgroundColor="#FBE512";  
    	/*MAP CONTROLS*/
      	/*
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			map.addControl(new GOverviewMapControl()); 
  	  	*/
   	
   	//===recenter the map after closing an infowindow
	/* Origianl GEvent addListener */
	GEvent.addListener(map, "infowindowclose", function() {    
			map.setCenter(new GLatLng(0,0), 1, custommap);  
		}); 
	
	
	/*	test GEvent addListener */
	/*	var myWindow = null;
      	GEvent.addListener(map, "click", function(overlay, point) {    
		map.setCenter(new GLatLng(0,0), 1, custommap); 
		 if (overlay) {
              map.removeOverlay(overlay);
            } else if (point) {
              if (myWindow == null)
              {
                myWindow = window.open('');
              }
              myWindow.document.write(point + "<Br>")
              map.addOverlay(new GMarker(point));
            }
		}); 
	*/
	// Create our colored marker icons 
	var icons = new Array();
	icons["pin"] = new GIcon(); 
	icons["pin"].image = "mapIcons/marker_red.png"; 
	//icons["pin"].shadow="http://www.google.com/mapfiles/shadow50.png"; 
	icons["pin"].shadow="mapIcons/marker_pinshadow.png"; 
	icons["pin"].iconSize=new GSize(32, 44); 
	icons["pin"].shadowSize=new GSize(37, 28); 
	icons["pin"].iconAnchor=new GPoint(32,44); 
	icons["pin"].infoWindowAnchor=new GPoint(0,2); 
	icons["pin"].infoShadowAnchor=new GPoint(19,13); 
	icons["pin"].printImage="http://www.google.com/mapfiles/markerie.gif"; 
	icons["pin"].mozPrintImage="http://www.google.com/mapfiles/markerff.gif"; 
	icons["pin"].printShadow="http://www.google.com/mapfiles/dithshadow.gif"; 
	icons["pin"].transparent="http://www.google.com/mapfiles/markerTransparent.png";
	icons["pin"].imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0]; 
	
	function get_icon(iconColor) {
	   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
		return;
	   }
	   if (!icons[iconColor]) {
		  icons[iconColor] = new GIcon(icons["pin"]);
		  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;
		
		//onclick in sidenav listener
		GEvent.addListener(
			gmarkers[marker_num], 
			"click", 
			function() {
				marker.openInfoWindowTabsHtml(gmarkers[marker_num].tabs);
			}
		);
		return marker;
	  }
	// This function picks up the click and opens the corresponding info window
	function myclick(i) {
 		GEvent.trigger(gmarkers[i], "click");
	}
	function getNodeValue(Element) {
		if ((Element.length>0) && Element[0] && Element[0].firstChild && Element[0].firstChild.nodeValue)
  	 	return Element[0].firstChild.nodeValue;
	}
  	
  	// Read the data from the XMl file, "tabbed_xml.jhtml"
 	var request = GXmlHttp.create();
 	var filename = "customOverlay_tabbed_xml.jhtml";
  		request.open("GET", filename, 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: "+filename);
         	return;
      		}
      		var xmlDoc = GXml.parse(request.responseText);
      		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++) {
				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");
				if (isNaN(lat) || isNaN(lng)) {
					alert("bad point "+i);
					continue;
			 		}
         		var point = new GLatLng(lat,lng);
        		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"));
               		if ((j==0) && (tabInfo.length > 2)){ 
                  		tabHtml = '<div style="padding:0px 0px;margin:0px 0px;width:'+tabInfo.length*88+'px">' + 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));
         }      

         
        var marker = createTabbedMarker(point,label,tabs, icon);
        map.addOverlay(marker);
      }
     
   }
}
function processXMLfile() {
	if (request.readyState == 4) {
    if ((request.status == 200) || (request.status == 304)) {
       var xmlDoc = request.responseXML;
       if (xmlDoc.documentElement) {
       		var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			map.clearOverlays();
          	for (var i = 0; i < markers.length; i++) {
            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 icon = markers[i].getAttribute("icon");
            var marker = createMarker(point,label,html,icon);
            map.addOverlay(marker);
          }
      	 } else {
         alert("invalid xml file:"+filename);
       }
    } else {
     alert("file not found:"+filename);
    }
  }
}