/**
 * @author stunews
 */

 
 $(document).ready(function() {
 	
	var $frames = $('#slideshow li');
	
				/**
	 * No need to have only one element in view, you can use it for slideshows or similar.
	 * In this case, clicking the images, scrolls to them.
	 * No target in this case, so the selectors are absolute.
	 */
	$('.buttons').css('visibility','visible');
	$('#slideshow > ul')
	.css({width:($frames.length+2)*166,paddingLeft:"225px"})
	$('#slideshow')
	.css('overflow','hidden')
	.serialScroll({
		items:'li',
		prev:'#screen a.prev',
		next:'#screen a.next',
		offset:-180, //when scrolling to photo, stop 230 before reaching it (from the left)
		start:1, //as we are centering it, start at the 2nd
		duration:800,
		force:true,
		stop:true,
		lock:false,
		cycle:false //don't pull back once you reach the end
	});
	
	})