$(function(){
//初期スピード（タイマー当たりの移動 px）	
var Speed = 1;
//マウスをオーバーしたとき（タイマー当たりの移動 px）	
var Speed_m = 5;
//タイマーの設定
var TimeInterval=30;
//進行方向（right、left）
var ScrollDirection = "left";
//サムネール画像
var ImgCount = $('#ScrollArea li').length;
var ImgWidth = $('#ScrollArea li').outerWidth();
//表示エリアの幅
$('#ScrollArea').css('width',(ImgCount+2)*ImgWidth);
//表示エリアの位置
$('#ScrollArea').css('left',"-"+ImgWidth+"px");
var x=0;
var s=Speed;
//メイン画像の表示番号
var Max_num = $('#HiddenImage li').length-1;
//初期画像
var num = 0;
//左右ボタンのマウスオーバー時のメイン画像の変更
var over=0;

	function set_timer(){
		timerID = setInterval(function(){
			if(ScrollDirection =="left"){
				timer_action_toL();				
			}else if(ScrollDirection =="right"){
				timer_action_toR();				
			}else{
				timer_action_toL();
			}
		},TimeInterval);
	}
	
	function clear_timer(){
		clearInterval(timerID);
	}
	
	//左スクロール
	function timer_action_toL(over){
		if(x<=0){			
			$('#ScrollArea li:last').after($('#ScrollArea li:first').clone());			
			$('#ScrollArea li:first').remove();
			x= ImgWidth;	
			num = num +1;
			num = num_check(num);
			main_image_change(num);
			
			Image_Click();
		}		
		x = x - s;
		$('#ScrollArea li').css('left',x+"px");
	}
	
	//右スクロール
	function timer_action_toR(){
		if(x>=ImgWidth){
			$('#ScrollArea li:first').before($('#ScrollArea li:last').clone());								
			$('#ScrollArea li:last').remove();						
			x=0;
			num = num - 1;
			num = num_check(num);
			main_image_change(num);
			Image_Click();			
		}		
		x = x + s;
		$('#ScrollArea li').css('left',x+"px");
	}
	
	//メイン画面の画像の切り替え
	function main_image_change(num){
		if(!isNaN(num) && over==0){
			$('#MainViewArea').hide();	
			$('#MainViewArea img').remove();
			html = $('#HiddenImage li').eq(num).html();
			$('#MainViewArea').html(html);		
			$('#MainViewArea').fadeIn('slow');
		}else{
			return false;
		}
	}
	//画像をクリックしたとき
	function Image_Click(){
		$('#ScrollArea li img').bind('click',function(){
			num = $(this).attr('name');
			num = num_check(num);
			main_image_change(num);
		});				
	}
	
	function num_check(num){
		num = parseInt(num);
		if(!isNaN(num)){
			if(num < 0){
				num = Max_num;
			}else if(num > Max_num){
				num = 0;
			}
			return num;	
		}else{
			return false;
		}		
	}
	
	//左のボタン制御
	$('#Leftbtn').hover(function(){
		over=1;				
		clear_timer();
		s= Speed_m;
		ScrollDirection="right";
		set_timer();
	},
	function(){
		over=0;		
		clear_timer();
		s= Speed;		
		ScrollDirection="left";
		set_timer();			
	});

	//右ボタン制御
	$('#Rightbtn').hover(function(){
		over=1;		
		clear_timer();
		s= Speed_m;
		ScrollDirection="left";
		set_timer();		
	},
	function(){
		over=0;			
		clear_timer();
		s= Speed;
		ScrollDirection="left";
		set_timer();		
	});
		
	//スクロールエリアをマウスオーバーしたとき
	$('#ScrollArea').hover(function(){		
		clear_timer();
	},
	function(){		
		s= Speed;		
		set_timer();			
	});
	
	//初期のメイン画像を表示
	main_image_change(num);

	//移動開始
	set_timer();
});