/************************************************************************** 
 * param triggerId   - unique identification of the document element.
 * param menuId      - unique identification of menu definition.
 * param mouseMargin - integer margin around menu. When mouse is
 *                     outside this margin the menu is hid.
 * param openEvent   - string name of event on which to open menu
 *                     ('click', 'mouseover', etc).
 * param actImgName  -     name of the image to be used while the mouse is
 *                         hovering over the option or it's drop down menu.
 * param inactiveImgName - name of the image to use when the mouse exits
 *                         the drop down menu. 
 */
 function ddMenu(triggerId, menuId, mouseMargin, openEvent, activeImgName, inactiveImgName) {
    var isOpen = false;
    var trg = xGetElementById(triggerId);
    var mnu = xGetElementById(menuId);
    var actImgName = activeImgName;
    var nactImgName = inactiveImgName;
        
    if (trg && mnu) {
      xAddEventListener(trg, openEvent, onOpen, false);
    }
        
    /*********************************************************
     * Perform a defined set of actions when the mouse leaves
     * a specific element's area. 
     * 
     * param ev The event that fired by the element
     * return none
     */
     function onMouseLeave(ev) {
        var e = new xEvent(ev);
        
        if (!xHasPoint(mnu, e.pageX, e.pageY, -mouseMargin) &&
            !xHasPoint(trg, e.pageX, e.pageY, -mouseMargin)) {
            
           trg.src = nactImgName;
            
           // hide the dorp down menu
           mnu.style.visibility = 'hidden';
           xRemoveEventListener(document, 'mousemove', onMouseLeave, false);
           isOpen = false;
        }
        }
    
    /*********************************************************
     * Perform a defined set of actions when the mouse enters
     * a specific element's area. 
     * 
     * param none
     * return none
     */
     function onOpen() {
       if (!isOpen) {
          // redefine the image's background
          trg.src = actImgName;
                      
          // move to just below the image
          if (isFireFox()) {
             xMoveTo(mnu, xPageX(trg)-1, xPageY(trg)-1 + xHeight(trg));
          } else {
             xMoveTo(mnu, xPageX(trg)-1, xPageY(trg)-1 + xHeight(trg)); 
          }
            
          // show the drop down menu
          mnu.style.visibility = 'visible';
           
          // define the listener used to return the navigations items to
          // their original state
          xAddEventListener(document, 'mousemove', onMouseLeave, false);
          isOpen = true;
       }
     }
 }