gistfile1.js

document.observe("dom:loaded", function() {
  tabs = new UpperTabs();
});

UpperTabs = Class.create({
  sticky: new Array,
  current: new Array,
  menus: new Array,
  submenus: new Array,
  timer: null,
  initialize: function() {
    // set up initial values
    this.sticky = $$("#nav li.current")
    this.menus = $$("#nav li");
    // hide everything
    this.menus.each(function(el) {
      $(el).removeClassName("current")
      $(el).addClassName("off")
    });
    // resurrect the sticky tabs
    this.show_sticky();
    // set up observers
    this.observe_menus();
  },
  observe_menus: function() {
    this.menus.each((function(el) {
      el.observe("mouseover", this.show_menu.bind(this));
      el.observe("mouseout", this.start_timer.bind(this));
    }).bind(this));
  },
  show_menu: function(e) {
    var el = e.element();
    // need to hide the "sticky" menus unless the current item is in it
    this.hide_sticky(el);
    // need to hide the current menus unless the current item is in it
    this.hide_current(el);
    // show the new menu
    this.show(el);
    this.current = [ el ]
    this.stop_timer(); // if there's one running
  },
  start_timer: function(e) {
    this.stop_timer();
    this.timer = new PeriodicalExecuter(this.revert.bind(this), 3);
  },
  stop_timer: function(e) {
    if (this.timer) this.timer.stop();
    this.timer = null;
  },
  revert: function() {
    this.hide_current();
    this.show_sticky();
    this.stop_timer();
  },
  hide_current: function(el) {
    if (this.current.indexOf(el) != -1) return;
    this.current.each((function(el) {
      this.hide(el);
    }).bind(this));
  },
  hide: function(el) {
    $(el).removeClassName("over");
    $(el).addClassName("off");
    if ($(el).up("li")) {
      this.hide($(el).up("li"));
    }
  },
  show: function(el) {
    $(el).removeClassName("off");
    $(el).addClassName("over");
    if ($(el).up("li")) {
      this.show($(el).up("li"));
    }
  },
  show_sticky: function() {
    this.sticky.each((function(el) {
      $(el).removeClassName("off");
      $(el).addClassName("over");
    }).bind(this));
  },
  hide_sticky: function(el) {
    if (this.sticky.indexOf(el) != -1) return;
    this.sticky.each((function(el) {
      $(el).removeClassName("current");
      $(el).addClassName("off");
    }).bind(this));
  }
});