//
// jsULMenu.js
//
// Chris Petersen 2003
// chris_petersen@hotmail.com
//
// Converts trees of UL/OL lists into a standards compliant dynamic menu.
// LI items containing UL/OL items are converted to links that can be clicked on to show/hide the sub/child UL/OL.
// How to use:
//
// 1. Include this script on the page(s) you wish to use it. eg.
// Tip: Place the SCRIPT tag in the BODY as some browsers can produce bugs if it is placed in the HEAD
// 2. Run jsULMenuInit() when the page has loaded. eg.
// 3. Create a tree of UL or OL lists and ensure the top UL/OL class is set to jsULMenu.
// eg.
//
// 4. Try it.
// Important options:
//
// 1. Clickable LI elements have their class name swapped between "categoryon" and "categoryoff".
// 2. The first text/tag in a clickable LI item is converted to a link and it's class name is swapped between "itemon" and "itemoff".
// Handy tips:
//
// 1. If you are going to set the CSS "list-style-image" property for the "categoryon" and "categoryoff" classes, preload these images to speed the page up and avoid wierd bugs in Mozilla.
// eg. 
//
// 2. Only the first tag/text after an LI is converted to a link. If this is not what you want, wrap the text/tags in a SPAN tag.
// eg. First part
Second part
// ...
//
// 3. Multiple jsULMenu's can be used per page.
//
// 4. Learn how to use CSS properly before you complain.
// eg.
// .mystyle1 .jsULMenu .categoryon { ... }
// .mystyle2 .jsULMenu .categoryon { ... }
jsULMenuLIOnClassName = "categoryon";
jsULMenuLIOffClassName = "categoryoff";
jsULMenuLITextOnClassName = "itemon";
jsULMenuLITextOffClassName = "itemoff";
jsULMenuClassName = "jsULMenu";
jsULMenuIDName = "jsULMenuItem";
function jsULMenuSetCategoryClass( obj, classname ) {
objParent = obj.parentNode;
while (objParent.tagName != "LI") objParent = objParent.parentNode;
objParent.className = classname;
}
function jsULMenuclickChildVisibility( obj, name ) {
var objOL;
objOL = document.getElementById( name );
if ( objOL.jsULMenuDisplay ) {
jsULMenuSetCategoryClass( obj, jsULMenuLIOffClassName );
objOL.jsULMenuDisplay = false;
obj.className = jsULMenuLITextOffClassName;
objOL.style.display = "none";
} else {
objOL.jsULMenuDisplay = true;
jsULMenuSetCategoryClass( obj, jsULMenuLIOnClassName );
obj.className = jsULMenuLITextOnClassName;
objOL.style.display = "block";
}
return false;
}
function jsULMenucreateMenuHTML( obj, depth ) {
var objPrev;
var objOL;
var nChildCount;
var objChilds;
objChilds = (obj.childNodes);
for ( nChildCount = 0; nChildCount < objChilds.length ; nChildCount++ ) {
objOL = objChilds[nChildCount];
if ( (objOL.tagName == "UL") || (objOL.tagName == "OL") ) {
objOL.jsULMenuDisplay = false;
objOL.setAttribute("id", jsULMenuIDName + depth + "-" + nChildCount);
objPrev = objOL.parentNode.firstChild;
jsULMenuSetCategoryClass( objPrev, jsULMenuLIOffClassName );
if (objPrev.nodeType == 3) { // ouch
sOldVal = objPrev.nodeValue;
objNew = document.createElement("span");
objNew = objPrev.parentNode.insertBefore(objNew, objPrev);
objPrev.parentNode.removeChild(objPrev);
objNew.innerHTML = "" + sOldVal + "";
} else {
objPrev.innerHTML = "" + objPrev.innerHTML + "";
}
objOL.style.display = "none";
}
if (objOL.nodeType==1) jsULMenucreateMenuHTML( objOL, depth + "-" + nChildCount ); // recurse
}
}
function jsULMenuInitP( obj, depth ) {
var objClass;
var nChildCount;
var objChilds;
objChilds = (obj.childNodes);
for ( nChildCount = 0; nChildCount < objChilds.length ; nChildCount++ ) {
objClass = objChilds[nChildCount];
if ( objClass.className == jsULMenuClassName ) jsULMenucreateMenuHTML( objClass, nChildCount );
jsULMenuInitP( objClass, depth + "-" + nChildCount );
}
}
function jsULMenuInit() {
if (document.childNodes) jsULMenuInitP(document, "");
return true;
}