var imgDispTblName = 'imageDisplayTable';
var imgDispName = 'imageDisplay';
var imgDispTitleName = 'imageDisplayTitle';

function displayImage(url, name)
{
try {
    if(name == null || name.length <= 0)
        name = 'no title';
        
    var dispTable = document.getElementById(imgDispTblName);
    if(dispTable == null)
        dispTable = createDisplayTable();
    
    var title = document.getElementById(imgDispTitleName);
    title.innerText = name;
    
    var image = document.getElementById(imgDispName);
    var newImage = new Image();
    newImage.src = url;
    newImage.id = imgDispName;
    newImage.alt = name;
    var size = resizeImage(newImage);
    image.parentNode.replaceChild(newImage, image);
    
    dispTable.rows[0].cells[0].className = 'strongText';
    dispTable.rows[0].cells[0].style.textAlign = 'left';
    dispTable.rows[0].cells[0].innerText = name;
    dispTable.style.position = 'absolute';
    dispTable.style.left = document.body.offsetWidth / 2 - size[0] / 2;
    dispTable.style.top = document.body.scrollTop + document.body.offsetHeight / 2 - size[1] / 2;
    dispTable.style.display = '';
    document.body.scroll = 'no';
} catch (e) {
    alert(e.name + ' : ' + e.message);
}
}

function resizeImage(image)
{
    var maxWidth = Math.floor(document.body.offsetWidth * 0.8);
    var maxHeight = Math.floor(document.body.offsetHeight * 0.8);
    var size = new Array();
    size[0] = image.width <= 0 ? 320 : image.width;
    size[1] = image.height <= 0 ? 240 : image.height;
    if(size[0] > maxWidth)
    {
        size[1] = size[1] * (maxWidth / size[0]);
        size[0] = maxWidth;
    }
    if(size[1] > maxHeight)
    {
        size[0] = size[0] * (maxHeight / size[1]);
        size[1] = maxHeight;
    }
    image.style.width = size[0];
    image.style.height = size[1];
    return size;
}

function hideImageDisplay()
{
    var dispTable = document.getElementById(imgDispTblName);
    dispTable.style.display = 'none';
    document.body.scroll = 'yes';
    return false;
}

function createDisplayTable()
{
    var tbl = document.createElement('table');
    tbl.id = imgDispTblName;
    tbl.cellPadding = 2;
    tbl.cellSpacing = 0;
    tbl.style.backgroundColor = 'White';
    tbl.style.border = '2px solid #666';
    tbl.style.display = 'none';
    tbl.insertRow(0);
    var th = document.createElement('th');
    th.id = imgDispTitleName;
    tbl.rows[0].appendChild(th);
    th = document.createElement('th');
    th.style.textAlign = 'right';
    var button = createButton('imageHide', 'X', hideImageDisplay);
    th.appendChild(button);
    tbl.rows[0].appendChild(th);
    
    tbl.insertRow(1);
    tbl.rows[1].insertCell(0);
    tbl.rows[1].cells[0].colSpan = 2;
    var img = document.createElement('img');
    img.id = imgDispName;
    tbl.rows[1].cells[0].appendChild(img);
    
    document.body.appendChild(tbl);
    return tbl;
}

function createButton(id, text, func)
{
    var button = document.createElement('input');
    button.id = id;
    button.type = 'button';
    button.value = text;
    button.onclick = func;
    button.style.fontSize = '8pt';
    return button;
}