Tabs = new Class({

  initialize: function(container, colors) {
    this.container = container;
    this.colors = colors;
    this.headers = $$('#' + container + ' > table td');
    this.tabs = $$('#' + container + ' > div');
    this.headers.setStyle('background-color', colors.inactive);
    this.activeHeader = null;
    this.activeTab = null;
    var tabsObject = this;
    this.headers.addEvents({
      'click':      function() { tabsObject.select(this.title) },
      'mouseenter': function() { $(this).tween('background-color', colors.hover) },
      'mouseleave': function() { $(this).tween('background-color', $(this).hasClass('active') ? colors.active : colors.inactive) }
    });
  },

  select: function(title) {
    this.activeHeader = this.headers.filter('td[title="'+title+'"]');
    this.activeTab = $(title);
    if (!this.activeHeader || !this.activeTab) {
      alert('Wechsel auf ungültigen Tab: '+title);
      return this;
    }
    this.headers.tween('background-color', this.colors.inactive);
    this.headers.removeClass('active');
    this.activeHeader.tween('background-color', this.colors.active);
    this.activeHeader.addClass('active');
    this.tabs.setStyle('display', 'none');
    this.activeTab.setStyle('display', 'block');
    return this;
  },

  flash: function(title) {
    var header = this.headers.filter('td[title="'+title+'"]').pop();
    var effect = new Fx.Tween(header, { property: 'color', duration: 2000, link: 'chain' });
    effect.start(this.colors.flash).start('#000000');
    return this;
  }

});