// Smart Decision Dynamic Menu v2
// Copyright 2006
//////////////////////////////////


//////////////////////////////////
// look at line 213 for the 
// little mod that stops the
// menu from popping out beyond
// level 2
//////////////////////////////////

var menuLayers = ''; // whole menu
var HIDETIMER = 1000; // time in ms for popouts to hide
var SHOWTIMER = 100; // time in ms for popout menus to appear
var DROP_DOWN_DISPLAY = "none"; // "block"
var POP_START_LEVEL = 100; // level where we want to start pop-outs
var POP_INDENT = 165; // indent for pop-out layers
var POP_VERTICAL_ALIGN = 0; // vertical alignment of pop-out layers
var DROP_INDENT = 20; // indent for drop-down layers
var DROP_VERTICAL_ALIGN = 0; // vertical alignment of drop-down layers
var POP_CELL_HEIGHT = 0; // height of divs in pop-out layer
var OPEN_IMAGE_URL = ""; // must be absolute URL
//var COLLAPSE_IMAGE_URL = ""; // must be absolute URL
//var IMAGE_WIDTH = 12; //in pixels
//var IMAGE_HEIGHT = 12; //in pixels
var IMAGE_FROM_LEFT = 135; // left padding for top level expand / collapse image
var children = Object(); // keeps track of the child layers for each open pop-out layer
var nodes = Object(); // keeps track of the currently-selected nodes in the menus
var t; // timeout
//var url = unescape(location.href); // current page
var url = location.href; // current page
var selectedLayer = ""; // selectedLayer is the lowest level layer whose url is the same as the current page
var selectedChildCount = 0; // leeps a count of the no. children of the selected layer. Needed for setCurrentPage() so it can call showSubDrop() properly

// builds a popout layer
function menuPop(arNames, arUrls, y, childIDPattern, level) {
	level++;
	menuLayers += '<div class="pop" id="'+childIDPattern+'" style="top:' + y + 'px;">';
	for (var i=1;i<=arNames.length;i++) {
		if (arNames[i].sName != null) {
			if (i==1) { // reset positioning of next layer down
				y = POP_VERTICAL_ALIGN;
			}
			layerID = childIDPattern + i;
			
			if (arUrls[i].sURL == url) {
				selectedLayer = layerID;
			}
			if (arNames[i].pChild) {
				
				if (selectedLayer != '') { // if we're on the layer which is also in the address, keep a note of the number of child layers (we need this in setCurrentPage() below!
					selectedChildCount = arNames[i].pChild.length;
				}
				
				childID = layerID + "_";
				menuLayers += '<div style="display:block;" id="'+layerID+'" onMouseOver="showSubPop(\''+layerID+'\', \''+childID+'\', \''+level+'\');" onMouseOut="hideAll();"><a class="popLink" href="'+arUrls[i].sURL+'">'+arNames[i].sName+'</a></div>';
				menuPop(arNames[i].pChild, arUrls[i].pChild, y, childID, level);
			}
			else {
				menuLayers += '<div id="'+layerID+'" onMouseOver="showSubPop(\''+layerID+'\', \'0\', \''+level+'\');"  onMouseOut="hideAll();" ><a class="popLink" href="'+arUrls[i].sURL+'">'+arNames[i].sName+'</a></div>';
			}
			y += POP_CELL_HEIGHT;
		}
	}
	menuLayers += '</div>';
	return menuLayers;
}


