// Distance of the arrow to the menu
arrowXoffset = -15;
// Distance of the arrow to the sub menu
arrowSubmenuXoffset = -19;
// Initialise this one as a global variable
arrowSnapBackPos = 0;
// Amount to subtract from the height of the arrow, so it aligns vertically in the middle
arrowHalfHeight = 2;
// Time it takes to slide to a new item
slideDuration = 0.35;
// Milliseconds it takes for the menu to respond (to avoid jittery behaviour)
timeoutDuration = 100;

// INIT
arrowTimeout = setTimeout(function(){ return false; }, 1);

function initMenu()
{

    // MAIN NAV

    nav = document.getElementById('apt_nav');
    
    nav.onmouseover = function(e){ activateMenu(this) };
    nav.onmouseout = function(e){ disActivateMenu(this) };
    
    for(var i=0; i<nav.childNodes.length; i++){
    
        if(nav.childNodes[i].nodeName == 'LI'){

            // See if this one is active
            attr = nav.childNodes[i].attributes.getNamedItem('class');
            if(attr != null && attr.value == 'active_main'){
                activate_main = true;
            } else {
                activate_main = false;
            }
            
            for(var k=0; k<nav.childNodes[i].childNodes.length; k++){
            
                if(nav.childNodes[i].childNodes[k].nodeName == 'A'){
                
                    if(activate_main == true){
                        // Select this one
                        initArrow(nav.childNodes[i].childNodes[k]);
                    }
                
                    // Attach arrow moving
                    my_node = nav.childNodes[i].childNodes[k];
                    my_node.onmouseover = function(e){ arrowAlign(this) };
                    
                } else if(nav.childNodes[i].childNodes[k].nodeName == 'UL'){
                                
                    // Select the parent for starters
                    //initArrow(nav.childNodes[i].childNodes[k-2]);
                    
                    // Go one level deeper
                    for(var j=0; j<nav.childNodes[i].childNodes[k].childNodes.length; j++){

                        if(nav.childNodes[i].childNodes[k].childNodes[j].nodeName == 'LI'){
                        
                            // See if this one is active
                            attr = nav.childNodes[i].childNodes[k].childNodes[j].attributes.getNamedItem('class');
                            
                            if(attr != null && attr.value == 'active'){
                                activate = true;
                            } else {
                                activate = false;
                            }
                        
                            for(var m=0; m<nav.childNodes[i].childNodes[k].childNodes[j].childNodes.length; m++){
                                
                                if(nav.childNodes[i].childNodes[k].childNodes[j].childNodes[m].nodeName == 'A'){
                                    
                                    if(activate == true){
                                        // Select this one
                                        initArrow(nav.childNodes[i].childNodes[k].childNodes[j].childNodes[m]);
                                    }
                                    
                                    // Attach arrow moving
                                    my_node = nav.childNodes[i].childNodes[k].childNodes[j].childNodes[m];
                                    my_node.onmouseover = function(e){ arrowAlign(this) };
                                    
                                }
                            
                            }
                        
                        }
                    
                    }
                
                }
            
            }
        
        }
    
    }
    
    
    // LITTLE NAV AT BOTTOM
    
    nav = document.getElementById('util');
    
    nav.onmouseout = function(e){ disActivateMenu(this) };
    
    for(var i=0; i<nav.childNodes.length; i++){
    
        if(nav.childNodes[i].nodeName == 'LI'){
            
            // See if this one is active
            attr = nav.childNodes[i].attributes.getNamedItem('class');
            if(attr != null && attr.value == 'active_main'){
                activate_main = true;
            } else {
                activate_main = false;
            }
            
            for(var k=0; k<nav.childNodes[i].childNodes.length; k++){
            
                if(nav.childNodes[i].childNodes[k].nodeName == 'A'){
                
                    if(activate_main == true){
                        // Select this one
                        initArrow(nav.childNodes[i].childNodes[k]);
                    }
                
                    // Attach arrow moving
                    my_node = nav.childNodes[i].childNodes[k];
                    my_node.onmouseover = function(e){ arrowAlign(this) };
                    
                }
                
            }
            
        }
    
    }

}

function initArrow(node)
{

    // Get position and height of menu element
    nodeX = findPosX(node);
    nodeY = findPosY(node);
    nodeH = node.offsetHeight;
    
    arrow = document.getElementById('nav_arrow');

    // get parent's class
    parent_class = node.parentNode.attributes.getNamedItem('class').value;

    // determine wether this is a main or sub menu item
    if(parent_class == 'active_main'){
        posX = nodeX + arrowXoffset;
    } else {
        posX = nodeX + arrowSubmenuXoffset;
    }

    // position
    arrowSnapBackPos = (nodeY + Math.floor(nodeH/2) - arrowHalfHeight);
    arrow.style.display = 'block';
    arrow.style.top =  arrowSnapBackPos + 'px';
    arrow.style.left = posX + 'px';
        
}

function arrowAlign(node)
{

    // Clear any others
    clearTimeout(arrowTimeout);
    
    // Start delay
    arrowTimeout = setTimeout(function(){actualArrowAlign(node);},timeoutDuration);

}

function actualArrowAlign(node)
{

    // Get node position and height
    nodeX = findPosX(node);
    nodeY = findPosY(node);
    nodeH = node.offsetHeight
    nodeTarget = (nodeY + Math.floor(nodeH/2) - arrowHalfHeight);
    
    // Get the arrow position
    arrow = document.getElementById('nav_arrow');
    arrowY = findPosY(arrow);
    arrowX = findPosX(arrow);
    
    // By how much do we need to shift the arrow's Y?
    shiftAmount = nodeTarget - arrowY;
    
    // Slide it!
    effect = new Effect.Move(arrow,{x:arrowX,y:nodeTarget,mode:'absolute',duration:slideDuration});

}

function activateMenu(node)
{

}

function disActivateMenu(node)
{
    
    // Clear any others
    clearTimeout(arrowTimeout);
    
    // Start delay
    arrowTimeout = setTimeout(function(){actualDisactivateMenu(node);},timeoutDuration);
        
}

function actualDisactivateMenu(node)
{

    // Get the arrow position
    arrow = document.getElementById('nav_arrow');
    arrowY = findPosY(arrow);
    arrowX = findPosX(arrow);
    
    // By how much do we need to shift the arrow's Y?
    shiftAmount = arrowSnapBackPos - arrowY;
    
    // Slide it!
    effect = new Effect.Move(arrow,{x: arrowX, y: arrowSnapBackPos, mode: 'absolute',duration:slideDuration});

}

/* ONLOAD INIT */
window.onload = initMenu;

/* --------------------
   Helper functions
---------------------*/
function findPosX(obj)
{
    var curleft = 0;
    if(obj.offsetParent)
        while(1){
            curleft += obj.offsetLeft;
            if(!obj.offsetParent)
                break;
            obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
}

function findPosY(obj)
{
    var curtop = 0;
    if(obj.offsetParent)
        while(1){
            curtop += obj.offsetTop;
            if(!obj.offsetParent)
                    break;
            obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
}