/************************************** 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
*       This has been customised for the homepage on smarta
*       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;

        // 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',
                'left': '0px',
                'top': '0px',
                'z-index': Slideshow.arrImages.length - i
            }).hide();
            if (i == 0) {
                $(this).show();
            }
        });
        
        // If autostart is set to true, set the slideshow off...
        //Slideshow.imgTimer = null;
        if (settings.autoStart) {
            // Need to hide the play button
            Slideshow.imgTimer = setTimeout('Slideshow.start()', Slideshow.settings.showSpeed);
            Slideshow.running = true;
            $('.btnPlay').css({ display: 'none' });
        } else {
            $('.btnPause').css({ display: 'none' });
        }

    },

    /****
    * 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...
        var next = parseInt(Slideshow.currImage) + 1;
        if (next > Slideshow.arrImages.length - 1)
            next = 0;

        Slideshow._changeImage(next);

        $('.btnPause').show();
        $('.btnPlay').hide();

    },

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

        $('.btnPause').hide();
        $('.btnPlay').show();
    },

    next: function() {

        Slideshow.stop();

        // 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;

        Slideshow._changeImage(next);
    },

    prev: function() {

        Slideshow.stop();

        // Now set the currImage to the next number (or cycle it round to the beginning)
        var prev = parseInt(Slideshow.currImage) - 1;
        if (prev < 0)
            prev = Slideshow.arrImages.length - 1;

        Slideshow._changeImage(prev);
    },

    /****
    * Function to change the image over
    ****/
    _changeImage: function(next) {

        // 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',
                    height: $(this).height()
                }, Slideshow.settings.fadeSpeed);
            } else if (i == next) {
                $(this).animate({
                    opacity: 'show',
                    height: $(this).height()
                }, Slideshow.settings.fadeSpeed);
                $('.lbFooter').animate({
                    marginTop: $(this).height()
                }, Slideshow.settings.fadeSpeed);
                //alert($(this).height());
            }
        });
        Slideshow.currImage = next;
    }
}