// GMap2 version written in October '96

var gFirst = 0;
var kCount = 11;
var gIsIE;
var kBlankIconPath = "MappingArt/blank.gif";


function createMarker(point, icon, text) {
    var marker = new GMarker(point, icon);
    var html = text;

    GEvent.addListener(marker, 'click', function() {
			   marker.openInfoWindowHtml(html);
		       });
    return marker;
}


function drawMap(xmlDoc, baseIcon) {
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    var icons = xmlDoc.documentElement.getElementsByTagName("icon");
    var wheres = xmlDoc.documentElement.getElementsByTagName("where");
    var motions = xmlDoc.documentElement.getElementsByTagName("motion");

    var map = new GMap2(document.getElementById("map"));
    
    var extremes = xmlDoc.documentElement.getElementsByTagName("extremes");
    var maxlat = parseFloat(extremes[0].getAttribute("maxlat"));
    var maxlon = parseFloat(extremes[0].getAttribute("maxlon"));
    var minlat = parseFloat(extremes[0].getAttribute("minlat"));
    var minlon = parseFloat(extremes[0].getAttribute("minlon"));
    
    map.setCenter(new GLatLng(0,0),0);
    var bounds = new GLatLngBounds(); 
    bounds.extend(new GLatLng(maxlat, maxlon));
    bounds.extend(new GLatLng(maxlat, minlon));
    bounds.extend(new GLatLng(minlat, maxlon));
    bounds.extend(new GLatLng(minlat, minlon));
	map.setZoom(map.getBoundsZoomLevel(bounds));
	map.setCenter(bounds.getCenter()); 

    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    
    map.setMapType(G_HYBRID_MAP);
    
    for (var i = 0; i < markers.length; i++) {
	var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
			       parseFloat(markers[i].getAttribute("lat")));
	var icon = new GIcon(baseIcon);
	icon.image = icons[i].getAttribute("image");
	var motion = motions[i].firstChild.nodeValue;
	var where = wheres[i].firstChild.nodeValue;
	if (motion != 'stationary') {
	    where += '; <br/>' + motion;
	}
	var html = '<div class="marker"><p>' + where + '</p></div>';
	var marker = createMarker(point, icon, html);
	map.addOverlay(marker);
    }
}


function showList(xmlDoc) {
    var extremes = xmlDoc.documentElement.getElementsByTagName("extremes");
    var maxRecord = parseInt(extremes[0].getAttribute("maxRecord"), 10 );

    var icons = xmlDoc.documentElement.getElementsByTagName("icon");
    var wheres = xmlDoc.documentElement.getElementsByTagName("where");
    var whens = xmlDoc.documentElement.getElementsByTagName("when");
    var indexes = xmlDoc.documentElement.getElementsByTagName("index");

    var list = document.getElementById("waypointsList");

    for (var i = 0; i < icons.length; i++) {
	var dtElem = document.createElement("dt");
	dtElem.className = "waypoint-item";

	var imgElem = document.createElement("img");
	imgElem.className = "waypoint-icon";
	var iconPath = icons[i].getAttribute("image");
	if (gIsIE) {
	    imgElem.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iconPath + "', sizingMethod='image');";
	    imgElem.src = kBlankIconPath;
	}
	else {
	    imgElem.src =  iconPath;
	}
	dtElem.appendChild(imgElem);

	var whereElem = document.createElement("strong");
	whereElem.className= "where";
	var whereTxt = document.createTextNode(wheres[i].firstChild.nodeValue);
	whereElem.appendChild(whereTxt);
	dtElem.appendChild(whereElem);
	
	var whenElem = document.createElement("strong");
	whenElem.className= "date";
	var whenTxt = document.createTextNode(whens[i].firstChild.nodeValue);
	whenElem.appendChild(whenTxt);
	dtElem.appendChild(whenElem);

	list.appendChild(dtElem);      
    }

    var fwdButton = document.getElementById("fwdButton");
    var bkButton = document.getElementById("bkButton");
    var first = indexes[0].firstChild.nodeValue;
    var last = indexes[icons.length-1].firstChild.nodeValue;

    if (first == 0 && last < maxRecord) {
	// Show back button only
	fwdButton.style.display = "none";
	bkButton.style.display = "block";
    }
    else if (first > 0 && last == maxRecord) {
	// Show forward button only
	fwdButton.style.display = "block";
	bkButton.style.display = "none";
    }
    else {
	// Show both buttons
	fwdButton.style.display = "block";
	bkButton.style.display = "block";
    }
}


function deleteList() {
    var list = document.getElementById("waypointsList");
    while (list.firstChild) {
	list.removeChild(list.firstChild);
    }

    document.getElementById("fwdButton").style.display = "none";
    document.getElementById("bkButton").style.display = "none";
}


function deleteMap() {
    var map = document.getElementById("map");
    while (map.firstChild) {
	map.removeChild(map.firstChild);
    }
}


function changeDateRange() {
    gFirst = ((this.id == "fwdButton") ? gFirst-=kCount : gFirst+=kCount);

    deleteList();
    
    deleteMap();

    myOnLoad();
}


function showHideLoading(showHide) {
	var msgDiv = document.getElementById("loadingMessage");
		
	if (msgDiv != null) {
		if (showHide == "show") {
			msgDiv.style.visibility = "visible";
		}
		else {
			msgDiv.style.visibility = "hidden";
		}
	}
}


function myOnLoad() {
	showHideLoading("show");
	
    var aVersion = navigator.appVersion.split("MSIE");
    var version = parseFloat(aVersion[1]);
    gIsIE = ((version >= 5.5) && document.body.filters);

    // Create the buttons, make sure they start out invisible
    var navArea = document.getElementById("navArea");

    var butt = document.createElement('BUTTON');
    var buttText = document.createTextNode('Backward');
    butt.appendChild(buttText);
    butt.setAttribute("id", "bkButton");
    butt.onclick = changeDateRange;
    butt.style.display = "none";
    butt.style.cssFloat = "left";
    navArea.appendChild(butt);

    butt = document.createElement('BUTTON');
    buttText = document.createTextNode('Forward');
    butt.appendChild(buttText);
    butt.setAttribute("id", "fwdButton");
    butt.onclick = changeDateRange;
    butt.style.display = "none";
    butt.style.cssFloat = "right";
    navArea.appendChild(butt);


    // Create a base icon for all of our markers that specifies the shadow, icon
    // dimensions, etc.
    var baseIcon = new GIcon();
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    baseIcon.infoShadowAnchor = new GPoint(18, 25);

    // Setup our connection to the XML document.  Make this asyncronous
    var xmlURL = "/cgi-bin/waypoints.xml.cgi?FIRST=" + gFirst +
	"&COUNT=" + kCount;

    request = GXmlHttp.create();
    request.open("GET", xmlURL, true);
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
	    xmlDoc = request.responseXML;
            drawMap(xmlDoc, baseIcon);
            showList(xmlDoc);      	
            showHideLoading("hide");
        }
    }
    request.send(null);
}