/* CSS Javascript Gallery created by David Bunce david@dodifferent.org.uk */


window.addEvent('load', function() {
    /* settings */
    var showDuration = 6000; /* Bigger number means a slower slide show transition */
    /* end settings */

    // Begin code by setting the variables
    var container = $('scroller');
    var helperContainer = $('helpers');
    var controlContainer = $('controlContainer');
    var controlPauseContainer = $('controlPauseContainer');
    var imageArray = container.getElements('div');
    var currentIndex = 0;
    var interval;
    var listGalleryElements = [];
    var listGalleryElementsActive = 'show-active';

    // Declare the 'Start' button
    var controlGalleryStart = new Element('a', {
        id: 'controlGalleryStart',
        href: '#',
        'class': 'carousel-pause',
        text: '',
        width: '30px'
    }).inject(controlPauseContainer);


    var controlGalleryStop;

    // Overall function to start the thing going
    var start = function() {
        interval = show.periodical(showDuration);
    };

    // Overall function to stop
    var stop = function() { $clear(interval); };

    // Handles the math related to which image is showing and which number is considered 'active'
    var show = function(to) {
        imageArray[currentIndex].fade('out');
        listGalleryElements[currentIndex].removeClass(listGalleryElementsActive);
        imageArray[currentIndex = ($defined(to) ? to : (currentIndex < imageArray.length - 1 ? currentIndex + 1 : 0))].fade('in');
        listGalleryElements[currentIndex].addClass(listGalleryElementsActive);
    };


    // This is the main loop - here the business is done
    imageArray.each(function(div, i) {
        listGalleryElements.push(new Element('a', {
            text: i + 1,
            href: '#',
            'class': 'listGalleryElements' + (i == 0 ? ' ' + listGalleryElementsActive : ''),
            events: { // Determines what happens when you click on a number
                click: function(e) {
                    if (e) e.stop();
                    stop();
                    show(i);
                    if ($('controlGalleryStart')) {
                        $('controlGalleryStart').dispose(); // Need to make sure you can restart, so pass the user the start function choice
                    }
                    var toggleStop = new Element('a', {
                        id: 'controlGalleryStop',
                        href: '#',
                        'class': 'carousel-resume',
                        width: '30px',
                        events: {
                            click: function(f) {
                                $('controlGalleryStop').dispose();
                                controlGalleryStart.inject(controlPauseContainer);
                                start();
                            }
                        }
                    }).inject(controlPauseContainer);
                }
            }
        }).inject(controlContainer));
        if (i > 0) { div.set('opacity', 0); }
    });

    // This controls the start-stop function. It's a simple toggle between two elements
    controlGalleryStart.addEvents({
        click: function(e) {
            if (e) e.stop();
            stop();
            $('controlGalleryStart').dispose(); // Out with the old . . . 
            var toggleStop = new Element('a', { // And in with the new!
                id: 'controlGalleryStop',
                href: '#',
                'class': 'carousel-resume',
                text: '',
                width: '30px',
                events: {
                    click: function(f) {
                        $('controlGalleryStop').dispose();
                        controlGalleryStart.inject(controlPauseContainer);
                        start();
                    }
                }
            }).inject(controlPauseContainer);
        }
    });

    interval = show.periodical(showDuration);
});