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

// Define Google map and add conrols 

if (!GBrowserIsCompatible()) {
}else{
	map = new GMap2(document.getElementById("map_canvas"));
	map.addControl(new GLargeMapControl());
	map.setMapType(G_PHYSICAL_MAP);
	map.setCenter(new GLatLng(39.5241,-111.70), 7);
	map.enableScrollWheelZoom();
	//limit zoom levels
	G_PHYSICAL_MAP.getMinimumResolution=function (){ return 6 };
	G_PHYSICAL_MAP.getMaximumResolution=function (){ return 12 };

// Create page header info, and create tables using mapJSON.js
	
	//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 data is available for the selected date.</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='4' color=#ffff00>Utah Observed Max and Min Temperatures Map - " + 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;
	}
	var index = 0;
        var maxcheck = 0;
	//records comes from mapJSON.js - it's the data structure for all of the Max/Min temperature data.
	for (i in records){
		stnNAME=records[i].stnname;
		stnzone=records[i].stnzone;
		stntime=records[i].stntime;
		stndate=records[i].stndate;
		stnmax=records[i].stnmax;
		stnmin=records[i].stnmin;
		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>'
			+ stndate 
			+ '</td></tr><tr><td width=25px class=styleBubbleTitle>Max:</td><td width=175px class=styleBubbleMax>' 
			+ stnmax 
			+ '</td></tr><tr><td width=25px class=styleBubbleTitle>Min:</td><td width=175px class=styleBubbleMin>' 
			+ stnmin + '</td></tr></table></div>';
			  
// ######################################################
// DEFINE LABELS FOR MAX TEMPERATURE
// ######################################################
		if (stnmax){
                  if (stnmax != '-') {
			label=createMarker(point,stnmax,headerdisplay,stnmax,'MaxT','MaxT');
			 map.addOverlay(label);
			 markerGroups["MaxT"].push(label);
                         maxcheck++;
                  }
		}

// ######################################################
// DEFINE LABELS FOR MIN TEMPERATURE 
// ######################################################
		if (stnmin){
		  if (stnmin != '-') {
			label=createMarker(point,stnmin,headerdisplay,stnmin,'MinT','MinT');
			map.addOverlay(label);
			markerGroups["MinT"].push(label);
		  }
		}

// ######################################################
// CREATE AND FILL MAX/MIN TEMPERATURE TABLE
// ######################################################

		markerwindow[index] = headerdisplay;
		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 rtpmax = '<font size="1"><a href=javascript:panToPoint(' + stnlat + ',' +  stnlon + ',' + index + ') class=styleMaxText>' 
		+ stnmax + "</a></font>";
		var rtpmin = '<font size="1"><a href=javascript:panToPoint(' + stnlat + ',' +  stnlon + ',' + index + ') class=styleMinText>' 
		+ stnmin + "</a></font>";

		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 = rtpmax;
		td = tr.insertCell(tr.cells.length);
		td.setAttribute("align", "center");
		td.setAttribute("width", "20");
		td.innerHTML = rtpmin;
		index++;

		}				
	}
	}

// ##############################################################
//Determine whether to display Max or Min temperatures on the map
// ##############################################################

        if (maxcheck > 0) {
           hideGroup("MinT");
           document.getElementById("MinTCheckbox").checked = false;
           document.getElementById("MaxTCheckbox").checked = true;
        }
        else {
          hideGroup("MaxT");
          document.getElementById("MinTCheckbox").checked = true;
          document.getElementById("MaxTCheckbox").checked = false;
        }
// #############################################
// Create zoom areas drop down menu
// #############################################
	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){
		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 to zoom into selected aera 
// ###############################################
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();
	}
}