var redicon = new GIcon();
redicon.image = "images/redbar.png";
redicon.shadow = "images/shadow-redbar.png";
redicon.iconSize=new GSize(16,43);
redicon.shadowSize=new GSize(38,43);
redicon.iconAnchor=new GPoint(8,43);
redicon.infoWindowAnchor=new GPoint(8,0); 

var orangeicon = new GIcon();
orangeicon.image = "images/orangebar.png";
orangeicon.shadow = "images/shadow-orangebar.png";
orangeicon.iconSize=new GSize(16,37);
orangeicon.shadowSize=new GSize(35,37);
orangeicon.iconAnchor=new GPoint(8,37);
orangeicon.infoWindowAnchor=new GPoint(8,0); 

var yellowicon = new GIcon();
yellowicon.image = "images/yellowbar.png";
yellowicon.shadow = "images/shadow-yellowbar.png";
yellowicon.iconSize=new GSize(16,31);
yellowicon.shadowSize=new GSize(32,31);
yellowicon.iconAnchor=new GPoint(8,31);
yellowicon.infoWindowAnchor=new GPoint(8,0); 

var greenicon = new GIcon();
greenicon.image = "images/greenbar.png";
greenicon.shadow = "images/shadow-greenbar.png";
greenicon.iconSize=new GSize(16,25);
greenicon.shadowSize=new GSize(29,25);
greenicon.iconAnchor=new GPoint(8,25);
greenicon.infoWindowAnchor=new GPoint(8,0); 


var blueicon = new GIcon();
blueicon.image = "images/bluebar.png";
blueicon.shadow = "images/shadow-bluebar.png";
blueicon.iconSize=new GSize(16,25);
blueicon.shadowSize=new GSize(29,25);
blueicon.iconAnchor=new GPoint(8,25);
blueicon.infoWindowAnchor=new GPoint(8,0); 


var lightblueicon = new GIcon();
lightblueicon.image = "images/lightbluebar.png";
lightblueicon.shadow = "images/shadow-lightbluebar.png";
lightblueicon.iconSize=new GSize(16,31);
lightblueicon.shadowSize=new GSize(31,31);
lightblueicon.iconAnchor=new GPoint(8,31);
lightblueicon.infoWindowAnchor=new GPoint(8,0); 


var lightpurpleicon = new GIcon();
lightpurpleicon.image = "images/lightpurplebar.png";
lightpurpleicon.shadow = "images/shadow-lightpurplebar.png";
lightpurpleicon.iconSize=new GSize(16,37);
lightpurpleicon.shadowSize=new GSize(35,37);
lightpurpleicon.iconAnchor=new GPoint(8,37);
lightpurpleicon.infoWindowAnchor=new GPoint(8,0); 

var purpleicon = new GIcon();
purpleicon.image = "images/purplebar.png";
purpleicon.shadow = "images/shadow-purplebar.png";
purpleicon.iconSize=new GSize(16,43);
purpleicon.shadowSize=new GSize(38,43);
purpleicon.iconAnchor=new GPoint(8,43);
purpleicon.infoWindowAnchor=new GPoint(8,0); 


var blackicon = new GIcon();
blackicon.image = "images/blackbar.png";
blackicon.shadow = "images/shadow-blackbar.png";
blackicon.iconSize=new GSize(16,49);
blackicon.shadowSize=new GSize(41,49);
blackicon.iconAnchor=new GPoint(8,49);
blackicon.infoWindowAnchor=new GPoint(8,0); 


var brownicon = new GIcon();
brownicon.image = "images/brownbar.png";
brownicon.shadow = "images/shadow-brownbar.png";
brownicon.iconSize=new GSize(16,56);
brownicon.shadowSize=new GSize(45,56);
brownicon.iconAnchor=new GPoint(8,56);
brownicon.infoWindowAnchor=new GPoint(8,0); 


