var theMap; //The map object
var northPath;
var southPath;

//set up the arrays for polyline
var locationArrays = new Array(2);
  locationArrays[0] = new Array();
  locationArrays[1] = new Array();
var arrayNum = 0;

var infoWindowSize = new google.maps.Size(50,50);
var polyLineColors = new Array(2);
  polyLineColors[0] = '#FF0000';
  polyLineColors[1] = '#00FF00';

function initialize() {
	var latlng = new google.maps.LatLng(0, 0);
	var myOptions = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.TERRAIN
	};

	theMap = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

	//load up all the data points
	var req = new XMLHttpRequest();
	//req.overrideMimeType('text/xml');

	req.open('GET', 'dataPoints.xml', true);
	req.onreadystatechange = function (aEvt) {
		if (req.readyState == 4) {
			if(req.status == 200)
				parseRequest(req.responseXML);
			else
				alert('Can\'t load data points!');
		}  
	};
	req.send(null);
}

function parseRequest(data) {
	var markers = data.getElementsByTagName('marker');
	for( var i = 0; i < markers.length; i++ ) {
		var locationNode = markers[i].getElementsByTagName('location')[0];
		var location = new google.maps.LatLng( Number( locationNode.getAttribute('lat') ), Number( locationNode.getAttribute('lng') ));
	
		locationArrays[arrayNum].push(location);
		
		var endNodes = markers[i].getElementsByTagName('endpoint');
		if( endNodes.length > 0 ){
			arrayNum = 1;
		}

		var marker = new google.maps.Marker({
			title: markers[i].getAttribute('title'),
			map: theMap,
			position: location
		});

		//center on last location
		if(i == markers.length - 1) {
			theMap.setCenter( location );
		}

		//set up the info bubble (if any)
		var infoNodes = markers[i].getElementsByTagName('info');
		if( infoNodes.length > 0 ) {
			addInfoToMarker(marker, parseInfoNode(infoNodes[0],  Number( locationNode.getAttribute('lat') ), Number( locationNode.getAttribute('lng') ) ) );
		} else {
			addInfoToMarker(marker, locationToFormattedString( Number( locationNode.getAttribute('lat') ), Number( locationNode.getAttribute('lng') ) ) );
		}
	}

	northPath = new google.maps.Polyline({ path: locationArrays[0], 
		strokeColor: polyLineColors[0],
		strokeOpacity: 1.0,
		strokeWeight: 2
		});

	southPath = new google.maps.Polyline({ path: locationArrays[1],
		strokeColor: polyLineColors[1],
		strokeOpacity: 1.0,
		strokeWeight: 2
		});

	northPath.setMap(theMap);
	southPath.setMap(theMap);

}

function locationToFormattedString(lat, lng) {
	var truncatedLat = Math.round(lat * 100) / 100;
	var truncatedLng = Math.round(lng * 100) / 100;

	return '<small><strong>Lat: </strong>' + truncatedLat + ' <strong>Lng: </strong>' + truncatedLng + '</small><br />';
}

function parseInfoNode(node, lat, lng) {
	var contentString = '';
	var day = 0;
	var month = 0;
	var year = 0;

	//get date
	var dateNodes = node.getElementsByTagName('date');
	if( dateNodes.length > 0 ) {
		day = Number( dateNodes[0].getAttribute('day') );
		month = Number( dateNodes[0].getAttribute('month') );
		year = Number( dateNodes[0].getAttribute('year') );

		contentString += '<big><strong>';
		contentString += month

		if(day != 0) {
			contentString += '.';
			contentString += day
		}

		if(year != 0) {
			contentString += '.';
			contentString += year
		}
		contentString += '</strong></big><br />';
	}

	contentString += locationToFormattedString(lat, lng);

	//get elevation
	var elevationNodes = node.getElementsByTagName('elevation');
	if( elevationNodes.length > 0 ) {
		contentString += '<small><strong>Elevation: </strong>';
		contentString += elevationNodes[0].getAttribute('value');
		contentString += 'm</small><br />';
	}

	//get blogpost
	var blogNodes = node.getElementsByTagName('blogposts');
	if( blogNodes.length > 0 && dateNodes.length > 0) {
		contentString += '<a href="blog';
		if(year != 0)
		{
			contentString += '/' + year;
			if(month != 0)
			{
				contentString += '/' + month;
				if(day != 0)
				{
					contentString += '/' + day;
				}
			}
		}
		contentString += '/">Read Blog Posts</a><br />';
	}

	//get comment
	var commentNodes = node.getElementsByTagName('comment');
	if( commentNodes.length > 0 ) {
		contentString += commentNodes[0].getAttribute('value');
	}

	return contentString;
}

function addInfoToMarker(marker, theContent) {
	var info = new google.maps.InfoWindow({
		size: new google.maps.Size(150,100),
		content: theContent
	});

	//add listener for this info window
	google.maps.event.addListener(marker, 'click', function() {
		info.open(theMap, marker);
	});
}