// builds non-top-level drop down layers
// ar = section tree
// x = indent used for each level relative the the one higher
// childIDPattern = id of the next layer down
// level = no. levels down
function menuDrop(arNames, arUrls, x, childIDPattern, level) {
	level++;
	for (var i=1;i<=arNames.length;i++) {
		if (arNames[i].sName != null) {
			var layerID = childIDPattern + i; // eg "_1_1" where the parent is "_1"
			var onLayer = false;
			if (arUrls[i].sURL == url) {
				selectedLayer = layerID;
				onLayer = true;
			}
			// has children
			if (arNames[i].pChild) {
				
				if (onLayer) { // if we're on the layer which is also in the address, keep a note of the number of child layers (we need this in setCurrentPage() below!
					selectedChildCount = arNames[i].pChild.length;
				}
				
				childID = layerID + "_"; // eg "_1_1_" where current layer is "_1_1". The child layer would be called "_1_1_" if it's a pop-out, or "_1_1_1" for drop-downs
				
				// if we're at a level where we should start doing pop-outs
				if (level >= POP_START_LEVEL) {
					//menuLayers += '<div class="startPop" style="display:'+DROP_DOWN_DISPLAY+';" id="'+layerID+'"><img id="img_'+layerID+'" src="'+OPEN_IMAGE_URL+'" width="'+IMAGE_WIDTH+'" height="'+IMAGE_HEIGHT+'" style="position:absolute; left:'+IMAGE_FROM_LEFT+'px; float:right; border:0px;" /><span onMouseOver="showSubPop(\''+layerID+'\', \''+childID+'\', \''+level+'\');" onMouseOut="hideAll();"><a class="startPopLink" href="'+ arUrls[i].sURL +'">'+arNames[i].sName+'</a></span>';
					menuLayers += '<div class="startPop" style="display:'+DROP_DOWN_DISPLAY+';" id="'+layerID+'"><span onMouseOver="showSubPop(\''+layerID+'\', \''+childID+'\', \''+level+'\');" onMouseOut="hideAll();"><a class="startPopLink" href="'+ arUrls[i].sURL +'">'+arNames[i].sName+'</a></span>';
					menuPop(arNames[i].pChild, arUrls[i].pChild, POP_VERTICAL_ALIGN, childID, level); // start building popouts
				}
				// keep doing drop-downs
				else {
					//menuLayers += '<div class="dropChild" style="display:'+DROP_DOWN_DISPLAY+';" id="'+layerID+'" onClick="showSubDrop(\''+childID+'\', \''+arNames[i].pChild.length+'\'); swap(\'img_'+layerID+'\');"><img id="img_'+layerID+'" src="'+OPEN_IMAGE_URL+'" width="'+IMAGE_WIDTH+'" height="'+IMAGE_HEIGHT+'" style="position:absolute; left:'+IMAGE_FROM_LEFT+'px; float:right; border:0px; margin-left:-7px;" /><a class="dropChildLink" href="'+arUrls[i].sURL+'">'+arNames[i].sName+'</a>';
					menuLayers += '<div class="dropChild" style="display:'+DROP_DOWN_DISPLAY+';" id="'+layerID+'" onClick="showSubDrop(\''+childID+'\', \''+arNames[i].pChild.length+'\'); swap(\'img_'+layerID+'\');"><a class="dropChildLink" href="'+arUrls[i].sURL+'">'+arNames[i].sName+'</a>';
					menuDrop(arNames[i].pChild, arUrls[i].pChild, x, childID, level); // build drop-downs recursively
				}
				menuLayers += '</div>';
			}
			// no children
			else {
				menuLayers += '<div class="dropNoChild" style="display:'+DROP_DOWN_DISPLAY+';" id="'+layerID+'"><a class="dropNoChildLink" href="'+arUrls[i].sURL+'">'+arNames[i].sName+'</a></div>';
			}
		}
	}
	return menuLayers;
}


// builds the top-levels
// ar = section tree
function buildMenu(arNames, arUrls) {
	var layerID = "";
	var childIDPattern = "";
	for (var i=1;i<=arNames.length;i++) {
		// Add conditions here if you want to hide top level sections
		if (arNames[i].sName != null) {
			layerID = "_"+i; // eg "_1", "_2"
			
			// has children
			if (arNames[i].pChild) {
				childIDPattern = layerID + "_"; // child layer eg "_1_"
				
				if (arUrls[i].sURL == url) {
					selectedLayer = layerID;
					selectedChildCount = arNames[i].pChild.length;
				}
				
				//menuLayers += '<div class="topChild" id="'+layerID+'" onClick="showSubDrop(\''+childIDPattern+'\', \''+arNames[i].pChild.length+'\'); swap(\'img_'+layerID+'\');"><img id="img_'+layerID+'" src="'+OPEN_IMAGE_URL+'" width="'+IMAGE_WIDTH+'" height="'+IMAGE_HEIGHT+'" style="position:absolute; left:'+IMAGE_FROM_LEFT+'px; float:right; border:0px; cursor:pointer;" /><a class="topChildLink" href="'+arUrls[i].sURL+'">'+arNames[i].sName+'</a></div>';
				menuLayers += '<div class="topChild" id="'+layerID+'" onClick="showSubDrop(\''+childIDPattern+'\', \''+arNames[i].pChild.length+'\'); swap(\'img_'+layerID+'\');"><a class="topChildLink" href="'+arUrls[i].sURL+'">'+arNames[i].sName+'</a></div>';
				menuDrop(arNames[i].pChild, arUrls[i].pChild, DROP_INDENT, childIDPattern, 1); // build drop-down layer below this
			}
			// no children
			else {
				menuLayers += '<div class="topNoChild" id="'+layerID+'"><a class="topNoChildLink" href="'+arUrls[i].sURL+'">'+arNames[i].sName+'</a></div>';
			}
		}
	}
	return menuLayers;
}

