/************************************************************** 
                                                           
Find all the submenus and move them into div          
of class submenu.      
     
Keep these divs off the screen until needed  
navid is the id of the containing div for the original menu                              
                                                            
***************************************************************/

var aDiv; /* Array of submenus*/
var timeoutID;
var timeDiv;



function createSubmenus(nav) {
    /*Navid is of type Div */
     
    var navid = document.getElementById(nav)
    
    if (navid.childNodes == "undefined")      /*No Menu Structure */
    { 
        return;
    }

    var menu;   /*Should be the UL Tag */
    var menuItem;
    var i, j, k;
    var ul;
    var oDiv;

    for (i = 0; i < navid.childNodes.length; i++) {
        if (navid.childNodes[i].nodeName.toLowerCase() == "ul") {
            menu = navid.childNodes[i];
            break;
        }

    }
    
    aDiv = new Array(menu.childNodes.length);
    // aDiv[j] is "undefined" if there is no submenu

    for (j = 0; j < menu.childNodes.length; j++) {
        menuItem = menu.childNodes[j];

        if (menuItem.nodeName.toLowerCase() == "li") {
            for (k = 0; k < menuItem.childNodes.length; k++) {
                ul = menuItem.childNodes[k];
                if (ul.nodeName.toLowerCase() == "ul") {
                    oDiv = createSubmenuDiv(ul, menuItem, "menu" + j.toString());
                    aDiv[j] = oDiv;
                }
            }


        }

    }

    //Now Attach a listener to close menus when node with no submenu is moused over
    for (j = 0; j < menu.childNodes.length; j++) {
        if (typeof aDiv[j] == "undefined") {
            attachEventListener(menu.childNodes[j], "mouseover", mouseNoSubmenu, false)
        }

    }

}

/************************************************************ 
The parameters are 
oUL       The ordered List to be moved to the DIV
oParent   The Parent li item
sID       A Computed name for the new div


**************************************************************/
function createSubmenuDiv(oUl, oParent, sId) {
    var oDiv = document.createElement('div');
   
    oDiv.setAttribute('id', sId);

    oDiv.className = 'submenu';
    oDiv.style.position = "absolute";


    var pos = findPos(oParent);


    var posX = pos[0];
    var posY = pos[1];
    oDiv.style.top = posY + oParent.offsetHeight + "px";
    oDiv.style.left = posX + "px";
    oDiv.appendChild(oUl);
    document.body.appendChild(oDiv);

    attachEventListener(oParent, "mouseover", mousemenu, false);
    attachEventListener(oDiv, "mouseout", mouseSubmenuOut, false);
    attachEventListener(oDiv, "mouseover", mouseSubmenuIn, false);

    
    return oDiv;
}

/***********************************************************************
*
*  Mouse Out Event -- Mouse moves off a menu
*
***********************************************************************/
function mouseSubmenuOut(event) {
    var oDiv;
    var targetElement;
    if (typeof event.target != "undefined") {
        targetElement = event.target;
    }
    else {
        targetElement = event.srcElement;
    }

    var mouseX = event.clientX;
    var mouseY = event.clientY;

    oDiv = getSubMenufromElement(event);  //needs another function //
    if (!isMouseInBox(mouseX, mouseY, oDiv)) {

        timeDiv = null; 
        closeMenu(oDiv);
    }
    else {
        timeDiv = oDiv;
        timeoutID=  setTimeout("cancelMenu()",800);
    }


}

function cancelMenu() {

    if (timeDiv == null)
        return;

    if (timeDiv.nodeName.toLowerCase() == "div") {
        closeMenu(timeDiv);
        timeDiv = null;
    }   

}

function mouseSubmenuIn(event) {
    clearTimeout(timeoutID);
    timeDiv = null;

}


function isMouseInBox(mouseX,mouseY, oDiv) {
   
    if ((mouseX < oDiv.offsetLeft) || (mouseX > oDiv.offsetLeft + oDiv.offsetWidth)) {
        return false;
    }

    if ((mouseY < oDiv.offsetTop) || (mouseY > oDiv.offsettop + oDiv.offsetHeight)) {
        return false;
    }

    return true;





}


/***********************************************************************
*
*
* Event Listener to deal with mouse over on items that have a submenu
*
**************************************************************************/

function mousemenu(event) {
    if (typeof event == "undefined") {
        event = window.event;
    }
    
    var oDiv = getSubMenu(event);
    oDiv.style.display = "block";
    oDiv.style.visibility = "visible";

    //Close  all other submenus
    closeOtherSubMenus(oDiv);
    clearTimeout(timeoutID);
    timeDiv = null;

}

