// JavaScript Document

var indexWheelSRC = "images/index/"; //存放圖片的相對路近徑
/*
var imgs = new Array(); //存放IMG陣列
var imgsPositionX = new Array(); //IMG position X軸(px)
var imgsPositionY = new Array(); //IMG position Y軸(px)
var imgsTitle = new Array(); //IMG Title
var imgsUrl = new Array(); //IMG Url
var imgsTarget = new Array(); //IMG Target
*/
var imgParentObj; //img父物件
//var indexIconSrc = "images/index/"; //存放icon的相對路徑
var indexIconSrc = TemplatePath + TemplateFolder + "images/index/"; //存放圖片的路徑
var index_icon_off = "icon_kv_off.png";
var index_icon_on = "icon_kv_on.png";

var indexStay=6; //停留時間(秒)
var indexTransform=1.5; //轉換時間(淡入+淡出)秒
/*************************************************/
var indexImgs;//product img objs

var indexWheelStayTimerID;
var indexWheelShowTimerID;
var indexWheelHideTimerID;
var indexIconPages = document.createElement('div');
var indexWheelObj=[];
var indexShowImgOrder=0;
var indexHideImgOrder=0;
var indexOpacityValue;//不透明度值
/*
id(str) 轉換IMG id
showPages(bool) 是否顯示頁碼
X(int) X 軸 icon的left值
Y(int) Y 軸 icon的top值
*/
function initIndex(id,showPages,X,Y)
{
	 indexCreateImgEle(id);//建立圖片的id
	 indexCreatePageEle(showPages,X,Y);
	 
	 indexOpacityValue=100/(indexTransform*1000/100);
	
	 if(indexImgs.length > 0)
	 {
		 indexDisplayImg(indexShowImgOrder);
		 if(indexImgs.length > 1)
		 {
		 	indexWheelStayTimerID=setTimeout("indexImgWheel()",indexStay*1000);
		 }
	 }
}

