/*************************
 * Menu-specific code for
 * rendering pulldown menus
 *************************/
 

function hideMenu(id) {
  Element.hide('menu'+id);
  Event.stopObserving(document, 'mousemove'); // risky
  Element.removeClassName('nav'+id, 'on');
}


window.onload = setupMenus;

// here we setup out menus
// we first look for elements of class 'navItem'
// and then for elements of class 'navMenu'.
// we will attach the two in the order they were found.
function setupMenus(e) {
  var menus = $$('.navItem');
  var dropDowns = $$('.navMenu');
  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]);
  }
}

// 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 = {

  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.dims.navMenuY1 = this.dims.navItemY2;
    this.dims.navMenuX2 = this.dims.navItemX1 + navMenuDimensions.width;
    this.dims.navMenuY2 = this.dims.navItemY2 + navMenuDimensions.height;

    Element.setStyle(this.navMenu, { top  : this.dims.navItemY2+'px', left : this.dims.navItemX1+'px'});
    Element.show(this.navMenu);
    var navLink = Element.firstDescendant(this.navItem);
    Element.addClassName(navLink, 'on');
    Event.observe(document, 'mousemove', this.mouseMoveCall.bindAsEventListener(this), true);
  },

  // we will set the location of the navMenu based on the
  // the position and size of the navItem

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

    Event.observe(navItem, 'mouseover', this.show.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 ) {
      Event.stopObserving(document, 'mousemove', this.mouseMoveCall.bindAsEventListener(this), true);
      var navLink = Element.firstDescendant(this.navItem);
      Element.removeClassName(navLink, 'on');
      Element.hide(this.navMenu);
    }
  }
};

/*************************
 * Function to clear help 
 * image from the login form
 *************************/
 
function clearInputBG(id)
{
  $(id).setStyle({backgroundImage: 'none'});
}