var map
// Define Marker group holders
var markerGroups = { "precip": [], "snow": [] };
var templat;
var templon;
var tempzoom;
var zoomlat;
var markerwindow = [];       			
var overviewMap;
function load() {

if (!GBrowserIsCompatible()) {
}else{
	map = new GMap2(document.getElementById("map_canvas"));
	// Put the loading message underneath the tiles
	//document.getElementById("map").style.backgroundImage = "url(loading.jpg)";
	// Additional Google map controls
	map.addControl(new GLargeMapControl());
	map.setMapType(G_PHYSICAL_MAP);
	map.setCenter(new GLatLng(39.5241,-111.9991), 7);
	// ------Add Map Overview 
	//overviewMap=new GOverviewMapControl();
	//map.addControl(overviewMap);
	//overviewMap.setMapType(G_PHYSICAL_MAP);
	// ----- End Map Overview
	// Add mouse scroll button option
	map.enableScrollWheelZoom();
	//limit zoom levels
	G_PHYSICAL_MAP.getMinimumResolution=function (){ return 6 };
	G_PHYSICAL_MAP.getMaximumResolution=function (){ return 12 };

	// Define Check Box groups
	//document.getElementById("precipCheckbox").checked = false;
	//document.getElementById("snowCheckbox").checked = true;
	
	//if a mapJSON.js file does not exist, then no data exists.
	if (typeof(records)=="undefined"){
		tbody = document.getElementById("matchSummary");
		tr = tbody.insertRow(tbody.rows.length);
		td = tr.insertCell(tr.cells.length);
		td.colSpan='4';
		td.style.textAlign='left';
		var testzone = "<font size='2' color=black>No Current Data is Available.</font>";
		td.innerHTML = testzone;
	}else{
	//pageinfo is declared in mapJSON.js
	validTime=pageinfo.validtime;
	tbody = document.getElementById("headerData");
	tr = tbody.insertRow(tbody.rows.length);
	td = tr.insertCell(tr.cells.length);
	td.colSpan='8';
	td.style.textAlign='center';
	var testzone = "<font size='2' color=#dddddd><b> Created at " + validTime + "</b></font>";
	td.innerHTML = testzone;

	synopsis=pageinfo.synopsis;
	if (synopsis) {
		tbody = document.getElementById("matchSummary");
		tr = tbody.insertRow(tbody.rows.length);
		td = tr.insertCell(tr.cells.length);
		td.colSpan='4';
		td.style.textAlign='left';
		var testzone = "<font size='2' color=black>Summary..." + synopsis + "</font>";
		td.innerHTML = testzone;
	}
        gust_obs=pageinfo.wind_obs;
        if (gust_obs > 0) {
                tbody = document.getElementById("otherMaps");
                tr = tbody.insertRow(tbody.rows.length);
                td = tr.insertCell(tr.cells.length);
                td.style.textAlign='left';
                var gustlink = '<span style="font-size:small"><a href=http://www.wrh.noaa.gov/slc/precip/gust_map.php>Peak Wind Gusts </a><img src=../../images/update1.gif></img><br><a href=http://www.wrh.noaa.gov/slc/precip/rtp_map.php>Max/Min Temperatures</span></a>';
                td.innerHTML = gustlink;

        }
        else {
                tbody = document.getElementById("otherMaps");
                tr = tbody.insertRow(tbody.rows.length);
                td = tr.insertCell(tr.cells.length);
                td.style.textAlign='left';
                var gustlink = '<span style="font-size:small"><a href=http://www.wrh.noaa.gov/slc/precip/rtp_map.php>Max/Min Temperatures</a></span>';
                td.innerHTML = gustlink;

        }
	var index = 0;
        var snowcheck = 0;
	//records comes from mapJSON.js - it's the data structure for all of the snow and precip data.
	for (i in records){
		stnNAME=records[i].stnname;
		stnzone=records[i].stnzone;
		stntime=records[i].stntime;
		stndate=records[i].stndate;
		stnrain=records[i].stnrain;
		stnsnow=records[i].stnsnow;
		stngust=records[i].stngust;
		stnELEV=records[i].stnELEV;
		stnlat=records[i].stnlat;
		stnlon=records[i].stnlon;
		point=new GLatLng(parseFloat(records[i].stnlat),
		parseFloat(records[i].stnlon));
					
// #################################################
// Create Table Header DisplayHeader
// #################################################			  
		headerdisplay='<div class="popup" id="popup"><table width="200" class="styleLabelheaderdisplay">'
			+ '<tr><td width=25px class=styleBubbleTitle>Station:</td><td width=175px class=styleBubbleName>' 
			+ stnNAME + '</td></tr><tr><td width=25px class=styleBubbleTitle>Elevation:</td><td width=175px class=styleBubbleName>' 
			+ stnELEV + ' ft</td></tr><tr><td width=25px class=styleBubbleTitle>Date/Time:</td><td width=175px class=styleBubbleName>'
			+ stntime + ' ' + stndate 
			+ '</td></tr><tr><td width=25px class=styleBubbleTitle>Precip:</td><td width=175px class=styleBubbleRain>' 
			+ stnrain 
			+ '</td></tr><tr><td width=25px class=styleBubbleTitle>Snow:</td><td width=175px class=styleBubbleSnow>' 
			+ stnsnow + '</td></tr></table></div>';
			  
// ######################################################
// DEFINE TEMP COLORS BASED ON TEMPERATURE
// ######################################################
		if (stnrain){
			label=createMarker(point,stnrain,headerdisplay,stnrain,'hello','precip');
			 map.addOverlay(label);
			 markerGroups["precip"].push(label);
		 }

// ######################################################
// DEFINE SNOW COLORS BASED ON AMOUNT 
// ######################################################
		if (stnsnow){
			label=createMarker(point,stnsnow,headerdisplay,stnsnow,'snow','snow');
			map.addOverlay(label);
			markerGroups["snow"].push(label);
                        snowcheck++;
		}
		markerwindow[index] = headerdisplay;
		//hideGroup("precip");
		tbody = document.getElementById("matchData");
		if (stnELEV != 'N/A') {
			var pnsNAME = '<font size="1"><a href=javascript:panToPoint(' + stnlat + ',' + stnlon + ',' + index + ') class=styleSiteName>' 
			+ stnNAME + ' - ' + stnELEV + ' FT</a></font>';
		} else {
			var pnsNAME = '<font size="1"><a href=javascript:panToPoint(' + stnlat + ',' + stnlon + ',' + index + ') class=styleSiteName>' 
			+ stnNAME + '</font>';
		} 
		var pnstime = '<font size="1"><a href=javascript:panToPoint(' + stnlat + ',' +  stnlon + ',' + index + ') class=styleSiteName>' 
		+ stntime + "</a></font>";
		var pnssnow = '<font size="1"><a href=javascript:panToPoint(' + stnlat + ',' +  stnlon + ',' + index + ') class=styleSnowText>' 
		+ stnsnow + "</a></font>";
		var pnsrain = '<font size="1"><a href=javascript:panToPoint(' + stnlat + ',' +  stnlon + ',' + index + ') class=styleRainText>' 
		+ stnrain + "</a></font>";

		if (zones[stnzone] != 1) {
			tr = tbody.insertRow(tbody.rows.length);
			td = tr.insertCell(tr.cells.length);
			td.colSpan='4';
			td.style.textAlign='center';
			var testzone = "<font size='1' color=red>" + zoneNames[stnzone] + "</font>";
			td.innerHTML = testzone;
			zones[stnzone] = 1;
		}
		tr = tbody.insertRow(tbody.rows.length);
		td = tr.insertCell(tr.cells.length);
		td.setAttribute("align", "left");
		td.setAttribute("width", "200");
		td.innerHTML = pnsNAME;
		td = tr.insertCell(tr.cells.length);
		td.setAttribute("align", "center");
		td.setAttribute("width", "20");
		td.innerHTML = pnstime;
		td = tr.insertCell(tr.cells.length);
		td.setAttribute("align", "center");
		td.setAttribute("width", "20");
		td.innerHTML = pnssnow;
		td = tr.insertCell(tr.cells.length);
		td.setAttribute("align", "center");
		td.setAttribute("width", "20");
		td.innerHTML = pnsrain;
		index++;

		}				
	}
	}
        //Determine whether to display precip or snow values on the map
        if (snowcheck > 0) {
           hideGroup("precip");
           document.getElementById("precipCheckbox").checked = false;
           document.getElementById("snowCheckbox").checked = true;
        }
        else {
          hideGroup("snow");
          document.getElementById("precipCheckbox").checked = true;
          document.getElementById("snowCheckbox").checked = false;
        }
	var zoomForm=document.getElementById("zoomDiv");
	var newForm=document.createElement('FORM');
	newForm.id='zoomForm';
	dropDown=document.createElement('SELECT');
	dropDown.setAttribute('Name','zoomDrop');
	dropDown.id='zoomDrop';
	dropDown.onchange=zoomToRegion;
	for (zoom in zoomAreas){
//GLog.writeUrl(zoom);
		option=document.createElement('option');
		option.value='------'+zoom+'------';
		option.appendChild(document.createTextNode('----------'+zoom+'----------'));
		dropDown.appendChild(option);
		for (j in zoomAreas[zoom]){
			option=document.createElement('option');
			option.value=j;
			option.appendChild(document.createTextNode(j));
			dropDown.appendChild(option);
		}
	}
	newForm.appendChild(dropDown);
	zoomForm.appendChild(newForm);
}

