/* This version parses an xml file, displays custom
	triangular icons and an info window with image. 
	It does not highlight or use Jeremy's functions
	with 'this'.
	
	26 November 2007 dyv
	
*/
var centerLatitude = 42.509;
var centerLongitude = -150.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;


//global, icons for volcano statuses
var icons = {
	'fields': 	{'width': 1, 'height': 1},
	'observatory': 	{'width': 21, 'height': 16},
	'unassigned_unassigned': 	{'width': 18, 'height': 14},
	'green_normal': 			{'width': 21, 'height': 16},
	'yellow_advisory': 			{'width': 27, 'height': 20},
	'yellow_watch': 			{'width': 27, 'height': 20},
	'orange_watch':				{'width': 33, 'height': 24},
	'orange_warning': 			{'width': 33, 'height': 24},
	'red_warning': 				{'width': 40, 'height': 31},
	'red_watch': 				{'width': 40, 'height': 31}
};

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_PHYSICAL_MAP);

		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 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, status) {
//			GLog.write("downloading xml file"); 
	    var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
//			GLog.write("creating markers variable"); 
			var len = markers.length;
//			GLog.write("markers length is " + len); 
	    for (var i = 0; i < len; i++) {
				var m = markers[i];
				var point = new GLatLng(parseFloat(m.getAttribute("latitude")),
	parseFloat(m.getAttribute("longitude")));
//			GLog.write("creating points" + point);

		//add marker to map
		//this.map.addOverlay(marker);
				map.addOverlay(createMarker(point, markers[i]));
			}
		});
}



function getIconURL(name) {
	return '/images/icons/map/'+name+'.png';
}

function getHighlightIconURL(name) {
	return '/images/icons/map/'+name+'_highlight.png';
}

//memoized icons
function getIcon(name) {
	if (!icons[name]) {
		return null;
	}
	
	if (!icons[name].icon) {
		var icon = new GIcon();
		icon.image = getIconURL(name);
		icon.iconSize = new GSize(icons[name].width, icons[name].height);
		var anchor = new GPoint(10, 12);
		icon.iconAnchor = anchor;
		icon.infoWindowAnchor = anchor;
		//save it for later
		icons[name].icon = icon;
	}
	
	return icons[name].icon;
}


