var sfMenu = {
	//menu flags
	RIGHT: 0x1,
	LEFT: 0x2,
	TOP: 0x4,
	BOTTOM: 0x8,
	INLINE: 0x16,

	GC:{
		map:{
			'idx1':{'top':'GC28','sub':'GC30','back':'GC30'},
			'idx2':{'top':'GC32','sub':'GC34','back':'GC34'}
		},
		toHover:{
			'GC28':'GC29','GC30':'GC31','GC32':'GC33','GC34':'GC35',
			'GC29':'GC29','GC31':'GC31','GC33':'GC33','GC35':'GC35'
		},
		toUnhover:{
			'GC29':'GC28','GC31':'GC30','GC33':'GC32','GC35':'GC34',
			'GC28':'GC28','GC30':'GC30','GC32':'GC32','GC34':'GC34'
		}
	},

	id:'',
	type:'',
	className:'',
	root:null,
	currentItem:null,

	//FUNCTION init - initialise UL node as menu
	//
	//PARAM id - String, id of top-level UL node
	//PARAM type - Bitwise Mask, menu positions/type flags (optional)
	//PARAM className - String,  class name of nested UL's (optional)
	//PARAM root - String, id of element to position menus against
	//
	init: function(id, type, className, root, openAtID) {
		if(id)sfMenu.id = id;else id = sfMenu.id;
		if(type)sfMenu.type = type;else type = sfMenu.type;
		if(className)sfMenu.className = className;else className = sfMenu.className;

		var el = document.getElementById(id);

		//set sfMenu root this way only first call needs to set root node
		//and  subsequent will use the same.
		sfMenu.root = (sfMenu.root)? document.getElementById(root): document.body;
		var className = (className)? className: id;

		//no flags so figure out sub-menu orientation
		if(!type || type &~sfMenu.INLINE) {
			if(!type) {
				type |= (sfMenu.getTop(el) > sfMenu.root.scrollHeight/2)? sfMenu.TOP: sfMenu.BOTTOM;
			}
			if(type & ~(sfMenu.LEFT | sfMenu.RIGHT)) {
				type |= (sfMenu.getLeft(el) > sfMenu.root.clientWidth/2)? sfMenu.LEFT: sfMenu.RIGHT;
			}
		}


		//recursive loop for initialising menu's items and sub-menus
		var exec = function(parentEl, type, index, className, par, openAtID) {
			var el = parentEl.firstChild;
			var index = (index)? index: 0;
			//store menu item for grouping with when we hit a sub-menu
			var a = null;
			//store widest node in submenu
			var dnode = null;
			do {
				//found 'LI' (menu_item) (contains an 'A' or 'SPAN' Node and possibly a 'UL' (sub-menu))
				switch (el.nodeName) {
				case 'LI':
					//process children
					var n = exec(el, type, index, className, par, openAtID);
					//record menu item with maximum width
					if(!dnode || dnode && n.innerHTML.length > dnode.innerHTML.length)
						dnode = n;
					break;

				//found 'DIV' (left or right area), so process it's contents
				case 'DIV':
					exec(el, type, index, className, par, openAtID);
					break;

				//found 'A'  or 'SPAN' (either of these are our event recipients)
				case 'A':
				case 'SPAN':
					//only process if it's in the right place
					if(el.parentNode.nodeName == 'LI') {

						//handle mouse over events if menu is floating
						if(type &~sfMenu.INLINE) {
							el.onmouseover = function() {
								sfMenu.hideEvent++;
								sfMenu.hide(sfMenu.hideEvent, this);
								var sfindex = node.item.getAttribute('sfmenu:index');
								var id = node.item.getAttribute('sfmenu:id');
								var nlist = [document.getElementById(sfindex+id), document.getElementById(sfindex+'Left'+id), document.getElementById(sfindex+'Right'+id)];
								for(var i = 0, n = nlist.length; i < n; i++) {
									var cls = nlist[i].getAttribute('sf:object');
									nlist[i].className = sfMenu.GC.toHover[nlist[i].className.split(' ')[0]]+' '+cls.replace('MouseOver', '')+'MouseOver';
								}
							}
							el.onmouseout = function() {
								if(!this.sfMenu) {
									var sfindex = node.item.getAttribute('sfmenu:index');
									var id = node.item.getAttribute('sfmenu:id');
									var nlist = [document.getElementById(sfindex+id), document.getElementById(sfindex+'Left'+id), document.getElementById(sfindex+'Right'+id)];
									for(var i = 0, n = nlist.length; i < n; i++) {
										var cls = nlist[i].getAttribute('sf:object');
										nlist[i].className = sfMenu.GC.toUnhover[nlist[i].className.split(' ')[0]]+' '+nlist[i].className.replace(cls+'MouseOver', cls);
									}
								}
								sfMenu.hideTimer();
							}
						}
						//menu is tree
						else {
							el.onmouseover = function() {
								var sfindex = this.getAttribute('sfmenu:index');
								var id = this.getAttribute('sfmenu:id');
								var nlist = [document.getElementById(sfindex+id), document.getElementById(sfindex+'Left'+id), document.getElementById(sfindex+'Right'+id)];
								for(var i = 0, n = nlist.length; i < n; i++) {
									var cls = nlist[i].getAttribute('sf:object'), classes = nlist[i].className.split(' '), clsGC = sfMenu.GC.toHover[classes[0]];
									delete classes[0];
									classes = classes.join(' ');
									nlist[i].className = clsGC+classes.replace('('+cls+')(MouseOver)?', '$1MouseOver');
								}
								return false;
							}
							el.onmouseout = function() {
								var sfindex = this.getAttribute('sfmenu:index');
								var id = this.getAttribute('sfmenu:id');
								var nlist = [document.getElementById(sfindex+id), document.getElementById(sfindex+'Left'+id), document.getElementById(sfindex+'Right'+id)];
								for(var i = 0, n = nlist.length; i < n; i++) {
									var cls = nlist[i].getAttribute('sf:object'), classes = nlist[i].className.split(' '), clsGC = sfMenu.GC.toUnhover[classes[0]];
									delete classes[0];
									classes = classes.join(' ');
									nlist[i].className = clsGC+classes.replace(cls+'MouseOver', cls);
								}
								return false;
							}
						}

						//'A' only contains textNodes but 'SPAN' contains anything
						if(el.nodeName != 'A')
							exec(el, type, index, className, par, openAtID);

						//store 'A' for grouping with subsequent 'UL'
						a = el;
						a.parentItem = par;
					}

					// Don't show the +- icons if there aren't any children.
					if(el.nodeName == 'SPAN') {
						if((type & sfMenu.INLINE) == sfMenu.INLINE) {
							// For Firefox...
							if (el.nextSibling && el.nextSibling.nodeName == '#text'
							&& (!el.nextSibling.nextSibling || el.nextSibling.nextSibling.nodeName == 'SPAN')) {
								el.childNodes[1].style.backgroundImage = 'none';
							}
							// For IE...
							else if(!el.nextSibling || el.nextSibling.nodeName == 'SPAN') {
								el.childNodes[0].style.backgroundImage = 'none';
							}

							// Make the specified item (and all its parents) visible
							if(openAtID && el.getAttribute('sfmenu:id') == openAtID) {
								sfMenu.currentItem = el;
							}
						}
					}

					break;

				//found 'UL' this means the 'A' or 'SPAN' we just passed has a sub-menu
				case 'UL':
					//assign this 'sub-menu' to the 'A' or 'SPAN'
					a.sfMenu = el;

					//menu is floating type
					if(type &~sfMenu.INLINE) {

						//top-level menu will ignore LEFT and RIGHT if TOP or BOTTOM are set
						if(index == 0) {
							if(type & (sfMenu.TOP | sfMenu.BOTTOM))
								el.style.width = a.offsetWidth + 'px';
							a.sfMenuRoot = true
							a.sfMenuType = (type &(sfMenu.TOP | sfMenu.BOTTOM))? type & ~(sfMenu.LEFT | sfMenu.RIGHT): type;

						//sub-menus use all flags
						} else
							a.sfMenuType = type;

						//give menu item ('LI' for floating) class name, add mouseover events to both menu and menu item
						//current shopfactory is limited, no interface to edit styles for menu items with children
						//a.parentNode.className = 'menuItem';
						a.onmouseover = sfMenu.show;
						el.onmouseover = function() { sfMenu.hideEvent++ };
						el.onmouseout = sfMenu.hideTimer;

					//menu is tree
					} else {
						//give menu item ('A' for tree) class name, add click event to menu item
						//current shopfactory is limited, no interface to edit styles for menu items with children
						a.sfMenuType = type;
						if(tf.isIE6){
							a.style.position = 'relative';
							a.style.display = 'block';
						}
						a.onclick = sfMenu.inlineShow;
						a.onmouseover = function() {
							var sfindex = this.getAttribute('sfmenu:index');
							var id = this.getAttribute('sfmenu:id');
							var nlist = [document.getElementById(sfindex+id), document.getElementById(sfindex+'Left'+id), document.getElementById(sfindex+'Right'+id)];
							for(var i = 0, n = nlist.length; i < n; i++) {
								var cls = nlist[i].getAttribute('sf:object'), classes = nlist[i].className.split(' '), clsGC = sfMenu.GC.toHover[classes[0]];
								delete classes[0];
								classes = classes.join(' ');
								nlist[i].className = clsGC+classes.replace('('+cls+')(MouseOver)?', '$1MouseOver');
							}
							return false;
						}
						a.onmouseout = function() {
							var sfindex = this.getAttribute('sfmenu:index');
							var id = this.getAttribute('sfmenu:id');
							var nlist = [document.getElementById(sfindex+id), document.getElementById(sfindex+'Left'+id), document.getElementById(sfindex+'Right'+id)];
							for(var i = 0, n = nlist.length; i < n; i++) {
								var cls = nlist[i].getAttribute('sf:object'), classes = nlist[i].className.split(' '), clsGC = sfMenu.GC.toUnhover[classes[0]];
								delete classes[0];
								classes = classes.join(' ');
								nlist[i].className = clsGC+classes.replace(cls+'MouseOver', cls);
							}
							return false;
						}
					}

					//set sub-menu classname, hide it if it isn't already hidden, and set z-index
					el.className = className;
					el.style.display = 'none';
					el.style.zIndex = index+1;

					//clear 'A' | 'SPAN' store, set sub-menus widest node
					par = a;
					a = null;
					el.sfNode = exec(el, type, index+1, className, par, openAtID);

					//if floating menu then we move sub-menus ('UL') to document.body
					if(type &~sfMenu.INLINE)
						document.body.appendChild(el);

					break;
				}
			} while((el = el.nextSibling) != null);
			return dnode;
		};


		//start the processing
		el.style.display = 'block';
		exec(el, type, 0, className, null, openAtID);

		// Make the specified item (and all its parents) visible
		if(openAtID && sfMenu.currentItem) {
			var elOpen = sfMenu.currentItem.parentItem;
			if (elOpen)
			{
				do
				{
					var sfindex = elOpen.getAttribute('sfmenu:index');
					var id = elOpen.getAttribute('sfmenu:id');
					var left = document.getElementById(sfindex+'Left'+id);
					left.className = left.className.replace(' opened', '')+' opened';
					elOpen.sfMenu.style.visibility = 'visible';
					elOpen.sfMenu.style.display = 'block';
				} while ((elOpen = elOpen.parentItem) != null);
			}

			if (sfMenu.currentItem.sfMenu) sfMenu.inlineShow(null, -1, -1, sfMenu.currentItem);
		}
	},

	//returns the node that holds menu items text (incase of nested )
	getTextNode: function(el) {
		var el = el.firstChild;
		do {
			if(el.nodeName == 'A') break;
			else if(el.nodeName == 'DIV' || el.nodeName == 'SPAN') {
				el = sfMenu.getTextNode(el);
				break;
			}
		} while((el = el.nextSibling) != null);
		return el;
	},

	//position functions
	getLeft: function(el) {
		var left = 0;
		do left += el.offsetLeft;
		while((el = el.offsetParent) != null);
		return left;
	},
	getTop: function(el) {
		var top = 0;
		do top += el.offsetTop;
		while((el = el.offsetParent) != null);
		return top;
	},

	//current menu position stack
	current: new Array(),

	//event id so for hideTimer
	hideEvent: 0,

	//calls hide after a set time, so users don't get frustrated when they move
	//the cursor away from the menus for a brief second and have them disappear
	hideTimer: function() {
		window.setTimeout('sfMenu.hide('+(++sfMenu.hideEvent)+')', 500);
	},


	//the show function for inline menu types
	inlineShow: function(caller, x, y, _el) {
		var el = _el || caller || this;

		if (el.currentTarget) el = el.currentTarget;
		if (el.href) location = el.href;

		//sub-menu is visible so hide
		if(el.sfMenu.style.display == 'block') {
			var sfindex = el.getAttribute('sfmenu:index');
			var id = el.getAttribute('sfmenu:id');
			var left = document.getElementById(sfindex+'Left'+id);
			left.className = left.className.replace(' opened', '');
			el.sfMenu.style.display = 'none';
			if(el.onmouseout)el.onmouseout();
		}
		//sub-menu is hidden so display
		else {
			var sfindex = el.getAttribute('sfmenu:index');
			var id = el.getAttribute('sfmenu:id');
			var left = document.getElementById(sfindex+'Left'+id);
			left.className = left.className.replace(' opened', '')+' opened';
			el.sfMenu.style.visibility = 'visible';
			el.sfMenu.style.display = 'block';
			if(el.onmouseout)el.onmouseout();
		}

		if(typeof(equalHeight) != 'undefined')equalHeight();
		if(tf.utils && tf.utils.applyms)tf.utils.applyms();

		return true;
	},

	//the show function for floating menus
	show: function(e) {

		//set hideEvent so any hide are cancelled
		sfMenu.hideEvent++;
		//now hide all menus, except this ones, that are below this item
		sfMenu.hide(sfMenu.hideEvent, this);

		//hilight menu item
		sfMenu.current.push({item: this, menu: this.sfMenu});
		this.className = 'active';

		//get menu item, top/left position of menu item and document width/hieght
		var d = this.parentNode;
		var left = sfMenu.getLeft(d);
		var top = sfMenu.getTop(this);
		var docHeight = sfMenu.root.clientHeight + document.body.scrollTop;
		var docWidth = sfMenu.root.clientWidth + document.body.scrollLeft;

		//work-around when css attr display: none set clientWidth is 0
		if(this.sfMenu.style.display == 'none')
			this.sfMenu.style.visibility = 'hidden';

		//display sub-menu (still not visible though)
		this.sfMenu.style.display = 'block';


		//check if we dont have the real width of menu item (for overflow issues)
		if(!this.sfMenu.sfRealWidth) {

			//get textnode of widest menu item and set all menu items of sub-menu to it's width
			var n = sfMenu.getTextNode(this.sfMenu.sfNode);
			if(n && n.offsetWidth < n.scrollWidth) {
				var nWidth = n.style.width = n.scrollWidth + 'px';
				var sWidth = this.sfMenu.sfNode.style.width = (this.sfMenu.sfNode.offsetWidth < this.sfMenu.sfNode.scrollWidth)?
					this.sfMenu.sfNode.scrollWidth + 'px': this.sfMenu.sfNode.offsetWidth + 'px';
				for(var i = 0; i < this.sfMenu.childNodes.length; i++) {
					if(this.sfMenu.childNodes[i].nodeName == 'LI') {
						sfMenu.getTextNode(this.sfMenu.childNodes[i]).style.width = nWidth;
						this.sfMenu.childNodes[i].style.width = sWidth;
					}
				}
			}
			this.sfMenu.sfRealWidth = true;
		}


		//check orientation flags and set position accordingly
		if(this.sfMenuType & sfMenu.RIGHT) {
			left += d.offsetWidth;
		}
		else if(this.sfMenuType & sfMenu.LEFT) {
			left -= this.sfMenu.offsetWidth;
		}
		if(this.sfMenuType & sfMenu.TOP) {
			top -= (this.sfMenuRoot)? this.sfMenu.offsetHeight: this.sfMenu.offsetHeight - this.offsetHeight;
		}
		else if(this.sfMenuType & sfMenu.BOTTOM) {
			top += (this.sfMenuRoot)? d.offsetHeight: 0;
		}

		//beyond page boundaries, so adjust accordingly
		if(top + this.sfMenu.offsetHeight > docHeight)
			top = docHeight - this.sfMenu.offsetHeight;

		if(left + this.sfMenu.offsetWidth > docWidth) {
			var nleft = sfMenu.getLeft(d) - this.sfMenu.offsetWidth;
			left = (nleft >= 0)? nleft: left;
		}

		if(this.sfMenuType & sfMenu.LEFT && left - this.sfMenu.offsetWidth < 0)
			left = sfMenu.getLeft(d) + d.offsetWidth;

		if(this.sfMenuType & sfMenu.TOP && top - this.sfMenu.offsetHeight < 0)
			top = sfMenu.getTop(d) + d.offsetWidth;


		//put the sub-menu where it should be and make it visible
		this.sfMenu.style.left = left + 'px';
		this.sfMenu.style.top = top + 'px';
		this.sfMenu.style.visibility = 'visible';
	},


	//the hide function for floating menu
	// if sfMenu.hideEvent = n hide all sub-menus (below d if set)
	hide: function(n, d) {
		if(sfMenu.hideEvent == n) {
			var p, c;
			if(d) {
				p = d.parentNode.parentNode;
				c = d.sfMenu;
			} else
				sfMenu.hideEvent = 0;
			for(var i = sfMenu.current.length-1; i >= 0; i--) {
				var node = sfMenu.current[i];
				if(node.menu != p && node.menu != c) {
					node.item.style.display = 'none';
					var index = node.item.getAttribute('sfmenu:index');
					var id = node.item.getAttribute('sfmenu:id');
					var nlist = [document.getElementById(index+id), document.getElementById(index+'Left'+id), document.getElementById(index+'Right'+id)];
					for(var i = 0, n = nlist.length; i < n; i++) {
						var cls = nlist[i].getAttribute('sf:object');
						nlist[i].className = nlist[i].className.replace(cls+'MouseOver', cls);
					}
					sfMenu.current.pop();
				} else
					break;
			}
		}
	}
}

// $Revision: 3942 $
// $HeadURL: svn://3d3-p432/ShopFactory/branches/V8_10/bin/Templates/Website/shared_files/sfmenu.js $