Attachment 49641 Details for Bug 91516

Drop-down menus that fall benind disrespectful iFrame

programInterface.html (text/html), 35.01 KB, created by Brian Sage

(hide)

Description:

Filename:

MIME Type:

Creator: Brian Sage

Size: 35.01 KB

patch

obsolete

><html>
><head>
>
>
>
>
><title>User Preferences</title>
><style type="text/css">
>
></style>
><script language="javascript">
>	function updateSelect(primarySelect, secSelect, secDefaultValue, sec, secCount, maxSecCount, nullText)
>		{
>		var x, i;
>		var primaryValue = primarySelect.options[primarySelect.selectedIndex].value;
>		
>		secSelect.length = maxSecCount + 1;
>		
>		if(maxSecCount)
>			{
>			for(i = 0; i < secCount[primaryValue]; i++)
>				{
>				x = i + 1;
>				secSelect.options[x].value = sec[primaryValue][i][0];
>				secSelect.options[x].text = sec[primaryValue][i][1];
>				if(sec[primaryValue][i][0] == secDefaultValue) secSelect.options[x].selected = true;
>				}
>			
>			secSelect.length = secCount[primaryValue] + 1;
>			if(!secDefaultValue) secSelect.selectedIndex = 0;
>			if(secSelect.length > 1)
>				{
>				secSelect.options[0].text = '-- select one... --';
>				}
>			else
>				{
>				if(primarySelect.selectedIndex == 0)
>					{
>					secSelect.options[0].text = '-- ' + nullText + ' --';
>					}
>				else
>					{
>					secSelect.options[0].text = '-- none available --';
>					}
>				}
>			}
>		else
>			{
>			secSelect.length = 1;
>			secSelect.selectedIndex = 0;
>			}
>		}
>	
>	
>	
>	/* General Navigation Functions */
>	
>	// Title: Real Browser Detect Script
>	IF_NS4 = (document.layers) ? true : false;         // netscape 4
>	IF_IE4 = (document.all) ? true : false;            // ie4+
>	IF_DOM = (document.getElementById) ? true : false; // ns6 etc.
>	
>	// Title: Real DOM Detect Script. Detect the difference between the DOM browsers returning DOM_IE or DOM_NS
>	// Requires: Real Browser Detect Script
>	DOM_IE = false;  // Internet Explorer5+
>	DOM_NS = false;  // Netscape6+
>	DOMBrowserVersion = null;
>	
>	if (IF_DOM) {
>		var ua, s, i;
>	  ua = navigator.userAgent;
>	  s = 'MSIE';
>	  if ((i = ua.indexOf(s)) >= 0) {
>	    DOM_IE = true;
>	    DOMBrowserVersion = parseFloat(ua.substr(i + s.length));
>	  };
>	  s = 'Mozilla/';
>		if ((i = ua.indexOf(s)) >= 0) {
>	    DOM_NS = true;
>	    DOMBrowserVersion = parseFloat(ua.substr(i + s.length));
>	  };
>	};
>	
>	
>	// Title: Program Menu maker. Makes a styled element behave like a Wondow program (File, Edit, etc...) menu.
>	// Usage: onMouseOver="programmenuOver('ElementID')" onMouseOut="programmenuOver('ElementID')" onClick="programmenuClick('ElementID')"
>	// Requires: Real Browser Detect Script, Program Menu State Change, Appropriately named styles, Appropriately named styles, 
>	var programmenuClick_yesNo, whatItWas;
>	
>	function programmenuOver (whatItIs) {
>		if (whatItIs && IF_DOM) {
>			if ((programmenuClick_yesNo == 1) && (whatItIs == whatItWas)) {
>				return true;
>			} else if ((programmenuClick_yesNo == 1) && (whatItIs != whatItWas)) {
>				programmenuClick(whatItIs);
>			} else {
>				programmenuState(whatItIs + 'Title','over');
>			};
>		} else if (whatItIs && IF_NS4) {
>			if (programmenuClick_yesNo == 1) showHide(whatItWas + 'Menu','hide');
>			if (activeSelectArray.length) showHideIdArray('hide', activeSelectArray);
>			showHide(whatItIs + 'Menu','show');
>			whatItWas = whatItIs;
>			programmenuClick_yesNo = 1;
>		} else {
>			return false;
>		};
>	};
>	
>	function programmenuOut(whatItIs){
>		if (whatItIs && IF_DOM) {
>			if ((programmenuClick_yesNo == 1) && (whatItIs == whatItWas)){
>				return true;
>			} else {
>				programmenuState(whatItIs + 'Title','off');
>				if (activeSelectArray.length) showHideIdArray('show', activeSelectArray);
>				showHide(whatItIs + 'Menu','hide');
>			};
>		} else if (whatItIs && IF_NS4) {
>			whatItWas = whatItIs;
>		} else {
>			return false;
>		};
>	};
>	
>	function programmenuClick(whatItIs){
>		if (whatItIs && IF_DOM) {
>			if (whatItWas && (programmenuClick_yesNo == 1) && (whatItIs != whatItWas)){
>				programmenuState(whatItWas + 'Title','off');
>				showHide(whatItWas + 'Menu','hide');
>			};
>			if (whatItWas && (programmenuClick_yesNo == 1) && (whatItIs == whatItWas)){
>				programmenuClick_yesNo = 0;
>				programmenuState(whatItWas + 'Title','over');
>				if (activeSelectArray.length) showHideIdArray('show', activeSelectArray);
>				showHide(whatItIs + 'Menu','hide');
>			} else {
>			whatItWas = whatItIs;
>			programmenuClick_yesNo = 1;
>			programmenuState(whatItIs + 'Title','down');
>			if (activeSelectArray.length) showHideIdArray('hide', activeSelectArray);
>			showHide(whatItIs + 'Menu','show');
>			};
>		} else if (whatItIs && IF_NS4 && (programmenuClick_yesNo == 1)) {
>			if (activeSelectArray.length) showHideIdArray('hide', activeSelectArray);
>			showHide(whatItIs + 'Menu','hide');
>			programmenuClick_yesNo = 0;
>		} else if (whatItIs && IF_NS4 && (programmenuClick_yesNo == 0)) {
>			if (activeSelectArray.length) showHideIdArray('hide', activeSelectArray);
>			showHide(whatItIs + 'Menu','show');
>			programmenuClick_yesNo = 1;
>		} else {
>			return false;
>		};
>	};
>	
>	
>	// Capture mouse clicks on the page so any active button can be deactivated.
>	// Usage: Just leave it be, boy!
>	// Requires: Real Browser Detect Script, Real DOM Detect Script, appropriately named styles, modifications for what to do if true.
>	if (DOM_IE) {
>	  document.onmousedown = pageMousedown;
>	} else if (DOM_NS) {
>	  document.addEventListener("mousedown", pageMousedown, true);
>	};
>	
>	function pageMousedown(event) {
>	  var className;
>		if (DOM_IE) {
>	    theClassName = window.event.srcElement.className;
>		} else if (DOM_NS) {
>	    theClassName = (event.target.className ? event.target.className : event.target.parentNode.className);
>		};
>	  if ((activeDialogue_YesNo == 0) && (programmenuClick_yesNo == 1) && (theClassName != 'programmenu') && (theClassName != 'programmenuTitleBlock') && (theClassName != 'programmenuTitleLink') && (theClassName != 'programmenuItemLink') && (theClassName != 'programmenuItemBlock')) {
>	    programmenuState(whatItWas + 'Title', 'off');
>			showHideIdArray('show', activeSelectArray);
>			showHide(whatItWas + 'Menu','hide');
>			programmenuClick_yesNo = 0;
>		};
>	};
>	
>	// Title: Program Menu State Change. Changes the visual apearance of a Windows-looking menu button to "over", "down", or "off" depending on input.
>	// Usage: onMouseEvent="programmenuState('ElementID', 'over|down|off')"
>	// Requires: Real Browser Detect Script
>	function programmenuState (whatItIs, theState){
>		if (whatItIs && theState && IF_DOM) {
>			var theColor1, theColor2;
>			if (theState == 'over') {
>				theColor1 = '#e0e8f8';
>				theColor2 = '#999';
>			}else if (theState == 'down') {
>				theColor1 = '#999';
>				theColor2 = '#e0e8f8';
>			}else if (theState == 'off') {
>				theColor1 = '#d4d0c8';
>				theColor2 = '#d4d0c8';
>			};
>			whatItIs_DOM = document.getElementById(whatItIs);
>			whatItIs_DOM.style.borderLeft = 'solid '+ theColor1 +' 1px';
>			whatItIs_DOM.style.borderTop = 'solid '+ theColor1 +' 1px';
>			whatItIs_DOM.style.borderRight = 'solid '+ theColor2 +' 1px';
>			whatItIs_DOM.style.borderBottom = 'solid '+ theColor2 +' 1px';
>		} else {
>			return false;
>		};
>	};
>	
>	
>	// Title: Show/Hide element. Switches visibility of the specied element.
>	// Usage: onMouseEvent="showHide('Element ID','Optional hide|show');"
>	// Requires: Real Browser Detect Script
>	function showHide(elemID, doThis) {
>		if (IF_DOM) {
>			e = document.getElementById(elemID);
>			if (doThis=='hide') { e.style.visibility = 'hidden';
>			} else if (doThis == 'show') { e.style.visibility='visible';
>			} else {		
>				if (e.style.visibility == 'visible') { e.style.visibility = 'hidden';
>				} else if (e.style.visibility == 'hidden') { e.style.visibility='visible';
>				};
>			};
>		} else if (IF_IE4) {
>			e=document.all[elemID];
>			if (doThis=='hide') {e.style.visibility='hidden';
>			} else if (doThis=='show') {e.style.visibility='visible';
>			} else {		
>				if (e.style.visibility=='visible') {e.style.visibility='hidden';
>				} else if (e.style.visibility=='hidden') {e.style.visibility='visible';
>				};
>			};
>		} else if (IF_NS4 && elemID) {
>			var e = document.layers[elemID];
>			if (doThis=='hide') {
>				e.visibility='hide';
>			} else if (doThis=='show') {
>				e.visibility='show';
>			} else {		
>				if (e.visibility=='show') {
>					e.visibility='hide';
>				} else if (e.visibility=='hide') {
>					e.visibility='show';
>				};
>			};
>		};
>	};
>	
>	
>	// Title: Show/Hide TPS dialogue div/layer. Switches visibility of the specied dialogue div/layer, and sets a few global
>	//   variables to make the menu system act right. hideTPSDialogue() needs no arguments to work properly.
>	/*
>		Usage: onMouseEvent="showTPSDialogue( which Dialogue ID ex: 'popUp1', New activeSelectArray variable name ex: selectArray_popUp1 );" onMouseEvent="hideTPSDialogue();"
>	
>		// include these page select arrays to specify which menu select should be hidden/shown onMouseEvent
>		var selectArray_page = new Array('select1','select2','select3','select4');  // required array. Allowed to have no value.
>		var selectArray_popUp1 = new Array('popUp1_selectName1','popUp1_selectName2'); // naming conventions are not important. Just make it easy to remember in conjunction with div IDs
>		var selectArray_popUp2 = new Array('popUp2_selectName1','popUp2_selectName2');
>		var selectArray_popUp3 = new Array('popUp3_selectName1','popUp3_selectName2');
>	
>		var activeSelectArray = selectArray_page;  // required var. Allowed to have no value.
>	*/
>	// Requires: Real Browser Detect Script, Show/Hide Element ID Array
>	var activeDialogueId;
>	var selectArray_page = new Array();
>	var activeSelectArray = selectArray_page;
>	var activeDialogue_YesNo = 0;
>	
>	function showTPSDialogue(whichDialogueId, whichSelectArray) {
>		if (IF_DOM && (activeDialogue_YesNo == 0) && whichDialogueId) {  // is there no Dialogue Box open? Then open whichDialogueId
>			if (programmenuClick_yesNo == 1) {  // if a menu is open, close it. Requies: Program Menu maker
>				programmenuClick_yesNo = 0;
>				programmenuState(whatItWas+ 'Title','off');
>				showHide(whatItWas+ 'Menu','hide');
>			};
>			if (whichSelectArray) showHideIdArray('hide', selectArray_page);  // hide the page array of document select fields
>			document.getElementById(whichDialogueId).style.visibility = 'visible';  // open the appropriate Dialogue Box
>			document.getElementById('dialogueShield').style.visibility = 'visible';
>			activeDialogue_YesNo = 1; // tell the document the box is visible
>			activeDialogueId = whichDialogueId;
>			if (whichSelectArray) activeSelectArray = whichSelectArray;
>		};
>	};
>	
>	function hideTPSDialogue() {
>		if (IF_DOM && (activeDialogue_YesNo == 1)) {  // is there a Dialogue Box open? Then close activeDialogueId.
>			if (programmenuClick_yesNo == 1) {  // if a menu is open, close it. Requies: Program Menu maker
>				programmenuClick_yesNo = 0;
>				programmenuState(whatItWas+ 'Title','off');
>				showHide(whatItWas+ 'Menu','hide');
>			};
>			document.getElementById(activeDialogueId).style.visibility = 'hidden'; // close the appropriate Dialogue Box
>			document.getElementById('dialogueShield').style.visibility = 'hidden';
>			activeDialogue_YesNo = 0; // tell the document the box is hidden
>			activeDialogueId = 0;
>			activeSelectArray = selectArray_page;
>			showHideIdArray('show', selectArray_page); // return visibility to the appropriate array of document select fields
>		};
>	};
>	
>	
>	// Title: Show/Hide TPS error div/layer. Switches visibility of the specied dialogue div/layer, and sets a few global
>	//   variables to make the menu system act right.
>	// Usage: onMouseEvent="showTPSError();" onMouseEvent="hideTPSError();"
>	// Requires: Real Browser Detect Script, Show/Hide Element ID Array
>	var activeError_YesNo = 0;
>	
>	function showTPSError() {
>		if (IF_DOM && activeError_YesNo == 0) {  // is there no error open already?
>			if (programmenuClick_yesNo == 1) {  // if a menu is open, close it. Requies: Program Menu maker
>				programmenuClick_yesNo = 0;
>				programmenuState(whatItWas+ 'Title','off');
>				showHide(whatItWas+ 'Menu','hide');
>			};
>			if (activeSelectArray) showHideIdArray('hide', activeSelectArray);  // hide the array of active select menus
>			document.getElementById('errorMessage').style.visibility = 'visible';  // show the error dialogue
>			document.getElementById('errorShield').style.visibility = 'visible';
>			activeError_YesNo = 1;  // indicate there is an open error
>		};
>	};
>	
>	function hideTPSError() {
>		if (IF_DOM && activeError_YesNo == 1) {  // is there an error open already?
>			if (programmenuClick_yesNo == 1) {  // if a menu is open, close it. Requies: Program Menu maker
>				programmenuClick_yesNo = 0;
>				programmenuState(whatItWas+ 'Title','off');
>				showHide(whatItWas+ 'Menu','hide');
>			};
>			document.getElementById('errorMessage').style.visibility = 'hidden';  // show the error dialogue
>			document.getElementById('errorShield').style.visibility = 'hidden';
>			if (activeSelectArray) showHideIdArray('show', activeSelectArray);  // hide the array of active select menus
>			activeError_YesNo = 0;  // indicate there is no open error
>		};
>	};
>	
>	
>	// Title: Show/Hide Element ID Array. Assigns specified visibility to an array of element IDs.
>	// Usage: onMouseEvent="showHideFormSelects('hide|show', IdArray)"
>	// Required: Real Browser Detect Script, predefined array of element IDs
>	function showHideIdArray(doThis, IdArray) {
>		if (IF_DOM && doThis && (IdArray.length >= 1)) {
>			var i, e, elemID, eState;
>			if (doThis == 'hide') eState = 'hidden';
>			if (doThis == 'show') eState = 'inherit';
>			if ((eState == 'hidden') || (eState == 'visible') || (eState == 'inherit')) {
>				for (i=0; i<(IdArray.length); i++) {
>					elemID = IdArray[i];
>					document.getElementById(elemID).style.visibility = eState;
>				};
>			} else{
>				alert("first showHideIdArray() argument must be either 'show', 'hide', or 'inherit', followed by a variable that is an array.");
>			};
>		};
>	};
>	
>	
>	// Swap this object's background color
>	// Usage: onMouseOver="IF_swapThisBGColor(this,'Hex color value');return true;" onMouseOut="IF_unSwapThisBGColor(this);return true;" 
>	var ifUnSwapColor;
>	function swapThisBGColor(whatItIs,swapColor){
>		ifUnSwapColor=whatItIs.style.backgroundColor;
>		if (IF_DOM) {whatItIs.style.backgroundColor=swapColor;
>		}else if (IF_IE4&&whatItIsem==this) {whatItIs.style.backgroundColor=swapColor;
>		};
>	};
>	function unSwapThisBGColor(whatItIs){
>		if (IF_DOM) {whatItIs.style.backgroundColor=ifUnSwapColor;
>		}else if (IF_IE4&&whatItIs==this) {whatItIs.style.backgroundColor=ifUnSwapColor;
>		};
>	};
>	
>	
>	// Redirect to URL.
>	// Usage: onMouseEvent="getURL('URL')" 
>	function getURL(linkURL){
>		if (linkURL) window.location=linkURL;
>	};
></script>
></head>
>
><body bgcolor="#ffffff" text="#000000" link="#0033cc" vlink="#0033cc" alink="#0033cc" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onLoad="">
>
>
>
><div id="navigationLayer">
>	
>	<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#d4d0c8" class="programmenu">
>	<tr valign="top">
>		<td align="left">
>			<table border="0" cellspacing="1" cellpadding="0">
>			<tr>
>				<td><div class="programmenuTitleBlock" id="programmenuUserTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuUser');" onMouseOut="programmenuOut('programmenuUser');" href="javascript:programmenuClick('programmenuUser');">User</a></div></td>
>				<td><div class="programmenuTitleBlock" id="programmenuTicketsTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuTickets');" onMouseOut="programmenuOut('programmenuTickets');" href="javascript:programmenuClick('programmenuTickets');">Tickets</a></div></td>
>				<td><div class="programmenuTitleBlock" id="programmenuReportsTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuReports');" onMouseOut="programmenuOut('programmenuReports');" href="javascript:programmenuClick('programmenuReports');">Reports</a></div></td>
>				<td><div class="programmenuTitleBlock" id="programmenuSettingsTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuSettings');" onMouseOut="programmenuOut('programmenuSettings');" href="javascript:programmenuClick('programmenuSettings');">Settings</a></div></td>
>				<td><div class="programmenuTitleBlock" id="programmenuBillingTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuBilling');" onMouseOut="programmenuOut('programmenuBilling');" href="javascript:programmenuClick('programmenuBilling');">Billing</a></div></td>
>			</tr>
>			</table>
>		</td>
>		<td align="right">
>			<table border="0" cellspacing="0" cellpadding="0">
>			<tr>
>				<td>
>					<div class="programmenuButtonBlock" id="programmenuPrintButton">
>						<a class="programmenuButtonLink" onMouseOver="programmenuState('programmenuPrintButton', 'over');" onMouseOut="programmenuState('programmenuPrintButton', 'off');" href="javascript:print();"><nobr><img src="link/graphics/icon_print.gif" width="16" height="16" hspace="0" vspace="0" border="0" align="absmiddle" alt=""> print me</nobr></a>
>					</div></td>
>				</td>
>				<td>
>					<div class="programmenuButtonBlock" id="programmenuLogoutButton">
>						<a class="programmenuButtonLink" onMouseOver="programmenuState('programmenuLogoutButton', 'over');" onMouseOut="programmenuState('programmenuLogoutButton', 'off');" href="logout.php"><nobr><img src="link/graphics/icon_logout.gif" width="16" height="16" hspace="0" vspace="0" border="0" align="absmiddle" alt=""> logout</nobr></a>
>					</div>
>				</td>
>			</tr>
>			</table>
>		</td>
>	</tr>
>	</table>
>	
>	
>	
>	
>	<div id="programmenuUserMenu">
>		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
>				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="">About TPS</a></div>
>				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="masquerade.phtml">Masquerade As...</a></div>
>				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="password.phtml">Change Password...</a></div>
>				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="logout.php">Logout</a></div>
>				
>				<hr width="95%" size="1">
>				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="showTPSDialogue('popUp1', selectArray_popUp1);"><a class="programmenuItemLink" href="javascript:showTPSDialogue('popUp1', selectArray_popUp1);">Dialogue 1 Please</a></div>
>				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="showTPSDialogue('popUp2');"><a class="programmenuItemLink" href="javascript:showTPSDialogue('popUp2');">Dialogue 2 Please</a></div>
>				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="showTPSError();"><a class="programmenuItemLink" href="javascript:showTPSError();">Error Please</a></div>
>				
>		</td></tr></table>
>	</div>
>	
>	<div id="programmenuTicketsMenu">
>		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="tickets/">Edit</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="tickets/search.phtml"">Search</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="tickets/approve.phtml">Approve</a></div>
>		</td></tr></table>
>	</div>
>	
>	<div id="programmenuReportsMenu">
>		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="reports/">About Reports</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Invoice Detail...</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Invoice Summary...</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Client Invoice Detail...</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Client Invoice History...</a></div>
>		</td></tr></table>
>	</div>
>	
>	<div id="programmenuSettingsMenu">
>		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/client.phtml">Clients</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/task.phtml">Tasks</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/user.phtml">Users</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/user_preference.phtml">Preferences</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/default_preference.phtml">Defaults</a></div>
>		</td></tr></table>
>	</div>
>	
>	<div id="programmenuBillingMenu">
>		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="billing/">Start Billing...</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Print All Invoices</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="billing/mark.php">Mark Invoices Billed</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="billing/end.php">End Billing</a></div>
>			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="billing/cancel.php">Cancel Billing</a></div>
>		</td></tr></table>
>	</div>
>	
>	
></div>
>
>
><div id="bodyLayer">
>	All this text and the iFrame are daughtered to a div with z-index: 20;<br>
>	The menus above are z-index: 30; Go figgure.
>	<iframe src="" name="bodyIFrame" id="bodyIFrame" width="610" height="50" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1">
>		Look Ma! It's alternative content, woo hoo!
>	</iframe>
></div>
>
>
>
><div id="dialogueShield" align="center"><img src="link/graphics/cleardot.gif" width="100%" height="100%" alt="" border="0"></div>
>
>
>
><div id="dialogueLayer">
>
>	
>	<div id="popUp1" style="z-index:5010; position: absolute; top:30px; left:30px; visibility: hidden;">
>		<table border="0" cellspacing="0" cellpadding="5" bgcolor="#eeeeee" style="border:1px solid #666;">
>			<tr>
>				<td>
>					<div>ID: popUp1</div>
>					<a href="javascript:hideTPSDialogue();">click to turn off</a>
>				</td>
>				<td></td>
>				<td>
>					<div>&nbsp;</div>
>					<a href="javascript:showTPSError();">click for error</a>
>				</td>
>			</tr>
>			<tr>
>				<td><div>
>					<select name="select1" class="formSelectDrop" id="popUp1_select1">
>						<option selected>Menu Option</option>
>						<option>Menu Option</option>
>						<option>Menu Option</option>
>						<option>Menu Option</option>
>					</select></div>
>				</td>
>				<td>popUp1</td>
>				<td>
>					<select name="select2" class="formSelectDrop" id="popUp1_select2">
>						<option selected>Menu Option</option>
>						<option>Menu Option</option>
>						<option>Menu Option</option>
>						<option>Menu Option</option>
>					</select>
>				</td>
>			</tr>
>		</table>
>	</div>
>
>	
>	<div id="popUp2" style="z-index:5020; position: absolute; top:30px; left:30px; visibility: hidden;">
>		<table border="0" cellspacing="0" cellpadding="5" bgcolor="#eeeeee" style="border:1px solid #666;">
>			<tr>
>				<td>
>					<div>ID: popUp2</div>
>					<a href="javascript:hideTPSDialogue();">click to turn off</a>
>				</td>
>				<td></td>
>				<td>
>					<div>&nbsp;</div>
>					<a href="javascript:showTPSError();">click for error</a>
>				</td>
>			</tr>
>			<tr>
>				<td>yadda yadda yadda</td>
>				<td>popUp2</td>
>				<td>yadda yadda yadda</td>
>			</tr>
>		</table>
>		<script language="javascript">
>		
>		</script>
>	</div>
>
></div>
>
>
>
>
><div id="errorShield"><img src="link/graphics/cleardot.gif" width="100%" height="100%" alt="" border="0"></div>
>
>
>
><div id="errorLayer">
>
>	
>	<div id="errorMessage">
>		<table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td bgcolor="#cc3333">
>		<table border=0 cellpadding=5 cellspacing=2 width=100%>
>		<tr>
>			<th bgcolor="#ffffff" class="error">Dummy Error.</th>
>		</tr>
>		<tr>
>			<td bgcolor="#ffffff" class="error" style="font-weight: normal; text-align: left;">Can be found and and removed from templates/layout.tpl</td>
>		</tr>
>		</table>
>		</td></tr></table>
>		<a href="javascript:hideTPSError();">Close</a>
>	</div>
>	
>
></div>
>
>
>
></body>
></html>

