var vertSlider = new Class({
    Implements: Options,
    initialize: function (options) {
        this.setOptions(options);
        this.options.container.set('morph', {
            duration: 1400,
            transition: Fx.Transitions.Quad.easeInOut
        });
    },
    show: function (i, action) {
        if (action != 0) this.stop();
        if (i == -1)
            this.reset();
        else {
            this.slideTo(i);
            if (!this.started) {
                this.begin();
                this.periodical = (function () {
                    if (this.options.current < (this.options.tabs.length - 1)) this.options.current++;
                    else this.options.current = 0;
                    this.slideTo(this.options.current);
                }).periodical(10000, this);
            }
        }
    },
    stop: function () {
        clearInterval(this.periodical);
    },
    begin: function () {
        this.options.home.fade('out');
        this.started = true;
    },
    reset: function () {
        this.options.home.fade('in');
        $$('#tabs LI').removeClass('current');
        $$('#tabs LI').removeClass('current_next');
        this.started = false;
        this.options.container.setStyle('top', this.options.height);
    },
    slideTo: function (i) {
        $$('#tabs LI').removeClass('current');
        $$('#tabs LI').removeClass('current_next');
        this.options.tabs[i].addClass('current');
        if (this.options.tabs[(i + 1)])
            this.options.tabs[(i + 1)].addClass('current_next');
        var targetPos = -(i * this.options.height);
        if (this.started == true)
            this.options.container.morph({ 'top': targetPos });
        else {
            this.options.container.setStyles({ opacity: 0, top: targetPos });
            this.options.container.fade('in');
        }
    },
    started: false
});

document.addEvent('domready', function () {
    var slider = new vertSlider({
        container: $('tab_content'),
        tabs: $$('#tabs LI'),
        height: $('mask').getHeight(),
        home: $('intro_text'),
        current: 0
    });
    $('reset').addEvent('click', function () {
        slider.show(-1, 0);
    });
    $$('#tabs A').each(function (el, i) {
        el.addEvents({
            'click': function () {
                slider.show(i, 1);
                return false;
            }
        });
    });

    var delayFunction = (function () {
        slider.show(0, 0);
    }).delay(10000);
});
