/*
	requires jQuery 1.2.1
*/

/*
サブメニューを展開するa要素にはclass="menuBtn"を指定する。
サブメニューのli要素のidに、トリガーとなるボタンのid+"_s"を指定する。
*/

function onMouseOver(evt) {
	resetMenu();
	var targetElem = $(evt.target);
	//<a>の下層に他の要素を入れ子にした場合、イベントターゲットがその子要素になる
	//それがshowMenuの引数として渡されるとIDが特定できずマウスオーバー処理が正しく出来なくなってしまうため
	//そのような場合でも親要素をたどって<a>要素を抽出し、showMenuの引数として渡すようにする
	while(targetElem.get(0).nodeName != "A"){
		targetElem = targetElem.parent();
	}
	//alert(targetElem.get(0).className);
	showMenu(targetElem, true);
}

function showMenu(targetObj, sub){
	//targetObjはjQueryオブジェクト
	//subは子メニューを表示するか否かのブーリアン

	//alert($("#" + $(evt.target).attr("id")).parent().parent().parent().get().tagName);
	//alert($(evt.target).attr("id"));

	//開くべき階層で既に表示されているメニューを一旦全て非表示
	$("> li", $("#" + targetObj.attr("id")+"_s").parent())
	.each(
		function(){
			$(this).hide();
		}
	);
	
	//表示対象の子サブメニューだけを表示
	if(sub){
		if($("#" + targetObj.attr("id")+"_s").get(0)){
			if($.browser.msie || $.browser.mozilla){
				//IEとFirefoxはフェードイン
				$("#" + targetObj.attr("id")+"_s").fadeIn(100);
			}else{
				//それ以外は単純表示
				$("#" + targetObj.attr("id")+"_s").show();
			}
		}
	}

	//$("#ohk1", $("#" + targetObj.attr("id")+"_s").parent().parent()).hide();//アニメーションOHくん1非表示
	//$("#ohk2", $("#" + targetObj.attr("id")+"_s").parent().parent()).hide();//アニメーションOHくん2非表示
	
	
	//表示対象の親メニューを全て表示
	//親メニューを特定するため、マウスオーバーしたa要素のIDを解析
	if(targetObj.attr("id")){
		//alert(targetObj.attr("id"));
		var arryParents = targetObj.attr("id").split("_");//IDを"_"でsplitして配列に格納
		for(var i=0; i<arryParents.length; i++){
			//配列の頭からn個の要素を取り出してjoinすることで、対象メニューのn階層上の要素のIDが取り出せる
			//nを順次増やしながらIDを取得することで、最上位メニューから対象メニューまでの要素を特定することができる

			var arryTmp = arryParents.slice(0, i+1);
			var targetId = arryTmp.join("_");
			//alert(targetId);
			//arryTmp[0]が最上位メニューのIDとなるので、classに"active"を設定して、タブが上がった状態にする
			//一度だけ実行すればよいので、i==0の条件下とする
			if(i==0){
				$("#" + arryTmp[0]).addClass("active");
			}
			//targetIdから、親メニューのa要素が取得できるので、その親をたどってli要素を取得し、表示させる
			$("#" + targetId).parent().parent().parent().show();
			$("#" + targetId).css("color", "#fc0094");//css("backgroundColor", "red");//経路をマーキング
			
			//そのメニューのサブメニューに子メニューが存在すれば、OHくんを非表示
			if($("#" + targetId + "_s li").length){
				$("#ohk" + String(i+1)).hide();
			}
			/*
			//対象要素の親をたどってその階層を囲っているdiv要素を特定し、その中の#ohk1,#ohk2の二つを走査、存在すれば非表示にする
			//対象要素の階層によって、非表示にすべきものだけが非表示になる
			//$("#ohk1", $("#" + targetId).parent().parent().parent().parent().parent()).hide();//アニメーションOHくん1非表示
			//$("#ohk2", $("#" + targetId).parent().parent().parent().parent().parent()).hide();//アニメーションOHくん2非表示
			*/
		}
	}
}

/* タブをアクティブ化するためのユーティリティ関数 - ここから */