<html>
<head>
<!-- ************************************************************************************ -->
<!-- || Copyright 2001, Brian Sage, Graphic Design || e-mial: slave2beauty@hotmail.com || -->
<!-- ************************************************************************************ -->

<title>User Preferences</title>
<style type="text/css">
<!--
/* tags */

a
	{
	color: #333;
	text-decoration: none;
	}
a:link, a:visited
	{
	color: #03c;
	text-decoration: none;
	}
a:hover, a:active
	{
	text-decoration: underline;
	}


body, td
	{
	font-family: verdana, arial, geneva, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	
	text-decoration: none;
	text-transformation: none;
	}

th
	{
	font-family: verdana, arial, geneva, sans-serif;
	font-weight: bold;
	}

p
	{
	font-family: verdana, arial, geneva, sans-serif;
	
	line-height: 12pt;
	text-indent: 15pt;
	}

ol, ol li, ol ol, ol ol li, ul, ul li, ul ul, ul ul li
	{
	font-family: verdana, arial, sans-serif;
	font-size: 8 pt;
	font-weight: normal;
	}

ol
	{
	list-style-type: upper-roman;
	padding: 0 em;
	margin-bottom: 0 em;
	}
ul
	{
	padding: 0 em;
	margin-bottom: 0 em;
	}
