/********************************************************
	Flyout menus using CSS and JavaScript
	Written by John Simons (www.royalbarrel.com)
	Based on code from Jessett.com
	------------------------------------------------------
	
	To Use:
	1. INCLUDE THIS SCRIPT: 
			<script type="text/javascript" src="flyout.js"></script>
	2. CREATE FLYOUT: 
		Use any HTML element as your flyout, e.g. a div or ul
		Set its class to "flyout", give it a unique id, i.e. "current_events"
		Set its mouse events to:
			onmouseover="stopTime();" onmouseout="startTime();"
	3. CREATE TRIGGER: 
		Use an A tag as the trigger (it can contain the flyout or 
		not, and may intersect the flyout or not)
		Set its mouse events to:
			onmouseover="mouseOver('id');" onmouseout="mouseOut('id');" 
		where 'id' is the unique id chosen above
	4. ADD STYLE:
		In your CSS add a general rule for .flyout class
		Per-flyout specific style can use the id for reference, i.e.
			.flyout { width:100px; background-color:blue; }
			.flyout#current_events { top:140px; left:80px; }
			
**********************************************************/

var timerID = 101;
var timerOn = false;
var timecount = 250;

// Turns the layers on and off
function showLayer(layerName){
	document.getElementById(layerName).style.display = "block";	
}
function hideLayer(layerName){
	document.getElementById(layerName).style.display = "none";
}
function hideAll() {
	var flyouts = document.getElementsByTagName("div");
	for (var i = 0; i < flyouts.length; i++) {
		if (flyouts[i].className == "flyout") {
			flyouts[i].style.display = "none";
			flyouts[i].parentNode.style.zIndex = "10";
		}
		if (flyouts[i].className == "flyout2") {
			flyouts[i].style.display = "none";
			flyouts[i].parentNode.style.zIndex = "10";
		}
	}
}
function startTime() {
	  if (timerOn == false) {
			 timerID = setTimeout("hideAll()" , timecount);
			 timerOn = true;
	  }
}
function stopTime() {
	if (timerOn) {
		clearTimeout(timerID);
		timerID = null;
		timerOn = false;
	}
}
function mouseOver(id) {
	hideAll(); 
	showLayer(id); 
	stopTime();
}
function mouseOut(id) {
	startTime();
}