// Here will be custom scripts

$(document).on('mouseenter', '.header .logo', changeLogoColor)

function changeLogoColor(event, customColor = false) {
  let filledPart = $('.header .logo .filled-part');
  let currColor = filledPart.attr('fill');
  let allColor = filledPart.attr("data-change-color").split(',');
  let nextIndex = allColor.indexOf(currColor) + 1 < allColor.length ? allColor.indexOf(currColor) + 1 : 0;

  let nextColor = customColor ? customColor : allColor[nextIndex];

  filledPart.attr('fill', nextColor);
}

// Open menu

$(document).on('click', '.menu-opener', function(event) {
  if (!isPc) {
    let currentText = $(this).find('.text').html();
    let newText = $(this).attr('data-change-text');

    $('.menu-opener').find('.text').text(newText);
    $('.menu-opener').attr('data-change-text', currentText);
    lazyload('.header');
  }

  if ($('.header-hidden-menu').hasClass("-active")) {
    unlockScroll();
  } else {
    lockScroll();
  }
  $('.menu-opener').toggleClass('-active');
  $('.header-hidden-menu').toggleClass('-active');
  $('.header').toggleClass('-mobile-menu-active');
  changeLogoColor(event, '#00D180');

})

$(document).on('mouseenter', '.header', function() {
  lazyload('.header');
})

// hide header when scroll down

let lastScroll = 0;
$(window).on("scroll", function() {
  let header = $(".header");
  let scrollTop = Math.floor($(window).scrollTop());
  lastScroll = Math.ceil(lastScroll);

  if (scrollTop >= lastScroll) {
    if (scrollTop - lastScroll === scrollTop || scrollTop <= 0) {} else {
      header.addClass("-hide");
    }
  } else {
    header.removeClass("-hide");
  }

  lastScroll = scrollTop;
});

// Create scrollbar for elements

function createCustomScrollbar() {
  // let overlayContainer = $('.header-hidden-menu__bottom');
  // if (overlayContainer.length) {

  //   overlayContainer.each(function() {
  //     $(this).overlayScrollbars({
  //       className: "os-theme-dark",

  //       scrollbars: {
  //         clickScrolling: true,
  //       },
  //     });
  //   })
  // }

  let pcOverlayContainers = $('.code-example__item-inner, .code-example__menu, .header-hidden-menu__bottom');

  if (pcOverlayContainers.length && isPc) {
    pcOverlayContainers.each(function() {
      $(this).overlayScrollbars({
        className: "os-theme-dark",
        scrollbars: {
          clickScrolling: true,
        },
      });
    })
  }
}

$(window).on('load', createCustomScrollbar);

// Close banner

$(document).on('click', '.rebrand-banner .close', function() {
  $('body').removeClass('-has-banner');
  $(this).closest('.rebrand-banner').remove();
})


// carousel-slider

function initCarouselSlider(container) {
  let sliderContainer = $(container);
  let SliderEl = sliderContainer.find('.slider');

  if (isPc) {
    let swiperSlides = sliderContainer.find('.swiper-wrapper').html();
    let paginationCount = sliderContainer.find('.swiper-wrapper .swiper-slide').length;
    sliderContainer.find('.swiper-wrapper').append(swiperSlides);
    for (i = 0; i < paginationCount; i++) {
      sliderContainer.find('.swiper-pagination').append(`
      <span class="swiper-pagination-bullet"></span>
      `)
    }
  }

  let calculatedSliderOptions = {
    rotate: 30,
    stretch: 50,
    depth: 100,
  };
  // if (window.innerWidth > 2500) {
  //   calculatedSliderOptions = {
  //     rotate: 20,
  //     stretch: 40,
  //     depth: 80,
  //   }
  // }

  if (window.innerWidth > 5000) {
    calculatedSliderOptions = {
      rotate: 15,
      stretch: 80,
      depth: 100,
    }
  }

  calculatedSliderOptions.stretch = ((calculatedSliderOptions.stretch / 1457) * 100) * (window.innerWidth / 100);
  calculatedSliderOptions.depth = ((calculatedSliderOptions.depth / 1457) * 100) * (window.innerWidth / 100);

  let slider = new Swiper(SliderEl[0], {
    loop: true,
    speed: 400,
    // initialSlide: 0,
    centeredSlides: true,
    slidesPerView: 'auto',
    effect: 'coverflow',
    spaceBetween: 16,
    pagination: {
      el: sliderContainer.find('.swiper-pagination')[0],
      type: 'bullets',
      clickable: true,
    },
    coverflowEffect: {
      rotate: 45,
      opacity: 0,
      stretch: 35, //35
      depth: 0,
      modifier: 1,
      slideShadows: false,
    },
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
      pauseOnMouseEnter: false,
      waitForTransition: false,
    },
    breakpoints: {
      1024: {        
        slidesPerView: 'auto',
        spaceBetween: 0,
        pagination: false,
        coverflowEffect: {
          rotate: calculatedSliderOptions.rotate,
          opacity: 0,
          stretch: calculatedSliderOptions.stretch, //50
          depth: calculatedSliderOptions.depth, //100
          modifier: 1,
          slideShadows: false,
        },
      },
      760: {
        slidesPerView: 2,
      }
    },
    on: {
      activeIndexChange: function(swiper) {
        let currentActiveIndex = sliderContainer.find('.swiper-slide').eq(swiper.activeIndex).attr('data-pagination-index');
        sliderContainer.find('.custom-pagination .swiper-pagination-bullet-active').removeClass('swiper-pagination-bullet-active');
        sliderContainer.find('.custom-pagination').find('.swiper-pagination-bullet').eq(currentActiveIndex).addClass('swiper-pagination-bullet-active');
      },
    },
  });

  $(document).on('click', '.carousel-slider .swiper-pagination-bullet', function() {
    let index = $(this).index();
    slider.slideToLoop(index);
  })
}

