//Copyright 2003-2010 by Ars Datum, Inc. All rights reserved.

// Create the Panels to display
var panelHeight = 75;
var panelDifferences = 55;
var headerHeight = 28;

//close a particular panel
function ClosePanel(theID) {
	var panel = document.getElementById('thePanel');
	panel.innerHTML = '';
}

//show a specific panel
function ShowPanel(thePanel) {
   //close all other panels

	//show traffic panel
	TrafficPanel();
}

//save panel settings
function SavePanelSetting(oCheck) {
	var id = oCheck.id;
	var checked = oCheck.checked;
	var value = 0;
	if (checked == true)
		value = 1;

	switch(id) {
		case "chkFlow":
			DisplayFlow = value;
			break;
		case "chkIncident":
			DisplayIncident = value;
			break;
		case "chkConstruction":
			DisplayConstruction = value;
			break;
		case "chkCamera":
			DisplayCamera = value;
			break;
		case "chkSponsor":
			DisplaySponsor = value;
			break;
	}
}

//load the current panel settings
function LoadPanelSettings () {
	//get the ids of the checkboxes
	var oFlow = document.getElementById('chkFlow');
	var oIncident = document.getElementById('chkIncident');
	var oConstruction = document.getElementById('chkConstruction');
	var oCamera = document.getElementById('chkCamera');
	var oSponsor = document.getElementById('chkSponsor');

	if (oFlow) {
		if (DisplayFlow == 1)
			oFlow.checked = true;
		else
			oFlow.checked = false;
	}

	if (oIncident) {
		if (DisplayIncident == 1)
			oIncident.checked = true;
		else
			oIncident.checked = false;
	}

	if (oConstruction) {
		if (DisplayConstruction == 1)
			oConstruction.checked = true;
		else
			oConstruction.checked = false;
	}

	if (oCamera) {
		if (DisplayCamera == 1)
			oCamera.checked = true;
		else
			oCamera.checked = false;
	}

	if (oSponsor) {
		if (DisplaySponsor == 1)
			oSponsor.checked = true;
		else
			oSponsor.checked = false;
	}
}

//toggle on/off each of the different options to display on the map
function Toggle(oThis) {
    //save the toggle setting
    SavePanelSetting(oThis);

	 var theType = oThis.attributes['value'].value;
	 if (oThis) {
	      if (oThis.checked == true) {
		    //show this
		    Show(theType);
	      } else {
		    //hide this
		    Hide(theType);
	      }
	 }
}
/* ============================================================== */
// top header panel

//caching map type buttons
var imgRoadType = new Image();
var imgRoadTypeHover = new Image();
var imgRoadTypeSelected = new Image();
var imgHybridType = new Image();
var imgHybridTypeHover = new Image();
var imgHybridTypeSelected = new Image();
imgRoadType.src = '/images/general/btn_Road.png';
imgRoadTypeHover.src = '/images/general/btn_Road-over.png';
imgRoadTypeSelected.src = '/images/general/btn_Road-selected.png';
imgHybridType.src = '/images/general/btn_Hybrid.png';
imgHybridTypeHover.src = '/images/general/btn_Hybrid-over.png';
imgHybridTypeSelected.src = '/images/general/btn_Hybrid-selected.png';

var imgGoLoc = new Image();
var imgGoLocHover = new Image();
imgGoLoc.src = '/images/general/btn_GO.png';
imgGoLocHover.src = '/images/general/btn_GO-over.png';

var imgSponsor = new Image();
var imgSponsorHover = new Image();
imgSponsor.src = '/images/general/btn_sponsor.png';
imgSponsorHover.src = '/images/general/btn_sponsor-over.png';

function HighlightGo(oImage, toggle) {
	if (toggle == 1)
		oImage.src = imgGoLocHover.src;
	else
		oImage.src = imgGoLoc.src;
}

function HighlightSponsor(oImage, toggle) {
	if (toggle == 1)
		oImage.src = imgSponsorHover.src;
	else
		oImage.src = imgSponsor.src;
}

function HighlightMapType(oImage, toggle) {
   var mapType = oImage.attributes['value'].value;
   var currentType = map.getCurrentMapType().getName();			//Map, Hybrid

   if (mapType == 'road') {
		if (toggle == 1)
			oImage.src = imgRoadTypeHover.src;
		else {
			if (currentType == 'Map')
				oImage.src = imgRoadTypeSelected.src;
			else
				oImage.src = imgRoadType.src;
		}
	} else if (mapType == 'hybrid') {
		if (toggle == 1)
			oImage.src = imgHybridTypeHover.src;
		else {
			if (currentType == 'Hybrid')
				oImage.src = imgHybridTypeSelected.src;
			else
				oImage.src = imgHybridType.src;
		}
	}
}

