$(document).ready(function() {

    var $panels = $('#slider .panel');
    var $container = $('#slider .scrollContainer');
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');
    //SET THIS TO FALSE IF YOU WANT VERTICAL
    var horizontal = true;
    //add button images here
    // If JS is not available buttons will not show.
    $scroll
        //.before('<img class="scrollButtons left" src="Controls/ProductScroll/prev.png" />')
        //.after('<img class="scrollButtons right" src="Controls/ProductScroll/next.png" />');

    if (horizontal) {
        $panels.css
        ({
            'float': 'left',
            'position': 'relative'

        })
        $container.css('width', $panels[0].offsetWidth * $panels.length);
    }
    var scrollOptions = {
        target: $scroll,
        items: $panels,
        prev: 'img.left',
        next: 'img.right',
        duration: 0,
        easing: "swing",
        axis: 'xy'
    };
    //function(){ $('#slider').innerfade({ animationtype: 'slide', speed: 150, timeout: 2000, type: 'random', containerheight: '1em' }); 
    $('#slider').serialScroll(scrollOptions);

    var autoscrolling = true;

    $scroll.mouseover(function() {
        autoscrolling = false;
        
    }).mouseout(function() {
        autoscrolling = true;
    });

    setInterval(function() {
        if (autoscrolling) {
            $scroll.trigger('next');
            
        }
    }, 5000);
});