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

        /*
        //images	
        if (!images){
        images = {};
        this.slideshow.getElements(this.classes.get('images') + ' img').each(function(img, i){
        var src = img.get('src');
        var caption = $pick(img.get('alt'), img.get('title'), '');
        imageData[src] = {'caption': caption, 'href': href};
        });
        }
        */

        this.data = { 'images': [], 'captions': [], 'hrefs': [] };

        for (var image in data) {

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

            this.data.images.push(image);
            this.data.captions.push(caption);
            this.data.hrefs.push(href);
        }

        this.preloadImages();
        this.loadController();
        this.loadImage(0);
        
        if(this.options.slideshowDuration != 0){
            this.startSlideShow();
        }
        
        this.fireEvent('onGalleryLoaded');
        
    },

    preloadImages: function(images) {

        /*
        var progressBar = new dwProgressBar({
            container: $('progressBar'),
            startPercentage: 0,
            speed: 750,
            boxID: 'box',
            percentageID: 'perc',
            displayID: 'text',
            displayText: true
        });
        */
        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) {
                //progressBar.set((counter + 1) * (100 / images.length));
            },
            onComplete: function() {
                /*
                images.each(function(im) {
                    new Element('img', { src: im, width: 200, style: 'width:200px;margin:20px 20px 20px 0;' }).inject($('images-holder'));
                });
                */
            }
        });
    },

    loadImage: function(index) {
        this.currentIndex = index;
        this.slideshow.setStyle('background', 'url(' + this.data.hrefs[index] + ') no-repeat');
        this.caption.set('text', 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.slideshow);
        this.controllerFX = new Fx.Morph(this.controller, { duration: '500', transition: Fx.Transitions.Sine.easeOut });

        this.controllerFX.start({
            'height': [0, 30]
        }).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);
    }
});