(function(){
	DOM.ready(function(){
		var doms = document.getElementsByClassName("trs-high-defi-pics");
		for(var i = 0; i < doms.length; i++){
			var box = doms[i];
			initHighDefPic(box);
		}
		Event.observe(document.body,'click', dowithButtonClick);
		Event.observe(document.body,'mouseover', scrollThumbImg);
		Event.observe(document.body,'mouseout', stopScroll);
	});
})();
function initHighDefPic(box){
	var showImgEl = document.getElementsByClassName("pic",box)[0];
	var hiddenEl = document.getElementsByClassName("autoSwitchTime",box)[0];
	var autoChangeImgTime = parseInt(hiddenEl.value)*1000;
	var picHeight = document.getElementsByClassName("picHeight",box)[0].value;
	picHeight = parseInt(picHeight)?(parseInt(picHeight)+"px"):"auto";
	var picWidth = document.getElementsByClassName("picWidth",box)[0].value;
	picWidth =  parseInt(picWidth)?(parseInt(picWidth)+"px"):"auto";
	changeShowImg(showImgEl,0);
	var showImgElParent = document.getElementsByClassName("image",box)[0];
	var showImgEl = document.getElementsByClassName("pic",box)[0];showImgEl.style.height = picHeight;showImgEl.style.width = picWidth;
	autoShowImg(showImgElParent,autoChangeImgTime);
}
function autoShowImg(showImgElParent,autoChangeImgTime){
	autoChangeImgTime = autoChangeImgTime || 10000 ;
	var showImgElParentId = showImgElParent.id;
	var thumbnailEl = $(showImgElParentId+"-thumb");
	var thumbnailImgs = document.getElementsByClassName('img',thumbnailEl);thumbnailImgs[0].style.border ="2px solid white";
	var boxEl = findItem(showImgElParent,'boxCls');
	boxEl.autoChange = setInterval(function(showImgElParent){
		var showImgEl = showImgElParent.getElementsByTagName("img")[0];
		changeShowImg(showImgEl, 1);
	}.bind(window,showImgElParent),autoChangeImgTime);
}
function changeShowImg(currShowImg, director){
	var targetThumbImgEl = findTargetImg(currShowImg, director);
	if(targetThumbImgEl == null){
		return;
	}
	changeShowImgToTarget(currShowImg, targetThumbImgEl);
}
function changeShowImgToTarget(currShowImg, targetThumbImg){	currShowImg.src = targetThumbImg.src;
	var targetIndex = targetThumbImg.getAttribute("index");
	currShowImg.setAttribute("index", targetIndex);
	changeDesc(currShowImg, targetThumbImg);
	var currShowImgId = currShowImg.id;
	var thumbnailEl = $(currShowImgId+"-thumb");
	var thumbnailImgs = document.getElementsByClassName('img',thumbnailEl);
	for(var i = 0;i<thumbnailImgs.length;i++){
		var temp = thumbnailImgs[i];
		var borderStyle = temp.style.border;
		if(borderStyle){temp.style.border = "";}
		if(targetIndex == temp.getAttribute("index")){			temp.style.border = "2px solid white";
		}
	}
}
function findTargetImg(currShowImg, director){
	if(!currShowImg)
		return null;
	var showImgElId = currShowImg.id;
	var thumbParentId = showImgElId + "-thumb";
	var infoElId = showImgElId + "-info";
	var currIndex = currShowImg.getAttribute("index");
	var targetIndex = parseInt(currIndex) + parseInt(director);
	var thumbParentEl = $(thumbParentId);
	var thumbImgs = thumbParentEl.getElementsByTagName('img');
	if(targetIndex > thumbImgs.length){
		return thumbImgs[0];
	}
	if(targetIndex < 1){
		return thumbImgs[thumbImgs.length-1];
	}
	for(var i=0;i<thumbImgs.length;i++){
		var thumbImg = thumbImgs[i];
		if(thumbImg.getAttribute("index") == targetIndex){
			return thumbImg;
		}
	}
	return currShowImg;
}
function changeDesc(showImgEl, targetThumbImg){
	var infoEl = $(showImgEl.id + "-info");
	var targetTitleDesc = targetThumbImg.getAttribute("titleinfo");
	var targetAbsDesc = targetThumbImg.getAttribute("absinfo");
	var sTemplate = '<div class="title">{0}</div><span>&nbsp; &nbsp; {1}</span>';
	var htmlStr = String.format(sTemplate,targetTitleDesc,targetAbsDesc);
	infoEl.innerHTML = htmlStr;
	hideDesc(infoEl);
	if(!window.oDelayedTask){
		window.oDelayedTask = new com.trs.DelayedTask();
	}
	window.oDelayedTask.delay(700, showDesc, null, [infoEl]);
}

