$(document).ready(function () {

    //pega os tamanhos definidos na imagem grande para o box do zoom e a imagem do zoom
    if ($(".zoom").children("img").attr("rel")) {
        var tamH = parseFloat($(".zoom").children("img").attr("rel").split(';')[0].split(',')[0]);
        var tamW = parseFloat($(".zoom").children("img").attr("rel").split(';')[0].split(',')[1]);
        var tamH2 = parseFloat($(".zoom").children("img").attr("rel").split(';')[1].split(',')[0]);
        var tamW2 = parseFloat($(".zoom").children("img").attr("rel").split(';')[1].split(',')[1]);
        var multH = parseFloat(tamH2 / tamH); 
        var multW = parseFloat(tamW2 / tamW); 
        var tamBoxLenH = parseFloat(tamH / multH);
        var tamBoxLenW = parseFloat(tamW / multW);
        

    }

    $(".zoom").each(function () {// para cada espaço de imagem grande (geralmente só tem 1)
        if (!$(this).parent().children("div.zoom_big").length) { //se o box de zoom não existe

            var obj = $(this);
            var offset = obj.offset(); //objeto para pegar a posição absoluta

            //box de lente para bind de mouse over
            $(this).parent().append("<div class='zoom_len'></div>");
            $(this).parent().children("div.zoom_len").css("height", tamH);
            $(this).parent().children("div.zoom_len").css("width", tamW);
            $(this).parent().children("div.zoom_len").css("position", "absolute");
            $(this).parent().children("div.zoom_len").css("z-index", "2000");
            $(this).parent().children("div.zoom_len").css("left", offset.left);
            $(this).parent().children("div.zoom_len").css("top", offset.top);
            $(this).parent().children("div.zoom_len").css("float", "left");
            $(this).parent().children("div.zoom_len").css("background-color", "silver");
            $(this).parent().children("div.zoom_len").css("opacity", "0.01");

            //box da imagem de zoom que aparece do lado direito
            $(this).parent().append("<div class='zoom_big'><img id='imgZoomBig' /></div>");
            $(this).parent().children("div.zoom_big").css("display", "none");
            $(this).parent().children("div.zoom_big").css("height", tamH);
            $(this).parent().children("div.zoom_big").css("width", tamW);
            $(this).parent().children("div.zoom_big").css("overflow", "hidden");
            $(this).parent().children("div.zoom_big").css("position", "absolute");
            $(this).parent().children("div.zoom_big").css("z-index", "1000");
            $(this).parent().children("div.zoom_big").css("left", offset.left + tamW);
            $(this).parent().children("div.zoom_big").css("top", offset.top);
            $(this).parent().children("div.zoom_big").children("img").attr("src", $(this).children("img").attr("src"));
            $(this).parent().children("div.zoom_big").children("img").css("position", "absolute");
            $(this).parent().children("div.zoom_big").children("img").css("height", tamH2);
            $(this).parent().children("div.zoom_big").children("img").css("width", tamW2);
            $(this).parent().children("div.zoom_big").css("float", "left")

            //força tamanho padrão da imagem grande
            $(this).children("img").height(tamH);
            $(this).children("img").width(tamW);

            //box semi-transparente que segue o mouse
            $(this).parent().append("<div class='zoom_box'></div>");
            $(this).parent().children("div.zoom_box").css("display", "none");
            $(this).parent().children("div.zoom_box").css("height", tamBoxLenH);
            $(this).parent().children("div.zoom_box").css("width", tamBoxLenW);
            $(this).parent().children("div.zoom_box").css("border-width", "1px");
            $(this).parent().children("div.zoom_box").css("border-color", "black");
            $(this).parent().children("div.zoom_box").css("opacity", "0.4");
            $(this).parent().children("div.zoom_box").css("background-color", "silver");
            $(this).parent().children("div.zoom_box").css("position", "absolute");
            $(this).parent().children("div.zoom_box").css("z-index", "1000");
            $(this).parent().children("div.zoom_box").css("left", offset.left);
            $(this).parent().children("div.zoom_box").css("top", offset.top);
            $(this).parent().children("div.zoom_box").css("float", "left");

        }
    });

    //quando o mouse entra na lente, mostra o box do zoom
    $(".zoom_len").mouseenter(function () {
        $(this).parent().children("div.zoom_big").fadeIn();
        $(this).parent().children("div.zoom_box").show();
        multH = parseFloat($("#imgZoomBig").height() / tamH);
        multW = parseFloat($("#imgZoomBig").width() / tamW);
    });

    //quando deixa a area da lente, oculta o zoom
    $(".zoom_len").mouseleave(function () {
        $(this).parent().children("div.zoom_big").fadeOut();
        $(this).parent().children("div.zoom_box").hide();
    });

    //bind da lente transparente para pegar posição do mouse
    $(".zoom_len").mousemove(function (e) {
        var obj = $(this);
        var offset = obj.offset();
        var x = parseFloat((e.pageX - offset.left) * multW);
        var y = parseFloat((e.pageY - offset.top) * multH);
        var tamSplitW = tamW / 2;
        var tamSplitH = tamH / 2;

        if (x <= tamSplitW)
            x = tamSplitW;
        if (y <= tamSplitH)
            y = tamSplitH;

        if (x >= tamW2 - tamSplitW)
            x = tamW2 - tamSplitW;
        if (y >= tamH2 - tamSplitH)
            y = tamH2 - tamSplitH;

        $(this).parent().children("div.zoom_big").children("img").css("left", -(x - tamSplitW) + "px");
        $(this).parent().children("div.zoom_big").children("img").css("top", -(y - tamSplitH) + "px");

        x = (offset.left + (e.pageX - offset.left) - (parseFloat(tamBoxLenW) / 2));
        y = (offset.top + (e.pageY - offset.top) - (parseFloat(tamBoxLenH) / 2));

        if (x <= offset.left)
            x = offset.left;
        if (x >= (offset.left + tamW - (parseFloat(tamBoxLenW))))
            x = offset.left + tamW - (parseFloat(tamBoxLenW));

        if (y <= offset.top)
            y = offset.top;
        if (y >= (offset.top + tamH - (parseFloat(tamBoxLenH))))
            y = offset.top + tamH - (parseFloat(tamBoxLenH));

        $(this).parent().children("div.zoom_box").css("left", x);
        $(this).parent().children("div.zoom_box").css("top", y);
    });

    //bind das imagens adicionais - obrigatorio ter o endereço da imagem de zoom no REL
    $(".zoom_add").click(function () {
        $(".zoom").children("img").attr("src", $(this).attr("rel"));
        var img = $(this).attr("rel");
        $(".zoom").parent().children("div.zoom_big").children("img").attr("src", img.replace("%20", " "));
    });

});