var mastaMargin    = 10;
var margin     = 0; 
var gallery    = "#gallery";
var next       = '#next';
var prev       = '#prev';

var stage      = 1;
var ulWidth    = 0;
var no         = 0;
var totalWidth = 0;
var tmbList    = new Array();
var nowTmbList = new Array();
var widthList  = new Array();
var reverseFlg = '';


//初期設定
function initGallery(){
	$(next).click(function(){
						   nextGallery();
						   });
	$(prev).click(function(){
						   prevGallery();
						   });
	tmbList = $('#gallery > li');
	ulWidth = $(gallery).width()-20;
	//サムネイル初期化
	initTmb();
}//end init()


//作品名を表示させるクラス
function Gallery_tmb(e,t){
	var tmb = e;
	var title = t;
	$(tmb).mouseover(function(){
		$('#title_box').text(title);
	 })
}




//サムネイル初期化
function initTmb(){
	
	for(i = 0 ; i < tmbList.length ; i++){
		$(tmbList[i]).attr('id','id'+(i+1));
		
		
		
		widthList.push($(tmbList[i]).width());
	}
	
	for(var i= 0 ; i < tmbList.length ; i++){
		
		//サムネイル幅のリスト化、リスト幅の合計を計算
		totalWidth += widthList[i] + mastaMargin;
		
		//リスト幅がギャラリー幅を超えた場合
		if(totalWidth > ulWidth){
			
			totalWidth -= widthList[i] + mastaMargin*(i+1);
			
			//表示中のサムネイルの数
			no = i;
			
			//表示しきれないサムネイルの削除
			removeTmb(i);
			
			//右マージンの最適化
			setMargin(i);
			
			
			//ループ終了
			i = tmbList.length;
		
		}else{
			
		//表示させるサムネイルリスト
		nowTmbList.push(tmbList[i]);
		
		var box=$(nowTmbList[i]).children();
		var title =$(nowTmbList[i]).children().children();
		title = $(title).attr('title');
		new Gallery_tmb(box,title);
		
		}
		
	}//end for
	

}


//サムネイル配置
function changeNextTmb(){
	
	if(reverseFlg == 'prev'){
		
		var n = no + nowTmbList.length + 1;
		
		if(n > tmbList.length){
			
			no = n - tmbList.length;
			
		}else if(n == tmbList.length){
			
			no = 0;
			
		}else{
			
			no = n;
			
		}
	}
	
	//初期化
	nowTmbList = new Array();
	totalWidth = 0;
	
	for(i = 0 ; i < tmbList.length ; i++){
		$(tmbList[i]).css('margin-right','0');
	}
	
	$(gallery).empty();
	
	for(var i = no ; i < tmbList.length ; i++){
		
		//リスト幅の合計を計算
		totalWidth += widthList[i] + mastaMargin;
		
		//ギャラリー幅をオーバーしない場合
		if(totalWidth < ulWidth){
			
			//通常ループ
			if(i != tmbList.length-1){

				//表示させるサムネイルリスト
				nowTmbList.push(tmbList[i]);
				
			//ループの最後
			}else{
				
				//表示させるサムネイルリスト
				nowTmbList.push(tmbList[i]);
				i = -1;
				
			}
		
		//ギャラリー幅を超えた場合
		}else{
			
			totalWidth -= widthList[i] + mastaMargin*(nowTmbList.length+1);
			
			//表示中のサムネイルの数
			no = i;
			
			//表示しきれないサムネイルの削除
			removeTmb(i);
			
			//右マージンの最適化 / ギャラリーを中央に配置
			setMargin(i);
			
			//ループ終了
			i = tmbList.length;
		
		}
		
		
	}//end for
	
	stage++;
	createTmb();
	
	//alert(no)

}// end changeNextTmb






