/* props to http://www.silverscripting.com/ */
var tabs = new Class({
    initialize: function(element) {
        this.el = $(element);
        this.elid = element;
        
        this.titles = $$('#' + this.elid + ' ul.menu li span');
        this.titleParents = $$('#' + this.elid + ' ul.menu li');
        this.panels = $$('#' + this.elid + ' .panel');
        
        this.panels.each(function(item) {
            if (item.hasClass('active')) {
                this.activePanel = item;
            }
        }.bind(this));
        
        this.titles.each(function(item) {
            item.addEvent('click', function() {
                    this.activate(item);
                }.bind(this)
            );
        }.bind(this));
    },
    
    activate: function(tab) {
        if ($type(tab) == 'string') {
            tab = $$('#' + this.elid + ' ul.menu li span').filterByAttribute('title', '=', tab)[0];
        }
        if ($type(tab) == 'element') {
            var newTab = tab.getProperty('title');
            var old = this.activePanel;
            
            var fx = new Fx.Tween(old, {'duration':200});
            var self = this;
            fx.start('opacity', 0).chain(function() {
                this.set('display', 'none');
                this.callChain();
            }).chain(function() {
                self.panels.removeClass('active');
                self.activePanel = $(newTab);
                self.activePanel.setStyle('opacity', 0);
                self.activePanel.addClass('active');
                self.activePanel.setStyle('display', 'block');
                self.activePanel.setStyle('visibility', 'visible');
                this.callChain();
            }).chain(function() {
                self.activePanel.tween('opacity', 1);
            });
            
            this.titleParents.removeClass('active');
            tab.getParent().addClass('active');
            this.activeTitle = tab;
        }
    },
});