$(document).ready( function () {

	var $panels = $('div.slide');
	var $container = $('#slideshow_viewer');

	// if false, we'll float all the panels left and fix the width 
	// of the container

	// float the panels left if we're going horizontal

	    // calculate a new width for the container (so it holds all panels)
	    // $container.css('width', $panels[0].offsetWidth * $panels.length + 1200);
	$slideshow = $('#slideshow_wrapper');
	$slideshow.serialScroll({
		target: $container,
		items: $panels,
		offset:-200, 
		start:0, 
		duration:1000,
		interval:3500,
		force:true,
		stop:true,
		lock:false,
		cycle:false, 
		 easing:'easeInBack', 
		// jump: true, 
		// lazy: true,
		constant: false,
		onBefore:function( e, elem, $pane, $items, pos ){

			// e.preventDefault();
			// if( this.blur )
			// 	this.blur();
			$next = $(elem);
			$prev = $next.siblings();
			$prev.removeClass('current');
			$('#slides_container').fadeTo(500, '0.6')
		},
		onAfter:function( elem ){

				$(elem).addClass('current');
				$('#slides_container').fadeTo(300, '1')		
		}
	});

	$('a#prev').click( function () {
		// alert('fuck yeah');
		$container.trigger('stop');
	    $container.trigger('prev');
	});

	$('a#next').click( function () {
		// alert('fuck yeah');

	$container.trigger('stop');
	$container.trigger('next');
	});


	
});