/*****************************************************
*
*  This event fires if mouse goes over a menu with
*  no submenu. It closes all submenus.
*
*******************************************************/
function mouseNoSubmenu(event) {
    closeAllSubMenus()

}

/***************************************************************

return a reference to the submenu tht caused the event to fire  
 
*****************************************************************/

function getSubMenu(event) {

    var oAnchor = getEventTarget(event);

    var oLi = oAnchor.parentNode;
    var oUL = oLi.parentNode;
    var j;
    var oDiv;



    for (j = 0; j < oUL.childNodes.length; j++) {
        if (oUL.childNodes[j] == oLi) {
            oDiv = document.getElementById("menu" + j);
            break;

        }

    }

    return oDiv;
}


function getSubMenufromElement(event) {

    var oTarget = getEventTarget(event);
    var oDiv;



    while (oTarget.nodeName.toLowerCase() != "div") {
        oTarget = oTarget.parentNode;
    }

    oDiv = oTarget;

    return oDiv;
}


/*********************************************************************************
returns the actual target of an event

*********************************************************************************/

function getEventTarget(event) {
    var targetElement = null;

    if (typeof event.target != "undefined") {
        targetElement = event.target;
    }
    else {
        targetElement = event.srcElement;
    }

    while (targetElement.nodeType == 3 && targetElement.parentNode != null) {
        targetElement = targetElement.parentNode;
    }

    return targetElement;
}

/***********************************************************
*
* Close all submenus but the one pointed out by oDiv
*
************************************************************/

function closeOtherSubMenus(oDiv) {
    var j;
    if ((typeof oDiv == "undefined") || (typeof aDiv == "undefined")) {
        return;
    }

    for (j = 0; j < aDiv.length; j++) {
        if ((typeof aDiv[j] != "undefined") && (aDiv[j] != oDiv)) {
            closeMenu(aDiv[j]);
        }
    }

}

/******************************************************************************
*
*   Close all open submenus
*
*
********************************************************************************/

function closeAllSubMenus() {

    if (typeof aDiv == "undefined") {
        return;
    }

    for (j = 0; j < aDiv.length; j++) {
        if (typeof aDiv[j] != "undefined") {
            closeMenu(aDiv[j]);
        }
    }
    clearTimeout(timeoutID);
    timeDiv = null;
}
/****************************************************************** 
 
Closes the submenu pointed at by oDiv
*******************************************************************/
function closeMenu(oDiv) {

    if (typeof oDiv == "undefined") {
        return;
    }

    oDiv.style.visibility = "hidden"
    oDiv.style.display = "none";

}

/*********************************************************************

Attach Event Listener to an Item


***********************************************************************/

function attachEventListener(target, eventType, functionRef, capture) {
     
    if (typeof target.addEventListener != 'undefined') {
        target.addEventListener(eventType, functionRef, capture);
        
    }
    else if (typeof target.attachEvent != 'undefined') {
        target.attachEvent('on' + eventType, functionRef);
    }
    else {
        eventType = 'on' + eventType;

        if (typeof target[eventType] == 'function') {
            var oldListener = target[eventType];

            target[eventType] = function() {
                oldListener();

                return functionRef();
            }
        }
        else {
            target[eventType] = functionRef;
        }
    }

    return true;
}

/*********************************************************************************************************
*
*findPos   -- find the position of an element
*********************************************************************************************************/

/* Find the Position of an element */
function findPos(oElement) {
    var positionX = 0;
    var positionY = 0;

    while (oElement != null) {
        positionX += oElement.offsetLeft;
        positionY += oElement.offsetTop;
        oElement = oElement.offsetParent;
    }

    return [positionX, positionY];
}

/******************************************************************************************

Attaches a Load Listener

*******************************************************************************************/
function addLoadListener(fn) {
    if (typeof window.addEventListener != 'undefined') {
        window.addEventListener('load', fn, false);
    }
    else if (typeof document.addEventListener != 'undefined') {
        document.addEventListener('load', fn, false);
    }
    else if (typeof window.attachEvent != 'undefined') {
        window.attachEvent('onload', fn);
    }
    else {
        var oldfn = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = fn;
        }
        else {
            window.onload = function() {
                oldfn();
                fn();
            };
        }
    }
}

addLoadListener(function() { createSubmenus('navigation'); });