///////////////////////////////////////////////////////////////////////////////
// slideshow.js
//
// This file contains the implementation of the timed slideshow with
// transition effects. Some properties can be configured in the
// "Configuration" section below.
///////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////
// Configuration
///////////////////////////////////////////////////////////////////////////////

// The id of the <img> in the HTML file that receives the slide images.
var slide_image_id = 'slide';

// The time between slides (in milliseconds)
var slide_period = 6000;


///////////////////////////////////////////////////////////////////////////////
// Global Variables Used Internally
///////////////////////////////////////////////////////////////////////////////

// Used to hold all of the pre-loaded slide images
var slide_images = new Array();

// Tracks the image that is currently-showing.
var current_image = 0;


///////////////////////////////////////////////////////////////////////////////
// Slideshow Functions
///////////////////////////////////////////////////////////////////////////////

// Function to define and pre-load the images of the slideshow.
// Call this once with a variable number of parameters defining the
// each slide image URL, before you start the slide show with a
// call to start_slide_transition().
function define_slide_images() {
    for (var i=0; i < define_slide_images.arguments.length; i++) {
        slide_images[i] = new Image();
        slide_images[i].src = define_slide_images.arguments[i];
    }
}

// Function to start transitioning from the current slide to the
// next slide. This will start the fade-out of the current image
// and return immediately. When the fade-out completes asynchronously,
// it will call the advance_slide() function to begin the transition
// to the next slide.
function start_slide_transition() {
    new Effect.Fade(
        slide_image_id,
        {
            queue:{
                position:'end',
                scope:'slidescope'
            },
            afterFinish:function(obj) {
                advance_slide();
            }
        }
    );

}

// Function to advance to the next slide in the series and start the
// transition to it. This should be called when the slide image is
// hidden. It swaps the image source to the next image, begins
// the fade-in transition to that new image asynchronously, and returns
// immediately. When the fade-in transition completes asynchronously,
// it sets a timer to start the next slide transition, via the
// start_slide_transition() function, after a timeout perdiod
// as configured in the 'slide_period' variable defined above.
function advance_slide() {
    $(slide_image_id).src = slide_images[current_image].src;
    if (current_image < slide_images.length - 1) {
        current_image++;
    }
    else {
        current_image = 0;
    }
    new Effect.Appear(
        slide_image_id,
        {
            queue:{
                position:'end',
                scope:'slidescope'
            },
            afterFinish:function(obj) {
                setTimeout("start_slide_transition();", slide_period);
            }
        }
    );
}