/*Name:Sub Nav Script*/
/*Default:true*/
/*Order:2*/

/* 	
	----------------------------------------------------------------------
	INTIALISE OUR OBJECTS
	This is a good place for using the signals and slots library, but it
	seems a bit to heavy for such a simple script.
	---------------------------------------------------------------------- 
*/
window.onload.actions['subNav'] = initSubNav;
function initSubNav() {
	var dl = document.getElementsByTagName('dl');
	var match = 0;
	for (var i = 0; i < dl.length; ++i) {
		if (dl[i].className == 'subNav') {
			subnav[match] = new definitionNav(dl[i]);
			++match;
		}
	}
}
// Array of our navigation objects
var subnav = new Array();

/* 	
	----------------------------------------------------------------------
	NAVIGATION OBJECT
	This little object does simple show hide of definition elements when
	the user rolls thier mouse over the related definition term. EASY!
	---------------------------------------------------------------------- 
*/
function definitionNav(dl) {
	this.dl = dl;					// The actual list
	this.dt = new Array();		// Array of definition terms
	this.dd = new Array();		// Array of definitions
	this.hover = defHover;		// Method to show the description
	this.clear = defClear;		// Method to hide the description
	// Inialise the object
	this.dt = this.dl.getElementsByTagName('dt');
	this.dd = this.dl.getElementsByTagName('dd');
	// Set up the events
	var parent = this;
	for (var i = 0; i < this.dt.length; ++i) {
		// Attach the hover behaviour
		this.dt[i].onmouseover = function() {
			parent.hover(this);
		}
		// Attach the clear method which hides the item
		this.dt[i].onmouseout = function() {
			parent.clear(this);
		}
	}
	// Hide the definitions & set the left padding
	var padding = 0;
	for (var j = 0; j < this.dd.length; ++j) {
		// Avoid adding padding to the first one
		if (j > 0) {
			this.dd[j].style.paddingLeft =  padding + 'px';
		}
		// calculate the new padding for the next entry
		if (this.dt[j].clientWidth) {
			padding += this.dt[j].clientWidth;
		}
		else {
			padding += this.dt[j].offsetWidth;
		}
		// Hide it
		this.dd[j].style.display = 'none';
		// set the width
		this.dd[j].style.width = 'auto';
	}
}
function defHover(el) {
	for (var i = 0; i < this.dt.length; ++i) {
		if (this.dt[i] == el) {
			this.dd[i].style.display = '';	
		}
	}
}
function defClear(el) {
	for (var i = 0; i < this.dt.length; ++i) {
		if (this.dt[i] == el) {
			this.dd[i].style.display = 'none';	
		}
	}
}