function displayImage(id) {

    // get a reference to the image
    var image = document.getElementById(id);

    if (image == null) {
        alert("Cannot locate image with id" + id);
        return;
    }

    var dimmer = document.getElementById("dimPage");
    dimmer.style.display = "";

    // create the dialog
    var dialog = document.getElementById("dialog");
    dialog.style.display = "";
    dialog.style.height = image.style.height;

    var dialogContent = document.getElementById("dialogContent");
    
    dialogContent.innerHTML = "<img height='200' width='250' src='" + image.src +"' />";

}

function hideImage() {

    var dimmer = document.getElementById("dimPage");
    dimmer.style.display = "none";

    // create the dialog
    var dialog = document.getElementById("dialog");
    dialog.style.display = "none";

}