var markerCount=0;
var timeToTake=5;
var fps=50;
var peopleJourneys;
var map;
var increment=0;
var TimeoutId;
var currentMarker;
var infoWindowOpen=0;
var optsInfo=new Object();
var optsMap=new Object();

optsInfo.maxWidth=400;		
optsMap.zoomLevel=5;
//var icon = new GIcon();
function Location(name,point) {
	this.name=name;
	this.point=point;
}
function Journey(name,fromPoint,toPoint,latStep,lngStep,marker,iterations) {
	this.name=name;
	this.fromPoint=fromPoint;
	this.toPoint=toPoint;
	this.latStep=latStep;
	this.lngStep=lngStep;
	this.marker=marker;
	this.current=0;
	this.iterations=iterations;
	
	this.iterate=function() {this.current=this.current +1};
}
function JourneySet(locations,marker) {
	var location;
	var framesPerJourney;
	var j=0;
	var location=locations[0];
	var point=location.point;
	var name=location.name;
	
	this.marker=marker;
	this.current=0;
	this.journeys=new Array();
	this.iterate=function () {this.current=this.current +1};


	if (locations.length>1) {
		framesPerJourney=fps * timeToTake / (locations.length -1);
	} else {
		framesPerJourney=fps * timeToTake 
	}
		
	for (i=1;i<locations.length;i++) {
		location=locations[i];
		this.journeys[i-1]=new Journey(
			name + ' to ' + location.name,
			point,location.point,
			(location.point.lat() - point.lat())/framesPerJourney,
			(location.point.lng() - point.lng())/framesPerJourney,
			marker,
			framesPerJourney
		);
		point=location.point;
		name=location.name;	
	}		
}
function createMarker(point,icon,html) {
	var marker=new GMarker(point,icon);
	
	GEvent.addListener(marker, "click", function() {
		marker.show();
		marker.openInfoWindowHtml(html,optsInfo);
		map.setZoom(4);
		map.setCenter(marker.getPoint());
		currentMarker=marker;
		//marker.showMapBlowup(optsMap);
  	});
	return marker;
}
function createIcon(image,width,height,shadow) {
	var icon=new GIcon();
	icon.image = image;
	icon.shadow=shadow;
	icon.iconSize = new GSize(width, height);
	icon.shadowSize = new GSize(width,height);
	icon.iconAnchor = new GPoint(width/2, height/2);
	icon.infoWindowAnchor = new GPoint(5, 1);
	return icon;
}
	
