// GESTIONE SLIDE HOMEPAGE ////////////////////////////////////////////////////////////////////////////////////////////////////
var FadeShow = new Class({

    Implements: Options,

    options: {
        container: 'gallery',   /* Contenitore immagini */
        delay: 3500,            /* Durata attesa prossima immagine */
        duration: 1500,         /* Durata transizione */
        buttonsPattern: ''      /* Pattern pulsanti per il controllo del fadeshow*/
    },

    initialize: function (element, options) {
        this.element = this.subject = $A(element);
        this.setOptions(options);

        this.options.container = $(this.options.container);

        this.period = null;

        this.images = null;
        this.buttons = null;
        this.currentImage = 0;

        this.preloadSlide();
    },

    showImage: function (index) {
        if (index >= 0 && index < this.images.length) {
            // Stop slideshow
            $clear(this.period);
            // Se immaggine attuale != da index allora la mostro altriemnti è già li ;)
            if (this.currentImage != index) {
                this.images[this.currentImage].tween('opacity', 0);
                try { this.buttons[this.currentImage].removeClass('active'); } catch (err) { }
                this.currentImage = index;
                this.images[this.currentImage].tween('opacity', 1);
                try { this.buttons[this.currentImage].addClass('active'); } catch (err) { }
            }
        }
    },

    changeImage: function () {
        this.images[this.currentImage].tween('opacity', 0);
        try { this.buttons[this.currentImage].removeClass('active'); } catch(err){ }
        this.currentImage = (this.currentImage + 1) % this.images.length;
        this.images[this.currentImage].tween('opacity', 1);
        try { this.buttons[this.currentImage].addClass('active'); } catch(err){ }
    },

    runSlideshow: function () {

        this.images = this.options.container.getChildren('img');
        this.images.set('tween', { duration: this.options.duration });
        this.buttons = $$(this.options.buttonsPattern);
        try { this.buttons[this.currentImage].addClass('active'); } catch (err) { }

        // Ciclo la gallery
        this.period = this.changeImage.periodical(this.options.duration + this.options.delay, this);
    },

    preloadOthers: function () {

        // La prima è già caricata
        this.element = $A(this.element.slice(1, this.element.length));

        var myClass = this;

        var myImgs = new Asset.images(this.element, {
            onComplete: function () {
                myImgs.setStyles({ 'opacity': 0 });
                myImgs.inject(myClass.options.container);
                myClass.runSlideshow.run([], myClass);
            }
        });

    },

    showNext: function () {
        $clear(this.period);
        var index = this.currentImage;
        if ((index + 1) >= this.images.length) {
            index = 0;
        }
        else {
            index = index + 1;
        }
        if (this.currentImage != index) {
            this.images[this.currentImage].tween('opacity', 0);
            this.currentImage = index;
            this.images[this.currentImage].tween('opacity', 1);
        }
    },

    showPrev: function () {
        $clear(this.period);
        var index = this.currentImage;
        if ((index - 1) < 0) {
            index = this.images.length - 1;
        }
        else {
            index = index - 1;
        }
        if (this.currentImage != index) {
            this.images[this.currentImage].tween('opacity', 0);
            this.currentImage = index;
            this.images[this.currentImage].tween('opacity', 1);
        }
    },

    preloadSlide: function () {

        var myClass = this;

        // Preload della prima poi tutte le altre
        var myBase = new Asset.image(this.element[0], {
            onload: function () {
                myBase.inject(myClass.options.container);
                myClass.preloadOthers.run([], myClass);
            }
        });

    }

});