Element.addMethods('ul', {
  slidingDoorHover: function(el, hoverClass) {
    var slidingDoor = new SlidingDoorHover(el, hoverClass)
  }
});

var SlidingDoorHover = Class.create({
  initialize: function(el, hoverClass) {
    this.hoverClass = hoverClass;
    $(el).observe('mouseover', this.highlightTab.bind(this)).observe('mouseout', this.unlightTab.bind(this)).childElements().invoke('setStyle', {cursor: 'pointer'});
  },
  
  highlightTab: function(event) {
    var target = $(event.target);
    if (!(target.match('a') || target.match('li'))) return;
    target = target.match('a') ? target.up('li') : target;
    target.addClassName(this.hoverClass).down('a').addClassName(this.hoverClass);
  },

  unlightTab: function(event) {
    var target = $(event.target);
    var relatedTarget = $(event.relatedTarget);
    if (!(target.match('li') || target.match('a'))) return;
    if (target.match('li')) {
      if (target.down('a') == relatedTarget) return;
    }
    target = target.match('li') ? target : target.up('li');
    target.removeClassName(this.hoverClass).down('a').removeClassName(this.hoverClass);
  }
});