var ContentFader = Class.create({

    initialize: function(container) {
        this.IMAGE_WIDTH = 600;
        this.AUTO_TIMER = 15;
        this.container = $(container)
        this.tabs = $('tabs');
        //this.wnd = this.container.down('.window')
        this.contents = this.container.select(".fader-content");
        this.tabs.observe('click', this.onTabClick.bind(this));

        this.currentindex = 0;

        for (i = 0; i < this.contents.length; i++) {
            if (i > 0) {
                this.contents[i].hide();
            }
        }

        new PeriodicalExecuter(this.autoSwitch.bind(this), this.AUTO_TIMER);
    },

    onTabClick: function(e) {
    if (!e.element().match('.mp-navigator *')) return;
        var button = e.findElement('button');
        this.setTab(button);
        this.setPanel(button);
        this.pauseAutoSwitch();
    },

    setTab: function(button) {
    this.tabs.down('button.selected').removeClassName('selected');
    button.addClassName('selected');
    },

    setPanel: function(button) {
        var index = this.tabs.select('button').indexOf(button);
        if (this.currentindex != index) {
            new Effect.Fade(this.contents[this.currentindex], { duration: 1.0 });
            this.currentindex = index;
            new Effect.Appear(this.contents[index], { duration: 1.0 });
        }
    },

    autoSwitch: function(pe) {
        if (this.auto_paused) return;
        var button = this.currentindex < 3 ? this.tabs.select('button')[this.currentindex + 1] : this.tabs.select('button')[0];
        this.setTab(button);
        this.setPanel(button);
    },

    pauseAutoSwitch: function() {
        this.auto_paused = true;
    },

    unpauseAutoSwitch: function() {
        this.auto_paused = false;
    }
});