/* #####################################################################################

	NAME:		thumbnail.js
	
		NOTES:	サムネイル画像一覧表示の管理オブジェクト
				
	
	
	AUTHOR:		Yoshikatsu Iyo.		2009/08/28
									Copyright, PorkHamlet Co.Ltd. All rights reserved.

##################################################################################### */


/*~~< variable(s) >~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~< object(s) >~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
function ObjThumbnail(	infoTbl,	// サムネイル情報の配列
						length,		// 総画像数
						left,		// レフト位置オフセット
						dispNum,	// 画像の表示枚数
						dispSpan,	// 画像の表示間隔
						moveNum,	// １度のスライドで動く画像枚数
						time,		// スライドの間隔
						parentID,	// 親HTMLオブジェクトID
						nowLoading,	// ローディング画像名
						clickFunc	// サムネイルがクリックされた際にコールされる関数
){
	this.srcTbl					=	infoTbl;
	this.length					=	length;
	this.left					=	left;
	this.dispNum				=	dispNum;
	this.dispSpan				=	dispSpan;
	this.moveNumber				=	moveNum;
	this.moveDistance			=	dispSpan * moveNum;
	this.time					=	time;
	this.parentID				=	parentID;
	this.nowLoading				=	nowLoading;
	this.clickFunc				=	clickFunc;
	this.imageObjLst			=	new Array();
	this.startCount				=	0;
	this.fadeCount				=	0;
	this.scrollCount			=	0;
	this.stopLoop				=	false;
	this.animeID				=	"undefined";
}

/*~~< program(s) >~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* =========================================================================**
	ObjThumbnail.prototype.start
		notes:	サムネイルの読み込み、表示スタート
				
*========================================================================== */
ObjThumbnail.prototype.start = function(){
	var		iobjThumbnail	=	this;
	var		objParent		=	document.getElementById(this.parentID);
	var		nowLoading		=	this.nowLoading;
	
	setTimeout(	function(){
		iobjThumbnail.work( 0 );
	}, 10 );
	
}


/* =========================================================================**
	ObjThumbnail.prototype.work
		notes:	サムネイルの読み込み、表示
				
*========================================================================== */
ObjThumbnail.prototype.work = function( cnt ){
	var		iobjThumbnail	=	this;
	var		objParent		=	document.getElementById(iobjThumbnail.parentID);
	var		nowLoading		=	iobjThumbnail.nowLoading;
	
	var		objImage		=	document.createElement("img");
	var		top				=	0;
	var		left			=	cnt * iobjThumbnail.dispSpan;
	var		fFade			=	( iobjThumbnail.dispNum > cnt ) ? true : false;
	var		time			=	( iobjThumbnail.srcTbl.length * 10 ) + ( 10 * cnt );
	
	if( iobjThumbnail.srcTbl.length > cnt )
	{
		var		imageFile		=	iobjThumbnail.srcTbl[ cnt ][ "smallurl" ];
		var		imageID			=	iobjThumbnail.srcTbl[ cnt ][ "imageid" ];
		var		detailFile		=	iobjThumbnail.srcTbl[ cnt ][ "detailurl" ];
		var		blogURL			=	iobjThumbnail.srcTbl[ cnt ][ "blogurl" ];
		var		worksURL		=	iobjThumbnail.srcTbl[ cnt ][ "worksurl" ];
		var		briefURL		=	iobjThumbnail.srcTbl[ cnt ][ "briefurl" ];
		var		name			=	iobjThumbnail.srcTbl[ cnt ][ "name" ];
		var		heading			=	iobjThumbnail.srcTbl[ cnt ][ "heading" ];
		
		iobjThumbnail.setupImage( objImage, imageID, top, left, nowLoading );
		iobjThumbnail.loadImage( objImage, imageID, imageFile, fFade, time, detailFile, blogURL, worksURL, briefURL, name, heading );
	}
	else
	{
		iobjThumbnail.setDummyImage( objImage, top, left );
	}
	
	objParent.appendChild( objImage );
	iobjThumbnail.imageObjLst.push( objImage );
	
	iobjThumbnail.startCount++;
	cnt++;
	
	if( cnt < iobjThumbnail.length )
	{
		setTimeout(	function(){
			iobjThumbnail.work( cnt );
		}, 10 );
	}
	
}


