var menuTimer = null;
var activeLink = null;

Event.observe(document, 'dom:loaded', function() {
  $$(".activateDrop").each(function(a) {
    var idToShow = $(a).getAttribute("rel");
    $(idToShow).observe('mouseover', function() {
      activeLink = a;
    });
    $(a).observe('mouseover', function() {
      activeLink = a;
      
      if(menuTimer)
        clearTimeout(menuTimer);
      $$(".activateDrop").each(function(other) {
        if($(other) !== $(a)) $($(other).getAttribute("rel")).fade({ duration: 0.2 });
      });
      $(idToShow).appear();
    });
    var hideMenu = function() {
      if(menuTimer)
        clearTimeout(menuTimer);
      activeLink = null;
      menuTimer = setTimeout(function() {
        if(activeLink !== a)
          $($(a).getAttribute("rel")).fade({ duration: 0.2 });
      });
    };
    $(a).observe('mouseout', hideMenu, 500);
    $(idToShow).observe('mouseout', hideMenu, 500);
  });
});