/**
 *	De Baak Navigation
 *	-------------------------
 */

function Navigation(element) {
	if(!element) return;
	this.container = element;
	this.currentBranch = null;
	this.currentMenu = null;
	this.createBackdrop();

	EventListener.addEvent(element, 'mouseover', this.scope(this.handleMouseover));
	EventListener.addEvent(document, 'mouseover', this.scope(this.handleMouseout));
}

Navigation.prototype = {
	REG_ITEM:/^li$/i,

	OPEN_DELAY:  500,
	CLOSE_DELAY: 1000,
	ANIMATION_TIME: 250,
	
	createBackdrop:function() {
		this.backdrop = this.container.appendChild(document.createElement('div'));
		this.backdrop.className = 'backdrop';
		this.backdrop.appendChild(document.createElement('div'));
		this.backdropHeight = 0;
	},

	handleMouseover:function(e) {
		var item = EventListener.getTarget(e, 'li');
		if(item) {
			var branch = this.getBranch(item);
			
			// clear closing timeout
			clearTimeout(this.pendingClose);
			
			// if it's a new menu, open it
			if(!this.currentBranch || branch != this.currentBranch) {
				this.delayedOpen(branch);
			}
		}
	},

	handleMouseout:function(e) {
		// don't do anything if it's not necessary
		if(!this.openState && !this.pendingOpen) return;
		
		// don't do anything if it's a mouseover inside the menu
		var node = EventListener.getTarget(e);
		while(node) {
			if(node == this.container) return;
			node = node.parentNode;
		}
	
		// prevent undesired opening
		clearTimeout(this.pendingOpen);
		
		// set closing timeout
		if(!this.pendingClose) {
			var close = this.scope(function(){ this.toggle(false); });
			this.pendingClose = setTimeout(close, this.CLOSE_DELAY);
		}
	},
	
	delayedOpen:function(branch) {
		var open = this.scope(function(){ this.toggle(branch); });
		if(!this.openState) {
			// nothing is open yet, open with delay
			clearTimeout(this.pendingOpen);
			this.pendingOpen = setTimeout(open, this.OPEN_DELAY);
		} else {
			// there's already an open menu, open without delay
			open();
		}
	},

	// toggle opens a menu, or closes the current one
	toggle:function(branch) {
		this.openState = branch? true : false;
		var sub = branch? branch.getElementsByTagName('ul')[0] : null;
		
		// when already animating, immediately end it
		if(this.animator) {
			this.animator.stop();
			this.animateEnd();
		}
		
		// references for the menu that is to be closed
		if(this.currentBranch) {
			this.closingBranch = this.currentBranch;
			this.closingMenu = this.currentMenu;
			this.closingHeight = this.targetHeight;
			ClassName.remove(this.currentBranch, 'open');
		}

		// references for the menu that is to be opened
		this.currentBranch = branch;
		this.currentMenu = sub;
			
		// if there's a submenu, get its height
		if(sub) {
			var last = this.getLastChild(sub);
			this.targetHeight = (last.offsetTop + last.offsetHeight);
			this.backdrop.style.display = 'block';
			ClassName.add(branch, 'open');
		} else {
			this.targetHeight = 0;
			ClassName.add(branch, 'no-sub');
		}

		// animate, 100 as generic counter
		this.animator = new Animator(0, 100, 
			this.scope(this.animate),
			this.scope(this.animateEnd)
		);
		this.animator.setDuration(this.ANIMATION_TIME);
		this.animator.start();
	},

	animate:function(d) {
		// height of the new submenu
		var h = parseInt(d/100 * this.targetHeight);
		
		// height difference from backdrop to new height
		var b = this.backdropHeight + parseInt(d * (this.targetHeight - this.backdropHeight)/100);

		if(this.currentMenu) {
			this.currentMenu.style.height = h + 'px';
		}

		this.backdrop.style.height = b + 'px';
		
		// height of closing menu
		if(this.closingHeight && this.closingMenu) {
			var c = parseInt((100-d)/100 * this.closingHeight)
			this.closingMenu.style.height = c + 'px';
		}
	},

	// end step for animations, set some values
	animateEnd:function() {
		this.animate(100);
		this.backdropHeight = this.targetHeight;
		this.animator = null;

		this.pendingOpen = null;
		this.pendingClose = null;
		if(!this.openState){
			this.closingMenu = null;
			this.backdrop.style.display = 'none';
		}
	},

	// gets the outer most list item
	getBranch:function(item) {
		var branch = item;
		var node = item.parentNode;
		while(node && node != this.container) {
			if(this.REG_ITEM.test(node.nodeName)) {
				branch = node;
			}	node = node.parentNode;
		}

		return branch;
	},

	getLastChild:function(parent) {
		var child = parent.lastChild;
		while(child.nodeType != 1) {
			child = child.previousSibling;
		}	return child;
	},

	scope:function(method) {
		var scope = this;
		return function() {
			method.apply(scope, arguments);
		}
	}
}

EventListener.addEvent(window, 'load', function(){
	if(/MSIE 5/.test(navigator.userAgent)) return;

	new Navigation(document.getElementById('main-navigation'));
	//new LoginMenu(document.getElementById('form-login'));
});


/**
 *	Client group navigation
 *	--------------------------



var NavClientgroup = {

	init: function(node) {
		NavClientgroup.node = document.getElementById(node); if (!NavClientgroup.node) return;
		EventListener.addEvent(NavClientgroup.node, "click", function(e){NavClientgroup.clickHandler(e)});
	},
	
	clickHandler: function(e) {
		var target = EventListener.getTarget(e)
		while (!target.nodeName || target.nodeType == 3) target = target.parentNode;
		if (/^a$/i.test(target.nodeName) && target.parentNode.parentNode == NavClientgroup.node) {
			NavClientgroup.setSelected(target.parentNode);
			return EventListener.preventDefault(e);
		}
	},
	
	setSelected: function(target) {
		if (ClassName.contains(target, "selected")) return;
		for (var i = 0; i < NavClientgroup.node.childNodes.length; i++) {
			ClassName.remove(NavClientgroup.node.childNodes[i], "selected");
		}
		ClassName.add(target, "selected");
	}
}

EventListener.addEvent(window, "load", function(){NavClientgroup.init("nav-clientgroup")});
 */