function SelectedMapType(oImage) {
   var mapType = oImage.attributes['value'].value;
   var oRoadType = document.getElementById('imgRoadType');
   var oHybridType = document.getElementById('imgHybridType');

   if (mapType == 'road') {
		oImage.src = imgRoadTypeSelected.src;
		oHybridType.src = imgHybridType.src;
	} else if (mapType == 'hybrid') {
		oImage.src = imgHybridTypeSelected.src;
		oRoadType.src = imgRoadType.src;
	}
}

//load a specific map type
function ChangeMapType(oInput) {
	var mapType = oInput.attributes['value'].value;

	if (mapType == 'road')
		map.setMapType(G_NORMAL_MAP);
	else if (mapType == 'hybrid')
		map.setMapType(G_HYBRID_MAP);
	else if (mapType == 'satellite')
		map.setMapType(G_SATELLITE_MAP);
}

//build the header part of this page
function ShowHeader() {
	var winWidth = document.documentElement.clientWidth;
	var extraSpace = parseInt((winWidth - 125 - 215 - 230) / 2);

	var strPanel = "<div class='topPanel'>";
		strPanel += "<table class='left' width='100%' cellspacing='0' cellpadding='0'><tr>";
			//map type
			strPanel += "<td width='125px;'>";
				strPanel += "<a href='javascript:void(0);'><img id='imgRoadType' value='road' src='/images/traffic/RoadType-Selected.gif' width='62' height='18' border='0' onclick='ChangeMapType(this);SelectedMapType(this);' onmouseover='HighlightMapType(this, 1)' onmouseout='HighlightMapType(this, 0)'></a>";
				strPanel += "<a href='javascript:void(0);'><img id='imgHybridType' value='hybrid' src='/images/traffic/HybridType.gif' width='62' height='18' border='0' onclick='ChangeMapType(this);SelectedMapType(this);' onmouseover='HighlightMapType(this, 1)' onmouseout='HighlightMapType(this, 0)'></a>";
			strPanel += "</td>";

			//sponsor if exists
			if (SponsorLink > '') {
				strPanel += "<td style='padding-left: " + extraSpace + "px'>&nbsp;</td>";
				strPanel += "<td><a target='_blank' href='" + SponsorLink + "'><img src='/images/general/btn_sponsor.png' width='170' height='18' border='0' onmouseover='HighlightSponsor(this,1)' onmouseout='HighlightSponsor(this, 0)'></a></td>";
				strPanel += "<td><img src='/images/general/x.gif' width='5' height=1'></td>";
				strPanel += "<td>" + SponsorIcon + "</td>";

				if (SponsorHeight > '') {
					var height = parseInt(SponsorHeight);
					if (height > 28) {
						height = height + 5;		//pad bottom with space 5px;
						headerHeight = height;
						document.getElementById('theHeader').style.height = height + 'px';
					}
				}
			}

			//input box
			strPanel += "<td style='padding-left: " + extraSpace + "px'>&nbsp;</td>";
			strPanel += "<td width='230px'>";
				strPanel += "<table class='ChangeLocTable' cellspacing='0' cellpadding='0'>";
					strPanel += "<tr>";
						strPanel += "<td><img src='/images/general/changeLocation_title.png' width='101' height='18'></td>";
						strPanel += "<td valign='top'><input class='ChangeLocation' type='input' id='txtSearch' name='txtSearch' value='Type City or Zip' onfocus='ResetMapSearch(this, 1)' onblur='ResetMapSearch(this, 0)' onkeypress='CheckMapSearchKeyPress(this, event)'></td>";
						strPanel += "<td><a href='#' onclick='FindLoc()'><img src='/images/general/btn_GO.png' width='37' height='18' border='0' onmouseover='HighlightGo(this,1)' onmouseout='HighlightGo(this, 0)'></a></td>";
					strPanel += "</tr>";
				strPanel += "</table>";
			strPanel += "</td>";
		strPanel += "</tr></table>";
	strPanel += "</div>";

	document.getElementById('theHeader').innerHTML = strPanel;
}

/* ============================================================== */
//bottom panel