/*
var redicon = new GIcon();
redicon.image = "images/red.png";
redicon.shadow = "images/icon6s.png";
redicon.iconSize=new GSize(32,32);
redicon.shadowSize=new GSize(59,32);
redicon.iconAnchor=new GPoint(16,32);
redicon.infoWindowAnchor=new GPoint(16,0); 

var orangeicon = new GIcon();
orangeicon.image = "images/orange.png";
orangeicon.shadow = "images/icon6s.png";
orangeicon.iconSize=new GSize(32,32);
orangeicon.shadowSize=new GSize(59,32);
orangeicon.iconAnchor=new GPoint(16,32);
orangeicon.infoWindowAnchor=new GPoint(16,0); 

var yellowicon = new GIcon();
yellowicon.image = "images/yellow.png";
yellowicon.shadow = "images/icon6s.png";
yellowicon.iconSize=new GSize(32,32);
yellowicon.shadowSize=new GSize(59,32);
yellowicon.iconAnchor=new GPoint(16,32);
yellowicon.infoWindowAnchor=new GPoint(16,0); 

var greenicon = new GIcon();
greenicon.image = "images/green.png";
greenicon.shadow = "images/icon6s.png";
greenicon.iconSize=new GSize(32,32);
greenicon.shadowSize=new GSize(59,32);
greenicon.iconAnchor=new GPoint(16,32);
greenicon.infoWindowAnchor=new GPoint(16,0); 

var blueicon = new GIcon();
blueicon.image = "images/blue.png";
blueicon.shadow = "images/icon6s.png";
blueicon.iconSize=new GSize(32,32);
blueicon.shadowSize=new GSize(59,32);
blueicon.iconAnchor=new GPoint(16,32);
blueicon.infoWindowAnchor=new GPoint(16,0); 

var lightblueicon = new GIcon();
lightblueicon.image = "images/lightblue.png";
lightblueicon.shadow = "images/icon6s.png";
lightblueicon.iconSize=new GSize(32,32);
lightblueicon.shadowSize=new GSize(59,32);
lightblueicon.iconAnchor=new GPoint(16,32);
lightblueicon.infoWindowAnchor=new GPoint(16,0); 

var lightpurpleicon = new GIcon();
lightpurpleicon.image = "images/lightpurple.png";
lightpurpleicon.shadow = "images/icon6s.png";
lightpurpleicon.iconSize=new GSize(32,32);
lightpurpleicon.shadowSize=new GSize(59,32);
lightpurpleicon.iconAnchor=new GPoint(16,32);
lightpurpleicon.infoWindowAnchor=new GPoint(16,0); 

var purpleicon = new GIcon();
purpleicon.image = "images/purple.png";
purpleicon.shadow = "images/icon6s.png";
purpleicon.iconSize=new GSize(32,32);
purpleicon.shadowSize=new GSize(59,32);
purpleicon.iconAnchor=new GPoint(16,32);
purpleicon.infoWindowAnchor=new GPoint(16,0); 

var blackicon = new GIcon();
blackicon.image = "images/black.png";
blackicon.shadow = "images/icon6s.png";
blackicon.iconSize=new GSize(32,32);
blackicon.shadowSize=new GSize(59,32);
blackicon.iconAnchor=new GPoint(16,32);
blackicon.infoWindowAnchor=new GPoint(16,0); 

var brownicon = new GIcon();
brownicon.image = "images/brown.png";
brownicon.shadow = "images/icon6s.png";
brownicon.iconSize=new GSize(32,32);
brownicon.shadowSize=new GSize(59,32);
brownicon.iconAnchor=new GPoint(16,32);
brownicon.infoWindowAnchor=new GPoint(16,0); 
*/

var map;

