/* SLIDE CONTROL */

// ローディング画像パス
var WORKS_LOADING_SPINER_IMG = "/images/img-loading.gif";

// スライド画像
var WORKS_SLIDE_INTERVAL = 8000;		// スライド自動切り替えインターバル
var WORKS_SLIDE_FX_TIME = 1000;			// スライド切り替えトランジションタイム

// 画像選択ボタン
var WORKS_SLIDE_BTN_FX_DELAY = 500;		// スライド自動時ボタン点滅開始時間
var WORKS_SLIDE_BTN_FX_TIME = 400;		// ボタン点滅トランジションタイム
var WORKS_SLIDE_BTN_INTERVAL = 1200;	// ボタンクリック時点滅開始インターバル

// トランジション用不透明度の開始、終了値
var WORKS_SLIDE_OPACITY_MAX = 0.999; /* 何故か 1 では不具合あり(MacのFireFoxで文字が一瞬太くなる) */
var WORKS_SLIDE_OPACITY_MID = 0.3;
var WORKS_SLIDE_OPACITY_MIN = 0.001; /* 何故か 0 では不具合あり */

// 現在の選択値
var works_slide_index = 0;
var works_slide_count;

// 画像情報格納用
var works_imgpath = [];
var works_imgsrc  = [];
var works_btnElement   = [];

// タイマー関連
var works_intervalTimer;
var works_stopflg = false; // スライド停止フラグ

// トランジションオブジェクト
var works_fx_img;
var works_fx_btn;
var works_fx_slideCtr;


