MooTools-based, transitionified switcherification

nuTabs.js

/*
---
script: nuTabs.js
decription: nuTabs - MooTools-based, transitionified switcherification
license: MIT-style license.
authors:
 - Oskar Krawczyk (http://nouincolor.com/)
requires:
  core:1.2.3:
  - Class.Extras
  - Element.Event
  - Element.Style
  - Element.Dimensions
  - Fx.Tween
  - Fx.Morph
  - String
  - Array
  more:1.2.3.2:
  - Element.Measure
provides: [nuTabs]
...
*/

// http://mooshell.net/e5UJm/1/

Elements.implement({
    tabify: function(options){
        this.tabNav = this.slice(0, this.length/2);
        this.tabBody = this.slice(3, this.length);
        new nuTabs($$(this.tabNav), $$(this.tabBody), $pick(options, {}));
    }
});
 
var nuTabs = new Class({
    Implements: [Events, Options],

    options: {
        // transition: $empty,
        // isItLupus: $empty
    },
    
    initialize: function(tabsNav, tabsBody, options){
        this.setOptions(options);
        this.tNav = tabsNav;
        this.tBody = tabsBody;
 
        this.attach();
    },
 
    attach: function(){
        this.tNav.each(function(tab, index){
            tab.addEvent('click', this.resize.bindWithEvent(this, index));
        }, this);
    },
 
    alteredHeight: function(index){
        // expose to measurement
        return this.tBody[index].measure(function(){
            return this.getSize().y;
        });
    },
 
    resize: function(e, index){
        e.stop();
        this.tBodyWrapper = this.tBody.getParent();
        
        // set transitions if needed
        this.tBodyWrapper.set('tween', {
            transition: $pick(this.options.transition, 'sine:out')
        });
        
        // alter the wrappers's height
        this.tBodyWrapper.tween('height', this.alteredHeight(index));    
 
        // absolutize and hide the content items
        this.tBody.set('styles', {
            'position': 'absolute',
            'top': 0,
            'opacity': 0
        }).fade('out');
 
        // show the active content item
        this.tBody[index].set('styles', {
            'display': 'block',
            'opacity': 0
        }).fade('in');
    }
});
 
window.addEvent('domready', function(e) {    
    // new nuTabs($$('#tabs-nav a'), $$('#tabs-body li'));
    $$('#tabs-nav a, #tabs-body li').tabify({
        transition: 'bounce:out'
    });
});

screen.css

#tabs-body {
    position: relative;
    border: solid 1px red;
    width: 300px;
    overflow: hidden;
}
 
    #tabs-body li {
        border: solid 1px green;
        display: none;
    }
 
    #tabs-body li.active {
        display: block;
    }