/******************************************************
 * This is the homepage slideshow written as a jquery *
 * plugin to replace the old flash-based one.         *
 ******************************************************/

(function($) {

    // the images parameter must be an Array of objects and each object must have a 'src' and a 'href' property
    // that respectively indicate the url of the image to be displayed and the address the user will be directed 
    // upon click
    $.fn.HomePageSlideshow = function(images, settings) {

        this.each(function() {

            // set up the default settings for the component
            settings = jQuery.extend({
                imageWidth: 760,
                imageHeight: 391,
                initialLoadDelay: 1500,
                transitionDelay: 1800,
                interval: 5000,
                stopLabel: 'STOP',
                goLabel: 'GO',
                nextLabel: 'NEXT',
                backLabel: 'BACK'
            }, settings);

            // helper methods
            stopTimer = function(direction) {
                if (transitionTimer) {
                    clearTimeout(transitionTimer);
                    transitionTimer = null;
                }
            };

            startTimer = function() {
                transitionTimer = setTimeout(function() { transition('next'); }, settings.interval);
            };

            transition = function(direction) {

                if (isTransitioning)
                    return;

                stopTimer();

                currentNode = direction == 'next' ? currentNode.next : currentNode.previous;

                aBackPhoto.css('background-image', 'url(' + currentNode.image.src + ')');
                aBackPhoto.attr('href', currentNode.image.href);

                isTransitioning = true;

                aFrontPhoto.fadeOut(settings.transitionDelay, function() {
                    aFrontPhoto.css('background-image', aBackPhoto.css('background-image'));
                    aFrontPhoto.attr('href', aBackPhoto.attr('href'));
                    aFrontPhoto.show();

                    isTransitioning = false;
                });

                if (aStopGoButton.html() == settings.stopLabel)
                    startTimer();
            };

            // declare the global variables
            var transitionTimer = null;
            var isTransitioning = false;

            // initialize and pre-load the images
            var arrImages = new Array();

            for (var i = 0; i < images.length; i++) {
                var image = new Image(settings.imageWidth, settings.imageHeight);
                image.src = images[i].src;
                arrImages.push(image);
            }

            // set up a circular linked list to facilitate rotating through the images
            var firstNode = {
                previous: null,
                image: images[0],
                next: null
            };

            var currentNode = firstNode;
            var previousNode = null;

            for (var i = 1; i < images.length; i++) {
                previousNode = currentNode;

                currentNode = {
                    previous: previousNode,
                    image: images[i],
                    next: null
                };

                previousNode.next = currentNode;
            }

            currentNode.next = firstNode; // link the last node with the first...
            firstNode.previous = currentNode; // ...and vice-versa...
            currentNode = firstNode; // ...and finally set the first node as the current one

            // clear the container's contents and append the HTML tags that will render the slideshow
            $(this).html('');
            $(this).append(' \
                <div class="divSlideshowContent"> \
                    <a class="aBackPhoto"></a> \
                    <a class="aFrontPhoto"></a> \
                    <div class="divControlButtons"> \
                        <a class="aBackButton" href="javascript:void(0)">' + settings.backLabel + '</a><a class="aStopGoButton" href="javascript:void(0)">' + settings.stopLabel + '</a><a class="aNextButton" href="javascript:void(0)">' + settings.nextLabel + '</a> \
                    </div> \
                </div> \
            ');


            // initialize the object references
            var divSlideshowContent = $(this).children('div.divSlideshowContent');
            var aBackPhoto = divSlideshowContent.children('a.aBackPhoto');
            var aFrontPhoto = divSlideshowContent.children('a.aFrontPhoto');
            var divControlButtons = divSlideshowContent.children('div.divControlButtons');
            var aBackButton = divControlButtons.children('a.aBackButton');
            var aStopGoButton = divControlButtons.children('a.aStopGoButton');
            var aNextButton = divControlButtons.children('a.aNextButton');

            // initialize the CSS properties
            divSlideshowContent.css('position', 'relative').css('margin-left', '0px').css('margin-top', '0px').css('padding-left', '0px').css('padding-top', '0px').css('width', settings.imageWidth + 'px').css('height', (settings.imageHeight + 14) + 'px');
            aBackPhoto.css('position', 'absolute').css('left', '0px').css('top', '0px').css('margin-left', '0px').css('margin-top', '0px').css('padding-left', '0px').css('padding-top', '0px').css('width', settings.imageWidth + 'px').css('height', settings.imageHeight + 'px');
            aFrontPhoto.css('position', 'absolute').css('left', '0px').css('top', '0px').css('margin-left', '0px').css('margin-top', '0px').css('padding-left', '0px').css('padding-top', '0px').css('width', settings.imageWidth + 'px').css('height', settings.imageHeight + 'px');
            aBackButton.css('background-color', '#000000').css('color', '#8CC6FF').css('border', 'solid 1px white').css('height', '11px').css('font-family', 'Arial,Helvetica').css('font-size', '9px').css('font-weight', 'bold').css('padding-left', '2px').css('padding-right', '2px').css('text-decoration', 'none').mouseover(function() { $(this).css('color', '#FFFFFF'); }).mouseout(function() { $(this).css('color', '#8CC6FF'); });
            aStopGoButton.css('background-color', '#000000').css('color', '#8CC6FF').css('border', 'solid 1px white').css('height', '11px').css('font-family', 'Arial,Helvetica').css('font-size', '9px').css('font-weight', 'bold').css('padding-left', '2px').css('padding-right', '2px').css('text-decoration', 'none').mouseover(function() { $(this).css('color', '#FFFFFF'); }).mouseout(function() { $(this).css('color', '#8CC6FF'); });
            aNextButton.css('background-color', '#000000').css('color', '#8CC6FF').css('border', 'solid 1px white').css('height', '11px').css('font-family', 'Arial,Helvetica').css('font-size', '9px').css('font-weight', 'bold').css('padding-left', '2px').css('padding-right', '2px').css('text-decoration', 'none').mouseover(function() { $(this).css('color', '#FFFFFF'); }).mouseout(function() { $(this).css('color', '#8CC6FF'); });
            divControlButtons.css('position', 'absolute').css('right', '2px').css('bottom', '2px');

            aFrontPhoto.hide();
            aBackPhoto.hide();

            // using setTimeout to initialize the component so that the browser has enough time to fetch the first image before we show it
            setTimeout(function() {

                // initialize the first image
                aFrontPhoto.css('background-image', 'url(' + currentNode.image.src + ')').attr('href', currentNode.image.href);
                aBackPhoto.css('background-image', 'url(' + currentNode.next.image.src + ')').attr('href', currentNode.next.image.href);
                aFrontPhoto.fadeIn(settings.transitionDelay, function() { aBackPhoto.show(); });
                startTimer();


                // hook up the click events to the control objects above
                // first the back button
                aBackButton.click(function() { transition('previous'); });
                aNextButton.click(function() { transition('next'); });
                aStopGoButton.click(function() {
                    if (aStopGoButton.html() == settings.stopLabel) {
                        aStopGoButton.html(settings.goLabel);
                        stopTimer();
                    }
                    else {
                        aStopGoButton.html(settings.stopLabel);
                        transition('next');
                        startTimer();
                    }
                });

            }, settings.initialLoadDelay);

        });

        return this;

    };

})(jQuery);