var SlideShow = new Class({

    els: [],
    waiting: 0,
    timer: 0,
    ctr: -1,

    Implements: Options,

    options: {
        delay:                  40,
        duration:               1000,
        transition:             Fx.Transitions.Cubic.easeIn,
        itemClass:              '.promotion',
        controls:               false
    },

    initialize: function(els, options) {
        this.setOptions(options);
        this.el                 = new Element('div')
            .setProperty('id', 'slideshow')
            .setStyle('background-image', 'url(/img/common/spinner.gif)')
            .inject($('layout'), 'top');

        $A(els).each(function(src) {
            var img             = new Element('img')
                .set('opacity', 0)
                .setProperty('src', src)
                .addEvent('load', function() {
                    this.waiting--;
                    if (this.waiting == 0) {
                        this.el.setStyle('background-image', 'none')
                    }
                }.bind(this))
                .inject(this.el, 'bottom');
            this.els[this.els.length] = img;
            this.waiting++;
        }.bind(this));
        this.loop.delay(100, this);
    },

    loop: function() {
        if (!this.waiting) {
            if (this.timer) {
                this.timer--;
            } else {
                if (this.ctr > -1) {
                    this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 0);
                }
                this.ctr++;
                if (this.ctr == this.els.length) {
                    this.ctr = 0;
                }
                this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 1);
                this.timer              = this.options.delay;
            }
        }
        return this.loop.delay(100, this);
    }
});

var FolioViewer = new Class({

    Implements: Options,

    els: [],
    waiting: 0,
    timer: 0,
    pause: 0,
    ctr: -1,

    options: {
        delay:                  60,
        duration:               1500,
        transition:             Fx.Transitions.Cubic.easeIn,
        itemClass:              '.promotion',
        controls:               false
    },

    initialize: function(els, options) {
        this.setOptions(options);
        this.el                 = new Element('div')
            .setProperty('id', 'slideshow')
            .setStyle('background-image', 'url(/img/common/spinner.gif)')
            .inject($('layout'), 'top');

        this.prv                = new Element('div')
            .setProperty('id', 'arrow-prev')
            .addEvent('mouseover', function() {
                this.tween('opacity', 0.5)
            })
            .addEvent('mouseout', function() {
                this.tween('opacity', 1)
            })
            .addEvent('click', function() {
                this.pause      = 1;
                this.refresh();
                this.prev();
            }.bindWithEvent(this))
            .inject($('banner'), 'top');

        this.nxt               = new Element('div')
            .setProperty('id', 'arrow-next')
            .addEvent('mouseover', function() {
                this.tween('opacity', 0.5)
            })
            .addEvent('mouseout', function() {
                this.tween('opacity', 1)
            })
            .addEvent('click', function() {
                this.pause      = 1;
                this.refresh();
                this.next();
            }.bindWithEvent(this))
            .inject($('banner'), 'top');

        this.widget             = new Element('div')
            .setProperty('id', 'widget')
            .addEvent('mouseover', function() {
                this.tween('opacity', 0.5)
            })
            .addEvent('mouseout', function() {
                this.tween('opacity', 1)
            })
            .addEvent('click', function() {
                this.pause = 1 - this.pause;
                this.refresh();
            }.bindWithEvent(this))
            .inject($('banner'), 'top');

        $A(els).each(function(src) {
            var img             = new Element('img')
                .set('opacity', 0)
                .setProperty('src', src)
                .addEvent('load', function() {
                    this.waiting--;
                    if (this.waiting == 0) {
                        this.el.setStyle('background-image', 'none')
                    }
                    var w = img.getCoordinates().width;
                    if (w < 500) {
                        img.setStyle('left', 317);
                    } else {
                        img.setStyle('left', 171);
                    }
                    img.setStyle('top', 102);
                }.bind(this))
                .inject(this.el, 'bottom');
            this.els[this.els.length] = img;
            this.waiting++;
        }.bind(this));
        this.loop.delay(100, this);
    },

    refresh: function() {
        this.widget.setStyle('background-position', '0 -' + (this.pause * 13) + 'px');
    },

    next: function() {
        if (this.ctr > -1) {
            this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 0);
        }
        this.ctr++;
        if (this.ctr == this.els.length) {
            this.ctr = 0;
        }
        this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 1);
    },

    prev: function() {
        if (this.ctr > -1) {
            this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 0);
        }
        this.ctr--;
        if (this.ctr < 0) {
            this.ctr = this.els.length - 1;
        }
        this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 1);
    },

    loop: function() {
        if (!this.waiting && !this.pause) {
            if (this.timer) {
                this.timer--;
            } else {
                this.next();
                this.timer              = this.options.delay;
            }
        }
        return this.loop.delay(100, this);
    }
});

window.addEvent('domready', function() {
    $$('a.external').each(function(link) {
        link.target = '_blank';
    });
});