/* Fun scroll capture stuff :D */
var scrollPos = {
    realX: 0,
    realY: 0,
    virtX: 0,
    virtY: 0
};

const rScroll = () => {
    window.scrollTo({
        top: scrollPos.virtY,
        left: scrollPos.virtX
    });
};

function textNodesUnder(el){ // THANKS, STACKOVERFLOW
  var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode()) a.push(n);
  return a;
}

const firstRoomSize = 3000;
const secondRoomSize = 3000;

const rooms = [
    {
        el: document.getElementById("head"),
        size: 3000,
        type: "opacity"
    },
    {
        el: document.getElementById("firstpage"),
        size: 3000,
        type: "opacity"
    },
    {
        el: document.getElementById("secondpage"),
        size: 3000,
        type: "opacity"
    },
    {
        el: document.getElementById("thirdpage"),
        size: 3000,
        type: "opacity"
    }
];

const doScrollTasks = () => {
    var roomOffset = 0;
    rooms.forEach(item => {
        if (item.type == "opacity") {
            var subtractor = 0;
            if (scrollPos.realY - roomOffset > item.size / 2) {
                subtractor = (scrollPos.realY - roomOffset) - item.size / 2;
            }
            var percent = (item.size - subtractor - (scrollPos.realY - roomOffset)) / item.size;
            item.el.style.opacity = percent;
            if ((item.size - subtractor - (scrollPos.realY - roomOffset)) / item.size < 0) {
                item.el.style.visibility = "hidden";
            }
            else {
                item.el.style.visibility = "";
            }
        }
        roomOffset += item.size;
    });
    document.getElementsByTagName("ol")[0].scrollTo({
        left: 0,
        top: (scrollPos.realY - roomOffset) / 10
    });
    var baseline = (scrollPos.realY - roomOffset) / 10 - document.getElementsByTagName("ol")[0].scrollHeight;
    scrollPos.virtY = baseline;
    baseline -= window.innerHeight;
    var proportion = ((window.innerWidth - baseline) / window.innerWidth);
    if (proportion < 0) {
        scrollPos.realY = roomOffset + (document.getElementsByTagName("ol")[0].scrollHeight + window.innerWidth + window.innerHeight) * 10;
        document.getElementById("youfinished").style.display = "";
    }
    document.getElementById("final-inner").style.transform = "translate(" + 100 * proportion + "vw, -50%)";
    document.getElementById("final").style.backgroundColor = "rgba(0, 0, 0, " + (baseline / window.innerWidth) + ")";
    rScroll();
};

doScrollTasks(); // Initial scrolling reset and setup

const scrollBy = (x, y) => {
    scrollPos.realX += x;
    scrollPos.realY += y;
    if (scrollPos.realY < 0) {
        scrollPos.realY = 0;
    }
    if (scrollPos.realX != 0) {
        scrollPos.realX = 0;
    }
    doScrollTasks();
}

window.addEventListener("wheel", (event) => {
    scrollBy(event.deltaX, event.deltaY);
    event.preventDefault();
    event.stopPropagation();
}, { passive: false });

document.getElementById("head").ontransitionend = () => {
    document.getElementById("scrollDown").classList.add("ready");
};

window.addEventListener("keydown", (evt) => {
    if (evt.key == "ArrowUp") {
        scrollBy(0, -300);
    }
    else if (evt.key == "ArrowDown") {
        scrollBy(0, 300);
    }
});

const countUnder = (node) => {
    var wc = 0;
    textNodesUnder(node).forEach(item => {
        item.textContent.split(" ").forEach(word => {
            if (word != "") {
                wc++;
            }
        });
    });
    return wc;
};

document.getElementById("wordcount").innerText = countUnder(document.documentElement) - countUnder(document.getElementById("final"));