var timeId1 = null,timeId2 = null,timeId3 = null,value1 = 0,value2 = 0,value3 = 0;

// 点击导航跳转对应产品类
function navPosition(el){
  if($(el).length > 0){
    var offsetTop = $(el).offset().top;
    $('html,body').animate({
      'scrollTop' : offsetTop
    },0);
  }
}

// 元素能看到
/* function visualAnimation(el,className){
  if($(el).length > 0){
    var offsetTop = $(el).offset().top;
    if(offsetTop >= $(window).scrollTop() && offsetTop < ($(window).scrollTop() + $(window).height())){
      $(el).addClass(className);
    }
  }
} */

// 主图动画
function mainPictureAnimation(parentEl,textEl,imgEL,imgMinWidth,imgWidth,vertical,offsetYValue,level,offsetXValue,startYValue,startXValue,end){
  if($(parentEl).length > 0){
    var scrolled = ($(window).scrollTop() - $(parentEl).offset().top) / ($(parentEl).height() - $(window).height());
  }

  if(scrolled < 0){scrolled = 0;}
  if(scrolled > 1){scrolled = 1;}

  // console.log(scrolled);

  let $theChip = document.querySelector('#the-chip');
  let $A13TextBg = document.querySelector('#the-chip .text-bg');
  $theChip.style.width = $theChip.style.height = document.documentElement.clientWidth * 50 * (scrolled * scrolled * scrolled) + 100 + 'px';

  if (scrolled >= 0.25) {
    $A13TextBg.style.opacity = (0.5 - scrolled) / 0.25
    $theChip.classList.add('transparent');
  } else {
    $A13TextBg.style.opacity = 1
    $theChip.classList.remove('transparent');
  }

  if (scrolled >= 0.5) {
    $theChip.style.opacity = (0.85 - scrolled) / 0.35
  } else {
    $theChip.style.opacity = 1
  }

  if (scrolled >= end) {
    $(textEl).css(vertical,offsetYValue);
    $(textEl).css(level,offsetXValue);
    $(imgEL).css('width',imgWidth);
  }else{
    $(textEl).css(vertical,startYValue);
    $(textEl).css(level,startXValue);
    $(imgEL).css('width',imgMinWidth);
  }

}

// 标题垂直偏移动画
function deviation(h2ParentEl,h2EL,point){
  if($(h2ParentEl).length > 0){
    var H2scrolled = ($(window).scrollTop() - $(h2ParentEl).offset().top + $(window).height()) / $(h2ParentEl).height();
  }
  
  if(H2scrolled < 0){H2scrolled = 0;}
  if(H2scrolled > 1){H2scrolled = 1;}

  // console.log(H2scrolled);

  if(H2scrolled >= point){
    $(h2EL).css({
      'transform' : 'translateY(0)',
      'opacity' : 1
    })
  }else{
    $(h2EL).css({
      'transform' : 'translateY(50px)',
      'opacity' : 0.5,
      'transition' : '.5s'
    })
  }
}

// 图片淡入动画
function fadeInAnimation(h2ParentEl,h2EL,start,end){
  if($(h2ParentEl).length > 0){
    var imgscrolled = ($(window).scrollTop() - $(h2ParentEl).offset().top + $(window).height()) / $(h2ParentEl).height();
  }
  
  if(imgscrolled < 0){imgscrolled = 0;}
  if(imgscrolled > 1){imgscrolled = 1;}

  // console.log(imgscrolled);

  if(imgscrolled >= start && imgscrolled <= end){
    $(h2EL).css({
      'opacity' : (imgscrolled - start) / (end - start)
    })
  }else if(imgscrolled < start){
    $(h2EL).css({
      'opacity' : 0,
      'transition' : '.5s'
    })
  }else{
    $(h2EL).css({
      'opacity' : 1
    })
  }

}

// 图片左右偏移动画
function offsetXAnimation(parentEl,img1EL,img2EL){
  if($(parentEl).length > 0){
    var scrolled2 = ($(window).scrollTop() - $(parentEl).offset().top) / ($(parentEl).height() - $(window).height());
  }

  if(scrolled2 < 0){scrolled2 = 0;}
  if(scrolled2 > 1){scrolled2 = 1;}

  // console.log(scrolled2);

  var num = $(img1EL).innerWidth() + parseInt($(img1EL).css('left')) + ($(window).width() - 980) / 2 - 200;
  if(scrolled2 >= 0.1 && scrolled2 <= 1){
    var offset01 = num * (1 - scrolled2);
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * offset01 + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + offset01 + 'px)'
    });
  }else{
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * num + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + num + 'px)'
    });
  }
}

