function GetProportionalSize(width, height, size, find)
{
    if (find == 'width') {
        return Math.floor((size * width) / height);
    } else {
        return Math.floor((size * height) / width);
    }
}

function ById(id)
{
    return document.getElementById(id);
}

function ImageLayer(sCloseText)
{
    // can be configured
    this.sCloseLabel = '<a class="blackbox" href="javascript:oImageLayer.Close()">' + sCloseText + '</a>';
    this.sElementId = 'ImageLayer_DIV';
    this.sImageId = 'ImageLayer_IMG';
    this.iMargin = 5;
    this.bIsOpen = false;
}

ImageLayer.prototype.Open = function(sSrc, sDesc) {
    // initialization
    this.bIsOpen = true;
    this.sSrc = sSrc;
    this.sDesc = sDesc;
    this.InitLayer();
}

ImageLayer.prototype.InitLayer = function() {
    this.sHTML = '<div id="blackbox-exit" onkeydown="oImageLayer.HanleKey(event)">' + this.sCloseLabel + '</div>';
    this.sHTML += '<div id="blackbox"></div><div class="box_content">';
    this.sHTML += '<a href="javascript:oImageLayer.Close();"><img style="display: none;" id="' + this.sImageId + '" /></a>';
    this.sHTML += '<div class="box_content_desc" id="ImageLayer_DivDesc" style="display: none;">' + this.sDesc + '</div></div>';
    
    sElement = document.createElement('div');
    sElement.id = this.sElementId;
    sElement.innerHTML = this.sHTML;
    this.sElement = sElement;
    document.body.appendChild(this.sElement);
    this.PreloadImage();
}

ImageLayer.prototype.PreloadImage = function() {
    this.oImg = new Image();
    var thisObj = this;
    this.oImg.src = this.sSrc;
    this.Display();
}

ImageLayer.prototype.Display = function() {
    if (this.oImg.complete) {
        var eImg = ById(this.sImageId);
        eImg.src = this.oImg.src;
        this.SetCoordinates();
        eImg.style.display = 'inline';
    } else {
        window.setTimeout('oImageLayer.Display()', 250);
    }
}

ImageLayer.prototype.SetCoordinates = function() {
    var eImage = ById(this.sImageId);
    var winWidth = document.documentElement.clientWidth;
    var winHeight = document.documentElement.clientHeight;
    if (typeof(window.innerWidth) == 'number') {
        // resolves opera problem :)
        winWidth = window.innerWidth;
        winHeight = window.innerHeight;
    }
    var marginH = 50;
    var marginV = 150;
    
    var innerWidth = winWidth - marginH;
    var innerHeight = winHeight - marginV;
    
    var scaledImgWidth = this.oImg.width;
    var scaledImgHeight = this.oImg.height;
    
    if ((scaledImgWidth > innerWidth) || (scaledImgHeight > innerHeight)) {
        var ratioCanvas = innerWidth / innerHeight;
        var ratioImage = scaledImgWidth / scaledImgHeight;
        if (ratioImage > ratioCanvas) {
            // when image is wider than screen - adjust height to width
            scaledImgWidth = innerWidth;
            scaledImgHeight = GetProportionalSize(this.oImg.width, this.oImg.height, innerWidth, 'height');
        } else {
            scaledImgHeight = innerHeight;
            scaledImgWidth = GetProportionalSize(this.oImg.width, this.oImg.height, innerHeight, 'width');
        }
    }
    
    eImage.style.width = scaledImgWidth + 'px';
    eImage.style.height = scaledImgHeight + 'px';
    
    var top = Math.floor(((winHeight - scaledImgHeight) / 2) - this.iMargin);
    eImage.style.marginTop = (top - 100) + 'px';
    
    ById('ImageLayer_DivDesc').style.width = scaledImgWidth + 'px';
    ById('ImageLayer_DivDesc').style.display = 'block';
}

ImageLayer.prototype.Close = function() {
    var eDiv = ById('ImageLayer_DIV');
    eDiv.parentNode.removeChild(eDiv);
    this.bIsOpen = false;
}

var oImageLayer = new ImageLayer('zamknij okienko');