window.onresize = setPos;

var maxX = 1500;
var maxElWidth;
var minX = 0;

try {
    clearBorder(document.getElementById('subMenuLinks'), true);
}
catch(err){
    document.getElementById('subMenu').style.display = 'none';
}

clearBorder(document.getElementById('mtm_menu'), false);

function setPos()
{
    maxX = 1500;

    var posX = getMax(document.getElementById('mtm_menu'));
    maxX = posX;

    minX = 0;
    posX = getMin(document.getElementById('mtm_menu'));
    minX = posX;
    
    if(document.getElementById('topLevel'))
    {
        setSubMenu(document.getElementById('topLevel'));
    }
}

function setSubMenu(el)
{   
    //posX is the left of the element el
    var posX = getPosition(el);

    var submenu = document.getElementById('subMenu');
    
    // gets us the left of the submenu, adding the offset of the element center minus the submenu center
    var leftSub = posX + (getCenter(el) - (submenu.clientWidth / 2));
    
    //Gets us the right of the submenu
    var farRight = leftSub + submenu.clientWidth;

    //if the right of submenu is more then the right of the top menu adjust
    if (farRight >= maxX)
    {
        posX = maxX - submenu.clientWidth;
        var submenuArrow = document.getElementById('subMenuArrow');
        submenuArrow.style.position = 'absolute';
        var AbsOffset = Math.abs(el.clientWidth - submenu.clientWidth);
        submenuArrow.style.left = submenu.clientWidth - (getOffsetCenterFromRight(el) + submenuArrow.clientWidth);
        var submenuLink = document.getElementById('subMenuLinks');
        submenuArrow.style.position = 'absolute';
        submenuLink.style.marginTop = '19px';
    }
    else if (leftSub <= minX)
    {
        posX = minX;
        //move the arrow around
        var submenuArrow = document.getElementById('subMenuArrow');
        submenuArrow.style.position = 'absolute';
        submenuArrow.style.left = getOffsetCenterFromLeft(el) - (submenuArrow.clientWidth / 2);
        var submenuLink = document.getElementById('subMenuLinks');
        submenuArrow.style.position = 'absolute';
        submenuLink.style.marginTop = '19px';
    }
    else
    {
        posX = leftSub;
    }
    
    submenu.style.left = posX;
}

function clearBorder(el, sub)
{
    clearFirstBorder(el, sub);
    clearLastBorder(el);
}

function clearFirstBorder(el, sub)
{
    el.childNodes[el.childNodes.length - 1].style.paddingRight = '0px';
    for(var i = 0; i < el.childNodes.length; i++)
    {
        if(sub)
        {
            if(el.childNodes[i].nodeName == 'SPAN')
            {
                el.childNodes[i].style.display = 'none';
                sub = false;
            }
        }
        else if(el.childNodes[i].nodeName == 'A')
        {
            el.childNodes[i].style.border = 'none';
            el.childNodes[i].style.paddingLeft = '0cm';
            return
        }
    }
}

function clearLastBorder(el)
{
    el.childNodes[el.childNodes.length - 1].style.paddingRight = '0px';
    for(var i = el.childNodes.length - 1; i >= 0; i--)
    {
        if(el.childNodes[i].nodeName == 'A')
        {
            el.childNodes[i].style.paddingRight = '0cm';
            return
        }
    }
}

function getSubMenuWidth(el)
{
    var width = 0;
    
    for(var i = 0; i < el.childNodes.length; i++)
    {
        width += el.childNodes[i].clientWidth;
    }
    
    return width;
}

function getCenter(el)
{
    var posX = (el.clientWidth / 2);
    return posX;
}

function getOffsetCenterFromLeft(el)
{
    var parent = el.parentNode;
    var width = 0;
    for(var i = 0; i < parent.childNodes.length; i++)
    {
        if (parent.childNodes[i].id == "topLevel")
        {
            width += getCenter(parent.childNodes[i]);
            return width;
        }
        else
        {
            width += parent.childNodes[i].clientWidth;
        }
    }
}

function getOffsetCenterFromRight(el)
{
    var parent = el.parentNode;
    var width = 0;
    for(var i = parent.childNodes.length - 1; i >= 0 ; i--)
    {
        if (parent.childNodes[i].id &&  parent.childNodes[i].id == "topLevel")
        {
            width += getCenter(parent.childNodes[i]);
            return width;
        }
        else
        {
            width += parent.childNodes[i].clientWidth;
        }
    }
}

function getMax(el)
{
    //get position of last link
    var posX = getPosition(el.childNodes[el.childNodes.length -1]);
    maxElWidth = el.childNodes[el.childNodes.length -1].clientWidth
    return posX + maxElWidth;
}

function getMin(el)
{
    //Get position of first link
    var posX = getPosition(el.childNodes[0]);

    return posX;
}

function getPosition(el)
{
    //var offsetHeight = el.clientHeight;
    //var offsetWidth = el.clientWidth;
    var offsetWidth = 0;
    var posX = 0;

    // add up all offsets... subtract any scroll offset
    while (el.offsetParent) {
        posX += el.offsetLeft;

        if (el.scrollLeft) posX -= el.scrollLeft;

        el = el.offsetParent;
    }
    posX = Math.max(Math.min(posX, maxX), minX);

    //y is the top of the parent link
    //offsetHeight is the height of the parent link
    //5px is the size of bottom border image
    //posX -= offsetWidth;

    return posX;
}

setPos();