function positionOverlay(overlay, width, height)
{
    // In IE, must take into account border width.
    var offsetWidth = 0, offsetHeight = 0;
    var anchor = document.getElementById("imageOverlayAnchor");
    if (navigator.userAgent.toLowerCase().indexOf("msie ") > 0) {
        offsetWidth = 8; // border width.
    }
    width += offsetWidth;
    height += offsetHeight;
    overlay.style.width = width + "px";
    overlay.style.height = height + "px";
    if (anchor) {
        var obj = anchor, left = 0, top = 0;
        if (obj.offsetParent) {
            do {
                left += obj.offsetLeft;
                top += obj.offsetTop;
            } while ( obj = obj.offsetParent);  // this is an assignment, not ==
        }
        overlay.style.top = top;
        overlay.style.left = left;
    } else {
        // Display centered in the scroll area.
        var windowWidth,
            windowHeight;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            windowWidth = window.innerWidth;
            windowHeight = window.innerHeight;
        } else if( document.documentElement &&
            ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }
        var scrOfX = 0, scrOfY = 0;
        if( typeof( window.pageYOffset ) == 'number' ) {
            //Netscape compliant
            scrOfY = window.pageYOffset;
            scrOfX = window.pageXOffset;
        } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
            //DOM compliant
            scrOfY = document.body.scrollTop;
            scrOfX = document.body.scrollLeft;
        } else if( document.documentElement &&
            ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
            //IE6 standards compliant mode
            scrOfY = document.documentElement.scrollTop;
            scrOfX = document.documentElement.scrollLeft;
        }
        overlay.style.top = Math.round(windowHeight / 2 - height / 2 + scrOfY) + "px";
        overlay.style.left = Math.round(windowWidth / 2 - width / 2 + scrOfX) + "px";
    }
}

function imageOverlayRefresh()
{
    var overlay = this.overlay, imageLoading = this.imageLoadingImage;
    this.style.display = "block";
    imageLoading.style.display = "none";
    var width = this.width;
    var height = this.height;
    positionOverlay(overlay, width, height + this.closeHeight);
}

function imageOverlayDisplay(URL)
{
    var overlay = document.getElementById("imageOverlay"),
        image = document.getElementById("imageOverlayImage"),
        close = document.getElementById("imageOverlayClose"),
        imageLoading = document.getElementById("imageOverlayLoadingImage"),
        change = true;
    if (!overlay) {
        // Create overlay elements.
        overlay = document.createElement("div");
        close = document.createElement("div");
        image = document.createElement("img");
        imageLoading = document.createElement("img");
        var closeIcon = document.createElement("img");

        overlay.className = "imageOverlay";
        overlay.id = "imageOverlay";
        overlay.onclick = imageOverlayClose;

        close.className = "imageOverlayClose";
        close.id = "imageOverlayClose";

        image.id = "imageOverlayImage";

        imageLoading.id = "imageOverlayLoadingImage";
        imageLoading.src = "images/loading.gif";
        imageLoading.alt = "Loading";
        imageLoading.title = "Loading";

        closeIcon.src = "images/close_icon.gif";
        closeIcon.alt = "Close";
        closeIcon.title = "Close";

        close.innerHTML = " ";
        close.insertBefore(closeIcon, close.firstChild);

        overlay.appendChild(close);
        overlay.appendChild(image);
        overlay.appendChild(imageLoading);

        document.body.appendChild(overlay);
    } else {
        change = image.src != URL;
    }
    overlay.style.display = "block";    // must be displayed to get close.clientHeight
    if (!image.overlay) {
        image.overlay = overlay;
        image.imageLoadingImage = imageLoading;
        image.closeButton = close;
        image.onload = imageOverlayRefresh;
        // MSIE fix.
        if (close.clientHeight == 0) {
            close.style.display ="inline-block";
        }
        image.closeHeight = close.clientHeight;
        close.style.display = "block";
    }
    var width, height;
    if (image.width == 0 || change) {
        image.style.display = "none";
        imageLoading.style.display = "block";
        width = imageLoading.width;
        height = imageLoading.height;
    } else {
        image.style.display = "block";
        imageLoading.style.display = "none";
        width = image.width;
        height = image.height;
    }
    positionOverlay(overlay, width, height + image.closeHeight);
    image.src = URL;
    return false;
}

function imageOverlayClose()
{
   document.getElementById("imageOverlay").style.display = "none";
}

var imageOverlayLoadingImage = new Image();
imageOverlayLoadingImage.src = "images/loading.gif";
 <!-- 
 -->