// Javascript for Paleosites mapping.

// Stack of Configurations.
var saveStack = new Array;

var currentState = "";
var currentStateIndex = 0;
var currentSiteIndex = 0;
var currentSiteType = "state";

function Config (type, stateIndex, siteIndex) {
    this.type = currentSiteType;    // Type is one of "state" or "site"
    this.state = stateIndex;
    this.site = siteIndex;
}
function PushConfig () {
    var c = new Config(currentSiteType, currentStateIndex, currentSiteIndex);
    // alert("Added Config " + currentSiteType);
    saveStack.push(c);
}
function PopConfig () {
    if (saveStack.length == 0) { alert("No more saved locations"); return; };
    var c = saveStack.pop();
    if (c.type == "state") {
	SetStateBody(c.state);
	document.getElementById("selectState").selectedIndex = c.state;
    } else {
	SetStateBody(c.state);
	document.getElementById("selectState").selectedIndex = c.state;
	SetMapLocationBody(c.site);
    };
    //    if (c.type == "state") {
    //	alert("Popping Config " + c.type + " " + c.state);
    //	SetStateBody(c.state);
    //	document.getElementById("selectState").selectedIndex = c.state;
    //    } else {
    //	alert("Popping Config " + c.type + " " + c.site);
    //	SetMapLocationBody(c.site);
    //    }
}

// Array of state points, documentation, and URL.
var statePoints = new Array;
var stateDetail = new Array;
var stateUrls   = new Array;
var stateSites  = new Array;
var preferredStartState = 0;

// Array of site points, documentation, and URL.
var sitePoints = new Array;
var siteDetail = new Array;
var siteUrls = new Array;

var backButton    = '<input type="button" name="back" id="back" value="back" onClick="PopConfig()" style="margin: 0px; padding: 0px;" />';

var selectStates  = '<select id="selectState" onchange="SetState(this.selectedIndex)">';
var selectOptions = "";

var map = "";
var pauseInterval = 400;

function createXmlHttpRequest() {
    GXmlHttp.create();
}
function loadXMLDoc(url) {

    var request = createXmlHttpRequest();
    if (request) {
	request.open("GET", url, true);
	request.onreadystatechange = function() {
	    if (request.readyState == 4) {
		var siteDom = request.responseXML;
		var states = siteDom.getElementsByTagName("markerState");
		loadSitesFromXML(siteDom);
	    }
	};
        request.send(null);
    }
}
function SetState (i) {
    PushConfig();
    SetStateBody(i);
};

function SetStateBody (i) {
    currentStateIndex = i;
    currentSiteType = "state";
    WriteDetail(stateDetail[i]);
    WriteUrl(stateUrls[i]);
    document.getElementById("LocationList").innerHTML = stateSites[i];    
    map.setCenter(statePoints[i], 6); // center on LagLng, Gmap2 zoom
};

// Unsatisfactory. Missing parts of map.  In some cases,
// everything. See refreshBug.html.

function SetMapLocation (pointIndex) {
    PushConfig();
    SetMapLocationBody(pointIndex);
}
function SetMapLocationBody (pointIndex) {
    currentSiteIndex = pointIndex;
    currentSiteType = "site";
    WriteDetail(siteDetail[pointIndex]);
    WriteUrl(siteUrls[pointIndex]);
    map.setCenter(sitePoints[pointIndex], 12);  // center on LagLng, Gmap2 zoom
    PauseComp(pauseInterval);
};
function PauseComp(millis) {
    date = new Date();
    var curDate = null;
    do { var curDate = new Date(); } 
    while (curDate-date < millis);
}; 
function WriteBack (text) {
    document.getElementById("backClick").innerHTML = text;
};
function WriteStates (text) {
    document.getElementById("stateSelect").innerHTML = text;
};
function WriteMessage (text) {
    document.getElementById("Message").innerHTML = text;
};
function WriteDetail (text) {
    document.getElementById("Detail").innerHTML = text;
};
function AddDetail (text) {
    document.getElementById("Detail").innerHTML += " - " + text;
};
function WriteUrl (text) {
    document.getElementById("Url").innerHTML = text;
};

