/**
 * extraInfoHovers.js
 *
 * Implements a 'hover over' function for extra information that is initially hidden from view.
 * The extra information appears in a 'tooltip' type pop-up when the appropriate element
 * is moused over (or tabbed over).
 * 
 * This function implements unobtrusive javascript, i.e. the javascript is added to the appropriate 
 * elements dynamically, when the page is loaded. If javascript is turned off, then the extra information 
 * is displayed all the time.
 *
 * The container element class (e.g. <li>, <p> ) should be set to 'extraInfoHover'.
 * The 'extra information' that is to be hidden should be wrapped in a span of class 'extraInfo'.
 * The element that the extra information refers to (e.g. checkbox, anchor) should have a class of 'hoverFocus', 
 * and should have a unique id (very important!). See the examples below.
 * The css style rules for the extra information tooltip are contained in the class 'hiddenarea'.
 * 
 * UPDATE 11/01/08 - GJR
 * Now added a 0.5 second delay to the pop-up so that the extra information only appears if the mouse pauses
 * over the element for that time.
 *
 * UPDATE 09/07/08 - MR
 * Fix problem of info being visible briefly when page loads 
 *
 * UPDATE 13/10/08 -AJH
 * Adapted Script to allow items without a corresponding 'ExtraInfo' hover to be displayed without genterateing a JS when hovered over
 *
 * UPDATE 21/10/08 - MR
 * Fix problem of hovers appearing behind select lists (by hiding list)
 *
 *
 * Some examples of usage:
 *
 * <li class="extraInfoHover odd">
 * 	<input type="checkbox" id="pg01" class="hoverFocus">
 * 	<label for="pg01">Accounting and Finance <span class="extraInfo"><strong>Including:</strong><br>more details...</span></label>
 * </li>
 *
 *
 * <p class="extraInfoHover">
 * 	<a href="test.htm" id="a1" class="hoverFocus">Animal Behaviour and Welfare</a>
 * 	<span class="extraInfo"><strong>Including:</strong><br>more details...</span>
 * </p>
 *
 */

// pre-hide hovers before load
document.write('<style media="screen" type="text/css">.extraInfo {visibility:hidden;position:absolute }</style>') ;


var hoverTogable;

function hideareas() {
		hoverTogable= new togObj('hovertogvis'); //create an instance of the togVis for tod

		// get all the extraInfoHover (container) elements in the document and loop through them
		var extraInfoHovers = getElements("extraInfoHover");
		for(i=0; i<extraInfoHovers.length; i++) {
	
			// get the current extraInfoHover
			var thisExtraInfoHover = extraInfoHovers[i];

			// Get the hoverFocus element within the extraInfoHover
			var extraInfo_Id = "";   // the unique id of the hoverFocus element
			var hoverFocusArray = getElements("hoverFocus", "", thisExtraInfoHover);

			// should only find 1 element, so just work on the first one found (if it exists)
			if(hoverFocusArray.length==1) {
				var theHoverFocus = hoverFocusArray[0];
				// assign an id to the extra information span, based on the hoverFocus element id
				extraInfo_Id = "extraInfo_" + theHoverFocus.id;

				// add onfocus and onblur functions to the hoverFocus element
				theHoverFocus.onfocus=new Function("show('"+ extraInfo_Id +"')");
				theHoverFocus.onblur=new Function("hide('"+ extraInfo_Id +"')");
			}
			

			// Get the extraInfo element within the extraInfoHover
			var extraInfoArray = getElements("extraInfo", "span", thisExtraInfoHover);

			// should only find 1 element, so just work on the first one found (if it exists)
			if(extraInfoArray.length==1) {
				var theExtraInfo = extraInfoArray[0];

				// set the id of the extra information span and hide it
				theExtraInfo.setAttribute('id', extraInfo_Id);
				//theExtraInfo.className="hiddenarea";
				addClass(theExtraInfo, "hiddenarea");
				theExtraInfo.style.visibility = 'hidden';
				theExtraInfo.showHidden = false;

			}

			// finally, add mouseover and mouseout functions to the entire extraInfoHover element
			thisExtraInfoHover.onmouseover=new Function("show('"+ extraInfo_Id +"')");
			thisExtraInfoHover.onmouseout=new Function("hide('"+ extraInfo_Id +"')");
		}

	}


/**
 * show(Elemid)
 *
 * Shows an element that has been previously 'hidden'.
 * Sets the style.visibility attribute to be 'visible'.
 */
function show(ElemId)
	{
	var element;
	if(typeof ElemId == "string") {
		element = document.getElementById(ElemId);  // element id
	}
	if (element){  //check to see if we have found an element - needed beacuse some list items do not have a corresponding hover element
		// hide any other 'extraInfo' elements that might be showing,
		// before showing this element.
		var extraInfoArray = getElements("extraInfo", "span", "");
		for(extraInfoCount=0; extraInfoCount<extraInfoArray.length; extraInfoCount++) {
			var thisExtraInfo = extraInfoArray[extraInfoCount];
			thisExtraInfo.style.visibility = 'hidden';
			// set showHidden to be false.
			thisExtraInfo.showHidden = false;
		}

		// Now set a timer to show the element after a set period of time
		// When time runs out, only show the element if the focus if still on the element (i.e showHidden == true)
		var theElement = document.getElementById(ElemId);
		theElement.showHidden = true;

		var timerId;
		var timerId = setTimeout(function() 
			{
			// if focus is still on element when time out occurs, set visibility to visible
			if(theElement.showHidden==true) {
				theElement.style.visibility = 'visible';
				hoverTogable.hideIE(); 
			}
		} ,500);	// timeout is 500 milliseconds (0.5 second).
	}
}


/**
 * hide(Elemid)
 *
 * Hides an element.
 * Sets the style.visibility attribute to be 'hidden'.
 * Also sets showHidden to be false.
 */
function hide(ElemId)
	{
	var element;
	if(typeof ElemId == "string") {
		element = document.getElementById(ElemId);  // element id
	}
	if (element){  //check to see if we have found an element - needed beacuse some list items do not have a corresponding hover element
		element.style.visibility = 'hidden';
		element.showHidden=false;
		hoverTogable.showIE();
	}
	}

// call 'hideareas' when the page is loaded (from 'onLoadController.js'):		
addLoadEvent(hideareas);