// For each menu you create, you must create a matching "FSMenu" JavaScript object to represent
// it and manage its behaviour. You don't have to edit this script at all if you don't want to;
// these comments are just here for completeness. Also, feel free to paste this script into the
// external .JS file to make including it in your pages easier!
// Here's a menu object to control the above list of menu data:
var listSubMenu = new FSMenu('listSubMenu', true, 'visibility', 'visible', 'hidden');
// The parameters of the FSMenu object are:
//  1) Its own name in quotes.
//  2) Whether this is a nested list menu or not (in this case, true means yes).
//  3) The CSS property name to change when menus are shown and hidden.
//  4) The visible value of that CSS property.
//  5) The hidden value of that CSS property.
//
// Next, here's some optional settings for delays and highlighting:
//  * showDelay is the time (in milliseconds) to display a new child menu.
//  * switchDelay is the time to switch from one child menu to another child menu.
//    Set this higher and point at 2 neighbouring items to see what it does.
//  * hideDelay is the time it takes for a menu to hide after mouseout.
//  * cssLitClass is the CSS classname applied to parent items of active menus.
//  * showOnClick will, suprisingly, set the menus to show on click. Pick one of 3 values:
//    0 = all mouseover, 1 = first level click, sublevels mouseover, 2 = all click.
//listSubMenu.showDelay = 0;
//listSubMenu.switchDelay = 125;
//listSubMenu.hideDelay = 500;
listSubMenu.cssLitClass = 'subhighlighted';
//listSubMenu.showOnClick = 1;
// Now the fun part... animation! This script supports animation plugins you can add to each
// menu object you create. Here's two to get you started. To enable animation, add one or
// more functions to the menuObject.animations array, and set menuObject.animSpeed to the
// desired percentage of animation to be completed per frame.
// Animation functions are called with a reference to the menu element being animated,
// and a counter variable that changes from 0 to 100 depending on the animation progress.
function animClipDown(ref, counter) {
	var cP = Math.pow(Math.sin(Math.PI*counter/200), 0.75);
	ref.style.clip = (counter == 100 ? ((window.opera || navigator.userAgent.indexOf('KHTML')>-1) ? '' : 'rect(auto, auto, auto, auto)') : 'rect(0, '+ref.offsetWidth+'px, '+(ref.offsetHeight*cP)+'px, 0)');
}
function animFade(ref, counter) {
	var f = ref.filters, done = (counter == 200);
	if (f) {
		if (!done && ref.style.filter.indexOf("alpha") == -1) {
			ref.style.filter += ' alpha(opacity='+counter+')';
		} else if (f.length && f.alpha) {
			with (f.alpha) {
				if (done) {
					enabled = false;
				} else {
					opacity = counter;
					enabled = true;
				}
			}
		}
	} else {
		ref.style.opacity = ref.style.MozOpacity=counter/100.1;
	}
}
// I'm applying them both to this menu and setting the speed to 20%. Delete this to disable.
listSubMenu.animations[listSubMenu.animations.length] = animFade;
listSubMenu.animations[listSubMenu.animations.length] = animClipDown;
listSubMenu.animSpeed = 100;
// Finally, on page load you have to activate the menu by calling its 'activateMenu()' method.
// I've provided an "addEvent" method that lets you easily run page events across browsers.
// You pass the activateMenu() function two parameters:
//  (1) The ID of the outermost <ul> list tag containing your menu data.
//  (2) A node containing your submenu popout arrow indicator.
// If none of that made sense, just cut and paste this next bit for each menu you create.
////var arrow = null;
////if (document.createElement && document.documentElement)
////{
//// arrow = document.createElement('span');
//// arrow.appendChild(document.createTextNode('>'));
//// // Feel free to replace the above two lines with these for a small arrow image...
//// //arrow = document.createElement('img');
//// //arrow.src = 'arrow.gif';
//// //arrow.style.borderWidth = '0';
////
//// arrow.className = 'subind';
////}
addEvent(window, 'load', new Function('listSubMenu.activateSubMenu("listSubMenuRoot")'));
// addEvent(window, 'load', new Function('listSubMenu.activateMenu("listMenuRoot", arrow)'));
// You may wish to leave your menu as a visible list initially, then apply its style
// dynamically on activation for better accessibility. Screenreaders and older browsers will
// then see all your menu data, but there will be a 'flicker' of the raw list before the
// page has completely loaded. If you want to do this, remove the CLASS="..." attribute from
// the above outermost UL tag, and uncomment this line:
//addEvent(window, 'load', new Function('getRef("listMenuRoot").className="menulist"'));
// To create more menus, duplicate this section and make sure you rename your
// menu object to something different; also, activate another <ul> list with a
// different ID, of course :). You can have as many menus as you want on a page.