$(function () {
  var $window = $(window)
  var windowTop = $window.scrollTop()
  var windowWidth = window.innerWidth
  var $jsInfoSlick = $('.js-info-slick')
  gsap.to('.js-pin', {
    scrollTrigger: {
      trigger: '.js-pin',
      start: 'top 50',
      end: 'bottom top',
      pin: '.js-pin',
      pinSpacing: false,
      anticipatePin: 1,
      // markers: true,
    }
  })
  var amount
  if (windowWidth > 850) {
    amount = (windowWidth / 2) - 475
  } else {
    amount = 50
  }
  $window.on('resize', function () {
    windowWidth = window.innerWidth
    if (windowWidth > 850) {
      amount = (windowWidth / 2) - 475
    } else {
      amount = 50
    }

  })
  gsap.to('.js-mask-left', {
    x: -amount,
    scrollTrigger: {
      trigger: '.js-pin',
      start: 'top center',
      end: 'bottom center',
      scrub: 0.5,
      // anticipatePin: 1,
      // markers: true,
    }
  })
  gsap.to('.js-mask-right', {
    x: amount,
    scrollTrigger: {
      trigger: '.js-pin',
      start: 'top center',
      end: 'bottom center',
      scrub: 0.5,
      // anticipatePin: 1,
      // markers: true,
    }
  })
  $jsInfoSlick.slick({
    slidesToShow: 3,
    infinite: false,
    prevArrow: '<div class="slide-arrow prev-arrow">',
    nextArrow: '<div class="slide-arrow next-arrow">',
    responsive: [{
      breakpoint: 850,
      settings: {
        // infinite: true,
        centerMode: true,
        touchThreshold: 20,
        slidesToShow: 0.9,
      }
    }]
  })
})