Problemas con el recalculo de la posicion de un layer

[junihh]

Prepare un script que genera tres layers para mostrar mensajes: Uno para fondo transparente a modo de overlay, otro que muestra el contenido y por ultimo, una imagen que funciona como boton de cerrar.

La funcion trabajaba sin ningun problema y cada vez que la llamaba los elementos aparecian centrados en la ventana del navegador. El problema es que cada vez que se le llamaba, lo que realmente hacia era volver a generar todos los elementos del DOM.

Luego de leer este articulo sobre buenas practicas para escribir JS entendi que lo estaba haciendo mal, asi que reajuste el script y todo (o casi todo) funciono sin problemas, pero el layer del contenido y el boton de cerrar ahora no se centran en el navegador. Pueden ver un ejemplo de lo que me refiero aqui, usando los botones que encontraran arriba.

Este es todo mi codigo, a ver si podrian decirme que puede estar mal en el calculo de centrar, porque la verdad ya no se por donde mas girar la rueda:

Código HTML:

// Set all DOM objects

var msgFdo = document.createElement ('div');
msgFdo.style.backgroundColor = '#000000';
msgFdo.style.border = 'none';
msgFdo.style.padding = '0px';
msgFdo.style.position = 'fixed';
msgFdo.style.display = 'none';
msgFdo.style.zIndex = '4997';
msgFdo.id = 'lyrmsg_fdo';
msgFdo.style.width = '100%';
msgFdo.style.height = '100%';
document.body.appendChild (msgFdo);
msgFdo.style.top = '0px';
msgFdo.style.left = '0px';
transp (80,'lyrmsg_fdo');
msgFdo.style.zoom = 1;
    
var msgInf = document.createElement ('div');
msgInf.style.backgroundColor = '#FFFFFF';
msgInf.style.border = 'none';
msgInf.style.padding = '20px';
msgInf.style.position = 'fixed';
msgInf.style.display = 'none';
msgInf.style.zIndex = '4998';
msgInf.style.borderRadius = '8px';
msgInf.style.MozBorderRadius = '8px';
msgInf.style.WebkitBorderRadius = '8px';
msgInf.style.KhtmlBorderRadius = '8px';
msgInf.style.width = '500px';
msgInf.id = 'lyrmsg_inf';
document.body.appendChild (msgInf);
msgInf.style.top = '0px';
msgInf.style.left = '0px';
msgInf.style.zoom = 1;

var msgCls = document.createElement ('img');
msgCls.src = 'msg_close.gif';
msgCls.style.position = 'fixed';
msgCls.style.display = 'none';
msgCls.style.zIndex = '4999';
msgCls.onmouseover = function () { this.style.cursor = 'pointer'; this.style.cursor = 'hand'; }
msgCls.onmouseout = function () { this.style.cursor = 'default'; }
msgCls.onclick = function () { msgClose(); }
msgCls.id = 'lyrmsg_cls';
document.body.appendChild (msgCls);
msgCls.style.top = '0px';
msgCls.style.left = '0px';
msgCls.style.zoom = 1;

var msgInterCount;

// Message engine

function msgShow (msg)
{
    // Parametros usar: msgContenido, msgAncho, msgAlto, msgBotonClose, msgTimeClose
    //
    msgInf.style.width = (msg.msgAncho) ? msg.msgAncho + 'px' : 'auto';
    msgInf.style.height = 'auto';
    //
    if (msg.msgContenido) { msgInf.innerHTML = (msg.msgAlto) ? '<div style="height:' + msg.msgAlto + 'px;overflow:auto;padding-right:10px;">' + msg.msgContenido + '</div>' : msg.msgContenido; }
    //
    var posT = ((winWH('h') - msgInf.clientHeight) / 2); // Esto es el calculo para centrar, que ahora no funciona
    var posL = ((winWH('w') - msgInf.clientWidth) / 2); // Esto es el calculo para centrar, que ahora no funciona
    //
    msgInf.style.top = posT + 'px';
    msgInf.style.left = posL + 'px';
    //
    msgCls.style.top = (posT - 10) + 'px';
    msgCls.style.left = (posL - 10) + 'px';
    //
    msgFdo.style.display = 'block';
    msgInf.style.display = 'block';
    msgCls.style.display = (msg.msgBotonClose) ? 'block' : 'none';
    //
    clearInterval (msgInterCount);
    if (msg.msgTimeClose)
    {
        msgInterCount = setInterval(msgClose, msg.msgTimeClose * 1000);
    }
}

function msgClose ()
{
    clearInterval (msgInterCount);
    msgFdo.style.display = 'none';
    msgInf.style.display = 'none';
    msgCls.style.display = 'none';
}

function transp (tr,id)
{
    var obj = document.getElementById(id).style;
    //
    obj.opacity = (tr / 100);
    obj.MozOpacity = (tr / 100);
    obj.KhtmlOpacity = (tr / 100);
    obj.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + tr + ')';
    obj.filter = 'alpha(opacity=' + tr + ')';
    obj.zoom = 1; 
}

function winWH (wh)
{
    var siz = 0;
    //
    if ( typeof (window.innerWidth) == 'number' )
    {
        siz = (wh == 'w') ? window.innerWidth : window.innerHeight;
    } else if ( document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight) )
    {
        siz = (wh == 'w') ? document.documentElement.clientWidth : document.documentElement.clientHeight;
    } else if ( document.body && (document.body.clientWidth || document.body.clientHeight) )
    {
        siz = (wh == 'w') ? document.body.clientWidth : document.body.clientHeight;
    }
    //
    return siz;
}

Agradezco de antemano cualquier ayuda, link o idea que me puedan dar.