var pwimgSrc = ""; 
//存放圖片的相對路近

var products=new Array();
//圖檔
var products_link=new Array();
//連結
var products_text=new Array();
//產品名

var moveImg=new Array('btn_arrow_left.gif','btn_arrow_left_ov.gif','btn_arrow_right.gif','btn_arrow_right_ov.gif');
//箭頭圖 左 左(onMouseOver) 右 右(onMouseOver)
/*************************************************/
var pwobj; //append child to who
var objPWheel=[];
var Lobj; 

var productWheelTimerID;
var pwMinWidth=372;
var unitWidth=124;
var pwWidth;

function productWheelInit()
{
	var frame = document.createElement('div');
		frame.style.position='relative';
		frame.style.height='122px';	
		pwobj.appendChild(frame);
		
	var leftArrow = document.createElement('div');
		leftArrow.style.position='absolute';
		leftArrow.style.left='0px';
		leftArrow.style.top='53px';
		frame.appendChild(leftArrow);
		
	var leftImg = document.createElement('img');		
		leftImg.out=pwimgSrc+moveImg[0];
		leftImg.over=pwimgSrc+moveImg[1];
		leftImg.src=leftImg.out;
		leftImg.border=0;
		leftImg.style.cursor='pointer';
		leftImg.onmouseover=function ()	{
			this.src=this.over;
			turnleft(3);
		};
		leftImg.onmouseout=function ()	{
			this.src=this.out;
			stopMove();
		};
		leftImg.onmousedown=function ()	{
			this.src=this.over;
			turnleft(8);
		};
		leftImg.onmouseup=function ()	{
			this.src=this.over;
			turnleft(3);
		};
		
		leftArrow.appendChild(leftImg);
		
	var rightArrow = document.createElement('div');
		rightArrow.style.position='absolute';
		rightArrow.style.right='0px';
		rightArrow.style.top='53px';
		frame.appendChild(rightArrow);
		
	var rightImg = document.createElement('img');		
		rightImg.out=pwimgSrc+moveImg[2];
		rightImg.over=pwimgSrc+moveImg[3];
		rightImg.src=rightImg.out;
		rightImg.border=0;
		rightImg.style.cursor='pointer';
		rightImg.onmouseover=function ()	{
			this.src=this.over;
			turnright(3);
		};
		rightImg.onmouseout=function ()	{
			this.src=this.out;
			stopMove();
		};
		rightImg.onmousedown=function ()	{
			this.src=this.over;
			turnright(8);
		};
		rightImg.onmouseup=function ()	{
			this.src=this.over;
			turnright(3);
		};
		
		rightArrow.appendChild(rightImg);	
		
	var center = document.createElement('div');
		center.style.position='absolute';
		center.style.left='20px';
		center.style.top='0px';
		center.style.width='375px';
		center.style.height='122px';
		center.style.overflow='hidden';
		frame.appendChild(center);
	
		Lobj = document.createElement('div');
		Lobj.style.position='absolute';
		Lobj.style.left='0px';
		Lobj.style.top='0px';
		pwWidth=unitWidth*products.length;
		Lobj.style.width=pwWidth+'px';
	
		center.appendChild(Lobj);
		
		for(var i=0;i<products.length;i++)
		{
			objPWheel[i]=new Object();
			objPWheel[i]['frame'] = document.createElement('div');
			objPWheel[i]['frame'].style.styleFloat='left';
			objPWheel[i]['frame'].style.cssFloat='left';
			objPWheel[i]['frame'].style.marginLeft='8px';
			objPWheel[i]['frame'].style.marginRight='8px';
			objPWheel[i]['frame'].style.width='108px';
			objPWheel[i]['frame'].style.height='122px';
			objPWheel[i]['frame'].style.backgroundColor='#CCC';
			objPWheel[i]['frame'].style.textAlign='center';
			objPWheel[i]['frame'].style.position='relative';
			objPWheel[i]['frame'].order=i;
			
			Lobj.appendChild(objPWheel[i]['frame']);
			
			var tmp_a = document.createElement('a');
				tmp_a.setAttribute('href',products_link[i]);
				
			objPWheel[i]['frame'].appendChild(tmp_a);
			
			var product = document.createElement('img');		
				product.src=pwimgSrc+products[i];
				product.border=0;
				product.style.marginTop='7px';
				
			tmp_a.appendChild(product);
			
			objPWheel[i]['frametext'] = document.createElement('div');
			objPWheel[i]['frametext'].style.position='absolute';
			objPWheel[i]['frametext'].style.width='94px';
			objPWheel[i]['frametext'].style.bottom='17px';
			objPWheel[i]['frametext'].style.left='6px';
			objPWheel[i]['frametext'].style.textAlign='center';
			
			objPWheel[i]['frame'].appendChild(objPWheel[i]['frametext']);
			
			objPWheel[i]['text'] = document.createElement('a');
			objPWheel[i]['text'].style.textDecoration='none';
			objPWheel[i]['text'].style.fontSize='11px';
			objPWheel[i]['text'].style.fontWeight='bold';
			objPWheel[i]['text'].setAttribute('href',products_link[i]);
				
			objPWheel[i]['frametext'].appendChild(objPWheel[i]['text']);	
			
			var tmp_text = document.createTextNode(products_text[i]);
				objPWheel[i]['text'].appendChild(tmp_text);	
				
			objPWheel[i]['frame'].onmouseover=function(){
				objPWheel[this.order]['text'].style.color='#903';	
				objPWheel[this.order]['frame'].style.backgroundColor='#666';
			};
			
			objPWheel[i]['frame'].onmouseout=function(){
				objPWheel[this.order]['text'].style.color='';	
				objPWheel[this.order]['frame'].style.backgroundColor='#CCC';
			};
		
		}
}


function stopMove()
{
	clearInterval(productWheelTimerID);	
}
function turnleft(rate)
{
	clearInterval(productWheelTimerID);
	productWheelTimerID=setInterval("moveLeft("+rate+")",5);		
}
function turnright(rate)
{
	clearInterval(productWheelTimerID);
	productWheelTimerID=setInterval("moveRight("+rate+")",5);	
	
}
function moveLeft(rate)
{
	if(Lobj.style.left.slice(0,-2)<0)
	{
		Lobj.style.left=parseInt(Lobj.style.left.slice(0,-2))+parseInt(rate)+'px';
	}
}
function moveRight(rate)
{
	if(Lobj.style.left.slice(0,-2)>-(pwWidth-pwMinWidth))
	{
		Lobj.style.left=parseInt(Lobj.style.left.slice(0,-2))-parseInt(rate)+'px';
	}		
}

window.onload = function(){
	pwobj=document.getElementById('product_show');	
	productWheelInit();
	};