$(document).ready(function() { 
    // start slideshow 
    $('#pause').click(function() { $('#'+slideShowId).cycle('pause'); return false; });
    $('#play').click(function() { $('#'+slideShowId).cycle('resume'); return false; });
    
    // $('#'+slideShowId).hover(
    $('#slideshow').hover(
        function() { $('#controls').fadeIn(); },
        function() { $('#controls').fadeOut(); }
    );

    $('#'+slideShowId).cycle({ 
        fx: 'fade', 
        timeout: slideTimeout, 
        before: onSlideBefore,
		next: '#next',
		prev: '#prev'
    }); 

    function onSlideBefore(curr, next, opts) { 
        // on the first pass, addSlide is undefined (plugin hasn't yet created the fn); 
        // when we're finshed adding slides we'll null it out again 
        if (!opts.addSlide) 
            return; 

        // on Before arguments: 
        //  curr == DOM element for the slide that is currently being displayed 
        //  next == DOM element for the slide that is about to be displayed 
        //  opts == slideshow options 

        var currentImageNum = parseInt(next.src.match(/slide(\d+)/)[1]); 

        if (currentImageNum == slideCount) { 
            // final slide in our slide slideshow is about to be displayed 
            // so there are no more to fetch 
            opts.addSlide = null; 
            return; 
        } 

        // add our next slide 
        opts.addSlide('<img src="'+slideURL+'/slide'+(currentImageNum+1)+'.jpg" width="'+slideWidth+'" height="'+slideHeight+'"/>'); 
    }; 
});