// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(function( $ ){
    
    /**
     * No need to have only one element in view, you can use it for slideshows or similar.
     * In this case, clicking the images, scrolls to them.
     * No target in this case, so the selectors are absolute.
     */
    
    $('#slideshow').serialScroll({
        items:'li',
        prev:'a.prev',
        next:'a.next',
        offset:-238, //when scrolling to photo, stop 230 before reaching it (from the left)
        start:1, //as we are centering it, start at the 2nd
        duration:2900,
        force:true,
        stop:true,
        lock:false,
        interval: 7000,//auto scroll constantly
        cycle:false, //don't pull back once you reach the end
        easing:'easeOutQuart', //use this easing equation for a funny effect
        jump: true, //click on the images to scroll to them
        onAfter:function( elem ){
            //'this' is the element being scrolled ($pane) not jqueryfied
            var html = elem.innerHTML;
            $('ul.slideshow').append('<li>' + html + '</li>');
        }

    });
    
    $('#slideshow').hover(function(){
        $(this).stop().trigger('stop');
    },function(){
        $(this).stop().trigger('start');
    });
});