function dowithButtonClick(eve){
	var targetEl = Event.element(eve);
	var boxEl ;
	if(Element.hasClassName(targetEl,"preimg")){
		boxEl = findItem(targetEl,"boxCls");
		clearInterval(boxEl.autoChange);
		var targetClass ="preimg";
		dowithChangeImg(targetEl,targetClass);
		return;
	}
	if(Element.hasClassName(targetEl,"nextimg")){
		boxEl = findItem(targetEl,"boxCls");
		clearInterval(boxEl.autoChange);
		var targetClass = "nextimg";
		dowithChangeImg(targetEl,targetClass);
		return;
	}
	if(targetEl.className == "img"){
		boxEl = findItem(targetEl,"boxCls");
		clearInterval(boxEl.autoChange);
		var targetClass = "img";
		dowithChangeImg(targetEl,targetClass);
		return;
	}
}
function dowithChangeImg(targetElement, targetClass){
	if(targetClass == "preimg" || targetClass =="nextimg"){
		var parentEl = findItem(targetElement,'parent');
		var imgEl = parentEl.getElementsByTagName('img')[0];
		if(imgEl){
			if(targetClass == "preimg"){
				changeShowImg(imgEl, -1);
			}
			if(targetClass == "nextimg"){
				changeShowImg(imgEl, 1);
			}
		}
	}
	if(targetClass == "img"){
		var thumbParentEl = findItem(targetElement, "thumbnail");
		var relationShowImgId = thumbParentEl.getAttribute("relative");
		var showImgEl = $(relationShowImgId);
		changeShowImgToTarget(showImgEl, targetElement);
	}
}
/*圖片描述區浮動開始*/
function set(e, h, s) {
	var oh=e.offsetHeight;
	var redirect=oh > h ? -1: 1;
	clearInterval(e.si);
	e.si=setInterval(function(){tw(e,h,redirect,s)},10);
}
function tw(e, targetHeight, redirect, s) {
	var currHeight = e.offsetHeight;
	//如果當前的高度與目標的高度一致，則停止處理
	if(currHeight==targetHeight){
		clearInterval(e.si)
	}else{ 
	//否則改變其高度
		e.style.height= currHeight + (Math.ceil(Math.abs(targetHeight-currHeight)/s)*redirect)+'px';
	}
}
function showDesc(el){
	el.style.height = "auto";
	var height = el.offsetHeight;
	el.style.height = 1; 
	set(el,height, 5);
}
function hideDesc(el){
	set(el,0,5);
}
/*圖片描述區浮動結束*/



/*圖片滾動開始*/
function scrollThumbImg(eve){
	//var currEvent = eve || window.eve;
	//var targetEl = currEvent.target || currEvent.srcElement;
	var targetEl = Event.element(eve);
	var className = targetEl.className;
	var thumbnailDv = findItem(targetEl,"thumbnailDv");
	var wrapDv = document.getElementsByClassName("wrapDv",thumbnailDv)[0];
	var thumbnails = document.getElementsByClassName('img',thumbnailDv);
	var thumbnailCount = thumbnails.length;
	var boxEl = findItem(wrapDv,'boxCls');
	if(className == "thumbnailDv1"){
		boxEl.scrollTime1 = setInterval(function(){srool2Right(wrapDv,thumbnailCount);},10);
	}
	if(className == "thumbnailDv2"){
		boxEl.scrollTime2 = setInterval(function(){sroll2Left(wrapDv,thumbnailCount)},10);
	}
	if(Element.hasClassName(targetEl,"preimg") || Element.hasClassName(targetEl,"nextimg")){
		Element.removeClassName(targetEl,"first");
		Element.addClassName(targetEl,"last");
	}
}
/*圖片滾動結束*/
function stopScroll(eve){
	var targetEl = Event.element(eve);
	var boxEl = findItem(targetEl,'boxCls');
	var className = targetEl.className;
	if(className == "thumbnailDv1"){
		clearInterval(boxEl.scrollTime1);
	}
	if(className == "thumbnailDv2"){
		clearInterval(boxEl.scrollTime2);
	}
	if(Element.hasClassName(targetEl,"preimg") || Element.hasClassName(targetEl,"nextimg")){
		Element.removeClassName(targetEl,"last");
		Element.addClassName(targetEl,"first");
	}
}
function sroll2Left(wrapDv,thumbnailCount){
	var widths = thumbnailCount*(4*2+100)-100;
	if(wrapDv.scrollLeft > widths){
		return;//作判斷，假如顯示的是最後一個圖片的話，就停止滾動
	}
	wrapDv.scrollLeft += 5;
}
function srool2Right(wrapDv,thumbnailCount){
	var widths = thumbnailCount*(16*2+100)-100;
	if(wrapDv.scrollLeft <=5){
		return;//假如wrapDv元素的scrollLeft屬性小於5的話，就停止滾動
	}
	wrapDv.scrollLeft -= 5;
}