var list2tab = Class.create();

list2tab.prototype = {

	timeout: 2000,

	initialize: function(element){

		this.element = element;
		this._initMenu(); // メニューを初期化する

	},

	_initMenu: function(){

		// サブメニューを非表示にする
		var nodes = $(this.element).childNodes;
		for(var i=0; i<nodes.length; i++){
			if(nodes[i].tagName == 'LI'){
				// mouseoverイベントを登録
				var mouseover = this._mouseover.bindAsEventListener(this);
				Event.observe(nodes[i], "mouseover", mouseover);
				var mouseout = this._mouseout.bindAsEventListener(this);
				Event.observe(nodes[i], "mouseout", mouseout);

				// サブカテゴリーを非表示にする
				this._hide(nodes[i]);
			}
		}

	},


	_mouseover: function(event){

		var node = Event.findElement(event,'LI');

		// 選択された階層の親ノードを配列に保存
		var parents = new Array();
		var n = node;
		while(n.parentNode){
			if(n.tagName == 'UL'){
				parents[parents.length] = n;
			}
			n = n.parentNode;
		}

		// 選択された階層以外のノードを全て非表示にする
		var nodes = $(this.element).getElementsByTagName('UL');
		for(var i=0; i<nodes.length; i++){
			var parent = nodes[i].parentNode;
			if(parent == node){						// 子ノードを表示
				this._show(nodes[i]);
			}else if(parents.include(nodes[i])){	// 親ノードを表示
				this._show(nodes[i]);
			}else{									// そのた全てを非表示
				this._hide(parent);
			}
		}

		if(this.timer){
			clearTimeout(this.timer);
		}
	},


	_mouseout: function(event){
		if(this.timer){
			clearTimeout(this.timer);
		}
		var init = this._initMenu.bindAsEventListener(this);
		this.timer = setTimeout(init,2000);
	},


	_show: function(ul){

		var parentUL = ul.parentNode.parentNode;
		var parentLI = ul.parentNode;

		ul.style.position = 'absolute';
		ul.style.display = 'block';
		ul.style.zIndex = '1000';
		ul.className = 'popup';

		if(parentUL.id == this.element){
			var top = parentLI.clientHeight + 1;
			var left = parentLI.offsetLeft - 1;
			ul.style.top = top + 'px';
			ul.style.left = left + 'px';
		}else{
			ul.style.top = parentLI.offsetTop + 'px';
			ul.style.left = parentLI.offsetWidth + 'px';
		}
	},


	_hide: function(li){
		var childs = li.childNodes;
		for(var i=0; i<childs.length; i++){
			if(childs[i].tagName == 'UL'){
				childs[i].style.display = 'none';
				childs[i].style.zIndex = '-1';
			}
		}
	}

}


function displayMenu(){
	if(!$('menu')){
		return;
	}
	$('menu').style.visibility = 'visible';
	new list2tab('menu');
}

Event.observe(window, 'load', displayMenu, false);