//traffic panel
function TrafficPanel() {
	var winWidth = document.documentElement.clientWidth;
	var extraSpace = parseInt((winWidth - 200 - 205 - 220) / 2);

	var strPanel = "<div class='bottomPanel'>";
		strPanel += "<table class='bottomTable' cellspacing='0' cellpadding='0'>";
			strPanel += "<tr onclick='TrafficSmallPanel()' style='cursor: pointer'>";
				strPanel += "<td style='width: 200px;'><img src='/images/general/traffic_title.png' width='43' height='9'></td>";
				strPanel += "<td style='width: " + extraSpace + "px; padding-right: 15px' align='right'> </td>";
				strPanel += "<td><img src='/images/general/conditions_title.png' width='63' height='9'></td>";
				strPanel += "<td style='width: 220px;'><img src='/images/general/incidenttypes_title.png' width='84' height='9'></td>";
			strPanel += "</tr>";
			strPanel += "<tr><td colspan='4' style='height: 5px;'> </td></tr>";

			strPanel += "<tr>";
				strPanel += "<td valign='top'>";
					strPanel += "<table cellspacing='0' cellpadding='0'>";
						strPanel += "<tr>";
							strPanel += "<td>";
								strPanel += "<span class='CheckListWSpace'><input type='checkbox' id='chkFlow' name='chkFlow' value='flow' onclick='Toggle(this);'>Flow</span>";
								strPanel += "<span class='CheckListWSpace'><input type='checkbox' id='chkIncident' name='chkIncident' value='incident' onclick='Toggle(this);'>Incident</span>";
								if (mapKey.Camera == "1")
									strPanel += "<span class='CheckList'><input type='checkbox' id='chkCamera' name='chkCamera' value='camera' onclick='Toggle(this);'>Camera</span>";
								else
									strPanel += "<span class='CheckList invisible'><input class='hide' type='checkbox' id='chkCamera' name='chkCamera' value='camera' onclick='Toggle(this);'>Camera</span>";
							strPanel += "</td>";
						strPanel += "</tr>";

						strPanel += "<tr>";
							strPanel += "<td>";
								strPanel += "<span class='CheckListWSpace'><input type='checkbox' id='chkConstruction' name='chkConstruction' value='construction' onclick='Toggle(this);'>Construction</span>";
							if (mapKey.Sponsor == "1")
								strPanel += "<span class='CheckList'><input type='checkbox' id='chkSponsor' name='chkSponsor' value='sponsor' onclick='Toggle(this);'>Sponsor</span>";
							else
								strPanel += "<span class='CheckList invisible'><input class='hide' type='checkbox' id='chkSponsor' name='chkSponsor' value='sponsor' onclick='Toggle(this);'>Sponsor</span>";
							strPanel += "</td>";
						strPanel += "</tr>";
					strPanel += "</table>";
				strPanel += "</td>";
				strPanel += "<td> </td>";

				strPanel += "<td valign='top'>";
					strPanel += "<table class='conditions' cellspacing='0' cellpadding='0'>";
						strPanel += "<tr>";
							strPanel += "<td class='space'><table class='flowLegend' cellpadding='0' cellspacing='0'><tr><td class='freely'> </td></tr></table></td><td>56+ mph</td>";
							strPanel += "<td style='width: 10px;'> </td>";
							strPanel += "<td class='space'><table class='flowLegend' cellpadding='0' cellspacing='0'><tr><td class='major'> </td></tr></table></td><td>11 - 22 mph</td>";
						strPanel += "</tr>";
						strPanel += "<tr>";
							strPanel += "<td class='space'><table class='flowLegend' cellpadding='0' cellspacing='0'><tr><td class='minor'> </td></tr></table></td><td>41 - 55 mph</td>";
							strPanel += "<td style='width: 10px;'> </td>";
							strPanel += "<td class='space'><table class='flowLegend' cellpadding='0' cellspacing='0'><tr><td class='extreme'> </td></tr></table></td><td>0 - 10 mph</td>";
						strPanel += "</tr>";
						strPanel += "<tr>";
							strPanel += "<td class='space'><table class='flowLegend' cellpadding='0' cellspacing='0'><tr><td class='moderate'> </td></tr></table></td><td>23 - 40 mph</td>";
							strPanel += "<td colspan='3'> </td>";
						strPanel += "</tr>";
					strPanel += "</table>";
				strPanel += "</td>";

				strPanel += "<td valign='top'>";
					strPanel += "<table cellspacing='0' cellpadding='0'>";
						strPanel += "<tr>";
							strPanel += "<td><img src='/images/general/legend-trafficIncident.png' width='20' height='18'></td>";
							strPanel += "<td style='width: 5px;'> </td>";
							strPanel += "<td>Traffic incident</td>";
							strPanel += "<td style='width: 15px;'> </td>";
							strPanel += "<td><img src='/images/general/legend_construction.png' width='14' height='18'></td>";
							strPanel += "<td style='width: 5px;'> </td>";
							strPanel += "<td>Construction</td>";
							strPanel += "<td style='width: 10px;'> </td>";
						strPanel += "</tr>";
						strPanel += "<tr><td colspan='8' style='height: 5px;'> </td></tr>";
						strPanel += "<tr>";
							strPanel += "<td><img src='/images/general/legend_event.png' width='18' height='17'></td>";
							strPanel += "<td style='width: 5px;'> </td>";
							strPanel += "<td>Event</td>";
							strPanel += "<td colspan='5'> </td>";
						strPanel += "</tr>";
					strPanel += "</table>";
				strPanel += "</td>";

			strPanel += "</tr>";
		strPanel += "</table>";
	strPanel += "</div>";

	var oMap = document.getElementById('pnlMap');
	var oPanel = document.getElementById('thePanel');
	var mapHeight = parseInt(oMap.style.height);
	oMap.style.height = (mapHeight - panelDifferences) + 'px';
	oPanel.style.height = panelHeight + 'px';
    oPanel.innerHTML = strPanel;

   //load the current settings
   LoadPanelSettings ();
}

