// #region ========================= GLOBAL CONSTANTS / [dirty, dirty...] INIT/RESET =========================

const frameCount = 149;
const sliderStep = 0.0000000000000001;
let scrollPos;

gsap.to(window, { duration: 0.0005, scrollTo: 0 });

// #endregion ========================= GLOBAL CONSTANTS / [dirty. dirty] INIT/RESET =========================



// #region ========================= FUNCTION: updateStats(thisFrame, thisProgress, thisScrollPos) =========================

function updateStats(thisFrame, thisProgress, thisScrollPos) {
    $(".framecount").html('frame: ' + thisFrame);
    $(".progress").html('scrollProgress: ' + thisProgress);
    $(".scrollPosition").html('scrollPosition: ' + thisScrollPos);
}

// #endregion ========================= FUNCTION: updateStats(thisFrame, thisProgress, thisScrollPos) =========================



// #region ========================= FUNCTION: render(thisFrame, thisProgress) =========================

function render(thisFrame, thisProgress) {

    scrollPos = $(document).height() * thisProgress;

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(images[thisFrame], 0, 0);

    $("#slider").slider("value", thisProgress);

    updateStats(thisFrame, thisProgress, scrollPos);
}

// #endregion ========================= FUNCTION: render(thisFrame, thisProgress) =========================



// #region ========================= TIMELINE SCRUBBER / SLIDER - REF: https://codepen.io/GreenSock/pen/cmKgh =========================

$("#slider").slider({
    range: false,
    min: 0,
    max: 1,
    step: sliderStep,

    slide: function (event, ui) {

        const thisProgress = ui.value;
        const thisFrame = Math.round(thisProgress * frameCount);

        render(thisFrame, thisProgress);

        // * = * = * = * = * = *  THIS MAKES THE CONTROLS JUMP... BOOOOOOO!!! * = * = * = * = * = *
        // mainAnim.scrollTrigger.scroll(scrollPos);
    }
});

// #endregion ========================= TIMELINE SCRUBBER / SLIDER - REF: https://codepen.io/GreenSock/pen/cmKgh =========================



// #region ========================= AIRPODS EXAMPLE - REF: https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/ =========================
//         ------------------------- BASE REF: https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/ -------------------------

// #region ------------------------- IMAGES -------------------------

const canvas = document.getElementById("animContainerID");
const context = canvas.getContext("2d");

canvas.width = 960;
canvas.height = 540;

const currentFrame = index => (
    `https://www.shigimcp.com/Xstage/gsap_ScrollTrigger_1020/img/kawaii08_06_POSE_SingleLadies02_png/kawaii08_06_POSE_SingleLadies02_${(index).toString().padStart(5, '0')}.png`
);

const images = []

const anim = {
    frame: 0
};

for (let i = 0; i <= frameCount; i++) {

    const img = new Image();

    img.src = currentFrame(i);
    images.push(img);
}

// #endregion ------------------------- IMAGES -------------------------


// #region ------------------------- SCROLLTRIGGER ANIM - REF: https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/ -------------------------

let mainAnim = gsap.to(anim, {

    frame: frameCount,

    snap: "frame",

    scrollTrigger: {
        // scrub: true,
        scrub: 0.5,
        onUpdate: self => {
            render(anim.frame, self.progress);
        }
    },
});

images[0].onload = render(0, 0);

// #endregion ------------------------- SCROLLTRIGGER ANIM - REF: https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/ -------------------------


// #region ------------------------- JUMP BUTTONS - REF: https://codepen.io/GreenSock/pen/VweybzG -------------------------
//         ------------------------- REF: https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/ -------------------------

$(document).ready(function () {

    $('.jumpBtn').click(function () {

        const thisFrame = this.value;
        const thisProgress = this.value / frameCount;

        $("#slider").slider("value", thisProgress);

        render(thisFrame, thisProgress);

        // * = * = * = * = * = *  THIS PLAYS GAMES WITH THE ACCURACY OF THE JUMP BUTTONS... BOOOOOOO!!! * = * = * = * = * = *
        mainAnim.scrollTrigger.scroll(scrollPos);
    });
});

// #endregion ------------------------- JUMP BUTTONS - REF: https://codepen.io/GreenSock/pen/VweybzG -------------------------

// #endregion ========================= AIRPODS EXAMPLE - REF: https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/ =========================