ol li, ul li
	{
	padding-top: 0.25 em;
	padding-bottom: 0 em;
	}
ol ol
	{
	list-style-type: upper-alpha;
	padding: 0 em;
	}
ul ul
	{
	padding: 0 em;
	}
ol ol li, ul ul li
	{
	padding-top: 0.15 em;
	padding-bottom: 0 em;
	}

/* IDs */

#bodyLayer
	{
	position: relative;
	width: 640px;
	z-index: 20;
	}
#navigationLayer
	{
	position: relative;
	width: 100%;
	z-index: 30;
	}
#dialogueShield
	{
	height: 100%;
	left:0px;
	position: absolute;
	top:0px;
	visibility: hidden;
	width: 100%;
	z-index: 40;
	}
#dialogueLayer
	{
	height:100%;
	left:0px;
	position: absolute;
	top:0px;
	visibility: hidden;
	width:100%;
	z-index: 50;
	}
#errorShield
	{
	height: 100%;
	left:0px;
	position: absolute;
	top:0px;
	visibility: hidden;
	width: 100%;
	z-index: 60;
	}
#errorMessage
	{
	background-color: #fff;
	border: 4px solid #000;
	left:25px;
	padding: 3px;
	position: absolute;
	top:50px;
	visibility: hidden;
	width: 600px;
	z-index: 70;
	}
	
