var DURATION = 0.5;  /* Number of seconds taken for transition */
var BORDER_OFFSET = 0; /* Offset to width of thumbnail from border or margin values */

function scrollPhotos(distance) {
	var list = document.getElementById('photoList');
	var elements = list.getElementsByTagName('li');
	
	var totalWidth = 0;
	
	for (i=0; i<elements.length; i++) {
		totalWidth += elements[i].offsetWidth + BORDER_OFFSET;
	}
		
	new Slider('thumbnailsSlider','thumbnailsViewport', distance, 0, DURATION, totalWidth, -1);
}

document.observe("dom:loaded", function() {
	$('prev').onclick=function() {scrollPhotos(916)};
	$('next').onclick=function() {scrollPhotos(-916)};	
	$('thumbnailsViewport').setStyle({overflow: 'hidden', width: '916px'});
	$$('#thumbnailsViewport ul#photoList').each(function(obj){obj.setStyle({ width: '10000000px'});});	
	new Effect.Appear('thumbnailsControls', {duration: 0.5});
});