/*****************************************************************************************************************
Automatic collapsible list generation script written by Mark Wilton-Jones - 2002
Version 2.1 - updated July 2003 to allow automatic collapsing and classes - fully compatible with original script
******************************************************************************************************************
Please see http://www.howtocreate.co.uk/jslibs/ for details and a demo of this script
Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use
_________________________________________________________________________
You can put as lists on the page as you like, each list may have a different format
To use:
_________________________________________________________________________
Inbetween the tags, put:
_________________________________________________________________________
For best results, all images should be the same height, slightly taller than
the text around them. I would recommend about 21px.
Now, wherever you want the list (not in a layer or positioned element due
to Netscape 4 style bug), put:
classList is defined using:
var classList = [
['classForLevel_0_WithNoChildBranch','classForLevel_0_WithChildBranch'],
['classForLevel_1_WithNoChildBranch','classForLevel_1_WithChildBranch'],
... etc ...
['classForLevel_n_WithNoChildBranch','classForLevel_n_WithChildBranch']
];
*******************************************************************************************************
And here's the actual code
******************************************************************************************************/
window.collapsibleListRef = []; window.imageCache = []; window.autoCloseRef = [];
//iCab can change display, but does not say so, and does notunderstand '' so I use a browser detect
var is_Icab = window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1;
function collapsibleList() {
//hold tree information about the list and the images used
this.treeImg = arguments[0];
this.expdImg = arguments[1];
this.isAutoClose = arguments[2];
this.subClass = arguments[3];
this.sub = [];
}
function sub() {
//hold information about the list item
this.text = arguments[0];
this.expanded = arguments[1];
this.sub = [];
}
//done because WebTV does not understand inline object syntax
function ColLexPdOb(plI,miI) { this.plI = plI; this.miI = miI; this.subs = []; }
function ColLexPdIT(name,expanded) { this.name = name; this.expanded = expanded; }
function createList(listObject,currentExt,imgExt,oLev,oBase) {
if( !currentExt ) {
//create the list, start by defining aditional stuff that is required, counting the lists etc.
window.collapsibleListRef[window.collapsibleListRef.length] = new ColLexPdOb( listObject.expdImg[4], listObject.expdImg[5] );
currentExt = 'treeList_'+( window.collapsibleListRef.length - 1 ); imgExt = ''; oLev = 0; oBase = listObject;
document.write( '' );
oBase.menuUniqueNum = window.collapsibleListRef.length - 1; window.autoCloseRef[oBase.menuUniqueNum] = [];
}
document.write( '' );
for( var x = 0; x < listObject.sub.length; x++ ) {
//for every child object, create their line
document.write(
//the line break on all except the very first line
( ( oLev || x ) ? '\n
' : '' ) +
//what may or may not remain of the trunk
( ( oBase.subClass && oBase.subClass[oLev] && oBase.subClass[oLev][listObject.sub[x].sub.length?1:0] && !( document.layers && navigator.mimeTypes['*'] ) ) ? ( '' ) : '' ) + imgExt +
//this branch
( oLev ? ' ? oBase.treeImg[2] : oBase.treeImg[3] ) + ')
' : '' ) +
//the expand / collapse link or not as the case may be
( listObject.sub[x].sub.length ? '![[+/-]](' + oBase.expdImg[2] + ')
' : '
' ) +
//the text of the branch
''+listObject.sub[x].text + ''+( ( oBase.subClass && oBase.subClass[oLev] && oBase.subClass[oLev][listObject.sub[x].sub.length?1:0] && !( document.layers && navigator.mimeTypes['*'] ) ) ? '' : '' )
);
if( listObject.sub[x].sub.length ) {
//add the span id to a list so we can easily find it and collapse it later
window.collapsibleListRef[window.collapsibleListRef.length - 1].subs[window.collapsibleListRef[window.collapsibleListRef.length - 1].subs.length] = new ColLexPdIT( currentExt + '_' + x, listObject.sub[x].expanded && !oBase.isAutoClose );
//create children
createList( listObject.sub[x], currentExt + '_' + x, oLev ? ( imgExt + ( ( x < listObject.sub.length - 1 ) ? '
' : '
' ) ) : '', oLev + 1, oBase );
}
}
document.write( '' );
if( !oLev ) {
//end the list and prepare to collapse as soon as the browser lays it out
document.write( '
\n' );
if( document.all || document.getElementById ) { window.setTimeout('prepareForUse('+(window.collapsibleListRef.length-1)+')',100); }
}
}
function expandList(spanName,imgName,plsImg,minImg,oMenu,oLevel,oAutoClose) {
var theSpan = document.getElementById ? document.getElementById(spanName) : document.all ? document.all[spanName] : (new Object());
if( !theSpan ) { return; } if( theSpan.style ) { theSpan = theSpan.style; }
if( typeof( theSpan.display ) == 'undefined' && !is_Icab ) {
//if we could not access the span element or if its display style cannot be changed, say so
window.alert( 'Sorry, your browser cannot collapse or expand these lists\nso the lists will remain constantly expanded.' );
} else {
//if required, collapse back down again
for( var y = window.autoCloseRef[oMenu].length - 1; y >= oLevel; y-- ) {
if( window.autoCloseRef[oMenu][y] && oAutoClose && window.autoCloseRef[oMenu][y][0] != spanName ) {
var theSpan2 = document.getElementById ? document.getElementById(window.autoCloseRef[oMenu][y][0]) : document.all ? document.all[window.autoCloseRef[oMenu][y][0]] : (new Object());
if( theSpan2.style ) { theSpan2 = theSpan2.style; } theSpan2.display = 'none';
document.images[window.autoCloseRef[oMenu][y][1]].src = window.autoCloseRef[oMenu][y][2];
window.autoCloseRef[oMenu][y] = null;
}
}
if( theSpan.display == 'none' ) { window.autoCloseRef[oMenu][oLevel] = [spanName,imgName,plsImg]; }
//expand / collapse the list and change the image
theSpan.display = ( theSpan.display == 'none' ) ? ( is_Icab ? 'inline' : '' ) : 'none';
document.images[imgName].src = theSpan.display ? plsImg : minImg;
}
}
function prepareForUse(listNum) {
if( !window.collapsibleListRef[listNum].subs.length ) { return; } //no branches to collapse
var lastPart = window.collapsibleListRef[listNum].subs[window.collapsibleListRef[listNum].subs.length - 1].name;
lastPart = document.getElementById ? document.getElementById(lastPart) : document.all[lastPart];
//if the page has not loaded enough, try again later
if( !lastPart ) { window.setTimeout('prepareForUse('+listNum+')',100); } else {
//if their browser cannot change the display style, don't try
if( lastPart.style ) { lastPart = lastPart.style; }
if( typeof( lastPart.display ) == 'undefined' && !is_Icab ) { return; }
//cache images for faster changes
window.imageCache[listNum] = [(new Image()),(new Image())];
window.imageCache[listNum][0].src = window.collapsibleListRef[listNum].plI;
window.imageCache[listNum][1].src = window.collapsibleListRef[listNum].miI;
for( var x = 0; x < window.collapsibleListRef[listNum].subs.length; x++ ) {
var lastPart = window.collapsibleListRef[listNum].subs[x];
if( lastPart.expanded ) {
//if they want it expanded by default, just change the image
document.images[lastPart.name + '_img'].src = window.imageCache[listNum][1].src;
} else {
//collapse the branch and change the image
document.images[lastPart.name + '_img'].src = window.imageCache[listNum][0].src;
lastPart = document.getElementById ? document.getElementById(lastPart.name) : document.all[lastPart.name];
if( lastPart.style ) { lastPart = lastPart.style; }
lastPart.display = 'none';
}
}
}
}