jQuery(function($) {
    
    var element = $(".dipi-typing .dipi-typing-text");
	
    $(".dipi-typing").length && $(element).each(function(element, i) {

        var text = $(this).data("dipi-typing-strings");
        var loop = $(this).data("dipi-loop");
        var speed = $(this).data("dipi-speed");
        var backspeed = $(this).data("dipi-backspeed");
        var backdelay = $(this).data("dipi-backdelay");
        var show_cursor = $(this).data("dipi-show-cursor");
        var cursor_char = $(this).data("dipi-cursor-char");

        var options = {
            strings: text,
            loop: loop,
            typeSpeed: parseFloat(speed),
            backSpeed: parseFloat(backspeed),
            backDelay: parseFloat(backdelay),
            cursorChar: cursor_char,
            contentType: "null"
        };

        new Typed(this, options);
    });

    if(window.ETBuilderBackend && window.ETBuilderBackend.defaults){
        window.ETBuilderBackend.defaults.dipi_before_after_slider = {
            before_image: window.DiviPixelBuilderData.defaults.image,
            after_image: window.DiviPixelBuilderData.defaults.image
        };
    }

    $.fn.dipi_before_after_slider = function () {
        const container = $(this); //div.dipi_before_after_slider_container

        const options = $.extend({
            default_offset_pct: 0.5,
            orientation: 'horizontal',
            before_label: false,
            after_label: false,
            move_slider_on_hover: false,
            move_with_handle_only: false,
            click_to_move: true
        }, container.data("options"));


        var sliderPct = options.offset / 100;
        var beforeDirection = (options.direction === 'vertical') ? 'down' : 'left';
        var afterDirection = (options.direction === 'vertical') ? 'up' : 'right';

        //Create a replaceable wrapper so we don't need to touch the actual module DOM
        const innerWrapper = $(`<div class="dipi_before_after_slider_wrapper dipi_before_after_slider_${options.direction}"></div>`)

        //Add images to wrapper
        const beforeImage = $(`<img src="${options.before_image}" alt="${options.before_image_alt}" class="dipi_before_after_slider_before"/>`);
        innerWrapper.append(beforeImage);

        const afterImage = $(`<img src="${options.after_image}" alt="${options.after_image_alt}" class="dipi_before_after_slider_after"/>`);
        innerWrapper.append(afterImage);

        beforeImage.on("load", function(){
            adjustSlider(sliderPct);
        });

        //Add overlay to wrapper
        const overlay = $("<div class='dipi_before_after_slider_overlay'></div>");
        const beforeLabel = $(`<div class='dipi_before_after_slider_before_label dipi_before_after_slider_label' data-content="${options.before_label}"></div>`);
        const afterLabel = $(`<div class='dipi_before_after_slider_after_label dipi_before_after_slider_label' data-content="${options.after_label}"></div>`);
        overlay.append(beforeLabel);
        overlay.append(afterLabel);
        innerWrapper.append(overlay);

        //Add handle
        const slider = $("<div class='dipi_before_after_slider_handle'></div>");
        slider.append(`<span class="dipi_before_after_slider_${beforeDirection}_arrow"></span>`);
        slider.append(`<span class="dipi_before_after_slider_${afterDirection}_arrow"></span>`);
        innerWrapper.append(slider);

        //Replace container html with newly created inner wrapper
        container.html(innerWrapper);

        //Calculate the horizontal/vertical offset and total height, based on the before image and the percentage position of the slider
        var calcOffset = function (dimensionPct) {
            let width = Math.ceil(beforeImage[0].getBoundingClientRect().width);
            let height = Math.ceil(beforeImage[0].getBoundingClientRect().height);
            return {
                mh: Math.floor(beforeImage[0].getBoundingClientRect().height),
                w: width + "px",
                h: height + "px",
                cw: Math.ceil(dimensionPct * width) + "px",
                ch: Math.ceil(dimensionPct * height) + "px"
            };            
        };

        //Apply the image offset to both images and the total height to the slider
        function adjustInnerWrapper(offset) {
            if (options.direction === 'vertical') {
                beforeImage.css("clip", `rect(0, ${offset.w}, ${offset.ch}, 0)`);
                afterImage.css("clip", `rect(${offset.ch}, ${offset.w}, ${offset.h}, 0)`);

                beforeLabel.css("clip", `rect(0, ${offset.w}, ${offset.ch}, 0)`);
                afterLabel.css("clip", `rect(${offset.ch}, ${offset.w}, ${offset.h}, 0)`);
            } else {
                beforeImage.css("clip", `rect(0, ${offset.cw}, ${offset.h}, 0)`);
                afterImage.css("clip", `rect(0, ${offset.w}, ${offset.h}, ${offset.cw})`);

                beforeLabel.css("clip", `rect(0, ${offset.cw}, ${offset.h}, 0)`);
                afterLabel.css("clip", `rect(0, ${offset.w}, ${offset.h}, ${offset.cw})`);
            }

            innerWrapper.css("height", offset.h);
        };

        function adjustSlider(pct) {
            const offset = calcOffset(pct);

            if (options.direction === "vertical") {
                slider.css("top", offset.ch);
            } else {
                slider.css("left", offset.cw);
            }

            adjustInnerWrapper(offset);
        };

        // Return the number specified or the min/max number if its outside the range given.
        var minMaxNumber = function (num, min, max) {
            return Math.max(min, Math.min(max, num));
        };

        // Calculate the slider percentage based on the position.
        var getSliderPercentage = function (positionX, positionY) {
            var sliderPercentage = (options.direction === 'vertical') ?
                (positionY - offsetY) / imgHeight :
                (positionX - offsetX) / imgWidth;

            return minMaxNumber(sliderPercentage, 0, 1);
        };

        var offsetX = 0;
        var offsetY = 0;
        var imgWidth = 0;
        var imgHeight = 0;
        var onMoveStart = function (e) {
            if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && options.direction !== 'vertical') {
                e.preventDefault();
            }
            else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && options.direction === 'vertical') {
                e.preventDefault();
            }
            container.addClass("active");
            offsetX = container.offset().left;
            offsetY = container.offset().top;
            imgWidth = beforeImage.width();
            imgHeight = beforeImage.height();
        };
        var onMove = function (e) {
            if (container.hasClass("active")) {
                sliderPct = getSliderPercentage(e.pageX, e.pageY);
                adjustSlider(sliderPct);
            }
        };
        var onMoveEnd = function () {
            container.removeClass("active");
        };

        var moveTarget = options.move_with_handle_only ? slider : container;
        moveTarget.on("movestart", onMoveStart);
        moveTarget.on("move", onMove);
        moveTarget.on("moveend", onMoveEnd);

        if (options.move_slider_on_hover) {
            container.on("mouseenter", onMoveStart);
            container.on("mousemove", onMove);
            container.on("mouseleave", onMoveEnd);
        }

        slider.on("touchmove", function (e) {
            e.preventDefault();
        });

        container.find("img").on("mousedown", function (event) {
            event.preventDefault();
        });

        if (options.click_to_move) {
            container.on('click', function (e) {
                offsetX = container.offset().left;
                offsetY = container.offset().top;
                imgWidth = beforeImage.width();
                imgHeight = beforeImage.height();

                sliderPct = getSliderPercentage(e.pageX, e.pageY);
                adjustSlider(sliderPct);
            });
        }

        // $(window).on("resize.dipi_before_after_slider", function () {
        //     adjustSlider(sliderPct);
        // });

        // $(window).trigger("resize.dipi_before_after_slider");

        //Adjust slider for the first time
        adjustSlider(sliderPct);

        $(window).on("resize", function(){
            adjustSlider(sliderPct);
        });
    };

    $(window).load(function () {
        $('.dipi_before_after_slider').each(function () {
            let $wrapper = $(this).find(".dipi_before_after_slider_container");
            $wrapper.dipi_before_after_slider();
        });
    });

    $('.dipi_testimonial').each( function(index, value) {
        let $this = $(this);
        var data = value.querySelector('.dipi-testimonial-main').dataset;
        let selector = "." + $this.attr('class').split(' ').join('.') + " .swiper-container";

        var navigation = "on" === data.navigation && {
            nextEl: ".dipi_testimonial .dipi-button-next-" + data.ordernumber,
            prevEl: ".dipi_testimonial .dipi-button-prev-" + data.ordernumber
        };
        var dynamicbullets = ( 'on' == data.dynamicbullets ) ? true : false;
        var pagination = "on" === data.pagination && {
            el: ".dipi_testimonial .dipi-pagination-" + data.ordernumber,
            clickable: true,
            dynamicBullets: dynamicbullets,
            dynamicMainBullets: 1
        };

        var cfe = {
            rotate: Number(parseInt(data.rotate)),
            stretch: 5,
            depth: 100,
            modifier: 1,
            slideShadows: true,
        };

        var mySwiper = new Swiper( selector, {
            slidesPerView: Number(data.columnsphone),
            spaceBetween: Number(data.spacebetween_phone),
            speed: Number( data.speed ),
            loop: "on" === data.loop,
            autoplay: "on" === data.autoplay && {
                delay: data.autoplayspeed
            },
            effect: data.effect,
            coverflowEffect: "coverflow" === data.effect ? cfe : null,
            navigation: navigation,
            pagination: pagination,
            centeredSlides: "on" === data.centered,
            slideClass: "dipi-testimonial-item",
            wrapperClass: "dipi-testimonial-wrapper",
            setWrapperSize: true,
            observer: true, 
            observeParents: true,
            breakpoints: {

                768: {
                    slidesPerView: Number(data.columnstablet),
                    spaceBetween: Number(data.spacebetween_tablet) > 0 ? Number(data.spacebetween_tablet) : Number(0),
                },

                981: {
                    slidesPerView: Number(data.columnsdesktop),
                    spaceBetween: Number(data.spacebetween) > 0 ? Number(data.spacebetween) : Number(0),
                }

            }
        });

        if ( 'on' === data.pauseonhover && 'on' === data.autoplay ) {
            
            $this.find('.swiper-container').on('mouseenter', function(e){
                mySwiper.autoplay.stop();
            });

            $this.find('.swiper-container').on('mouseleave', function(e){
                mySwiper.autoplay.start();
            });
        }
    });

    $('.dipi-open-popup-link').magnificPopup({
        type:'inline',
        mainClass: 'mfp-fade',
        removalDelay: 300,
        closeOnContentClick: true,
        midClick: true ,
        callbacks: {
            open: function(){
                $('body').addClass('dipi-testimonial-review-popup-open');
            },
            close: function(){
                $('body').removeClass('dipi-testimonial-review-popup-open');
            }
        }
    });

    // Carsousel
    $('.dipi_carousel').each( function(index, value) {
        let $this = $(this);
        var data = value.querySelector('.dipi-carousel-main').dataset;
        let selector = "." + $this.attr('class').split(' ').join('.') + " .swiper-container";
console.log("Carousel Data", data);
        var navigation = "on" === data.navigation && {
          nextEl: ".dipi_carousel .dipi-sbn" + data.ordernumber,
          prevEl: ".dipi_carousel .dipi-sbp" + data.ordernumber
        };
        
        var dynamicbullets = ( 'on' == data.dynamicbullets ) ? true : false;
        var pagination = "on" === data.pagination && {
          el: ".dipi_carousel .dipi-sp" + data.ordernumber,
          clickable: true,
          dynamicBullets: dynamicbullets,
          dynamicMainBullets: 1
        };

        var cfe = {
          rotate: Number( parseInt( data.rotate )),
          stretch: 5,
          depth: 100,
          modifier: 1,
          slideShadows: data.shadow,
        };


        let mySwiper = new Swiper(selector, {
            slidesPerView: Number(data.columnsphone),
            spaceBetween: Number(data.spacebetween_phone),
            speed: Number( data.speed ),
            loop: "on" === data.loop,
            // grabCursor: true,
            autoplay: "on" === data.autoplay && {
                delay: data.autoplayspeed
            },
            effect: data.effect,
            coverflowEffect: "coverflow" === data.effect ? cfe : null,
            navigation: navigation,
            pagination: pagination,
            centeredSlides: "on" === data.centered,
            slideClass: "dipi_carousel_child",
            wrapperClass: "dipi-carousel-wrapper",
            setWrapperSize: true,
            observer: true,
            observeParents: true,
            observeSlideChildren: true,
            breakpoints: {
                768: {
                    slidesPerView: Number(data.columnstablet),
                    spaceBetween: Number(data.spacebetween_tablet) > 0 ? Number(data.spacebetween_tablet) : Number(0),
                },
                981: {
                    slidesPerView: Number(data.columnsdesktop),
                    spaceBetween: Number(data.spacebetween) > 0 ? Number(data.spacebetween) : Number(0),
                }
            }
        });
        
        if ('on' === data.pauseonhover && 'on' === data.autoplay){
            $this.find('.swiper-container').on('mouseenter', function(e){
                mySwiper.autoplay.stop();
            });

            $this.find('.swiper-container').on('mouseleave', function(e){
                mySwiper.autoplay.start();
            });
        }
    });


    // Blog Slider
    $('.dipi_blog_slider').each( function(index, value) {
        let $this = $(this);
        var data = value.querySelector('.dipi-blog-slider-main').dataset;
        let selector = "." + $this.attr('class').split(' ').join('.') + " .swiper-container";
console.log("Blog Data", data);
        var navigation = "on" === data.navigation && {
          nextEl: ".dipi_blog_slider .dipi-sbn" + data.ordernumber,
          prevEl: ".dipi_blog_slider .dipi-sbp" + data.ordernumber
        };
        
        var dynamicbullets = ( 'on' == data.dynamicbullets ) ? true : false;
        var pagination = "on" === data.pagination && {
          el: ".dipi_blog_slider .dipi-sp" + data.ordernumber,
          clickable: true,
          dynamicBullets: dynamicbullets,
          dynamicMainBullets: 1
        };

        var cfe = {
          rotate: Number( parseInt( data.rotate )),
          stretch: 5,
          depth: 100,
          modifier: 1,
          slideShadows: data.shadow,
        };

        var mySwiper = new Swiper(selector, {
            slidesPerView: Number(data.columnsmobile),
            spaceBetween: Number(data.spacebetween_phone),
            speed: Number( data.speed ),
            loop: "on" === data.loop,
            autoplay: "on" === data.autoplay && {
                delay: data.autoplayspeed
            },
            effect: data.effect,
            coverflowEffect: "coverflow" === data.effect ? cfe : null,
            navigation: navigation,
            pagination: pagination,
            centeredSlides: "on" === data.centered,
            slideClass: "dipi-blog-post",
            wrapperClass: "dipi-blog-slider-wrapper",
            setWrapperSize: true,
            observer: true,
            observeParents: true,
            observeSlideChildren: true,
            breakpoints: {
                768: {
                    slidesPerView: Number(data.columnstablet),
                    spaceBetween: Number(data.spacebetween_tablet) > 0 ? Number(data.spacebetween_tablet) : Number(0),
                },
                981: {
                    slidesPerView: Number(data.columnsdesktop),
                    spaceBetween: Number(data.spacebetween) > 0 ? Number(data.spacebetween) : Number(0),
                }
            }
        });

        if ('on' === data.pauseonhover && 'on' === data.autoplay){
            $this.find('.swiper-container').on('mouseenter', function(e){
                mySwiper.autoplay.stop();
            });

            $this.find('.swiper-container').on('mouseleave', function(e){
                mySwiper.autoplay.start();
            });
        }

        $this.find(".preloading").removeClass("preloading");
    });

});