$(function() {
    var slideTimer;
    var autoProgress = false;
    var loopDelay = 3000;

    $('.slidebutton').click(function() {
        // Make sure that any user interaction causes auto progression to stop
        if (!autoProgress) {
            clearInterval(slideTimer);
        }
        autoProgress = false;

        var nextIndex = $(this).parent().prevAll().length;

        $('.slide').hide()
                   .filter(':eq(' + nextIndex + ')').show();

        $('.slidebutton').removeClass('activebutton')
                         .eq(nextIndex).addClass('activebutton');
    });

    $('.nextbutton').click(function() {
        $('.slidebutton').eq(($('.activebutton').parent().prevAll().length + 1) % $('.slidebutton').length).click();
    });

    slideTimer = setInterval(function() {
        autoProgress = true;
        // Automatically move to the next item
        $('.nextbutton').click();
    }, loopDelay);
});