var classNamePreFix = "menu_";
//各メニューの<a>要素に設定すべきclass名を生成する
//class名は、hrefの値の"/"を"_"に置換し、頭にclassNamePreFixをつけたものとする
function createClassName(str){
	var arr = str.split("/");
	arr.splice(0, 1);//不要な要素を削除
	return classNamePreFix + arr.join("_");
}

//現在のページのURLから、アクティブにすべき<a>要素のclass名を特定する
function getClassName(){
	var arr = location.href.split("/");
	//http://***.***.***/***/
	arr.splice(0, 3);//不要な要素を削除
	//alert(classNamePreFix + arr.join("_"));
	return classNamePreFix + arr.join("_");
}

/* タブをアクティブ化するためのユーティリティ関数 - ここまで */

function initMenu(){
	//初期設定：ページロード時に一度だけ実行

	//メニューにマウスオーバーイベントハンドラ設定
	$(".menuArea a").each(function(){
		$(this).mouseover(onMouseOver);
		$(this).attr("className", createClassName($(this).attr("href")));
		//alert($(this).attr("className"));
		/*
		//第二階層メニューで下位メニューがあるメニューは、マーキング
		if($("#" + $(this).attr("id")+"_s").get(0) && $(this).parent().get(0).nodeName == "LI"){
			//$(this).css("backgroundColor", "red");
		}
		*/
		
	});
	//アニメーションOHくん初期設定
	moveImgX();
	moveImgXX();

	resetMenu2();

}

function resetMenu(){
	//alert("reset");
	
	//第一階層のタブを非アクティブ化
	$("#topMenu a").each(function(){
		$(this).removeClass("active");
	});
	
	//全てのサブメニューを非表示
	$(".subMenu > li").each(function(){
		$(this).hide();
	});

	$("#ohk1").show();//アニメーションOHくん1表示
	$("#ohk2").show();//アニメーションOHくん2表示
	
	//全てのサブメニューのマーキング（フォントカラー)を解除
	$(".menuArea a").each(function(){
		$(this).css("color", "");//("backgroundColor", "");
	});
	/*
	$(".subMenu").each(function(){
		$(this).show();
	});
	*/

	t.stop();

}


function resetMenu2(){
	//メニューをリセットしつつ、カレントメニューのアクティブ化をおこなう
	resetMenu();

	/*
	//IDの場合
	//currentIdがある場合はカレントメニューのアクティベート
	if(currentId){
		showMenu($("#" + currentId));
	}
	*/

	//classの場合
	//currentがある場合はカレントメニューのアクティベート
	//alert($("." + current).get(0).nodeName);
	if($("." + getClassName()).get(0)){
		//getClassNameでlocation.hrefから抽出したclass名の要素が存在する場合アクティベート実行
		
		//タブのリンク先と同じリンク先のサブメニューがある場合class名がバッティングするが、その場合サブメニューのアクティベートを優先するため
		//マッチした要素の最後の要素を取り出し、showMenuに渡す
		//例）「Click!」タブと「ご意見掲示板」の関係（「Click!」タブをクリックすると、それ自身のサブメニューである「ご意見掲示板」に飛ぶ）
		var classCarriers = $("." + getClassName());
		//alert(classCarriers.length);
		showMenu($(classCarriers.get(classCarriers.length-1)), true);//第2引数はtrueにして、その要素の下層メニューも表示
		//showMenu($("." + getClassName()), true);
	}
}

/* timer obj */
var timerObj = function(){}

timerObj.prototype = {
	timerId : "",
	start : function(){
		//メニューからマウスアウトした際は、resetMenu2でカレントメニューをアクティベートする
		this.timerId = setInterval(resetMenu2, 500);
	},
	stop : function(){
		clearInterval(this.timerId);
	}

}

var t = new timerObj();

/* on load */
$(function(){
	initMenu();
	$(".menuArea").each(function(){
		$(this).hover(function(){t.stop()}, function(){t.start()});
		//080929マウスアウトしてもサブメニューが残るよう修正
		//$(this).hover(function(){t.stop()}, function(){});
	});
});