function indexCreateImgEle(id)
{
 	imgParentObj=document.getElementById(id);
	indexImgs=imgParentObj.getElementsByTagName("img");
	
	 for(var i=0;i<indexImgs.length;i++)
	 {
		
		 indexImgs[i].border=0;
		 indexImgs[i].style.borderColor="#b1b1b1";
		 indexImgs[i].opacity=0;
		 indexImgs[i].style.position="absolute";
		 indexImgs[i].style.display="none";
		 indexImgs[i].style.zIndex=100;
		 indexImgs[i].style.opacity = indexImgs[i].opacity/100;
		 indexImgs[i].style.filter = 'alpha(opacity=' + indexImgs[i].opacity + ')';
		
		 if(indexImgs[i].longDesc)
		 {
			indexImgs[i].urllink=indexImgs[i].longDesc;
			indexImgs[i].target=indexImgs[i].className;
		
			 if(indexImgs[i].target!='')
			 {
				 indexImgs[i].style.cursor='pointer';
				 //objWheel[i]['kv'].target=wtargets[i];
				 if(indexImgs[i].target=='self')
				 {
					 indexImgs[i].onclick=function(){
					 location.href=this.urllink;
					 };
				 }
				 else if(indexImgs[i].target=='blank')
				 {
					 indexImgs[i].onclick=function(){
					 window.open(this.urllink);
					 };
				 }
			 }
		 }
		/*
		 if( indexWheelObj[i]['img']['url'] != "" )
		 {
			 if( imgsTarget[i] == 1 )
			 {
				 indexWheelObj[i]['img'].onclick = function()
				 {
					window.open( this.url );
				 }
			 }
			 else if( imgsTarget[i] == 0 )
			 {
				 indexWheelObj[i]['img'].onclick = function()
				 {
					location.href = this.url;
				 }
			 }//if
		 }//if
	 	 imgParentObj.appendChild(indexWheelObj[i]['img']);
		 */
	 }//for
	 
}
function indexCreatePageEle(showPages,X,Y)
{
	 if(!showPages)
	 {
	 
		X = 970 - indexImgs.length * 21;
	 
	 
		 //建立icons的主區塊
		 indexIconPages.style.position='absolute';
		 indexIconPages.style.left=X+'px';
		 indexIconPages.style.top=Y+'px';
		 indexIconPages.style.zIndex=1000;
		 imgParentObj.appendChild(indexIconPages);
			
		 //建立icon的子區塊
		 //判斷Img圖片數量，而顯示icon數量
		 for(var i=0;i<indexImgs.length;i++)
		 {
			 indexWheelObj[i]=new Object();
			 indexWheelObj[i]['page'] = document.createElement('div');
			 indexWheelObj[i]['page'].mouseover=indexIconSrc+index_icon_on;
			 indexWheelObj[i]['page'].mouseout=indexIconSrc+index_icon_off;
			 /* indexWheelObj[i]['page'].src=indexWheelObj[i]['page'].mouseout;
			 indexWheelObj[i]['page'].border=0;*/
			 indexWheelObj[i]['page'].style.backgroundImage='url('+indexWheelObj[i]['page'].mouseout+')';
			 indexWheelObj[i]['page'].style.width='15px';
			 indexWheelObj[i]['page'].style.height='15px';
			 //alert(indexWheelObj[i]['page'].style.width+'px and'+indexWheelObj[i]['page'].style.height+'px');
			 indexWheelObj[i]['page'].style.styleFloat='left';
			 indexWheelObj[i]['page'].style.cssFloat='left';
			 indexWheelObj[i]['page'].style.marginRight='6px';
			 indexWheelObj[i]['page'].style.cursor='pointer';
			 /*
			 indexWheelObj[i]['page'].style.textAlign='center';
			 indexWheelObj[i]['page'].style.color='#FFF';
			 indexWheelObj[i]['page'].style.fontSize='10px';
			 indexWheelObj[i]['page'].style.fontWeight='bold';
			 indexWheelObj[i]['page'].style.lineHeight='px';
			 */
			 indexWheelObj[i]['page'].order=i;
			 //當滑鼠移入時
			 indexWheelObj[i]['page'].onmouseover=function(){
				 indexClearTimer(); //刪除所有 timer
				 indexTurnOffAllPage(); //將所有頁碼改為off
				 indexHideAllImg(); //隱藏所有IMG
				 indexDisplayImg(this.order); //顯示滑鼠指定的IMG
				 this.src=this.mouseover;
			 };
			 //當滑鼠移出時，停留二秒
			 indexWheelObj[i]['page'].onmouseout=function(){
				 // this.src=this.mouseout;
				 indexWheelStayTimerID=setTimeout("indexImgWheel()",indexStay*1000);
				 indexShowImgOrder=this.order;
			 };
			 indexIconPages.appendChild(indexWheelObj[i]['page']);
			
			 //var text = document.createTextNode(indexWheelObj[i]['page'].order+1);
			 //indexWheelObj[i]['page'].appendChild(text);
		 }
	 }
}
function indexClearTimer()
{
	 clearTimeout(indexWheelStayTimerID);
	 clearTimeout(indexWheelShowTimerID);
	 clearTimeout(indexWheelHideTimerID);
}
function indexTurnOffAllPage()
{
	 //將icon的圖片路徑全都為off
	 for(var i=0;i<indexImgs.length;i++)
	 {
		indexWheelObj[i]['page'].style.backgroundImage='url('+indexWheelObj[i]['page'].mouseout+')';
	 }
}
function indexHideAllImg()
{
	 //隱藏所有的IMG
	 for(var i=0;i<indexImgs.length;i++)
	 {
		 indexImgs[i].style.display="none";
		 indexImgs[i].opacity=0;
		 indexImgs[i].style.opacity = indexImgs[i].opacity/100;
		 indexImgs[i].style.filter = 'alpha(opacity=' + indexImgs[i].opacity + ')';
	 }
}
function indexDisplayImg(order)
{
	 //顯示滑鼠所指定的IMG
	 indexWheelObj[order]['page'].style.backgroundImage='url('+indexWheelObj[order]['page'].mouseover+')';
	 indexImgs[order].style.display="";
	 indexImgs[order].opacity=100;
	 indexImgs[order].style.opacity = indexImgs[order].opacity/100;
	 indexImgs[order].style.filter = 'alpha(opacity=' + indexImgs[order].opacity + ')';
}
function indexImgWheel()
{
	 indexClearTimer();
	 indexHideImgOrder=indexShowImgOrder;
	 indexShowImgOrder++;
	 if(indexShowImgOrder==indexImgs.length)
	 {
		indexShowImgOrder=0;
	 }
	 indexImgs[indexShowImgOrder].style.display="";
	
	 indexWheelShowTimerID=setTimeout("indexBgShow()",100);
	 indexWheelHideTimerID=setTimeout("indexBgHide()",100);
}
function indexBgShow()
{
	 if(indexImgs[indexShowImgOrder].opacity<100)
	 {
	 	 indexWheelShowTimerID=setTimeout("indexBgShow()",100);
	 }
	 else
	 {
		 indexImgs[indexShowImgOrder].opacity=100;
		 clearTimeout(indexWheelShowTimerID);
		 indexTurnOffAllPage();
		 indexDisplayImg(indexShowImgOrder);
	 }
	 indexImgs[indexShowImgOrder].opacity+=indexOpacityValue;
	 indexImgs[indexShowImgOrder].style.opacity = indexImgs[indexShowImgOrder].opacity/100;
	 indexImgs[indexShowImgOrder].style.filter = 'alpha(opacity=' + indexImgs[indexShowImgOrder].opacity + ')';
}

function indexBgHide()
{
	 if(indexImgs[indexHideImgOrder].opacity>0)
	 {
		 indexWheelHideTimerID=setTimeout("indexBgHide()",100);
	 }
	 else
	 {
		 indexImgs[indexHideImgOrder].opacity=0;
		 indexImgs[indexHideImgOrder].style.display="none";
		 clearTimeout(indexWheelHideTimerID);
		 indexWheelStayTimerID=setTimeout("indexImgWheel()",indexStay*1000);
	 }
	 indexImgs[indexHideImgOrder].opacity-=indexOpacityValue;
	 indexImgs[indexHideImgOrder].style.opacity = indexImgs[indexHideImgOrder].opacity/100;
	 indexImgs[indexHideImgOrder].style.filter = 'alpha(opacity=' + indexImgs[indexHideImgOrder].opacity + ')';
}
/**********************************************************************************/

window.onload = function(){
 //(圖片輪播的Parent物件,不顯示頁碼,icon_left,icon_top)
 initIndex('kv',false,855,320)// 870,320
 };