import jQuery from 'jquery';
import LocomotiveScroll from 'locomotive-scroll';
import { gsap, Power2 } from "gsap";
import  ScrollTrigger  from "gsap/ScrollTrigger";
import  ScrollToPlugin  from "gsap/ScrollToPlugin";

//const scroll = new LocomotiveScroll();

document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener('scroll', function() {
        if (window.scrollY > 57) {
            document.getElementById('main-nav').classList.add('fixed-top');
        } else {
            document.getElementById('main-nav').classList.remove('fixed-top');
        }
    });
});


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

gsap.registerPlugin(ScrollTrigger);

// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll

// const locoScroll = new LocomotiveScroll({
//   el: document.querySelector("#js-scroll"),
//   smooth: true
// });

// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
//locoScroll.on("scroll", ScrollTrigger.update);

// tell ScrollTrigger to use these proxy methods for the "#js-scroll" element since Locomotive Scroll is hijacking things
// ScrollTrigger.scrollerProxy("#js-scroll", {
//   scrollTop(value) {
//     return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
//   }, // we don't have to define a scrollLeft because we're only scrolling vertically.
//   getBoundingClientRect() {
//     return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
//   },
//   // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
//   pinType: document.querySelector("#js-scroll").style.transform ? "transform" : "fixed"
// });
var tl = gsap.timeline();

tl.from("h1 span", {
  duration: 0.75,
  y: 150,
  autoAlpha: 0,
  ease: Power2.out,
  stagger: 1.5
}).from(".nav-item", {
  duration: 0.75,
  x: 300,
  autoAlpha: 0,
  ease: "elastic.out(1, 1)",
  stagger: {
    each: 0.75,
    amount: 0.5
  }
}, "-=0.25");

var tl1 = gsap.timeline({
  scrollTrigger: {
    trigger: "#vc1",
    scroller: "body",
    markers:true,
    scrub: true,
    pin: true,
    start: "top top",
    end: "+=150%",
  }
});

var tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: "#vc2",
    scroller: "body",
    markers:true,
    scrub: true,
    pin: true,
    start: "top top",
    end: "+=150%",
  }
});




     
  // var tlimage = gsap.timeline({
  //   scrollTrigger: {
  //     trigger: '.staff-images',
  //     scroller: "body",
  //     markers:true,
  //     scrub: true,
  //     pin: true,
  //     start: "top -70px",
  //     end: "+=150%",
  //   }
  // })
  
  // tlimage.from(".image", {
  //   duration: 0.5,
  //   rotationY: 180, 
  //   ease: Power2.out,
  //   stagger: 0.05
  // });
  



tl1.to(".move_1", {y: -786}, 0).to(".move_2", {y: -486},0)
tl2.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)


});  
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
//ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
//ScrollTrigger.refresh();





// // select video element
// var vid = document.getElementById('v2');
// //var vid = $('#v0')[0]; // jquery option

// // pause video on load
// vid.pause();
 
// // pause video on document scroll (stops autoplay once scroll started)
// window.onscroll = function(){
  
//     vid.pause();
// };

// // refresh video frames on interval for smoother playback
// setInterval(function(){
//     vid.currentTime = window.pageYOffset/300;
// }, 40);        



// jQuery(document).ready(function($) {
// // select video element
// var vid = document.getElementById('v0');
// var time = $('#time');
// var scroll2 = $('#scroll');
// var body = $('.video-cont');
// var windowheight = $(window).height() - 20;

// var scrollpos = window.pageYOffset / 400;
// var targetscrollpos = scrollpos;
// var accel = 0;

// // ---- Values you can tweak: ----
// var accelamount = 0.01; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
// var bounceamount = 0.91; //value from 0 to 1 for how much backlash back and forth you want in the easing. 0 = no bounce whatsoever, 1 = lots and lots of bounce

// // pause video on load
// vid.pause();

// window.onscroll = function() {
//   //Set the video position that we want to end up at:
//   targetscrollpos = ($(document).scrollTop() - $(vid).offset().top) / $(vid).height();
//   targetscrollpos = targetscrollpos > 0 ? targetscrollpos < $(vid).height() ? targetscrollpos : $(vid).height() : 0;

//   targetscrollpos *= 13500/ $(vid).height();
//   //move the red dot to a position across the side of the screen
//   //that indicates how far we've scrolled.
//   scroll2.css('top', 10 + (targetscrollpos * windowheight));
// };

// setInterval(function() {

//   //Accelerate towards the target:
//   accel += (targetscrollpos - scrollpos) * accelamount;

//   //clamp the acceleration so that it doesnt go too fast
//   if (accel > 1) accel = 1;
//   if (accel < -1) accel = -1;

//   //move the video scroll position according to the acceleration and how much bouncing you selected:
//   scrollpos = (scrollpos + accel) * (bounceamount) + (targetscrollpos * (1 - bounceamount));

//   //move the blue dot to a position across the side of the screen
//   //that indicates where the current video scroll pos is.  
//   time.css('top', 10 + (scrollpos / targetscrollpos * 400 * windowheight));

//   //update video playback
//   vid.currentTime = scrollpos;
//   vid.pause();

// }, 40);



//  });