﻿function setupPopupDisplay(triggerControlId, popupControlId, timeout)
{
    var triggerControl = document.getElementById(triggerControlId);
    var popupControl = document.getElementById(popupControlId);
    
    triggerControl.onmouseover = function(){move_box(triggerControl, popupControl); setControlDelayed(popupControl, timeout, true)};
    triggerControl.onmouseout = function(){setControlDelayed(popupControl, timeout, false)};
    
    popupControl.onmouseover = function(){setControlDelayed(popupControl, 0, true)};
    popupControl.onmouseout = function(){setControlDelayed(popupControl, 50, false)};
    
    popupControl.style.position = "absolute";
}

function move_box(triggerControl, popupControl)  
{  
    var cleft = 0;  
    var ctop = 0;  

    var triggerPosition = getPosition(triggerControl);
    cleft += triggerPosition.x + triggerControl.offsetWidth + 3;
    ctop = triggerPosition.y;
  
    popupControl.style.left = cleft + 'px';  
    popupControl.style.top = ctop + 'px';  
} 

function setControlDelayed(popupControl, timeout, display)
{
    if(popupControl)
    {
        var timeoutToSet = display ? "displayTimeout" : "hideTimeout";
        var timeoutToClear = display ? "hideTimeout" : "displayTimeout";
        var functionCall = function(){displayControl(popupControl, display ? "block" : "none")};
        
        var timeoutHandle = popupControl.getAttribute(timeoutToClear);
        clearTimeout(timeoutHandle);            
        
        timeoutHandle = setTimeout(functionCall, timeout);
        popupControl.setAttribute(timeoutToSet, timeoutHandle);                  
    }
}

function displayControl(control, display)
{
    if(control)
    {
        control.style.display = display;
    }
}

