﻿/*  Simple DL/DT/DD Hover/Popup
 *  Bob Davidson 2006-11-16
 *
 *  Shows hidden DD elements when the "parent" (prior) DL element is hovered
 *  over.  Ignores DLs not immediately followed by DDs.  Ignores text elements
 *  between.
 */


/*                    SETTINGS                              */

/*                    GENERAL FUNCTIONS                     */
function is_class(obj,cn) {
 	return new RegExp('\\b'+cn+'\\b').test(obj.className);
}


/*                    INITIALIZATION / EVENTS               */
function tp_init() {
	if(document.getElementById && document.getElementsByTagName) {
		var dls = document.getElementsByTagName('dl');
		for(var x=dls.length-1; x >= 0; x--)
			if(is_class(dls[x], 'itemlist'))
				tp_init_dl(dls[x]);
	}
}

function tp_init_dl(dl) {
	var x=0;
	var m=dl.childNodes.length;
	while(x<m) {
		var child = dl.childNodes[x];
		// If it's a term
		if(child.nodeName == "DT") {	
			// Skip the term node
			x++;
			
			// Look for next term or definition node.
			while(x<m && dl.childNodes[x].nodeName != "DD" && dl.childNodes[x].nodeName != "DT") {
				// alert(dl.childNodes[x].nodeName);
				x++;
			}
			
			// If we found a definition node, set it up.
			if(x < m && dl.childNodes[x].nodeName == "DD") {
				tp_dt_setup(child, dl.childNodes[x]);
			}
		} else {
			// Skip unknown node
			x++;
		}
	}
}

function tp_dt_setup(dt, dd) {
	dd.className = "hover";
	dd.style.display = "none";
	
	// Move everything into a span.
	// This makes the target area for onmouseover
	// an inline area, rather than a block level 
	// area, so the user actually has to mouse over 
	// text, not just space right of the text, to 
	// see the "popup".  Seems less confusing.
	var span = document.createElement("span");
	while(dt.firstChild != null) {
		span.appendChild(dt.firstChild.cloneNode(true));
		dt.removeChild(dt.firstChild);
	}
	
	// Hook it up.
	span.onmouseover = tp_mover;
	span.onmouseout = tp_mout;
	span.hoverChild = dd;
	dt.appendChild(span);
}

function tp_mover() {
	this.hoverChild.style.display = "block";
}

function tp_mout() {
	this.hoverChild.style.display = "none";
}



// Set up the hovers
tp_init();
