$(function(){
	/* ---------- オプション ---------- */
	var slideInterval = 5000; // スライド切替の間隔
	var slideSpeed = 500; // スライド移動の速度
	
	/* ---------- 変数 ---------- */
	var numOfLi = $('#mainImage .panels li').length;
	var widthOfLi = $('#mainImage .panels li').outerWidth({margin: true});
	var slideTimer;
	
	/* ---------- ファンクション ---------- */
	// 左方向へ
	var toLeft = function(callback){
		$('#mainImage .panels li:first').animate({marginLeft:widthOfLi * -1}, slideSpeed, function(){
			$(this).remove().appendTo('#mainImage .panels ul').css('margin-left',0);
			if(callback){setSlideTimer();}
		});
	}
	
	// 時間経過によるスライド切替
	var setSlideTimer = function(){
		slideTimer = setInterval(function(){
			toLeft(false);
		}, slideInterval);
	}
	
	/* ---------- 初期設定 ---------- */
	// ulのwidthを設定
	$('#mainImage .panels ul').width(widthOfLi * numOfLi);
	
	// 右ボタン（左方向へ）
	$('#mainImage .bt_r').click(function(ev){
		ev.preventDefault();
		clearInterval(slideTimer);
		toLeft(true);
	});
	
	// 左ボタン（右方向へ）
	$('#mainImage .bt_l').click(function(ev){
		ev.preventDefault();
		clearInterval(slideTimer);
		$('#mainImage .panels li:last').remove().css('margin-left', widthOfLi * -1).prependTo('#mainImage .panels ul').animate({marginLeft:0}, slideSpeed, setSlideTimer);
	});
	
	setSlideTimer();
});