Image zoom in

function initiate() {
    obr = document.getElementById('detail');
    prekryti = document.getElementById('cele');

    zvetseno = false;

    sirka = obr.width;
    vyska = obr.height;

    obr.style.width = '490px';
    loaded();

}

function loaded() {
    obr.style.visibility = 'visible';

    obr.onclick = function() {
        det();
    }
}

function det() {
    obr = document.getElementById('detail');
    okvys = window.innerHeight;
    oksir = window.innerWidth;
    //pomer_mon = window.innerHeight / window.innerWidth;
    pomer_img = vyska / sirka;
    //alert(pomer_mon + ' ' + pomer_img);
    //alert(sirka + ' ' + vyska + ' ' + oksir + ' ' + okvys);
    if(zvetseno == false) {
        if((sirka < oksir) && (vyska < okvys)) {
            obr.style.width = 'auto';
            //alert('je mensi');
            obr.style.position = 'absolute';
            p1 = (100 - (sirka / (oksir / 100))) / 2;
            p2 = (100 - (vyska / (okvys / 100))) / 2;
            //alert(p1 + ' ' + p2);
            obr.style.top = p2 + '%';
            obr.style.left = p1 + '%';

        } else {
            //alert('vetsi');
            obr.style.width = oksir - 20;
            obr.style.height = obr.style.width * pomer_img;
            obr.style.position = 'absolute';

            p1 = (100 - (obr.width / (oksir / 100))) / 2;
            p2 = (100 - (obr.height / (okvys / 100))) / 2;
            //alert(p1 + ' ' + p2);
            obr.style.top = p2 + '%';
            obr.style.left = p1 + '%';
        }

        prekryti.style.width = '100%';
        prekryti.style.height = '100%';
        zvetseno = true;
    } else {
        obr.style.position = 'inherit';
        prekryti.style.width = '0px';
        prekryti.style.height = '0px';
        obr.style.width = '490px';
        zvetseno = false;
    }

}