var body = document.body,
    sections = document.querySelectorAll("section"),
    sectionThumbnails = document.querySelectorAll(".section-thumbnail"),
    segments = body.querySelectorAll(".segment");
segmentLength = 20;
sections = toArray(sections);
sectionThumbnails = toArray(sectionThumbnails);
var animationSettings = {
    running: false,
    easing: "easeInOutQuad",
    duration: 750,
    delay: 25,
    elasticity: 10
}
sections.forEach(function (section) {
    var fragment = document.createDocumentFragment();
    var sectionImgURL = section.dataset.img;
    for (var i = 0; i < segmentLength; i++) {
        var segment = document.createElement("div");
        segment.className = "segment";
        var posX = -i * 100 / segmentLength;
        segment.innerHTML = "<div class='segment-inner' style='background: url(" + sectionImgURL + "); left: " + posX + "vw'></div>";
        segment.style.width = 100 / segmentLength + "%";
        fragment.appendChild(segment);
        section.appendChild(fragment);
    }
});
var shownSection = body.querySelector(".show");
body.addEventListener("keyup", function (e) {
    if (e.keyCode === 40 && shownSection.nextElementSibling && animationSettings.running === false) {
        animationSettings.running = true;
        animateSegments(shownSection.nextElementSibling, false);
    }
    if (e.keyCode === 39 && shownSection.nextElementSibling && animationSettings.running === false) {
        animationSettings.running = true;
        animateSegments(shownSection.nextElementSibling, false);
    }
    if (e.keyCode === 38 && shownSection.previousElementSibling && animationSettings.running === false) {
        animationSettings.running = true;
        animateSegments(shownSection.previousElementSibling, false);
    }
    if (e.keyCode === 37 && shownSection.previousElementSibling && animationSettings.running === false) {
        animationSettings.running = true;
        animateSegments(shownSection.previousElementSibling, false);
    }
});
sectionThumbnails.forEach(function (thumbnail) {
    thumbnail.addEventListener("click", function () {
        if (animationSettings.running === false && !this.classList.contains("active")) {
            animationSettings.running = true;
            animateSegments(sections[sectionThumbnails.indexOf(this)], true);
        }
    })
});

function animateSegments(afterShownSection, byClickOrNot) {
    var translateYValue, hiddenPosition;
    if (afterShownSection.className === "hide-bottom") {
        translateYValue = "-100%";
        hiddenPosition = "hide-top";
    } else {
        translateYValue = "100%";
        hiddenPosition = "hide-bottom";
    }
    var afterShownSectionIndex = sections.indexOf(afterShownSection);
    var shownSectionParams = {
        begin: function () {
            sectionThumbnails[sections.indexOf(shownSection)].classList.remove("active");
        },
        targets: shownSection.querySelectorAll(".segment"),
        complete: function () {
            this.animatables.forEach(function (animatable) {
                animatable.target.style.transform = "translateY(0)";
            });
            if (byClickOrNot) {
                sections.forEach(function (section, index) {
                    if (index < afterShownSectionIndex) {
                        section.className = "hide-top";
                    }
                    if (index > afterShownSectionIndex) {
                        section.className = "hide-bottom";
                    }
                });
            } else {
                shownSection.className = hiddenPosition;
            }
        }
    }
    var afterShownParams = {
        begin: function () {
            sectionThumbnails[sections.indexOf(afterShownSection)].classList.add("active");
        },
        targets: afterShownSection.querySelectorAll(".segment"),
        complete: function () {
            this.animatables.forEach(function (animatable) {
                animatable.target.style.transform = "translateY(0)";
            });
            afterShownSection.className = "show";
            shownSection = afterShownSection;
            animationSettings.running = false;
        }
    }
    requestAnimate(shownSectionParams, translateYValue);
    requestAnimate(afterShownParams, translateYValue);
}

function requestAnimate(animationParams, translateYValue) {
    anime({
        begin: animationParams.begin,
        targets: animationParams.targets,
        translateY: translateYValue,
        duration: animationSettings.duration,
        delay: function (el, index) {
            return index * animationSettings.delay;
        },
        elasticity: animationSettings.elasticity,
        complete: animationParams.complete
    });
}

function toArray(nodeList) {
    nodeList = [].slice.call(nodeList);
    return nodeList;
}