// Heavily based on the script available at http://jqueryfordesigners.com/coda-slider-effect/
// Cut down and optimised for this template
$(document).ready(function () {
    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');
    
	$panels.css({
		'float' : 'left',
		'position' : 'relative'
	});
	$container.css('width', $panels[0].offsetWidth * $panels.length);
	
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');
    
    $scroll
        .before('<div id="scrollLeft" class="scrollButton">left</div>')
        .after('<div id="scrollRight" class="scrollButton">right</div>');
        
    var scrollOptions = {
        target: $scroll,
        items: $panels,
        prev: '#scrollLeft', 
        next: '#scrollRight',
        axis: 'x',
        offset: 0,
        duration: 500,
        easing: 'swing'
    };
    
    $('#slider').serialScroll(scrollOptions);
});