window.onload = setupMenus;

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

      // now lets go through and create a DropDownMenu
      // 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 DropDownMenu(menus[i], dropDowns[i]);
      }
    }

    // DropDownMenu 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 DropDownMenu = Class.create();

    DropDownMenu.prototype = {

      show : function(e) {
        var topMenuDimensions = Element.getDimensions(this.topMenu);
        var topMenuPosition = Position.cumulativeOffset(this.topMenu);

        this.dims = new Object();
        this.dims.topMenuX1 = topMenuPosition[0];
        this.dims.topMenuY1 = topMenuPosition[1];
        this.dims.topMenuX2 = topMenuPosition[0] + topMenuDimensions.width;
        this.dims.topMenuY2 = topMenuPosition[1] + topMenuDimensions.height;

        var dropDownMenuDimensions = Element.getDimensions(this.dropDownMenu);
        this.dims.dropDownMenuX1 = this.dims.topMenuX1;
        this.dims.dropDownMenuY1 = this.dims.topMenuY2;
        this.dims.dropDownMenuX2 = this.dims.topMenuX1 + dropDownMenuDimensions.width;
        this.dims.dropDownMenuY2 = this.dims.topMenuY2 + dropDownMenuDimensions.height;

        Element.setStyle(this.dropDownMenu, { top  : this.dims.topMenuY2+"px", left : this.dims.topMenuX1+"px"});
        Element.show(this.dropDownMenu);
        Event.observe(document, 'mousemove', this.mouseMoveCall.bindAsEventListener(this), true);
      },

      // we will set the location of the dropDownMenu based on the
      // the position and size of the topMenu

      initialize : function(topMenu, dropDownMenu) {
        this.topMenu = topMenu;
        this.dropDownMenu = dropDownMenu;

        Event.observe(topMenu, 'mouseover', this.show.bindAsEventListener(this), true);
      },

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

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

        var outsideTopMenu = x < this.dims.topMenuX1 || x > this.dims.topMenuX2 || y < this.dims.topMenuY1 || y > this.dims.topMenuY2;
        var outsideDropDownMenu = x < this.dims.dropDownMenuX1 || x > this.dims.dropDownMenuX2 || y < this.dims.dropDownMenuY1 || y > this.dims.dropDownMenuY2;

        if ( outsideTopMenu && outsideDropDownMenu ) {
          Event.stopObserving(document, 'mousemove', this.mouseMoveCall.bindAsEventListener(this), true);
          Element.hide(this.dropDownMenu);
        }
      }
    };