function ShowImage(tar, img)
{
    var sItarget = document.getElementById(tar);
    if (sItarget.style.visibility == "visible")
    {
        // "unload"
        HideImage(tar);
        
        // stop here, if image currently is shown (means hiding image if it was already open)
        if ((sItarget.style.backgroundImage == "url(" + img + ")") || (sItarget.style.backgroundImage == "url(\"" + img + "\")"))
            return;
    }
    
    sItarget.style.backgroundImage = "url(" + img + ")";
    var sIimage = new Image();
    sIimage.src = img;
    
    this.Loading = function()
    {
        // wait until image is loaded
        if (sIimage.width == 0 || sIimage.height == 0)
            setTimeout("Loading()", 50);
        else
            ShowInSize();
    }
    
    var ShowInSize = function()
    {
        var viewportCenter = getViewportCenter();
        
        // get left and top values to center the target
        var l = Math.round(viewportCenter.x - sIimage.width / 2);
        var t = Math.round(viewportCenter.y - sIimage.height / 2);
        
        // set target position and dimensions    
        sItarget.style.left = l + "px";
        sItarget.style.top = t + "px";
        sItarget.style.width = sIimage.width + "px";
        sItarget.style.height = sIimage.height + "px";
        
        sItarget.style.visibility = "visible";
    }  

    setTimeout("Loading()", 50);
}
 
function HideImage(tar) {
    var sItarget = document.getElementById(tar);
    sItarget.style.visibility = "hidden";
    sItarget.style.left = 0;
    sItarget.style.top = 0;
    sItarget.style.width = 0;
    sItarget.style.height = 0;
}


function getViewportCenter()
{
    var viewportSize = getViewportSize();
    var viewportScrolling = getViewportScrolling();
    var result = new Position(0,0);
    result.x = viewportScrolling.x + viewportSize.x / 2;
    result.y = viewportScrolling.y + viewportSize.y / 2;
    return result;
}

function getViewportSize()
{
    var result = new Position(0,0);
    if( typeof( window.innerWidth ) == 'number' )
    {  
        //Non-IE  
        result.x = window.innerWidth;  
        result.y = window.innerHeight;  
    }
    else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
    {  
        //IE 6+ in 'standards compliant mode'  
        result.x = document.documentElement.clientWidth;  
        result.y = document.documentElement.clientHeight;  
    }
    else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
    {  
        //IE 4 compatible  
        result.x = document.body.clientWidth;  
        result.y = document.body.clientHeight;  
    }
    return result;
}

function getViewportScrolling()
{
    var result = new Position(0,0);
    if( typeof( window.pageYOffset ) == 'number' )
    {  
        //Netscape compliant  
        result.x = window.pageXOffset;  
        result.y = window.pageYOffset;  
    }
    else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) )
    {  
        //DOM compliant  
        result.x = document.body.scrollLeft;  
        result.y = document.body.scrollTop;  
    }
    else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) )
    {  
        //IE6 standards compliant mode  
        result.x = document.documentElement.scrollLeft;  
        result.y = document.documentElement.scrollTop;  
    }  
    return result;
}

function Position (x, y) {
  this.x = x;
  this.y = y;
}