// setup menu objects and listeners after document loads
Event.observe(window, 'load', function() {setupMenus()});

// here we setup out menus
// we first look for elements of nav item class
// and then for elements of the menu class.
// we will attach the two in the order they were found.
function setupMenus(e) {
  var menus = $$('#navbar .nav');
  var dropDowns = $$('#navbar .submenu');
  if ( menus.length != dropDowns.length ) {
    //alert('there are ' + menus.length + ' menus but ' + dropDowns.length + ' drop downs');
    return;
  }

  // now lets go through and create a navMenu
  // object which will setup the positions and
  // beging listening for mouse motion over the top menu
  for ( var i = 0; i < menus.length; i++ ) {
    var menu = new navMenu(menus[i], dropDowns[i]);
  }
  
  // setup sub element mouseovers
  var subs = $$('.submenu_img');
  for ( var i = 0; i < subs.length; i++ ) {
    Event.observe(subs[i], 'mouseover', function() { Element.setStyle(this, { left  : '-250px'}); });
    Event.observe(subs[i], 'mouseout', function() { Element.setStyle(this, { left  : '0'}); });
  }
}

// navMenu is a class that takes
// two parameters, the object that you hover
// over and an object that will appear when the
// hover occurs.  there is some simple code here
// to position the second at the bottom of the first.

var navMenu = Class.create();

navMenu.prototype = {
  initialize : function(navItem, navMenu) {
    this.navItem = navItem;
    this.navMenu = navMenu;

    // set shim values from initial stylesheet values
    this.navMenuShimY = parseInt(Element.getStyle(this.navMenu, 'top')); 
    this.navMenuShimX = parseInt(Element.getStyle(this.navMenu, 'left'));

    Event.observe(navItem, 'mouseover', this.show.bindAsEventListener(this), true);
  },
  
  show : function(e) {
    var navItemDimensions = Element.getDimensions(this.navItem);
    var navItemPosition = Element.cumulativeOffset(this.navItem);

    this.dims = new Object();
    this.dims.navItemX1 = navItemPosition[0];
    this.dims.navItemY1 = navItemPosition[1];
    this.dims.navItemX2 = navItemPosition[0] + navItemDimensions.width;
    this.dims.navItemY2 = navItemPosition[1] + navItemDimensions.height;

    var navMenuDimensions = Element.getDimensions(this.navMenu);
    this.dims.navMenuX1 = this.dims.navItemX1 + this.navMenuShimX;
    this.dims.navMenuY1 = this.dims.navItemY2; // force to bottom of navItem
    this.dims.navMenuX2 = this.dims.navItemX1 + navMenuDimensions.width + this.navMenuShimX;
    this.dims.navMenuY2 = this.dims.navItemY2 + navMenuDimensions.height + this.navMenuShimY;

    // execute commands to change UI state
    //Element.setStyle(this.navMenu, { top  : (this.dims.navItemY1 + this.navMenuShimY) +'px', left : (this.dims.navItemX1 + this.navMenuShimX) +'px'});
    Element.show(this.navMenu);
    //var navLink = Element.firstDescendant(this.navItem);
    //Element.setStyle(this.navLink, { top  : '-35px'}); // shift to on state
    Event.observe(document, 'mousemove', this.mouseMoveCall.bindAsEventListener(this), true);
  },

  // when the mouse moves we need to check if we are still over 
  // the navMenu or the navItem.  if not then we should hide
  // the drop down menu.

  mouseMoveCall : function(e) {
    var x = Event.pointerX(e);
    var y = Event.pointerY(e);

    var outsidenavItem = x < this.dims.navItemX1 || x > this.dims.navItemX2 || y < this.dims.navItemY1 || y > this.dims.navItemY2;
    var outsidenavMenu = x < this.dims.navMenuX1 || x > this.dims.navMenuX2 || y < this.dims.navMenuY1 || y > this.dims.navMenuY2;

    if ( outsidenavItem && outsidenavMenu ) {
      // execute commands to change UI state
      Event.stopObserving(document, 'mousemove', this.mouseMoveCall.bindAsEventListener(this), true);
      //var navLink = Element.firstDescendant(this.navItem);
      //Element.setStyle(this.navLink, { top  : '0'}); // shift back to off state
      Element.hide(this.navMenu);
    }
  }
};