/* =========================================================================**
	ObjThumbnail.prototype.setupImage
		notes:	サムネイルの読み込み前準備
				
*========================================================================== */
ObjThumbnail.prototype.checkStartup = function()
{
	if( this.startCount < this.length )
	{
		return false;
	}
	if( 0 < this.fadeCount )
	{
		return false;
	}
	return true;
}

/* =========================================================================**
	ObjThumbnail.prototype.setupImage
		notes:	サムネイルの読み込み前準備
				
*========================================================================== */
ObjThumbnail.prototype.setupImage = function( objImage, imageID, top, left, nowLoading )
{
	var		iobjThumbnail	=	this;
	
	objImage.setAttribute( 'id', imageID );
	objImage.className		=	"thumbnails";
	objImage.style.top		=	top + "px";
	objImage.style.left		=	left + "px";
	
	if( "undefined" != nowLoading )
	{
		objImage.src 			=	nowLoading;
		objImage.style.width	=	"280px";
		objImage.style.height	=	"366px";
	}
}


/* =========================================================================**
	ObjThumbnail.prototype.setupImage
		notes:	ダミー画像の読み込み
				
*========================================================================== */
ObjThumbnail.prototype.setDummyImage = function( objImage, top, left )
{
//	objImage.setAttribute( 'id', imageID );
//	objImage.className		=	"thumbnails";
	objImage.src 			=	"/photographer/common/image/img-works-dummy.gif";
	objImage.style.top		=	top + "px";
	objImage.style.left		=	left + "px";
	objImage.style.position	=	"absolute";
}


/* =========================================================================**
	ObjThumbnail.prototype.destroy
		notes:	サムネイルの破棄
				
*========================================================================== */
ObjThumbnail.prototype.destroy = function(){
	var		objParent	=	document.getElementById(this.parentID);
	for( i in this.imageObjLst )
	{
		objParent.removeChild( this.imageObjLst[i] );
	}
}


/* =========================================================================**
	ObjThumbnail.prototype.loadImage
		notes:	サムネイル読み込み
				
*========================================================================== */
ObjThumbnail.prototype.loadImage = function( objImage, imageID, imageFile, fFade, time, detailFile, blogURL, worksURL, briefURL, name, heading )
{
	var		iobjThumbnail	=	this;
	
	setTimeout(	function(){
					var		imgPreloader 	=	new Image();
							
					imgPreloader.onload		=	function(){
													
													objImage.src 			=	imageFile;
// for IE8 画像サイズが取れない
//													objImage.style.width	=	imgPreloader.width + "px";
//													objImage.style.height	=	imgPreloader.height + "px";
													
													imgPreloader.onload		=	function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
													
													
													if( true == fFade )	// フェードする
													{
														iobjThumbnail.fadeCount++;
														
														Anime.setOpacity( objImage, 0 );
														setTimeout(	function(){
																		Anime.fadeIn( objImage, 1, function(){
																										iobjThumbnail.fadeCount--;
																									}
																		);
														}, 10 );
														
													}
													else				// フェードしない
													{
														Anime.setOpacity( objImage, 1 );
													}
													
													addListener( objImage, 'click', function(e) {
																							if( !e )	e	=	window.event;
																							var clickObj	=	getSource(e);
																							if( clickObj.id == imageID )
																							{
																								var		objDetail	=	new ObjDetail( detailFile, blogURL, worksURL, briefURL, name, heading );
																								iobjThumbnail.clickFunc( objDetail );
																							}
																					});
												};
					
					imgPreloader.src = imageFile;
	}, time );
	
}


/* =========================================================================**
	ObjThumbnail.prototype.scroll
		notes:	サムネイルを順スライド
				
*========================================================================== */
ObjThumbnail.prototype.scroll = function( time ){
	this.move( 1, time );
	
}


/* =========================================================================**
	ObjThumbnail.prototype.reverse
		notes:	サムネイルを逆スライド
				
*========================================================================== */
ObjThumbnail.prototype.reverse = function( time ){
	this.move( -1, time );
	
}


