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, left : this.dims.topMenuX1});
		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);
		}
  	}
	};