var Panels = new Class
({
 options:
 {
 tab: '.tab',
 pane: '.pane'
 },

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

 try { this.tab = this.el.getElements(this.options.tab); } catch (err) { return; }
 this.pane = this.el.getElements(this.options.pane);

 this.tabs = new Element
 (
 'div',
 {
 'class': 'tabs'
 }
 ).adopt(this.tab);

 this.panes = new Element
 (
 'div',
 {
 'class': 'panes',
 'styles':
 {
 'overflow': 'hidden'
 }
 }
 ).adopt(this.pane);

 this.tabs.injectTop(this.el);
 this.panes.injectInside(this.el);

 this.tab.each
 (
 function (el, i)
 {
 el.addEvent('click', this.activate.pass(i, this));
 },
 this
 );

 this.size = new Fx.Style
 (
 this.panes,
 'height',
 {
 duration: 250
 }
 );

 this.scroll = new Fx.Scroll
 (
 this.panes,
 {
 wait: false,
 duration: 500,
 transition: Fx.Transitions.Quad.easeInOut
 }
 );

 this.offset = this.pane[0].getPosition().y - this.el.getPosition().y;

 this.activate(0);
 },

 activate: function(i)
 {
 var y = this.pane[i].getPosition().y - this.el.getPosition().y;
 if (y == this.offset) y = 0;
 this.scroll.start([0, this.scroll.element.getSize().scroll.y], [0, y]);
 this.size.start(this.panes.getSize().size.y, this.pane[i].getSize().size.y);

 var tab = this.tabs.getElement('.active');
 if ($defined(tab)) tab.removeClass('active');

 this.tab[i].addClass('active');
 }
});

Panels.implement(new Events(), new Options());