/* ワークスリストオブジェクト */
var WorksSlide = {

	/* 初期化処理
	**************************************/
	init: function(){
	
		// サムネイルリストからリストの用素数を取得
		// その後、リストの中身（Anchor)から画像のURLを抜き出して、
		// works_imgpath配列に格納
		var unit = document.getElements('#slide_list a');
		works_slide_count = unit.length;
		for (var i=0 ; i<works_slide_count ; i++) {

			// サムネイル指定ボタンを取得して、
			// クリックとマウスアウトイベントを追加			
			// また配列制御用の添え字も埋め込み
			works_imgpath[i] = unit[i];
			works_btnElement[i] = document.getElementById(unit[i].getProperty('id')); // ボタンAnchorのID
			works_btnElement[i].addEvent('click', WorksSlide.anchorClick);
			works_btnElement[i].addEvent('mouseout', WorksSlide.anchorMouseout);
			works_btnElement[i].index = i;
		}

		// ローディングスピナー表示		
		new Asset.image(WORKS_LOADING_SPINER_IMG,{
			onload: function(){

				// 読み込み完了で、ローディング画像を表示
				$("slide_div").setHTML("<img src='" + this.src + "' alt='now loading...' id='works_slide_progress' />");

				// 画像先読み処理
				new Asset.images(works_imgpath, {
				
					// 読み込み中
					onProgress: function(i) {
						// 読み込んだものから作業用配列に格納
						works_imgsrc[i] = this;
					},
					
					// 読み込み完了
					onComplete: function() {
		
						/* JavaScript使用時はiframeを非表示(実際は画面外に表示)にし、替わりにimgを使用する */
						/* ※ iframeの背景(background-image)をIEだと変更できないため */
						/*   ちなみにiframe.srcの変更でも同様の処理は可能だが、faviconが点滅するため見ため的によくない */
						$("slide_div").setHTML("<img src='" + works_imgsrc[works_slide_index].src + "' id='slide_frame' alt='図' /><iframe id='slide_frame_dummy' name='slide_frame'></iframe>");
		
						// サムネイルクリック時のスライドオブジェクトを作成しておく
						works_fx_slideCtr = new Fx.Slide("slide_frame", {mode: 'horizontal'});
		
					}
				});	
			}
		});


	},

	/* タイマスタート
	**************************************/
	start: function(){

		works_intervalTimer = setInterval("WorksSlide.transition()",WORKS_SLIDE_INTERVAL);
		
	},

	/* マウスアウト
	**************************************/
	anchorMouseout: function() {
	
		// スライド停止中の場合のみ処理
		if (works_stopflg){
			clearTimeout(works_intervalTimer);
			if(works_fx_btn!=null){
				works_fx_btn.stop();
				works_fx_btn.clearChain();
						 works_fx_btn = $(works_btnElement[works_slide_index]).effects({duration: 1, transition:Fx.Transitions.linear});

				works_fx_btn.start({'opacity': WORKS_SLIDE_OPACITY_MAX});
			}
			works_stopflg = false;
			$("slide_frame").src= works_imgsrc[works_slide_index].src;

			works_fx_slideCtr.stop();
			works_fx_slideCtr.show();

			WorksSlide.start();
		}
	},
	
	/* マウスクリック
	**************************************/
	anchorClick: function() {

		// 停止フラグＯＮ
		works_stopflg = true;

		// タイマー停止
		clearInterval( works_intervalTimer );
		works_intervalTimer = null;

		// トランジション停止
		if(works_fx_img!=null){works_fx_img.stop();}
		if(works_fx_btn!=null){works_fx_btn.stop();works_fx_btn.clearChain();}

		// 点滅中やフェードアウト中のものを元に戻す
		if(works_fx_btn!=null){
			works_fx_btn.start({'opacity': WORKS_SLIDE_OPACITY_MAX});
		}
		works_fx_img = $("slide_frame").effects({duration: 1, transition:Fx.Transitions.linear});
		works_fx_img.start({'opacity': WORKS_SLIDE_OPACITY_MAX});
			
		
		/* 画像をスライド
		*****************************/

		// 背景に変更先画像をセット
		$("slide_div").style.background = "url(" + works_imgsrc[$(this).index].src + ") no-repeat";
		
		// スライドに現在の画像をセット
		$("slide_frame").src= works_imgsrc[works_slide_index].src;
		works_fx_slideCtr.show();
		
		// スライド
		works_fx_slideCtr.toggle();
		
		// 現在値を変更先の値に変更
		works_slide_index = $(this).index;
		
		// 選択中のボタンを点滅
		WorksSlide.blinkButton();
	},
	
	/* ボタン点滅（選択中)	
	**************************************/
	blinkButton: function() {
		works_fx_btn = $(works_btnElement[works_slide_index]).effects({duration: WORKS_SLIDE_BTN_FX_TIME, transition:Fx.Transitions.linear});
		works_fx_btn.start({
			'opacity': WORKS_SLIDE_OPACITY_MID
		}).chain(function(){
			this.start ({
				'opacity': WORKS_SLIDE_OPACITY_MAX
			});
		});
		if (works_stopflg){ works_intervalTimer = setTimeout("WorksSlide.blinkButton()",WORKS_SLIDE_BTN_INTERVAL); }
	},
	
	/* トランジション
	**************************************/
	transition: function() {

		/* 画像
		*****************************/

		var temp_index = works_slide_index + 1;
		if (temp_index >= works_slide_count) temp_index = 0;		
		works_slide_index++;
		if (works_slide_index >= works_slide_count) works_slide_index = 0;

		works_fx_img = $("slide_frame").effects({duration: WORKS_SLIDE_FX_TIME, transition:Fx.Transitions.linear});
		works_fx_img.start({
			'opacity': WORKS_SLIDE_OPACITY_MIN
		}).chain(function(){
		
			$("slide_frame").src= works_imgsrc[temp_index].src;

			this.start ({
				'opacity': WORKS_SLIDE_OPACITY_MAX
			});

		});
		
		$("slide_div").style.background = "url(" + works_imgsrc[temp_index].src + ") no-repeat";
		
		/* ボタン
		*****************************/

		// 現在表示中のボタンを点滅させる
		works_fx_btn = $(works_btnElement[temp_index]).effects({duration: WORKS_SLIDE_BTN_FX_TIME, transition:Fx.Transitions.linear});
		works_fx_btn.start({
		}).chain(function(){
			this.start.delay(WORKS_SLIDE_BTN_FX_DELAY, this, {
			'opacity': WORKS_SLIDE_OPACITY_MID
			});		
		}).chain(function(){
			this.start ({
				'opacity': WORKS_SLIDE_OPACITY_MAX
			});
		}).chain(function(){
			this.start ({
				'opacity': WORKS_SLIDE_OPACITY_MID
			});
		}).chain(function(){
			this.start ({
				'opacity': WORKS_SLIDE_OPACITY_MAX
			});
		});


	}

	
}

window.addEvent('domready', WorksSlide.init);
window.addEvent('load', WorksSlide.start);