var centerLatitude = 33.285;
var centerLongitude = -160.664;
var startZoom = 3;
var map;
var markers_loaded = false;

var coord_pacific = new GLatLng(centerLatitude, centerLongitude);
var zoom_pacific = 3;
var coord_alaska = new GLatLng(57.751, -156.368);
var zoom_alaska = 4;
var coord_hawaii = new GLatLng(20.6, -157.4);
var zoom_hawaii = 7;
var coord_cnmi = new GLatLng(17.6, 145.6);
var zoom_cnmi = 6;
var coord_utnm = new GLatLng(36.8, -109.5);
var zoom_utnm = 6;
var coord_canv = new GLatLng(37.4, -120.5);
var zoom_canv = 6;
var coord_waor = new GLatLng(45.3, -118.0);
var zoom_waor = 6;
var coord_idwy = new GLatLng(44.3, -111.2);
var zoom_idwy = 6;
/* XXX Fill in other views. */
var coord_default = new GLatLng(37.4738, -122.2485);	/* Ha! */
var zoom_default = 18;
 
/*
 * Use "GLog.write(msg);" to do printf debugging.
 */

function VolcName(marker,html,width) {
	this.html_ = html;
	this.width_ = (width ? width + 'px' : 'auto');
	this.marker_ = marker;
}

VolcName.prototype = new GOverlay();

VolcName.prototype.initialize = function(map) {
	var div = document.createElement("div");
	div.style.display = 'none';
	map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
	this.map_ = map;
	this.container_ = div;
}

VolcName.prototype.remove = function() {
	this.container_.parentNode.removeChild(this.container_);
}

VolcName.prototype.copy = function() {
	return new VolcName(this.html_);
}

VolcName.prototype.redraw = function(force) {
	if (!force) return;
	var pixelLocation =
	    this.map_.fromLatLngToDivPixel(this.marker_.getPoint());
	this.container_.innerHTML = this.html_;
	this.container_.style.position = 'absolute';
	this.container_.style.left = (pixelLocation.x + 21) + "px";
	this.container_.style.top = (pixelLocation.y - 10) + "px";
	this.container_.style.width = this.width_;
	this.container_.style.font = 'bold 10px/10px verdana, arial, sans';
	this.container_.style.border = '1px solid black';
	this.container_.style.background = '#ccccff';
	this.container_.style.padding = '4px';

	this.container_.style.whiteSpace = 'nowrap';
	if(this.width_!= 'auto') this.container_.style.overflow = 'hidden';
	this.container_.style.display= 'block';
}

GMarker.prototype.VolcNameInstance = null;

GMarker.prototype.openVolcName = function(content) {
	if (this.VolcNameInstance == null) {
		this.VolcNameInstance = new VolcName(this,content);
		map.addOverlay(this.VolcNameInstance);
	}
}

GMarker.prototype.closeVolcName = function() {
	if(this.VolcNameInstance != null) {
		map.removeOverlay(this.VolcNameInstance);
		this.VolcNameInstance = null;
	}
}

function vhp_reposition(region) {
	if (!markers_loaded) {
		map = new GMap2(document.getElementById("map"));

		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());

		map.setCenter(coord_pacific, zoom_pacific, G_HYBRID_TYPE);

		retrieveMarkers();

		markers_loaded = true;
		return;
	}

	if (region == "World") {
		map.setCenter(coord_pacific, zoom_pacific);
	} else if (region == "AK") {
		map.setCenter(coord_alaska, zoom_alaska);
	} else if (region == "HI") {
		map.setCenter(coord_hawaii, zoom_hawaii);
	} else if (region == "CNMI") {
		map.setCenter(coord_cnmi, zoom_cnmi);
	} else if (region == "UT-NM") {
		map.setCenter(coord_utnm, zoom_utnm);
	} else if (region == "CA-NV") {
		map.setCenter(coord_canv, zoom_canv);
	} else if (region == "WA-OR") {
		map.setCenter(coord_waor, zoom_waor);
	} else if (region == "ID-WY") {
		map.setCenter(coord_idwy, zoom_idwy);
	} else {
		map.setCenter(coord_default, zoom_default);
	}
}

function vhp_onload() {
	vhp_reposition("World");
}

window.onload = vhp_onload;

// Add our volcano marker icon
var greenicon = new GIcon();
greenicon.image = "/images/triangles/greennormal.png";
greenicon.iconSize = new GSize(37,28);
greenicon.iconAnchor = new GPoint(10,10);
greenicon.infoWindowAnchor = new GPoint(10,10);

var nocoloricon = new GIcon();
nocoloricon.image = "/images/triangles/unassignedunassigned.png";
nocoloricon.iconSize = new GSize(18,14);
nocoloricon.iconAnchor = new GPoint(5,5);
nocoloricon.infoWindowAnchor = new GPoint(10,10);

var yellowicon = new GIcon();
yellowicon.image = "/images/triangles/yellowadvisory.png";
yellowicon.iconSize = new GSize(46,36);
yellowicon.iconAnchor = new GPoint(10,10);
yellowicon.infoWindowAnchor = new GPoint(10,10);

var orangeicon = new GIcon();
orangeicon.image = "/images/triangles/orangewatch.png";
orangeicon.iconSize = new GSize(57,43);
orangeicon.iconAnchor = new GPoint(10,10);
orangeicon.infoWindowAnchor = new GPoint(10,10);

var redicon = new GIcon();
redicon.image = "/images/triangles/redwarning.png";
redicon.iconSize = new GSize(67,53);
redicon.iconAnchor = new GPoint(10,10);
redicon.infoWindowAnchor = new GPoint(10,10);