#programmenuUserMenu
	{
	z-index: 3;
	position: absolute;
	visibility: hidden;
	top: 21px;
	left:0px;
	background-color: #d4d0c8;
	border-left: 1px solid #e0e8f8;
	border-top: solid #e0e8f8 1px;
	border-bottom: 1px solid #666;
	border-right: solid #666 1px;
	}
#programmenuTicketsMenu
	{
	z-index: 3;
	position: absolute;
	visibility: hidden;
	top: 21px;
	left:41px;
	background-color: #d4d0c8;
	border-left: 1px solid #e0e8f8;
	border-top: solid #e0e8f8 1px;
	border-bottom: 1px solid #666;
	border-right: solid #666 1px;
	}
#programmenuReportsMenu
	{
	z-index: 3;
	position: absolute;
	visibility: hidden;
	top: 21px;
	left:94px;
	background-color: #d4d0c8;
	border-left: 1px solid #e0e8f8;
	border-top: solid #e0e8f8 1px;
	border-bottom: 1px solid #666;
	border-right: solid #666 1px;
	}
#programmenuSettingsMenu
	{
	z-index: 3;
	position: absolute;
	visibility: hidden;
	top: 21px;
	left:151px;
	background-color: #d4d0c8;
	border-left: 1px solid #e0e8f8;
	border-top: solid #e0e8f8 1px;
	border-bottom: 1px solid #666;
	border-right: solid #666 1px;
	}
#programmenuBillingMenu
	{
	z-index: 3;
	position: absolute;
	visibility: hidden;
	top: 21px;
	left:210px;
	background-color: #d4d0c8;
	border-left: 1px solid #e0e8f8;
	border-top: solid #e0e8f8 1px;
	border-bottom: 1px solid #666;
	border-right: solid #666 1px;
	}


/* classes */
/*
Sizes f, mf, mp, p
Styles Sa (Sans Serif), Se (Serif)
Colors L (Light), M (Medium), D (Dark)
*/
.fSaL, .mfSaL, .mpSaL, .pSaL, .fSaM, .mfSaM, .mpSaM, .pSaM, .fSaD, .mfSaD, .mpSaD, .pSaD
	{
	font-family: verdana, arial, geneva, sans-serif;
	}
.fSeL, .mfSeL, .mpSeL, .pSeL, .fSeM, .mfSeM, .mpSeM, .pSeM, .fSeD, .mfSeD, .mpSeD, .pSeD
	{
	font-family: georgia, palatino, serif;
	}

