// JavaScript Document
var imgTable;
var theTimer;
var currentPosition =0 ;
var theDirection;
var tableWidth;
var holderWidth;
var leftDiv;
var rightDiv;

function moveThumbs(direction){		
	theDirection = direction;
	imgTable = document.getElementById('theTable');
	tableWidth = imgTable.offsetWidth;
	holderwidth = document.getElementById('theImageStrip').offsetWidth;
	
	//document.getElementById('info').innerHTML = 'currentPosition--> ' + currentPosition +' the direction -->'+ direction +' where--> '+ (0-(tableWidth-holderwidth)) ;
	//remove the divs if you can't scroll anymore or put them back if you can see them again
	if(currentPosition > 0){
		rightDiv.style.opacity = '0.7'; 
		rightDiv.style.filter = 'alpha(opacity=70)';
		rightDiv.style.cursor = 'default';
	}else{
		rightDiv.style.opacity = '1'; 
		rightDiv.style.filter = 'alpha(opacity=100)';
		rightDiv.style.cursor = 'pointer';
	}
	
	if(currentPosition < (0-(tableWidth-holderwidth))){
		leftDiv.style.opacity = '0.7'; 
		leftDiv.style.filter = 'alpha(opacity=70)';
		leftDiv.style.cursor = 'default';
	}else{
		leftDiv.style.opacity = '1'; 
		leftDiv.style.filter = 'alpha(opacity=100)';
		leftDiv.style.cursor = 'pointer';
	}
	
	// move the thumbnails if they need moving
	if (currentPosition <= 0 && direction > 0){
		currentPosition = currentPosition + (10 * direction);
		imgTable.style.left = currentPosition +'px';
	} else if(currentPosition >= (0-(tableWidth-holderwidth)) && direction < 0){
		currentPosition = currentPosition + (10 * direction);
		imgTable.style.left = currentPosition +'px';
	}
	theTimer=setTimeout("moveThumbs(theDirection)",10);
}

function hideScrollBars(){
	//hide the scroll bars
	var x = document.getElementById('theImageStrip');
	x.style.overflow = 'hidden';
	
	//build the new nodes
	leftDiv = document.createElement("div");
	leftDiv.style.width = '2em';
	leftDiv.style.height = '7.5em';
	leftDiv.style.backgroundColor = '#000000';
	leftDiv.style.position = 'absolute';
	leftDiv.style.top = '0px';
	leftDiv.style.left = '0px';
	leftDiv.style.cursor = 'pointer';
	leftDiv.innerHTML = '<img src="graphics/leftarrow.gif" alt="scroll left" style="height:7.2em; width:2em; margin-top:5px" \/>';
	
	rightDiv = document.createElement("div");
	rightDiv.style.width = '2em';
	rightDiv.style.height = '7.5em';
	rightDiv.style.backgroundColor = '#000000';
	rightDiv.style.position = 'absolute';
	rightDiv.style.top = '0px';
	rightDiv.style.right = '0px';
	rightDiv.style.cursor = 'pointer';
	rightDiv.innerHTML = '<img src="graphics/rightarrow.gif" alt="scroll right" style="height:7.2em; width:2em;  margin-top:5px" \/>';
	

	//add functions to the new nodes
	rightDiv.onmouseover = function(){moveThumbs(1)}
	leftDiv.onmouseover = function(){moveThumbs(-1)}
	
	rightDiv.onmouseout = function(){clearTimeout(theTimer)}
	leftDiv.onmouseout = function(){clearTimeout(theTimer)}
	
	//add the nodes to the DOM
	x.appendChild(rightDiv);
	x.appendChild(leftDiv);
	
	//now hide them until someone stumbles across them
	//leftDiv.style.visibility = 'hidden';
	//rightDiv.style.visibility = 'hidden';
	
	// hide or show the scroll bars when the user mouses over the thumbnails
	//x.onmouseover = function(){leftDiv.style.visibility = 'visible';rightDiv.style.visibility = 'visible'; }
	//x.onmouseout = function(){leftDiv.style.visibility = 'hidden';rightDiv.style.visibility = 'hidden';}
	
	
}