/*
 * TODO: Hide menu using accessibility class not display:none, so visible to search engines, screen 
 * readers, remove class and set display:none on initialisation;
 * Configurable iframe shim in case IE6 needs it;
 */

var rbMainMenu = {
	container: null,
	blocks: {
	/*'stair-balustrading': ['Heritage', 'Classic', 'Contemporary', 'Trademark', 'Hallmark'],
	'outdoor': ['Traditional', 'Classic', 'Contemporary', 'Hardwook', 'Deckboards and Joists']*/
},

initialise: function() {
	this.container = document.getElementById('main-menu-panels');
	this.container.className = 'main-menu-panels';

	// Set the dropdown to hide on mouseout
	this.container.onmouseout = this.dropMouseOut;

	// Add events to top level menu items
	var mainMenu = document.getElementById('menu-inner');
	// menu-inner is the containing div, so first get the actual list
	for (var i = 0; i < mainMenu.childNodes.length; i++) {
		if (mainMenu.childNodes[i].nodeType == 1) {
			mainMenu = mainMenu.childNodes[i];
			break;
		}
	}
	for (i = 0; i < mainMenu.childNodes.length; i++) {
		if (mainMenu.childNodes[i].nodeType == 1) {
			for (var j = 0; j < mainMenu.childNodes[i].childNodes.length; j++) {
				if (mainMenu.childNodes[i].childNodes[j].nodeType == 1) {
					// Get the actual link element
					var mLink = mainMenu.childNodes[i].childNodes[j];

					// Find any panels which match this link. Panels are named
					// using the link with a standard prefix (main-menu-panel-)
					// and a suffix of the panel title with white space stripped
					// to make the IDs unique.
					var mLinkUrl = mLink.href.slice(mLink.href.lastIndexOf('/', mLink.href.length - 2) + 1, mLink.href.length - 1);
					var childPanels = new Array();
					for (var k = 0; k < this.container.childNodes.length; k++) {
						if (this.container.childNodes[k].nodeType == 1 && this.container.childNodes[k].id.length > 0) {
							if (mLinkUrl == this.container.childNodes[k].id.slice(16, this.container.childNodes[k].id.lastIndexOf('-'))) {
								childPanels.push(this.container.childNodes[k]);
							}
						}
					}

					// Test to see if link is in blocks array - if it is, no drop needed (but may need to close drop)
					if (childPanels.length > 0) {
						this.blocks[mLinkUrl] = childPanels;

						// Add drop to menu item
						mLink.onmouseover = this.showDrop;
					} else {
						// Menu items which don't have a drop automatically hide it
						mLink.onmouseover = this.hideDrop;
					}
				}
			}
		}
	}
},

showDrop: function(event) {
	var target;
	if (!event) var event = window.event;
	if (event.target) target = event.target;
	else if (event.srcElement) target = event.srcElement;

	while (target.tagName != 'A' && target.parentNode != null)
		target = target.parentNode;

	if (target.tagName == 'A') {
		// Hide the dropdown
		rbMainMenu.container.style.display = 'none';

		// Get URL of calling link and extract block signature
		var mLinkUrl = target.href.slice(target.href.lastIndexOf('/', target.href.length - 2) + 1, target.href.length - 1);

		// Get position of calling link
		var mLinkLoc = rbMainMenu.getLocation(target);
		var mainInner = document.getElementById('main-inner');
		var pageWidth = rbMainMenu.getLocation(mainInner)[0] + mainInner.offsetWidth;

		// Hide all blocks
		for (var i = 0; i < rbMainMenu.container.childNodes.length; i++) {
			if (rbMainMenu.container.childNodes[i].nodeType == 1) {
				rbMainMenu.container.childNodes[i].style.display = 'none';
				// We need to set visibility too, or IE 6 (and 7/8 in compatibility)
				// mode will still render some of the contents...
				rbMainMenu.container.childNodes[i].style.visibility = 'hidden';
			}
		}

		// Show blocks which are relevent to the calling link
		var blockCount = 0;
		if (rbMainMenu.blocks[mLinkUrl] != null) {
			for (i = 0; i < rbMainMenu.blocks[mLinkUrl].length; i++) {
				// Set the colour class
				rbMainMenu.blocks[mLinkUrl][i].className = 'main-menu-panel main-menu-panel-colour' + (i > 4 ? i-(floor((i-1)/5)*5) : i);

				rbMainMenu.blocks[mLinkUrl][i].style.display = 'block';
				// We need to set visibility too, for IE - see above
				rbMainMenu.blocks[mLinkUrl][i].style.visibility = 'visible';
				
				blockCount++;
			}
		}

		// Position the dropdown. If it will fit, left side is directly below
		// the left side of the calling link, else line up right side with right
		// side of page.
		// The 4px offset lines the dropdown up with the divider bar to the left
		// of the menu item rather than the link itself.
		// We can only get the width of the menu once it is displayed, but we don't
		// want it moving while visible to the user, so we make it transparent until
		// it's in its final position.
		rbMainMenu.setDropOpacity(0);
		rbMainMenu.container.style.display = 'block';
		rbMainMenu.container.style.width = (154 * blockCount) + 'px';
		if (rbMainMenu.container.offsetWidth + mLinkLoc[0] - 4 > pageWidth)
			rbMainMenu.container.style.left = (pageWidth - rbMainMenu.container.offsetWidth) + 'px';
		else
			rbMainMenu.container.style.left = (mLinkLoc[0] - 4) + 'px';

		// Make dropdown visible
		rbMainMenu.setDropOpacity(100);
	}
},

hideDrop: function() {
	rbMainMenu.container.style.display = 'none';
},

dropMouseOut: function(event) {
	if (!event) var event = window.event;
	if (rbMainMenu.detectMouseOut(rbMainMenu.container, event)) rbMainMenu.hideDrop();
},

detectMouseOut: function(el, event) {
	if (typeof event.toElement != 'undefined' && typeof el.contains != 'undefined')
		return !el.contains(event.toElement);
	else if (typeof event.relatedTarget != 'undefined' && event.relatedTarget)
		return !rbMainMenu.isChildOf(el, event.relatedTarget);
},

isChildOf: function(parent, child) {
	while (child) {
		if (parent == child) {
			return true;
		}
		child = child.parentNode;
	}
	return false;
},

getLocation: function(object) {
	var x = 0;
	var y = 0;
	if (object.offsetParent) {
		x = object.offsetLeft
		y = object.offsetTop
		while (object = object.offsetParent) {
			x += object.offsetLeft
			y += object.offsetTop
		}
	}
	return [x, y];
},

setDropOpacity: function(opacity) {
	var style = rbMainMenu.container.style;
	style.opacity = (opacity / 100);
	style.MozOpacity = (opacity / 100);
	style.KhtmlOpacity = (opacity / 100);
	style.filter = 'alpha(opacity=' + opacity + ')';
}
}