/* ===================================================================
    Author          : ModinaTheme
    Version         : 1.0
* ================================================================= */

(function($) {
  "use strict";

  $(document).ready( function() {

    //>> Mobile Menu Js Start <<//
    $('#mobile-menu').meanmenu({
        meanMenuContainer: '.mobile-menu',
        meanScreenWidth: "991",
        meanExpand: ['<i class="far fa-plus"></i>'],
    });

    //>> Sidebar Toggle Js Start <<//
    $(".offcanvas__close,.offcanvas__overlay").on("click", function() {
        $(".offcanvas__info").removeClass("info-open");
        $(".offcanvas__overlay").removeClass("overlay-open");
    });
    $(".sidebar__toggle").on("click", function() {
        $(".offcanvas__info").addClass("info-open");
        $(".offcanvas__overlay").addClass("overlay-open");
    });

    //>> Body Overlay Js Start <<//
    $(".body-overlay").on("click", function() {
        $(".offcanvas__area").removeClass("offcanvas-opened");
        $(".df-search-area").removeClass("opened");;
        $(".body-overlay").removeClass("opened");
    });

    //>> Sticky Header Js Start <<//

    $(window).scroll(function() {
        if ($(this).scrollTop() > 250) {
            $("#header-sticky").addClass("sticky");
        } else {
            $("#header-sticky").removeClass("sticky");
        }
    });

    // Init slick slider + animation

    //>> Video Popup Start <<//
    $(".img-popup").magnificPopup({
        type: "image",
        gallery: {
            enabled: true,
        },
    });

    $('.video-popup').magnificPopup({
        type: 'iframe',
        callbacks: {
        }
    });
    
    //>> Counterup Start <<//
    $(".count").counterUp({
        delay: 15,
        time: 4000,
    });

    //>> Wow Animation Start <<//
    new WOW().init();

    //>> Nice Select Start <<//
    $('select').niceSelect();

    //>>Background image Start <<//
      $("[data-background").each(function () {
        $(this).css(
            "background-image",
            "url( " + $(this).attr("data-background") + "  )"
        );
    });

    //>>Image Class Add Start <<//
    $(document).on("mouseenter", ".changeImage2", function () {
        let newImage = $(this).data("image");
        let fadeDuration = 200;

        $("#myImage2").fadeOut(fadeDuration, function () {
            $("#myImage2").attr("src", newImage);
            $("#myImage2").fadeIn(fadeDuration);
        });

        $(this).addClass("clicked");
        $(".changeImage2").not(this).removeClass("clicked");
    });

    //>> Search Popup Start <<//
    const $searchWrap = $(".search-wrap");
    const $navSearch = $(".nav-search");
    const $searchClose = $("#search-close");

    $(".search-trigger").on("click", function (e) {
        e.preventDefault();
        $searchWrap.animate({ opacity: "toggle" }, 500);
        $navSearch.add($searchClose).addClass("open");
    });

    $(".search-close").on("click", function (e) {
        e.preventDefault();
        $searchWrap.animate({ opacity: "toggle" }, 500);
        $navSearch.add($searchClose).removeClass("open");
    });

    function closeSearch() {
        $searchWrap.fadeOut(200);
        $navSearch.add($searchClose).removeClass("open");
    }

    $(document.body).on("click", function (e) {
        closeSearch();
    });

    $(".search-trigger, .main-search-input").on("click", function (e) {
        e.stopPropagation();
    });

     // circle-progress
     $(".circle-bar").loading();


  }); // End Document Ready Function

   // Progressbar Start
   $.fn.loading = function() {
    const DEFAULTS = {
        backgroundColor: '#b3cef6',
        progressColor: '#4b86db',
        percent: 75,
        duration: 2000
    };

    $(this).each(function() {
        let $target = $(this);

        const opts = {
            backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
            progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
            percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
            duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
        };
        // console.log(opts);

        $target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');

        $target.find('.background').css('background-color', opts.backgroundColor);
        $target.find('.left').css('background-color', opts.backgroundColor);
        $target.find('.rotate').css('background-color', opts.progressColor);
        $target.find('.right').css('background-color', opts.progressColor);

        const $rotate = $target.find('.rotate');
        setTimeout(function() {
            $rotate.css({
                'transition': 'transform ' + opts.duration + 'ms linear',
                'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
            });
        }, 1);

        if (opts.percent > 50) {
            let animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
            let animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
            $target.find('.right').css({
                animation: animationRight,
                opacity: 1
            });
            $target.find('.left').css({
                animation: animationLeft,
                opacity: 0
            });
        }
    });
}

  function loader() {
    $(window).on('load', function() {
        // Animate loader off screen
        $(".preloader").addClass('loaded');
        $(".preloader").delay(600).fadeOut();
    });
  }
  loader();
      

})(jQuery); // End jQuery