/*
 * jQueryで実装するサイドバー
 *
 * http://garyu.at.codecheck.in/sample/slideMenu.html
 * author:	garyu
 *
 */


// ■ページ読込み完了時
$(document).ready(function(){
	//サイドメニューのセット
	setSideMenu();
});

//=============================
//関数：サイドメニュー
//=============================
function setSideMenu() {
	//パネルの初期設定のwidthを取得しておく
	var panel_DefW = $("#slide_panel").width();
	//alert(panel_DefW);
	//メニュの表示幅（クリックできる範囲:今回はh2の横幅）
	var btn_DefW = $("#slide_panel h2").width();
	//alert(btn_DefW);
	//パネルの横幅をボタンの横幅だけにしておく
	$('#slide_panel').width(btn_DefW);

	$('#slide_panel h2').click(function() {	slideMenu()	});
	
	function slideMenu(){
		//ボタンの横幅よりも、パネル全体の横幅が広い時＝開いてる時
		if($("#slide_panel").width() > btn_DefW ){
			//横幅=ボタンの横幅 へアニメーション(閉じる)
			w = btn_DefW;
		}else{
			//横幅=初期値 へ アニメーション(開く)
			w = panel_DefW;
		}
		$("#slide_panel").animate(
			{
				width: w
			},
			"slow",
			function(){	//callback(実行後の処理)
				//アニメーションが終わってclass変更
				$('#slide_panel h2').toggleClass('menu_active');	//classのトグル（on/off）も可能！！
			}
		);
	}
}