var speed = 2; //Increase to make the animation faster
var imagePadding = 0; //Padding to the right of images in pixels
var containerWidth = 790; //Thumb gallery container width in pixels
var containerHeight = 100; //Gallery height in pixels
var timeMove = null;

function start() {
	gallery	= document.getElementById("galList");
	container = document.getElementById("galContainer");	
	prevBut = document.getElementById("prev");
	nextBut = document.getElementById("next");
	imgName =  document.getElementById("picName");
	
	container.style.width = containerWidth + "px";
	container.style.height = containerHeight + "px";
	container.style.position = "relative"
	container.style.overflow = "hidden";
	
	scroller = gallery.style;
	scroller.position = "absolute";
	scroller.left = 0;
	scroller.top = 0;
	scroller.whiteSpace = "nowrap";	

	galLinks = gallery.getElementsByTagName("a");
	galImages = gallery.getElementsByTagName("img");
	
	dimensions(); //Work out total number of thumbnails and overall width	
	imageLinks(); //Set up listeners for hovering over images
	
	//gallery.onmouseover = function(e) { mouseMove(e); }
	//gallery.onmouseout = function(e) { imgStop(e); }
	prevBut.onmouseover = function(e) { imgMove(e); }
	prevBut.onmouseout = function(e) { imgStop(e); }
	nextBut.onmouseover = function(e) { imgMove(e); }
	nextBut.onmouseout = function(e) { imgStop(e); }
}

function dimensions() {
	totalWidth = 0;
	for(i = 0; i < galImages.length; i++) {
		totalWidth += parseInt(galImages[i].width) + imagePadding;
	}
}

function imageLinks() {
	for(i = 0; i < galLinks.length; i++) {
		galLinks[i].onmouseover = function(e) { imageTitleAdd(e) };
		galLinks[i].onmouseout = function(e) { imageTitleRmv(e) };
	}	
}

function imageTitleAdd(e) {
	if(!e) e = window.event;
	if(e.target) {
		title = e.target.parentNode.title;
		trgLeft = e.target.parentNode.offsetLeft;
	}
	else if(e.srcElement) {
		title = e.srcElement.parentNode.title;
		trgLeft = e.srcElement.parentNode.offsetLeft
	}
	imgName.innerHTML = title;
	listX = parseInt(scroller.left);
	currentPos = parseInt(trgLeft) + listX;
	imgName.style.position = "absolute";
	//imgName.style.left = currentPos + "px";
}

function imageTitleRmv(e) {
	imgName.innerHTML = "&nbsp;";
}

function mouseMove(e) {
	if(!e) e = window.event;
	mLeftHv = parseInt((containerWidth / 100) * 10);
	mRightHv = parseInt(containerWidth - ((containerWidth / 100) * 10));
	galPos = parseInt(gallery.offsetParent.offsetLeft);
	if(typeof(e.pageX) == 'number')
		mouseX = parseInt(e.pageX);
	else if(typeof(e.clientX) == 'number')
		mouseX = parseInt(e.clientX);
	
	if((mouseX >= galPos) && (mouseX <= galPos + mLeftHv)) 
		move("left");
	if((mouseX <= galPos + containerWidth) && (mouseX >= galPos + mRightHv))
		move("right");
}

function imgMove(e) {
	if(!e) e = window.event;
	if(e.target)
		butClicked = e.target.parentNode.id;
	else if(e.srcElement)
		butClicked = e.srcElement.parentNode.id;
	if(butClicked == "prev") move("left");
	if(butClicked == "next") move("right");
}

function move(direction) {	
	if(direction == "left")
		scrollerLeft = parseInt(scroller.left) + speed;
	else
		scrollerLeft = parseInt(scroller.left) - speed;		
	scrollerPx = scrollerLeft + "px";	
	if(
	   	(direction == "right" && parseInt(scroller.left) > 0 - totalWidth + containerWidth) ||
	   	(direction == "left" && parseInt(scroller.left) < 0)
	)
	{
		scroller.left = scrollerPx;
		timeMove = setTimeout('move("' + direction + '")',speed * 2);	
	}
	else
		timeMove = null;
}

function imgStop(e) {
	clearTimeout(timeMove);
}

window.onload = start;