$(window).on('load', function() {
  if (!$('.carousel-slider').length) return;

  const useCasesObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      initCarouselSlider(entries[0].target)
      useCasesObserver.unobserve(entries[0].target);
    }
  }, {
    rootMargin: "100px",
    threshold: 0,
  });


  $('.carousel-slider').each(function() {
    useCasesObserver.observe(this);
  })
});



/* reviews slider */

function initReviewsSlider(container) {
  let sliderContainer = $(container);
  let SliderEl = sliderContainer.find('.slider');
  let slider = new Swiper(SliderEl[0], {
    loop: true,
    speed: 700,
    centeredSlides: true,
    slidesPerView: 1,
    spaceBetween: 20,
    pagination: {
      el: sliderContainer.find('.swiper-pagination')[0],
      type: 'bullets',
      clickable: true,
    },
    navigation: {
      prevEl: sliderContainer.find('.swiper-navigation .prev')[0],
      nextEl: sliderContainer.find('.swiper-navigation .next')[0],
    },
    slideToClickedSlide: true,
    autoplay: {
      delay: 10000,
      disableOnInteraction: false,
      pauseOnMouseEnter: false,
      waitForTransition: false,
    },
    effect: 'coverflow',
    coverflowEffect: {
      rotate: 0,
      stretch: 0,
      depth: 0,
      modifier: 1,
      scale: 1,
      slideShadows: false,
    },
    breakpoints: {
      1024: {
        spaceBetween: 16,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 0,
          stretch: `10.5%`,
          depth: 0,
          modifier: 1,
          scale: 0.8,
          slideShadows: false,
        },
      },
      760: {
        slidesPerView: 2,
      }
    }
  });
}

$(window).on('load', function() {
  if (!$('.reviews-slider').length) return;

  const useCasesObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      initReviewsSlider(entries[0].target)
      useCasesObserver.unobserve(entries[0].target);
    }
  }, {
    rootMargin: "100px",
    threshold: 0,
  });


  $('.reviews-slider').each(function() {
    useCasesObserver.observe(this);
  })
});


/* mobile slider */

function initMobileSlider(container) {
  let sliderContainer = $(container);
  let SliderEl = sliderContainer.find('.slider');
  let slider = new Swiper(SliderEl[0], {
    loop: true,
    speed: 700,
    slidesPerView: 1,
    spaceBetween: 20,
    pagination: {
      el: sliderContainer.find('.swiper-pagination')[0],
      type: 'bullets',
      clickable: true,
    },
    autoHeight: true,
  });
}

$(window).on('load', function() {
  if (!$('.mobile-slider').length || isPc) return;

  const useCasesObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      initMobileSlider(entries[0].target)
      useCasesObserver.unobserve(entries[0].target);
    }
  }, {
    rootMargin: "100px",
    threshold: 0,
  });


  $('.mobile-slider').each(function() {
    useCasesObserver.observe(this);
  })
});


// showreel functionality
const showreelVideoContainer = $('#showreel');
let vimeoPlayingStatus = false;

