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 {
        overlay.style.top = Math.round(document.body.clientHeight / 2 - height / 2) + "px";
        overlay.style.left = Math.round(document.body.clientWidth / 2 - width / 2) + "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.closeButton.clientHeight);
}

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;
    }
    if (!image.overlay) {
        image.overlay = overlay;
        image.imageLoadingImage = imageLoading;
        image.closeButton = close;
        image.onload = imageOverlayRefresh;
    }
    overlay.style.display = "block";    // must be displayed to get close.clientHeight
    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 + close.clientHeight);
    image.src = URL;
}

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

var imageOverlayLoadingImage = new Image();
imageOverlayLoadingImage.src = "images/loading.gif";