function FindLoc() {
    var oInput = document.getElementById('txtSearch');
    DoMapSearch(oInput);
}

//traffic small panel
function TrafficSmallPanel() {
	var strPanel = "<div class='smallPanel'>";
		strPanel += "<input type='checkbox' class='hide' id='chkFlow' name='chkFlow' value='flow' onclick='Toggle(this)'>";
		strPanel += "<input type='checkbox' id='chkIncident' class='hide' name='chkIncident' value='incident' onclick='Toggle(this)'>";
		strPanel += "<input type='checkbox' id='chkConstruction' class='hide' name='chkConstruction' value='construction' onclick='Toggle(this)'>";
		if (mapKey.Camera == "1")
			strPanel += "<input type='checkbox' id='chkCamera' class='hide' name='chkCamera' value='camera' onclick='Toggle(this)'>";
		if (mapKey.Sponsor == "1")
			strPanel += "<input type='checkbox' id='chkSponsor' class='hide' name='chkSponsor' value='sponsor' onclick='Toggle(this)'>";

		strPanel += "<table width='100%' align='center' cellspacing='0' cellpadding='0'>";
			strPanel += "<tr onclick='TrafficPanel()' style='cursor: pointer'><td>";
				strPanel += "<table width='200' align='center' cellspacing='0' cellpadding='0'><tr>";
				strPanel += "<td style='width: 50px;' align='center'><img src='/images/general/arrow_left_up.gif' width='19' height='19'></td>";
				strPanel += "<td style='width: 100px;' align='center'>View key</td>";
				strPanel += "<td style='width: 50px;' align='center'><img src='/images/general/arrow_right_up.gif' width='19' height='19'></td>";
				strPanel += "</tr></table>";
			strPanel += "</td></tr>";
		strPanel += "</table>";
	strPanel += "</div>";

	var oMap = document.getElementById('pnlMap');
	var oPanel = document.getElementById('thePanel');
	var mapHeight = parseInt(oMap.style.height);
	oMap.style.height = (mapHeight + panelDifferences) + 'px';
	oPanel.style.height = '18px';
    oPanel.innerHTML = strPanel;

   //load the current settings
   LoadPanelSettings ();
}

/* ============================================================== */
//minis panel

//traffic mini panel
function TrafficMiniPanel() {
	var strPanel = "<div class='miniPanel'>";
		strPanel += "<input type='checkbox' class='hide' id='chkFlow' name='chkFlow' value='flow' onclick='Toggle(this)' CHECKED>";
		strPanel += "<input type='checkbox' id='chkIncident' class='hide' name='chkIncident' value='incident' onclick='Toggle(this)' CHECKED>";
		strPanel += "<input type='checkbox' id='chkConstruction' class='hide' name='chkConstruction' value='construction' onclick='Toggle(this)'>";
		if (mapKey.Camera == "1")
			strPanel += "<input type='checkbox' id='chkCamera' class='hide' name='chkCamera' value='camera' onclick='Toggle(this)'>";
		if (mapKey.Sponsor == "1")
			strPanel += "<input type='checkbox' id='chkSponsor' class='hide' name='chkSponsor' value='sponsor' onclick='Toggle(this)' CHECKED>";

		strPanel += "<table class='MiniChangeLocTable' cellspacing='0' cellpadding='0'>";
			strPanel += "<tr>";
				strPanel += "<td style='padding-top: 1px;'>Change Location</td>";
				strPanel += "<td valign='top'><input class='ChangeLocation' type='input' id='txtSearch' name='txtSearch' value='Type City or Zip' onfocus='ResetMapSearch(this, 1)' onblur='ResetMapSearch(this, 0)' onkeypress='CheckMapSearchKeyPress(this, event)'></td>";
				strPanel += "<td style='padding-top: 1px;'><a href='#' onclick='FindLoc()'><img src='/images/general/btn_searchGO.png' width='33' height='17' border='0' !onmouseover='HighlightGo(this,1)' !onmouseout='HighlightGo(this, 0)'></a></td>";
			strPanel += "</tr>";
		strPanel += "</table>";
	strPanel += "</div>";

   document.getElementById('thePanel').innerHTML = strPanel;
}