function mapit() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	//map.addControl(new GOverviewMapControl());
	var mini=new GOverviewMapControl(new GSize(200, 100));

	map.addControl(mini);
	mini.hide();
	//map.addMapType(G_SATELLITE_3D_MAP);
	map.setMapType(G_HYBRID_MAP);
	map.setCenter(new GLatLng(42, -112), 3);

    var mm = new MarkerManager(map);
	markers = new Array();
	 
    //Clear stations and stnids arrays
    var stations = new Array();
    var stnids = new Array();
    	
	var request = GXmlHttp.create();
    var url = "sltrendsmap.xml";
    //var iframe = window.frames['linkpanel'];
    //iframe.location.href = url;

    request.open("GET", url, true);
    request.onreadystatechange = function() {
	if (request.readyState == 4) {
		var xmlDoc = request.responseXML;
		var locations = xmlDoc.documentElement.getElementsByTagName("location");

		popups = new Array(locations.length);
		for (var i = 0; i < locations.length; i++) {
			var global = false;
			//Create the GLatLng object for this marker
		    var pointsarray = locations[i].getElementsByTagName("point");
		    var lng = parseFloat(pointsarray[0].getAttribute("lng"));
		    var lat = parseFloat(pointsarray[0].getAttribute("lat"));
		    var point = new GLatLng(lat,lng);
      
		    //Grab the tag names from the XML
		    var commonname = locations[i].getElementsByTagName("commonname")[0].firstChild.nodeValue;
		    var stnid = locations[i].getElementsByTagName("stationid")[0].firstChild.nodeValue;
			if (stnid.substring(3, 4) == "-") { global = true; }
			var state = "";
			if (locations[i].getElementsByTagName("state")[0].firstChild) {
				state = locations[i].getElementsByTagName("state")[0].firstChild.nodeValue;
			}
		    var startyear = locations[i].getElementsByTagName("startyear")[0].firstChild.nodeValue;
		    var endyear = locations[i].getElementsByTagName("endyear")[0].firstChild.nodeValue;
		    var slt = locations[i].getElementsByTagName("slt")[0].firstChild.nodeValue;
		    var sterr = locations[i].getElementsByTagName("sterr")[0].firstChild.nodeValue;
		    var trend = locations[i].getElementsByTagName("trend")[0].firstChild.nodeValue;
		    var seasonals = locations[i].getElementsByTagName("seasonals")[0].firstChild.nodeValue;
		    var resids = locations[i].getElementsByTagName("resids")[0].firstChild.nodeValue;
		    var resids80 = locations[i].getElementsByTagName("resids80")[0].firstChild.nodeValue;
		    var decadal = locations[i].getElementsByTagName("decadal")[0].firstChild.nodeValue;
			var errorvalue = sterr;												
			
			var feet = slt / 304.8 * 100;
			feet = feet.toFixed(2);
			
			//Arrays for autocomplete.
			stations.push(commonname);
		    stnids.push(stnid);
	
			//var html = buildhtml(locations[i]);
			
			//var html = 'Name:' + commonname + " " + stnid + ", " + state;
			
			var html = "<div id='infowindowframe'>";
	
	   if (state != "") {
	      html += "<div id='infowindowtitle' class='dfont'>" + commonname + ", " + state + "<br>" + stnid + "</div>";
	   } else {
	   	  html += "<div id='infowindowtitle' class='dfont'>" + commonname + "<br>" + stnid + "</div>";
	   }
	   
	
	html += "<div id='infowindowleftpane' style='text-align: justify;'>";
	
	html += "<span style='font-size: 10px;'>";
	html += "The mean sea level trend is " + slt + " mm/year with a 95% confidence interval of +/- " + errorvalue + " mm/year based on monthly mean sea level data from " + startyear + " to " + endyear + " which is equivalent to a change of " + feet + " feet in 100 years.</span>";
	html += "</div>";
	
	html += "<div id='infowindowrightpane'>";
			
			html += "<div align='center' style='width: 109px;'>";
			if (slt >= 0) {
			html += "<img src='images/sltbackgroundup.png' style='border: 1px solid black;'>";
			} else {
			html += "<img src='images/sltbackgrounddown.png' style='border: 1px solid black;'>";
			}
			html += "<div align='center' class='trendtext'>";
			html += slt + "<br>";
			html += "<span style='font-size: 16px;'>mm/year</span>";
			html += "<br><span style='font-size: 8px;'>" + startyear + " - " + endyear + "</span>";
			html += "</div>";
			html += "</div>";
			
			html += "</div>";
			html += "<div style='float: left; margin: 5px; width: 200px; text-align: left; font-size: 0.8em;'>";
			
			html += "<span style='font-weight: bold;'>Choose plot:</span><br>";
	if (trend == 1 && !global) {
	html += "<a href='/sltrends/sltrends_station.shtml?stnid=" + stnid + "'>Linear Trend</a><br>";
	} else if (trend == 1) {
	html += "<a href='/sltrends/sltrends_global_station.shtml?stnid=" + stnid + "'>Linear Trend</a><br>";
	}
	if (seasonals == 1) {
	html += "<a href='/sltrends/seasonal.shtml?stnid=" + stnid + "&name=" + commonname + "&state=" + state + "'>Average Seasonal Cycle</a><br>";
	}
	if (resids == 1) {
	html += "<a href='/sltrends/residual.shtml?stnid=" + stnid + "&name=" + commonname + "&state=" + state + "'>Interannual Variation</a><br>";
	}
	if (resids80 == 1) {
	html += "<a href='/sltrends/residual1980.shtml?stnid=" + stnid + "&name=" + commonname + "&state=" + state + "'>Interannual Variation since 1980</a><br>";
	}
	if (decadal == 1) {
		if (!global) {
			html += "<a href='/sltrends/50yr.shtml?stnid=" + stnid + "&name=" + commonname + "&state=" + state + "'>Variation of 50-year trends</a><br>";
		} else {
			html += "<a href='/sltrends/global_50yr.shtml?stnid=" + stnid + "&name=" + commonname + "&state=" + state + "'>Variation of 50-year trends</a><br>";
		}
	}			
	html += "</div>";
		    popups[i] = html;
            			
			//Add the marker to the markers array
			var title = commonname + " " + slt + " mm/year";
		    if (slt >= 9 && slt < 12) { // red
			   markers[i] = new GMarker(point, { icon: redicon, title: title});
			} else if (slt >=  6 && slt < 9) { // orange
				markers[i] = new GMarker(point, { icon: orangeicon, title: title});
			} else if (slt >= 3 && slt < 6) { //yellow
				markers[i] = new GMarker(point, { icon: yellowicon, title: title});			
			} else if (slt >= 0 && slt < 3) { //green
				markers[i] = new GMarker(point, { icon: greenicon, title: title});			
			} else if (slt >= -3 && slt < 0) { // blue
				markers[i] = new GMarker(point, { icon: blueicon, title: title});						
			} else if (slt >= -6 && slt < -3) { //light blue
				markers[i] = new GMarker(point, { icon: lightblueicon, title: title});			
			} else if (slt >= -9 && slt < -6) { //light purple
				markers[i] = new GMarker(point, { icon: lightpurpleicon, title: title});			
			} else if (slt >= -12 && slt < -9) { //purple
				markers[i] = new GMarker(point, { icon: purpleicon, title: title});			
			} else if (slt >= -15 && slt < -12) { //black
				markers[i] = new GMarker(point, { icon: blackicon, title: title});			
			} else if (slt >= -18 && slt < -15) { //brown
				markers[i] = new GMarker(point, { icon: brownicon, title: title});			
			}
			//Add the event listener to popup the info window on click for this marker
		    
			GEvent.addListener(markers[i], "click", makePopupCaller(i, stnid));
		
		    }

		//Add stations to marker manager
		mm.addMarkers(markers, 1, 17);

		mm.refresh();


		
	    } // End of readystate 4 function
	} // End of ready state change function
	request.send(null);
 
    //statebox(region);

	

    //new AutoSuggest(document.getElementById('station'),stations);

    stationarray = stations;
    stnidarray = stnids;
	
}

