﻿
/* tmb(サムネイル) の設定
============================================================*/
var tmbAction = function(){
	
	// プリロードした画像を入れる配列
	var pre_faceImg = [];	
	for(var i=0; i<29; i++){
		// キャッシュイメージ配列作成
		pre_faceImg[i] = new Image();
		pre_faceImg[i].src = "img/top_face" + i + ".jpg";
	}

	
	// 各サムネイルにアクションを与える
	var setAction = function(tmb, i){
		
		// ブラウザのデフォルトアクションをリセット
		tmb.onclick = function(){ return false; }
		
		// 各モーションの素になるオブジェクト生成
		var tmbFx = new Fx.Style(tmb, "opacity", {duration: 250, wait: false});
		var iniFx = new Fx.Style($("iniCmt"), "opacity", {duration: 200, wait: false});
		var partFx = new Fx.Style($("partCmt"), "opacity", {duration: 200, wait: false});
		var faceFx = new Fx.Style($("faceImg"), "opacity", {duration: 250, wait: false});
				
		// サムネイルにアクション設定
		tmb.addEvents({
			"mouseenter": function(){
				
				/* <a>タグのhref属性から顔の画像のsrcを生成 */
				var tmbHref = this.href;
				var dot = tmbHref.lastIndexOf(".");
				var ub = tmbHref.lastIndexOf("_");
				var phNum = tmbHref.substring(ub + 1, dot);
				phNum = phNum.replace("cmt", "").toInt();
				
				var faceSrc = "img/top_face" + phNum + ".jpg";
				
				// windowオブジェクトのプロパティということを明示しなくちゃいけない？
				if(window.sto) clearTimeout(window.sto);
				
				cmtSrc = tmb.href;
				$("partCmtImg").src = cmtSrc;
				tmbFx.start(0.5);
				iniFx.start(0.001).chain(function(){
					partFx.start(0.999);
				});
				
				// 顔の切り替え
				faceFx.start(0.001).chain(function(){
					$("faceImg").src = faceSrc;
					faceFx.start(0.999);
				});
			},
			"mouseout": function(){
				cmtSrc = "";
				
				tmbFx.start(0.999);

				var resetOpacity = function(){
					partFx.start(0.001).chain(function(){
						iniFx.start(0.999);
					});
				}
				
				// 処理を遅らせる(GlobalのプロパティにタイマーID設定)
				sto = setTimeout(resetOpacity, 150);

			}
		});
	}
	
	// サムネイルを取得し、それぞれに機能を追加
	var tmbList = $$("#faceList li a");
	tmbList.each(setAction);

	// 最初に画面が表示された時の顔をランダムで選ぶ
	var rndm = Math.ceil(Math.random() * 28);
	$("faceImg").src = "img/top_face" + rndm + ".jpg";

}


window.addEvent("domready", tmbAction);