.fSaL, .mfSaL, .mpSaL, .pSaL, .fSeL, .mfSeL, .mpSeL, .pSeL
	{
	color: #fff;
	}
.fSaM, .mfSaM, .mpSaM, .pSaM, .fSeM, .mfSeM, .mpSeM, .pSeM
	{
	color: #808080;
	}
.fSaD, .mfSaD, .mpSaD, .pSaD, .fSeD, .mfSeD, .mpSeD, .pSeD
	{
	color: #000;
	}

.fSaL, .fSaM, .fSaD, .fSeL, .fSeM, .fSeD
	{
	font-size: 14pt;
	font-weight: normal;
	}
.mfSaL, .mfSaM, .mfSaD, .mfSeL, .mfSeM, .mfSeD
	{
	font-size: 12pt;
	font-weight: normal;
	}
.mpSaL, .mpSaM, .mpSaD, .mpSeL, .mpSeM, .mpSeD
	{
	font-size: 10pt;
	font-weight: normal;
	}
.pSaL, .pSaM, .pSaD, .pSeL, .pSeM, .pSeD
	{
	font-size: 8pt;
	font-weight: normal;
	}

/* links for color sets */
.fSaL a, .fSeL a, .mfSaL a, .mfSeL a, .mpSaL a, .mpSeL a, .pSaL a, .pSeL a
	{
	color: #ffe;
	}
.fSaL a:link, .fSaL a:visited, .fSaL a:hover, .fSaL a:active, .fSeL a:link, .fSeL a:visited, .fSeL a:hover, .fSeL a:active,
.mfSaL a:link, .mfSaL a:visited, .mfSaL a:hover, .mfSaL a:active, .mfSeL a:link, .mfSeL a:visited, .mfSeL a:hover, .mfSeL a:active,
.mpSaL a:link, .mpSaL a:visited, .mpSaL a:hover, .mpSaL a:active, .mpSeL a:link, .mpSeL a:visited, .mpSeL a:hover, .mpSeL a:active,
.pSaL a:link, .pSaL a:visited, .pSaL a:hover, .pSaL a:active, .pSeL a:link, .pSeL a:visited, .pSeL a:hover, .pSeL a:active
	{
	color: #ffc;
	}

/* special classes */
.delete 
	{
	color: #c33;
	font-size: 8pt;
	font-family: arial, geneva, sans-serif;
	text-transform: uppercase;
	}
.delete a:link, .delete a:visited, .delete a:hover, .delete a:active
	{
	color: #c33;
	text-decoration: none;
	}

.error
	{
	color: #c33;
	
	font-family: verdana, arial, geneva, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
	}

.info 
	{
	color: #333;
	font-size: 8pt;
	font-family: arial, geneva, sans-serif;
	text-transform: uppercase;
	}
.info a:link, .info a:visited, .info a:hover, .info a:active
	{
	color: #333;
	text-decoration: none;
	}

.required
	{
	color: #c33;
	}

.spacer
	{
	line-height: 10px;
	}

