/*=================================================================
	商品カテゴリ開閉メニュー用 JavaScript
 ==================================================================*/

$(function() {
	/* CONFIG */
	sY = 20;			//	メインメニューの高さ
	lineheight = 20;	//	サブメニュー1行の高さ
	
	//-------------------------------------------------------------------
	//	初期処理
	//-------------------------------------------------------------------
	if (document.getElementById("slide") != null)
	{
		//	サブメニューを全て隠す
		$("#slide .sub li").hide();
		
		//	初回メニューを開く
		default_id = document.getElementById("slide").getAttribute("title");
		if (default_id != "")
		{
			animate(sY)
			$(document.getElementById(default_id)).removeClass('clicked')
						.css("background", "#daecff")
						.css("color", "#26d");

			$(document.getElementById(default_id)).addClass('clicked');
			
			//	開く高さを計算
			menu_num = (parseInt(document.getElementById(default_id + "_num").getAttribute("title"), 10) + 1) * lineheight;
			animate(menu_num)
		}
	}
	
	//-------------------------------------------------------------------
	//	カテゴリクリックイベント
	//-------------------------------------------------------------------
	$("#slide .sub").click(function()
	{
		if (this.className.indexOf('clicked') != -1)
		{
			animate(sY)
			$(this).removeClass('clicked')
						.css("background", "#fff")
						.css("color", "#26d");
		}
		else
		{
			animate(sY)
			$('.clicked').removeClass('clicked')
						.css("background", "#fff")
						.css("color", "#26d");
			$(this).addClass('clicked');
			
			//	開く高さを計算
			menu_num = (parseInt(document.getElementById(this.id + "_num").getAttribute("title"), 10) + 1) * lineheight;
			animate(menu_num)
		}
	});

	//-------------------------------------------------------------------
	//	カテゴリマウスオーバーイベント
	//-------------------------------------------------------------------
	$("#slide .sub").hover(function()
	{
		$(this).css("background", "#daecff")
					.css("color", "#26d");
	}, function() {
		if (this.className.indexOf('clicked') == -1)
		{
			$(this).css("background", "#fff")
						.css("color", "#26d");
		}
	});

	//-------------------------------------------------------------------
	//	アニメーションファンクション
	//-------------------------------------------------------------------
	function animate(pY)
	{
		//	サブメニューの開閉処理
		$('#slide .clicked').animate({ "height": pY + "px" }, 500);
		
		//	サブメニューのフェード処理
		if (pY == sY)
		{
			$("#slide .clicked li").fadeOut("slow");
		}
		else
		{
			$("#slide .clicked li").fadeIn("slow");
		}
	}

});