/**
 *	Nuon Navigation
 *	-------------------------
 */

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

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

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

	OPEN_DELAY:  100,
	CLOSE_DELAY: 1250,
	
	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 endesired 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';
		} else {
			this.targetHeight = 0;
		}

		ClassName.add(branch, 'open');

		// animate, 100 as generic counter
		this.animator = new Animator(0, 100, 
			this.scope(this.animate),
			this.scope(this.animateEnd)
		);
		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(){
	new Navigation(document.getElementById('subnavigation'));
});

/**
 *	Login menu
 *	--------------------------
 */
var form;

function LoginMenu(element) {
	if(!element) return;
	this.container = element;
	form = element.getElementsByTagName("form")[0];
	ClassName.add(this.container, "hide-login");

	//EventListener.addEvent(element, 'click', this.scope(this.handleOpen));
	EventListener.addEvent(element, 'mouseover', this.scope(this.handleOpen));

	EventListener.addEvent(document, 'mouseover', this.scope(this.handleClose));
	EventListener.addEvent(document, 'click', this.scope(this.handleClose));
	
	var formelements = form;
	for (var i = 0;i<formelements.length;i++) {
		if(formelements[i].type == "text" || formelements[i].type == "password") {
			if (/Gecko/.test(navigator.userAgent))
				EventListener.addEvent(formelements[i], 'focus', this.scope(this.handleClose));
			if(/MSIE/.test(navigator.userAgent))
				EventListener.addEvent(formelements[i], 'keyup', this.scope(this.attemptSubmit));
		}
	}
	
}

LoginMenu.prototype = {

	OPEN_DELAY: 500,
	CLOSE_DELAY: 1000,

	handleOpen: function(e) {
		var open = this.scope(function(){ this.openMenu(); });
		if(!this.openState) {
			// nothing open yet
			if (e.type == "click" && EventListener.getTarget(e) == this.container.getElementsByTagName("A")[0]) {
				// open right away
				clearTimeout(this.pendingOpen);
				this.openMenu();
				EventListener.cancelEvent(e);
			} else {						
				// open with delay
				clearTimeout(this.pendingOpen);
				this.pendingOpen = setTimeout(open, this.OPEN_DELAY);
			}
		}		
	},

	handleClose:function(e) {

		// don't do anything if it's not necessary
		if ((!this.openState && !this.pendingOpen) || (e.type == "mouseover" && this.hasFocus)) return;
	
		// don't do anything if it's a mouseover or click inside the menu
		var node = EventListener.getTarget(e);
		while(node) {
			if(node == this.container) {
				switch(e.type) {

					case "mouseover" :
					if (this.pendingClose) {
						clearTimeout(this.pendingClose);
						this.pendingClose = null;
					}					
					break;

					case "click" :
					this.hasFocus = true;
					if(!this.openState) {
						clearTimeout(this.pendingOpen);
						this.openMenu();
						EventListener.cancelEvent(e);						
					}
					break;

					case "focus" :
					this.hasFocus = true;
					break;
				}
				return;
			}
			node = node.parentNode;
		}

		// prevent endesired opening
		clearTimeout(this.pendingOpen);
		
		if (!this.pendingClose) {
			var close = this.scope(function(){ this.closeMenu(); });
			this.pendingClose = setTimeout(close, this.CLOSE_DELAY);
		}		

	},

	attemptSubmit:function(e){
		if (e && e.keyCode) {
			if(e.keyCode == 13) {
				try {
					form.submit();
				} catch (ex) {
					//alert(ex);
				}
			}
		}
	},

	openMenu:function(){
		ClassName.add(this.container, "show-login");
		this.openState = true;
	},

	closeMenu:function() {
		ClassName.remove(this.container, "show-login");	
		this.openState = null;
		this.pendingClose = null;
		this.hasFocus = null;
	},

	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('alfabet'));
	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")});