/************************************** Splendid *************************************
* Creation Date:    1st September 2008
* Created By:       Steve
* Edited ----------------------------------------------------------------------------
*		By:	    On:
* Description -----------------------------------------------------------------------
*		This file contains the functions for creating the image slideshow/forward/back
*       Requires jQuery to be included...
*
*      Slideshow Object has the following method:
*          init()                       Initialises the bits needed to run the slideshow.
*          start()                      Starts the slideshow cycling through the images
*          stop()                       Clears the timeout, stopping the slideshow                
*          prev()                       Changes to the previous image in the images array
*          next()                       Changes to the next image in the images array
*         
*          _changeImage()               Function to change the image over to the next one in the array
*          _animateTransition()         Fades out the current image and fades in the next one. Also update the counter, if there is one...
**************************************************************************************/

var Slideshow = {
    settings: null,
    arrImages: null,
    currImage: 0,
    imgTimer: null,
    running: false,

    /****
    * Initialises the bits needed to run the slideshow.
    ****/
    init: function(settings) {
        // Set the settings passed in to the object variable for use everywhere...
        Slideshow.settings = settings;

        // Wire up the previous button click event
        if ($('#' + settings.prevBtn)) {
            $('#' + settings.prevBtn).click(function() {
                Slideshow.prev();
            }).css({ cursor: 'pointer' });
        }

        // Wire up the next button click event
        if ($('#' + settings.nextBtn)) {
            $('#' + settings.nextBtn).click(function() {
                Slideshow.next();
            }).css({ cursor: 'pointer' });
        }

        // start by hiding everything except the first image in the ul...
        Slideshow.arrImages = $('#' + settings.container).children();
        $.each(Slideshow.arrImages, function(i) {
            $(this).css({
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'z-index': Slideshow.arrImages.length - i
            }).hide();
            if (i == 0) {
                $('#'+settings.imageTitle).html($(this).children(0).attr('alt')); 
                $(this).show();
            }
        });

        // if there's a place to say x of y images, then initialise that
        try {
            $('#' + settings.imgCounter).html(settings.counterFormat.replace('x', '1').replace('y', Slideshow.arrImages.length.toString()));
        } catch (e) { }


        // If autostart is set to true, set the slideshow off...
        if (settings.autoStart) {
            // Need to hide the play button
            $('#' + settings.playBtn).hide();
            Slideshow.imgTimer = setTimeout('Slideshow.start()', Slideshow.settings.showSpeed);
            Slideshow.running = true;
        } else {
            $('#' + settings.pauseBtn).hide();
        }
    },

    /****
    * Starts the slideshow cycling through the images
    ****/
    start: function() {
        // set the variable to show that the slideshow is running
        Slideshow.running = true;
        
        // Show next image and do animation...
        Slideshow._changeImage();

        // Need to show the pause button and hide the play one when it's running
        try {
            $('#' + Slideshow.settings.playBtn).hide();
            $('#' + Slideshow.settings.pauseBtn).show();
        } catch (e) { }
    },

    /****
    * Clears the timeout, stopping the slideshow
    ****/
    stop: function() {
        // Stop the timer and set the running variable to false.
        clearTimeout(Slideshow.imgTimer);
        Slideshow.running = false;

        // Need to show the play button and hide the pause one when it's stopped
        try {
            $('#' + Slideshow.settings.pauseBtn).hide();
            $('#' + Slideshow.settings.playBtn).show();
        } catch (e) { }
    },

    /****
    * Changes to the previous image in the images array
    ****/
    prev: function() {
        // If the slideshow is currently running, then stop it.
        if (Slideshow.running)
            Slideshow.stop();

        // Now that's finished set currImage to the previous number (or cycle it round to the end)
        var prev = parseInt(Slideshow.currImage) - 1;
        if (prev < 0)
            prev = Slideshow.arrImages.length - 1;

        // Trigger the animation...
        Slideshow._animateTransition(prev);
    },

    /****
    * Changes to the next image in the images array
    ****/
    next: function() {
        // If the slideshow is currently running, then stop it.
        if (Slideshow.running)
            Slideshow.stop();

        // Change to next image and do animation
        Slideshow._changeImage();
    },

    /****
    * Function to change the image over
    ****/
    _changeImage: function() {
        // Now set the currImage to the next number (or cycle it round to the beginning)
        var next = parseInt(Slideshow.currImage) + 1;
        if (next > Slideshow.arrImages.length - 1)
            next = 0;

        // Fade the new image in again.
        Slideshow._animateTransition(next);

        // If the slideshow is currently running, then set the timeout for the next time round...
        if (Slideshow.running)
            Slideshow.imgTimer = setTimeout('Slideshow.start()', Slideshow.settings.showSpeed);
    },


    /****
    * Fades out the current image and fades in the next one. Also update the counter, if there is one...
    ****/
    _animateTransition: function(next) {
        $.each(Slideshow.arrImages, function(i) {
            if (i == Slideshow.currImage) {
                $(this).animate({
                    opacity: 'hide'
                }, Slideshow.settings.fadeSpeed);
            } else if (i == next) {
                $(this).animate({
                    opacity: 'show'
                }, Slideshow.settings.fadeSpeed);
                try{
                    $('#' + Slideshow.settings.imageTitle).html($(this).children(0).attr('alt'));
                } catch(e) { }
            }
        });
        Slideshow.currImage = next;

        // If there's an image counter, then update it with the current values...
        try {
            var count = parseInt(Slideshow.currImage) + 1;
            $('#' + Slideshow.settings.imgCounter).html(Slideshow.settings.counterFormat.replace('x', count.toString()).replace('y', Slideshow.arrImages.length.toString()));
        } catch (e) { }
        
        
    }
}