(function (window, $, $$, Fx, $each, Element) {
    window.addEvent('domready', function () {
        if(!$('headSlideShow'))
            return false;

        // Loop variables
        var images = [],
            index = 0,
            homeSlideshowIndexOld,
            homeSlideshowIndex,
            oldindex;

        // DOM cache
        var orange = $$('.orange')[0],
            green = $$('.green')[0];

        // Animation cache
        var orangeWrapper = $('slideShowWrapperOrange'),
            greenWrapper = $('slideShowWrapperGreen'),
            orangeFx = new Fx.Tween(orangeWrapper),
            greenFx = new Fx.Tween(greenWrapper),
            orangeWidth,
            greenWidth;

        // Generates slideshow based off images with HTML5 data attributes
        $each($('headSlideShow').getElements("img"), function (img) {
            images.push({
                image: img.get('src'),
                imageSmall: img.get('data-small'),
                orange: img.get('data-orange'),
                green: img.get('data-green'),
                quote: img.get('data-quote'),
                quoteSrc : img.get('data-quote-src'),
                videoUrl: img.get('data-videourl'),
                videoTitle: img.get('data-videotitle')
            });

            img.dispose();
        });

        // Creates the images based off the array 
        $each(images, function (image, itr) {
           
            image.imgEl = new Element('img', { src: image.image }).inject($('headSlideShow'), 'top');
            
            if (image.imageSmall != null && image.videoTitle != null && image.videoUrl != null) { 
                image.smallEl = new Element('img', { src: image.imageSmall });
                
                image.anchorEle = new Element('a', { href: image.videoUrl });
                image.titleEle = new Element('h4', { 'class': 'videoTitle' });
                image.anchorEle.appendChild(image.smallEl);
                image.anchorEle.inject($('SmallSlideshow'), 'top');                    
                image.titleEle.innerHTML = image.videoTitle;
                image.anchorEle.appendChild(image.titleEle);
                if(itr > 0)
                    image.anchorEle.set('opacity', 0);
            }
            else{
                image.anchorEle = false;
            }
            
        });

        // Loop through the images on a 5 second interval
        function loop() {
            // Reset index and increment
            oldindex = index;
            index = (index < 0) ? 0 : index;
            index = (index != images.length - 1) ? index + 1 : 0;

            // Reset the current animated image
            homeSlideshowIndexOld = homeSlideshowIndex;
            homeSlideshowIndex = index;

            // Resets width
            orangeFx.start('width', 0);
            greenFx.start('width', 0);

            // Fades in the quote text
            var _quote = $('head_large_quote').getElement('.quote');
            var _attribution = $('head_large_quote').getElement('.attribution');

            _quote.get('tween').start('opacity', 0).chain(function () {
                _quote.set('html', images[index].quote).fade('in');
                                   
            });
            if(_attribution){
                _attribution.get('tween').start('opacity', 0).chain(function () {
                    _attribution.set('html', images[index].quoteSrc).fade('in');                

                });
            }
            // Fades in the orange text
            var _orangeText = orange.getElement('.text');
            _orangeText.get('tween').start('opacity', 0).chain(function () {
                _orangeText.set('html', '<span class="left"></span>' + images[index].orange + '<span class="right"></span>').fade('in');

                orangeWidth = orange.getWidth();
                orangeFx.start('width', 0, orangeWidth);
            });

            // Fades in the green text
            var _greenText = green.getElement('.text');
            _greenText.get('tween').start('opacity', 0).chain(function () {
                _greenText.set('html', '<span class="left"></span>' + images[index].green + '<span class="right"></span>').fade('in');
                greenWidth = green.getWidth();
                greenFx.start.pass(['width', 0, greenWidth], greenFx).delay(250);
            });

            // Fade in the current image 
            var current = images[index];
            if (current) {
                current.imgEl.fade('in');
                if(current.anchorEle)
                    current.anchorEle.fade('in');
            }

            // Fade out the old image
            var old = images[oldindex];
            if (old) {
                old.imgEl.fade('out');
                if(old.anchorEle)
                    old.anchorEle.fade('out');
            }


            images.length > 1 && window.setTimeout(loop, 5000);
        }

        images.length > 1 && window.setTimeout(loop, 5000);

    });
})(this, this.$, this.$$, this.Fx, this.$each, this.Element);