function closeImgBox() {
    if (imgBoxIsOpen) {
        imgBoxIsOpen = false;
        $("#imgBoxZoom").hide();
        $("#imgBox").animate({
            opacity: 0
        }, 250, "linear", function() {
            $("#imgBoximg").remove();
            $("#imgBox").hide();
        });
        $("#imgBackground").animate({
            opacity: 0
        }, 500, "linear", function() {
            $("#imgBackground").hide();
        });
        $("#imgBoxLoader").hide();
    }
}
$(window).resize(function() {
resizeImgBox()
});
var imgBoxLoadedPicW=10
var imgBoxLoadedPicH = 10
var imgBoxScaling =1
function resizeImgBox() {
    var mW = $("#imgBackground").width() * 0.8;
    var mH = $("#imgBackground").height() * 0.8;
    var w = imgBoxLoadedPicW;
    var h = imgBoxLoadedPicH;
    w = (w > mW) ? mW : w;
    h = (h > mH) ? mH : h;
    if (mW / mH < w / h) {
        imgBoxScaling = imgBoxLoadedPicW / w;
        $("#imgBoximg").width(w);
        h = $("#imgBox img").height()
    } else {

        imgBoxScaling = imgBoxLoadedPicH / h;
        $("#imgBoximg").height(h);
        w = $("#imgBox div img").width()
    }
    $("#imgBox div").width(w + 40);
    $("#imgBox div").height(h + 80);
    $("#imgBox").css("left", ($("#imgBackground").width() - $("#imgBox div").width()) / 2);
    $("#imgBox").css("top", ($("#imgBackground").height() - $("#imgBox div").height()) / 2);
}
var zoomSize = 80;
function moveImgBoxZoom(e) {
    var offset = $("#imgBoximg").offset();
    $("#imgBoxZoom").css("margin-left", e.pageX - (zoomSize / 2));
    $("#imgBoxZoom").css("margin-top", e.pageY - (zoomSize / 2));
    //console.log(((offset.left - e.pageX) * imgBoxScaling).toString() + " - " + imgBoxScaling.toString());
    $("#imgBoxZoom div div img").css("position", "absolute");
    $("#imgBoxZoom div div img").css("left", ((offset.left - e.pageX) * imgBoxScaling) + (zoomSize / 2));
    $("#imgBoxZoom div div img").css("top", ((offset.top - e.pageY) * imgBoxScaling) + (zoomSize / 2));

}
function createImgBoxZoom() {
    return;
    $("#imgBoxZoom").show();
    $("#imgBoxZoom").width(zoomSize+13);
    $("#imgBoxZoom").height(zoomSize+15);
    $("#imgBoxZoom div div").width(zoomSize);
    $("#imgBoxZoom div div").height(zoomSize);
    $("#imgBoxZoom div div img").attr("src", $("#imgBoximg").attr("src"));
    $("#imgBoximg").mousemove(moveImgBoxZoom);
    $("#imgBoxZoom").mousemove(moveImgBoxZoom);
}
var imgBoxIsOpen = false;
function openImgBox(img) {
    $("#imgBackground").css("opacity", 0);
    $("#imgBackground").show();
    $("#imgBoxLoader").css("opacity", 0);
    $("#imgBoxLoader").show();
    $("#imgBoxLoader").animate({
        opacity: 1
    }, 300);
    $("#imgBackground").animate({
        opacity: 0.7
    }, 500, "linear", function() {
        //
        $("body").prepend('<img id="loadImage" />');
        $("#loadImage").css("position", "absolute");
        $("#loadImage").css("opacity", "0");
        $("#loadImage").css("zIndex", "-1");
        $("#loadImage").load(function() {

            imgBoxLoadedPicW = $(this).width()
            imgBoxLoadedPicH = $(this).height()
            $("#imgBox div").prepend("<img id='imgBoximg' />");
            $("#imgBoximg").load(function() {
                $("#loadImage").remove();
                $("#imgBoximg").mouseover(function() {
                    createImgBoxZoom();
                });
                $("#imgBoximg").mouseout(function() {
                    //$("#imgBoxZoom").fadeOut("fast");
                });
                $("#imgBoxLoader").hide();
                $("#imgBox").css("opacity", 0);
                $("#imgBox").show()

                resizeImgBox();
                $("#imgBox").animate({
                    opacity: 1
                }, 500, "linear", function() {
                    imgBoxIsOpen = true;
                });
            });

            $("#imgBoximg").attr("src", img);

        });
        $("#loadImage").attr("src", img);




    });
}
jQuery(function($) {


    $("body").append('<div id="imgBackground" />');
    $("#imgBackground").hide();
    $("body").prepend('<div id="imgBoxLoader">Loading...</div>');
    $("#imgBoxLoader").hide();
    $("body").append('<div id="imgBox"><div><p><a href="#" onclick="closeImgBox()">Close</a></p></div></div>');
    $("#imgBox").hide();
    $("body").append('<div id="imgBoxZoom"><div><div><img /></div></div></div>');
    $("#imgBoxZoom").hide();
    $("#imgBackground").click(closeImgBox);
    $("a[rel^='lightbox']").click(function() {
        openImgBox($(this).attr("href"))

        return false;
    });
    var zoomratioX
    var zoomratioY
    function zoomMove(mm) {
        var item = $(this).parent();
        var varImgObj = item.find("div img").eq(0);
        var l = (mm.pageX - $(this).offset().left) * zoomratioX
        var t = (mm.pageY - $(this).offset().top) * zoomratioY
        varImgObj.css("margin-left", 0 - l);
        varImgObj.css("margin-top", 0 - t);
    }
    var pMMx;
    var pMMy;
    function preZoom(e) {
        pMMx = e.pageX
        pMMy = e.pageY
    }
    function openZoomBox(item) {
        var theImage = item.find("img").eq(0);
        theImage.css("opacity", 0.5);
        theImage.before("<div style=\"width:" + theImage.width() + "px;height:417px" +// theImage.height() +
        ";background-color:White; border:solid 1px #e0e0e0; position:absolute; z-index:10; left:" + (theImage.width() + theImage.position().left) +
        "px;overflow:hidden; \" class=\"zoomBox\"><img  />" +
        "</div>");
        var varImgObj = item.find("div img").eq(0);
        varImgObj.hide();

        varImgObj.load(function() {

            varImgObj.show();
            zoomratioX = (varImgObj.width() - theImage.width()) / theImage.width()
            zoomratioY = (varImgObj.height() - theImage.height()) / theImage.height()

            theImage.unbind("mousemove", preZoom);
            theImage.bind("mousemove", zoomMove);
            theImage.trigger({ type: "mousemove", pageX: pMMx, pageY: pMMy });

        })
        varImgObj.attr("src", item.attr("href"));
    }

    function closeZoomBox(item) {

        var theImage = item.find("img")
        theImage.css("opacity", 1);
        theImage.unbind("mousemove", zoomMove);
        item.find("div").remove();
    }
    function prepBigBox() {
        $(this).unbind("click", prepBigBox);
        $(this).find("img").bind("click", prepZoomBox);
        openImgBox($(this).attr("href"))
        return false;
    }
    function prepZoomBox(item) {
        openZoomBox($(this).parent())
        $(this).parent().bind("click", prepBigBox);
        $(this).unbind("click", prepZoomBox);
        return false;
    }
    $("a[rel^='zoombox'] img").bind("click", prepZoomBox);

    $("a[rel^='zoombox'] img").hover(function() {

        $(this).bind("mousemove", preZoom);
        return false;
    }, function() {
        $(this).parent().unbind("click", prepBigBox);
        $(this).bind("click", prepZoomBox);
        closeZoomBox($(this).parent())
    });


});