$(document).ready(function () {


	var $panels = $('#slideshow .scrollContainer > div');
	var $container = $('#slideshow .scrollContainer');
	
	$panels.css({
        'float' : 'left',
        'position' : 'relative' // IE fix to ensure overflow is hidden
    });
	$container.css('width', ($panels[0].offsetWidth * $panels.length)*2);
	
	var $scroll = $('#slideshow').css('overflow', 'hidden');
	
	$scroll
.before('<div id="scroll_L"><a><img class="scrollButtons left" src="/images/site/arrow_L.gif" /></a></div>')
        .after('<div id="scroll_R"><a><img class="scrollButtons right" src="/images/site/arrow_R.gif" /></a></div>');
    
    var $prev = $('#screen #scroll_L'),//prev button
		$next = $('#screen #scroll_R');//next button 
		
	
	var scrollOptions = {


		prev: '#screen #scroll_L', 
        next: '#screen #scroll_R',
		items: $panels,
		cycle:true, //don't pull back once you reach the end
		
        axis: 'x',
		offset:0, //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,
		

		easing:'swing', //use this easing equation for a funny effect
		jump: false //click on the images to scroll to them

	};
	
	$('#slideshow').serialScroll(scrollOptions);
	$('#slideshow').trigger('goto',[0]);
});