function makePopupCaller( i, stnid ) {
	currentmarker = stnid;
    return function() { popup( i, stnid ); };
}

function popup( i, stnid ) {
	
    var html = popups[i];
	                
	//var tab1 = new GInfoWindowTab("Data", html);
		//cachedhtml = html;
		//cachedstnid = stnid;
		//var lat = markers[i].getLatLng().lat();
		//var lng = markers[i].getLatLng().lng();
		//var tab2 = new GInfoWindowTab("Info", "Latitude: " + lat + "<br>Longitude: " + lng);
		//var tabs = new Array();
		//tabs.push(tab1);
		//tabs.push(tab2);
		//markers[i].openInfoWindowTabsHtml(tabs);	
	markers[i].openInfoWindowHtml(html);
}

function pan(target) {
   switch(target) {
   	case 'eastcoast': map.setCenter(new GLatLng(36, -76.7), 5);
   	break;
   	case 'westcoast': map.setCenter(new GLatLng(42, -124.7), 5);
   	break;
   	case 'gulfcoast': map.setCenter(new GLatLng(27, -88.75), 6);
   	break;
	case 'alaska': map.setCenter(new GLatLng(61.5, -149), 4);
	break;
	case 'pacific': map.setCenter(new GLatLng(21, -157), 8);
	break;
	case 'global': map.setCenter(new GLatLng(0, 0), 1);
	break;
   }
}