/*==============================================================================
UL/LIタグからタブメニューを作成するJavaScriptクラス

*使用方法

１）<head>～</head>内等に以下を記述。
src属性の内容は環境に合わせること。
<script language="JavaScript" src="./js/prototype.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="./js/list2tab.js" charset="UTF-8"></script>

２）メニュー化したいUL要素にID属性をつけ、BODY要素の終了タグ直前あたりに以下を記述する。
以下の例では、UL要素のID属性をmenuとしている。
<script language="JavaScript">
	var new list2tab('menu');
</script>

=============================================================================*/

var list2tab = Class.create();

list2tab.prototype = {

	/*classNames: {
		hover: 'hover'
	},*/

	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イベント処理
=============================================================================*/
	_mouseover: function(event){

		// 選択された階層のclass属性を変更する
		var node = Event.findElement(event,'LI');
		var n = node;
		while(n.parentNode){
			n = n.parentNode;
		}

		// 選択された階層の親ノードを配列に保存
		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イベント処理
=============================================================================*/
	_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 = '100';

		if(parentUL.id == this.element){
			//var top = parentLI.clientHeight;
			//var left = parentLI.offsetLeft;
			//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';
			}
		}
	}

}

