// JavaScript Document
var myThumbs, myBlocks, leftBtn, rightBtn, totalImg, mWidth, timer, mMover, mStep, bigImg, bigPics, imgCaption, mTips;
var mLeft=0;
var imgSrc = new Array();
var imgAlt = new Array();
//get all elements, set width, and define the function when img or button was clicked or rollover.
function getElement(){
	myThumbs=document.getElementById('picThumbs');
	bigImg=document.getElementById('bigImg');
	mTips=document.getElementById('myTips');
	imgCaption=document.getElementById('imgCaption');
	bigPics=bigImg.getElementsByTagName('img')[0];
	myBlocks=myThumbs.getElementsByTagName('li');
	leftBtn=myBlocks[0];
	rightBtn=myBlocks[2];
	totalImg=myBlocks[1].getElementsByTagName('img');
	mMover=document.getElementById('truePic');
	mWidth=(110*totalImg.length)-10;
	leftBtn.onmouseover=new Function('moveIt("left",2)');
	leftBtn.onmouseup=new Function('moveIt("left",2)');
	leftBtn.onmousedown=new Function('moveIt("left",5)');
	leftBtn.onmouseout=new Function('goStop()');
	
	rightBtn.onmouseover=new Function('moveIt("right",2)');
	rightBtn.onmouseup=new Function('moveIt("right",2)');
	rightBtn.onmousedown=new Function('moveIt("right",5)');
	rightBtn.onmouseout=new Function('goStop()');
	getImg();
}
/*get img src, then link a new img file*/
function getImg(){
	for(i=0;i<totalImg.length;i++){
	imgSrc[i]=totalImg[i].getAttribute('src').split(".gif")[0];
	imgAlt[i]=totalImg[i].getAttribute('alt');
	totalImg[i].onclick=new Function('chgPic('+ i +')');
	}
	
}

function chgPic(x){
	bigPics.src=imgSrc[x]+".jpg";
	imgCaption.innerHTML=imgAlt[x];
}

/*mouseover, mousedown, mouseup, and mouseout
dir is direction, speed is how fast the scrolling is*/
function moveIt(dir,speed){
	clearTimeout(timer);
	mStep=speed;
	if(dir=="left"){
		goRight();
		leftBtn.style.backgroundColor="#baada8";
		mTips.innerHTML='<img src="images/tips_bg.gif" alt="tips" />';
		mTips.style.textAlign="left";
	}
	if(dir=="right"){
		goLeft();
		rightBtn.style.backgroundColor="#baada8";
		mTips.innerHTML='<img src="images/tips_bg.gif" alt="tips" />';
		mTips.style.textAlign="right";
	}
}
/*540 is the picHolder's width*/
function goLeft(){
	if(Math.abs(mLeft)>=(mWidth-540)){
		clearTimeout(timer);
	}else{
		mLeft=Math.max((mLeft-mStep),-(mWidth-540));
		mMover.style.left=mLeft+"px";
		timer=setTimeout(goLeft, 10);
		}
}

function goRight(){
	if(Math.abs(mLeft)==0){
		clearTimeout(timer);
	}else{
		mLeft=Math.min((mLeft+mStep),0);
		mMover.style.left=mLeft+"px";
		timer=setTimeout(goRight, 10);
		}
}

function goStop(){
	clearTimeout(timer);
	leftBtn.style.backgroundColor=rightBtn.style.backgroundColor="#dcdcdc";
	mTips.innerHTML='&nbsp;';
}

window.onload=function(){
	getElement();
}