/* tabs */
// true = open
// false = closed
Collapsables = {
  init:function() {
    var panels = $$('.collapsable');
    panels.each(function(panel) {
        
        var content = Element.select(panel, '.container')[0];
        var title   = Element.select(panel, '.title')[0];
        var open = Element.select(panel, '.ctrl-open')[0];
        var close = Element.select(panel, '.ctrl-close')[0];
        var link_open = Element.select(panel, '.link-show')[0];
        var link_close = Element.select(panel, '.link-hide')[0];
        
        panel.state = false;
        
        Element.hide(content);
        Element.hide(open);
        Element.hide(link_close);
        
        
        
        // show hide
        title.onclick = function() {
          if (panel.state == false) {
            Element.show(content);
            
            Element.show(open);
            Element.show(link_close);
            
            Element.hide(close);
            Element.hide(link_open);
            
            panel.state = true;
          } else {
            Element.hide(content);
            
            Element.show(close);
            Element.show(link_open);
            
            Element.hide(open);
            Element.hide(link_close);            
            
            panel.state = false;
          }
        }
        
        
        
    });
  }
}

Tab = {
  init:function() {
    // true = open
    // false = closed
    $$('.tab').each(function(li) {
      var link = Element.select(li, 'a')[0];
      var json = link.rel.evalJSON();
      Event.observe(link, 'click', function(e) {
        if (!link.parentNode.hasClassName('active')) {
          Tab.clear();
          Tab.clearPanels();
          
          link.parentNode.addClassName('active');
          
          Tab.toggle(json.tab);
        }
        Event.stop(e);
      });
      
      

      
      
      li.panel = false;    
      
    });
  },
  
  clear:function() {
       $$('.tab').each(function(li) {
            li.removeClassName('active'); 
       });
  },
  
  clearPanels:function() {
    $$('.panel').each(function(el) {
            Element.hide(el);
       });
  },
  
  toggle:function(tab) {
    
    
      Element.show($(tab));
     
    
  }
  

  
}



Event.observe(window, 'load', function() {
    var panels = $$('.collapsable');
    if (panels.length > 0) {
      Tab.init();
      Collapsables.init();
    }
    
    

});

