var PopupNavigation = Class.create({
  initialize: function(element, containerClass) {
    this.element = element;
    this.containerClass = containerClass;

    this.element.observe("mouseover", this.mouseover.bindAsEventListener(this));
    this.element.observe("mouseout", this.mouseout.bindAsEventListener(this));
    
    var popup = this.element.down(".navItemContent");
    if (popup)
    {
      popup.observe("mouseout", this.mouseout.bindAsEventListener(this));
    }
  },
  
  mouseover: function(event) {
    var element = event.element().next(".navItemContent");
    if (element)
    {
      element.show();
    }
    event.stop();
  },
  
  mouseout: function(event) {
    var container = this.element;
    var element = container.down(".navItemContent");

    /* event.relatedTarget for mouseout tells us what element the mouse is
     * moving into.  If that element is a descendant of the container,
     * the mouse is moving around inside the pop-up and we don't want to
     * hide it just yet. */
    if (element && !hasChild(container, event.relatedTarget))
    {
      element.hide();
    }
    event.stop();
  }
});

// For debugging
function tag_id(element)
{
  return element.tagName + "#" + element.id;
}

function hasChild(container, element)
{
  while (element)
  {
    if (element == container)
    {
      return true;
    }
    
    element = element.parentNode;
  }
  
  return false;
}

document.observe('dom:loaded', function() {
  $$(".navItem").each(function(el) { new PopupNavigation(el, "navItem"); });
});