var mootabs = new Class({
    options: {
        width:              '300px',
        height:             '200px',
        changeTransition:   'none', //Fx.Transitions.Bounce.easeOut,
        duration:           1000,
        mouseOverClass:     'active',
        activateOnLoad:     'first',
        useAjax:            false,
        ajaxUrl:            '',
        ajaxOptions:        {method:'get'},
        ajaxLoadingText:    'Loading...'
    },

    initialize: function(element, options) {
        this.setOptions(options);
        this.el = $(element);
        this.elid = element;

        if(this.options.changeTransition != 'none'){
            this.el.setStyles({
                height: this.options.height,
                width: this.options.width
            });
        }

        this.titles = $$('#' + this.elid + ' ul li');
        this.panelHeight = this.el.getSize().y - (this.titles[0].getSize().y + 4);
        this.panels = $$('#' + this.elid + ' .mootabs_panel');

        if(this.options.changeTransition != 'none'){
            this.panels.setStyle('height', this.panelHeight);
        }

        this.titles.each(function(item) {
            item.addEvent('click', function(){
                item.removeClass(this.options.mouseOverClass);
                this.activate(item);
            }.bind(this));

            item.addEvent('mouseover', function() {
                if(item != this.activeTitle) {
                    item.addClass(this.options.mouseOverClass);
                }
            }.bind(this));

            item.addEvent('mouseout', function() {
                if(item != this.activeTitle) {
                    item.removeClass(this.options.mouseOverClass);
                }
            }.bind(this));
        }.bind(this));

        if(this.options.activateOnLoad != 'none'){
            if(this.options.activateOnLoad != 'first'){
                this.activate(this.options.activateOnLoad, true);
            } else {
                this.activate(this.titles[0], true);
            }
        }
    },

    activate: function(tab, skipAnim){
        if(! $defined(skipAnim)) {
            skipAnim = false;
        }
        if($type(tab) == 'string') {
            myTab = $$('#' + this.elid + ' ul li').filter('[title=' + tab + ']')[0];
            tab = myTab;
        }

    if($type(tab) == 'element') {
        var newTab = tab.getProperty('title');
        this.panels.removeClass('active');

    this.activePanel = this.panels.filter('#' + newTab)[0];

    this.activePanel.addClass('active');

    if(this.options.changeTransition != 'none' && skipAnim==false) {
        this.panels.filterById(newTab).setStyle('height', 0);
        var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: this.options.duration, transition: this.options.changeTransition});
        changeEffect.start({
            '0': {'height': [0, this.panelHeight]}
        });
    }

    this.titles.removeClass('active');

    tab.addClass('active');

    this.activeTitle = tab;

    if(this.options.useAjax) {
        this._getContent();
    }
}
},

    _getContent: function(){
        this.activePanel.setHTML(this.options.ajaxLoadingText);
        var newOptions = {update: this.activePanel.getProperty('id')};
        this.options.ajaxOptions = Object.extend(this.options.ajaxOptions, newOptions || {});
        var tabRequest = new Ajax(this.options.ajaxUrl + '?tab=' + this.activeTitle.getProperty('title'), this.options.ajaxOptions);
        tabRequest.request();
    },

    addTab: function(title, label, content){
        //the new title
        var newTitle = new Element('li', {
            'title': title
        });
        newTitle.appendText(label);
        this.titles.include(newTitle);
        $$('#' + this.elid + ' ul').adopt(newTitle);
        newTitle.addEvent('click', function() {
            this.activate(newTitle);
        }.bind(this));

    newTitle.addEvent('mouseover', function() {
        if(newTitle != this.activeTitle) {
            newTitle.addClass(this.options.mouseOverClass);
        }
    }.bind(this));
    newTitle.addEvent('mouseout', function() {
        if(newTitle != this.activeTitle) {
            newTitle.removeClass(this.options.mouseOverClass);
        }
    }.bind(this));
    //the new panel
    var newPanel = new Element('div', {
        'style': {'height': this.options.panelHeight},
        'id': title,
        'class': 'mootabs_panel'
    });
    if(!this.options.useAjax) {
        newPanel.setHTML(content);
    }
    this.panels.include(newPanel);
    this.el.adopt(newPanel);
},

    removeTab: function(title){
        if(this.activeTitle.title == title) {
            this.activate(this.titles[0]);
        }
        $$('#' + this.elid + ' ul li').filter('[title=' + title + ']')[0].remove();

    $$('#' + this.elid + ' .mootabs_panel').filter('#' + title)[0].remove();
},

    next: function(){
        var nextTab = this.activeTitle.getNext();
        if(!nextTab) {
            nextTab = this.titles[0];
        }
        this.activate(nextTab);
    },

    previous: function(){
        var previousTab = this.activeTitle.getPrevious();
        if(!previousTab) {
            previousTab = this.titles[this.titles.length - 1];
        }
        this.activate(previousTab);
    }
});

mootabs.implement(new Options);