$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    var totWidth=0;
    var positions = new Array();
    var current = 0;

    $('#slides .slide').each(function(i){
        /* Traverse through all the slides and store their accumulative widths in totWidth */
        positions[i]= totWidth;
        totWidth += $(this).outerWidth();
    });
    $('#slides').width(totWidth);

    $('#slides_next').click(function(e,keepScroll){
        current=current+5;
        if(current>=positions.length) current = 0;
        $('#slides').stop().animate({
            marginLeft:-positions[current]+'px'
            },450);
        e.preventDefault();
        if(!keepScroll) clearInterval(itvl);
    });

    $('#slides_previous').click(function(e,keepScroll){
        current=current-5;
        if(current<0) current = 0;
        $('#slides').stop().animate({
            marginLeft:-positions[current]+'px'
            },450);
        e.preventDefault();
        if(!keepScroll) clearInterval(itvl);
    });
    function autoAdvance() {
        $('#slides_next').trigger('click',[true]);
    }

    var changeEvery = 10;
    var itvl = setInterval(function(){
        autoAdvance()
        },changeEvery*1000);

});