//<![CDATA[
    var map;
    var debug = false;
    var loadingImage;
    var logo;
	var overlay1;
	var overlay2;
	var overlayFill;
    
    function load() {
      if (GBrowserIsCompatible()) {
      
     	//really powerful debugger
		if(debug) GLog.write("Starting Debugging");
		
		geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        //map.enableGoogleBar();
        map.addMapType(G_PHYSICAL_MAP);
        map.addMapType(G_SATELLITE_3D_MAP);
        
        map.addControl(new GLargeMapControl());
        map.addControl(new GHierarchicalMapTypeControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
		map.setCenter(new GLatLng(40, -100), 4);
      
     	loadingImage =  new GScreenOverlay("http://5pears.org/images/madeonamac.gif", 
			new GScreenPoint(0.15, 0.15, 'fraction', 'fraction'),  // screenXY
			new GScreenPoint(0, 0),  // overlayXY
			new GScreenSize(0.7, .7, 'fraction', 'fraction')  // size on screen
      		);
		var xOverlayHeight = 120;
      	overlay2 = new GScreenOverlay("http://5pears.org/images/map/mapOverlay2.png", 
			new GScreenPoint(0, xOverlayHeight, 'pixels', 'pixels'),  // screenXY
			new GScreenPoint(0, 0),  // overlayXY
			new GScreenSize(128, 32, 'pixels', 'pixels')  //height X width size on screen
      		);
      	overlay1 = new GScreenOverlay("http://5pears.org/images/map/mapOverlay1.png", 
			new GScreenPoint(128, xOverlayHeight, 'pixels', 'pixels'),  // screenXY
			new GScreenPoint(0, 0),  // overlayXY
			new GScreenSize(128, 32, 'pixels', 'pixels')  //height X width size on screen
      		);
		overlayFill = new GScreenOverlay("http://5pears.org/images/map/mapOverlayFill.png", 
			new GScreenPoint(256, xOverlayHeight, 'pixels', 'pixels'),  // screenXY
			new GScreenPoint(0, 0),  // overlayXY
			new GScreenSize(1, 32, 'fraction', 'pixels')  //height X width size on screen
      		);
      	//map.addOverlay(loadingImage);
      	//loadingImage.show()
		map.addOverlay(overlayFill);      	
		map.addOverlay(overlay2);
		map.addOverlay(overlay1);
		
      
       for(var layer in layers)  addTR(layer, layers[layer].name);  

	     var count = 1;
          for(var layer in layers) {
		   //count == 4 || count == 5 || count == 6 || count == 7 || 
			if(count == 4 || count == 5 || count == 6 || count == 7 || count == 11 || count == 12){
				document.getElementById(layer).checked = true;
				toggleGeoXML(layer, true);
				if(debug) GLog.write(count+ " "+layers[layer].name);
			}
			count++;
		  }
		  
        
	  //Gets the available map types and then sets the map type 
	    var x= map.getMapTypes(); 
	if(debug) GLog.write(x[3]);
	    map.setMapType(x[3]); 
		map.setCenter(new GLatLng(40, -100), 3);
		//sleep(4000);
	//loadingImage.hide()	;
    }
    }
/*****************************/
var userAdded = 1;
//what I should do is just add queries whenever some one looks up	
 
 function toggleHelp(){
 	//this function should to toggle the help image layer
 }
 
     
function addTR(id) {
  var layerTR = document.createElement("tr");

  var inputTD = document.createElement("td");
  var input = document.createElement("input");
  input.type = "checkbox";
  input.id = id;
  input.onclick = function () { toggleGeoXML(this.id, this.checked) };
  inputTD.appendChild(input);

  var nameTD = document.createElement("td");
  var nameA = document.createElement("a");
//  nameA.href = layers[id].url;
	nameA.href = "#";
  var name = document.createTextNode(layers[id].name);
  
  nameA.appendChild(name);
  nameTD.appendChild(nameA);
  layerTR.appendChild(inputTD);
  layerTR.appendChild(nameTD);
  document.getElementById("sidebarTBODY").appendChild(layerTR);
}

function toggleGeoXML(id, checked) {
  if (checked) {
    var geoXml = new GGeoXml(layers[id].url);
    layers[id].geoXml = geoXml;

    if (layers[id].zoom) {
      map.setZoom(layers[id].zoom);
    } else {
      map.setZoom(1);
    }
    if (layers[id].lat && layers[id].lng) {
      map.setCenter(new GLatLng(layers[id].lat, layers[id].lng));
    } else {
      map.setCenter(new GLatLng(39.909736,-35.859375));
    }
    map.addOverlay(geoXml);
    //gotoDefaultViewport(map);
    //this is supposed to center the map on the KML
              
  } else if (layers[id].geoXml) {
    map.removeOverlay(layers[id].geoXml);
  }
}
     
/*****************************/
	function searchDates(){
	
	var num =   document.getElementById('num').value; 
  	var type  = document.getElementById('type').value;
  	
	var theStart = document.getElementById('start-year').value+"-"+document.getElementById('start-month').value+"-"+ document.getElementById('start-day').value;     
	var theEnd =    document.getElementById('end-year').value+"-"+document.getElementById('end-month').value+"-"+ document.getElementById('end-day').value;     

	//alert(theStart +" to "+ theEnd);
	
	var searchUrl = 'http://5pears.org/map/mapXMLgen.php?startDate=' + theStart + '&endDate=' + theEnd + '&type=' + type + '&num=' + num;
	
	callXML(searchUrl);
	
	//alert(searchUrl);
	// this is where I'd put the bit to call the tracks over the same interval
	var numTracks = document.getElementById('numTracks').value; 
	var kmlurl = 'http://5pears.org/map/mapKMLgen.php?startDate='+theStart + '&endDate=' + theEnd +'&n=' + numTracks;
	
	//alert(kmlurl);
	//layers["tracks"].url = kmlurl;
	//alert(layers["tracks"].url);
	//addTR("tracks");
	//test
	//kmlurl = "http://www.panoramio.com/kml/?user=1055493";
	//kmlurl = "http://5pears.org/php/mapKMLgen.php";
	
	/* This doesn't work for some reason, but the downloads do *
	var id = "userAdded" + userAdded;
    layers[id] = {};
    layers[id].url = '"'+kmlurl+'"';
    layers[id].name = "User Layer " + userAdded;
	layers[id].lat = 44.715513;
	layers[id].lng = -97.734375;
	layers[id].zoom = 3;
 
    addTR(id);
    document.getElementById(id).checked = true;
    toggleGeoXML(id, true);
    userAdded++;
	alert(userAdded);
	**/	   
	}

/*****************************/
/*****************************/

	function callXML(searchUrl){
	
		//alert(searchUrl);
		GDownloadUrl(searchUrl, 
			function(data) {
				var xml = GXml.parse(data);
				var markers = xml.documentElement.getElementsByTagName('marker');
				//map.clearOverlays();
				
				var sidebar = document.getElementById('sidebar');
				sidebar.innerHTML = '';
				if (markers.length == 0) {
					sidebar.innerHTML = 'No results found.';
					map.setCenter(new GLatLng(40, -100), 4);
					return;
				}
				
				var bounds = new GLatLngBounds();
				for (var i = 0; i < markers.length; i++) {
					var name = markers[i].getAttribute('name');
					var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
									 parseFloat(markers[i].getAttribute('lon')));
					var date = markers[i].getAttribute('date');
					var time = markers[i].getAttribute('time');
					var gallons = markers[i].getAttribute('gallons');
					var type = markers[i].getAttribute('type');
					var id = markers[i].getAttribute('id');
					var mpg = markers[i].getAttribute('mpg');
					 
					var marker = createMarker(point, name, date, time, gallons, type, id, mpg);
					map.addOverlay(marker);
					
					var sidebarEntry = createSidebarEntry(marker, name, type);
					sidebar.appendChild(sidebarEntry);
					
					bounds.extend(point);
				}
			map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
			});
   }

  function createMarker(point, name, date, time, gallons, type, id, mpg) {
    
    //add icon based on type
	var iconname = "http://5pears.org/images/pins/"+type+".png";
	var shadow = "http://5pears.org/images/pins/pin-shadow.png";
	var dot = new GIcon()
	dot.image = iconname;
	dot.shadow = shadow;
	dot.iconSize = new GSize(15, 25);
	dot.iconAnchor = new GPoint(5, 5);
	dot.infoWindowAnchor = new GPoint(10, 10);
	dot.infoShadowAnchor = new GPoint(18, 25);
      
     //alert(iconname);
      var marker = new GMarker(point, dot);
     
      var html = "<b>" + name + "</b> <br/>" + date + " " + time + "<br/>id:" + id + " {" + type + "}<br/>" ;
      if(gallons > 0){
		html += gallons +" gallons<br/>";
		
		var mpgPercent = (mpg / 45)*100; 
		var mpg_short = Math.round(mpg,1);		
		if (mpgPercent > 100) mpgPercent = 100;
		var chartUrl = "http://chart.apis.google.com/chart?chs=255x110&cht=gom&chd=t:"+mpgPercent + "&chl=" + mpg_short + "%20MPG";
		html += "<img src="+chartUrl+" width=255 height=110>";
		
      }
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

	function createSidebarEntry(marker, name, type) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> {' + type +'}' ;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#666666';
      });
      return div;
    }
    
    function clearMap(){
    	//alert("Clearing map"):
    	map.clearOverlays();
    }
     

    
    //]]>