// Define icon types (site, siteX, event, visit).
var siteIcon = new GIcon();
siteIcon.image = "Icons/mm_20_red.png";
siteIcon.iconSize = new GSize(10, 20);
siteIcon.iconAnchor = new GPoint(9, 20);
siteIcon.infoWindowAnchor = new GPoint(9, 2);

var siteXIcon = new GIcon(siteIcon);
siteXIcon.image = "Icons/mm_20_orange.png";
var eventIcon = new GIcon(siteIcon);
eventIcon.image = "Icons/mm_20_green.png";
var visitIcon = new GIcon(siteIcon);
visitIcon.image = "Icons/mm_20_blue.png";
var centerIcon = new GIcon(siteIcon);
centerIcon.image = "Icons/mm_20_gray.png";
var clubIcon   = new GIcon(siteIcon);
clubIcon.image = "Icons/mm_20_purple.png";
var beginIcon = new GIcon(siteIcon);
beginIcon.image = "Icons/mm_20_orange.png";

function createMarker(point,iconType) {
    // Create a new icon for this point iconType.
    var icon = new GIcon(iconType);
    var myMarker = new GMarker(point, icon);
    return myMarker;
};

var m2 = "";

function addSite (site,siteIndex) {
    
    var siteType = site.getAttribute("type");
    var siteName = site.getAttribute("name");
    var siteUrl  = site.getAttribute("url");
    
    if (siteUrl == null)
	{ siteUrl = ""; }
    else
	{ siteUrl = '<b>URL:</b> <a target="PaleoURL" href ="' + siteUrl + '">' + siteUrl + "</a>"; };
    
    var detailText = site.getAttribute("detail");
    if (detailText == null) { detailText = " "; };
    detailText = '<b>' + siteName + '</b>' + '<br />' + detailText; 
    siteDetail[siteIndex] = detailText;
    siteUrls[siteIndex] = siteUrl;
    
    // var p2 = new GPoint(parseFloat(site.getAttribute("lng")),
    // 			parseFloat(site.getAttribute("lat")));
    
    var p2 = new GLatLng(parseFloat(site.getAttribute("lat")),
 			 parseFloat(site.getAttribute("lng")));

    sitePoints[siteIndex] = p2;
    
    var p2Icon = siteIcon;
    // Icon types (site, siteX, event, visit)
    if      (siteType == "siteX")  { p2Icon = siteXIcon; }
    else if (siteType == "event")  { p2Icon = eventIcon; }
    else if (siteType == "visit")  { p2Icon = visitIcon; }
    else if (siteType == "museum") { p2Icon = visitIcon; }
    else if (siteType == "club")   { p2Icon = clubIcon; };
    
    var siteMarker = createMarker(p2,p2Icon);
    GEvent.addListener(siteMarker, 'click', function() {
	SetMapLocation(siteIndex); // WriteDetail(detailText);
    });
    map.addOverlay(siteMarker);
    
    // The LI.class element makes the bullet a color coded icon similar to
    // the ones on the map.

    var itemString = '<li class="' + siteType + '"><a href="javascript:void(0)" ' +
	'onclick="SetMapLocation(' + siteIndex + ')">'
	+ siteName + '</a></li>';
    
    selectOptions += itemString;
    
};

var p2 = "";

