////////////////////////////////////////////////////////
//
// 対象エレメントの背景画像切替アニメーション用jQuery
// 対象エレメント直下のdivに背景画像をロードし、アルファで切り替えるアニメーション用jQuery
//
////////////////////////////////////////////////////////

jQuery.extend({
	BgImageTransitions: []
});

jQuery.fn.extend({

	// a_src: imgパス(配列の場合はスライドショー)
	// a_animDuration: アニメーション時間
	// a_waitDuration: ウェイト時間
	// a_loop: ループ判定(スライドショーの場合)
	// a_callBackFunc: 背景切り替わり完了時のコールバック関数
    BgImageTransition: function(a_src, a_animDuration, a_waitDuration, a_loop, a_callBackFunc)
	{
		// 配列か、文字列でない場合はreturn;
		if( !(a_src instanceof Array) && typeof a_src != "string" )
			return jQuery;
		
		if( a_animDuration == undefined )
			a_animDuration = 0;
		if( a_waitDuration == undefined )
			a_waitDuration = 500;
		if( a_loop == undefined )
			a_loop = false;
			
		var tgtElement = this;
		var callBackFunc = a_callBackFunc;
		var animDuration = a_animDuration;
		var waitDuration = a_waitDuration;
		var loop = a_loop;
		var data = null;
		
		// データ取得
		if( !jQuery.BgImageTransitions[this.attr('id')] )
		{
			data = new Object();
			// div名固定
			data._divTgt = ".bg";
			// loading中に表示するdiv名
			data._divLoading = ".loading";
			// アニメーション再生フラグ
			data._isPlay = false;
			data._tempImage = null;
			data._preIdx = 0;
			data._idx = 0;
			data._src = "";
			data._timerId = null;
			data._complete = false;
			jQuery.BgImageTransitions[this.attr('id')] = data;
		}
		else
			data = jQuery.BgImageTransitions[this.attr('id')];
		
		if( typeof a_src == "string" )
		{
			data._src = new Array(a_src);
		}
		else
			data._src = a_src;
			
		// 枚数が1枚の場合は、ループさせない
		if( data._src.length <= 1 )
			loop = false;
			
		if( data._timerId )
		{
			clearTimeout(data._timerId);
			data._timerId = null;
		}
		
		data._preIdx = 0;
		data._idx = 0;
		
		if( data._tempImage )
		{
			$(data._tempImage).load = null;
			data._tempImage = null;
			delete data._tempImage;
		}
		data._tempImage = new Image();
		
		// 画像ロード完了
		$(data._tempImage).load(function()
		{
			// Loading divを非表示
			$(data._divLoading, tgtElement).css({visibility:"hidden"});
			
			data._complete = true;
			data._isPlay = true;
			
			var tgt = $(data._divTgt, tgtElement);
			
			if( animDuration )
			{
				// 前面のdivに画像を設定
				tgt.stop()
				.css({'backgroundImage':'url('+data._tempImage.src+')', visibility:"visible",opacity:'0'})
				.animate( {opacity: '1'}, animDuration, 'linear', 
				function()
				{
					data._isPlay = false;
					chengeTgt();	
					data._timerId = setTimeout(wait,waitDuration);
				});
			}
			else
			{
				// 前面のdivに画像を設定
				tgt.css({'backgroundImage':'url('+data._tempImage.src+')', visibility:"visible",opacity:'0'})
				
				chengeTgt();
				data._timerId = setTimeout(wait,waitDuration);
			}
			
			// コールバック		
			if( callBackFunc )
				callBackFunc( {target:$(tgtElement), prevIdx:data._preIdx, currentIdx:data._idx});
		});
		
		// アニメーションのターゲット切替
		function chengeTgt()
		{
			var tgt = $(data._divTgt,tgtElement);
			
			if( data._isPlay )
				tgt.stop();
				
			data._isPlay = false;
			
			// 前面のdivを非表示
			tgt.css({visibility:"hidden"});
			// thisの背景画像にdivの背景画像をセット
			if( data._complete )
			{
				tgtElement.css({'backgroundImage':'url('+data._tempImage.src+')'});
			}
		}
		
		// 画像表示wait完了
		function wait()
		{
			if( data._src == null )
				return;
				
			var isLoad = true;
			data._preIdx = data._idx;
			data._idx++;
			
			// 複数枚ある状態で、最後の画像になった場合
			if( data._idx >= data._src.length )
			{
				// ループの場合
				if( loop )
					data._idx = 0;
				else
				{
					isLoad = false;
					data._idx = data._src.length;
				}
			}
			else if(data._src.length<=1)
			{
				isLoad = false;
				data._idx = 0;
			}
						
			if( isLoad )
				loadImage();
		}
		
		// 画像ロード開始
		function loadImage()
		{
			// 切替アニメーション中にコールされた場合
			if( data._isPlay )
				chengeTgt();
				
			if( data._idx < data._src.length )
			{
				// Loading divを表示
				$(data._divLoading, tgtElement).css({visibility:"visible"});
			
				data._complete = false;
				data._tempImage.src = data._src[data._idx].toString();
			}
		}
				
		// 画像ロード
		loadImage();
		
        return jQuery;
    },
    
    BgImageTransitionStop: function()
    {
		var data = null;
		var tgtElement = this;
				
		if( jQuery.BgImageTransitions[tgtElement.attr('id')] )
		{
			data = jQuery.BgImageTransitions[tgtElement.attr('id')];
	
			// Loading divを非表示
			$(data._divLoading, tgtElement).css({visibility:"hidden"});
						
			if( data._timerId )
			{
				clearTimeout(data._timerId);
				data._timerId = null;
			}
			
			if( data._src == null )
				return jQuery;
				
			var tgt = $(data._divTgt,tgtElement);
			
			if( data._isPlay )
			{
				tgt.stop();
			
				tgt.css({visibility:"hidden"});
				if( data._complete )
					tgtElement.css({'backgroundImage':'url('+data._tempImage.src+')'});
			}
			data._isPlay = false;
			data._complete = false;
			data._src = null;
		}
		return jQuery;
    }
});