function initPopup(popupDiv, popupTitle) {
        // --- Initialize DOM drag ---
        // get the root (element) that will move when the handle is dragged
        var oRoot = document.getElementById(popupDiv);
        // get the handle (element) which will make the entire root move when dragged
        var oHandle = document.getElementById(popupTitle);

        // make sure both the root and the handle (popup_div and popup_handle) could be found
        if(oRoot && oHandle) {
            // specifies the handle (only area that permits drag for the root) and the root of the drag
            Drag.init(oHandle, oRoot);
            
            // NOTE : to drag an entire container without specifying a handle :
            // Drag.init(myPopupDiv);
            // NOTE : the element must have a relative or absolute position set in its style attributes
        }
    }
    
    function showPopup(popupId) {
        var popup = $(popupId);
        
        // make sure the given popup exists
        if(popup) {
            popup.style.display = '';
            centerPopup(popupId);
            
            if(popup.style.display == '')
            {
                if(typeof(hideSelectBox) == "function")
                {
                    hideSelectBox();    
                }
            }
        }
    }
    
    function closePopup(popupId) {
        var popup = $(popupId);
        
        // make sure the given popup exists
        if(popup) {
            popup.style.display = 'none';
            
            if(typeof(onPopupClosed) == "function") {
                onPopupClosed(popupId);
            }
        }
    }
    
    function centerPopup(popupId) {
        if(oPopup = document.getElementById(popupId))
        {
            popupWidth = oPopup.clientWidth;
            popupHeight = oPopup.clientHeight;
            
            if(document.all)
            {
                parentWidth = 0;
                parentHeight = 0;
                
                pTop = 0;
                if(document.documentElement) {
                    parentWidth = document.documentElement.clientWidth;
                    parentHeight = document.documentElement.clientHeight;
                    pTop = document.documentElement.scrollTop;
                }
                else if(document.body) {
                    parentWidth = document.body.clientWidth;
                    parentHeight = document.body.clientHeight;
                    pTop = document.body.scrollTop;
                }
                
                pLeft = document.documentElement.scrollLeft;
            }
            else
            {
                parentWidth = window.innerWidth;
                parentHeight = window.innerHeight;
                
                pTop = window.pageYOffset;
                pLeft = window.pageXOffset;
            }
            
            if(oPage = document.getElementById('laPage'))
            {
                parentWidth = oPage.offsetWidth;
            }
            
            if(parentWidth > 0)
            {
                var myLeft = (pLeft/2)+(parentWidth-popupWidth)/2;
                if(myLeft < 0)
                {
                    myLeft = 0;    
                }
                oPopup.style.left = myLeft+"px";
            }
            if(parentHeight > 0)
            {
                // NOTE : commenté par Michael Martel le 8 juillet 2011 : popup est centré, mais pas quand la page est scrollée
                // var myTop = (pTop/2)+(parentHeight-popupHeight)/2;
                var myTop = ((parentHeight - popupHeight) / 2) + pTop; // ((partie visible de la page - hauteur popup) / 2) + partie invisible (scrollée)
                if(myTop < 0)
                {
                    myTop = 0;    
                }
                oPopup.style.top = myTop+"px";
            }
        }
    }
    
    function makePopupFrame(popupName, titleString, commandAction, commandString, popupWidth, zIndex) {
        var oDiv = createNamedElement("div", popupName+"_div");
        oDiv.id = popupName+"_div";
        oDiv.className = "popup_div";
        oDiv.style.position = "absolute";
        oDiv.style.display = "none";
        oDiv.style.zIndex = zIndex;
        
        var closeString = Localization.getTranslation("form.command.close");
        
        var contentStyle = '';
        if(popupWidth > 0) {
            contentStyle += ' width: ' + popupWidth + 'px;';
        }
        
        var sHTML = '';
        sHTML += '<table class="popup_table">';
            sHTML += '<tbody>';
                sHTML += '<tr>';
                    sHTML += '<td class="popup_topleft"></td>';
                    sHTML += '<td class="popup_border"></td>';
                    sHTML += '<td class="popup_topright"></td>';
                sHTML += '</tr>';
                sHTML += '<tr>';
                    sHTML += '<td class="popup_border"></td>';
                    sHTML += '<td id="'+popupName+'_title" name="'+popupName+'_title" class="popup_title">';
                        sHTML += '<table width="100%">';
                            sHTML += '<tbody>';
                                sHTML += '<tr>';
                                    sHTML += '<td id="'+popupName+'_titleString">'+titleString+'</td>';
                                    sHTML += '<td align="right">';
                                        sHTML += '<input type="button" class="inputbutton" onclick="javascript: closePopup(\''+popupName+'_div\');" value="X" />';
                                    sHTML += '</td>';
                                sHTML += '</tr>';
                            sHTML += '</tbody>';
                        sHTML += '</table>';
                    sHTML += '</td>';
                    sHTML += '<td class="popup_border"></td>';
                sHTML += '</tr>';
                sHTML += '<tr>';
                    sHTML += '<td class="popup_border"></td>';
                    sHTML += '<td id="'+popupName+'_content" name="'+popupName+'_content" class="popup_content" style="'+contentStyle+'"></td>'; // content here!
                    sHTML += '<td class="popup_border"></td>';
                sHTML += '</tr>';
                sHTML += '<tr>';
                    sHTML += '<td class="popup_border"></td>';
                    sHTML += '<td id="'+popupName+'_command" name="'+popupName+'_command" class="popup_command">';
                        sHTML += '<div id="'+popupName+'_moreCommand" style="display: none;">&#160;</div>';
                        sHTML += '<div style="padding: 10px;">';
                            if(commandAction && commandString) {
                                sHTML += '<input type="button" class="inputbutton" id="'+popupName+'_commandButton" onclick="javascript: '+commandAction+'" value="'+commandString+'" />';
                            }
                            sHTML += '<input type="button" class="inputbutton" id="'+popupName+'_closeButton" onclick="javascript: closePopup(\''+popupName+'_div\');" value="'+closeString+'" />';
                        sHTML += '</div>';
                    sHTML += '</td>';
                    sHTML += '<td class="popup_border"></td>';
                sHTML += '</tr>';
                sHTML += '<tr>';
                    sHTML += '<td class="popup_bottomleft"></td>';
                    sHTML += '<td class="popup_border"></td>';
                    sHTML += '<td class="popup_bottomright"></td>';
                sHTML += '</tr>';
            sHTML += '</tbody>';
        sHTML += '</table>';
        
        oDiv.innerHTML = sHTML;
        return oDiv;
    }