function zoomToRegion() {
	formName=document.getElementById('zoomForm');
	z=formName.zoomDrop.options[formName.zoomDrop.options.selectedIndex].value;
	for (zoom in zoomAreas){
		for (j in zoomAreas[zoom]){
			if (z==j){
				templat=zoomAreas[zoom][j].zoomLat;
				templon=zoomAreas[zoom][j].zoomLon;
				tempzoom=zoomAreas[zoom][j].zoomLevel;
				map.setCenter(new GLatLng(templat, templon), tempzoom);
			}
		}
	}
}
// ##########################################
// Create marker for popups on mouse overs - google maps
// ##########################################
function showInfo(point, i) {
	map.openInfoWindowHtml(point,markerwindow[i]);
}

function panToPoint(lat, lon, i) {
	var point = new GLatLng(lat, lon);
	map.panTo(point);
	showInfo(point, i);
}

// ###################################################	
// Function to create group toggle. THis will show and 
// hide marker categories/types	
// ###################################################

function toggleGroup(type) {
	var i;
	var marker;
	for (i = 0; i < markerGroups[type].length; i++) {
		marker = markerGroups[type][i];
		if (marker.isHidden()) {
			marker.show();
		} else {
			marker.hide();
		}
	}
}

// Function to call marker.show to show all elements in group on map.
function showGroup(type) {
	var i;
	var marker;
	for (i = 0; i < markerGroups[type].length; i++) {
		marker = markerGroups[type][i];
		marker.show();
	}
}

// Function to call marker.hide to hide all elements in group on map.
function hideGroup(type) {
	var marker;
	var i;
	for (i = 0; i < markerGroups[type].length; i++) {
		marker = markerGroups[type][i];
		marker.hide();
	}
}