var setup_complex_hover = function(l) {
  /* Make sure logo is in on the zIndex game */
  l.setStyle({zIndex: 100});
  l.makePositioned();

  /* Place an element behind it */
  var f = new Element('div');
  f.id = 'logo-background';
  f.setStyle({zIndex: 99});
  f.setStyle({backgroundColor: 'black'});
  l.up().appendChild(f);
  f.absolutize();
  f.clonePosition(l);
  f.hide();

  l.observe('mouseenter', function() { new Effect.Appear(f, {duration: 0.3, fps: 24, queue: 'end'}); });
  l.observe('mouseleave', function() { new Effect.Fade(f, {duration: 0.3, fps: 24, queue: 'end'}); });
};

var setup_simple_hover = function(l) {
  var saved_bg = l.getStyle('backgroundColor');
  l.observe('mouseover', function() { l.setStyle({backgroundColor: '#333' })});
  l.observe('mouseout', function() { l.setStyle({backgroundColor: saved_bg })});
};

var ShowSub = function(mitem, menu) {
  return;
  var menu = $(menu);
  var mitem = $(mitem);
  menu.absolutize();
  menu.clonePosition(mitem, {setLeft: false, setTop: true, setWidth: false, setHeight: false});
  menu.setStyle({left: 230 + 80 + 'px', border: '1px solid red', backgroundColor: 'black', zIndex: 2500 });
  menu.toggle();
};

Event.observe(document, 'dom:loaded', function() {
  setup_complex_hover($('logo'));

  // Hide all submenus
  $$('.submenu').each(function(e) {
     e.hide();
  });

  /* Persistent color change for menu links */
  $$('#nav-bar ul a').each(function(e) {
    setup_simple_hover(e);
    e.observe('click', function(ev) {
      e.addClassName('hover');
      setTimeout(function() {
        e.removeClassName('hover');
      }, 1000);
    });
  });
});