/********************************************************
	Flyout menus and rollovers using CSS and JavaScript
	Written by John Simons (www.royalbarrel.com)
	Based on code from Jessett.com and www.bleedingego.co.uk/webdev.php
	------------------------------------------------------
	
	To Use:
	1. INCLUDE THIS SCRIPT: 
			<script type="text/javascript" src="dhtml.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"
	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 class to either "flyout_trigger" or "flyout_trigger_with_rollover"
		and its id to [unique id]_trigger, i.e. "current_events_trigger"
	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; }
			
	5. FOR ROLLOVERS ---
		If you used "flyout_trigger_with_rollover" you simply provide a parallel
		file with the same name appended with "_over", for example
		"home.gif" and "home_over.gif".
		
		Rollovers can also be done directly on <img> tags, independent of
		the flyout system, by setting the image's class to "imgover".
			
**********************************************************/

var timerID = 101;
var timerOn = false;
var timecount = 250;		// Flyout disappearing delay, in milliseconds


function alreadyRolledOver(imagePath) {
	var underscore = imagePath.lastIndexOf('_');
	var dot = imagePath.lastIndexOf('.');
	var addon = "";
	if (underscore >= 0 && dot > underscore) {
		addon = imagePath.substring(underscore + 1, dot);
		if (addon == "over") return true;
		if (addon == "selected") return true;
		if (addon == "down") return true;
	}
	return false;
}

// Turns the layers on and off
function showLayer(layerName){
	document.getElementById(layerName).style.display = "block";
	document.getElementById(layerName).parentNode.style.zIndex = "20";
	trigger = document.getElementById(layerName + "_trigger");
	if (trigger.className == 'flyout_trigger_with_rollover' && !alreadyRolledOver(trigger.childNodes[0].getAttribute('src'))) {
		trigger.childNodes[0].setAttribute('src', trigger.childNodes[0].getAttribute('hsrc'));
	}
}
function hideAll(except) {
	var flyouts = document.getElementsByTagName("div");
	for (var i = 0; i < flyouts.length; i++) {
		if (flyouts[i].className == "flyout" && flyouts[i].id != except) {
			flyouts[i].style.display = "none";
			flyouts[i].parentNode.style.zIndex = "10";
			trigger = document.getElementById(flyouts[i].id + "_trigger");	
			if (trigger.className == 'flyout_trigger_with_rollover') {
				rollover = trigger.childNodes[0];
				src = rollover.getAttribute("src");
				ftype = src.substring(src.lastIndexOf('.'), src.length);
				rollover.setAttribute("src", src.replace("_over" + ftype, ftype));
			}
		}
	}
}
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(id); 
	showLayer(id);
	stopTime();
}
function mouseOut() {
	startTime();
}




function addRollover(image) {
	var src = image.getAttribute('src');
	var ftype = src.substring(src.lastIndexOf('.'), src.length);
	var hsrc = src.replace(ftype, '_over'+ftype);

	image.setAttribute('hsrc', hsrc);
	
	preload = new Image();
	preload.src = hsrc;
	
	image.onmouseover = function() {
		sTempSrc = this.getAttribute('src');
		this.setAttribute('src', this.getAttribute('hsrc'));
	}	
	
	image.onmouseout = function() {
		if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_over'+ftype, ftype);
		this.setAttribute('src', sTempSrc);
	}
}

function initDynamicEffects() {
	if (!document.getElementById) return
	
	var aPreLoad = new Array();
	var tagsToConsider = new Array("img", "input", "a");
	var sTempSrc;
	
	for (var j = 0; j < tagsToConsider.length; j++) {
		var aTags = document.getElementsByTagName(tagsToConsider[j]);
		
		for (var i = 0; i < aTags.length; i++) {		
			if (aTags[i].className == 'imgover' && !alreadyRolledOver(aTags[i].getAttribute('src'))) {
				addRollover(aTags[i]);
			} else if (aTags[i].className.substr(0,14) == 'flyout_trigger') {
				var flyout_id = aTags[i].id.replace("_trigger", "");
				document.getElementById(flyout_id).onmouseover = stopTime;
				document.getElementById(flyout_id).onmouseout = startTime;
				
				// Preload rollover
				if (aTags[i].className == 'flyout_trigger_with_rollover' && !alreadyRolledOver(aTags[i].childNodes[0].getAttribute('src'))) {
					image = aTags[i].childNodes[0];
					var src = image.getAttribute('src');
					var ftype = src.substring(src.lastIndexOf('.'), src.length);
					var hsrc = src.replace(ftype, '_over'+ftype);
					image.setAttribute('hsrc', hsrc);
					aPreLoad[10*j + i] = new Image();
					aPreLoad[10*j + i].src = hsrc;
				}
				aTags[i].onmouseover = function() {
					var flyout_id = this.id.replace("_trigger", "");
					mouseOver(flyout_id); 
				}
				aTags[i].onmouseout = function() { 
					var flyout_id = this.id.replace("_trigger", "");
					mouseOut(flyout_id); 
				}
			}
		}
	}
}



window.onload = initDynamicEffects;