function createMarker(point, marker){
	var lat = marker.getAttribute("latitude"); 
	var lng = marker.getAttribute("longitude");
	var volcanoName = marker.getAttribute("volcano_name"); 
	var alertLevel = marker.getAttribute("alert_level"); 
	var colorCode = marker.getAttribute("color_code"); 
	var region = marker.getAttribute("region"); 
	var volcanoNameID = volcanoName.replace(" ", "_");
	var elevation = marker.getAttribute("elevation");
	var view = marker.getAttribute("view");  
	var image = marker.getAttribute("image"); 
	var status = marker.getAttribute("status"); 
	var obsLink = marker.getAttribute("obslink"); 	
	var vhpLink = marker.getAttribute("vhplink");
	var moreInfo = marker.getAttribute("more_info"); 	
	var alertDate = marker.getAttribute("alertdate"); 	
	var alertTime = marker.getAttribute("alerttime"); 	
	var timeZone = marker.getAttribute("timezone"); 
	var nvewsthreat = marker.getAttribute("nvewsthreat");	

	colorCodes = colorCode.toLowerCase();
	alertLevels = alertLevel.toLowerCase();
	if (nvewsthreat == "Very Low Threat") {
		var iconName = "fields";
		
	} else {
	var iconName = colorCodes + '_' + alertLevels;
	}
	//	GLog.write("volcano name: " + volcanoName + " iconName: " + iconName + "!");

		//create marker
		marker = new GMarker(
new GLatLng(lat, lng), {icon: getIcon(iconName), clickable:true, title: volcanoName}); 


		marker.normalIcon = getIconURL(iconName);
	//	marker.highlightIcon = getHighlightIconURL(iconName);
		/*	marker.overlay = new VolcNameOverlay(marker, volcanoName);
		
		//add overlay event listeners
    	GEvent.addListener(marker, "mouseover", this.showOverlayFunc(marker));
		GEvent.addListener(marker, "mouseout", this.hideOverlayFunc(marker));

		var marker_el = document.getElementById("vol_name_id");
		GLog.write("marker_el" + marker_el);

		if (marker_el) {
			marker_el.onmouseover = this.showOverlayFunc(marker);
			marker_el.onmouseout = this.hideOverlayFunc(marker);
		}

		//add marker to map
		//this.map.addOverlay(marker);

	function VolcMarker() {
	
	}
	
	VolcMarker.prototype = new GMarker();
	
	
	
	
	function VolcNameOverlay(marker, html, width) {
		this.marker_ = marker;
		this.html_ = html;
		this.width_ = width ? width + 'px' : 'auto';
		
		this.map_ = null;
		this.div_ = null;
		
		
		this.initialize = function (map) {
			this.map_ = map;
			
			this.div_ = document.createElement('div');
			this.div_.className = 'volcano-name';
			this.div_.innerHTML = this.html_;
			this.div_.style.width = this._width;
			this.div_.style.display = 'none';
			
			this.map_.getPane(G_MAP_FLOAT_PANE).appendChild(this.div_);
		}
	
		this.remove = function () {
			this.div_.parentNode.removeChild(this.div_);
		}
		
		this.copy = function () {
			return new VolcNameOverlay(this.marker_, this.html_, this.width_);
		}
		
		this.redraw = function(force) {
			if (!force) return;
		
			this.div_.style.display = 'block';
			this.div_.style.left = -9999+'px';
			
			
			//current screen position for marker	
			marker = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());
			overlayWidth = this.div_.offsetWidth;
			
			map = document.getElementById('alert-map');
			mapRight = map.offsetLeft + map.offsetWidth;
			overlayRight = marker.x + overlayWidth + 20;
			this.div_.style.top = (marker.y - 15) + 'px';		
			if (overlayRight > mapRight) {
				this.div_.style.left = (marker.x - overlayWidth - 25) + 'px';
			} else {
				this.div_.style.left = (marker.x + 10) + 'px';
			}
		}
	
	}
	
	VolcNameOverlay.prototype = new GOverlay();
	
		GEvent.addListener(marker, "click", function(){
		marker.openInfoWindowHtml(
		"<table>" + 
			"<tr align='center'>" + 
				"<td colspan='2'><b>" 
				+ volcanoName + "</b><br />" +
				"</td>" +
			"</tr>" +
			"<tr>" +
				"<th rowspan='3'>" + "<img src=\"" + 
				image + "\" width=\"200\" height=\"150\" />" +
				"</th>" +
				"<td>" + "Volcano Alert Level: <b>" + alertLevel + 
	    		"</b><br />Aviation Color Code: <span class=\"" + 
	    		colorCodes + "\"><b>" + colorCode + 
	    		"</b></span><br />" +
	    		"</td>" +
	    	"</tr>" +
	    	"<tr>" +
	    		"<td>" + status + 
	    		"</td>" +
	    	"</tr>" +
	    	"<tr>" +
	    		"<td><b><a target=\"new\" href=\"" + obsLink +
	    		"\"> more</a></b>" +
	    		"</td>" +
	    	"</tr>" +
	    "</table>");
	});

	*/

//the unassigned ones have windows that are too big. Works fine in startmapworking.js.
	//GLog.write("volcano name: " + volcanoName + " color code: " + colorCode + "!");
	if ((region == 'Alaska') && (alertLevel == "NORMAL") && (vhpLink = "")){
//GLog.write("volcano name: " + volcanoName + " region: " + region + "!");
	
		GEvent.addListener(marker, "click", function(){
		marker.openInfoWindowHtml("<div class=\"infoWindow\"><center><b>" + 
		volcanoName + "</b><br />" +
		lat + ", " + lng + " (" + elevation + " m) </center><br />" +
		"<img class=\"mapimage\" src=\"" + image + "\" width=\"200\" height=\"150\" />" + 
	    "Volcano Alert Level: <b>" + alertLevel + "</b><br />" +
	    "Aviation Color Code: <span class= \"" + colorCode + "\" ><b>" + colorCode + "</b></span>" +
	    "<br /><br />" + 
	    status + " Please see the <b><a target=\"new\" href=\"" + 
	    vhpLink +  "\"> " + volcanoName + " page</a></b> for more information.</div>");
	});
	} else if ((colorCode == "UNASSIGNED") || (status == "")) {
		GEvent.addListener(marker, "click", function(){
		marker.openInfoWindowHtml("<center><b>" + volcanoName + "</b><br />" +
		lat + ", " + lng + " (" + elevation + " m) </center><br /><br />" +
	    "<img src=\"" + image + "\" width=\"200\" height=\"150\" /><br /></center>");
	});	
	} else if (!vhpLink) {
		GEvent.addListener(marker, "click", function(){
		marker.openInfoWindowHtml("<div class=\"infoWindow\"><center><b>" + 
		volcanoName + "</b><br />" +
		lat + ", " + lng + " (" + elevation + " m) </center><br />" +
		"<img class=\"mapimage\" src=\"" + image + "\" width=\"200\" height=\"150\" />" + 
	    "Volcano Alert Level: <b>" + alertLevel + "</b><br />" +
	    "Aviation Color Code: <span class= \"" + colorCode + "\" ><b>" + colorCode + "</b></span>" +
	    "<br /><br />" + status + "</div>");
	});

	
	} else if (alertLevel == 'NORMAL') {
	//GLog.write("volcano name: " + volcanoName + " alertLevel: " + alertLevel + "!");

		GEvent.addListener(marker, "click", function(){
		marker.openInfoWindowHtml("<div class=\"infoWindow\"><center><b>" + 
		volcanoName + "</b><br />" +
		lat + ", " + lng + " (" + elevation + " m) </center><br />" +
		"<img class=\"mapimage\" src=\"" + image + "\" width=\"200\" height=\"150\" />" + 
	    "Volcano Alert Level: <b>" + alertLevel + "</b><br />" +
	    "Aviation Color Code: <span class= \"" + colorCode + "\" ><b>" + colorCode + "</b></span>" +
	    "<br /><br />"  +   status + " Please see the <b><a target=\"new\" href=\"" + 
	    vhpLink +
	    "\">" + volcanoName + " page</a></b> for more information.</div>");
	});
} else {
	
		GEvent.addListener(marker, "click", function(){
		marker.openInfoWindowHtml("<div class=\"infoWindow\"><center><b>" + 
		volcanoName + "</b><br />" +
		lat + ", " + lng + " (" + elevation + " m) </center><br />" +
		"<img class=\"mapimage\" src=\"" + image + "\" width=\"200\" height=\"150\" />" + 
	    "Volcano Alert Level: <b>" + alertLevel + "</b><br />" +
	    "Aviation Color Code: <span class= \"" + colorCode + "\" ><b>" + colorCode + "</b></span>" +
	    "<br /><br />As of " + alertDate + " " + alertTime + " " + timeZone + ": " + 
	    status + " Please see the <b><a target=\"new\" href=\"" + 
	    vhpLink +
	    "\">" + volcanoName + " page</a></b> for more information.</div>");
	});

	}
	
	return marker;
}




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

window.onload = vhp_onload;