var FolioViewer = new Class({

    Implements: Options,

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

    initialize: function(el, options) {
        this.setOptions(options);
        if (!$(el)) {
            return false;
        }
        this.ctr                = 0;
        this.play               = 1;
        this.cascade            = 0;
        this.widget             = new Element('div').setProperty('id', 'play-pause')
                                                    .injectAfter($(el))
                                                    .addEvent('click', this.playpause.bindWithEvent(this));
        this.pager              = new Element('div').setProperty('id', 'pager')
                                                    .injectAfter($(el));
        this.els                = $$('#' + el + ' dd');
        this.els.each(function(el) {
            var img             = el.getElement('img');
            img.img             = new Element('img').set('src', img.src)
                                                    .addEvent('load', this.loadImage);
            img.img.dst         = img;
            img.set('src', '/img/common/spinner.gif');
            img.setStyle('width', '24');
            img.setStyle('height', '24');
            el.setStyle('left', this.ctr * el.getCoordinates().width);

            var span = new Element('span').injectInside(this.pager)
                                          .set('html', (this.ctr + 1))
                                          .setStyle('left', this.ctr * 22)
                                          .setStyle('background-position', '0 -' + (this.ctr * 11) + 'px');
            span.ctr            = this.ctr;
            span.cur            = el;
            span.addEvent('mouseover', this.over.bindWithEvent(this, span))
            span.addEvent('mouseout', this.out.bindWithEvent(this, span))
            span.addEvent('click', this.select.bindWithEvent(this, span));
            el.span = span;

            this.ctr++;
        }.bind(this));
        this.ctr                = 0;
        this.cur                = this.els[0];
        window.addEvent('load', this.refresh.bindWithEvent(this));
        $('email-address').addEvent('mouseover', function() {
            $('logo').setStyle('background-position', '0px -202px');
        });
        $('email-address').addEvent('mouseout', function() {
            $('logo').setStyle('background-position', '0px 0px');
        });
        $('news-link').addEvent('mouseover', function() {
            $('news-story').fade('in');
        });
        $('news-link').addEvent('mouseout', function() {
            $('news-story').fade('out');
        });
        $('news-story').setStyle('opacity', 0);
        if (this.play) {
            this.autoadvance.delay(4000, this);
        }
    },

    playpause: function() {
        this.play = 1 - this.play;
        this.widget.setStyle('background-position', (this.play) ? '0 0' : '-5px 0');
        if (this.play) {
            this.autoadvance.delay(100, this);
        }
    },

    autoadvance: function() {
        if (!this.play) {
            return false;
        }
        var ctr = this.ctr + 1;
        if (ctr == this.els.length) {
            ctr = 0;
        }
        this.swap(this.els[ctr], ctr);
        if (this.play) {
            this.autoadvance.delay(4000, this);
        }
    },

    loadImage: function() {
        var dst = this.dst.getParent();
        dst.setStyle('background-image', 'url(' + this.src + ')');
        this.dst.dispose();
        this.dispose();
    },

    refresh: function(e) {
        this.els.each(function(el) {
            var img             = el.getElement('img');
            if (img.img) {
                img.img.fireEvent('load');
            }
        });
    },

    update: function() {
        if (this.ctr >= 0 && this.ctr <= 17) {
            $('partner').fade('in');
        } else {
            $('partner').fade('out');
        }
    },

    over: function(e, el)
    {
        el.setStyle('background-position', '-22px -' + (el.ctr * 11) + 'px');
        el.setStyle('cursor', 'pointer');
    },

    out: function(e, el)
    {
        var xpos = (el.ctr == this.ctr) ? '-22px' : '0';
        el.setStyle('background-position', xpos + ' -' + (el.ctr * 11) + 'px');
        el.setStyle('cursor', 'pointer');
    },

    select: function(e, el)
    {
        e = new Event(e);
        e.stop();
        this.play = true;
        this.playpause();
        this.swap(el.cur, el.ctr);
    },

    swap: function(cur, ctr)
    {
        if (cur == this.cur) {
            return false;
        }

        if (this.cascade) {
            return false;
        }

        var ptr                 = this.ctr;
        var offset              = (ctr < this.ctr) ? ctr + (this.els.length) - this.ctr : ctr - this.ctr;
        var src                 = (ctr < this.ctr) ? 595 : -595;
        var dst                 = (ctr < this.ctr) ? -595 : 595;
        this.cur.get('tween', {property: 'left', transition: Fx.Transitions.Sine.easeIn, duration: 500}).start(src);
        cur.get('tween', {property: 'left', transition: Fx.Transitions.Sine.easeIn, duration: 650}).start([dst, 0]);
        this.cur                = cur;
        this.ctr                = ctr;

        // Animate page numbers
        for (var loop = 0; loop < this.els.length; loop++) {
            var el              = this.els[ptr].span;
            var x1              = el.getPosition(this.pager).x;
            var x2              = x1 - (offset * 22);
            this.cascade++;
            el.delay = 250 + (loop * 22);
            el.get('tween', {
                property: 'left',
                transition: Fx.Transitions.Sine.easeIn,
                duration: 250 + (loop * 22),
                onComplete: function(el, loop) {
                    this.cascade--;
                    var x = el.getPosition(this.pager).x;
                    if (x < 0) {
                        x4      = x + ((this.els.length) * 22);
                        x3      = x4 + (595 - (this.els.length) * 22) + 44;
                        this.cascade++;
                        el.get('tween', {
                            property: 'left',
                            duration: el.delay,
                            transition: Fx.Transitions.Sine.easeOut,
                            onComplete: function(el, loop) {
                                this.cascade--;
                            }.bind(this)
                        }).start([x3, x4]);
                    }
                }.bind(this)
            }).start([x1, x2]);
            ptr++;
            if (ptr == this.els.length) {
                ptr = 0;
            }
            el.fireEvent('mouseout');
        }

        this.update();
    }
});

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