var CategoryTabs = Class.create({
  initialize: function(tabs) { // [{ tab: 'element', switchesTo: 'element' }, ...]
    if (!tabs) 
      return;

    this.tabs = [];
    this.contents = [];

    tabs.each(function(t) {
      this.tabs.push($(t.tab));
      this.contents.push($(t.switchesTo));
      $(t.tab).observe('click', this.switchTo.curry($(t.switchesTo)).bind(this));
    }.bind(this));
  },
  
  switchTo: function(content) {
    this.tabs.invoke('removeClassName', 'active');
    this.contents.invoke('hide');

    content.show();
    this.tabs[this.contents.indexOf(content)].addClassName('active');
  }
});

var Dropdown = Class.create({
  initialize: function(element) {
    this.dropdown = $(element);
    this.actuator = this.dropdown.down('.actuator');
    this.content = this.dropdown.down('.dropdown-content');
    this.setup();
  },
  
  setup: function() {
    this.openStyle = {
      paddingTop: this.content.getStyle('padding-top'),
      paddingBottom: this.content.getStyle('padding-bottom'),
      height: this.content.getStyle('height'),
      opacity: '1.0'
    };

    this.closeStyle = { 'height': '0px', 'paddingTop': '0px', 'paddingBottom': '0px', 'opacity': '0.0' };
    this.content.setStyle(this.closeStyle);
    this.registerEvents();
  },
  
  registerEvents: function() {
    this.actuator.observe('click', this.toggle.bind(this));
  },
  
  toggle: function(event) {
    event.stop();
    var contentVisible = this.content.getHeight() < 10;
    this.content.morph(contentVisible ? this.openStyle : this.closeStyle, { 
      duration: .4
    });
  }
});