// used to show drop-down layers
// childIDPattern = layer name skeleton used for all children of this layer
// childLen = number of children
function showSubDrop(childIDPattern, childLen) {
	//for (var i=1;i<=childLen;i++) {
		//childID = childIDPattern + i; // id of each child is based on childIDPattern
		//if (document.getElementById(childID).style.display == 'none') { // show if already hidden
			//document.getElementById(childID).style.display = 'block';
		//}
		//else if (document.getElementById(childID).style.display == 'block') { // hide if already there
			//document.getElementById(childID).style.display = 'none';
		//}
	//}
}


// used to show pop-out layers
// layerID = id of current layer
// childID = id of child layer
// level = level in menu of current layer
function showSubPopMain(layerID, childID, level) {
	if (layerID != nodes[level]) { // current layer isn't in the list of currently-higlighted nodes. Prevents us from unnecessarily reloading part of a menu
		// hide all children of the current level
		if (children[level] != null) {
			for (i=0;i<children[level].length;i++) {
				nodes[level] = 0; // clear all selected nodes at this level
				document.getElementById(children[level][i]).style.display = 'none';
			}
		}
		if (childID != 0) {
			children[level] = new Array(); // clear children at current level
			nodes[level] = layerID; // add current layer to list of selected nodes
			
			// add the new child layer to the list of children of the current layer
			// the child is also added to the children lists for all higher layers
			for (elt in children) {
				if (elt <= level) {
					children[elt].push(childID);
				}
			}
			document.getElementById(childID).style.display = 'block'; // show the child layer
		}
	}
}


// hide all layers because we've moved the mouse outside all layers
function hideAllMain() {
	nodes = new Object();
	for (level in children) {
		for (i=0;i<children[level].length;i++) {
			document.getElementById(children[level][i]).style.display = 'none';
		}
	}
}

// adds delay before calling showSubPopMain
function showSubPop(layerID, childID, level) {
	clearTimeout(t);
	t = setTimeout("showSubPopMain('"+layerID+"', '"+childID+"', '"+level+"')", SHOWTIMER);
}

// adds delay before calling hideAllMain
function hideAll() {
	clearTimeout(t);
	t = setTimeout("hideAllMain()", HIDETIMER);
}


// after the menu has been printed to screen this displays all children of the layer corresponding to the current url
// if there aren't any children then we're at the lowest level so just show the original selected layer
// it also displays all levels higher than the selected layer
function setCurrentPage() {
	//if (selectedLayer != "") {
		
		// display children of current layer
		//if (selectedChildCount > 0) {
			//for (var i=1;i<=selectedChildCount;i++) {
				//childID = selectedLayer + "_" + i; // id of each child is based on childIDPattern
				//document.getElementById(childID).style.display = 'block';
			//}
			//swap('img_'+selectedLayer); // show 'arrow' button for the current layer
		//}
		
		//selectedLayerString = selectedLayer; // selectedLayer is the lowest level layer whose url is the same as the current page
		//while (selectedLayerString.length >= 1) { // keep going through all the parents of the start layer and show them as well as the start layer
			//selectedLayerString = selectedLayerString.substring(0, selectedLayerString.lastIndexOf("_")); // cut off final _1, _2, etc from the layer id
			//for (var i=1;true;i++) { // loop through all other layers at the same level
				//selectedLayerNew = selectedLayerString + "_" + i; // add back _1, _2 etc for each layer
				//if (document.getElementById(selectedLayerNew)/* && the all cunning line!!!->selectedLayerNew.length < "6"*/) { // show each layer, if it exists
					//document.getElementById(selectedLayerNew).style.display = 'block';
				//}
				//else {
					//break;
				//}
			//}
			//swap('img_'+selectedLayerString); // show 'arrow' button for all higher layers
		//}
	//}
}

// swaps indicator images.... put an image (with id) in the html and use onClick="javascript:swap([imgid]);" 
function swap(imgID) {
	var start = document.getElementById(imgID).src.indexOf('/acatalog'); // browser thinks the image url is http://www.blahblah.com/acatalog/image.gif, but we want to check against the image path /acatalog/image.gif
	if (document.getElementById(imgID) && start != -1) {
		if (document.getElementById(imgID).src.substring(start) == COLLAPSE_IMAGE_URL) {
			document.getElementById(imgID).src = OPEN_IMAGE_URL;
		}
		else if (document.getElementById(imgID).src.substring(start) == OPEN_IMAGE_URL) {
			document.getElementById(imgID).src = COLLAPSE_IMAGE_URL;
		}
	}
}

document.write(buildMenu(section_tree_names, section_tree_URLs));
setCurrentPage();