UI.Tabset = Class.create({
  initialize : function(element, options){
    this.element = $(element);
    if(!this.element){
      return false;
    }    
    this.options = Object.extend({
      'tab' : 'li.tab'
    }, options||{});    
    this.onClickListener = this.onClick.bindAsEventListener(this);
    this.element.observe('click', this.onClickListener); 
    
    var selected = this.element.down('li.selected');
    this.element.select('li.tab').each(function(element, i){
      if((selected && element==selected) || (!selected && i==0)){
        this.show(element.down('a').hash.substr(1));
      }else{
        this.hide(element.down('a').hash.substr(1));
      }
    }, this);       
  },
  onClick : function(e){
    if(element = e.findElement('a')){
      e.stop();
      var id = element.hash.substr(1);
      if(this.current && this.current == id) return;
      if(this.current) this.hide(this.current);
      this.show(id);
    }
  },
  show : function(element){
    if (!(element = $(element))) return;
    element.setStyle({
      'height' : 'auto',
      'overflow' : ''
    });
    var id = this.current = element.identify();
    this.element.down('a[href="#'+id+'"]').up('li').addClassName('selected');
  },
  hide : function(element){    
    if (!(element = $(element))) return;   
    element.setStyle({
      'height' : 0,
      'overflow' : 'hidden'
    });
    var id = element.identify();
    this.element.down('a[href="#'+id+'"]').up('li').removeClassName('selected');
  }
});