document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");

var SETTINGS = {
    navTravelling: false,
    navTravelDirection: "",
	navTravelDistance: 150
}

function determineOverflow(content, container) {
    var containerMetrics = container.getBoundingClientRect();
    var containerMetricsRight = Math.floor(containerMetrics.right);
    var containerMetricsLeft = Math.floor(containerMetrics.left);
    var contentMetrics = content.getBoundingClientRect();
    var contentMetricsRight = Math.floor(contentMetrics.right);
    var contentMetricsLeft = Math.floor(contentMetrics.left);
    if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
        return "both";
    } else if (contentMetricsLeft < containerMetricsLeft) {
        return "left";
    } else if (contentMetricsRight > containerMetricsRight) {
        return "right";
    } else {
        return "none";
    }
}

var nav 	= document.getElementById("navWrapper")
var navElements = document.getElementById("navElements")
var navAdvancerLeft  = document.getElementById("navAdvancerLeft");
var navAdvancerRight = document.getElementById("navAdvancerRight");
var last_known_scroll_position = 0;
var ticking = false;

setOverflowIndicator();

function setOverflowIndicator(scroll_pos) {
	nav.setAttribute("data-overflowing", determineOverflow(navElements, nav));
}

nav.addEventListener("scroll", function() {
    last_known_scroll_position = window.scrollY;
    if (!ticking) {
        window.requestAnimationFrame(function() {
            setOverflowIndicator(last_known_scroll_position);
            ticking = false;
        });
    }
    ticking = true;
});

navAdvancerLeft.addEventListener("click", function() {
    // If in the middle of a move return
    if (SETTINGS.navTravelling === true) {
        return;
    }
    // If we have content overflowing both sides or on the left
    if (determineOverflow(navElements, nav) === "left" || determineOverflow(navElements, nav) === "both") {
        // Find how far this panel has been scrolled
        var availableScrollLeft = nav.scrollLeft;
        // If the space available is less than two lots of our desired distance, just move the whole amount
        // otherwise, move by the amount in the settings
        if (availableScrollLeft < SETTINGS.navTravelDistance * 2) {
            navElements.style.transform = "translateX(" + availableScrollLeft + "px)";
        } else {
            navElements.style.transform = "translateX(" + SETTINGS.navTravelDistance + "px)";
        }
        // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
        navElements.classList.remove("pn-ProductNav_Contents-no-transition");
        // Update our settings
        SETTINGS.navTravelDirection = "left";
        SETTINGS.navTravelling = true;
    }
    // Now update the attribute in the DOM
    nav.setAttribute("data-overflowing", determineOverflow(navElements, nav));
});

navAdvancerRight.addEventListener("click", function() {
    // If in the middle of a move return
    if (SETTINGS.navTravelling === true) {
        return;
    }
    // If we have content overflowing both sides or on the right
    if (determineOverflow(navElements, nav) === "right" || determineOverflow(navElements, nav) === "both") {
        // Get the right edge of the container and content
        var navBarRightEdge = navElements.getBoundingClientRect().right;
        var navBarScrollerRightEdge = nav.getBoundingClientRect().right;
        // Now we know how much space we have available to scroll
        var availableScrollRight = Math.floor(navBarRightEdge - navBarScrollerRightEdge);
        // If the space available is less than two lots of our desired distance, just move the whole amount
        // otherwise, move by the amount in the settings
        if (availableScrollRight < SETTINGS.navTravelDistance * 2) {
            navElements.style.transform = "translateX(-" + availableScrollRight + "px)";
        } else {
            navElements.style.transform = "translateX(-" + SETTINGS.navTravelDistance + "px)";
        }
        // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
        navElements.classList.remove("pn-ProductNav_Contents-no-transition");
        // Update our settings
        SETTINGS.navTravelDirection = "right";
        SETTINGS.navTravelling = true;
    }
    // Now update the attribute in the DOM
    nav.setAttribute("data-overflowing", determineOverflow(navElements, nav));
});

navElements.addEventListener(
    "transitionend",
    function() {
        // get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform
        var styleOfTransform = window.getComputedStyle(navElements, null);
        var tr = styleOfTransform.getPropertyValue("-webkit-transform") || styleOfTransform.getPropertyValue("transform");
        // If there is no transition we want to default to 0 and not null
        var amount = Math.abs(parseInt(tr.split(",")[4]) || 0);
        navElements.style.transform = "none";
        navElements.classList.add("pn-ProductNav_Contents-no-transition");
        // Now lets set the scroll position
        if (SETTINGS.navTravelDirection === "left") {
            nav.scrollLeft = nav.scrollLeft - amount;
        } else {
            nav.scrollLeft = nav.scrollLeft + amount;
        }
        SETTINGS.navTravelling = false;
    },
    false
);