$(document).ready(function () {

    // ! Add product
    $(document).on("click", '.add-product, #buy_now', function (event) {
        event.preventDefault();
        if ($(this).attr('id') === "buy_now") {
            quickBuy = true;
        }
        // Get button clicked
        $clickedBtn = $(this).attr('name').split(" ")[0];
        $clickedForm = $(this).parent().attr('class').split(' ')[1];
        // Disable update and operator button
        $(".add-product").prop("disabled", true);
        // Starts animation
        if ($('html').attr("lang") === "ar") {
            text = "تتم الاضافة"
        } else {
            text = "Adding"
        }
        $(this).text(text).append("<i class='fas fa-spinner fa-spin'></i>");
        // Run Form Submission Function
        itemFormSubmission($(this).parent().serializeArray());
        $clickedFormTag = $(this);
    });

    // ! Browse product images
    if ($(".img-view-hidden-left").length) {
        $(".fa-arrow-right").css("display", "unset");
    }
    $(document).on("click", '.arrow', function (event) {
        event.preventDefault();
        $clickedArrow = $(this).attr('class').split(' ').pop();
        if ($clickedArrow === "fa-arrow-right" && $(".img-view-current").next().prop('tagName') === "IMG") {
            $(".img-view-current").removeClass("img-view-current").addClass("img-view-hidden-right").next().removeClass().addClass("img-view-current");
            $(".fa-arrow-left").css("display", "unset");
            if ($(".img-view-current").next().prop('tagName') != "IMG") {
                $(".fa-arrow-right").css("display", "none");
            } else {
                $(".fa-arrow-right").css("display", "unset");
            }
        }

        if ($clickedArrow === "fa-arrow-left" && $(".img-view-current").prev().prop('tagName') === "IMG") {
            $(".img-view-current").removeClass("img-view-current").addClass("img-view-hidden-left").prev().removeClass().addClass("img-view-current");
            if ($(".img-view-current").prev().prop('tagName') != "IMG") {
                $(".fa-arrow-left").css("display", "none");
            } else {
                $(".fa-arrow-left").css("display", "unset");
            }
            if ($(".img-view-current").next().prop('tagName') === "IMG") {
                $(".fa-arrow-right").css("display", "unset");
            }
        }
    });

    // ! Add-ons
    $(document).on("click", '.add-ons', function () {
        if ($(this).is(':checked')) {
            $(this).parent().next().prop("disabled", false).prop('required', true).css("display", "block");
        } else {
            $(this).parent().next().prop("disabled", true).val("").prop('required', false).css("display", "none");
        }

        addOnsArray = []
        $('.add-ons:checked').each(function () {
            addOnsArray.push($(this).attr("value"));
        });
        $("#id_product_add_on_pk").val(addOnsArray);

    });

    $(document).on("click", '.product-tabs span', function () {

        $(".product-tabs span").removeClass("tabed");
        $(this).addClass("tabed");
        if ($(this).hasClass("product-detail")) {

            $(".size-guide").css("display", "none");
            $(".product-details").css("display", "grid");
        } else {
            $(".product-details").css("display", "none");
            $(".size-guide").css("display", "grid");
        }
    });

    // var magnifierSize = 190;

    // var magnification = 2;

    // function magnifier() {

    //     this.magnifyImg = function (ptr, magnification, magnifierSize) {
    //         var $pointer = $(".magnifiedImg");
    //         magnification = +(magnification);

    //         $pointer.hover(function () {

    //             $('.magnify').show();
    //             //Setting some variables for later use
    //             var width = $(this).width();
    //             var height = $(this).height();
    //             var src = $(this).attr('src');
    //             var imagePos = $(this).offset();
    //             var image = $(this);

    //             $('.magnify').css({
    //                 'background-size': width * magnification + 'px ' + height * magnification + "px",
    //                 'background-image': 'url("' + src + '")',
    //                 'width': magnifierSize,
    //                 'height': magnifierSize,
    //                 'border-radius': '50%'
    //             })

    //             //Setting a few more...
    //             var magnifyOffset = +($('.magnify').width() / 2);
    //             var rightSide = +(imagePos.left + $(this).width());
    //             var bottomSide = +(imagePos.top + $(this).height());

    //             $(document).mousemove(function (e) {
    //                 if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide + magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e.pageY > +(bottomSide + magnifyOffset / 6)) {
    //                     $('.magnify').hide();
    //                     $(document).unbind('mousemove');
    //                 }
    //                 var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification - magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification - magnifyOffset) + "px";
    //                 $('.magnify').css({
    //                     'left': (e.pageX - imagePos.left) - 100,
    //                     'top': (e.pageY - imagePos.top) - 50,
    //                     'background-position': backgroundPos
    //                 });

    //             });
    //         });
    //     };

    //     this.init = function () {
    //         $('.product-view').prepend('<div class="magnify"></div>');
    //     }

    //     return this.init();
    // }

    // var magnify = new magnifier();
    // magnify.magnifyImg('img', magnification, magnifierSize);



    $(document).on("click", '.prev-thumbnail, .next-thumbnail', function () {

        if ($(this).hasClass("prev-thumbnail")) {
            $(this).parent().find('.slideshow-points').animate({
                scrollLeft: "-=775px"
            }, "slow");

        } else {
            $(this).parent().find('.slideshow-points').animate({
                scrollLeft: "+=775px"
            }, "slow");
        }
    });


});