var UI = window.UI||{};

Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

UI.Tabset = Class.create({
  initialize : function(element, options){
    this.element = $(element);
    if(!this.element){
      return false;
    }
    this.current = null;
    this.options = Object.extend({
      content: '.content',
      trigger: '.trigger',
      selected: '.selected'
    }, options||{});
    this.triggers = this.element.select(this.options.trigger);
    this.children = this.element.select(this.options.content);
    
    this.children.each(function(element, i){
      element.style.overflow='hidden';
      if(element.match(this.options.selected)){
        this.current = element;
        element.addClassName('selected');
        this.current_trigger = this.triggers[i];
        this.current_trigger.addClassName('selected');
      }else{
        this.hide(element);
      }
    }, this);
    if(!this.current){
      this.current = this.children[0];
      this.current.addClassName('selected');
      this.show(this.current);
      this.current_trigger = this.triggers[0];
      this.current_trigger.toggleClassName('selected');
    }
    $$('.redraw').invoke('redraw');
    this.element.observe('click', this.onclick.bindAsEventListener(this));
  },
  onclick : function(e){
    var element = Event.findElement(e, this.options.trigger);
    var i = this.triggers.indexOf(element);
    if(element){
      Event.stop(e);
      var list = this.children[i];    
      if(this.current){                
        if(list.identify()!=this.current.identify()){
          element.toggleClassName('selected');          
          this.current_trigger.toggleClassName('selected');
          this.show(list);
          this.hide(this.current);
          this.current = list;
          this.current_trigger = element;
        }
      }else{
        this.show(list);
        this.current = list;
        this.current_trigger = element;
      }
      $$('.redraw').invoke('redraw');
    }
  },
  show : function(element){
    element.style.height='auto';
  },
  hide : function(element){
    element.style.height=0;
  }
});