var node, tips;
var currentImageIndex;
var isHidingTips = false;
var show = true;
var anim;
var tipTexts = [""];
var ottos = [
    "/images/otto-wyym.png",
    "/images/otto-rd2.png",
    "/images/otto-rd2-xmas-compressed.png",
    "/images/otto-traditional.png",
]
function getCurrentImage() {
    ottoIndex = (ottoIndex) % ottos.length;
    return ottos[ottoIndex];
}
var ottoIndex = 0;
function showOtto(callback) {
    node.style.opacity = 1;
    anim = node.animate([
        { bottom: "-100%", transform: "rotate(-30deg)", easing: "cubic-bezier(0.16, 1, 0.3, 1)", offset: 0 },
        { bottom: 0, offset: 1 },
    ], 750);
    anim.onfinish = function () {
        if (callback) {
            callback();
        }
    }
}
function hideOtto(callback) {
    anim = node.animate([
        { bottom: 0, transform: "rotate(0deg)", easing: "cubic-bezier(0.7, 0, 0.84, 0)", offset: 0 },
        { bottom: "-100%", transform: "rotate(-30deg)", offset: 1 },
    ], 750);
    anim.onfinish = function () {
        node.style.opacity = 0;
        if (callback) {
            callback();
        }
    }
}

window.addEventListener("load", function () {
    fetch("tips.json").then(response => response.json()).then(data => {
        tipTexts = data;
    });
    addOtto(document);
    showOtto()
})


window.$docsify.onOttoShow = function () {
    if (!anim.playState || anim.playState != "finished") {
        return;
    }
    show = !show;
    if (show) {
        image.src = getCurrentImage();
        showOtto();
    } else {
        hideOtto();
        ottoIndex++;
        window.localStorage.setItem('ottoIndex', ottoIndex);
    }
}
function addOtto(document) {
    let localStorageOttoIndex = window.localStorage.getItem('ottoIndex');
    if (localStorageOttoIndex !== null) {
        ottoIndex = parseInt(localStorageOttoIndex);
    }
    node = document.createElement("div");
    node.className = "otto";
    image = document.createElement("img");
    image.src = getCurrentImage();
    image.alt = "Otto";
    tips = document.createElement("div");
    tips.className = "tips";
    tips.style.opacity = 0;
    tips.style.transition = "transform 0.5s";
    node.appendChild(tips);
    node.appendChild(image);
    node.addEventListener("click", clickOtto);
    document.body.appendChild(node);
}
function clickOtto() {
    switch (anim.playState) {
        case "running":
            if (isHidingTips) {
                return;
            }
            isHidingTips = true;
            anim.pause();
            temp = anim;
            anim = tips.animate([
                { transform: "translateY(0) rotate(0deg)", opacity: 100, offset: 0.5, easing: "ease-in" },
                { transform: "translateY(-10px) rotate(-3deg)", opacity: 0 }
            ], 400);
            anim.onfinish = function () {
                temp.cancel();
                tips.innerHTML = randomTips();
                isHidingTips = false;
                playTips();
            }
            break;
        case "paused":
            break;
        case "finished":
            tips.innerHTML = randomTips();
            playTips();
            break;
    }
}

function playTips() {
    anim = tips.animate([
        { transform: "translateY(-10px) rotate(3deg)", opacity: 0, offset: 0, easing: "ease-out" },
        { transform: "translateY(0) rotate(0deg)", opacity: 100, offset: 0.1 },
        { transform: "translateY(0) rotate(0deg)", opacity: 100, offset: 0.9, easing: "ease-in" },
        { transform: "translateY(-10px) rotate(-3deg)", opacity: 0, offset: 1 }
    ], 4000);
    anim.onfinish = function () {
    }
}

function randomTips() {
    return tipTexts[Math.floor(Math.random() * tipTexts.length)];
}