function createMarker(point, marker) {
	var lat = marker.getAttribute("lat"); 
	var lng = marker.getAttribute("lng"); 
	var name = marker.getAttribute("name"); 
	var alertlevel = marker.getAttribute("alertcd");
	var colorcode = marker.getAttribute("aviationcd");
	var locat = marker.getAttribute("location");
	var elevation = marker.getAttribute("elevation"); 
	var statusmsg = marker.getAttribute("status");	
	var description = marker.getAttribute("overview");	
	var img = marker.getAttribute("img");
	var obslink = marker.getAttribute("obslink");
	var gvplink = marker.getAttribute("gvplink");
	var statuslink = marker.getAttribute("moreinfo");
	var marker;

/* creating a status section for those volcanoes with 
* a status. AVO has no status for unassigned or green
* without recent updates whereas the rest of the observatories
* have no status just for the unassigned volcanoes.
*
* I am also creating a more link for those statuses that
* have been trimmed. The link will go to the status page.
*/

	var charlen = statusmsg.length;
	var lastchar = statusmsg.substring(charlen-3, charlen);

/* The status messages for volcanoes with elevated alert levels
*  have been trimmed and have a '...' at the end.
*/
	if (alertlevel == "UNASSIGNED" || (locat == "AK" && charlen <
	'2')) {
	var morestatus = "";
	} else {
	if (lastchar == '...') {
var morestatus = "<br /><br /> <b>Status: </b>" + statusmsg +
	    "<b> (<a href=\"" + statuslink + "\" target=\"new\">more</a>)</b> ";
	    } else {
var morestatus = "<br /><br /> <b>Status: </b>" + statusmsg;
}}

/* The Smithsonian GVP information does not include anything
*  new for Alaska volcanoes so we do not provide a GVP link
*  for them.
*/

if (locat == "AK") {
var moreinfo =
"..<b>For more information please see the <a target=\"new\" href=\"" + obslink +
	    "\"> " + 
	    name + " page</a></b></center>";
}else {
var moreinfo = 
"..<br /><br /><b>For more information please see the <br /><a target=\"new\" href=\"" + obslink +
	    "\"> USGS " + name + " page</a></b> or the <br /><b><a href='" +
	    gvplink + "'/>Smithsonian GVP</a> page</b><br />";
}

/* Set the icon based on the aviation color code. We will
*  need to fix this in the future for mixed alert level
*  and color codes.
*/
	if (colorcode == "GREEN") {
		marker = new GMarker(point, greenicon);
	} else if (colorcode == "ORANGE") {
		marker = new GMarker(point, orangeicon);
	} else if (colorcode == "YELLOW") {
		marker = new GMarker(point, yellowicon);
	} else if (colorcode == "RED") {
		marker = new GMarker(point, redicon);
	} else if (colorcode == "UNASSIGNED") {
		marker = new GMarker(point, nocoloricon);
	} else if (colorcode == ""){
	marker = new GMarker(point, nocoloricon);
	} else{
	marker = new GMarker(point, nocoloricon);
	}

/* Here we build the content in the pop-up window.
*  it uses a span class but not other CSS. We also
*  set the image size without making sure all the
*  images are that size.
*/

	GEvent.addListener(marker, "click", function() {

	   var content = "<center>" +
	    "<b>" + name + "</b>, " + locat + ": " + lat + ", " + lng + " (" + elevation + " m)<br />" +
	    "Volcano Alert Level: <b>" + alertlevel + "</b><br />" +
	    "Aviation Color Code: <span class=\"" + colorcode + "\"><b>" +
	    colorcode + "</b></span>" +
	    "<br /><br />" + 
	    "<img src=\"" + img + "\" width=\"200\" height=\"150\">" + 
	    morestatus +
	    "<br /><br /> <b>Overview: </b>" +
	    description + moreinfo;

/* Here we create the sidebar.
*/

var el = document.getElementById("sidebar");
	    if (el) {
		    while (el.hasChildNodes()) {
			    el.removeChild(el.lastChild);
		    }

		    newp = document.createElement("div");
		    newp.innerHTML = content;
		    el.appendChild(newp);

		    changeContentClass('sidebar-off', 'sidebar-right');
	    } else {
		    marker.openInfoWindowHtml(content ,{maxWidth:350});
	    }
	});

	GEvent.addListener(marker, "mouseover", function() {
	    marker.openVolcName(name);
	    });

	GEvent.addListener(marker, "mouseout", function() {
	    marker.closeVolcName();
	    });

	return marker;
}


/* Here we pull the markers in from an xml file created when the
*  duty scientist submits an update. The xml file is created
*  from information in both the team and avo databases.
*/

function retrieveMarkers() {

	markers_loaded = true;
	/* The path needs to be the same as where the file is kept. I
	* have been moving the vhp_status.xml file from production over
	* for testing.
	*/
	GDownloadUrl("/rss/vhp_status.xml",
	    function(data, responseCode) {
	    var xml = GXml.parse(data);

	    var markers = xml.documentElement.getElementsByTagName("marker");
		var len = markers.length;
	    for (var i = 0; i < len; i++) {
	    var marker = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
		    parseFloat(markers[i].getAttribute("lng")));

	    map.addOverlay(createMarker(marker, markers[i]));
	    }	

	    });

}


function changeContentClass(from, to) {
	element=document.getElementById("content");
	if (element) {
		element.className = element.className.replace(from,to);
	}
	return false;
}