var openedHelp = null;

function closeHelp(elName)
{
    var el = document.getElementById(elName);    
    if(el !=null)
    {
        el.style.display = "none";        
    }
    
    var frame = document.getElementById(elName + '_frame');
    if(frame != null)
    {
        frame.style.display = "none";
    }
}

function openHelp(elName, elImage)
{
    // close the last opened help
    closeHelp(openedHelp);
    
    // remember which help we are opening
    openedHelp = elName;
    
    // attempt to open this help
    var el = document.getElementById(elName);
    if(el !=null)
    {   
        el.style.display = "block";
    
        // set the top and stay on the page
        var newTop = Math.round(elImage.offsetTop - (el.offsetHeight / 2));      
        if( (newTop + el.offsetHeight) >= document.body.offsetHeight)
        {
            newTop = Math.round(document.body.offsetHeight - 10 - el.offsetHeight);
        }                        
        el.style.top = newTop + "px";
        
        // set the left and keep it on the page
        var newleft = (elImage.offsetLeft - el.offsetWidth - 10);
        if(newleft < 1)
        {
            newleft = 5;
        }
        el.style.left = newleft + "px";
        
        
        // create an Iframe and toss it behind
        var frame = document.getElementById(elName + '_frame');
        if(null == frame)
        {
            frame = document.createElement("iframe");
            frame.className = 'helpframe';
            frame.id = elName + '_frame';
            frame.frameBorder=0;        
            elImage.parentNode.appendChild(frame);
        }
        frame.style.width = el.offsetWidth+"px";
        frame.style.height = el.offsetHeight+"px";        
        frame.style.left = el.style.left;
        frame.style.top = el.style.top;    
        frame.style.display = "block";            
    }
}