var firstLoad = true;
var isIos = false;

$(document).ready(function () {
	var test = "test";
    var parts = $(".model-parts li").length;
    var zoomLevel = parseInt($(".zoom-level").attr("value"));
    var permX = parseInt($(".zoom-level").attr("data-x"));
    var permY = parseInt($(".zoom-level").attr("data-y"));
    var ogWidth, ogHeight, dWidth, dHeight, winV, fWid, fHei, zoomX, zoomY;
    var userAgent = window.navigator.userAgent;
    isIos = (userAgent.match(/iPad/i) == 'iPad' || userAgent.match(/iPhone/i) == 'iPhone' || userAgent.match(/Android/i) == 'Android') ||
            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

    var setValues = function () {
        fWid = $(".model-frame").width();
        fHei = $(".model-frame").height();
        zoomX = fWid / 2;
        zoomY = fHei / 2;
        $(".diagram-slide").css({ "left": permX + "px", "top": permY + "px" });
        //$(".loc,.pop").show();
        var istouch = "ontouchstart" in document.documentElement;
        if (($(".zoom-level").attr("data-browser") === "ie") || (istouch == true)) {
            $(".diagram-slide").removeClass("slide-move");
            $(".model-frame").addClass("ie-frame");
            var ieZoom = $(".model-frame .zoom").remove();
            $(".model-frame").before(ieZoom);
            $(".zoom a").click(function () {
                if ($(this).hasClass("zoom-out")) {
                    if (zoomLevel === 2) {
                        zoomLevel = 1;
                        $(".zoom-level").attr("value", 1);
                        zoom(".5");
                    }
                    if (zoomLevel === 3) {
                        zoomLevel = 2;
                        $(".zoom-level").attr("value", 2);
                        zoom(".75");
                    }
                }
                if ($(this).hasClass("zoom-in")) {
                    if (zoomLevel === 2) {
                        zoomLevel = 3;
                        $(".zoom-level").attr("value", 3);
                        zoom("1");
                    }
                    if (zoomLevel === 1) {
                        zoomLevel = 2;
                        $(".zoom-level").attr("value", 2);
                        zoom(".75");
                    }
                }
                return false;
            });
        }
    };
    var setLocs = function (z) {
        //$(".model-parts li:even").addClass("even");
        for (var i = 0; i < parts; i++) {
            var row = $(".model-parts li:eq(" + i + ")");
            var label = $(row).find(".label").attr("data-label");
            var descr = $(row).find(".label").attr("data-text");

            var numLocs = $(row).find(".label").find(".location").length;

            $(row).find(".label").find(".location").each(function () {
                var location = $(this);
                var partID = $(location).attr("data-id");
                var locXa = $(location).attr("data-xa") * z;
                var locXb = $(location).attr("data-xb") * z;
                var locYa = $(location).attr("data-ya") * z;
                var locYb = $(location).attr("data-yb") * z;

                var locX = (locXa + locXb) / 2;
                var locY = (locYa + locYb) / 2;
                $(".plots").append("<a class='loc' data-id='" + partID + "' alt='Item " + label + " " + descr + "' title='Item " + label + " " + descr + `' href='#'><img src='https://imagecdn.jackssmallengines.com/images/lookup/trans.png' height='33' width='33' alt='' /></a>`);
                $(".plots").find("[data-id='" + partID + "']").css({ "position": "absolute", "top": locY + "px", "left": locX + "px" });
            });
        }
        $("a.loc").click(function () {
            pop($(this));
            return false;
        });
    };
    var pop = function (target) {
        $(".pop-point, .pop").remove();
        var partID = $(target).attr("data-id");
        var partRow = $(".model-parts").find("[data-id='" + partID + "']").closest("li").html();

        // mod to eliminate the first popup and go straight to the cart window
        var partButton = $(".model-parts").find("[data-id='" + partID + "']").closest("li").find("input.amButton");
        partButton.trigger('click');
        return false;
    }
    var zoom = function (factor) {
        $(".pop").remove();
        dWidth = ogWidth * factor;
        dHeight = ogHeight * factor;
        zoomX *= factor;
        zoomY *= factor;
        var newX = zoomX - (fWid / 2);
        var newY = zoomY - (fHei / 2);
        $(".plots .diagram").css({ "width": dWidth + "px", "height": dHeight + "px" });

        if (isIos) {

            $('.lookup .model-frame').css({ "display": "flex" });
            $('.lookup .model-frame .diagram-slide').css({ "position": "static", "overflow-y": "scroll", "-webkit-overflow-scrolling": "touch", "height": "" });
        } else
            $(".diagram-slide").css({ "left": newX + "px", "top": newY + "px", "width": dWidth + "px", "height": dHeight + "px" });

        $("a.loc").remove();
        setLocs(factor);
        $("a.loc").click(function () {
            pop($(this));
            return false;
        });
        if (dWidth < fWid) { $(".diagram-slide").css({ "left": 0 }) }
        if (dHeight < fHei) { $(".diagram-slide").css({ "top": 0 }) }
    };
    $(".slide-move").mousedown(function (e) {
        var origX = e.pageX;
        var origY = e.pageY;
        var slidePos = $(this).position();
        var slideX = slidePos.left;
        var slideY = slidePos.top;
        $(".slide-move").mousemove(function (f) {
            var newX = slideX + (f.pageX - origX);
            var newY = slideY + (f.pageY - origY);
            if (dWidth < fWid) {
                newX = 0;
            } else {
                if (newX > 0) { newX = 0; }
                if (newX < (-(Math.abs(dWidth - fWid)))) { newX = -(Math.abs(dWidth - fWid)); }
            }
            if (dHeight < fHei) {
                newY = 0;
            } else {
                if (newY > 0) { newY = 0; }
                if (newY < (-(Math.abs(dHeight - fHei)))) { newY = -(Math.abs(dHeight - fHei)); }
            }
            $(this).css({ "left": newX + "px", "top": newY + "px" });
            $(".zoom-level").attr("data-x", newX);
            $(".zoom-level").attr("data-y", newY);
            zoomX = (fWid / 2) + newX;
            zoomY = (fHei / 2) + newY;
            $(".model-frame").mouseleave(function () {
                $(".slide-move").off("mousemove");
                $(".slide-move").on("mousemove");
            });
        });
        return false;
    });
    $(".slide-move").mouseup(function () {
        $(".slide-move").off("mousemove");
        $(".slide-move").on("mousemove");
        return false;
    });
    $("a.loc").click(function () {
        pop($(this));
        return false;
    });
    $("#zoom-in").click(function () {
        if (zoomLevel === 2) {
            zoomLevel = 3;
            $(".zoom-level").attr("value", 3);
            zoom("1");
        }
        if (zoomLevel === 1) {
            zoomLevel = 2;
            $(".zoom-level").attr("value", 2);
            zoom(".75");
        }
        return false;
    });
    $("#zoom-out").click(function () {
        if (zoomLevel === 2) {
            zoomLevel = 1;
            $(".zoom-level").attr("value", 1);
            zoom(".5");
        }
        if (zoomLevel === 3) {
            zoomLevel = 2;
            $(".zoom-level").attr("value", 2);
            zoom(".75");
        }
        return false;
    });
    $("#print-diagram").click(function () {
        zoom("1");
        var x = 0;//-(Math.abs(dWidth - fWid));
        var y = 0;// -(Math.abs(dHeight - fHei));
        $(".slide-move").css({ "left": x + "px", "top": y + "px", "height": "100%", "width": "100%" });
        $(".plots .diagram").css({ "top": "100px", "width": "100%", "height": "auto" });
        window.print();
        zoom(".5");
        x = 0;
        y = 0;
        $(".slide-move").css({ "left": x + "px", "top": y + "px" });
    });
    $('#refreshImage').click(function () {
        window.location.reload();
    });
    $(".move-nav a").click(function () {
        var slide = $(".slide-move").position();
        var slideX = slide.left;
        var slideY = slide.top;
        var maxMove = 150;
        if ($(this).hasClass("left")) {
            if (slideX <= (-maxMove)) {
                $(".slide-move").animate({ "left": "+=" + maxMove + "px" });
            } else {
                $(".slide-move").animate({ "left": "0px" });
            }
        }
        if ($(this).hasClass("right")) {
            if (((dWidth - fWid) + slideX) >= maxMove) {
                $(".slide-move").animate({ "left": "-=" + maxMove + "px" });
            } else {
                $(".slide-move").animate({ "left": "-" + (dWidth - fWid) + "px" });
            }
        }
        if ($(this).hasClass("up")) {
            if (slideY <= (-maxMove)) {
                $(".slide-move").animate({ "top": "+=" + maxMove + "px" });
            } else {
                $(".slide-move").animate({ "top": "0px" });
            }
        }
        if ($(this).hasClass("down")) {
            if (((dHeight - fHei) + slideY) >= maxMove) {
                $(".slide-move").animate({ "top": "-=" + maxMove + "px" });
            } else {
                $(".slide-move").animate({ "top": "-" + (dHeight - fHei) + "px" });
            }
        }
        return false;
    });

    var initDiagram = function () {

        //window.clearTimeout();
        ogWidth = $(".model-frame .diagram").width();
        ogHeight = $(".model-frame .diagram").height();
        //while (ogHeight === 0 && ogWidth === 0)
        //    window.setTimeout(1000, function () {
        //        initDiagram();
        //    });

        dWidth = ogWidth;
        dHeight = ogHeight;
        $(".diagram-slide").css({ "width": dWidth + "px", "height": dHeight + "px" });
        zoomLevel = 1;

        if (isIos) {
            $('.lookup .model-frame').css({ "display": "flex" });
            $('.lookup .model-frame .diagram-slide').css({ "position": "static", "overflow-y": "scroll", "-webkit-overflow-scrolling": "touch", "height": "" });
            $('#diagramControls').addClass('d-none');
        }

        if (zoomLevel === 1) { zoom(".5") }
        if (zoomLevel === 2) { zoom(".75") }
        if (zoomLevel === 3) { zoom("1") }
        setValues();
        toggleCart();
    }

    initDiagram();
});

function toggleCart() {
    var target = $("a.show-hide");
    if ($(target).hasClass("show")) {
        $(target).removeClass("show").addClass("hide");
        var newHeight = $(".c-body").height() + 32;
        $(".lu-cart").animate({ "height": newHeight + "px" });
    } else {
        $(target).removeClass("hide").addClass("show");
        $(".lu-cart").animate({ "height": "30px" });
    }
    return false;
}