/***************************************************************
This file supports the Cross Country Pictures Section
It is AJAX-a-riffic!
****************************************************************/

var xmlHttp;
var sURL;
var map;
var arNames = [];
var iPrevLat = 40.655118;
var iPrevLng = -73.789673;

function load() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl());
		GEvent.addListener(map, "moveend", function() {
			//var center = map.getCenter();
			//document.getElementById("message").innerHTML = center.toString();
		});
		map.setCenter(new GLatLng(40.655118, -73.789673), 9);
		
		reqBigList();
		
	}
}

function reqBigList() {
	// REQUEST BigList
	sURL = "xusa.php?spot=points"
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleBigListStateChange;
	xmlHttp.open("GET", sURL, true);
	xmlHttp.send(null);
}

function gotBigList() {
	var responseXML = xmlHttp.responseXML;
	var currNode = responseXML.getElementsByTagName("points").item(0);
	currNode = currNode.firstChild;
	processPoint(currNode);
	while (currNode = currNode.nextSibling) {
		processPoint(currNode);
	}
	arNames.reverse();
	reqInfoBox(arNames.pop());
}

function processPoint(currNode) {
	sName = currNode.firstChild.firstChild.nodeValue;
	iLat = currNode.firstChild.nextSibling.firstChild.nodeValue;
	iLng = currNode.firstChild.nextSibling.nextSibling.firstChild.nodeValue;
	if (sName != "LINEPOINT") {
		arNames.push(sName);
	} 
	//Draw Line
	drawLine(iPrevLat, iPrevLng, iLat, iLng);
	iPrevLat = iLat;
	iPrevLng = iLng;
}

function addMarker(iLat, iLng, sHTML) {
	var point = new GLatLng(iLat, iLng);
	map.addOverlay(createMarker(point, sHTML));
}

function createMarker(point, sHTML) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(sHTML);
	});
	return marker;
}


function drawLine(iLatA, iLngA, iLatB, iLngB) {
	var points = [];
	points.push(new GLatLng(iLatA, iLngA),new GLatLng(iLatB, iLngB));
	map.addOverlay(new GPolyline(points));
}

function replaceImage(sID, sImage, sDesc) {
	//remove current image
	while (document.getElementById(sID).hasChildNodes())
	{
	  document.getElementById(sID).removeChild(document.getElementById(sID).firstChild);
	}
	var newimage = document.createElement("img");
	var br = document.createElement("br");
	newimage.setAttribute("src","images/" + sImage); 
	document.getElementById(sID).appendChild(newimage);
	document.getElementById(sID).appendChild(br);
	document.getElementById(sID).appendChild(document.createTextNode(sDesc));
}

function reqInfoBox(sName) {
		// REQUEST INFO
		sURL = "xusa.php?spot=" + sName
		createXMLHttpRequest();
		xmlHttp.onreadystatechange = handleInfoBoxStateChange;
		xmlHttp.open("GET", sURL, true);
		xmlHttp.send(null);
}

function gotInfoBox() {
		//PARSE INFO BOX INFO
		var responseXML = xmlHttp.responseXML;
		var currNode = responseXML.getElementsByTagName("name").item(0);
		sName = currNode.firstChild.nodeValue;
		currNode = currNode.nextSibling;
		sTitle = currNode.firstChild.nodeValue;
		currNode = currNode.nextSibling;
		iLat = currNode.firstChild.nodeValue;
		currNode = currNode.nextSibling;
		iLng = currNode.firstChild.nodeValue;
		//move to first image
		currNode = currNode.nextSibling.firstChild;
		sImage1 = currNode.firstChild.firstChild.nodeValue;
		sDesc1 = currNode.firstChild.nextSibling.firstChild.nodeValue;
		sDesc1 = sDesc1.replace(/[^a-zA-Z 0-9]+/g,'');
		// BUILD HTML
		sHTML = "<b>" + sTitle + "</b><table><tr><td valign=\"top\" height=\"270\"><div id=\"" + sName + "\">";
		sHTML = sHTML + "<img src=\"images/" + sImage1 + "\" /><br />" + sDesc1 + "</div><pre><p style=\"color:#0000FF\">";
		sHTML = sHTML + "<span onclick=\"replaceImage('" + sName + "','" + sImage1 + "','" + sDesc1 + "');\">1</span> ";
		
		iCount = 1;
		while(currNode = currNode.nextSibling) {
			iCount = iCount + 1;
			sImage = currNode.firstChild.firstChild.nodeValue;
			sDesc = currNode.firstChild.nextSibling.firstChild.nodeValue;
			sDesc = sDesc.replace(/[^a-zA-Z 0-9]+/g,'');
			sHTML = sHTML + "<span onclick=\"replaceImage('" + sName + "','" + sImage + "','" + sDesc + "');\">" + iCount + "</span> ";
			if (iCount == 14) {sHTML = sHTML + "<br />"; }
		}
		sHTML = sHTML + "</p></pre></td></tr></table>";
		addMarker(iLat, iLng, sHTML);
		if (arNames.length > 0) {
			//Get Next Marker
			//alert("finished " + sName + ", loading next spot - length is now " + arNames.length);
			reqInfoBox(arNames.pop());
		}
}



/****************** AJAX ***********************/
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function handleInfoBoxStateChange() {
	if(xmlHttp.readyState == 4) {
		if(xmlHttp.status == 200) {
			gotInfoBox();
		}
		else {
			alert ("AJAX error!");
		}
	}
}

function handleBigListStateChange() {
	if(xmlHttp.readyState == 4) {
		if(xmlHttp.status == 200) {
			gotBigList();
		}
		else {
			alert ("AJAX error!");
		}
	}
}