$(() => {
  const box = $('.scroll-case');

  if (box.length === 0) return false;

  const scrollHandler = () => {
    scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    tracking = scrollTop - carouselOffsetTop;
    process = tracking / slideHeight;
    if (process >= 3) tracking = slideHeight * 3;

    if (tracking >= 0 && scrollTop < carouselOffsetBtm) {
      box.addClass('is-fixed').removeClass('at-bottom');
    } else if (scrollTop >= carouselOffsetBtm) {
      box.addClass('at-bottom').removeClass('is-fixed');
    } else {
      box.removeClass('is-fixed at-bottom');
    }

    box.find('.con-box.on .case-image .item').each(function (videoIndex, videoItem) {
      var transformPercentage = tracking / slideHeight - videoIndex;
      $(videoItem).css('transform', 'translateY(' + -transformPercentage * 100 + '%)');

      if (0 <= transformPercentage && transformPercentage < 0.5) {
        $('.con-box.on .case-text .item:not(:nth-child(' + (videoIndex + 1) + '))').hide();
        $($('.con-box.on .case-text').children().get(videoIndex)).show();
      } else if (transformPercentage >= 0.5 && transformPercentage <= 1) {
        $('.con-box.on .case-text .item:not(:nth-child(' + (videoIndex + 2) + '))').hide();
        $($('.con-box.on .case-text').children().get(videoIndex + 1)).show();
      }
    });
  }

  const isMobile = () => {
    const slider = box.find('.case-slider .case-slide');
    const images = box.find('.case-image .item');

    images.addClass('animated fadeIn');

    slider.each((index, val) => {
      slider.eq(index).append(images.eq(index));
    })
  }

  const tabs = $('.case2 .tabs .tab');
  const cons = $('.case2 .cons .con-box');

  tabs.eq(0).addClass('on');
  cons.eq(0).show().addClass('on').siblings().hide().removeClass('on');

  var scrollTop,
    tracking,
    process,
    carouselOffsetTop = box.offset().top,
    carouselOffsetBtm = carouselOffsetTop + box.height() - window.innerHeight,
    slideHeight = $('.case-text').height();

  tabs.click(function () {
    const el = $(this);
    const index = el.index();

    el.addClass('on').siblings().removeClass('on');
    cons.eq(index).show().addClass('on').siblings().hide().removeClass('on');
    scrollHandler();
  })



  if ($(window).width() > 980) {

    scrollHandler();

    $(window).on('scroll', scrollHandler);
  } else {
    box.addClass('is-mobile');
    isMobile();
  }

  $(window).resize(function () {
    if ($(window).width() > 980) {
      scrollHandler();
    }
  });

})