//変数設定
var d = document;
var userAgent = navigator.appName.toUpperCase();
var capArray = new Array();
var listArray = new Array();
var upperLayer = 2;
var middleLayer = 1;
var lowerLayer = 0;
var expHeight = 600;		//説明領域高さ
var incHeight = 1;			//クリッピング速度
var hCount = 0;
var poseTime = 10;

window.onload = function(){
	capArray = d.getElementById("main").getElementsByTagName("li");

	//displayExp();

	//サムネイルにイベントリスナーを組み込む
	listArray = d.getElementById("navi").getElementsByTagName("img");
	for(i=0; i<listArray.length; i++){
		addEvent(listArray[i], "click", changeImg);
	}

	//写真にイベントリスナーを組み込む
	addEvent(d.getElementById("mainImage"), "click", hiddenImg);
}
//写真ソースを切替える
function changeImg(e){
	var node = getTarget(e);
	var ptn = '(.+)_s(.+)';		//正規表現を使ってsrcを合成
	var reg = new RegExp(ptn);
	var matchArray = node.src.match(reg);
	var nextSrc = matchArray[1] + matchArray[2];

	//写真の入れ替え
	d.getElementById("mainImage").src = nextSrc;

	//説明の入れ替え前段(全て非表示）
	for(i=0; i<capArray.length; i++){
		capArray[i].style.display = "none";
	}

	//説明の入れ替え後段(srcの合致で順番を得て説明を表示
	for(i=0; i<listArray.length; i++){
		if(listArray[i].src == node.src){
			capArray[i].style.display = "block";
		}
	}

	//写真層を表へ
	changeZ(upperLayer, middleLayer);
}
//写真層を裏へ
function hiddenImg(){
	changeZ(middleLayer, upperLayer);
}
//z-indexを切替える
function changeZ(index1, index2){
	d.getElementById("main").style.zIndex = index1;
	d.getElementById("navi").style.zIndex = index2;
}
//説明ブロックを表示する(clip版)
function displayExp(){
	if(hCount > expHeight){
		return;
	}
	d.getElementById("explanation").style.clip = "rect(auto,auto," + hCount + "px,auto)";
	hCount += incHeight;
	setTimeout("displayExp()", poseTime);
}
//イベントリスナーを追加
function addEvent(node, evt, func){
	if(node.addEventListener){
		node.addEventListener(evt, func, false);
	}else if(node.attachEvent){
		node.attachEvent("on" + evt, func);
	}
}
//イベントが発生した要素を取得
function getTarget(e){
	if(e.target){
		return e.target;
	}else if(e.srcElement){
		return e.srcElement;
	}
}