$(window).on('load', function () {
  new WOW().init();
});
$('.ctn1,.ctn2,.ctn3,.ctn4').height($(window).height())
var ctn1_h = $('.ctn1').height()
$(window).scroll(function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop
    < ctn1_h) {
    $('.ctn2 .txt p').css('transform', 'scale(' + scrollTop / ctn1_h + ')')
  }
  var ctn4_t = $('.ctn3').offset().top + $('.ctn3').height()
  //console.log(ctn4_t,scrollTop)
  if (ctn4_t - scrollTop
    < 200) {
    $('.ctn4 .txt p,.ctn4 .txt .more,.ctn4 .txt span,.ctn4 .txt i').addClass('on')
  } else {
    $('.ctn4 .txt p,.ctn4 .txt .more,.ctn4 .txt span,.ctn4 .txt i').removeClass('on')
  }
})
var Timeline = new TimelineMax();
Timeline.fromTo(".ctn2 .txt p", 3, { 'font-size': '120px' }, { 'font-size': '1200px' })
  .addCallback(videopause)
  .fromTo(".ctn2 .txt", .5, { opacity: 1 }, { opacity: 0, onComplete: videoplay })
  .to(".ctn2 .txt p", .5, { 'font-size': '1400px' }, 3)
  .to(".ctn2 .txt", 2.5, { opacity: 0 })
  .addCallback(videotxtRemove)
  .addCallback(videotxtAdd)
  .to(".ctn2 .videotxt", 3, { opacity: 1 })
function videoplay() {
  $('.video video')[0].currentTime = 10.5
  $('.video video')[0].play()
}
function videopause() {
  $('.video video')[0].currentTime = 10.5
  $('.video video')[0].pause()
}
function videotxtAdd() {
  $('.videotxt .p1,.videotxt .p2,.videotxt .p3').addClass('on')
}
function videotxtRemove() {
  $('.videotxt .p1,.videotxt .p2,.videotxt .p3').removeClass('on')
}
let controller = new ScrollMagic.Controller();
let f_scene = new ScrollMagic.Scene({
  triggerElement: ".ctn2",
  duration: "2500px",//滚动高度
  triggerHook: 0,
})
  .setPin(".ctn2", {//需要固定的dom
    pushFollowers: true/*该属性可以用来设置是否看到运动的区域*/
  })
  .setTween(Timeline)//动画绑定到滚动条
  //.addIndicators() //查看debug
  .addTo(controller)
var sw_ctn4 = new Swiper('.sw_ctn4', {
  loop: true,
  speed: 2000,
  fadeEffect: {
    crossFade: true,
  },
  navigation: {
    nextEl: '.sw_ctn4 .swiper-button-next',
    prevEl: '.sw_ctn4 .swiper-button-prev',
  },
  on: {
    slideChangeTransitionStart: function () {
      $('.ctn4 .sw_ctn4 .txt p,.ctn4 .sw_ctn4 .txt span,.ctn4 .sw_ctn4 .txt i,.ctn4 .sw_ctn4 .txt .more').removeClass('on')
      setTimeout(() => {
        $('.ctn4 .sw_ctn4 .txt p,.ctn4 .sw_ctn4 .txt span,.ctn4 .sw_ctn4 .txt i,.ctn4 .sw_ctn4 .txt .more').addClass('on')
      }, 500);
    }
  }
});
$('.ctn5 .txt_l .tab p').on('click', function () {
  var idx = $(this).index()
  $('.ctn5 .txt_l .tab p').eq(idx).addClass('on').siblings().removeClass('on')
  $('.ctn5 .txt_l .ctn .des').eq(idx).addClass('on').siblings().removeClass('on')
  $('.ctn5 .txt_l .ctn .des').eq(idx).fadeIn().siblings().fadeOut()
})
$('#modelBorderContainer').on('click', function () {
  $('#modelBorderContainer .s_tips').hide()
})