$(document).ready( startup );

var map;

function startup()
{
	detectBrowser();
	initMap();
	loadHistory();
}

function initMap() 
{
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(37.4419, -122.1419), 13);
		map.setUIToDefault();
	}
}

function createMarkers(tweets)
{
	for (i = 0; i < tweets.length; i++)
	{
		var marker = createMarker( tweets[i] );
	}
}


function createMarker(tweet)
{
	var html = "";
	if (tweet.image.length > 0)
	{
		html += "<div style='font-family:Helvetica, sans-serif;font-size:small;width:240px;height:240px;'><b>" + tweet.date + "</b><br/><br/><span style='color:#666'>" + tweet.text + "</span><br /><div style='margin-top:5px;margin-bottom:10px;'><img src='" + tweet.image + "' alt='' /></div>";
	} else
	{
		html += "<div style='font-family:Helvetica, sans-serif;font-size:small;width:240px;'><b>" + tweet.date + "</b><br/><br/><span style='color:#666'>" + tweet.text + "</span></div>";
	}
	
	var marker = new GMarker(tweet.latLng);

	GEvent.addListener(marker, "click", function() 
	{
	  map.openInfoWindowHtml(tweet.latLng, html);
	  });
	map.addOverlay(marker);
	
	return marker;
}

function centreMap(latLng)
{
	map.setCenter(latLng);
}



function detectBrowser() 
{
	var useragent = navigator.userAgent;
	var mapdiv = document.getElementById("map");
	//var warningdiv = document.getElementById("warning_div");
		
	if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 )
	{
		mapdiv.style.width = '100%';
		mapdiv.style.height = '100%';
		//warningdiv.style.width = '50%';
		//warningdiv.style.height = '10%';
	} else 
	{
		mapdiv.style.width = '600px';
		mapdiv.style.height = '400px';
		//warningdiv.style.width = '300px';
		//warningdiv.style.height = '40px';
	}
}

function loadHistory()
{
	$.ajax(
	{
		type: "GET",
		url: "/assets/data/history-09-09-09.xml?cache=" + Math.floor(Math.random()*100000),
		dataType: "xml",
		success: parseXML,
		error: xmlError
	});
}

function xmlError(XMLHttpRequest, textStatus, errorThrown)
{
	alert(XMLHttpRequest + " " + textStatus + " " + errorThrown);
}

function parseXML(xml)
{
	var tweets = [];
	var waypoints = [];
	var index = 0;
	
	waypoints[index] = [];
	
	$(xml).find('status').each(
		function()
		{
			var status = $(this);
			
			if (status.find('geo_ref').attr('new_polyline') )
			{
				index++;
				waypoints[index] = [];
			}
			
			var geoSplit = status.find('geo_ref').text().split(",");	
		
			if (geoSplit.length > 1)
			{
				var lat = parseFloat(geoSplit[0]);
				var lng = parseFloat(geoSplit[1]);
				var latLng = new google.maps.LatLng(lat, lng);
				var dateSplit = status.find('date').text().split("/");
				var date = dateSplit[0] + " :: " + dateSplit[1];
				var text = status.find('text').text();
				var images = status.find('images').text();
				tweets.push( {date: date, text: text, latLng: latLng, image: images});
				
				waypoints[index].push(latLng);
				
				var via = status.find('geo_ref').attr('via');
				if (via != null)
				{
					var viaSplit = via.split(",");
					var lat = parseFloat(viaSplit[0]);
					var lng = parseFloat(viaSplit[1]);
					var latLng = new google.maps.LatLng(lat, lng);
					waypoints[index].push(latLng);
				}
				
				if (waypoints[index].length > 20)
				{
					index++;
					waypoints[index] = [];
				}
			}
		});
		
		waypoints.reverse();
		for (var i = 0; i < waypoints.length; i++)
		{
			var polySet = waypoints[i];
			if (polySet.length > 0)
			{
				polySet.reverse();
				getDirectionsFromArray(polySet);
			}
		}
		
		getDirectionsFromArray(waypoints[0]);
		
		map.setCenter(tweets[0].latLng, 8);
		
		createMarkers(tweets);
}

function getDirectionsFromArray(polySet)
{
	var directionsPanel = document.getElementById("warning_div");
	//var directions = new GDirections(null, directionsPanel);
	var directions = new GDirections();
	
	GEvent.addListener(directions, "load", function()
	{ 
			var poly = directions.getPolyline(); 
			poly.color = "#CC0000";
			map.addOverlay(poly);
	});

	//directions.loadFromWaypoints( polySet, { travelMode: G_TRAVEL_MODE_WALKING, getPolyline: true } );
	directions.loadFromWaypoints( polySet, {getPolyline:true});
}