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

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

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


//traffic panel
function TrafficPanel() {
	var winWidth = document.documentElement.clientWidth;
	var extraSpace = parseInt((winWidth - 200 - 205 - 135) / 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;'><font class='big'>&nbsp;Traffic</font></td>";
				strPanel += "<td style='width: " + extraSpace + "px; padding-right: 25px' align='right'><img src='/images/general/arrow_left_down.gif' width='19' height='19'></td>";
				strPanel += "<td><table cellspacing='0' cellpadding='0'><tr><td><font class='big'>Speeds</font></td><td style='width: 25px'> </td><td><img src='/images/general/arrow_right_down.gif' width='19' height='19'></td></tr></table></td>";
				strPanel += "<td style='width: 135px;'><font class='big'>Location</font></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>22 - 11 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>55 - 41 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>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>40 - 23 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><input type='text' class='inputBox' style='color: gray' id='txtSearch' value='Type City or Zip'  onfocus='ResetMapSearch(this, 1)' onblur='ResetMapSearch(this, 0)' onkeypress='CheckMapSearchKeyPress(this, event)'></td>";
							strPanel += "<td><input type='button' class='findButton' value='Find' onclick='FindLoc()'></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;
}