/*
 * ShrinkVertically -- optional horizontal scrollbar above the board.
 *
 * Kanboard's board scrolls horizontally inside #board-container (overflow-x: auto),
 * so the only horizontal scrollbar sits at the very bottom of the board. On a wide
 * board you have to scroll all the way down to reach it. This adds a second, mirrored
 * scrollbar just above the columns and keeps the two scroll positions in sync.
 *
 * Loaded only when the "Add a top horizontal scrollbar" setting is enabled.
 */
(function () {
    "use strict";

    function init() {
        var container = document.getElementById("board-container");

        // Only on the board, and never add it twice.
        if (!container || document.querySelector(".sv-top-scroll")) {
            return;
        }

        var bar = document.createElement("div");
        bar.className = "sv-top-scroll";

        var inner = document.createElement("div");
        inner.className = "sv-top-scroll-inner";
        bar.appendChild(inner);

        container.parentNode.insertBefore(bar, container);

        function sync() {
            // Match the dummy bar's content width to the board's scrollable width
            // so its scrollbar has the same range as the board's own scrollbar.
            inner.style.width = container.scrollWidth + "px";
        }

        var lock = false;

        bar.addEventListener("scroll", function () {
            if (lock) { return; }
            lock = true;
            container.scrollLeft = bar.scrollLeft;
            lock = false;
        });

        container.addEventListener("scroll", function () {
            if (lock) { return; }
            lock = true;
            bar.scrollLeft = container.scrollLeft;
            lock = false;
        });

        window.addEventListener("resize", sync);

        // The board can be redrawn by the AJAX polling/refresh; keep the width current.
        if (window.MutationObserver) {
            new MutationObserver(sync).observe(container, { childList: true, subtree: true });
        }

        sync();
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();