<main>
    <div id="margin-area">
      <div class="page-title">Scroll for Movie Frame Animation</div>
    </div>
    <section id="video-section">
      <div id="fixed-wrapper">
        <video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
          type="video/mp4" muted loop></video>
        <div id="fixed-description">
          <div>The Video</div>
          <div>Ends Here.</div>
        </div>
      </div>
    </section>
  </main>

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

body {
  font-family: sans-serif;
  background-color: #111111;
}

#main-img-wrapper {
  padding-top: 139px;
  text-align: center;
}

#intro-main {
  display: flex;
  flex-direction: column;
  margin: 54px auto 140px;
  width: 300px;
  align-items: center;
  color: white;
  font-size: 40px;
  font-weight: 500;
  gap: 20px;
}

#join-us-text {
  margin-top: 73px;
  font-size: 16px;
  font-weight: 400;
  opacity: .6;
}

#intro-main p {
  text-align: center;
}

@keyframes upAndDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

#down-arrow-icon {
  width: 33px;
  animation: upAndDown 1s infinite;
}

#list-item-wrapper {
  margin: 0 auto 500px;
  width: 383px;
}

.list-item {
  display: inline;
  font-size: 48px;
  font-weight: 600;
}

.list-item::before {
  display: inline-block;
  background-image: url('./icons/dark_house.png');
  background-size: 51px 53px;
  content: "";
  width: 51px;
  height: 53px;
}

.list-item#on {
  color: white;
}

.list-item#on::before{
  background-image: url('./icons/light_house.png');
}

#panel1-img {
  overflow: hidden;
  margin-bottom: 500px;
  position: relative;
  height: 320px;
}

#flying-santa-image {
  position: absolute;
  right: -80px;
  height: 310px;
  transform: translate(80px, -13px) rotate(23deg);
}

#video-section {
  margin-bottom: 1000px;
}

#video {
  display: block;
  margin: 0 auto;
  height: 350px;
}

#fixed-description {
  width: 622px;
  margin: 30px auto 0;
  color: white;
  text-align: right;
  line-height: 50px;
  font-size: 35px;
  font-weight: 600;
  transform: translateY(100px);
  opacity: 0;
}

#margin-area {
  height: 1585px;
}

.page-title {
  color: #fff;
  font-size: 40px;
  text-align: center;
  padding: 20px 0;
  font-weight: bold;
}

document.addEventListener('DOMContentLoaded', function() {
  const videoPlayBack = 360;

  const videoElement = document.getElementById('video');
  const videoSection = document.getElementById('video-section');

  const fixedWrapper = document.getElementById('fixed-wrapper');
  const fixedDescription = document.getElementById('fixed-description');

  function centerElement(elementId, video) {
    const element = document.getElementById(elementId);
    const parent = element.parentElement;

    if (window.scrollY > parent.offsetTop - ((document.documentElement.clientHeight - element.offsetHeight) /2)) {
      element.style.position = 'fixed';
      element.style.top = '50%';
      element.style.left = '50%';
      element.style.transform = 'translate(-50%, -50%)';

      if (video) {
        // videod.currentTiem is the current time in seconds
        video.currentTime = (window.scrollY - videoSection.offsetTop) / videoPlayBack;
        console.log("video.currentTime", video.currentTime) // 15.xx seconds
      }
    } else {
      element.style.position = 'relative';
      element.style.top = 'initial';
      element.style.left = 'initial';
      element.style.transform = 'initial';
    }
  }

  // loadedmetadata event is fired when the metadata has been loaded
  videoElement.addEventListener('loadedmetadata', function() {
    // Set the height of the video section to the duration of the video times the playback rate
    document.getElementById('video-section').style.height = videoElement.duration * videoPlayBack + 'px';
    // console.log("videoElement.duration", videoElement.duration) // 15.xx
  });

   const fixedDescriptionAppearTiming = 3470;
   const fixedDescriptionAppearEnds = 3800;

   window.addEventListener('scroll', function() {
    // if (document.getElementById("on")) document.getElementById("on").removeAttribute("id");

    const scrollYBottom = window.scrollY + document.documentElement.clientHeight;

    centerElement("fixed-wrapper", videoElement)

    // The code for styling when it scrolls out of the video section
    // The code is for #fixed-description
    if (window.scrollY > videoSection.offsetTop + videoSection.offsetHeight - (fixedWrapper.offsetHeight + (document.documentElement.clientHeight - fixedWrapper.offsetHeight) / 2)) {
      console.log("Scroll is greater than videoSection.offsetTop + videoSection.offsetHeight - (fixedWrapper.offsetHeight + (document.documentElement.clientHeight - fixedWrapper.offsetHeight) / 2)")
      fixedWrapper.style.position = 'relative';
      fixedWrapper.style.top = 'initial';
      fixedWrapper.style.left = 'initial';
      fixedWrapper.style.transform = `translateY(${videoSection.offsetHeight - fixedWrapper.offsetHeight}px)`;
    }

    if (window.scrollY > fixedDescriptionAppearTiming && window.scrollY < fixedDescriptionAppearEnds) {
      fixedDescription.style.transform = `translateY(${fixedDescriptionAppearEnds - window.scrollY}px)`

      fixedDescription.style.opacity = (window.scrollY - fixedDescriptionAppearTiming) / 300
    } else if (window.scrollY > fixedDescriptionAppearEnds) {
      fixedDescription.style.transform = `translateY(0px)`
      fixedDescription.style.opacity = 1
    } else {
      fixedDescription.style.transform = `translateY(100px)`
      fixedDescription.style.opacity = 0
    }
   })
});