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

// Create the Panels to display

//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();
}

//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;
	}
}

/* ============================================================== */

//build the header part of this page
function Header() {
	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 (sponsorExists == true) {
				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>" + sponsorLegendIcons + "</td>";

				if (sponsorImage > '') {
					var oImage = document.createElement('img');
					var height = 28;
					oImage.src = sponsorImage;
					if (oImage.height > '') {
						height = parseInt(oImage.height);
						if (height > 28) {
							height = height + 10;		//pad top/bottom with space 5px;
							headerHeight = height;
							document.getElementById('theHeader').style.height = height + 'px';
						}
					}
					oImage = null;
				}
			}

			//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='ResetFind(1)' onblur='ResetFind(0)' onkeypress='CheckKeyPress(event)'></td>";
						strPanel += "<td><a href='#' onclick='DoFind()'><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;
}


//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>";
				strPanel += "<td style='width: 200px;'><img src='images/general/traffic_title.png' width='43' height='9'></td>";
				strPanel += "<td style='width: " + extraSpace + "px;'> </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='3' 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)' CHECKED>Flow</span>";
								strPanel += "<span class='CheckListWSpace'><input type='checkbox' id='chkIncident' name='chkIncident' value='incident' onclick='Toggle(this)' CHECKED>Incident</span>";
								if (cameraExists == true)
									strPanel += "<span class='CheckList'><input type='checkbox' id='chkCamera' name='chkCamera' value='camera' onclick='Toggle(this)'>Camera</span>";
							strPanel += "</td>";
						strPanel += "</tr>";

						strPanel += "<tr><td style='height: 5px;'> </td></tr>";
						strPanel += "<tr>";
							strPanel += "<td>";
								strPanel += "<span class='CheckListWSpace'><input type='checkbox' id='chkConstruction' name='chkConstruction' value='construction' onclick='Toggle(this)'>Construction</span>";
							if (sponsorExists == true)
								strPanel += "<span class='CheckListWSpace'><input type='checkbox' id='chkSponsor' name='chkSponsor' value='sponsor' onclick='Toggle(this)' CHECKED>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: 15px;'> </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: 15px;'> </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>";

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

   //get the traffic data
}


//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)' 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 (cameraExists == true)
			strPanel += "<input type='checkbox' id='chkCamera' class='hide' name='chkCamera' value='camera' onclick='Toggle(this)'>";
		if (sponsorExists == true)
			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='ResetFind(1)' onblur='ResetFind(0)' onkeypress='CheckKeyPress(event)'></td>";
				strPanel += "<td style='padding-top: 1px;'><a href='#' onclick='DoFind()'><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;
}