.textinput
	{
	color: #000;
	font-family: verdana, arial, geneva, sans-serif;
	font-size: 9pt;
	font-weight: normal;
	
	background-color: #ddd;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	}
.noinput
	{
	color: #000;
	font-family: verdana, arial, geneva, sans-serif;
	font-size: 9pt;
	font-weight: normal;
	
	background-color: #fff;
	border-top: 0px solid #fff;
	border-left: 0px solid #fff;
	border-right: 0px solid #fff;
	border-bottom: 0px solid #fff;
	}
.button
	{
	color: #fff;
	font-family: verdana, arial, geneva, sans-serif;
	font-size: 9pt;
	font-weight: normal;
	
	background-color: #666;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}

.programmenu
	{
	background-color: #d4d0c8;
	border-left: 1px solid #e0e8f8;
	border-top: solid #e0e8f8 1px;
	border-bottom: 1px solid #666;
	border-right: solid #666 1px;
	}
.programmenuTitleBlock
	{
	background-color: #d4d0c8;
	border: solid #d4d0c8 1px;
	padding: 2px;
	padding-left:5px;
	padding-right:5px;
	}
.programmenuTitleLink
	{
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	}
	a.programmenuTitleLink, a.programmenuTitleLink:link, a.programmenuTitleLink:visited, a.programmenuTitleLink:hover, a.programmenuTitleLink:visited:hover, a.programmenuTitleLink:active
		{
		color: #000;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
		}

.programmenuButtonBlock
	{
	background-color: #d4d0c8;
	border: solid #d4d0c8 1px;
	padding: 1px;
	padding-left:5px;
	padding-right:5px;
	}
.programmenuButton
	{
	background-color: #d4d0c8;
	border: solid #d4d0c8 1px;
	padding: 2px;
	padding-left:5px;
	padding-right:5px;
	}
.programmenuButtonLink
	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #000;
	}
	a.programmenuButtonLink, a.programmenuButtonLink:link, a.programmenuButtonLink:visited, a.programmenuButtonLink:hover, a.programmenuButtonLink:visited:hover, a.programmenuButtonLink:active
	{
	color: #000;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	}

.programmenuItemBlock
	{
	background-color: #d4d0c8;
	border: solid #d4d0c8 1px;
	padding-top: 1px;
	padding-bottom: 2px;
	padding-left: 15px;
	padding-right: 30px;
	}
.programmenuItemLink
	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #000;
	}
	a.programmenuItemLink, a.programmenuItemLink:link, a.programmenuItemLink:visited, a.programmenuItemLink:hover, a.programmenuItemLink:visited:hover, a.programmenuItemLink:active
		{
		color: #000;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
		}
-->
</style>
<script language="javascript">
	function updateSelect(primarySelect, secSelect, secDefaultValue, sec, secCount, maxSecCount, nullText)
		{
		var x, i;
		var primaryValue = primarySelect.options[primarySelect.selectedIndex].value;
		
		secSelect.length = maxSecCount + 1;
		
		if(maxSecCount)
			{
			for(i = 0; i < secCount[primaryValue]; i++)
				{
				x = i + 1;
				secSelect.options[x].value = sec[primaryValue][i][0];
				secSelect.options[x].text = sec[primaryValue][i][1];
				if(sec[primaryValue][i][0] == secDefaultValue) secSelect.options[x].selected = true;
				}
			
			secSelect.length = secCount[primaryValue] + 1;
			if(!secDefaultValue) secSelect.selectedIndex = 0;
			if(secSelect.length > 1)
				{
				secSelect.options[0].text = '-- select one... --';
				}
			else
				{
				if(primarySelect.selectedIndex == 0)
					{
					secSelect.options[0].text = '-- ' + nullText + ' --';
					}
				else
					{
					secSelect.options[0].text = '-- none available --';
					}
				}
			}
		else
			{
			secSelect.length = 1;
			secSelect.selectedIndex = 0;
			}
		}
	
	
	
	/* General Navigation Functions */
	
	// Title: Real Browser Detect Script
	IF_NS4 = (document.layers) ? true : false;         // netscape 4
	IF_IE4 = (document.all) ? true : false;            // ie4+
	IF_DOM = (document.getElementById) ? true : false; // ns6 etc.
	
	// Title: Real DOM Detect Script. Detect the difference between the DOM browsers returning DOM_IE or DOM_NS
	// Requires: Real Browser Detect Script
	DOM_IE = false;  // Internet Explorer5+
	DOM_NS = false;  // Netscape6+
	DOMBrowserVersion = null;
	
	if (IF_DOM) {
		var ua, s, i;
	  ua = navigator.userAgent;
	  s = 'MSIE';
	  if ((i = ua.indexOf(s)) >= 0) {
	    DOM_IE = true;
	    DOMBrowserVersion = parseFloat(ua.substr(i + s.length));
	  };
	  s = 'Mozilla/';
		if ((i = ua.indexOf(s)) >= 0) {
	    DOM_NS = true;
	    DOMBrowserVersion = parseFloat(ua.substr(i + s.length));
	  };
	};
	
	
	// Title: Program Menu maker. Makes a styled element behave like a Wondow program (File, Edit, etc...) menu.
	// Usage: onMouseOver="programmenuOver('ElementID')" onMouseOut="programmenuOver('ElementID')" onClick="programmenuClick('ElementID')"
	// Requires: Real Browser Detect Script, Program Menu State Change, Appropriately named styles, Appropriately named styles, 
	var programmenuClick_yesNo, whatItWas;
	
	function programmenuOver (whatItIs) {
		if (whatItIs && IF_DOM) {
			if ((programmenuClick_yesNo == 1) && (whatItIs == whatItWas)) {
				return true;
			} else if ((programmenuClick_yesNo == 1) && (whatItIs != whatItWas)) {
				programmenuClick(whatItIs);
			} else {
				programmenuState(whatItIs + 'Title','over');
			};
		} else if (whatItIs && IF_NS4) {
			if (programmenuClick_yesNo == 1) showHide(whatItWas + 'Menu','hide');
			if (activeSelectArray.length) showHideIdArray('hide', activeSelectArray);
			showHide(whatItIs + 'Menu','show');
			whatItWas = whatItIs;
			programmenuClick_yesNo = 1;
		} else {
			return false;
		};
	};
	
	function programmenuOut(whatItIs){
		if (whatItIs && IF_DOM) {
			if ((programmenuClick_yesNo == 1) && (whatItIs == whatItWas)){
				return true;
			} else {
				programmenuState(whatItIs + 'Title','off');
				if (activeSelectArray.length) showHideIdArray('show', activeSelectArray);
				showHide(whatItIs + 'Menu','hide');
			};
		} else if (whatItIs && IF_NS4) {
			whatItWas = whatItIs;
		} else {
			return false;
		};
	};
	
	function programmenuClick(whatItIs){
		if (whatItIs && IF_DOM) {
			if (whatItWas && (programmenuClick_yesNo == 1) && (whatItIs != whatItWas)){
				programmenuState(whatItWas + 'Title','off');
				showHide(whatItWas + 'Menu','hide');
			};
			if (whatItWas && (programmenuClick_yesNo == 1) && (whatItIs == whatItWas)){
				programmenuClick_yesNo = 0;
				programmenuState(whatItWas + 'Title','over');
				if (activeSelectArray.length) showHideIdArray('show', activeSelectArray);
				showHide(whatItIs + 'Menu','hide');
			} else {
			whatItWas = whatItIs;
			programmenuClick_yesNo = 1;
			programmenuState(whatItIs + 'Title','down');
			if (activeSelectArray.length) showHideIdArray('hide', activeSelectArray);
			showHide(whatItIs + 'Menu','show');
			};
		} else if (whatItIs && IF_NS4 && (programmenuClick_yesNo == 1)) {
			if (activeSelectArray.length) showHideIdArray('hide', activeSelectArray);
			showHide(whatItIs + 'Menu','hide');
			programmenuClick_yesNo = 0;
		} else if (whatItIs && IF_NS4 && (programmenuClick_yesNo == 0)) {
			if (activeSelectArray.length) showHideIdArray('hide', activeSelectArray);
			showHide(whatItIs + 'Menu','show');
			programmenuClick_yesNo = 1;
		} else {
			return false;
		};
	};
	
	
	// Capture mouse clicks on the page so any active button can be deactivated.
	// Usage: Just leave it be, boy!
	// Requires: Real Browser Detect Script, Real DOM Detect Script, appropriately named styles, modifications for what to do if true.
	if (DOM_IE) {
	  document.onmousedown = pageMousedown;
	} else if (DOM_NS) {
	  document.addEventListener("mousedown", pageMousedown, true);
	};
	
	function pageMousedown(event) {
	  var className;
		if (DOM_IE) {
	    theClassName = window.event.srcElement.className;
		} else if (DOM_NS) {
	    theClassName = (event.target.className ? event.target.className : event.target.parentNode.className);
		};
	  if ((activeDialogue_YesNo == 0) && (programmenuClick_yesNo == 1) && (theClassName != 'programmenu') && (theClassName != 'programmenuTitleBlock') && (theClassName != 'programmenuTitleLink') && (theClassName != 'programmenuItemLink') && (theClassName != 'programmenuItemBlock')) {
	    programmenuState(whatItWas + 'Title', 'off');
			showHideIdArray('show', activeSelectArray);
			showHide(whatItWas + 'Menu','hide');
			programmenuClick_yesNo = 0;
		};
	};
	
	// Title: Program Menu State Change. Changes the visual apearance of a Windows-looking menu button to "over", "down", or "off" depending on input.
	// Usage: onMouseEvent="programmenuState('ElementID', 'over|down|off')"
	// Requires: Real Browser Detect Script
	function programmenuState (whatItIs, theState){
		if (whatItIs && theState && IF_DOM) {
			var theColor1, theColor2;
			if (theState == 'over') {
				theColor1 = '#e0e8f8';
				theColor2 = '#999';
			}else if (theState == 'down') {
				theColor1 = '#999';
				theColor2 = '#e0e8f8';
			}else if (theState == 'off') {
				theColor1 = '#d4d0c8';
				theColor2 = '#d4d0c8';
			};
			whatItIs_DOM = document.getElementById(whatItIs);
			whatItIs_DOM.style.borderLeft = 'solid '+ theColor1 +' 1px';
			whatItIs_DOM.style.borderTop = 'solid '+ theColor1 +' 1px';
			whatItIs_DOM.style.borderRight = 'solid '+ theColor2 +' 1px';
			whatItIs_DOM.style.borderBottom = 'solid '+ theColor2 +' 1px';
		} else {
			return false;
		};
	};
	
	
	// Title: Show/Hide element. Switches visibility of the specied element.
	// Usage: onMouseEvent="showHide('Element ID','Optional hide|show');"
	// Requires: Real Browser Detect Script
	function showHide(elemID, doThis) {
		if (IF_DOM) {
			e = document.getElementById(elemID);
			if (doThis=='hide') { e.style.visibility = 'hidden';
			} else if (doThis == 'show') { e.style.visibility='visible';
			} else {		
				if (e.style.visibility == 'visible') { e.style.visibility = 'hidden';
				} else if (e.style.visibility == 'hidden') { e.style.visibility='visible';
				};
			};
		} else if (IF_IE4) {
			e=document.all[elemID];
			if (doThis=='hide') {e.style.visibility='hidden';
			} else if (doThis=='show') {e.style.visibility='visible';
			} else {		
				if (e.style.visibility=='visible') {e.style.visibility='hidden';
				} else if (e.style.visibility=='hidden') {e.style.visibility='visible';
				};
			};
		} else if (IF_NS4 && elemID) {
			var e = document.layers[elemID];
			if (doThis=='hide') {
				e.visibility='hide';
			} else if (doThis=='show') {
				e.visibility='show';
			} else {		
				if (e.visibility=='show') {
					e.visibility='hide';
				} else if (e.visibility=='hide') {
					e.visibility='show';
				};
			};
		};
	};
	
	
	// Title: Show/Hide TPS dialogue div/layer. Switches visibility of the specied dialogue div/layer, and sets a few global
	//   variables to make the menu system act right. hideTPSDialogue() needs no arguments to work properly.
	/*
		Usage: onMouseEvent="showTPSDialogue( which Dialogue ID ex: 'popUp1', New activeSelectArray variable name ex: selectArray_popUp1 );" onMouseEvent="hideTPSDialogue();"
	
		// include these page select arrays to specify which menu select should be hidden/shown onMouseEvent
		var selectArray_page = new Array('select1','select2','select3','select4');  // required array. Allowed to have no value.
		var selectArray_popUp1 = new Array('popUp1_selectName1','popUp1_selectName2'); // naming conventions are not important. Just make it easy to remember in conjunction with div IDs
		var selectArray_popUp2 = new Array('popUp2_selectName1','popUp2_selectName2');
		var selectArray_popUp3 = new Array('popUp3_selectName1','popUp3_selectName2');
	
		var activeSelectArray = selectArray_page;  // required var. Allowed to have no value.
	*/
	// Requires: Real Browser Detect Script, Show/Hide Element ID Array
	var activeDialogueId;
	var selectArray_page = new Array();
	var activeSelectArray = selectArray_page;
	var activeDialogue_YesNo = 0;
	
	function showTPSDialogue(whichDialogueId, whichSelectArray) {
		if (IF_DOM && (activeDialogue_YesNo == 0) && whichDialogueId) {  // is there no Dialogue Box open? Then open whichDialogueId
			if (programmenuClick_yesNo == 1) {  // if a menu is open, close it. Requies: Program Menu maker
				programmenuClick_yesNo = 0;
				programmenuState(whatItWas+ 'Title','off');
				showHide(whatItWas+ 'Menu','hide');
			};
			if (whichSelectArray) showHideIdArray('hide', selectArray_page);  // hide the page array of document select fields
			document.getElementById(whichDialogueId).style.visibility = 'visible';  // open the appropriate Dialogue Box
			document.getElementById('dialogueShield').style.visibility = 'visible';
			activeDialogue_YesNo = 1; // tell the document the box is visible
			activeDialogueId = whichDialogueId;
			if (whichSelectArray) activeSelectArray = whichSelectArray;
		};
	};
	
	function hideTPSDialogue() {
		if (IF_DOM && (activeDialogue_YesNo == 1)) {  // is there a Dialogue Box open? Then close activeDialogueId.
			if (programmenuClick_yesNo == 1) {  // if a menu is open, close it. Requies: Program Menu maker
				programmenuClick_yesNo = 0;
				programmenuState(whatItWas+ 'Title','off');
				showHide(whatItWas+ 'Menu','hide');
			};
			document.getElementById(activeDialogueId).style.visibility = 'hidden'; // close the appropriate Dialogue Box
			document.getElementById('dialogueShield').style.visibility = 'hidden';
			activeDialogue_YesNo = 0; // tell the document the box is hidden
			activeDialogueId = 0;
			activeSelectArray = selectArray_page;
			showHideIdArray('show', selectArray_page); // return visibility to the appropriate array of document select fields
		};
	};
	
	
	// Title: Show/Hide TPS error div/layer. Switches visibility of the specied dialogue div/layer, and sets a few global
	//   variables to make the menu system act right.
	// Usage: onMouseEvent="showTPSError();" onMouseEvent="hideTPSError();"
	// Requires: Real Browser Detect Script, Show/Hide Element ID Array
	var activeError_YesNo = 0;
	
	function showTPSError() {
		if (IF_DOM && activeError_YesNo == 0) {  // is there no error open already?
			if (programmenuClick_yesNo == 1) {  // if a menu is open, close it. Requies: Program Menu maker
				programmenuClick_yesNo = 0;
				programmenuState(whatItWas+ 'Title','off');
				showHide(whatItWas+ 'Menu','hide');
			};
			if (activeSelectArray) showHideIdArray('hide', activeSelectArray);  // hide the array of active select menus
			document.getElementById('errorMessage').style.visibility = 'visible';  // show the error dialogue
			document.getElementById('errorShield').style.visibility = 'visible';
			activeError_YesNo = 1;  // indicate there is an open error
		};
	};
	
	function hideTPSError() {
		if (IF_DOM && activeError_YesNo == 1) {  // is there an error open already?
			if (programmenuClick_yesNo == 1) {  // if a menu is open, close it. Requies: Program Menu maker
				programmenuClick_yesNo = 0;
				programmenuState(whatItWas+ 'Title','off');
				showHide(whatItWas+ 'Menu','hide');
			};
			document.getElementById('errorMessage').style.visibility = 'hidden';  // show the error dialogue
			document.getElementById('errorShield').style.visibility = 'hidden';
			if (activeSelectArray) showHideIdArray('show', activeSelectArray);  // hide the array of active select menus
			activeError_YesNo = 0;  // indicate there is no open error
		};
	};
	
	
	// Title: Show/Hide Element ID Array. Assigns specified visibility to an array of element IDs.
	// Usage: onMouseEvent="showHideFormSelects('hide|show', IdArray)"
	// Required: Real Browser Detect Script, predefined array of element IDs
	function showHideIdArray(doThis, IdArray) {
		if (IF_DOM && doThis && (IdArray.length >= 1)) {
			var i, e, elemID, eState;
			if (doThis == 'hide') eState = 'hidden';
			if (doThis == 'show') eState = 'inherit';
			if ((eState == 'hidden') || (eState == 'visible') || (eState == 'inherit')) {
				for (i=0; i<(IdArray.length); i++) {
					elemID = IdArray[i];
					document.getElementById(elemID).style.visibility = eState;
				};
			} else{
				alert("first showHideIdArray() argument must be either 'show', 'hide', or 'inherit', followed by a variable that is an array.");
			};
		};
	};
	
	
	// Swap this object's background color
	// Usage: onMouseOver="IF_swapThisBGColor(this,'Hex color value');return true;" onMouseOut="IF_unSwapThisBGColor(this);return true;" 
	var ifUnSwapColor;
	function swapThisBGColor(whatItIs,swapColor){
		ifUnSwapColor=whatItIs.style.backgroundColor;
		if (IF_DOM) {whatItIs.style.backgroundColor=swapColor;
		}else if (IF_IE4&&whatItIsem==this) {whatItIs.style.backgroundColor=swapColor;
		};
	};
	function unSwapThisBGColor(whatItIs){
		if (IF_DOM) {whatItIs.style.backgroundColor=ifUnSwapColor;
		}else if (IF_IE4&&whatItIs==this) {whatItIs.style.backgroundColor=ifUnSwapColor;
		};
	};
	
	
	// Redirect to URL.
	// Usage: onMouseEvent="getURL('URL')" 
	function getURL(linkURL){
		if (linkURL) window.location=linkURL;
	};
</script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0033cc" vlink="#0033cc" alink="#0033cc" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onLoad="">

<!-- page -->

<div id="navigationLayer">
	<!-- Navigation Program Menu -->
	<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#d4d0c8" class="programmenu">
	<tr valign="top">
		<td align="left">
			<table border="0" cellspacing="1" cellpadding="0">
			<tr>
				<td><div class="programmenuTitleBlock" id="programmenuUserTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuUser');" onMouseOut="programmenuOut('programmenuUser');" href="javascript:programmenuClick('programmenuUser');">User</a></div></td>
				<td><div class="programmenuTitleBlock" id="programmenuTicketsTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuTickets');" onMouseOut="programmenuOut('programmenuTickets');" href="javascript:programmenuClick('programmenuTickets');">Tickets</a></div></td>
				<td><div class="programmenuTitleBlock" id="programmenuReportsTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuReports');" onMouseOut="programmenuOut('programmenuReports');" href="javascript:programmenuClick('programmenuReports');">Reports</a></div></td>
				<td><div class="programmenuTitleBlock" id="programmenuSettingsTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuSettings');" onMouseOut="programmenuOut('programmenuSettings');" href="javascript:programmenuClick('programmenuSettings');">Settings</a></div></td>
				<td><div class="programmenuTitleBlock" id="programmenuBillingTitle"><a class="programmenuTitleLink" onMouseOver="programmenuOver('programmenuBilling');" onMouseOut="programmenuOut('programmenuBilling');" href="javascript:programmenuClick('programmenuBilling');">Billing</a></div></td>
			</tr>
			</table>
		</td>
		<td align="right">
			<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<div class="programmenuButtonBlock" id="programmenuPrintButton">
						<a class="programmenuButtonLink" onMouseOver="programmenuState('programmenuPrintButton', 'over');" onMouseOut="programmenuState('programmenuPrintButton', 'off');" href="javascript:print();"><nobr><img src="link/graphics/icon_print.gif" width="16" height="16" hspace="0" vspace="0" border="0" align="absmiddle" alt=""> print me</nobr></a>
					</div></td>
				</td>
				<td>
					<div class="programmenuButtonBlock" id="programmenuLogoutButton">
						<a class="programmenuButtonLink" onMouseOver="programmenuState('programmenuLogoutButton', 'over');" onMouseOut="programmenuState('programmenuLogoutButton', 'off');" href="logout.php"><nobr><img src="link/graphics/icon_logout.gif" width="16" height="16" hspace="0" vspace="0" border="0" align="absmiddle" alt=""> logout</nobr></a>
					</div>
				</td>
			</tr>
			</table>
		</td>
	</tr>
	</table>
	<!-- /Navigation Program Menu -->
	
	<!-- Program Menus -->
	
	<div id="programmenuUserMenu">
		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="">About TPS</a></div>
				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="masquerade.phtml">Masquerade As...</a></div>
				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="password.phtml">Change Password...</a></div>
				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="logout.php">Logout</a></div>
				<!-- ******** debugging. Delete if no longer nedded ******** -->
				<hr width="95%" size="1">
				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="showTPSDialogue('popUp1', selectArray_popUp1);"><a class="programmenuItemLink" href="javascript:showTPSDialogue('popUp1', selectArray_popUp1);">Dialogue 1 Please</a></div>
				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="showTPSDialogue('popUp2');"><a class="programmenuItemLink" href="javascript:showTPSDialogue('popUp2');">Dialogue 2 Please</a></div>
				<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="showTPSError();"><a class="programmenuItemLink" href="javascript:showTPSError();">Error Please</a></div>
				<!-- ******** /debugging ******** -->
		</td></tr></table>
	</div>
	
	<div id="programmenuTicketsMenu">
		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="tickets/">Edit</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="tickets/search.phtml"">Search</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="tickets/approve.phtml">Approve</a></div>
		</td></tr></table>
	</div>
	
	<div id="programmenuReportsMenu">
		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="reports/">About Reports</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Invoice Detail...</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Invoice Summary...</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Client Invoice Detail...</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Client Invoice History...</a></div>
		</td></tr></table>
	</div>
	
	<div id="programmenuSettingsMenu">
		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/client.phtml">Clients</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/task.phtml">Tasks</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/user.phtml">Users</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/user_preference.phtml">Preferences</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="settings/default_preference.phtml">Defaults</a></div>
		</td></tr></table>
	</div>
	
	<div id="programmenuBillingMenu">
		<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d0c8"><tr><td>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="billing/">Start Billing...</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="#">Print All Invoices</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="billing/mark.php">Mark Invoices Billed</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="billing/end.php">End Billing</a></div>
			<div class="programmenuItemBlock" onMouseOver="swapThisBGColor(this,'#99a');" onMouseOut="unSwapThisBGColor(this);" onClick="getURL(false);"><a class="programmenuItemLink" href="billing/cancel.php">Cancel Billing</a></div>
		</td></tr></table>
	</div>
	
	<!-- /Program Menus -->
</div>


<div id="bodyLayer">
	All this text and the iFrame are daughtered to a div with z-index: 20;<br>
	The menus above are z-index: 30; Go figgure.
	<iframe src="" name="bodyIFrame" id="bodyIFrame" width="610" height="50" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1">
		Look Ma! It's alternative content, woo hoo!
	</iframe>
</div>


<!-- dialogue shield -->
<div id="dialogueShield" align="center"><img src="link/graphics/cleardot.gif" width="100%" height="100%" alt="" border="0"></div>
<!-- /dialogue shield -->

<!-- dialogue layer -->
<div id="dialogueLayer">

	<!-- dialogue example #1: popUp1 -->
	<div id="popUp1" style="z-index:5010; position: absolute; top:30px; left:30px; visibility: hidden;">
		<table border="0" cellspacing="0" cellpadding="5" bgcolor="#eeeeee" style="border:1px solid #666;">
			<tr>
				<td>
					<div>ID: popUp1</div>
					<a href="javascript:hideTPSDialogue();">click to turn off</a>
				</td>
				<td></td>
				<td>
					<div>&nbsp;</div>
					<a href="javascript:showTPSError();">click for error</a>
				</td>
			</tr>
			<tr>
				<td><div>
					<select name="select1" class="formSelectDrop" id="popUp1_select1">
						<option selected>Menu Option</option>
						<option>Menu Option</option>
						<option>Menu Option</option>
						<option>Menu Option</option>
					</select></div>
				</td>
				<td>popUp1</td>
				<td>
					<select name="select2" class="formSelectDrop" id="popUp1_select2">
						<option selected>Menu Option</option>
						<option>Menu Option</option>
						<option>Menu Option</option>
						<option>Menu Option</option>
					</select>
				</td>
			</tr>
		</table>
	</div>

	<!-- dialogue example #2: popUp2 -->
	<div id="popUp2" style="z-index:5020; position: absolute; top:30px; left:30px; visibility: hidden;">
		<table border="0" cellspacing="0" cellpadding="5" bgcolor="#eeeeee" style="border:1px solid #666;">
			<tr>
				<td>
					<div>ID: popUp2</div>
					<a href="javascript:hideTPSDialogue();">click to turn off</a>
				</td>
				<td></td>
				<td>
					<div>&nbsp;</div>
					<a href="javascript:showTPSError();">click for error</a>
				</td>
			</tr>
			<tr>
				<td>yadda yadda yadda</td>
				<td>popUp2</td>
				<td>yadda yadda yadda</td>
			</tr>
		</table>
		<script language="javascript">
		<!--
		// page select arrays to specify which menu select should be hidden/shown onMouseEvent
		var selectArray_popUp1 = new Array('popUp1_select1','popUp1_select2');
		var selectArray_popUp2 = new Array('popUp2_select1','popUp2_select2');
		//-->
		</script>
	</div>

</div>
<!-- /dialogue layer -->


<!-- error shield -->
<div id="errorShield"><img src="link/graphics/cleardot.gif" width="100%" height="100%" alt="" border="0"></div>
<!-- /error shield -->

<!-- error layer -->
<div id="errorLayer">

	<!-- error message -->
	<div id="errorMessage">
		<table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td bgcolor="#cc3333">
		<table border=0 cellpadding=5 cellspacing=2 width=100%>
		<tr>
			<th bgcolor="#ffffff" class="error">Dummy Error.</th>
		</tr>
		<tr>
			<td bgcolor="#ffffff" class="error" style="font-weight: normal; text-align: left;">Can be found and and removed from templates/layout.tpl</td>
		</tr>
		</table>
		</td></tr></table>
		<a href="javascript:hideTPSError();">Close</a>
	</div>
	<!-- /error message -->

</div>
<!-- /error layer -->


</body>
</html>

Actions: View

Attachments on bug 91516: 49641 | 52486 | 53555 | 68262 | 69246 | 69248 | 70019 | 70236 | 70312 | 156854 | 156863 | 234879