function addState (state,si) {
    
    var stateName = state.getAttribute("name");
    // Glog.write(stateName);   // New Gmap2 feature.

    // if (stateName == "Texas") { preferredStartState = si; };

    var stateUrl  = state.getAttribute("url");
    if (stateUrl == null)
	{ stateUrl = ""; }
    else
	{ stateUrl = '<b>URL:</b> <a target="PaleoURL" href ="'
	      + stateUrl + '">' + stateUrl + "</a>"; };

    var lng = parseFloat(state.getAttribute("lng"));
    var lat = parseFloat(state.getAttribute("lat"));
    
    // p2 = new GPoint(lng, lat);
    var p2 = new GLatLng(lat, lng);
    statePoints[si] = p2;
    stateDetail[si] = state.getAttribute("detail");
    stateUrls[si]   = stateUrl;

    selectStates += '<option value="' + stateName + '">' + stateName + '</option>';
    selectOptions = '<ul>';

};

// Use data in data.xml to adds sites to map and menus. 
// The format we expect is:
// <markers>
//  <markerCountry name="United States" lat="" lng="">
//   <markerState name="Texas" lat="" lng="">
//    <marker lat="" lng="" type="" name="" state="" detail="" url="">  
//    ...
// </markers>

function loadSitesFromXML(xmlDoc) {
    
    AddDetail("loading");
    var markerStates = xmlDoc.documentElement.getElementsByTagName("markerState");
    var markerLength = markerStates.length
        var k = 0;
    
    for (var i = 0; i < markerLength; i++) { 
	
	addState(markerStates[i],i);
	
	var markers = markerStates[i].getElementsByTagName("marker");
	for (var j = 0; j < markers.length; j++) { 
	    addSite(markers[j],k); 
	    k = k+1;
	}
	selectOptions += '</ul>';
	stateSites[i] = selectOptions;
    };
    
    selectStates += '</select>';

    WriteStates(selectStates);
    WriteBack(backButton);

    document.getElementById("LocationList").innerHTML = stateSites[0];

    var legend = '<img src="Icons/mm_20_red.png" /> Site | <img src="Icons/mm_20_orange.png"/> Site (w/ permission) | <img src="Icons/mm_20_green.png"/> Event | <img src="Icons/mm_20_blue.png"/> Museum or Park | <img src="Icons/mm_20_purple.png"/> Club';
    WriteMessage(legend); 
    SetStateBody(preferredStartState);
    document.getElementById("selectState").selectedIndex = preferredStartState;
};

// Combination of Event Listeners and
// using XML and Asynchronous RPC ("AJAX") with Maps
//
// In this example, we download a static file ("dataStates.xml") that contains a
// list of lat/lng coordinates in XML. When the download completes, we parse
// the XML and create a marker at each of those lat/lngs.
//
// Event listeners are registered with =GEvent.addListener=. In this example,
// we echo the lat/lng of the center of the map after it is dragged or moved
// by the user.

function onLoad() {
    
    // Create map.
    // Add large size control and type (map, satellite, hybrid).
    // Center on Austin.
    
    if (GBrowserIsCompatible()) {
	
	map = new GMap2(document.getElementById("MapInCell"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	
	// var point = new GPoint(-97.78316974639893, 30.294127625336497);
	var point = new GLatLng(30.294127625336497, -97.78316974639893);
	map.setCenter(point, 13);   // Gmap2 zoom
	
	// Download the data in data.xml and load it on the map. The format we
	// expect is:
	// <markers>
	//  <markerCountry name="United States" lat="" lng="" detail="" url="" />
	//   <markerState  name="Texas"         lat="" lng="" detail="" url="" />
	//    <marker      name="Site Name"     lat="" lng="" detail="" url="" type="" state="" />  
	//    ...
	// </markers>
	
	var request = GXmlHttp.create();
	request.open("GET", "dataStates.xml", true);
	request.onreadystatechange = function() {
	    if (request.readyState == 4) {
		loadSitesFromXML(request.responseXML);
	    }
	};
	request.send(null); 
    } else {
	WriteMessage('<b>Your browser does not support Google Maps.  See <a href="http://local.google.com/support/bin/answer.py?answer=16532&topic=1499"> Google browser information</a></b>'); 
    };
    
};