/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
*/
function xmlParse(str) {
	if ( typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined' ) {
		var doc = new ActiveXObject('Microsoft.XMLDOM');
		doc.loadXML(str);
		return doc;
	}
	
	if (typeof DOMParser != 'undefined') {
		return (new DOMParser()).parseFromString(str, 'text/xml');
	}
	
	return createElement('div', null);
}

function xmlValue(node) {
	return ( node.innerText || node.text || node.textContent ).strip();
}


var gmap, infowin;
var markers = [];

function initMap() {
	gmap = new google.maps.Map( $('gmap'), {
		zoom: 8,
		center: new google.maps.LatLng(41.55,-72.8),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	
	// Download the data in data.xml and load it on the map.
	new Ajax.Request( "map_data.xml", {
		method: "get",
		onSuccess: function(transport) {
			var xml = xmlParse(transport.responseText);
			var dataset = xml.documentElement.getElementsByTagName("marker");
			for ( var i = 0; i < dataset.length; i++ ) {
				var n = dataset[i];
				markers[i] = createMarker( new google.maps.LatLng( parseFloat(n.getAttribute("lat")), parseFloat(n.getAttribute("lng")) ), n );
				//map.addOverlay( markers[i] );
			}
		}
	});
	
}

function createMarker( latlng, node ) {
	var t = xmlValue( node.getElementsByTagName("office")[0] ) + " Office";
	
	var marker = new google.maps.Marker({ position: latlng, map: gmap, title: t });
	
	var infoHTML = "<div id=\"infoWindowContent\">";
	infoHTML += "<div class=\"title\">" + t + "</div>";
	infoHTML += "<div style=\"margin-bottom: 1em;\">" + xmlValue( node.getElementsByTagName("address")[0] ) + "<br />";
	infoHTML += xmlValue( node.getElementsByTagName("city")[0] ) + "<br />";
	infoHTML += xmlValue( node.getElementsByTagName("phone")[0] ) + "</div>";
	infoHTML += "<div>Get directions: <b>To here</b></div>";
	infoHTML += "<form action=\"http://maps.google.com/maps\" method=\"get\" target=\"_blank\" >" +
	   "<span>Start address</span><br />" +
	   "<input type=\"text\" maxlength=\"80\" name=\"saddr\" id=\"saddr\" style=\"width: 180px; padding: 2px;\" autocomplete=\"off\" />" +
	   "<input type=\"submit\" value=\"Go\" />" +
	   "<input type=\"hidden\" name=\"daddr\" value=\"" + xmlValue( node.getElementsByTagName("address")[0] ) +
	   ", " + xmlValue( node.getElementsByTagName("city")[0] ) + "\" /></form>";
	infoHTML += "</div>";
	
	marker.infoWindow = new google.maps.InfoWindow({ content: infoHTML });
	
	google.maps.event.addListener( marker, "click", function() {
		if ( infowin && infowin !== this.infoWindow )  infowin.close();
		infowin = this.infoWindow;
		this.infoWindow.open( this.map, this );
	});
	
	return marker;
}

function zoomMarker(index) {
	var marker = markers[index];
	
	gmap.setZoom(13);
	gmap.panTo( marker.getPosition() );
	
	if ( infowin && infowin !== this.infoWindow )  infowin.close();
	infowin = marker.infoWindow;
	marker.infoWindow.open( gmap, marker );
}


document.observe( "dom:loaded", initMap );
//Event.observe( "window", "unload", GUnload );