$(document).ready(function () {

    var $panels = $('#slider .scrollContainer table tr td > div');
    var $container = $('#slider .scrollContainer');
    var horizontal = false;
    if($panels.length == 0 || $container.length == 0)
    	return false;

    if (horizontal) {
        $panels.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
        });


        $container.css('width', $panels[0].offsetWidth * $panels.length);
    }

    var $scroll = $('#slider .scroll').css('overflow', 'hidden');
    
    $scroll
    .before('<div class="gallery-nav lnav scrollButtons left"></div>')
	.after('<div class="gallery-nav rnav scrollButtons right"></div>');
	       
	    

    var offset = parseInt((horizontal ? 
        $container.css('paddingTop') : 
        $container.css('paddingLeft')) 
        || 0) * -1;

    var scrollOptions = {
        target: $scroll, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels,

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'div.left', 
        next: 'div.right',

        // allow the scroll effect to run both directions
        axis: 'x',

        //onAfter: trigger, // our final callback

        offset: offset,

        // duration of the sliding effect
        duration: 500,
        
        cycle: false,
        
        exclude: 3,

        easing: 'swing'
    };

    $('#slider').serialScroll(scrollOptions);


    $.localScroll(scrollOptions);

    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);

});