//サムネイル配置
function changePrevTmb(){
	
	//ファーストビュー
	if(stage == 1){
		
		no = tmbList.length-1;
	
	//2枚目以降
	}else if(reverseFlg == 'next'){
		
		var n = no - nowTmbList.length;
		
		//alert(n);
		
		if(n < 0){
			
			no = tmbList.length + n -1;
			
		}else if(n == 0){
			no = tmbList.length -1 ;
		}else{
			no = n - 1;
		}
	}
	
	//初期化
	nowTmbList = new Array();
	totalWidth = 0;
	
	for(i = 0 ; i < tmbList.length ; i++){
		$(tmbList[i]).css('margin-right','0');
	}
	
	$(gallery).empty();
	
	for(var i = no ; i >= 0 ; i--){
		
		//リスト幅の合計を計算
		totalWidth += widthList[i] + mastaMargin;
		
		//ギャラリー幅をオーバーしない場合
		if(totalWidth < ulWidth){
			
			//通常ループ
			if(i != 0){

				//表示させるサムネイルリスト
				nowTmbList.push(tmbList[i]);
				
			//ループの最後
			}else if(i == 0){
				
				//表示させるサムネイルリスト
				nowTmbList.push(tmbList[i]);
				
				i = tmbList.length ;
			}
		
		//ギャラリー幅を超えた場合
		}else{
			
			totalWidth -= widthList[i] + mastaMargin*(nowTmbList.length+1);
			
			//表示中のサムネイルの数
			no = i;
			
			//表示しきれないサムネイルの削除
			removeTmb(i);
			
			//右マージンの最適化 / ギャラリーを中央に配置
			setMarginPrev(i);
			
			//ループ終了
			i = -1;
		
		}
	}//end for
	
	stage++;
	
	createPrevTmb();

}// end changePrevTmb









//右マージンの最適化
function setMargin(n){
	
	var num = totalWidth;
	
	//右マージン最適化
	margin = Math.floor((ulWidth - totalWidth) / (nowTmbList.length-1));
	
	for(var i = 0; i < nowTmbList.length-1 ; i++){
		$(nowTmbList[i]).css('margin-right',margin);
	}
	
	//最後のサムネイルのスタイルを削除
	$(nowTmbList[nowTmbList.length-1]).css('margin-right','0');
	
	//#galleryを中央に配置
	totalWidth += margin*(nowTmbList.length-1);
	$(gallery).css('width',totalWidth);
	
	totalWidth = num;
}


//表示しきれないサムネイルの削除
function removeTmb(n){
	for(var i = n; i < tmbList.length; i++){
		$(tmbList[i]).remove();
	}
}



//右マージンの最適化
function setMarginPrev(n){
	

	var num = totalWidth;
	
	//右マージン最適化
	margin = Math.floor((ulWidth - totalWidth) / (nowTmbList.length-1));
	
	for(var i = 0; i < nowTmbList.length ; i++){
		
		if(i !=0){
			$(nowTmbList[i]).css('margin-right',margin);
		}
	}
	
	//#galleryを中央に配置
	totalWidth += margin*(nowTmbList.length-1);
	$(gallery).css('width',totalWidth);
	
	totalWidth = num;
	
}


//表示しきれないサムネイルの削除
function removeTmb(n){
	
	for(var i = n; i < tmbList.length; i++){
		$(tmbList[i]).remove();
	}
}


function createTmb(){
	
	for(i = 0 ; i < nowTmbList.length ; i++){
		$(gallery).append(nowTmbList[i]);
		
		var box=$(nowTmbList[i]).children();
		var title =$(nowTmbList[i]).children().children();
		title = $(title).attr('title');
		new Gallery_tmb(box,title);
	}
	
	$(gallery).animate({
				   'opacity':1
				   },1000,"linear"
				   )
	reverseFlg = 'next';
	
	//alert('no (next) >>'+no);
}


function createPrevTmb(){
	
	for(i = 0 ; i < nowTmbList.length ; i++){
		$(gallery).prepend(nowTmbList[i]);
		
		var box=$(nowTmbList[i]).children();
		var title =$(nowTmbList[i]).children().children();
		title = $(title).attr('title');
		new Gallery_tmb(box,title);
	}
	
	$(gallery).animate({
				   'opacity':1
				   },1000,"linear"
				   )
	
	reverseFlg = 'prev';
	
	//alert('no (prev) >>'+no);
}



function nextGallery(){
	
	$(gallery).animate({
					   'opacity':0
					   },1000,"linear",changeNextTmb
					   )
}

function prevGallery(){
	
	$(gallery).animate({
					   'opacity':0
					   },1000,"linear",changePrevTmb
					   )
}