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

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 = 2; // level where we want to start pop-outs
var POP_INDENT = 105; // indent for pop-out layers
var POP_VERTICAL_ALIGN = 1; // vertical alignment of pop-out layers
var DROP_INDENT = 0; // 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 = "http://www.vintagespiritgifts.co.uk/acatalog/vwg_act_menu_open.gif"; // must be absolute URL
var COLLAPSE_IMAGE_URL = "http://www.vintagespiritgifts.co.uk/acatalog/vwg_act_menu_closed.gif"; // must be absolute URL
var IMAGE_WIDTH = 11; //in pixels
var IMAGE_HEIGHT = 11; //in pixels
var IMAGE_FROM_LEFT = 140; // 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

// 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) {
				childID = layerID + "_";
				menuLayers += '<div style="display:block;" id="'+layerID+'" onMouseOver="showSubPop(\''+layerID+'\', \''+childID+'\', \''+level+'\');" onMouseOut="hideAll();"><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;" /><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"
			if (arUrls[i].sURL == url) {
				selectedLayer = layerID;
			}
			// has children
			if (arNames[i].pChild) {
				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>';
					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+'"><a href="'+arUrls[i].sURL+'" class="dropChildLink" onClick="showSubDrop(\''+childID+'\', \''+arNames[i].pChild.length+'\');">'+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 style="display:'+DROP_DOWN_DISPLAY+';" class="dropNoChild" 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 && arNames[i].sName != "WINE" && arNames[i].sName != "CHAMPAGNE" && arNames[i].sName != "PORT" && arNames[i].sName!= "SPIRITS" && arNames[i].sName != "MIXED CASES" && arNames[i].sName != "COGNAC" && arNames[i].sName != "ARMAGNAC" && arNames[i].sName != "WHISKY") {
			layerID = "_"+i; // eg "_1", "_2"
			
			// has children
			if (arNames[i].pChild) {
				childIDPattern = layerID + "_"; // child layer eg "_1_"
							
				if (arUrls[i].sURL == url) {
					selectedLayer = childIDPattern;
				}
				
				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>';
				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 the layer corresponding to the current url
// it also displays all levels higher than it
function setCurrentPage() {
	if (selectedLayer != "") {
		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)) { // show each layer, if it exists
					document.getElementById(selectedLayerNew).style.display = 'block';
				}
				else {
					break;
				}
			}
			swap('img_'+selectedLayerString);
		}
	}
}

// swaps indicator images.... put an image (with id) in the html and use onClick="javascript:swap([imgid]);" 
function swap(imgID) {
	if (document.getElementById(imgID)) {
		if (document.getElementById(imgID).src == COLLAPSE_IMAGE_URL) {
			document.getElementById(imgID).src = OPEN_IMAGE_URL;
		}
		else if (document.getElementById(imgID).src == OPEN_IMAGE_URL) {
			document.getElementById(imgID).src = COLLAPSE_IMAGE_URL;
		}
	}
}

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