jQuery adding slideshow to existing gallery script

[andyrigby]

I modified this script from www.tympanus.net and I am trying to create a slideshow so the images automatically progress to the next one after my set interval. It seems like it should be easy. I have tried a few different approaches, but nothing has worked.

$(function() {
    // name of the selected album, in the top right combo box 
    var album	= $('#albumSelect div').html();
    // mode is small or expanded, depending on the picture size  
    var mode = 'small';
    // this is the index of the last clicked picture 
    var current = 0;
	//begin new variables
	var interval = 3000;
	var current_thumb       = 0;
	var nmb_images_wrapper  = 26;
	var playtime;

	// first, let's build the thumbs
    buildThumbs();
	
    //clicking a thumb loads image (alt attribute of thumb is the source of large image); mouseover and mouseout for a nice spotlight hover effect
    $('#thumbsContainer img').live('click',function(){
        loadPhoto($(this),'cursorPlus');
    }).live('mouseover',function(){
        var $this   = $(this);
        $this.stop().animate({
            'opacity':'1.0'
        },200);
    }).live('mouseout',function(){
        var $this   = $(this);
    });
    // when resizing the window resize the picture 
    $(window).bind('resize', function() {
        resize($('#displayed'),0);
    });
 
	//when hovering main image change the mouse icons (left,right,plus,minus) also when clicking on the image, expand it or make it smaller	
    $('#displayed').live('mousemove',function(e){
        var $this 	= $(this);
        var imageWidth 	= parseFloat($this.css('width'),10);
		
        var x = e.pageX - $this.offset().left;
        if(x<(imageWidth/3))
            $this.addClass('cursorLeft')
            .removeClass('cursorPlus cursorRight cursorMinus');
        else if(x>(2*(imageWidth/3)))
            $this.addClass('cursorRight')
            .removeClass('cursorPlus cursorLeft cursorMinus');
        else{
            if(mode=='expanded'){
                $this.addClass('cursorMinus')
                .removeClass('cursorLeft cursorRight cursorPlus');
            }
            else if(mode=='small'){
                $this.addClass('cursorPlus')
                .removeClass('cursorLeft cursorRight cursorMinus');
            }
        }
    }).live('click',function(){
        var $this = $(this);
        if(mode=='expanded' && $this.is('.cursorMinus')){
            mode='small';
            $this.addClass('cursorPlus')
            .removeClass('cursorLeft cursorRight cursorMinus');
            $('#thumbsWrapper').stop().animate({
                'bottom':'0px'
            },300);
            resize($this,1);
        }
        else if(mode=='small' && $this.is('.cursorPlus')){
            mode='expanded';
            $this.addClass('cursorMinus')
            .removeClass('cursorLeft cursorRight cursorPlus');
            $('#thumbsWrapper').stop().animate({
                'bottom':'-85px'
            },300);
            resize($this,1);
        }
        else if($this.is('.cursorRight')){
			
            var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current+1)+')');
            if($thumb.length){
                ++current;
                loadPhoto($thumb,'cursorRight');            
            }
        }
        else if($this.is('.cursorLeft')){
            var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current-1)+')');
            if($thumb.length){
                --current;
                loadPhoto($thumb,'cursorLeft');
            }
        }
    });
    
    //function to build the thumbs container An AJAX request is made to retrieve the photo locations
    function buildThumbs(){
        current=1;
        $('#imageWrapper').empty();
        $.get('support/thumbs.php?album='+album, function(data) {
            var countImages = data.length;
            var count = 0;
            var $tContainer = $('<div/>',{
                id	: 'thumbsContainer',
                style	: 'visibility:hidden;'
            })
            for(var i = 0; i < countImages; ++i){
                $('<img alt="'+data[i].alt+'" height="75" />').load(function(){
                    var $this = $(this);
                    $tContainer.append($this);
                    ++count;
                    if(count==1){
                        // load 1 image into container
                        $('<img id="displayed" style="display:block;" class="cursorPlus"/>').load(function(){
                            var $first = $(this);
                            resize($first,0);
                            $('#imageWrapper').append($first);
                        }).attr('src',$this.attr('alt'));
                    }
                    if(count == countImages){
                        $('#thumbsWrapper').empty().append($tContainer);
                        thumbsDim($tContainer);
                        makeScrollable($('#thumbsWrapper'),$tContainer,15);
                    }
                }).attr('src',data[i].src);
            }
        },'json');
    }
});