jQuery(function () {
  var isMobile = false;
  if (window.innerWidth < 1280) {
      isMobile = true;
  }

  if(!isMobile) {
    if (jQuery('#animatedSection').length) {
      var wrapper = jQuery(".animation-wrapper");
      var slides = jQuery(".section-animate");
      var firstSlide = slides[0];
      var slidesCount = slides.length;

      animationSection();
    }
  }
});


function animationSection() {
      var blockLeft = jQuery('.block-left');
          var blockLeftImages = jQuery('.block-left > .image-wrapper');
            var blockLeftImageContent1 = jQuery('.image-content:nth-child(1)', blockLeftImages);
            var blockLeftImageContent2 = jQuery('.image-content:nth-child(2)', blockLeftImages);
            var blockLeftImageContent3 = jQuery('.image-content:nth-child(3)', blockLeftImages);
              var blockLeftImage1 = jQuery('img', blockLeftImageContent1);
              var blockLeftImage2 = jQuery('img', blockLeftImageContent2);
              var blockLeftImage3 = jQuery('img', blockLeftImageContent3);
          var blockLeftTexts = jQuery('.block-left .text-wrapper');
              var blockLeftText1 = jQuery('h4:nth-child(1)', blockLeftTexts);
              var blockLeftText2 = jQuery('h4:nth-child(2)', blockLeftTexts);
              var blockLeftText3 = jQuery('h4:nth-child(3)', blockLeftTexts);
      var blockRight = jQuery('.block-right');
          var blockRightImages = jQuery('.block-right > .image-wrapper');
              var blockRightImageContent1 = jQuery('.image-content:nth-child(1)', blockRightImages);
              var blockRightImageContent2 = jQuery('.image-content:nth-child(2)', blockRightImages);
              var blockRightImageContent3 = jQuery('.image-content:nth-child(3)', blockRightImages);
                var blockRightImage1 = jQuery('img', blockRightImageContent1);
                var blockRightImage2 = jQuery('img', blockRightImageContent2);
                var blockRightImage3 = jQuery('img', blockRightImageContent3);
          var blockRightTexts = jQuery('.block-right .text-wrapper');
              var blockRightText1 = jQuery('.text-description:nth-child(1)', blockRightTexts);
              var blockRightText2 = jQuery('.text-description:nth-child(2)', blockRightTexts);
              var blockRightText3 = jQuery('.text-description:nth-child(3)', blockRightTexts);
      var blockMiddle = jQuery('.block-middle');
          var blockMiddleText1 = jQuery('h2:nth-child(2)', blockMiddle);
          var blockMiddleText2 = jQuery('h2:nth-child(3)', blockMiddle);
          var blockMiddleText3 = jQuery('h2:nth-child(4)', blockMiddle);
          var blockMiddleLine1 = jQuery('.steps-wrapper .step-1', blockMiddle);
          var blockMiddleLine2 = jQuery('.steps-wrapper .step-2', blockMiddle);
          var blockMiddleLine3 = jQuery('.steps-wrapper .step-3', blockMiddle);

    // init controller
    var controller = new ScrollMagic.Controller();

    //-----Animate blockmiddle-----///
      TweenMax.to(blockMiddle, 0, {y: '0%'})
     var blockMiddleEnter =  new ScrollMagic.Scene({
       duration: 400,
       offset: 0,
       triggerHook: "onCenter",
       triggerElement: '#animatedSection'
     })
     .setTween(blockMiddle, { y: '-50%' })
     .addTo(controller); // assign the scene to the controller

     var blockMiddleLeave =  new ScrollMagic.Scene({
      duration: 400,
      offset: 0,
      triggerHook: "onEnter",
      triggerElement: '.next-section'
    })
    .setTween(blockMiddle, { y: '-100%' })
    .addTo(controller); // assign the scene to the controller

    ///INIT: Hide every element except first div
    TweenMax.to(jQuery('.image-content:nth-child(n+2)', blockLeftImages), 0, {
      x:'0%', 
      y:'-100%',    
    })
    TweenMax.to(jQuery('h4:nth-child(n+2)', blockLeftTexts), 0, {
      autoAlpha: 0,
      display:'none',
    })
    TweenMax.to(jQuery('h2:not(:nth-child(2))', blockMiddle), 0, {
      autoAlpha: 0, 
      display:'none',
      y: '-20px'
    })
    TweenMax.to(jQuery('.image-content:nth-child(n+2)', blockRightImages), 0, {
      x:'-100%', 
      y:'0%',
    })
    TweenMax.to(jQuery('.text-description:nth-child(n+2)', blockRightTexts), 0, {
      autoAlpha: 0, 
      display:'none'
    })
    TweenMax.to(jQuery(blockMiddleLine1), 0, {
      backgroundColor:"#ffffff",
    })

    TweenMax.to(jQuery(blockLeftImage1), 0, {
      y: '-30%'
    })
    TweenMax.to(jQuery(blockLeftImage2), 0, {
      y: '90%'
    })
    TweenMax.to(jQuery(blockLeftImage3), 0, {
      y: '90%'
    }) 
    TweenMax.to(jQuery(blockRightImage1), 0, {
      y: '-30%'
    })
    TweenMax.to(jQuery(blockRightImage2), 0, {
      x: '90%'
    })
    TweenMax.to(jQuery(blockRightImage3), 0, {
      x: '90%'
    }) 

    var leftImageEnter =  new ScrollMagic.Scene({
      duration: 800,
      offset: 0,
      triggerHook: "onLeave",
      triggerElement: '.prev-section'
    })
    .setTween(blockLeftImage1, { y: '0%' })
    .addTo(controller); // assign the scene to the controller

    var rightImageEnter =  new ScrollMagic.Scene({
      duration: 600,
      offset: 400,
      triggerHook: "onLeave",
      triggerElement: '.prev-section'
    })
    .setTween(blockRightImage1, { y: '0%' })
    .addTo(controller); // assign the scene to the controller



    /* LEFT ANIMATION */
    ///Manage left image animation
    var tweenLeftImage = new TimelineMax()
    /*Step 1*/
    tweenLeftImage.to(blockLeftImageContent1, 10, {x:'0%', y:'100%'}, '+=5');
    tweenLeftImage.to(blockLeftImage1, 10, {x:'0%', y:'-90%'}, '-=10');

    tweenLeftImage.to(blockLeftImageContent2, 10, {x:'0%', y:'0%'}, '-=10'),
    tweenLeftImage.to(blockLeftImage2, 10, {x:'0%', y:'0%'}, '-=10');

    tweenLeftImage.to(blockLeftImageContent3, 10, {x:'0%', y:'0%'}, '+=5'),
    tweenLeftImage.to(blockLeftImage3, 10, {x:'0%', y:'0%'}, '-=10');
    tweenLeftImage.to(blockLeftImage2, 10, {x:'0%', y:'10%'}, '-=10');

    ///Manage left text animation
    var tweenLeftText = new TimelineMax()
    /*Step 1*/
    tweenLeftText.to(blockLeftText2, 10, { autoAlpha: 1, display:'block'}, '+=5'),
    tweenLeftText.to(blockLeftText1, 10, { autoAlpha: 0, display:'none'}, '-=10');

    /*Step 2*/
    tweenLeftText.to(blockLeftText3, 10, { autoAlpha: 1, display:'block'}, '+=5'),
    tweenLeftText.to(blockLeftText2, 10, { autoAlpha: 0, display:'none'}, '-=10');


      /* RIGHT ANIMATION */
      var tweenRightImage = new TimelineMax()

    tweenRightImage.to(blockRightImageContent1, 10, {x:'100%', y:'0%'}, '+=5');
    tweenRightImage.to(blockRightImage1, 10, {x:'-90%', y:'0%'}, '-=10');

    tweenRightImage.to(blockRightImageContent2, 10, {x:'0%', y:'0%'}, '-=10'),
    tweenRightImage.to(blockRightImage2, 10, {x:'0%', y:'0%'}, '-=10');

    tweenRightImage.to(blockRightImageContent3, 10, {x:'0%', y:'0%'}, '+=5'),
    tweenRightImage.to(blockRightImage3, 10, {x:'0%', y:'0%'}, '-=10');
    tweenRightImage.to(blockRightImage2, 10, {x:'10%', y:'0%'}, '-=10');

    ///End right image animation

    ///Manage right text animation
    var tweenRightText = new TimelineMax()
    /*Step 1*/
    tweenRightText.to(blockRightText2, 10, { autoAlpha: 1, display:'block'}, '+=5'),
    tweenRightText.to(blockRightText1, 10, { autoAlpha: 0, display:'none'}, '-=10');

    /*Step 2*/
    tweenRightText.to(blockRightText3, 10, { autoAlpha: 1, display:'block'}, '+=5'),
    tweenRightText.to(blockRightText2, 10, { autoAlpha: 0, display:'none'}, '-=10');

    ///End right text animation

    /* MIDDLE ANIMATION */
    ///Manage middle text animation
    var tweenMiddle = new TimelineMax()
    tweenMiddle.to(blockMiddleText2, 10, { autoAlpha: 1, display:'block', y: 0}, '+=5'),
    tweenMiddle.to(blockMiddleLine2, 10, { backgroundColor: '#ffffff'}, '-=10');
    tweenMiddle.to(blockMiddleText1, 10, { autoAlpha: 0, display:'none', y: 0}, '-=10');
    tweenMiddle.to(blockMiddleLine1, 10, { backgroundColor: '#7f886c'}, '-=10');

    tweenMiddle.to(blockMiddleText3, 10, { autoAlpha: 1, display:'block', y: 0}, '+=5'),
    tweenMiddle.to(blockMiddleLine3, 10, { backgroundColor: '#ffffff'}, '-=10');
    tweenMiddle.to(blockMiddleText2, 10, { autoAlpha: 0, display:'none', y: 0}, '-=10');
    tweenMiddle.to(blockMiddleLine2, 10, { backgroundColor: '#7f886c'}, '-=10');

    tweenMiddle.to(blockMiddle, 10, { y: '-50%' }, '+=5')

    // create tween
    var timeline = new TimelineMax()
    .add(tweenLeftImage, 0)
    .add(tweenLeftText, 0)
    .add(tweenRightImage, 0)
    .add(tweenRightText, 0)
    .add(tweenMiddle, 0)
    timeline.timeScale(0.1)

    new ScrollMagic.Scene({
      duration: '100%',
      triggerHook: 'onLeave',
      triggerElement: '#animatedSection',
    })
    .setPin('#animatedSection')
    .setTween(timeline)
    .addTo(controller); // assign the scene to the controller
  
  
  
//----Smooth scroll IE to prevent animation issue ----//
 jQuery.fn.wheel = function (callback) {
   return this.each(function () {
       jQuery(this).on('mousewheel DOMMouseScroll', function (e) {
           e.delta = null;
           if (e.originalEvent) {
               if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
               if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
               if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
           }

           if (typeof callback == 'function') {
               callback.call(this, e);
           }
       });
   });
 };
if(navigator.userAgent.match(/Trident\/7\./)) {
   jQuery('body').wheel(function (e) {
     e.preventDefault();
     var wheelDelta = e.delta * -30;
     var currentScrollPosition = window.pageYOffset;
     window.scrollTo(0, currentScrollPosition - wheelDelta);
   });
 }
  
  
  
};