if ( typeof window.addEventListener != "undefined" ){
	window.addEventListener( "resize", resizeMap, false );
}
else if ( typeof window.attachEvent != "undefined" ) {
	window.attachEvent( "onresize", resizeMap );
}

      // this variable will collect the html which will eventualkly be placed in the sidebar
      var sidebar_html = "";

      // 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 = [];

	  var map = null;
	  
	  var prevHeader = "";




function loadMap(){
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map"));
	  map.setCenter(new GLatLng(37.776089201922775, -122.441586256026875), 13);
	  map.addControl(new GLargeMapControl());
	  map.addControl(new GMapTypeControl());
          map.enableGoogleBar();
	  GDownloadUrl("sfparking.xml", process_it);

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

	function process_it(data, responseCode) {
		  //alert(data);
		  var xml = GXml.parse(data);
		  var markers = xml.documentElement.getElementsByTagName("spot");
		  for (var i = 0; i < markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
			var spaces = markers[i].getAttribute("spaces");
			var free = markers[i].getAttribute("free");
			var tooltip = markers[i].getAttribute("title");
			var id = parseFloat(markers[i].getAttribute("id"));
			var nbhood = markers[i].getAttribute("nbhood");
			var notes = markers[i].getAttribute("notes");

			var html = "<b>"+tooltip+"</b><br/><hr/>";
			html = html + "Spaces: " + spaces + "<br/>";
			html = html + "Free: " + free + "<br/>";
			//html = html + "Street Cleaning: " + "<br/>";
			//html = html + "Details: " + markers[i].nodeValue + "<br/>";
			//html = html + "Notes: " + notes;
			if (notes != ""){
				html += "Notes: " + notes;
			}

			var baseIcon = new GIcon();
			baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_50_shadow.png";
			baseIcon.iconSize = new GSize(20, 34);
			baseIcon.shadowSize = new GSize(22, 20);
			baseIcon.iconAnchor = new GPoint(6, 20);
			baseIcon.infoWindowAnchor = new GPoint(5, 1);


			var iconImage = "./images/marker";
			if(free == "Y"){
				iconImage = iconImage+"-GREEN";
			}else{
				iconImage = iconImage+"-RED";
			}
			if(spaces !=""){
				iconImage = iconImage+"-"+spaces+".png";
			}else{
				iconImage = iconImage+".png";
			}


			var myIcon = new GIcon(baseIcon);
			myIcon.image = iconImage;

			map.addOverlay(createMarker(point, html, myIcon, tooltip, id, free, spaces, nbhood));
		  }//end iterating spots

          //sidebar_html += </div>;
          document.getElementById("sidebar").innerHTML = sidebar_html;
          //alert(sidebar_html);
          //window.open(sidebar_html,"Window1","menubar=no,width=430,height=360,toolbar=no");
	}

	function createMarker(point, html, myIcon, tooltip, id, free, spaces, nbhood) {
	  var marker = new GMarker(point, {title: tooltip, icon: myIcon});

        // The info window version with the "to here" form open
        to_htmls[id] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + id + ')">From here</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.lat() + ',' + point.lng() +
           '"/>';
        // The info window version with the "to here" form open
        from_htmls[id] = html + '<br>Directions: <a href="javascript:tohere(' + id + ')">To here</a> - <b>From here</b>' +
           '<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.lat() + ',' + point.lng() +
           '"/>';
        // The inactive version of the direction info
        html = html + '<br>Directions: <a href="javascript:tohere('+id+')">To here</a> - <a href="javascript:fromhere('+id+')">From here</a>';


	  GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html, { maxWidth : 300 });
	  });

        // save the info we need to use later for the sidebar
        gmarkers[id] = marker;
        htmls[id] = html;
        // add a line to the sidebar html
		var myImage = "./images/circle";
		if(free == "Y"){
			myImage = myImage + "-GREEN";
		}else{
			myImage = myImage + "-RED";
		}
		if(spaces != ""){
			myImage = myImage + "-" + spaces + ".png";
		}else{
			myImage = myImage + ".png";
		}
		if (prevHeader != nbhood) {
			prevHeader = nbhood;
			if(nbhood != 'Castro - Noe Valley'){
				sidebar_html += '</div>'
			}
			sidebar_html += '<div><h4><a onclick="displayHidden(\''+nbhood+'\');" href="javascript:void(0)">'+ nbhood + '</a></h4></div>';
			sidebar_html += '<div style="display: none;" id="'+nbhood+'">';
		}
		
		sidebar_html += '<a href="javascript:myclick(' + id + ')"><img style="border: none" src="'+myImage+'"  /></a>&nbsp;';
        sidebar_html += '<a class="links" href="javascript:myclick(' + id + ')">' + tooltip + '</a><br/>';

	  return marker;
	}


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
      	map.setCenter(gmarkers[i].getPoint());
      	map.setZoom(17);
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

      // functions that open the directions forms
      function tohere(i) {
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
      }
      function fromhere(i) {
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
      }


function getInsideWindowHeight() {
    isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
    if (window.innerHeight) {
        return window.innerHeight;
    } else if (isIE6CSS) {
        // measure the html element's clientHeight
        return document.body.parentElement.clientHeight
    } else if (document.body && document.body.clientHeight) {
        return document.body.clientHeight;
    }
    return 0;
}

function resizeMap(){
	var h = getInsideWindowHeight();
	h = h - 115;
	document.getElementById("body").style.height= h + 'px';
	document.getElementById("sidebar").style.height= h + 'px';
	document.getElementById("map").style.height= h + 'px';
}
	
  function displayHidden(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }