// JavaScript Document

/**
 *	RO namespace object controls the rollovers for the default page's right 
 *  side bar links.
 *
 *	The roll over effects are designed to maintain the correct styling and images
 *	while using the tab key and/or mouse for selecting links. The images within
 *	the link tags receive the 
 *	styling changes and have additional properties to save state...whether the
 *	mouse or the focus (using the tab key) is currently on a particular image.
 *
 *	When using the tab key for page navigation the focus is placed on the enclosing link rather
 *  than the image so the this keyword may refer to the link element or the enclosed
 *  image element depending upon which method is called.
 *
 *	NOTE:  file naming conventions for the rollover images are:
 *		the xhtml image elements src attribute value contains the default image file name
 *		with "_off" suffix; the roll over image has the default image file name 
 *		with "_over" suffix.
 *
 *	NOTE:  link elements title tags are created from the xhtml document image element
 *		alt attribute value.
 * */

RO = new Object();

RO = {
	
	HAPPEN_LNK_ID	: 'happenLnk',
	PREPARE_LNK_ID	: 'preparednessLnk',
	
	
	TBL_LINK_CLASS : 'imgLink',
	OVER_TBL_LINK_CLASS: 'imgLinkOver',
	
	
	SB_LINK_CLASS : 'sideBarLink',
	OVER_SB_LINK_CLASS : 'sideBarLinkOver',
	
	OVER_FILE	: 'over',
	OFF_REGEX	: /off/,
	
	
	// Change the imgElem styling to rolled over
	rolledOver : function(imgElem) {
 
		if (imgElem.className == RO.TBL_LINK_CLASS) { imgElem.className =  RO.OVER_TBL_LINK_CLASS; }
		else if (imgElem.className == RO.SB_LINK_CLASS) { imgElem.className = RO.OVER_SB_LINK_CLASS; }
		imgElem.src = imgElem.overSrc;
	}, // end func rolledOver
		
	
	// Change imgElem styling back to default styling only if
	// the imgElem does not have the tab focus and the mouse
	// is not over the imgElem.
	rolledOut : function(imgElem) {
		if(!imgElem.hasFocus && !imgElem.hasMouse){
			if (imgElem.className == RO.OVER_TBL_LINK_CLASS) imgElem.className =  RO.TBL_LINK_CLASS;
			else if (imgElem.className == RO.OVER_SB_LINK_CLASS) imgElem.className = RO.SB_LINK_CLASS;
			
			imgElem.src = imgElem.offSrc;
		}
	}, //end func rolledOut
	
	
	// Attached to the enclosing link element. Change the enclosed image
	// state then aply styling to the enclosed image.
	focused : function() {
		this.firstChild.hasFocus = true;
		RO.rolledOver(this.firstChild);	
	},
	
	
	// Attached to the enclosing link element. Change the enclosed image
	// state then aply default styling to the enclosed image.
	blurred : function() {
		this.firstChild.hasFocus = false;
		RO.rolledOut(this.firstChild);
	},
	
	
	// Attached to each link image. Change the image's state then
	// apply styling to the image.
	mouseOver : function() {
		this.hasMouse = true;
		RO.rolledOver(this);
		
	},
	
	
	// Attached to each link image. Change the image's state then
	// apply default styling to the image.
	mouseOut : function () {
		this.hasMouse = false;
		RO.rolledOut(this);
	},
	
	
	//Set up the model using the image elements directly from xhtml document.
	//
	//Find each image element, then added properties to those images that have
	//a class attribute value that identifies the image element as a link image.
	init : function() {
		//alert('Hello from RO.init()');
		if (document.getElementsByTagName) {
			
			var captionLink = document.getElementById(RO.PREPARE_LNK_ID);
			captionLink.onmouseover = function(){this.className = 'over';}
			captionLink.onmouseout = function(){this.className = '';}
			captionLink.onfocus = function(){this.className = 'over';};
			captionLink.onblur = function(){this.className = '';};
			
			captionLink = document.getElementById(RO.HAPPEN_LNK_ID);
			captionLink.onmouseover = function(){this.className = 'over';}
			captionLink.onmouseout = function(){this.className = '';}
			captionLink.onfocus = function(){this.className = 'over';};
			captionLink.onblur = function(){this.className = '';};
			
			var images = document.getElementsByTagName('img');
			for (var i = 0; i < images.length; i++){
				if(images[i].className == RO.TBL_LINK_CLASS || images[i].className == RO.SB_LINK_CLASS) {
					images[i].overSrc = images[i].src.replace(RO.OFF_REGEX, RO.OVER_FILE); //use file naming conventions
					images[i].offSrc = images[i].src; //the src attribute value from the xhtml
					images[i].hasFocus = false; //save state
					images[i].hasMouse = false; //save state
					images[i].onmouseover = RO.mouseOver;
					images[i].onmouseout = RO.mouseOut;
					images[i].parentNode.onfocus = RO.focused; //attach to enclosing link tag for using tab key
					images[i].parentNode.onblur = RO.blurred;  //attach to enclosing link tag for using tab key
					images[i].parentNode.title = images[i].alt; //for screen readers
				}		
			}//end for
		}//end if
		//alert('out RO.init found: ' + numimages + ' images.' );
	}//end func init
	
	
	
} //end object RO

 if (window.addEventListener) window.addEventListener('load',  RO.init , false);
 else if(window.attachEvent) window.attachEvent('onload',  RO.init );

//window.onload = RO.init;