(function(global) {
        var mainNav, mainNavOffset, mainNavDimensions;
        
        /* Drop Down Menu */
        Menu = Class.create({
          initialize: function(container) {
            this.container = container;
            this.container.select('li').each((function(li) {
              li.observe('mouseover', this.over.bind(li));
            }).bind(this));
            $(global.document.body).observe('mousemove', this.handleBodyMouseMove.bind(this));
          },
          over: function(e) {
            e.stop();
                        
            var target = e.element(), list = target.up('ul'),
              subList = target.next('ul'),  offset, dimensions, x1, x2,
              siblings = this.previousSiblings().concat(this.nextSiblings());
            
            // reset any sibling li's hover state
            siblings.length && siblings.invoke('removeClassName', 'hover');    
            // make sure to reset any descendant hovered li's 
            this.select('li.hover').invoke('removeClassName', 'hover');            
            // finally, add the hover class to this item        
            this.addClassName('hover');
            
            offset = subList && subList.cumulativeOffset();
            dimensions = subList && subList.getDimensions();            
            
            // if there isn't a sublist or the sublist isn't visible, return
            if (!offset || offset.top === 0 && offset.left === 0) {
              return true;
            }
            
            x2 = offset.left + dimensions.width;
            
            if (list !== mainNav) {
              subList.setStyle({
                'top': (target.positionedOffset().top || 0) + 'px'
              });              
            }

            // does this menu fly out past the main nav container
            if (x2 > (mainNavOffset.left + mainNavDimensions.width)) {
              // if the sublist is part of the main nav, then we simply need to
              // align it right.  this should only happen on the last element
              if (list === mainNav) {
                subList.setStyle({ 'right': 0 });
              } else {
                // since this is a submenu and it's outside of the main nav 
                // container constraints, then let's position it to the left
                // of it's parent menu
                subList.setStyle({
                  'left': '-100%' 
                });
              }              
            }  
          },
          handleBodyMouseMove: function(e) {
            // if this event target is not a descendant of the main nav, then
            // reset all hover states on submenus.
            if (!e.element().descendantOf(mainNav)) {
              mainNav.select('li.hover').invoke('removeClassName','hover');
            }
          }
        });
        
        document.observe('dom:loaded', function() {
          mainNav = $('mainnav');
          mainNavOffset = mainNav.cumulativeOffset();
          mainNavDimensions = mainNav.getDimensions();

          new Menu(mainNav);
        });
      })(this);