///////////////////////////////////////////////////////////////////////////////
//	DoropDown.class.js
//		ドロップダウンメニュー処理クラス
//			Copyright (c) 2007 mochiZ.
//
//	author: mochiZ.
//	create: 2007/07/03
//	update: 2007/07/25	クラス名を指定できるように追加修正
//	update: 
///////////////////////////////////////////////////////////////////////////////

//=============================================================================
// class DropDown
//=============================================================================

/*

	[使用例]
	
	var navi = new Array();
	navi[0] = new Array("ナビ0", "_img/1.gif", "url.php");
	navi[1] = new Array("ナビ1", "_img/2.gif", "url.php");
	navi[2] = new Array("ナビ2", "_img/3.gif", "url.php");
	new DropDown('ownerID' ,navi ,'menu');
	
	それぞれのnavi[x]には id="{ownerID}{menu}x" が設定される
*/


//*************************
//	クラス変数
//*************************
DropDown.prototype.timerID = null;
DropDown.prototype.menuObj = null;
DropDown.prototype.func = null;

//*************************
//	コンストラクタ
//		ownerID		: オーナーとなるエレメントID
//		navi		: ナビゲーション配列(代替文字列, イメージパス, リンクURL)
//		className	: 生成されるナビにつけるclass名(IDのプレフィックスも兼ねる)
//*************************
function DropDown(ownerID, navi, className)
{
	// デフォルト
	if(!className) className = "menu";

	// メンバ
	this.owner = this.getObj(ownerID);		// オーナとなるエレメントオブジェクト
	this.menu;								// メニューのエレメントオブジェクト
	this.tag = "";
	
	if(!this.owner){
		alert("Not found Owner ID : " + ownerID);
		return;
	}
	
//alert(this.owner.src);

	menuID = ownerID + className;
	html = "<div>" + this.owner.innerHTML + "</div>\n";
	this.tag = html + "\n<div class='" + className + "' id='" + menuID + "'>\n";
	for(i=0; i<navi.length; ++i){
		n = navi[i];
		alt = n[0];
		src = n[1];
		url = n[2];
		imgID = menuID + i;
		this.tag += "<div><a href='" + url + "'>" +
						"<img id='" + imgID + "' src='" + src + "' alt='" + alt + "' />" + 
					"</a></div>\n";
					
	}
	this.tag += "</div>";
	
	// ページに書き込む
	this.owner.innerHTML = this.tag;
	for(i=0; i<navi.length; ++i){
		imgID = menuID + i;
		new Button(imgID);
	}
	
	// スタイル設定
	this.owner.style.position = "relative";
	
	this.menu = this.getObj(menuID);
	this.menu.style.position = "absolute";
	this.menu.style.display = "none";
	

//alert(this.owner.innerHTML);

	// マウスイベント登録
	this.eventHandler(this, this.owner);
	this.eventHandler(this, this.menu);
}

//*********************************************************
// イベントハンドラ(クラスメソッド)
//*********************************************************
DropDown.prototype.eventHandler = function(w, obj)
{
	obj.onmouseover = function(){
		w.MouseOver();
	}
	obj.onmouseout = function(){
		w.MouseOut();
	}
}

//*************************
// オブジェクト取得
//*************************
DropDown.prototype.getObj = function(name)
{
	if(document.getElementById){
		return document.getElementById(name);
	}else if(document.all){
		return document.all(name);
	}else if(document.layers){
		return document.layers[layName];
	}
	return null;
}

//*************************
//	MouseOver
//*************************
DropDown.prototype.MouseOver = function()
{
//	this.menu.style.display = 'block';

	this.DelayDisplay(this.menu, true, 300);
}

//*************************
//	MouseOut
//*************************
DropDown.prototype.MouseOut = function()
{
//	this.menu.style.display = 'none';
	
	this.DelayDisplay(this.menu, false, 500);
}

//*************************
//	表示遅延処理
//************************
DropDown.prototype.DelayDisplay = function(obj, visible, msec)
{
	// 待機中の処理を実行
	clearTimeout(DropDown.prototype.timerID);
	if(visible && DropDown.prototype.timerID){
		eval(DropDown.prototype.func);
	}
	
	// 実行関数の登録
	display = visible ? 'block' : 'none';
	DropDown.prototype.menuObj = obj;
	DropDown.prototype.func = "DropDown.prototype.display('" + display + "')";
	DropDown.prototype.timerID = setTimeout(DropDown.prototype.func, msec);
	
window.status += DropDown.prototype.func;
}

DropDown.prototype.display = function(display)
{
	DropDown.prototype.menuObj.style.display = display;
}