/* =========================================================================**
	ObjThumbnail.prototype.move
		notes:	サムネイルを指定方向にスライド
				
*========================================================================== */
ObjThumbnail.prototype.move = function( rate, time ){
	
	if( true == this.checkStartup() )
	{
		if( "undefined" != this.animeID )
		{
			clearInterval( this.animeID );
		}
		
		
		
		
		
		var		moveNumber	=	this.moveNumber * rate;
		var		objLst		=	new Array();
		var		objNum		=	0;
		var		cntMax		=	this.dispNum + Math.abs(moveNumber);
		
		
		if( cntMax > this.imageObjLst.length )
		{
			cntMax	=	this.imageObjLst.length;
		}
		
		if( 0 > moveNumber )
		{
			objNum		=	this.scrollCount;
		}
		else
		{
			objNum		=	( this.scrollCount + this.dispNum - 1 ) % this.imageObjLst.length;
		}
		
		
		for( var cnt = 0 ; cnt < cntMax ; cnt++ )
		{
			var		objImage	=	this.imageObjLst[objNum];
			
			
			if( 0 > moveNumber )
			{
				var		left			=	this.left + ( this.dispSpan * cnt );
				objImage.style.left		=	left + "px";
				
				objNum++;
				objNum	%=	this.imageObjLst.length;
			}
			else
			{
				var		left			=	this.left - ( this.dispSpan * ( cnt + 1 - this.dispNum ) );
				objImage.style.left		=	left + "px";
				
				objNum--;
				if( 0 > objNum )
				{
					objNum		+=	this.imageObjLst.length;
				}
			}
			
			
			
			
			objLst.push( objImage );
			
		}
		
		
		
		
		
		cntMax		=	Math.abs(moveNumber);
		
		if( 0 > moveNumber )
		{
			objNum		=	this.scrollCount - 1;
		}
		else
		{
			objNum		=	this.scrollCount + this.dispNum;
		}
		
		if( 0 > objNum )
		{
			objNum	+=	this.imageObjLst.length;
		}
		objNum		%=	this.imageObjLst.length;
		
		
		for( cnt = 0 ; cnt < cntMax ; cnt++ )
		{
			var		objImage	=	this.imageObjLst[objNum];
			
			
			if( 0 > moveNumber )
			{
				var		left			=	this.left - ( this.dispSpan *  ( cnt + 1 ) );
				objImage.style.left		=	left + "px";
				
				objNum--;
			}
			else
			{
				var		left			=	this.left + ( this.dispSpan * ( this.dispNum + cnt ) );
				objImage.style.left		=	left + "px";
				
				objNum++;
			}
			if( 0 > objNum )
			{
				objNum	+=	this.imageObjLst.length;
			}
			objNum		%=	this.imageObjLst.length;
			
			
			
		}
		
		
		
		
		
		
		
		
		
		this.scrollCount	-=	moveNumber;
		if( 0 > this.scrollCount )
		{
			this.scrollCount	+=	this.imageObjLst.length;
		}
		this.scrollCount	%=	this.imageObjLst.length;
		
		
		
		
		
		var		iobjThumbnail	=	this;
		var		x_distance	=	this.moveDistance * rate;
		
		
		iobjThumbnail.animeID	=	setTimeout(	function(){
						Anime.slideImages( objLst, x_distance, iobjThumbnail );
		}, time );
		
		
		
	}
	
	
	
}


/* =========================================================================**
	ObjThumbnail.prototype.loop
		notes:	サムネイルのループ開始
				
*========================================================================== */
ObjThumbnail.prototype.loop = function(){

	var		iobjThumbnail	=	this;
	var		time		=	30;
	
	setInterval(	function(){
					iobjThumbnail.loopImages( -2 );
	}, time );
}


/* =========================================================================**
	ObjThumbnail.prototype.loopImages
		notes:	サムネイルのループ
				
*========================================================================== */
ObjThumbnail.prototype.loopImages = function( x_step ){
	

	if( false == this.stopLoop )
	{
		for( var cnt = 0 ; cnt < this.imageObjLst.length ; cnt++ )
		{
			var		elm		=	this.imageObjLst[ cnt ];
			var		x_pos	=	parseInt( elm.offsetLeft );
			
			var		new_x_pos	=	x_pos + x_step;
			
			if( -180 >= new_x_pos )
			{
				
//				var		ielm	=	elm;
//				Anime.setOpacity( ielm, 0 );
//				setTimeout(	function(){
//								Anime.fadeIn( ielm );
//				}, 100 );
				
				new_x_pos += ( this.imageObjLst.length * 180 );
			}
			
			elm.style.left	=	new_x_pos + "px";
		}
	}
}