function blowUpMap(marker) {
	marker.showMapBlowup(optsMap);
	return false;
}
function getSingleNamedElement(node,name) {
	var resultNode;
	var tmpNode;
	var childList=node.childNodes;
	for (var i=0;i<childList.length;i++) {
		tmpNode=childList.item(i);
		if (tmpNode.nodeType==1 && tmpNode.nodeName==name) {
			resultNode=tmpNode;
			break;
		}
	}
	return resultNode;
}
function getText(node) {
	var text='';
	for (var i=0;i<node.childNodes.length;i++) {
		var tmpNode=node.childNodes.item(i);
		if (tmpNode.nodeType==3) {
			text+=tmpNode.nodeValue + ' ';
		}
	}
	return text;
}
function xmlLoad(url) {
	var xmlDoc;
	// code for IE
	if (window.ActiveXObject)
	{
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	// code for Mozilla, Firefox, Opera, etc.
	else if (document.implementation && document.implementation.createDocument)
	{
		xmlDoc=document.implementation.createDocument("","",null);
	}
	else
	{
		alert('Your browser cannot handle this script');
	}
	xmlDoc.async = false;  // We want to load synchronously 
	xmlDoc.load(url);      // Load and parse 
	return xmlDoc;         // Return the document 
}
//function xmlGetData(xmldoc,textVersionElement) {
function xmlGetData(xmldoc) {
	var returnList=new Array();
	var root=getSingleNamedElement(xmldoc,"week")
	var j=0;
	var location;
	var personList=root.getElementsByTagName("person");
	for(var x=0;x<personList.length;x++) {
		var person=personList.item(x);
		var personName=person.attributes.getNamedItem("name").nodeValue;
		var point;
		var i=0;
		var locationList=person.getElementsByTagName("location");
		var locations=new Array();
		var explanationText='';
		var explanationList=person.getElementsByTagName("explanation");
		if (explanationList.length>0) {
			for (var y=0;y<explanationList.length;y++)  {
				var explanation=explanationList.item(y);
				var tripSet=explanation.parentNode;
				var linkText=tripSet.attributes.getNamedItem("link").nodeValue;
				explanationText +='<div class="trip"><h2>' + personName +'</h2><h3>' + tripSet.attributes.getNamedItem("name").nodeValue + '</h3>' + '<p>' + getText(explanation) + '</p><p class="readMore">';
				if (linkText.length>3) {
					explanationText+='<a href="' + linkText + '">Read More</a>';
				}		
				//explanationText+='<a href="#" onclick="return blowUpMap(currentMarker);">Detail Map</a>';
				explanationText+='</p></div>';
			}
			/*textVersionElement.innerHTML +='<div class="personTrip">' + 
				'<img align="left" hspace="10" vspace="5" src="' + person.attributes.getNamedItem("image").nodeValue 
				+ '" height="' + person.attributes.getNamedItem("height").nodeValue 
				+ '" width="' + person.attributes.getNamedItem("width").nodeValue 
				+ '" alt="' + personName + '" />'
				+ explanationText + '</div>';*/
		}
		
		var icon=createIcon(
			person.attributes.getNamedItem("image").nodeValue,
			parseInt(person.attributes.getNamedItem("width").nodeValue),
			parseInt(person.attributes.getNamedItem("height").nodeValue),
			"http://labs.google.com/ridefinder/images/mm_20_shadow.png"
		);				
		
		for (var y=0;y<locationList.length;y++) {				
			var location=locationList.item(y);
			var name=location.attributes.getNamedItem("name").nodeValue;
			var latitude=parseFloat(location.attributes.getNamedItem("latitude").nodeValue);
			var longitude=parseFloat(location.attributes.getNamedItem("longitude").nodeValue);

			locations[i]=new Location(
				name,
				new GLatLng(latitude,longitude)
			);
			i++;						
		}
		point=locations[0].point;
  		marker=createMarker(point,icon,explanationText);
		//marker=new GMarker(point);
		returnList[j]=new JourneySet(locations,marker);
		//map.addOverlay(marker);
		j++;
	}
	
	return returnList;
}

function nextStep() {
	var end=0;
	//alert('step');
	//map.clearOverlays();		
	increment+=1;
	if (increment>=fps*timeToTake) {
		end=1;
	}
	for (var x=0;x<peopleJourneys.length;x++) {
		var peopleJourney=peopleJourneys[x];
		var marker=peopleJourney.marker;
		var current=peopleJourney.current
		//var currentJourney=peopleJourney.journeys[current];
		var point;
		point=new GLatLng(marker.getPoint().lat()+peopleJourney.journeys[current].latStep,marker.getPoint().lng()+peopleJourney.journeys[current].lngStep);
		peopleJourney.journeys[current].iterate();
		if (peopleJourney.journeys[current].current>=peopleJourney.journeys[current].iterations) {
			peopleJourneys[x].iterate();
			if (peopleJourneys[x].current<peopleJourney.journeys.length) {
				point=peopleJourneys[x].journeys[peopleJourneys[x].current].fromPoint;
			} else {
				point=peopleJourney.journeys[current].toPoint;
			}
		}
		peopleJourneys[x].marker.setPoint(point);
	}
	if (end!=1) {
		TimeoutId=setTimeout(nextStep,1000/fps);
	} else {
		window.document.getElementById('mapButtons').style.visibility='visible';
		TimeoutId=-1;
	}
}
function copyText(textVersion,noscriptVersion) {
	var newNode=noscriptVersion.childNodes[0].cloneNode(true);
	textVersion.appendChild(newNode);	
}
function recenter() {
	map.closeInfoWindow();
	map.setCenter(new GLatLng(20,10), 2);
}
function restart() {
	if (TimeoutId>0) {
		clearTimeout(TimeoutId);
	}
	start();
}
function start() {
	increment=0;
    if (GBrowserIsCompatible()) {
	
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	GEvent.addListener(map,"infowindowclose",function () {recenter();})
	//map.addControl(new GMapTypeControl());
	recenter()
	var xmldoc=xmlLoad(xmlFile);
	peopleJourneys=xmlGetData(xmldoc);
	for (var i=0;i<peopleJourneys.length;i++) {
		var peopleJourney=peopleJourneys[i];
		var marker=peopleJourney.marker;
		marker.setPoint(peopleJourney.journeys[0].fromPoint);
		map.addOverlay(marker);
	}
  	
  	TimeoutId=window.setTimeout(nextStep,1000/fps);
    }
    //copyText(document.getElementById('textVersion'),document.getElementById('noScriptText'));
	document.getElementById('textVersion').style.display='block';
}