<script lang="ts">
    import { onMount } from "svelte";

  let scrollY = 0;

  const animateInterval = 16;
  const startMove = 64;
  const numFrames = 312;

  let framesLoaded = 1;
  let ballsLoaded = 0;
  let frameLoader: HTMLImageElement;
  let frameLoader2: HTMLImageElement;
  let frameLoader3: HTMLImageElement;
  let frameLoader4: HTMLImageElement;

  onMount(()=>{

    // Force load once
    ballsLoaded = 4;
    onLoaded();
  });

  function onLoaded (){
    ballsLoaded++;
    if (ballsLoaded > 3) {
        frameLoader.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
        framesLoaded++;
        frameLoader2.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
        framesLoaded++;
        frameLoader3.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
        framesLoaded++;
        frameLoader4.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
        framesLoaded++;
        ballsLoaded = 0;
    }
  }

  let frameIndex = 0;
  $: frameIndex = Math.min(Math.floor(Math.max(scrollY-startMove, 0) / animateInterval+1), numFrames);
</script>

<svelte:window bind:scrollY />

<div class="w-full flex justify-center" style="height: 5000px;">
    <!-- Image Loader -->
    <img on:load={()=>{onLoaded()}} bind:this={frameLoader} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
    <img on:load={()=>{onLoaded()}} bind:this={frameLoader2} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
    <img on:load={()=>{onLoaded()}} bind:this={frameLoader3} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
    <img on:load={()=>{onLoaded()}} bind:this={frameLoader4} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">

    <!-- add "top-0" so it sticks at the top -->
    <div class="sticky top-0" style="width: 200px; height: 200px;">
        <div class="flex justify-center items-center" style="width: 200px; height: 200px;">
            <img src="/images/spinning_cat/untitled_{frameIndex.toString().padStart(5, '0')}.png" class="object-contain w-full h-full" alt="">
        </div>
        <div>{frameIndex}</div>
        
    </div>
</div>

<div class="h-[1000px] bg-amber-700 w-full">

</div>