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

const frameCount = 120;
const sliderStep = 0.0000000000000001;
let scrollPos = 0;

var restartClicked = false;

// gsap.set(window, { scrollTo: 0 });
gsap.set(window, { scrollTo: 1 });

// window.scrollTo(0, 0);
// window.scrollTo(0, 1);


// ========================= 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/building_blowout_1020/img/Haus1_render01/Haus1_${(index).toString().padStart(4, '0')}.png`
);

const images = []

const anim = {
    frame: 0,
    lastFrame: -1,
    totalFrames: frameCount,
    images: []
};

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

    const img = new Image();

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


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

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


// ========================= FUNCTION: drawSprite() =========================

function drawSprite() {

    if (anim.frame === anim.lastFrame) {
        return;
    }

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

    anim.lastFrame = anim.frame;

    const thisProgress = anim.frame / frameCount;
    scrollPos = (document.body.offsetHeight - window.innerHeight) * thisProgress;

    gsap.set(window, { scrollTo: (document.body.offsetHeight - window.innerHeight) * thisProgress });

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

    updateStats(anim.frame, thisProgress, scrollPos);
}


// ========================= TIMELINE: animTimeline =========================

var animTimeline = gsap.timeline({
    paused: true,
    onUpdate: drawSprite,

    scrollTrigger: {
        // markers: true,
        scrub: true,

        onLeave: () => {
            animTimeline.pause()
        },

        onLeaveBack: () => {
            if (!restartClicked) {
                animTimeline.pause()
            }
            restartClicked = false;
        }

    },
});

animTimeline
    .to(anim, {
        duration: 1,
        frame: frameCount,
        ease: "none",
        snap: "frame",
    }
);


// ========================= TIMELINE: *NOT* a timeline, i.e. separate tweens =========================

const triggerStart01 = 1000;
const triggerStart02 = 1750;
const triggerStart03 = 2500;
const triggerStart04 = 3250;

const triggerEndDiff = 400;

const scrollerStart = 70;
const scrollerEnd = 90;


// - - - - - - - - - - - - - CALLOUT 01 v01 - - - - - - - - - - - - -

gsap.fromTo(["#callout01ID"],
    {
        x: 550,
        y: 0,
        scale: 0.75,
        autoAlpha: 0,
    },
    {
        id: "callout01",
        x: 750,
        // y: 0,
        scale: 1,
        autoAlpha: 1,

        duration: 0.5,

        scrollTrigger: {
            markers: true,
            trigger: "#callout01ID",
            start: () => "+=" + triggerStart01 + " " + scrollerStart + "%",
            end: () => "+=" + (triggerStart01 + triggerEndDiff) + " " + scrollerEnd + "%",

            // scrub: true,

            toggleActions: "play reverse play reverse",
        }
    }
);


// - - - - - - - - - - - - - CALLOUT 02 - - - - - - - - - - - - -

gsap.fromTo(["#callout02ID"],
    {
        x: 250,
        y: 100,
        scale: 0.75,
        autoAlpha: 0,
    },
    {
        id: "callout02",
        x: 50,
        // y: 100,
        scale: 1,
        autoAlpha: 1,

        duration: 0.5,

        scrollTrigger: {
            markers: true,
            trigger: "#callout02ID",
            start: () => "+=" + triggerStart02 + " " + scrollerStart + "%",
            end: () => "+=" + (triggerStart02 + triggerEndDiff) + " " + scrollerEnd + "%",

            // scrub: true,

            toggleActions: "play reverse play reverse",
        }
    }
);


// - - - - - - - - - - - - - CALLOUT 03 - - - - - - - - - - - - -

gsap.fromTo(["#callout03ID"],
    {
        x: 450,
        y: 250,
        scale: 0.75,
        autoAlpha: 0,
    },
    {
        id: "callout03",
        x: 650,
        // y: 250,
        scale: 1,
        autoAlpha: 1,

        duration: 0.5,

        scrollTrigger: {
            markers: true,
            trigger: "#callout03ID",
            start: () => "+=" + triggerStart03 + " " + scrollerStart + "%",
            end: () => "+=" + (triggerStart03 + triggerEndDiff) + " " + scrollerEnd + "%",

            // scrub: true,

            toggleActions: "play reverse play reverse",
        }
    }
);


// - - - - - - - - - - - - - CALLOUT 04 - - - - - - - - - - - - -

gsap.fromTo(["#callout04ID"],
    {
        x: 450,
        y: 300,
        scale: 0.75,
        autoAlpha: 0,
    },
    {
        id: "callout04",
        x: 250,
        // y: 300,
        scale: 1,
        autoAlpha: 1,

        duration: 0.5,

        scrollTrigger: {
            markers: true,
            trigger: "#callout04ID",
            start: () => "+=" + triggerStart04 + " " + scrollerStart + "%",
            end: () => "+=" + (triggerStart04 + triggerEndDiff) + " " + scrollerEnd + "%",

            // scrub: true,

            toggleActions: "play reverse play reverse",
        }
    }
);


// ========================= CONTROLS: SCRUBBER / SLIDER =========================

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

    slide: function (event, ui) {

        const thisProgress = ui.value;

        gsap.set(window, { scrollTo: (document.body.offsetHeight - window.innerHeight) * thisProgress });

        animTimeline.pause();
    }
});


// ========================= CONTROLS: JUMP BUTTONS =========================

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

    thisButton = $(this);

    thisButton.click(function () {

        const thisProgress = this.value / frameCount;

        gsap.to(window, { scrollTo: (document.body.offsetHeight - window.innerHeight) * thisProgress, duration: 0.5 });

        animTimeline.pause();
    });

})


// ========================= CONTROLS: TIMELINE BUTTONS - REF: https://codepen.io/akapowl/pen/qBNxyvy =========================

$(document).ready(function () {

    $('#play').click(function () { animTimeline.timeScale(0.25).play(); });
    $('#pause').click(function () { animTimeline.timeScale(0.25).pause(); });
    $('#resume').click(function () { animTimeline.timeScale(0.25).resume(); });
    $('#reverse').click(function () { animTimeline.timeScale(1).reverse(); });
    $('#restart').click(function () {
        restartClicked = true;
        animTimeline.timeScale(0.25).restart();
    });

});