$(window).on('load', function() {



  if (!$('.pinned-video').length) return;
  const pinVideoObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      animatePinnedVideoSection();
      createVimeoVideo();
      pinVideoObserver.unobserve(entries[0].target);
    }
  }, {
    rootMargin: "100px",
    threshold: 0,
  });


  $('.pinned-video').each(function() {
    pinVideoObserver.observe(this);
  })
})

function createVimeoVideo() {
  $(document).on('click', '.video-toolbar .play', function() {
    toggleVideoPlayStatus();
  })

  $(document).on('click', '.video-toolbar .mute', function() {
    toggleVideoMuteStatus();
  })


  function toggleVideoPlayStatus() {
    if (vimeoPlayingStatus) {
      vimeoPlayer.pause();
    } else {
      vimeoPlayer.play();
    }
  }

  function updateVideoProgressbar(percent) {
    const progressbar = showreelVideoContainer.closest('.pinned-video__inner').find('.progressbarLine');
    const length = progressbar[0].getTotalLength();
    const offset = length * (1 - percent);
    progressbar.css({
      'stroke-dasharray': length,
      'stroke-dashoffset': offset
    });
  }

  function toggleVideoMuteStatus() {
    const muteButton = showreelVideoContainer.closest('.pinned-video__inner').find('.mute');
    vimeoPlayer.getMuted().then(function(muted) {
      if (muted) {
        vimeoPlayer.setMuted(false);
        muteButton.removeClass('-muted');
      } else {
        vimeoPlayer.setMuted(true);
        muteButton.addClass('-muted');
      }
    }).catch(function(error) {});

  }

  function totalResetVideo() {
    const videoContainer = showreelVideoContainer.closest('.pinned-video__inner');
    vimeoPlayer.pause();
    videoContainer.find('.-running').removeClass('-running');
    videoContainer.find('.-muted').removeClass('-muted');
    videoContainer.removeClass('-show-toolbar').removeClass('-show-button');
  }

  const vimeoPlayer = new Vimeo.Player('showreel', {
    id: 927726354,
    controls: false,
    muted: false,
    title: false,
    height: '100%',
    autoplay: false,
    // responsive: true,
  });

  vimeoPlayer.on('play', function() {
    vimeoPlayingStatus = true;
    showreelVideoContainer.closest('.pinned-video__inner').find('.video-toolbar .play').addClass('-running');
    showreelVideoContainer.closest('.pinned-video__inner').removeClass('-video-ended');
  });

  vimeoPlayer.on('timeupdate', function(params) {
    updateVideoProgressbar(params.percent)
    if (params.seconds >= params.duration - 0.5) {
      showreelVideoContainer.closest('.pinned-video__inner').addClass('-video-ended');
    }
  });

  vimeoPlayer.on('pause', function() {
    vimeoPlayingStatus = false;
    showreelVideoContainer.closest('.pinned-video__inner').find('.video-toolbar .play').removeClass('-running');
  })

  vimeoPlayer.on('ended', function() {
    vimeoPlayingStatus = false;
    showreelVideoContainer.closest('.pinned-video__inner').find('.video-toolbar .play').removeClass('-running');
    // showreelVideoContainer.closest('.pinned-video__inner').removeClass('-show-toolbar');
    // showreelVideoContainer.closest('.pinned-video__inner').addClass('-show-button');
    showreelVideoContainer.closest('.pinned-video__inner').addClass('-video-ended');
    updateVideoProgressbar(0)
  })

  $(document).on('click', '.play-button', function() {
    toggleVideoPlayStatus();
    $(this).closest('.pinned-video__inner').addClass('-show-toolbar');
    $(this).closest('.pinned-video__inner').removeClass('-show-button');
  })
}

// Copy link

$(".copy-button").on("click", function() {
  var copyText = $(this).attr('data-copy');
  if (!copyText && $(this).closest('.code-example__item').length) {
    var codeElement = $(this).closest('.code-example__item').find('.code-for-copy code');
    var codeLines = codeElement.map(function() {
      return $(this).text();
    }).get();
    copyText = codeLines.join('\n');
  }
  var copyInput = $('<textarea id="copyInput"></textarea>').val(copyText);
  $(this).addClass("-active");
  $('body').append(copyInput);

  var copyInputDOM = document.getElementById('copyInput');
  copyInputDOM.select();
  document.execCommand('copy');

  setTimeout(() => {
    $(this).removeClass("-active");
    copyInputDOM.remove();
  }, 1500);
});

• [D] lib
• [F] animations.js
  Delete
• [F] custom-solutions.js
  Delete
• [F] script.js
  Delete
• [F] test.js
  Delete