function offsetXAnimation1(parentEl,img1EL,img2EL,start,end){
  if($(parentEl).length > 0){
    var scrolled2 = ($(window).scrollTop() - $(parentEl).offset().top + $(window).height()) / $(parentEl).height();
  }

  if(scrolled2 < 0){scrolled2 = 0;}
  if(scrolled2 > 1){scrolled2 = 1;}

  // console.log(scrolled2);

  var num = $(img1EL).innerWidth() + parseInt($(img1EL).css('left')) + ($(window).width() - 980) / 2 - 200;
  if(scrolled2 >= start && scrolled2 <= end){
    var offset01 = num * ((1 - scrolled2) / (end - start));
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * offset01 + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + offset01 + 'px)'
    });
  }else{
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * num + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + num + 'px)'
    });
  }
}

function offsetXAnimation2(parentEl,img1EL,img2EL,start,end){
  if($(parentEl).length > 0){
    var scrolled2 = ($(window).scrollTop() - $(parentEl).offset().top + $(window).height()) / $(parentEl).height();
  }

  if(scrolled2 < 0){scrolled2 = 0;}
  if(scrolled2 > 1){scrolled2 = 1;}

  // console.log(scrolled2);

  var num = $(img1EL).innerWidth() + parseInt($(img1EL).css('left')) + $(window).width() / 2 - 200;
  if(scrolled2 >= start && scrolled2 <= end){
    var offset01 = num * ((1 - scrolled2) / (end - start));
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * offset01 + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + offset01 + 'px)'
    });
  }else{
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * num + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + num + 'px)'
    });
  }
}

function offsetXAnimation3(parentEl,img1EL,img2EL,start,end){
  if($(parentEl).length > 0){
    var scrolled2 = ($(window).scrollTop() - $(parentEl).offset().top + $(window).height()) / $(parentEl).height();
  }

  if(scrolled2 < 0){scrolled2 = 0;}
  if(scrolled2 > 1){scrolled2 = 1;}

  // console.log(scrolled2);

  var num = $(img1EL).innerWidth() + ($(window).width() - 980) / 2 - 200;
  if(scrolled2 >= start && scrolled2 <= end){
    var offset01 = num * ((1 - scrolled2) / (end - start));
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * offset01 + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + offset01 + 'px)'
    });
  }else{
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * num + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + num + 'px)'
    });
  }
}

function offsetXAnimation4(parentEl,img1EL,img2EL,start,end){
  if($(parentEl).length > 0){
    var scrolled2 = ($(window).scrollTop() - $(parentEl).offset().top + $(window).height()) / $(parentEl).height();
  }

  if(scrolled2 < 0){scrolled2 = 0;}
  if(scrolled2 > 1){scrolled2 = 1;}

  // console.log(scrolled2);

  var num = $(img1EL).innerWidth() + $(window).width() / 2 - 200;
  if(scrolled2 >= start && scrolled2 <= end){
    var offset01 = num * ((1 - scrolled2) / (end - start));
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * offset01 + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + offset01 + 'px)'
    });
  }else{
    $(img1EL).css({
      "transform" : 'translateX(' + -1 * num + 'px)'
    });

    $(img2EL).css({
      "transform" : 'translateX(' + num + 'px)'
    });
  }
}

// 数字动画
function showEL(el,el2,el3,num1,num2,unit,increment){
  if($(el).length > 0){
    var offsetTop = $(el).offset().top + 100;
    if(offsetTop >= $(window).scrollTop() && offsetTop < ($(window).scrollTop() + $(window).height())){
      value1 = parseInt($(el2).text());
      value2 = parseInt($(el3).text());
      clearInterval(timeId1);
      clearInterval(timeId2);
      timeId1 = setInterval(function(){
        if(value1 >= num1){
          clearInterval(timeId1);
          timeId1 = null;
        }else{
          value1 += increment;
          $(el2).text(value1 + unit);
        }
      },50);
      timeId2 = setInterval(function(){
        if(value2 >= num2){
          clearInterval(timeId2);
          timeId2 = null;
        }else{
          value2 += increment;
          $(el3).text(value2 + unit);
        }
      },50);
    }
  }
}