var MainGallery = new Class({
    
    
    Implements: [Chain, Events, Options],

    options: {
        element: null,
        width: '100%',
        height: '200px',
        slideshowDuration: 1
    },

    initialize: function(element, data, options) {
        this.setOptions(options);

        this.slideshow = $(element);
        if (!this.slideshow) { return; }

        this.element = element;

        //set default styles
        this.slideshow.set('styles', { 'display': 'block', 'position': 'relative', 'z-index': 0, 'width': this.options.width, 'height': this.options.height });
        
        //remove default image, replace with slideshow
        this.data = { 'images': [], 'captions': [], 'hrefs': [], 'urls': [] };

        for (var image in data) {

            var obj = data[image] || {};
            var caption = (obj.caption) ? obj.caption.trim() : '';
            var href = (obj.href) ? obj.href.trim() : '';
            var url = (obj.url) ? obj.url.trim() : '';

            this.data.images.push(image);
            this.data.captions.push(caption);
            this.data.hrefs.push(href);
            this.data.urls.push(url);
        }
        
        this.preloadImages();
        this.loadController();
        this.loadImage(0);
        
        //Add cursor if links are provided
        if(this.data.urls.length > 0) {
            this.slideshow.addClass('cursor');
            this.slideshow.setStyle('cursor', 'pointer');
        }
        
        if(this.options.slideshowDuration != 0){
            this.startSlideShow();
        }
        
        this.fireEvent('onGalleryLoaded');
        
    },

    preloadImages: function(images) {

        var images = [];
        
        for (var i = 0; i < this.data.hrefs.length; i++) {
            images[i] = this.data.hrefs[i];
        }

        var loader = new Asset.images(images, {
            onProgress: function(counter, index) {
             
            },
            onComplete: function() {
             
            }
        });
    },

    loadImage: function(index) {
        this.currentIndex = index;
        var currentUrl = this.data.urls[index];
        this.slideshow.setStyle('background', 'url(' + this.data.hrefs[index] + ') no-repeat');
        
        //add event for feature to redirect to a url
        this.slideshow.set('events', {
            'click': function(currentUrl) {
                this.goToUrl(currentUrl);
                return false;
            } .pass(currentUrl, this)
        });
        
        this.caption.set('html', this.data.captions[index]);
        if (this.controllerListButtons.getElement('.selectedButton')) {
            this.controllerListButtons.getElement('.selectedButton').set('class', 'unselectedButton');
        }

        this.controllerListButtons.getElements('li')[index].set('class', 'selectedButton');
    },

    loadController: function() {
    
        this.controller = new Element('div', {
            'id': 'mgMainGalleryController',
            'class': 'mgMainGalleryController'
        });

        this.caption = new Element('div', {
            'id': 'mgMainGalleryCaption',
            'class': 'mgMainGalleryCaption'
        });

        this.controllerListButtons = new Element('ul', {
            'class': 'mgMainNavigation'
        });

        for (var i = 0; i < this.data.images.length; i++) {
            var buttonListItem = new Element('li', { 'class': 'unselectedButton' }).inject(this.controllerListButtons);
            var buttonLink = new Element('a', { 'href': '' }).appendText(i + 1).inject(buttonListItem);

            buttonLink.set('events', {
                'click': function(i) {
                    clearInterval(this.slideInterval);
                    this.loadImage(i);
                    return false;
                } .pass(i, this)
            });

            buttonListItem.set('events', {
                'click': function(i) {
                    clearInterval(this.slideInterval);
                    this.loadImage(i);
                    return false;
                } .pass(i, this),
                'mouseenter': function() {
                    this.setStyle('cursor', 'pointer');
                },
                'mouseleave': function() {

                }
            });
        }

        this.controller.set('opacity', 0.6);
        this.controller.injectInside(this.slideshow);
        this.caption.injectInside(this.controller);
        this.controllerFX = new Fx.Morph(this.controller, { duration: '500', transition: Fx.Transitions.Sine.easeOut });

        this.controllerFX.start({
            'height': [0, 70]
        }).chain(function() {
            this.controllerListButtons.injectInside(this.slideshow);
        } .bind(this));
    }, 
    startSlideShow: function(){
        this.slideInterval = setInterval(function(){
            if(this.currentIndex < this.data.images.length - 1){
                this.loadImage(this.currentIndex + 1);
            }
            else{
                this.loadImage(0);
            }
        }.bind(this), 8000);
        
        this.clearInterval = setInterval(function(){
            this.unloadEvents(this.slideshow);
        }.bind(this), 7999);
    },
    goToUrl: function(url){
        window.location.href = url;
    },
    unloadEvents: function(image){
        this.slideshow.removeEvents('click');
    }
});