jQuery(document).ready(function($) {



var term03 = $(".wheel-03 .term03");
var term04 = $(".wheel-03 .term04");
var term05 = $(".wheel-03 .term05");
var term06 = $(".wheel-03 .term06");
var term07 = $(".wheel-03 .term07");

var stepFrame = 5;

tl03 = new TimelineLite();
tl03
.to(term03, stepFrame, {
  css: { className: "term term02" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term03, stepFrame, {
  css: { className: "term term01" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term03, stepFrame, {
  css: { className: "term term00" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
});

tl04 = new TimelineLite();
tl04
.to(term04, stepFrame, {
  css: { className: "term term03" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term04, stepFrame, {
  css: { className: "term term02" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term04, stepFrame, {
  css: { className: "term term01" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term04, stepFrame, {
  css: { className: "term term00" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
});

tl05 = new TimelineLite();
tl05
.to(term05, stepFrame, {
  css: { className: "term term04" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term05, stepFrame, {
  css: { className: "term term03" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term05, stepFrame, {
  css: { className: "term term02" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term05, stepFrame, {
  css: { className: "term term01" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
;

tl06 = new TimelineLite();
tl06
.to(term06, stepFrame, {
  css: { className: "term term05" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term06, stepFrame, {
  css: { className: "term term04" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term06, stepFrame, {
  css: { className: "term term03" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term06, stepFrame, {
  css: { className: "term term02" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
;

tl07 = new TimelineLite();
tl07
.to(term07, stepFrame, {
  css: { className: "term term06" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term07, stepFrame, {
  css: { className: "term term05" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term07, stepFrame, {
  css: { className: "term term04" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
})
.to(term07, stepFrame, {
  css: { className: "term term03" },
  attr: { y: "-=50" },
  ease: Linear.easeNone
});

wheel03 = new TimelineMax({ repeat: 100, timeScale: 10, yoyo:true });

wheel03.add(tl03, 0);
wheel03.add(tl04, 0);
wheel03.add(tl05, 0);
wheel03.add(tl06, 0);
wheel03.add(tl07, 0);


wheel03.pause();
setInterval(myTimer, 1000);

function myTimer() {
//
if(!$('.full-screen').hasClass('paused')){
wheel03.play();
//
//$('canvas').remove();
setTimeout(() => {
  wheel03.pause();
}, 500);
}
}

TweenMax.to(wheel03, 0.1, { timeScale: 10, ease: Circ.easeOut });

$(document).on('click', '.video-thumb', function(){
$('.full-screen').hide();
var video = document.getElementsByTagName('video')[0];
var sources = video.getElementsByTagName('source');
var track = video.getElementsByTagName('track');
sources[0].src = $(this).data('video');
track[0].src = $(this).data('cc');
video.load();
video.muted = false;
video.removeAttribute("loop");
$('.play').hide();
$('.pause').hide();
$('.product-header-image').css('background-image','none').css('background-color','#000'); 
$('#myVideo').css('position','relative').css('right','unset').css('min-width','unset').css('max-width','100vw').css('max-height','99.8%');;
video.setAttribute("controls","controls")   
// if (video.requestFullscreen) {
//   video.requestFullscreen();
// } else if (video.msRequestFullscreen) {
//   video.msRequestFullscreen();
// } else if (video.mozRequestFullScreen) {
//   video.mozRequestFullScreen();
// } else if (video.webkitRequestFullscreen) {
//   video.webkitRequestFullscreen();
// }

});


$(document).on('click', '.pause', function(){
$('.full-screen').addClass('paused');
$(this).hide();
$('.play').show();
var video = document.getElementsByTagName('video')[0];
video.pause();
wheel03.pause(); 

});

$(document).on('click', '.play', function(){
$('.full-screen').removeClass('paused');
$(this).hide();
$('.pause').show();
var video = document.getElementsByTagName('video')[0];
video.play();
wheel03.play();

});

$('.video-thumb-title').sameHeight();

$(window).resize(function(){
    $('.video-thumb-title').css('height','unset');
    $('.video-thumb-title').sameHeight();
});


   });

   (function(document, history, location) {
    var HISTORY_SUPPORT = !!(history && history.pushState);
  
    var anchorScrolls = {
      ANCHOR_REGEX: /^#[^ ]+$/,
      OFFSET_HEIGHT_PX: 150,
  
      /**
       * Establish events, and fix initial scroll position if a hash is provided.
       */
      init: function() {
        this.scrollToCurrent();
        window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
        document.body.addEventListener('click', this.delegateAnchors.bind(this));
      },
  
      /**
       * Return the offset amount to deduct from the normal scroll position.
       * Modify as appropriate to allow for dynamic calculations
       */
      getFixedOffset: function() {
        return this.OFFSET_HEIGHT_PX;
      },
  
      /**
       * If the provided href is an anchor which resolves to an element on the
       * page, scroll to it.
       * @param  {String} href
       * @return {Boolean} - Was the href an anchor.
       */
      scrollIfAnchor: function(href, pushToHistory) {
        var match, rect, anchorOffset;
  
        if(!this.ANCHOR_REGEX.test(href)) {
          return false;
        }
  
        match = document.getElementById(href.slice(1));
  
        if(match) {
          rect = match.getBoundingClientRect();
          anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
          window.scrollTo(window.pageXOffset, anchorOffset);
  
          // Add the state to history as-per normal anchor links
          if(HISTORY_SUPPORT && pushToHistory) {
            history.pushState({}, document.title, location.pathname + href);
          }
        }
  
        return !!match;
      },
  
      /**
       * Attempt to scroll to the current location's hash.
       */
      scrollToCurrent: function() {
        this.scrollIfAnchor(window.location.hash);
      },
  
      /**
       * If the click event's target was an anchor, fix the scroll position.
       */
      delegateAnchors: function(e) {
        var elem = e.target;
  
        if(
          elem.nodeName === 'A' &&
          this.scrollIfAnchor(elem.getAttribute('href'), true)
        ) {
          e.preventDefault();
        }
      }
    };
  
    window.addEventListener(
      'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
    );
  })(window.document, window.history, window.location);



  (function( $ ) {
    // the sameHeight functions makes all the selected elements of the same height
    $.fn.sameHeight = function() {
        var selector = this;
        var heights = [];

        // Save the heights of every element into an array
        selector.each(function(){
            var height = $(this).height();
            heights.push(height);
        });

        // Get the biggest height
        var maxHeight = Math.max.apply(null, heights);
        // Show in the console to verify
        console.log(heights,maxHeight);

        // Set the maxHeight to every selected element
        selector.each(function(){
            $(this).height(maxHeight);
        }); 
    };
 
}( jQuery ));