/************************************** 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 myJQ = jQuery

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 (myJQ('#' + settings.prevBtn)) {
        	myJQ('#' + settings.prevBtn).click(function()
            {
                Slideshow.prev();
            }).css({ cursor: 'pointer' });
        }

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

        // Now wire up the the play button...
        if (myJQ('#' + settings.playBtn)) {
        	myJQ('#' + settings.playBtn).click(function()
            {
                Slideshow.start();
            }).css({ cursor: 'pointer' });
        }

        // Lastly wire up the the pause button...
        if (myJQ('#' + settings.pauseBtn)) {
        	myJQ('#' + settings.pauseBtn).click(function()
            {
                Slideshow.stop();
            }).css({ cursor: 'pointer' });
        }

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

        // if there's a place to say x of y images, then initialise that
        try {
        	myJQ('#' + 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
        	myJQ('#' + settings.playBtn).hide();
            Slideshow.imgTimer = setTimeout('Slideshow.start()', Slideshow.settings.showSpeed);
            Slideshow.running = true;
        } else {
        	myJQ('#' + 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 {
        	myJQ('#' + Slideshow.settings.playBtn).hide();
        	myJQ('#' + 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 {
        	myJQ('#' + Slideshow.settings.pauseBtn).hide();
        	myJQ('#' + 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)
    {
    	myJQ.each(Slideshow.arrImages, function(i)
        {
            if (i == Slideshow.currImage) {
            	myJQ(this).animate({
                    opacity: 'hide'
                }, Slideshow.settings.fadeSpeed);
            } else if (i == next) {
            	myJQ(this).animate({
                    opacity: 'show'
                }, Slideshow.settings.fadeSpeed);
                try {
                	myJQ('#' + Slideshow.settings.imageTitle).html(myJQ(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;
            myJQ('#' + Slideshow.settings.imgCounter).html(Slideshow.settings.counterFormat.replace('x', count.toString()).replace('y', Slideshow.arrImages.length.toString()));
        } catch (e) { }


    }
}