if (typeof (window.ImagePreview) == "undefined" || window.ImagePreview == null) {

    window.ImagePreviewIndex = 0;

    window.ImagePreview = function (imageUrl, previewMode, targetElement) {
        this.initialize(imageUrl, previewMode, targetElement);
    }

    window.ImagePreview.prototype =
    {
        initialize: function (imageUrl, previewMode, targetElement) {
            this.previewMode = previewMode;

            this.popupID = IMAGE_PREVIEW_POPUP_ID;
            this.popup = eval(this.popupID + "_obj");

            this.expandText = " → Показать изображение";
            this.collapseText = " ← Скрыть изображение";

            this.imageUrl = imageUrl;
            this.index = this.getNextIndex();
            this.id = "ctlImagePreview" + this.index;
            this.linkID = this.id + "_link";
            this.divID = this.id + "_div";
            this.imageID = this.id + "_image";
            this.magnifyID = this.id + "_magnify";

            window[this.id] = this;

            var html = "";
            if (this.previewMode) {
                html += "<div class=\"previewFrame\">";
                html += "<a id=\"" + this.linkID + "\" href=\"javascript:window." + this.id + ".toggle();\">" + this.expandText + "</a>";
                html += "<br />";
                html += "<div id=\"" + this.divID + "\" style=\"display: none;\">";
                //html += "<img id=\"" + this.imageID + "\" class=\"previewImage\" src=\"\" alt=\"\" title=\"Нажмите, чтобы увеличить\" onclick=\"showImage(this);\" onmousemove=\"window." + this.id + ".showMagnifier(event);\" onmouseout=\"window." + this.id + ".hideMagnifier();\" />";
                html += "<img id=\"" + this.imageID + "\" class=\"previewImage\" src=\"\" alt=\"\" title=\"Нажмите, чтобы увеличить\" onclick=\"showImage(this);\" />";
                //html += "<img id=\"" + this.magnifyID + "\" src=\"../Images/Magnify.png\" style=\"display: none\" />";
                html += "</div>";
                html += "</div>";
            }
            else {
                //html += "<img id=\"" + this.imageID + "\" class=\"previewImage\" src=\"" + this.imageUrl + "\" alt=\"\" title=\"Нажмите, чтобы увеличить\" onclick=\"showImage(this);\" onmousemove=\"window." + this.id + ".showMagnifier(event);\" onmouseout=\"window." + this.id + ".hideMagnifier();\" />";
                html += "<img id=\"" + this.imageID + "\" class=\"previewImage\" src=\"" + this.imageUrl + "\" alt=\"\" title=\"Нажмите, чтобы увеличить\" onclick=\"showImage(this);\" />";
                //html += "<img id=\"" + this.magnifyID + "\" src=\"../Images/Magnify.png\" style=\"display: none\" />";
            }

            document.getElementById(targetElement).innerHTML = html;
        },

        getNextIndex: function () {
            return window.ImagePreviewIndex++;
        },

        toggle: function () {
            var link = document.getElementById(this.linkID);
            var div = document.getElementById(this.divID);
            if (div.style.display == "none") {
                div.style.display = "inline";
                link.innerHTML = this.collapseText;

                var image = document.getElementById(this.imageID);
                image.src = this.imageUrl;
            }
            else {
                div.style.display = "none";
                link.innerHTML = this.expandText;
            }

        },

        showMagnifier: function (evt) {
            var s = document.getElementById(this.magnifyID).style;
            s.display = "inline";
            s.position = "absolute";
            s.zIndex = 10;

            if (typeof (evt.offsetX) == "undefined") {
                s.top = (Utils.getScrollY() + evt.clientY + 8) + "px";
                s.left = (Utils.getScrollX() + evt.clientX + 8) + "px";
            }
            else {
                var image = document.getElementById(this.imageID);
                var imageOffset = Utils.getCumulativeOffset(image);

                // Layout hack
                var contentPane = document.getElementById("ctl00_upd_centerPane");
                var contentOffset = Utils.getCumulativeOffset(contentPane);
                imageOffset.left -= contentOffset.left;

                s.top = (imageOffset.top + evt.offsetY + 8) + "px";
                s.left = (imageOffset.left + evt.offsetX + 8) + "px";
            }
        },

        hideMagnifier: function () {
            document.getElementById(this.magnifyID).style.display = "none";
        }

    }


    var tempImg = null;

    var imgPreview = null;
    var imgPreviewDims = null;

    var IMAGE_PREVIEW_MARGIN = 16;
    var HEADER_HEIGHT = 26;

    function showImage(img) {
        tempImg = new Image();
        tempImg.style.display = "none";
        document.body.appendChild(tempImg);
        tempImg.onload = showImage_continued;
        tempImg.src = img.src;
    }

    function showImage_continued() {
        if (tempImg == null)
            return;

        imgPreviewDims = Utils.getDimensions(tempImg);

        imgPreview = document.getElementById(IMAGE_PREVIEW_IMAGE_ID);
        imgPreview.src = tempImg.src;

        document.body.removeChild(tempImg);
        delete tempImg;
        tempImg = null;

        var wndPreview_obj = eval("window." + IMAGE_PREVIEW_POPUP_ID + "_obj");

        wndPreview_obj.setMaximized(false);
        wndPreview_obj.resize(
                imgPreviewDims.width + IMAGE_PREVIEW_MARGIN * 2,
                imgPreviewDims.height + IMAGE_PREVIEW_MARGIN * 2 + HEADER_HEIGHT);
        wndPreview_obj.show();
    }

    function wndPreview_onResize(contentDims) {
        var imgAspect = imgPreviewDims.width / imgPreviewDims.height;
        var contentAspect = (contentDims.width - IMAGE_PREVIEW_MARGIN * 2) / (contentDims.height - IMAGE_PREVIEW_MARGIN * 2);

        if (imgAspect < contentAspect) {
            imgPreview.style.maxHeight = (contentDims.height - IMAGE_PREVIEW_MARGIN * 2) + "px";
            imgPreview.style.maxWidth = "";
        }
        else {
            imgPreview.style.maxHeight = "";
            imgPreview.style.maxWidth = (contentDims.width - IMAGE_PREVIEW_MARGIN * 2) + "px";
        }
    }

}