/*
  HTML Code
  <ul class="simpletabs">
    <li id="tab{i}"></li>
    ...
  </ul>
  <div id="divtab{i}"></div>
  ...
  When behavior loaded the current_class is added to div{i} and
  the rest divtab{i} are hidden automatically.
*/
var SimpleTabs = Behavior.create({
  tabs: null,
  current_class: "current_tab",
  
  initialize: function() {
    
    this.tabs = new Array();

    li_items = this.element.select("li");
    
    // creamos el array de elementos
    for(var i = 0; i < li_items.length; i++){
      this.tabs[i] = li_items[i];
    	// Añadimos el evento de gestión de onclick
    	Event.observe(li_items[i], 'click', this.click_button.bind(this));
      // ocultamos su contenido
      this.hide_tab(li_items[i]);
    }
    //activamos el primero
    this.show_tab(li_items[0])
  },
  click_button: function(e) {
  	Event.stop(e);
    var newtab = e.target.up(1);
    var oldtab = this.tabs[0];
    var current_class = this.current_class
    this.tabs.each(function(tab){
      if (tab.hasClassName(current_class)){
        oldtab = tab;
      }
    });
    
    this.toggle_tabs(newtab, oldtab);
  },
  
  toggle_tabs: function(newtab, oldtab) {
    this.hide_tab(oldtab);
    this.show_tab(newtab);
  },
  show_tab: function(tab){
    var tab_content_id = "div"+tab.id;
    $(tab_content_id).show();
    tab.addClassName(this.current_class);
  },
  hide_tab: function(tab){
    var tab_content_id = "div"+tab.id;
    $(tab_content_id).hide();
    tab.removeClassName(this.current_class);
  }

});

Event.addBehavior({
  '.simple_tabs': SimpleTabs()
});