$(document).ready(function(){
	//操作するDOMを設定する========================================
	var menuImg = $('ol#menuImg>li');
	var menuLen = $('ol#menuList>li').length;
	var menuList = $('ol#menuList>li>a');
	
	//タイマーの切り替わる時間を設定===============================
	var myTimerSec = 8000;
	//現在選択されている番号の変数=================================
	var nowSelectedNum = 0;
	var maxSelectedNum = menuLen;
	
	$.fn.myTimer = setInterval(autoSelect, myTimerSec);
	
	//自動で選択する場合の関数====================================
	function autoSelect(){
		nowSelectedNum += 1;
		selectImg(nowSelectedNum);
	};
	
	//イベントを設定する==========================================
	menuList.bind({
		mouseover : function(){
			clearInterval ($.fn.myTimer);
			var myListNum = $(this).parent().index();
			selectImg(myListNum);
			nowSelectedNum = myListNum;
		},
		mouseout : function(){
			$.fn.myTimer = setInterval(autoSelect, myTimerSec);
		}
	});
	
	//全ての画像とメニューのアンダーバーを消す関数================
	function allImgHide(){
		menuImg.hide();
		menuList.removeClass('selected');
	};
	
	//画像を表示する 引数 = 表示したい番号0-5=====================
	function selectImg(myNum){
		allImgHide();
		$('ol#menuImg>li:eq(' + myNum + ')').fadeIn(400);
		$('ol#menuList>li:eq(' + myNum + ')>a').addClass('selected');
		if(nowSelectedNum >= maxSelectedNum-1){
			nowSelectedNum = -1;
		};
	};
	
	//Start All===================================================
	allImgHide();
	selectImg(0);
});