var x, y, areaX, areaY, areaWidth, areaHeight;
var previewArea;

function imagePreview(e, smallImage, middleImagePath) {
    previewArea = document.getElementById("previewArea");

    if (previewArea == null) {
        var previewArea = document.createElement("div");
        var previewImage = document.createElement("img");
        previewArea.id = 'previewArea';
        previewArea.className = 'previewArea';
        previewArea.style.zIndex = '20';
        previewArea.onmouseout = function() { imagePreviewCloseFromPopup() }
        previewImage.id = 'previewImage';
        previewImage.src = smallImage.src;
        //previewImage.src = middleImagePath;

        var vyska = smallImage.height;
        var sirka = smallImage.width;

        if (smallImage.tagName.match('INPUT')) {
            vyska = smallImage.imageHeight;
            sirka = smallImage.imageWidth;
        }

        var pomerVyskaSirka = vyska / sirka;

        if (pomerVyskaSirka < 1) {
            previewImage.style.height = 300 * pomerVyskaSirka + "px";
            previewImage.style.width = "300px";
        }
        else {
            if (pomerVyskaSirka > 1) {
                previewImage.style.width = 300 / pomerVyskaSirka + "px";
                previewImage.style.height = "300px";
            }
            else {
                previewImage.style.width = "300px";
                previewImage.style.height = "300px";
            }
        }

        if (document.getElementById) {

            if (document.all && !window.opera) {
                x = event.clientX + document.documentElement.scrollLeft;

                if (pomerVyskaSirka < 1)
                    y = event.clientY + document.documentElement.scrollTop - 300 * pomerVyskaSirka - 12;
                else
                    y = event.clientY + document.documentElement.scrollTop - 312;
            }
            else {
                x = ev.pageX;
                y = ev.pageY;
            }
            if (document.all && !window.opera) {
                previewArea.style.pixelLeft = x;
                previewArea.style.pixelTop = y;
            }
            else {
                previewArea.style.left = x + 'px';
                previewArea.style.top = y + 'px';
            }
        }

        //showCoords(x, y, document.documentElement.scrollLeft, document.documentElement.scrollTop);
        previewArea.appendChild(previewImage);

        var previewDescription = null;

        if (smallImage.alt != "") {
            previewDescription = document.createElement("p");
            previewDescription.id = 'previewDescription';
            previewDescription.className = 'previewDescription';
            previewDescription.innerText = smallImage.alt;
            previewArea.appendChild(previewDescription);
        }

        previewArea.style.width = previewImage.style.width;
        
        document.body.appendChild(previewArea);

        var previewImageFounded = document.getElementById("previewImage");

        previewArea.removeChild(previewImageFounded);
        previewImageFounded.src = middleImagePath;

        if (previewDescription == null)
            previewArea.appendChild(previewImageFounded);
        else
            previewArea.insertBefore(previewImageFounded, previewDescription);
    }
}

function setCoordinates() {
    if (document.getElementById) {

        if (document.all && !window.opera) {
            x = event.clientX + document.documentElement.scrollLeft;
            y = event.clientY + document.documentElement.scrollTop;
        }
        else {
            x = ev.pageX;
            y = ev.pageY;
        }
        if (document.all && !window.opera) {
            areaX = previewArea.style.pixelLeft;
            areaY = previewArea.style.pixelTop;
        }
        else {
            areaX = previewArea.style.left.replace(/px/, '');
            areaY = previewArea.style.top.replace(/px/, '');
        }

        areaWidth = parseInt(previewArea.style.width.replace(/px/, ''));
        areaHeight = parseInt(previewArea.style.height.replace(/px/, ''));

        //showCoords(x, y, areaX, areaY, areaWidth, areaHeight);
    }
}

function imagePreviewClose(e) {
    previewArea = document.getElementById("previewArea");

    if (previewArea != null) {
        setCoordinates();

        if (x < areaX || y > areaY + areaHeight + 12)
            document.body.removeChild(previewArea);
    }
}

function showCoords(xc, yc, sx, sy, dx, dy) {
    var content = document.getElementById("info");
    var span = document.createElement("span");
    span.id = "spanCoords";
    span.appendChild(document.createTextNode('Pozice myši: ' + xc + ', ' + yc + ' pozice oblasti: ' + sx + ', ' + sy + ' velikost oblasti: ' + dx + ', ' + dy));
    var spanCoords = document.getElementById("spanCoords");
    if (spanCoords != null)
        content.removeChild(spanCoords);
    content.appendChild(span);
}

function imagePreviewCloseFromPopup() {
    previewArea = document.getElementById("previewArea");

    if (previewArea != null) {
        setCoordinates();

        if (x < areaX + 2 || x > areaX + areaWidth + 13 || y > areaY + areaHeight + 13 || y < areaY + 2)
            document.body.removeChild(previewArea);
    }
}