Annotation-System/cinera/cinera_search_pre.js

// Processing (Searching / Filtering)
//
var CineraProps = {
    IsMobile: IsMobile(),
    Orientation: null,
};

var Search = {
    ResultsSummary: null,
    ResultsContainer: null,
    ProjectsContainer: null,
    QueryElement: null,

    Projects: [],

    LastQuery: null,
    MarkerList: null,
    ProjectContainer: null,
    ResultsMarkerIndex: -1,
    RenderHandle: undefined,
    Rendering: false,

    Prototypes: {
        ProjectContainer: null,
        DayContainer: null,
        Marker: null,
        Highlight: null,
    }
};

function hideEntriesOfProject(ProjectElement)
{
    if(!ProjectElement.classList.contains("off"))
    {
        ProjectElement.classList.add("off");
    }
    var baseURL = ProjectElement.attributes.getNamedItem("data-baseURL").value;
    var searchLocation = ProjectElement.attributes.getNamedItem("data-searchLocation").value;
    var playerLocation = ProjectElement.attributes.getNamedItem("data-playerLocation").value;
    for(var i = 0; i < Search.Projects.length; ++i)
    {
        var ThisProject = Search.Projects[i];
        if(baseURL === ThisProject.baseURL && searchLocation === ThisProject.searchLocation && playerLocation === ThisProject.playerLocation)
        {
            ThisProject.filteredOut = true;
            if(ThisProject.entriesContainer != null)
            {
                ThisProject.entriesContainer.style.display = "none";
                disableSprite(ThisProject.entriesContainer.parentElement);
            }
        }
    }
}

function showEntriesOfProject(ProjectElement)
{
    if(ProjectElement.classList.contains("off"))
    {
        ProjectElement.classList.remove("off");
    }
    var baseURL = ProjectElement.attributes.getNamedItem("data-baseURL").value;
    var searchLocation = ProjectElement.attributes.getNamedItem("data-searchLocation").value;
    var playerLocation = ProjectElement.attributes.getNamedItem("data-playerLocation").value;
    for(var i = 0; i < Search.Projects.length; ++i)
    {
        var ThisProject = Search.Projects[i];
        if(baseURL === ThisProject.baseURL && searchLocation === ThisProject.searchLocation && playerLocation === ThisProject.playerLocation)
        {
            ThisProject.filteredOut = false;
            if(ThisProject.entriesContainer != null)
            {
                ThisProject.entriesContainer.style.display = "flex";
                enableSprite(ThisProject.entriesContainer.parentElement);
            }
        }
    }
}

function hideProjectSearchResults(baseURL, searchLocation, playerLocation)
{
    var cineraResults = document.getElementById("cineraResults");
    if(cineraResults)
    {
        var cineraResultsProjects = cineraResults.querySelectorAll(".projectContainer");
        for(var i = 0; i < cineraResultsProjects.length; ++i)
        {
            var resultBaseURL = cineraResultsProjects[i].attributes.getNamedItem("data-baseURL").value;
            var resultSearchLocation = cineraResultsProjects[i].attributes.getNamedItem("data-searchLocation").value;
            var resultPlayerLocation = cineraResultsProjects[i].attributes.getNamedItem("data-playerLocation").value;
            if(baseURL === resultBaseURL && searchLocation === resultSearchLocation && playerLocation === resultPlayerLocation)
            {
                cineraResultsProjects[i].style.display = "none";
                return;
            }
        }
    }
}

function showProjectSearchResults(baseURL, searchLocation, playerLocation)
{
    var cineraResults = document.getElementById("cineraResults");
    if(cineraResults)
    {
        var cineraResultsProjects = cineraResults.querySelectorAll(".projectContainer");
        for(var i = 0; i < cineraResultsProjects.length; ++i)
        {
            var resultBaseURL = cineraResultsProjects[i].attributes.getNamedItem("data-baseURL").value;
            var resultSearchLocation = cineraResultsProjects[i].attributes.getNamedItem("data-searchLocation").value;
            var resultPlayerLocation = cineraResultsProjects[i].attributes.getNamedItem("data-playerLocation").value;
            if(baseURL === resultBaseURL && searchLocation === resultSearchLocation && playerLocation === resultPlayerLocation)
            {
                cineraResultsProjects[i].style.display = "flex";
                return;
            }
        }
    }
}

function toggleEntriesOfProjectAndChildren(ProjectFilterElement)
{
    var baseURL = ProjectFilterElement.attributes.getNamedItem("data-baseURL").value;
    var searchLocation = ProjectFilterElement.attributes.getNamedItem("data-searchLocation").value;
    var playerLocation = ProjectFilterElement.attributes.getNamedItem("data-playerLocation").value;
    var shouldShow = ProjectFilterElement.classList.contains("off");
    if(shouldShow)
    {
        ProjectFilterElement.classList.remove("off");
        enableSprite(ProjectFilterElement);
    }
    else
    {
        ProjectFilterElement.classList.add("off");
        disableSprite(ProjectFilterElement);
    }

    for(var i = 0; i < Search.Projects.length; ++i)
    {
        var ThisProject = Search.Projects[i];

        if(baseURL === ThisProject.baseURL && searchLocation === ThisProject.searchLocation && playerLocation === ThisProject.playerLocation)
        {
            if(shouldShow)
            {
                ThisProject.filteredOut = false;
                enableSprite(ThisProject.projectTitleElement.parentElement);
                if(ThisProject.entriesContainer != null)
                {
                    ThisProject.entriesContainer.style.display = "flex";
                }
                showProjectSearchResults(ThisProject.baseURL, ThisProject.searchLocation, ThisProject.playerLocation);
            }
            else
            {
                ThisProject.filteredOut = true;
                disableSprite(ThisProject.projectTitleElement.parentElement);
                if(ThisProject.entriesContainer != null)
                {
                    ThisProject.entriesContainer.style.display = "none";
                }
                hideProjectSearchResults(ThisProject.baseURL, ThisProject.searchLocation, ThisProject.playerLocation);
            }
        }
    }

    var indexChildFilterProjects = ProjectFilterElement.querySelectorAll(".cineraFilterProject");

    for(var j = 0; j < indexChildFilterProjects.length; ++j)
    {
        var ThisElement = indexChildFilterProjects[j];
        var baseURL = ThisElement.attributes.getNamedItem("data-baseURL").value;
        var searchLocation = ThisElement.attributes.getNamedItem("data-searchLocation").value;
        var playerLocation = ThisElement.attributes.getNamedItem("data-playerLocation").value;
        if(shouldShow)
        {
            showEntriesOfProject(ThisElement);
            showProjectSearchResults(baseURL, searchLocation, playerLocation);
        }
        else
        {
            hideEntriesOfProject(ThisElement);
            hideProjectSearchResults(baseURL, searchLocation, playerLocation);
        }
    }
}

function prepareToParseIndexFile(project)
{
    project.xhr.addEventListener("load", function() {
        var contents = project.xhr.response;
        var lines = contents.split("\n");
        var mode = "none";
        var episode = null;
        for (var i = 0; i < lines.length; ++i) {
            var line = lines[i];
            if (line.trim().length == 0) { continue; }
            if (line == "---") {
                if (episode != null && episode.filename != null && episode.number != null && episode.title != null) {
                    episode.day = getEpisodeName(project.unit, episode.number);
                    episode.dayContainerPrototype = project.dayContainerPrototype;
                    episode.markerPrototype = Search.Prototypes.Marker;
                    episode.playerURLPrefix = project.playerURLPrefix;
                    project.episodes.push(episode);
                }
                episode = {};
                mode = "none";
            } else if (line.startsWith("location:")) {
                episode.filename = line.slice(10);
            } else if (line.startsWith("number:")) {
                episode.number = line.slice(8).trim().slice(1, -1);
            } else if (line.startsWith("title:")) {
                episode.title = line.slice(7).trim().slice(1, -1);
            } else if (line.startsWith("markers")) {
                mode = "markers";
                episode.markers = [];
            } else if (mode == "markers") {
                var match = line.match(/"(\d+)": "(.+)"/);
                if (match == null) {
                    console.log(name, line);
                } else {
                    var totalTime = parseInt(line.slice(1));
                    var marker = {
                        totalTime: totalTime,
                        prettyTime: markerTime(totalTime),
                        text: match[2].replace(/\\"/g, "\"")
                    }
                    episode.markers.push(marker);
                }
            }
        }
        document.querySelector(".spinner").classList.remove("show");
        project.parsed = true;
        runSearch(true);
    });
    project.xhr.addEventListener("error", function() {
        console.error("Failed to load content");
    });
}

function prepareProjects()
{
    for(var i = 0; i < Search.ProjectsContainer.length; ++i)
    {
        var ID = Search.ProjectsContainer[i].attributes.getNamedItem("data-project").value;
        var baseURL = Search.ProjectsContainer[i].attributes.getNamedItem("data-baseURL").value;
        var searchLocation = Search.ProjectsContainer[i].attributes.getNamedItem("data-searchLocation").value;
        var playerLocation = Search.ProjectsContainer[i].attributes.getNamedItem("data-playerLocation").value;
        var unit = Search.ProjectsContainer[i].attributes.getNamedItem("data-unit").value;
        var theme = Search.ProjectsContainer[i].classList.item(1);

        Search.Projects[i] =
            {
                baseURL: baseURL,
                searchLocation: searchLocation,
                playerLocation: playerLocation,
                unit: unit,
                playerURLPrefix: (baseURL ? baseURL + "/" : "") + (playerLocation ? playerLocation + "/" : ""),
                indexLocation: (baseURL ? baseURL + "/" : "") + (searchLocation ? searchLocation + "/" : "") + ID + ".index",
                projectTitleElement: Search.ProjectsContainer[i].querySelector(":scope > .cineraProjectTitle"),
                entriesContainer: Search.ProjectsContainer[i].querySelector(":scope > .cineraIndexEntries"),
                dayContainerPrototype: Search.Prototypes.DayContainer.cloneNode(true),
                filteredOut: false,
                parsed: false,
                searched: false,
                resultsToRender: [],
                resultsIndex: 0,
                theme: theme,
                episodes: [],
                xhr: new XMLHttpRequest(),
            }

        Search.Projects[i].dayContainerPrototype.classList.add(theme);
        Search.Projects[i].dayContainerPrototype.children[1].classList.add(theme);

        document.querySelector(".spinner").classList.add("show");
        Search.Projects[i].xhr.open("GET", Search.Projects[i].indexLocation);
        Search.Projects[i].xhr.setRequestHeader("Content-Type", "text/plain");
        Search.Projects[i].xhr.send();
        prepareToParseIndexFile(Search.Projects[i]);
    }
}

function getEpisodeName(unit, number) {
    var day = null;
    if(unit)
    {
        day = unit + " " + number;
    }
    return day;
}

function markerTime(totalTime) {
    var markTime = "(";
    var hours = Math.floor(totalTime / 60 / 60);
    var minutes = Math.floor(totalTime / 60) % 60;
    var seconds = totalTime % 60;
    if (hours > 0) {
        markTime += padTimeComponent(hours) + ":";
    }

    markTime += padTimeComponent(minutes) + ":" + padTimeComponent(seconds) + ")";

    return markTime;
}

function padTimeComponent(component) {
    return (component < 10 ? "0" + component : component);
}

function resetProjectsForSearch()
{
    for(var i = 0; i < Search.Projects.length; ++i)
    {
        var project = Search.Projects[i];
        project.searched = false;
        project.resultsToRender = [];
    }
}

function
IsQuery()
{
    return Search.LastQuery && Search.LastQuery.length > 0;
}

function runSearch(refresh) {
    var queryStr = document.getElementById("query").value;
    if (refresh || Search.LastQuery != queryStr) {
        var oldResultsContainer = Search.ResultsContainer;
        Search.ResultsContainer = oldResultsContainer.cloneNode(false);
        oldResultsContainer.parentNode.insertBefore(Search.ResultsContainer, oldResultsContainer);
        oldResultsContainer.remove();
        for(var i = 0; i < Search.Projects.length; ++i)
        {
            Search.Projects[i].resultsIndex = 0;
        }
        Search.ResultsMarkerIndex = -1;
    }
    Search.LastQuery = queryStr;

    resetProjectsForSearch();

    var numEpisodes = 0;
    var numMarkers = 0;
    var totalSeconds = 0;

    // NOTE(matt):  Function defined within runSearch() so that we can modify numEpisodes, numMarkers and totalSeconds
    function runSearchInterior(resultsToRender, query, episode)
    {
        var matches = [];
        for (var k = 0; k < episode.markers.length; ++k) {
            query.lastIndex = 0;
            var result = query.exec(episode.markers[k].text);
            if (result && result[0].length > 0) {
                numMarkers++;
                matches.push(episode.markers[k]);
                if (k < episode.markers.length-1) {
                    totalSeconds += episode.markers[k+1].totalTime - episode.markers[k].totalTime;
                }
            }
        }
        if (matches.length > 0) {
            numEpisodes++;
            resultsToRender.push({
                query: query,
                episode: episode,
                matches: matches
            });
        }
    }

    if (IsQuery()) {
        switch(Nav.ViewType)
        {
            case view_type.LIST:
                {
                    Nav.List.classList.add("hidden");
                } break;
            case view_type.GRID:
                {
                    Nav.GridContainer.classList.add("hidden");
                } break;
        }
        Search.ResultsSummary.style.display = "block";
        var shouldRender = false;
        var query = new RegExp(Search.LastQuery.replace("(", "\\(").replace(")", "\\)").replace(/\|+/, "\|").replace(/\|$/, "").replace(/(^|[^\\])\\$/, "$1"), "gi");

        // Visible
        for(var i = 0; i < Search.Projects.length; ++i)
        {
            var project = Search.Projects[i];
            if(project.parsed && !project.filteredOut && project.episodes.length > 0) {
                if(Nav.SortChronological)
                {
                    for(var j = 0; j < project.episodes.length; ++j) {
                        var episode = project.episodes[j];
                        runSearchInterior(project.resultsToRender, query, episode);
                    }
                }
                else
                {
                    for(var j = project.episodes.length; j > 0; --j) {
                        var episode = project.episodes[j - 1];
                        runSearchInterior(project.resultsToRender, query, episode);
                    }
                }

                shouldRender = true;
                project.searched = true;

            }
        }

        // Invisible
        for(var i = 0; i < Search.Projects.length; ++i)
        {
            var project = Search.Projects[i];
            if(project.parsed && project.filteredOut && !project.searched && project.episodes.length > 0) {
                if(Nav.SortChronological)
                {
                    for(var j = 0; j < project.episodes.length; ++j) {
                        var episode = project.episodes[j];
                        runSearchInterior(project.resultsToRender, query, episode);
                    }
                }
                else
                {
                    for(var j = project.episodes.length; j > 0; --j) {
                        var episode = project.episodes[j - 1];
                        runSearchInterior(project.resultsToRender, query, episode);
                    }
                }

                shouldRender = true;
                project.searched = true;

            }
        }

        if(shouldRender)
        {
            if (Search.Rendering) {
                clearTimeout(Search.RenderHandle);
            }
            renderResults();
        }
    }
    else
    {
        switch(Nav.ViewType)
        {
            case view_type.LIST:
                {
                    Nav.List.classList.remove("hidden");
                } break;
            case view_type.GRID:
                {
                    Nav.GridContainer.classList.remove("hidden");
                } break;
        }
        Search.ResultsSummary.style.display = "none";
    }

    var totalTime = Math.floor(totalSeconds/60/60) + "h " + Math.floor(totalSeconds/60)%60 + "m " + totalSeconds%60 + "s ";

    Search.ResultsSummary.textContent = "Found: " + numEpisodes + " episodes, " + numMarkers + " markers, " + totalTime + "total.";
}

function renderResults() {
    var maxItems = 42;
    var numItems = 0;
    for(var i = 0; i < Search.Projects.length; ++i)
    {
        var project = Search.Projects[i];
        if (project.resultsIndex < project.resultsToRender.length) {
            Search.Rendering = true;
            while (numItems < maxItems && project.resultsIndex < project.resultsToRender.length) {
                var query = project.resultsToRender[project.resultsIndex].query;
                var episode = project.resultsToRender[project.resultsIndex].episode;
                var matches = project.resultsToRender[project.resultsIndex].matches;
                if (Search.ResultsMarkerIndex == -1) {
                    if(project.resultsIndex == 0 || project.resultsToRender[project.resultsIndex - 1].episode.playerURLPrefix != episode.playerURLPrefix)
                    {
                        Search.ProjectContainer = Search.Prototypes.ProjectContainer.cloneNode(true);
                        for(var i = 0; i < Search.Projects.length; ++i)
                        {
                            if(Search.Projects[i].playerURLPrefix === episode.playerURLPrefix)
                            {
                                Search.ProjectContainer.setAttribute("data-baseURL", Search.Projects[i].baseURL);
                                Search.ProjectContainer.setAttribute("data-searchLocation", Search.Projects[i].searchLocation);
                                Search.ProjectContainer.setAttribute("data-playerLocation", Search.Projects[i].playerLocation);
                                if(Search.Projects[i].filteredOut)
                                {
                                    Search.ProjectContainer.style.display = "none";
                                }
                            }
                        }
                        Search.ResultsContainer.appendChild(Search.ProjectContainer);
                    }
                    else
                    {
                        Search.ProjectContainer = Search.ResultsContainer.lastElementChild;
                    }


                    var dayContainer = episode.dayContainerPrototype.cloneNode(true);
                    var dayName = dayContainer.children[0];
                    Search.MarkerList = dayContainer.children[1];

                    // TODO(matt):  Maybe prepend the entire lineage?
                    dayName.textContent = (project.projectTitleElement.textContent ? project.projectTitleElement.textContent + " / " : "") + (episode.day ? episode.day + ": " : "") + episode.title;

                    Search.ProjectContainer.appendChild(dayContainer);
                    Search.ResultsMarkerIndex = 0;
                    numItems++;
                }        

                while (numItems < maxItems && Search.ResultsMarkerIndex < matches.length) {
                    var match = matches[Search.ResultsMarkerIndex];
                    var marker = episode.markerPrototype.cloneNode(true);
                    marker.setAttribute("href", episode.playerURLPrefix + episode.filename.replace(/"/g, "") + "/#" + match.totalTime);
                        query.lastIndex = 0;
                        var cursor = 0;
                        var text = match.text;
                        var result = null;
                        marker.appendChild(document.createTextNode(match.prettyTime + " "));
                        while (result = query.exec(text)) {
                            if (result.index > cursor) {
                                marker.appendChild(document.createTextNode(text.slice(cursor, result.index)));
                            }
                            var highlightEl = Search.Prototypes.Highlight.cloneNode();
                            highlightEl.textContent = result[0];
                            marker.appendChild(highlightEl);
                            cursor = result.index + result[0].length;
                        }

                    if (cursor < text.length) {
                        marker.appendChild(document.createTextNode(text.slice(cursor, text.length)));
                    }
                    Search.MarkerList.appendChild(marker);
                    numItems++;
                    Search.ResultsMarkerIndex++;
                }

                if (Search.ResultsMarkerIndex == matches.length) {
                    Search.ResultsMarkerIndex = -1;
                    project.resultsIndex++;
                }
            }
            Search.RenderHandle = setTimeout(renderResults, 0);
        } else {
            Search.Rendering = false;
        }
    }
}

function
InitQuery(QueryElement)
{
    if(location.hash && location.hash.length > 0)
    {
        var initialQuery = location.hash;
        if(initialQuery[0] == "#")
        {
            initialQuery = initialQuery.slice(1);
        }
        QueryElement.value = decodeURIComponent(initialQuery);
    }

    if(document.hasFocus() && IsVisible(QueryElement, GetWindowDim(CineraProps.IsMobile))) { QueryElement.focus(); }
}

function
InitPrototypes(ResultsContainer)
{
    Search.Prototypes.ProjectContainer = document.createElement("DIV");
    Search.Prototypes.ProjectContainer.classList.add("projectContainer");

    Search.Prototypes.DayContainer = document.createElement("DIV");
    Search.Prototypes.DayContainer.classList.add("dayContainer");

    var DayName = document.createElement("SPAN");
    DayName.classList.add("dayName");
    Search.Prototypes.DayContainer.appendChild(DayName);

    var MarkerList = document.createElement("DIV");
    MarkerList.classList.add("markerList");
    Search.Prototypes.DayContainer.appendChild(MarkerList);

    Search.Prototypes.Marker = document.createElement("A");
    Search.Prototypes.Marker.classList.add("marker");
    if(ResultsContainer.getAttribute("data-single") == 0)
    {
        Search.Prototypes.Marker.setAttribute("target", "_blank");
    }

    Search.Prototypes.Highlight = document.createElement("B");
}
//
// Processing (Searching / Filtering)

// Presenting / Navigating (Laying out and traversing the grid, and sorting)
//
var state_bit =
{
    DISABLE_ANIMATIONS: 1 << 0,
    SORT_REVERSED: 1 << 1,
    VIEW_LIST: 1 << 2,
    VIEW_GRID: 1 << 3,

    NO_SAVE: 1 << 31,
};

var siblings = 
{
    PREV: 0,
    NEXT: 1,
};

var item_type =
{
    PROJECT: 0,
    ENTRY: 1,
};

var item_end =
{
    HEAD: 0,
    TAIL: 1,
};

var view_type =
{
    LIST: 0,
    GRID: 1,
};

var transition_type =
{
    SIBLING_SHIFT_PREV:  0,
    SIBLING_SHIFT_NEXT:  1,
    PROJECT_ENTRY:       2,
    PROJECT_EXIT:        3,
    SUBDIVISION_DESCENT: 4,
    SUBDIVISION_ASCENT:  5,
};

var interaction_type =
{
    PUSH_BUTTON: 0,
    SIBLING_SHIFT_PREV: 1,
    SIBLING_SHIFT_NEXT: 2,
    ASCEND: 3,
    SORT: 4,
};

var Nav = {
    Nexus: null,
    GridContainer: null,
    ButtonsContainer: null,
    GridSize: {
        X: null,
        Y: null,
    },
    GridMinCellsPerDimension: 1,
    GridMaxCellsPerDimension: 4,
    GridDim: {
        X: null,
        Y: null,
    },
    MinButtonDim: 100,
    ButtonDim: null,
    GridColumnGap: null,
    GridRowGap: null,

    SortChronological: true,
    ViewType: view_type.GRID,
    List: null,
    Grid: null,

    // NOTE(matt):  Controls
    Controls: {
        Header: null,
        Sort: null,
        View: null,
        Anim: null,
        Save: null,

        Help: null,
        HelpDocumentation: null,
        HelpKeys: [],

        GridTraversal: {
            Container: null,
            Header: null,
            Ascend: null,
            Prev: null,
            PrevAscends: false,
            Next: null,
            NextAscends: false,
        },
    },

    Buttons: [],

    Transition: {
        Enabled: true,
        ButtonsTransitionContainer: null,
        ButtonsContainerCloneElement: null,
        RelevantButtonElement: null,

        StageDurations: [],

        Transforms: {
            ButtonsTransitionContainer: {
                Initial: {
                    Pos: { X: 0, Y: 0, },
                    Scale: { X: 1, Y: 1, },
                    Rotation: { X: 0, Y: 0, Z: 0, },
                    Opacity: 1,
                    ScrollX: 0,
                    ZIndex: 0,
                },
                Current: {
                    Pos: { X: 0, Y: 0, },
                    Scale: { X: 1, Y: 1, },
                    Rotation: { X: 0, Y: 0, Z: 0, },
                    Opacity: 1,
                    ScrollX: 0,
                    ZIndex: 0,
                },
                TargetStages: [],
            },
            ButtonsContainer: {
                Initial: {
                    Pos: { X: 0, Y: 0, },
                    Scale: { X: 1, Y: 1, },
                    Rotation: { X: 0, Y: 0, Z: 0, },
                    Opacity: 1,
                    ScrollX: 0,
                    ZIndex: 0,
                },
                Current: {
                    Pos: { X: 0, Y: 0, },
                    Scale: { X: 1, Y: 1, },
                    Rotation: { X: 0, Y: 0, Z: 0, },
                    Opacity: 1,
                    ScrollX: 0,
                    ZIndex: 0,
                },
                TargetStages: [],
            },
            ButtonsContainerClone: {
                Initial: {
                    Pos: { X: 0, Y: 0, },
                    Scale: { X: 1, Y: 1, },
                    Rotation: { X: 0, Y: 0, Z: 0, },
                    Opacity: 1,
                    ScrollX: 0,
                    ZIndex: 0,
                },
                Current: {
                    Pos: { X: 0, Y: 0, },
                    Scale: { X: 1, Y: 1, },
                    Rotation: { X: 0, Y: 0, Z: 0, },
                    Opacity: 1,
                    ScrollX: 0,
                    ZIndex: 0,
                },
                TargetStages: [],
            },
            RelevantButton: {
                Initial: {
                    Pos: { X: 0, Y: 0, },
                    Scale: { X: 1, Y: 1, },
                    Rotation: { X: 0, Y: 0, Z: 0, },
                    Opacity: 1,
                    ScrollX: 0,
                    ZIndex: 0,
                },
                Current: {
                    Pos: { X: 0, Y: 0, },
                    Scale: { X: 1, Y: 1, },
                    Rotation: { X: 0, Y: 0, Z: 0, },
                    Opacity: 1,
                    ScrollX: 0,
                    ZIndex: 0,
                },
                TargetStages: [],
            },
        },

        StartTime: undefined,
        RequestedFrame: undefined,
    },

    InteractionQueue: [],
    TraversalStack: [],
    State: null,
};

function
StateBitIsSet(Bit)
{
    return Nav.State & Bit;
}

function
StateBitIsClear(Bit)
{
    return !(Nav.State & Bit);
}

function
MaintainingState()
{
    return StateBitIsClear(state_bit.NO_SAVE);
}

function
SaveState()
{
    localStorage.setItem("CineraState", Nav.State);
}

function
SetStateBit(Bit)
{
    if(MaintainingState()) { Nav.State |= Bit; SaveState(); }
}

function
ClearStateBit(Bit)
{
    if(MaintainingState()) { Nav.State &= ~Bit; SaveState(); }
}

function
SetHelpKeyAvailability(GridSize)
{
    for(var i = 0; i < Nav.Controls.HelpKeys.length; ++i)
    {
        Nav.Controls.HelpKeys[i].classList.remove("unavailable");
    }

    /* NOTE(matt):  Key layout:
                        0    4    8   12
                        1    5    9   13
                        2    6   10   14
                        3    7   11   15
     */

    if(GridSize.X < 4)
    {
        Nav.Controls.HelpKeys[12].classList.add("unavailable");
        Nav.Controls.HelpKeys[13].classList.add("unavailable");
        Nav.Controls.HelpKeys[14].classList.add("unavailable");
        Nav.Controls.HelpKeys[15].classList.add("unavailable");

        if(GridSize.X < 3)
        {
            Nav.Controls.HelpKeys[8].classList.add("unavailable");
            Nav.Controls.HelpKeys[9].classList.add("unavailable");
            Nav.Controls.HelpKeys[10].classList.add("unavailable");
            Nav.Controls.HelpKeys[11].classList.add("unavailable");

            if(GridSize.X < 2)
            {
                Nav.Controls.HelpKeys[4].classList.add("unavailable");
                Nav.Controls.HelpKeys[5].classList.add("unavailable");
                Nav.Controls.HelpKeys[6].classList.add("unavailable");
                Nav.Controls.HelpKeys[7].classList.add("unavailable");

                if(GridSize.X < 1)
                {
                    Nav.Controls.HelpKeys[0].classList.add("unavailable");
                    Nav.Controls.HelpKeys[1].classList.add("unavailable");
                    Nav.Controls.HelpKeys[2].classList.add("unavailable");
                    Nav.Controls.HelpKeys[3].classList.add("unavailable");
                }
            }
        }
    }

    if(GridSize.Y < 4)
    {
        Nav.Controls.HelpKeys[3].classList.add("unavailable");
        Nav.Controls.HelpKeys[7].classList.add("unavailable");
        Nav.Controls.HelpKeys[11].classList.add("unavailable");
        Nav.Controls.HelpKeys[15].classList.add("unavailable");

        if(GridSize.Y < 3)
        {
            Nav.Controls.HelpKeys[2].classList.add("unavailable");
            Nav.Controls.HelpKeys[6].classList.add("unavailable");
            Nav.Controls.HelpKeys[10].classList.add("unavailable");
            Nav.Controls.HelpKeys[14].classList.add("unavailable");

            if(GridSize.Y < 2)
            {
                Nav.Controls.HelpKeys[1].classList.add("unavailable");
                Nav.Controls.HelpKeys[5].classList.add("unavailable");
                Nav.Controls.HelpKeys[9].classList.add("unavailable");
                Nav.Controls.HelpKeys[13].classList.add("unavailable");

                if(GridSize.Y < 1)
                {
                    Nav.Controls.HelpKeys[0].classList.add("unavailable");
                    Nav.Controls.HelpKeys[4].classList.add("unavailable");
                    Nav.Controls.HelpKeys[8].classList.add("unavailable");
                    Nav.Controls.HelpKeys[12].classList.add("unavailable");
                }
            }
        }
    }
}

function
InitHelpKeys(HelpDocumentation)
{
    var Paragraph = HelpDocumentation.querySelector(".help_paragraph");
    Nav.Controls.HelpKeys = Paragraph.querySelectorAll(".help_key");
}

function
SyncNavState()
{
    Nav.State = localStorage.getItem("CineraState");
    if(Nav.State)
    {
        if(MaintainingState())
        {
            if(StateBitIsSet(state_bit.DISABLE_ANIMATIONS)) { ToggleAnimations(); }
            if(StateBitIsSet(state_bit.SORT_REVERSED)) { Sort(true); }

            // Nav.ViewType is initialised to view_type.GRID, so we needn't do anything if the Nav.State is also on Grid
            if(StateBitIsSet(state_bit.VIEW_LIST) || !GridSizeIsSupported(Nav.GridSize))
            {
                ToggleView();
            }
        }
        else
        {
            Nav.Controls.Save.textContent = "Save Settings: ✘";
            // Nav.ViewType was initialised to view_type.GRID
            if(!GridSizeIsSupported(Nav.GridSize))
            {
                ToggleView();
            }
        }
    }
    else
    {
        Nav.State = 0;
        SetStateBit(state_bit.VIEW_GRID); // NOTE(matt): Nav.ViewType was initialised to view_type.GRID
        if(!GridSizeIsSupported(Nav.GridSize))
        {
            ToggleView();
        }
    }
}

function
InitTraversalStack()
{
    Nav.List = document.getElementById("cineraIndexList");

    var Projects = Nav.List.querySelectorAll(":scope > .cineraIndexProject");

    var Level = {
        Projects: null,
        Entries: null,
        HeadIndex: null,
        TailIndex: null,
    }

    if(Projects.length === 1)
    {
        // NOTE(matt): Automatically descend into the lone project
        Level.Projects = Projects[0].querySelectorAll(":scope > .cineraIndexProject");
        Level.Entries = Projects[0].querySelectorAll(":scope > .cineraIndexEntries > div");
    }
    else
    {
        Level.Projects = Projects;
        // NOTE(matt):  The top-level "root" cannot itself contain any entries
    }

    Nav.TraversalStack.push(Level);
}

function
ComputeFullButtonItemCount(ParentItemCount, AvailableButtonCount)
{
    return ParentItemCount > 0 ? Math.ceil(ParentItemCount / AvailableButtonCount) : 0;
}

function
EmptyElement(Element)
{
    while(Element.firstChild) { Element.removeChild(Element.firstChild); }
}

function
SetDim(Element, X, Y)
{
    Element.style.width = X;
    Element.style.height = Y;
}

function
EmptyAndResetButton(Button)
{
    EmptyElement(Button.Element);
    Button.Element.style.fontSize = null;
    Button.Element.style.fontWeight = null;

    SetDim(Button.Element, null, null);

    for(var i = 0; i < Button.Element.classList.length;)
    {
        var Class = Button.Element.classList[i];
        if(Class != "cineraButton" && Class != "subdivision")
        {
            Button.Element.classList.remove(Class);
        }
        else
        {
            ++i;
        }
    }

    Button.Projects = null;
    Button.Entries = null;
    Button.HeadIndex = null;
    Button.TailIndex = null;
}

function
HasPrevSibling(Level)
{
    return Level.HeadIndex && Level.HeadIndex > 0;
}

function
HasNextSibling(Level)
{
    return Level.TailIndex && Level.TailIndex < (Level.Entries ? Level.Entries.length : Level.Projects.length) - 1;
}

function
Diff(A, B)
{
    return Math.abs(A - B);
}

function
SetButtonInfo(NewButton, Prev, Level, Distribution)
{
    var Result = {
        HeadIndex: null,
        TailIndex: null,
        ItemCount: null,
        Theme: null,
    }
    var ItemsToPlace = null;
    var FullButtonItemCount = null;

    if(Distribution.ProjectsToPlace)
    {
        ItemsToPlace = Distribution.ProjectsToPlace;
        FullButtonItemCount = Distribution.FullButtonProjectCount;
    }
    else if(Distribution.EntriesToPlace)
    {
        ItemsToPlace = Distribution.EntriesToPlace;
        FullButtonItemCount = Distribution.FullButtonEntryCount;
        Result.Theme = Level.Entries[0].parentElement.parentElement.classList[1];
    }

    Result.ItemCount = ItemsToPlace > FullButtonItemCount ? FullButtonItemCount : ItemsToPlace;
    if(Result.ItemCount > 0)
    {
        Result.HeadIndex = Prev ? Prev.TailIndex + 1 : Level.HeadIndex ? Level.HeadIndex : 0;
        Result.TailIndex = Result.HeadIndex + Result.ItemCount - 1;
        if(Result.ItemCount > 1)
        {
            if(Result.Theme == null)
            {
                Result.Theme = Level.Projects[Result.HeadIndex].classList[1];
            }
            NewButton.HeadIndex = Result.HeadIndex;
            NewButton.TailIndex = Result.TailIndex;
        }
        else if(Level.Projects && Level.Projects.length > 0)
        {
            if(Distribution.ProjectsToPlace)
            {
                NewButton.Projects = Level.Projects[Result.HeadIndex].querySelectorAll(":scope > .cineraIndexProject");
                Result.Theme = Level.Projects[Result.HeadIndex].classList[1];
            }
            else
            {
                NewButton.Entries = Level.Projects[Result.HeadIndex].querySelectorAll(":scope > .cineraIndexEntries > div");
            }
        }
    }
	return Result;
}

function
ComputeItemDistribution(Level)
{
    var Result = {
        ProjectsToPlace: Level.Projects ? Level.HeadIndex !== null && Level.TailIndex !== null ? Diff(Level.HeadIndex, Level.TailIndex) + 1 : Level.Projects.length : 0,
        ButtonsForProjects: 0,
        FullButtonProjectCount: 0,

        EntriesToPlace: Level.Entries ? Level.HeadIndex !== null && Level.TailIndex !== null ? Diff(Level.HeadIndex, Level.TailIndex) + 1 : Level.Entries.length : 0,
        ButtonsForEntries: 0,
        FullButtonEntryCount: 0,
    };

    // NOTE(matt): Reserving the top row for projects
    if(Result.ProjectsToPlace > 0 && Result.EntriesToPlace > 0)
    {
        Result.ButtonsForProjects = Math.min(Nav.GridSize.X, Result.ProjectsToPlace);
    }
    Result.ButtonsForEntries = Nav.Buttons.length - Result.ButtonsForProjects;
    if(Result.EntriesToPlace < Result.ButtonsForEntries)
    {
        Result.ButtonsForProjects += (Result.ButtonsForEntries - Result.EntriesToPlace);
        Result.ButtonsForEntries = Nav.Buttons.length - Result.ButtonsForProjects;
    }

    Result.FullButtonProjectCount = ComputeFullButtonItemCount(Result.ProjectsToPlace, Result.ButtonsForProjects);
    Result.FullButtonEntryCount = ComputeFullButtonItemCount(Result.EntriesToPlace, Result.ButtonsForEntries);

    return Result;
}

function
ResetTransform(Transform, IgnoreSorting)
{
    Transform.Pos.X = 0;
    Transform.Pos.Y = 0;

    Transform.Scale.X = 1;
    Transform.Scale.Y = 1;

    Transform.Rotation.X = 0;
    Transform.Rotation.Y = 0;
    Transform.Rotation.Z = (Nav.SortChronological || IgnoreSorting) ? 0 : 180;

    Transform.Opacity = 1;

    Transform.ScrollX = 0;

    Transform.ZIndex = null;
}

function
ResetButtonsContainerClone()
{
    EmptyElement(Nav.Transition.ButtonsContainerCloneElement);

    ResetTransform(Nav.Transition.Transforms.ButtonsTransitionContainer.Current, true);
    ResetTransform(Nav.Transition.Transforms.ButtonsTransitionContainer.Initial, true);
    ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);

    ResetTransform(Nav.Transition.Transforms.ButtonsContainer.Current);
    ResetTransform(Nav.Transition.Transforms.ButtonsContainer.Initial);
    ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);

    ResetTransform(Nav.Transition.Transforms.ButtonsContainerClone.Current);
    ResetTransform(Nav.Transition.Transforms.ButtonsContainerClone.Initial);
    ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);

    Nav.Transition.ButtonsContainerCloneElement.style.gridTemplateColumns = Nav.ButtonsContainer.style.gridTemplateColumns;
    Nav.Transition.ButtonsContainerCloneElement.style.gridTemplateRows = Nav.ButtonsContainer.style.gridTemplateRows;

    Nav.Transition.ButtonsContainerCloneElement.style.paddingRight = null;
    Nav.Transition.ButtonsContainerCloneElement.style.paddingLeft = null;
    Nav.Transition.ButtonsContainerCloneElement.style.position = "absolute";

    if(Nav.Transition.RelevantButtonElement)
    {
        ResetTransform(Nav.Transition.Transforms.RelevantButton.Current, true);
        ResetTransform(Nav.Transition.Transforms.RelevantButton.Initial, true);
        ApplyTransform(Nav.Transition.RelevantButtonElement, Nav.Transition.Transforms.RelevantButton.Current);
        Nav.Transition.RelevantButtonElement = null;
    }

    Nav.ButtonsContainer.style.zIndex = 1;
    Nav.ButtonsContainer.style.order = 1;
    Nav.Transition.ButtonsContainerCloneElement.style.order = 0;
    Nav.Transition.ButtonsContainerCloneElement.style.display = "none";
}

function
CloneButtonsContainer()
{
    ResetButtonsContainerClone();
    for(var i = 0; i < Nav.ButtonsContainer.children.length; ++i)
    {
        var ChildClone = Nav.ButtonsContainer.children[i].cloneNode(true);
        Nav.Transition.ButtonsContainerCloneElement.appendChild(ChildClone);
    }

    CopyTransform(Nav.Transition.Transforms.ButtonsContainerClone.Current, Nav.Transition.Transforms.ButtonsContainer.Current);
    ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
    Nav.Transition.ButtonsContainerCloneElement.style.zIndex = 1;
    Nav.Transition.ButtonsContainerCloneElement.style.display = "grid";
}

function
GetIndexOfElement(ParentNodeList, Element)
{
    var Result = null;
    for(var i = 0; i < ParentNodeList.length; ++i)
    {
        if(Element == ParentNodeList[i])
        {
            Result = i;
            break;
        }
    }
    return Result;
}

function
GetIndexOfButton(Button)
{
    var Result = null;
    for(var i = 0; i < Nav.Buttons.length; ++i)
    {
        if(Button == Nav.Buttons[i])
        {
            Result = i
            break;
        }
    }
    return Result;
}

function
ApplyTransform(Element, Transform)
{
    var TranslateStyle = "translate(" + Transform.Pos.X + "px, " + Transform.Pos.Y + "px)";
    var ScaleStyle = "scale(" + Transform.Scale.X + "," + Transform.Scale.Y + ")";
    var RotateX = "rotate3d(1, 0, 0, " + Transform.Rotation.X + "deg)";
    var RotateY = "rotate3d(0, 1, 0, " + Transform.Rotation.Y + "deg)";
    var RotateZ = "rotate3d(0, 0, 1, " + Transform.Rotation.Z + "deg)";
    var RotateStyle = RotateX + " " + RotateY + " " + RotateZ;

    var TransformString = TranslateStyle + " " + ScaleStyle + " " + RotateStyle;

    Element.style.transform = TransformString;
    Element.style.opacity = Transform.Opacity;
    Element.style.zIndex = Transform.ZIndex;

    if(Transform.ScrollX !== null)
    {
        Element.scrollLeft = Transform.ScrollX;
    }
}

function
CopyTransform(Dest, Src)
{
    Dest.Pos.X = Src.Pos.X;
    Dest.Pos.Y = Src.Pos.Y;

    Dest.Scale.X = Src.Scale.X;
    Dest.Scale.Y = Src.Scale.Y;

    Dest.Rotation.X = Src.Rotation.X;
    Dest.Rotation.Y = Src.Rotation.Y;
    Dest.Rotation.Z = Src.Rotation.Z;

    Dest.Opacity = Src.Opacity;

    Dest.ScrollX = Src.ScrollX;

    Dest.ZIndex = Src.ZIndex;
}

function
TransformsMatch(Current, Target)
{
    var Result = true;
    if((Target.Pos.X != null && Target.Pos.X != Current.Pos.X) ||
        (Target.Pos.Y != null && Target.Pos.Y != Current.Pos.Y) ||
        (Target.Scale.X != null && Target.Scale.X != Current.Scale.X) ||
        (Target.Scale.Y != null && Target.Scale.Y != Current.Scale.Y) ||
        (Target.Rotation.X != null && Target.Rotation.X != Current.Rotation.X) ||
        (Target.Rotation.Y != null && Target.Rotation.Y != Current.Rotation.Y) ||
        (Target.Rotation.Z != null && Target.Rotation.Z != Current.Rotation.Z) ||
        (Target.Opacity != null && Target.Opacity != Current.Opacity) ||
        (Target.ScrollX != null && Target.ScrollX != Current.ScrollX) ||
        (Target.ZIndex != null && Target.ZIndex != Current.ZIndex))
    {
        Result = false;
    }
    return Result;
}

function
TransformsComplete(TransformSet)
{
    var Result = true;

    var ButtonsContainer = TransformSet.ButtonsContainer;
    var ButtonsContainerClone = TransformSet.ButtonsContainerClone;
    var ButtonsTransitionContainer = TransformSet.ButtonsTransitionContainer;
    var RelevantButton = TransformSet.RelevantButton;

    if((ButtonsContainer.TargetStages.length && !TransformsMatch(ButtonsContainer.Current, ButtonsContainer.TargetStages[0])) ||
        (ButtonsContainerClone.TargetStages.length && !TransformsMatch(ButtonsContainerClone.Current, ButtonsContainerClone.TargetStages[0])) ||
        (ButtonsTransitionContainer.TargetStages.length && !TransformsMatch(ButtonsTransitionContainer.Current, ButtonsTransitionContainer.TargetStages[0])) ||
        (RelevantButton.TargetStages.length && !TransformsMatch(RelevantButton.Current, RelevantButton.TargetStages[0])))
    {
        Result = false;
    }
    return Result;
}

function
FinaliseTransforms(TransformsSet)
{
    Nav.Transition.StartTime = undefined;
    CopyTransform(TransformsSet.ButtonsTransitionContainer.Initial, TransformsSet.ButtonsTransitionContainer.Current);
    CopyTransform(TransformsSet.ButtonsContainer.Initial, TransformsSet.ButtonsContainer.Current);
    CopyTransform(TransformsSet.ButtonsContainerClone.Initial, TransformsSet.ButtonsContainerClone.Current);
    CopyTransform(TransformsSet.RelevantButton.Initial, TransformsSet.RelevantButton.Current);
    ShiftStage();
}

function
LerpTransforms(TransformSet, t)
{
    var Result = false;
    if(TransformSet.TargetStages.length)
    {
        var Initial = TransformSet.Initial;
        var Current = TransformSet.Current;
        var Target = TransformSet.TargetStages[0];
        if(Target.Pos.X !== null) { Current.Pos.X = Lerp(Initial.Pos.X, t, Target.Pos.X); Result = true; }
        if(Target.Pos.Y !== null) { Current.Pos.Y = Lerp(Initial.Pos.Y, t, Target.Pos.Y); Result = true; }

        if(Target.Scale.X !== null) { Current.Scale.X = Lerp(Initial.Scale.X, t, Target.Scale.X); Result = true; }
        if(Target.Scale.Y !== null) { Current.Scale.Y = Lerp(Initial.Scale.Y, t, Target.Scale.Y); Result = true; }

        if(Target.Rotation.X !== null) { Current.Rotation.X = Lerp(Initial.Rotation.X, t, Target.Rotation.X); Result = true; }
        if(Target.Rotation.Y !== null) { Current.Rotation.Y = Lerp(Initial.Rotation.Y, t, Target.Rotation.Y); Result = true; }
        if(Target.Rotation.Z !== null) { Current.Rotation.Z = Lerp(Initial.Rotation.Z, t, Target.Rotation.Z); Result = true; }

        if(Target.Opacity !== null) { Current.Opacity = Lerp(Initial.Opacity, t, Target.Opacity); Result = true; }

        if(Target.ScrollX !== null) { Current.ScrollX = Lerp(Initial.ScrollX, t, Target.ScrollX); Result = true; }

        if(Target.ZIndex !== null) { Current.ZIndex = Lerp(Initial.ZIndex, t, Target.ZIndex); Result = true; }
    }
    return Result;
}

function
ShiftStage()
{
    if(Nav.Transition.StageDurations.length) { Nav.Transition.StageDurations.shift(); }
    if(Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.length) { Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.shift(); }
    if(Nav.Transition.Transforms.ButtonsContainer.TargetStages.length) { Nav.Transition.Transforms.ButtonsContainer.TargetStages.shift(); }
    if(Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.length) { Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.shift(); }
    if(Nav.Transition.Transforms.RelevantButton.TargetStages.length) { Nav.Transition.Transforms.RelevantButton.TargetStages.shift(); }
}

function
MergeTransform(Dest, Src)
{
    if(Src.Pos.X !== null) { Dest.Pos.X = Src.Pos.X; }
    if(Src.Pos.Y !== null) { Dest.Pos.Y = Src.Pos.Y; }

    if(Src.Scale.X !== null) { Dest.Scale.X = Src.Scale.X; }
    if(Src.Scale.Y !== null) { Dest.Scale.Y = Src.Scale.Y; }

    if(Src.Rotation.X !== null) { Dest.Rotation.X = Src.Rotation.X; }
    if(Src.Rotation.Y !== null) { Dest.Rotation.Y = Src.Rotation.Y; }
    if(Src.Rotation.Z !== null) { Dest.Rotation.Z = Src.Rotation.Z; }

    if(Src.Opacity !== null) { Dest.Opacity = Src.Opacity; }

    if(Src.ScrollX !== null) { Dest.ScrollX = Src.ScrollX; }

    if(Src.ZIndex !== null) { Dest.ZIndex = Src.ZIndex; }
}

function
DoTransitionStage(Now)
{
    if(Nav.Transition.StageDurations.length)
    {
        if(Nav.Transition.StartTime === undefined)
        {
            Nav.Transition.StartTime = Now;
        }

        var Elapsed = Now - Nav.Transition.StartTime;
        var Duration = Nav.Transition.StageDurations[0];
        if(Duration === 0)
        {
            // Instant transform
            if(Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.length)
            {
                MergeTransform(Nav.Transition.Transforms.ButtonsTransitionContainer.Current, Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages[0]);
                ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
            }
            if(Nav.Transition.Transforms.ButtonsContainer.TargetStages.length)
            {
                MergeTransform(Nav.Transition.Transforms.ButtonsContainer.Current, Nav.Transition.Transforms.ButtonsContainer.TargetStages[0]);
                ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
            }
            if(Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.length)
            {
                MergeTransform(Nav.Transition.Transforms.ButtonsContainerClone.Current, Nav.Transition.Transforms.ButtonsContainerClone.TargetStages[0]);
                ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
            }
            if(Nav.Transition.Transforms.RelevantButton.TargetStages.length)
            {
                MergeTransform(Nav.Transition.Transforms.RelevantButton.Current, Nav.Transition.Transforms.RelevantButton.TargetStages[0]);
                ApplyTransform(Nav.Transition.RelevantButtonElement, Nav.Transition.Transforms.RelevantButton.Current);
            }
        }
        else
        {
            // Lerp
            var t = Clamp01(Elapsed / Duration);
            if(LerpTransforms(Nav.Transition.Transforms.ButtonsTransitionContainer, t))
            {
                ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
            }
            if(LerpTransforms(Nav.Transition.Transforms.ButtonsContainer, t))
            {
                ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
            }
            if(LerpTransforms(Nav.Transition.Transforms.ButtonsContainerClone, t))
            {
                ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
            }
            if(LerpTransforms(Nav.Transition.Transforms.RelevantButton, t))
            {
                ApplyTransform(Nav.Transition.RelevantButtonElement, Nav.Transition.Transforms.RelevantButton.Current);
            }
        }
        if(TransformsComplete(Nav.Transition.Transforms))
        {
            FinaliseTransforms(Nav.Transition.Transforms);
        }
        Nav.Transition.RequestedFrame = window.requestAnimationFrame(DoTransitionStage);
    }
    else
    {
        Nav.Transition.RequestedFrame = undefined;
        ResetButtonsContainerClone();
        DequeueInteraction();
    }
}

function
CompressTransitionStages()
{
    while(Nav.Transition.StageDurations.length > 1)
    {
        Nav.Transition.StageDurations.shift()
    }
    Nav.Transition.StageDurations[0] = 0;
    
    while(Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.length > 1)
    {
        Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.shift();
    }

    while(Nav.Transition.Transforms.ButtonsContainer.TargetStages.length > 1)
    {
        Nav.Transition.Transforms.ButtonsContainer.TargetStages.shift();
    }

    while(Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.length > 1)
    {
        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.shift();
    }

    while(Nav.Transition.Transforms.RelevantButton.TargetStages.length > 1)
    {
        Nav.Transition.Transforms.RelevantButton.TargetStages.shift();
    }
}

function
DoTransition()
{
    if(Nav.Transition.Enabled == false)
    {
        CompressTransitionStages();
    }

    CopyTransform(Nav.Transition.Transforms.ButtonsTransitionContainer.Initial, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
    CopyTransform(Nav.Transition.Transforms.ButtonsContainer.Initial, Nav.Transition.Transforms.ButtonsContainer.Current);
    CopyTransform(Nav.Transition.Transforms.ButtonsContainerClone.Initial, Nav.Transition.Transforms.ButtonsContainerClone.Current);
    CopyTransform(Nav.Transition.Transforms.RelevantButton.Initial, Nav.Transition.Transforms.RelevantButton.Current);

    Nav.Transition.StartTime = undefined;
    Nav.Transition.RequestedFrame = window.requestAnimationFrame(DoTransitionStage);
}

function
NodesMatch(A, B)
{
    var Result = false;
    var i = 0;
    if(A && B)
    {
        Result = true;
        for(; i < A.length && i < B.length && A[i] == B[i];)
        {
            ++i;
        }
        if(i != A.length || i != B.length)
        {
            Result = false;
        }
    }
    else if(!A && !B)
    {
        Result = true;
    }
    return Result;
}

function
ButtonAndLevelMatch(Button, Level)
{
    var Result = true;
    if(Button && Level)
    {
        var ButtonProjects = Button.Projects;
        var ButtonEntries = Button.Entries;
        if(Button.Projects && Button.Projects.length === undefined)
        {
            ButtonProjects = Button.Projects.querySelectorAll(":scope > .cineraIndexProject");
            ButtonEntries = Button.Projects.querySelectorAll(":scope > .cineraIndexEntries > div");
            if(ButtonProjects.length == 0)
            {
                ButtonProjects = null;
            }
            if(ButtonEntries.length == 0)
            {
                ButtonEntries = null;
            }
        }

        if(!NodesMatch(Level.Projects, ButtonProjects))
        {
            Result = false;
        }

        if(!NodesMatch(Level.Entries, ButtonEntries))
        {
            Result = false;
        }

        if(Button.HeadIndex != Level.HeadIndex)
        {
            Result = false;
        }
        if(Button.TailIndex != Level.TailIndex)
        {
            Result = false;
        }
    }
    return Result;
}

function
NullTarget()
{
    let Result = {
        Pos: { X: null, Y: null, }, Scale: { X: null, Y: null, }, Rotation: { X: null, Y: null, Z: null, },
        Opacity: null, ScrollX: null, ZIndex: null,
    };
    return Result;
}

function
ComputeButtonGeometryRelativeToGrid(Button)
{
    var Result = {
        Pos: {
            X: null,
            Y: null,
        },
        Scale: {
            X: null,
            Y: null,
        },
    };

    var ButtonStyle = window.getComputedStyle(Button);

    var GridDimX = Nav.GridDim.X;
    var GridDimY = Nav.GridDim.Y;

    var ButtonDimX = parseInt(ButtonStyle.width);
    var ButtonDimY = parseInt(ButtonStyle.height);

    Result.Scale.X = ButtonDimX / GridDimX;
    Result.Scale.Y = ButtonDimY / GridDimY;

    var ButtonPosX = Button.offsetLeft;
    var ButtonPosY = Button.offsetTop;

    if(!Nav.SortChronological)
    {
        ButtonPosX = GridDimX - ButtonPosX - ButtonDimX;
        ButtonPosY = GridDimY - ButtonPosY - ButtonDimY;
    }

    var ButtonCentreX = ButtonDimX / 2 + ButtonPosX;
    var ButtonCentreY = ButtonDimY / 2 + ButtonPosY;

    var GridCentreX = GridDimX / 2;
    var GridCentreY = GridDimY / 2;

    Result.Pos.X = ButtonCentreX - GridCentreX;
    Result.Pos.Y = ButtonCentreY - GridCentreY;

    return Result;
}

function
GetItemType(Level)
{
    var Result = null;
    if(Level.Projects && Level.Projects.length !== undefined && Level.Projects.length > 0)
    {
        Result = item_type.PROJECT;
    }
    else if(Level.Entries && Level.Entries.length !== undefined && Level.Entries.length > 0)
    {
        Result = item_type.ENTRY;
    }
    return Result;
}

function
GetTraversalLevelBundle()
{
    var Result = {
        Generation: null,
        This: null,
        Parent: null,
        Type: null
    };
    Result.Generation = Nav.TraversalStack.length;
    Result.This = Nav.TraversalStack[Result.Generation - 1];
    Result.Parent = Nav.TraversalStack[Result.Generation - 2];
    Result.Type = GetItemType(Result.This);
    return Result;
}

function
FitText(Element, ItemEnd)
{
    var Paragraph = Element.firstElementChild;
    var ParagraphStyle = window.getComputedStyle(Paragraph);
    var ElementStyle = window.getComputedStyle(Element);
    var Width = parseInt(ElementStyle.width);
    var Height = parseInt(ElementStyle.height);

    Element.style.alignItems = "flex-start"; // NOTE(matt): Allows IsOverflowed() to work on a flex-end Element
    var FontSize = parseInt(window.getComputedStyle(Element).fontSize);
    while(FontSize >= 10.2 && (IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height))
    {
        FontSize -= 0.2;
        Element.style.fontSize = FontSize + "px";
    }

    if(IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height)
    {
        Element.style.fontWeight = "normal";
    }

    var IsHeadOrTailAndTooTallForElement = ItemEnd !== undefined && (Element.scrollHeight > Element.clientHeight || parseInt(ParagraphStyle.height) > Height);
    // NOTE(matt):  Leave "flex-start" in place for tall items, to keep their beginning visible
    if(!IsHeadOrTailAndTooTallForElement)
    {
        Element.style.alignItems = null;
    }
}

function
AppendItemToButton(Button, Text, ItemEnd)
{
    var ButtonElementStyle = window.getComputedStyle(Button.Element);
    var VerticalBorderAllowance = parseInt(ButtonElementStyle.borderLeftWidth) + parseInt(ButtonElementStyle.borderRightWidth);
    var HorizontalBorderAllowance;
    var ItemElement = document.createElement("div");
    ItemElement.classList.add("cineraText");
    switch(ItemEnd)
    {
        case item_end.HEAD:
            {
                HorizonalBorderAllowance = parseInt(ButtonElementStyle.borderTopWidth);
                ItemElement.classList.add("head-item");
            } break;
        case item_end.TAIL:
            {
                HorizonalBorderAllowance = parseInt(ButtonElementStyle.borderBottomWidth);
                ItemElement.classList.add("tail-item");
            } break;
    }

    if(!Nav.SortChronological)
    {
        ItemElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
    }

    var ParagraphNode = document.createElement("p");
    ParagraphNode.textContent = Text;
    ItemElement.appendChild(ParagraphNode);
    var Item = Button.Element.appendChild(ItemElement);

    // NOTE(matt):  This enables Safari to apply height 50% to the head / tail items
    var ButtonWidth = parseInt(ButtonElementStyle.width);
    var ButtonHeight = parseInt(ButtonElementStyle.height);
    SetDim(Button.Element, ButtonWidth + "px", ButtonHeight + "px");
    ////

    FitText(Item, ItemEnd);
}

function
UpdateButtons(TransitionType, RelevantButton, PoppedLevel)
{
    if(GridSizeIsSupported(Nav.GridSize))
    {
        var LevelBundle = GetTraversalLevelBundle();

        Nav.Controls.GridTraversal.Prev.children[0].textContent = "←";
        Nav.Controls.GridTraversal.PrevAscends = false;
        Nav.Controls.GridTraversal.NextAscends = false;
        if(LevelBundle.Generation <= 1)
        {
            Nav.Controls.GridTraversal.Ascend.classList.add("nowhere");
            Nav.Controls.GridTraversal.Prev.classList.add("nowhere");
            Nav.Controls.GridTraversal.Next.classList.add("nowhere");
            Nav.Controls.GridTraversal.Next.classList.remove("ascension");
        }
        else
        {
            Nav.Controls.GridTraversal.Ascend.classList.remove("nowhere");
            Nav.Controls.GridTraversal.Prev.classList.remove("nowhere");
            Nav.Controls.GridTraversal.Next.classList.remove("nowhere");

            if(!HasPrevSibling(LevelBundle.This))
            {
                Nav.Controls.GridTraversal.Prev.classList.add("nowhere");
            }
            else if(SiblingIsLeaf(siblings.PREV))
            {
                Nav.Controls.GridTraversal.PrevAscends = true;
                Nav.Controls.GridTraversal.Prev.children[0].textContent = Nav.SortChronological ? "↰" : "↲";
            }

            if(!HasNextSibling(LevelBundle.This))
            {
                Nav.Controls.GridTraversal.Next.classList.add("nowhere");
                Nav.Controls.GridTraversal.Next.classList.remove("ascension");
            }
            else if(SiblingIsLeaf(siblings.NEXT))
            {
                Nav.Controls.GridTraversal.NextAscends = true;
                Nav.Controls.GridTraversal.Next.classList.add("ascension");
            }
            else
            {
                Nav.Controls.GridTraversal.Next.classList.remove("ascension");
            }
        }

        var Distribution = ComputeItemDistribution(LevelBundle.This);

        // NOTE(matt):  Centre-alignment. If people would prefer left-alignment, we do that here
        //
        //              We're doing simple 1D centring here, so would need to do correct 2D centring
        var HalfEmptyButtonCount = (Nav.Buttons.length - (Distribution.ProjectsToPlace + Distribution.EntriesToPlace)) / 2;
        var EmptyPadding = 0;
        //EmptyPadding = Math.floor(HalfEmptyButtonCount); // NOTE(matt): Comment out to disable centring
        //

        var Prev = null;
        var ButtonInfo = { HeadIndex: null, TailIndex: null, ItemCount: null, Theme: null, };
        var DoingEntries = false;

        if(TransitionType !== undefined)
        {
            CloneButtonsContainer();
        }

        for(var ButtonIndex = 0; ButtonIndex < Nav.Buttons.length; ++ButtonIndex)
        {
            let This = Nav.Buttons[ButtonIndex];
            EmptyAndResetButton(This);
            if(EmptyPadding > 0)
            {
                --EmptyPadding;
            }
            else
            {
                if(Distribution.ProjectsToPlace > 0 || Distribution.EntriesToPlace > 0)
                {
                    if(Distribution.ProjectsToPlace > 0)
                    {
                        This.Projects = LevelBundle.This.Projects;
                        if(Distribution.ProjectsToPlace == 1 || Distribution.ProjectsToPlace == Distribution.ButtonsForProjects - ButtonIndex)
                        {
                            Distribution.FullButtonProjectCount = 1;
                        }

                        ButtonInfo = SetButtonInfo(This, Prev, LevelBundle.This, Distribution);
                        if(ButtonInfo.ItemCount == 1)
                        {
                            This.Projects = LevelBundle.This.Projects[ButtonInfo.HeadIndex];
                        }
                        Distribution.ProjectsToPlace -= ButtonInfo.ItemCount;

                        if(Distribution.FullButtonProjectCount == 1)
                        {
                            This.Element.classList.add("leaf");
                            var TextElement = document.createElement("p");
                            TextElement.classList.add("cineraText");
                            if(!Nav.SortChronological)
                            {
                                TextElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
                            }
                            var Text = LevelBundle.This.Projects[ButtonInfo.HeadIndex].querySelector(".cineraProjectTitle").innerText;
                            var TextNode = document.createTextNode(Text);
                            TextElement.appendChild(TextNode);
                            This.Element.appendChild(TextElement);
                            FitText(This.Element);
                        }
                        else
                        {
                            var HeadText = LevelBundle.This.Projects[ButtonInfo.HeadIndex].querySelector(".cineraProjectTitle").innerText;
                            AppendItemToButton(This, HeadText, item_end.HEAD);

                            var TailText = LevelBundle.This.Projects[ButtonInfo.TailIndex].querySelector(".cineraProjectTitle").innerText;
                            AppendItemToButton(This, TailText, item_end.TAIL);
                        }
                    }
                    else
                    {
                        This.Entries = LevelBundle.This.Entries;
                        if(!DoingEntries)
                        {
                            Prev = null;
                            DoingEntries = true;
                        }

                        if(Distribution.EntriesToPlace == 1 || Distribution.EntriesToPlace == Distribution.ButtonsForEntries - ButtonIndex)
                        {
                            Distribution.FullButtonEntryCount = 1;
                        }

                        ButtonInfo = SetButtonInfo(This, Prev, LevelBundle.This, Distribution);
                        if(ButtonInfo.ItemCount == 1)
                        {
                            This.Entries = This.Entries[ButtonInfo.HeadIndex];
                        }
                        Distribution.EntriesToPlace -= ButtonInfo.ItemCount;

                        if(Distribution.FullButtonEntryCount == 1)
                        {
                            This.Element.classList.add("leaf");
                            var ButtonLink = document.createElement("a");
                            ButtonLink.classList.add("cineraText");
                            if(!Nav.SortChronological)
                            {
                                ButtonLink.style.transform = "rotate3d(0, 0, 1, 180deg)";
                            }
                            var EntryAddress = LevelBundle.This.Entries[ButtonInfo.HeadIndex].lastElementChild.getAttribute("href");
                            ButtonLink.setAttribute("href", EntryAddress);
                            var Text = LevelBundle.This.Entries[ButtonInfo.HeadIndex].innerText;
                            var TextNode = document.createTextNode(Text);
                            ButtonLink.appendChild(TextNode);

                            This.Element.appendChild(ButtonLink);
                            FitText(This.Element);
                        }
                        else
                        {
                            var HeadText = LevelBundle.This.Entries[ButtonInfo.HeadIndex].innerText;
                            AppendItemToButton(This, HeadText, item_end.HEAD);

                            var TailText = LevelBundle.This.Entries[ButtonInfo.TailIndex].innerText;
                            AppendItemToButton(This, TailText, item_end.TAIL);
                        }
                    }

                    This.Element.classList.add(ButtonInfo.Theme);
                    Prev = ButtonInfo;
                }
                else
                {
                    This.Element.classList.add(Nav.Nexus.classList[0]);
                }
            }
            if(PoppedLevel && !Nav.Transition.RelevantButtonElement && ButtonAndLevelMatch(This, PoppedLevel))
            {
                Nav.Transition.RelevantButtonElement = This.Element;
            }
        }
        if(TransitionType !== undefined)
        {
            switch(TransitionType)
            {
                case transition_type.SIBLING_SHIFT_PREV:
                    {
                        // Init targets
                        //// ButtonsTransitionContainer
                        let TargetA0 = NullTarget();
                        var Padding = Nav.GridColumnGap;
                        if(Nav.SortChronological)
                        {
                            TargetA0.ScrollX = 0;
                        }
                        else
                        {
                            TargetA0.ScrollX = Nav.GridDim.X + Padding;
                        }

                        Nav.Transition.StageDurations.push(320);
                        Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.push(TargetA0);

                        // Prep
                        Nav.Transition.ButtonsContainerCloneElement.style.position = "relative";

                        var ScrollX;
                        if(Nav.SortChronological)
                        {
                            Nav.ButtonsContainer.style.order = 0;
                            Nav.Transition.ButtonsContainerCloneElement.style.order = 1;
                            ScrollX = Nav.GridDim.X + Padding;
                        }
                        else
                        {
                            Nav.ButtonsContainer.style.order = 1;
                            Nav.Transition.ButtonsContainerCloneElement.style.order = 0;
                            ScrollX = 0;
                        }

                        Nav.Transition.ButtonsContainerCloneElement.style.paddingLeft = Padding + "px";

                        Nav.Transition.Transforms.ButtonsTransitionContainer.Current.ScrollX = ScrollX;
                        ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
                    } break;
                case transition_type.SIBLING_SHIFT_NEXT:
                    {
                        // Init targets
                        ////
                        let TargetA0 = NullTarget();
                        var Padding = Nav.GridColumnGap;
                        if(Nav.SortChronological)
                        {
                            TargetA0.ScrollX = Nav.GridDim.X + Padding;
                        }
                        else
                        {
                            TargetA0.ScrollX = 0;
                        }

                        Nav.Transition.StageDurations.push(320);
                        Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.push(TargetA0);

                        // Prep
                        Nav.Transition.ButtonsContainerCloneElement.style.position = "relative";

                        var ScrollX;

                        if(Nav.SortChronological)
                        {
                            Nav.ButtonsContainer.style.order = 1;
                            Nav.Transition.ButtonsContainerCloneElement.style.order = 0;
                            ScrollX = 0;
                        }
                        else
                        {
                            Nav.ButtonsContainer.style.order = 0;
                            Nav.Transition.ButtonsContainerCloneElement.style.order = 1;
                            ScrollX = Nav.GridDim.X + Padding;
                        }

                        Nav.Transition.ButtonsContainerCloneElement.style.paddingRight = Padding + "px";

                        Nav.Transition.Transforms.ButtonsTransitionContainer.Current.ScrollX = ScrollX;
                        ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
                    } break;
                case transition_type.PROJECT_ENTRY:
                    {
                        // Init targets
                        //// ButtonsContainer
                        let TargetA0 = NullTarget();
                        let TargetA1 = NullTarget();
                        let TargetA2 = NullTarget();
                        let TargetA3 = NullTarget();

                        if(Nav.SortChronological)
                        {
                            TargetA0.Rotation.Y = 90;
                        }
                        else
                        {
                            TargetA0.Rotation.Y = -90;
                        }
                        TargetA1.ZIndex = 1;
                        TargetA2.Rotation.Y = 0;
                        TargetA3.Pos.X = 0;
                        TargetA3.Pos.Y = 0;
                        TargetA3.Scale.X = 1;
                        TargetA3.Scale.Y = 1;

                        //// RelevantButton
                        let TargetB0 = NullTarget();
                        let TargetB1 = NullTarget();
                        let TargetB2 = NullTarget();

                        if(Nav.SortChronological)
                        {
                            TargetB0.Rotation.Y = -90;
                            TargetB2.Rotation.Y = -180;
                        }
                        else
                        {
                            TargetB0.Rotation.Y = 90;
                            TargetB2.Rotation.Y = 180;
                        }

                        //// ButtonsContainerClone
                        let TargetC0 = NullTarget();
                        let TargetC1 = NullTarget();

                        TargetC1.ZIndex = 0;


                        Nav.Transition.StageDurations.push(80);
                        Nav.Transition.StageDurations.push(0);
                        Nav.Transition.StageDurations.push(80);
                        Nav.Transition.StageDurations.push(160);

                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA0);
                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA1);
                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA2);
                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA3);
                        Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB0);
                        Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB1);
                        Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB2);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC0);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC1);

                        // Prep
                        var RelevantButtonIndex = GetIndexOfButton(RelevantButton);
                        Nav.Transition.RelevantButtonElement = Nav.Transition.ButtonsContainerCloneElement.children[RelevantButtonIndex];

                        var ButtonGeometry = ComputeButtonGeometryRelativeToGrid(Nav.Transition.RelevantButtonElement);

                        Nav.Transition.Transforms.ButtonsContainer.Current.Pos.X = ButtonGeometry.Pos.X;
                        Nav.Transition.Transforms.ButtonsContainer.Current.Pos.Y = ButtonGeometry.Pos.Y;
                        Nav.Transition.Transforms.ButtonsContainer.Current.Scale.X = ButtonGeometry.Scale.X;
                        Nav.Transition.Transforms.ButtonsContainer.Current.Scale.Y = ButtonGeometry.Scale.Y;
                        if(Nav.SortChronological)
                        {
                            Nav.Transition.Transforms.ButtonsContainer.Current.Rotation.Y = 180;
                        }
                        else
                        {
                            Nav.Transition.Transforms.ButtonsContainer.Current.Rotation.Y = -180;
                        }

                        Nav.Transition.Transforms.ButtonsContainer.Current.ZIndex = 0;

                        Nav.Transition.Transforms.ButtonsContainerClone.Current.ZIndex = 1;

                        ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
                        ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
                    } break;
                case transition_type.PROJECT_EXIT:
                    {
                        // Init targets
                        //// ButtonsContainer
                        let TargetA0 = NullTarget();
                        let TargetA1 = NullTarget();
                        let TargetA2 = NullTarget();
                        TargetA2.ZIndex = 1;

                        //// RelevantButton
                        let TargetB0 = NullTarget();
                        let TargetB1 = NullTarget();
                        let TargetB2 = NullTarget();
                        let TargetB3 = NullTarget();

                        if(Nav.SortChronological)
                        {
                            TargetB1.Rotation.Y = -90;
                        }
                        else
                        {
                            TargetB1.Rotation.Y = 90;
                        }
                        TargetB3.Rotation.Y = 0;

                        //// ButtonsContainerClone
                        let TargetC0 = NullTarget();
                        let TargetC1 = NullTarget();
                        let TargetC2 = NullTarget();
                        let TargetC3 = NullTarget();

                        var ButtonGeometry = ComputeButtonGeometryRelativeToGrid(Nav.Transition.RelevantButtonElement);
                        TargetC0.Pos.X = ButtonGeometry.Pos.X;
                        TargetC0.Pos.Y = ButtonGeometry.Pos.Y;
                        TargetC0.Scale.X = ButtonGeometry.Scale.X;
                        TargetC0.Scale.Y = ButtonGeometry.Scale.Y;
                        if(Nav.SortChronological)
                        {
                            TargetC1.Rotation.Y = 90;
                            TargetC3.Rotation.Y = 180;
                        }
                        else
                        {
                            TargetC1.Rotation.Y = -90;
                            TargetC3.Rotation.Y = -180;
                        }
                        TargetC2.ZIndex = 0;


                        Nav.Transition.StageDurations.push(160);
                        Nav.Transition.StageDurations.push(80);
                        Nav.Transition.StageDurations.push(0);
                        Nav.Transition.StageDurations.push(80);

                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA0);
                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA1);
                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA2);
                        Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB0);
                        Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB1);
                        Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB2);
                        Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB3);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC0);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC1);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC2);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC3);

                        // Prep
                        if(Nav.SortChronological)
                        {
                            Nav.Transition.Transforms.RelevantButton.Current.Rotation.Y = -180;
                        }
                        else
                        {
                            Nav.Transition.Transforms.RelevantButton.Current.Rotation.Y = 180;
                        }
                        ApplyTransform(Nav.Transition.RelevantButtonElement, Nav.Transition.Transforms.RelevantButton.Current);

                        Nav.Transition.Transforms.ButtonsContainer.Current.ZIndex = 0;
                        ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);

                        Nav.Transition.Transforms.ButtonsContainerClone.Current.ZIndex = 1;
                        ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
                    } break;
                case transition_type.SUBDIVISION_DESCENT:
                    {
                        // Init targets
                        //// ButtonsContainer
                        let TargetA0 = NullTarget();
                        let TargetA1 = NullTarget();

                        TargetA0.Opacity = 1;
                        TargetA1.Pos.X = 0;
                        TargetA1.Pos.Y = 0;
                        TargetA1.Scale.X = 1;
                        TargetA1.Scale.Y = 1;

                        Nav.Transition.StageDurations.push(160);
                        Nav.Transition.StageDurations.push(160);

                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA0);
                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA1);

                        // Prep
                        var RelevantButtonIndex = GetIndexOfButton(RelevantButton);
                        Nav.Transition.RelevantButtonElement = Nav.Transition.ButtonsContainerCloneElement.children[RelevantButtonIndex];

                        var ButtonGeometry = ComputeButtonGeometryRelativeToGrid(Nav.Transition.RelevantButtonElement);

                        Nav.Transition.Transforms.ButtonsContainer.Current.Pos.X = ButtonGeometry.Pos.X;
                        Nav.Transition.Transforms.ButtonsContainer.Current.Pos.Y = ButtonGeometry.Pos.Y;
                        Nav.Transition.Transforms.ButtonsContainer.Current.Scale.X = ButtonGeometry.Scale.X;
                        Nav.Transition.Transforms.ButtonsContainer.Current.Scale.Y = ButtonGeometry.Scale.Y;
                        Nav.Transition.Transforms.ButtonsContainer.Current.Opacity = 0;
                        Nav.Transition.Transforms.ButtonsContainer.Current.ZIndex = 1;

                        Nav.Transition.Transforms.ButtonsContainerClone.Current.ZIndex = 0;

                        ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
                        ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
                    } break;
                case transition_type.SUBDIVISION_ASCENT:
                    {
                        // Init targets
                        //// ButtonsContainer
                        let TargetA0 = NullTarget();
                        let TargetA1 = NullTarget();
                        let TargetA2 = NullTarget();
                        TargetA2.ZIndex = 1;

                        //// ButtonsContainerClone
                        let TargetC0 = NullTarget();
                        let TargetC1 = NullTarget();
                        let TargetC2 = NullTarget();

                        var ButtonGeometry = ComputeButtonGeometryRelativeToGrid(Nav.Transition.RelevantButtonElement);
                        TargetC0.Pos.X = ButtonGeometry.Pos.X;
                        TargetC0.Pos.Y = ButtonGeometry.Pos.Y;
                        TargetC0.Scale.X = ButtonGeometry.Scale.X;
                        TargetC0.Scale.Y = ButtonGeometry.Scale.Y;
                        TargetC1.Opacity = 0;
                        TargetC2.ZIndex = 0;


                        Nav.Transition.StageDurations.push(160);
                        Nav.Transition.StageDurations.push(160);
                        Nav.Transition.StageDurations.push(0);

                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA0);
                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA1);
                        Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA2);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC0);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC1);
                        Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC2);

                        // Prep
                        Nav.Transition.Transforms.ButtonsContainer.Current.ZIndex = 0;
                        Nav.Transition.Transforms.ButtonsContainerClone.Current.ZIndex = 1;
                        ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
                        ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
                    } break;
            }
            DoTransition();
        }
    }
}

function
PushButton(ButtonElement, Button)
{
    var Level = {
        Projects: Button.Projects,
        Entries: Button.Entries,
        HeadIndex: Button.HeadIndex,
        TailIndex: Button.TailIndex,
    };

    var TransitionType = undefined;
    if(Level.Projects !== null || Level.Entries !== null)
    {
        if(Level.Projects !== null)
        {
            if(Level.Projects.length === undefined)
            {
                var Entries = Level.Projects.querySelectorAll(":scope > .cineraIndexEntries > div");
                var Projects = Level.Projects.querySelectorAll(":scope > .cineraIndexProject");
                Level.Entries = Entries.length ? Entries : null;
                Level.Projects = Projects.length ? Projects : null;
                TransitionType = transition_type.PROJECT_ENTRY;
            }
            else
            {
                TransitionType = transition_type.SUBDIVISION_DESCENT;
            }
            Nav.TraversalStack.push(Level);
            UpdateButtons(TransitionType, Button);
        }
        else
        {
            if(Level.Entries.length === undefined)
            {
                var Address = ButtonElement.lastElementChild.getAttribute("href");
                location = Address;
            }
            else
            {
                Nav.TraversalStack.push(Level);
                TransitionType = transition_type.SUBDIVISION_DESCENT;
                UpdateButtons(TransitionType, Button);
            }
        }
    }
}

function
RangeContains(Range, Target)
{
    return (Range.HeadIndex == null && Range.TailIndex == null) || (Range.HeadIndex <= Target && Range.TailIndex >= Target);
}

function
LengthOf(Level)
{
    var Result = 0;
    var Items = Level.Projects && Level.Projects.length > 0 ? Level.Projects : Level.Entries;
    if(Items)
    {
        if(Level.HeadIndex !== null && Level.TailIndex !== null)
        {
            Result = Diff(Level.HeadIndex, Level.TailIndex) + 1;
        }
        else if(Items.length !== undefined)
        {
            Result = Items.length;
        }
        else
        {
            Result = 1;
        }
    }
    return Result;
}

function
DereferenceLevel(Generation)
{
    var Level = Nav.TraversalStack[Generation - 1];
    var Result = {
        Projects: Level.Projects,
        Entries: Level.Entries,
        HeadIndex: Level.HeadIndex,
        TailIndex: Level.TailIndex,
    };
    return Result;
}

function
GetSubdivisionFor(LevelBundle, Index, TargetGeneration)
{
    var Result = {
        Projects: LevelBundle.This.Projects,
        Entries: LevelBundle.This.Entries,
        HeadIndex: null,
        TailIndex: null,
    };

    var GenerationsToDistribute = 1;
    var Generation = TargetGeneration ? TargetGeneration : LevelBundle.Generation;
    var Parent = DereferenceLevel(Generation - GenerationsToDistribute);
    while(!RangeContains(Parent, Index))
    {
        ++GenerationsToDistribute;
        Parent = DereferenceLevel(Generation - GenerationsToDistribute);
    }

    while(GenerationsToDistribute > 0)
    {
        var Distribution = ComputeItemDistribution(Parent);

        var ToPlace = null;
        var FullButtonItemCount = null;
        var ButtonCount = null;
        if(LevelBundle.Type == item_type.PROJECT)
        {
            ToPlace = Distribution.ProjectsToPlace;
            FullButtonItemCount = Distribution.FullButtonProjectCount;
            ButtonCount = Distribution.ButtonsForProjects;
        }
        else if(LevelBundle.Type = item_type.ENTRY)
        {
            ToPlace = Distribution.EntriesToPlace;
            FullButtonItemCount = Distribution.FullButtonEntryCount;
            ButtonCount = Distribution.ButtonsForEntries;
        }

        Result.HeadIndex = null;
        Result.TailIndex = null;
        for(var i = 0; i < ButtonCount; ++i)
        {
            if(ToPlace == ButtonCount - i) { FullButtonItemCount = 1; }
            Result.HeadIndex = Result.TailIndex !== null ? Result.TailIndex + 1 : Parent.HeadIndex !== null ? Parent.HeadIndex : 0;
            Result.TailIndex = Result.HeadIndex + Math.min(FullButtonItemCount, ToPlace) - 1;
            if(RangeContains(Result, Index)) { break; }
            ToPlace -= LengthOf(Result);
        }
        --GenerationsToDistribute;
        Parent.HeadIndex = Result.HeadIndex;
        Parent.TailIndex = Result.TailIndex;
    }

    return Result;
}

function
SiblingIsLeaf(SiblingID)
{
    var LevelBundle = GetTraversalLevelBundle();
    return LengthOf(GetSubdivisionFor(LevelBundle,
        SiblingID == siblings.PREV ? LevelBundle.This.HeadIndex - 1 : LevelBundle.This.TailIndex + 1)) == 1;
}

function
ShiftToSibling(SiblingID)
{
    var LevelBundle = GetTraversalLevelBundle();

    if((SiblingID == siblings.PREV && HasPrevSibling(LevelBundle.This)) || 
        (SiblingID == siblings.NEXT && HasNextSibling(LevelBundle.This)))
    {
        var TransitionType = SiblingID == siblings.PREV ? transition_type.SIBLING_SHIFT_PREV : transition_type.SIBLING_SHIFT_NEXT;
        var CurrentItem = LevelBundle.Type == item_type.PROJECT ? LevelBundle.This.Projects : LevelBundle.This.Entries;

        var TargetIndex = SiblingID == siblings.PREV ? LevelBundle.This.HeadIndex - 1 : LevelBundle.This.TailIndex + 1;
        LevelBundle.Parent = Nav.TraversalStack[0];
        var TransitionLevel;
        for(let i = 0; i < LevelBundle.Generation; ++i)
        {
            LevelBundle.This = Nav.TraversalStack[i];

            if((LevelBundle.Type == item_type.PROJECT && CurrentItem == LevelBundle.Parent.Projects) ||
                (LevelBundle.Type == item_type.ENTRY && CurrentItem == LevelBundle.Parent.Entries))
            {
                if(!RangeContains(LevelBundle.This, TargetIndex))
                {
                    Nav.TraversalStack[i] = GetSubdivisionFor(LevelBundle, TargetIndex, i + 1);
                    if(LengthOf(Nav.TraversalStack[i]) == 1)
                    {
                        TransitionType = transition_type.SUBDIVISION_ASCENT;
                        TransitionLevel = LevelBundle.This;
                        Nav.TraversalStack.pop();
                    }
                }
            }
            LevelBundle.Parent = Nav.TraversalStack[i];
        }
        UpdateButtons(TransitionType, undefined, TransitionLevel);
    }
    else
    {
        DequeueInteraction();
    }
}

function
Ascend()
{
    var LevelBundle = GetTraversalLevelBundle();
    if(LevelBundle.Generation > 1)
    {
        var TransitionType = LevelBundle.This.HeadIndex !== null && LevelBundle.This.TailIndex !== null ? transition_type.SUBDIVISION_ASCENT : transition_type.PROJECT_EXIT;
        var PoppedLevel = Nav.TraversalStack.pop();
        UpdateButtons(TransitionType, undefined, PoppedLevel);
    }
}

function
ShiftToPrevSibling()
{
    var LevelBundle = GetTraversalLevelBundle();
    if(LevelBundle.Generation > 1)
    {
        if(Nav.Controls.GridTraversal.PrevAscends == true)
        {
            Ascend();
        }
    }
    ShiftToSibling(siblings.PREV);
}

function
ShiftToNextSibling()
{
    ShiftToSibling(siblings.NEXT);
}

function
InputIsFocused()
{
    return document.activeElement == Search.QueryElement;
}

function
ShouldFireGridEvents()
{
    return Nav.ViewType == view_type.GRID && !InputIsFocused() && !IsQuery();
}

function
ModifyControlKeybinding(Event)
{
    // TODO(matt): Settle on the final sets of bindings
    var Chron = Nav.SortChronological;
    var Key = Event.key;
    var IT = interaction_type.PUSH_BUTTON;
    var ID = { Element: null, Button: null, }; // NOTE(matt): InteractionData

    switch(Key)
    {
        case "?": if(!InputIsFocused()) { Nav.Controls.HelpDocumentation.classList.toggle("visible"); } break;
        case "t": if(!InputIsFocused()) { EnqueueInteraction(interaction_type.SORT); } break;
        case "y": if(!InputIsFocused()) { ToggleView(); } break;
        case "m": if(!InputIsFocused()) { ToggleAnimations(); } break;
        case "h": if(ShouldFireGridEvents()) { EnqueueInteraction(Chron ? interaction_type.SIBLING_SHIFT_PREV : interaction_type.SIBLING_SHIFT_NEXT); } break;
        case "k": if(ShouldFireGridEvents()) { EnqueueInteraction(interaction_type.ASCEND); } break;
        case "l": if(ShouldFireGridEvents()) { EnqueueInteraction(Chron ? interaction_type.SIBLING_SHIFT_NEXT : interaction_type.SIBLING_SHIFT_PREV); } break;
    }
}

function
BindControlKeys()
{
    document.addEventListener("keydown", ModifyControlKeybinding);
}

function
UnbindControlKeys()
{
    document.removeEventListener("keydown", ModifyControlKeybinding);
}

function
RebindControlKeys()
{
    UnbindControlKeys();
    BindControlKeys();
}

function
KeyIsInGrid(GridSize, KeyPos)
{
    return GridSize.X > KeyPos.X && GridSize.Y > KeyPos.Y;
}

function
ComputeNaturalKeyIndex(GridSize, KeyPos)
{
    return KeyPos.Y * GridSize.X + KeyPos.X;
}

function
EnqueueGridInteraction(GridSize, KeyPos)
{
    var Chron = Nav.SortChronological;
    var LastButtonIndex = Nav.Buttons.length - 1;
    var NaturalIndex = ComputeNaturalKeyIndex(GridSize, KeyPos);
    var IT = interaction_type.PUSH_BUTTON;
    var ID = { Element: null, Button: null, }; // NOTE(matt): InteractionData
    ID.Element = Nav.Buttons[Chron ? NaturalIndex : LastButtonIndex - NaturalIndex].Element;
    ID.Button = Nav.Buttons[Chron ? NaturalIndex : LastButtonIndex - NaturalIndex];
    EnqueueInteraction(IT, ID);
}

function
Get2DPosFromIndex(Layout, Index)
{
    var Result = {
        X: null,
        Y: null,
    };

    Result.X = Index % Layout.X;
    Result.Y = (Index - Result.X) / Layout.Y;

    return Result;
}

function
ModifyGridKeybinding(Event)
{
    var Key = Event.key;
    // TODO(matt):  With this, we could probably easily add a setting for keyboard layout: e.g. Dvorak
    var PhysicalKeys = [
        "1", "2", "3", "4",
        "q", "w", "e", "r",
        "a", "s", "d", "f",
        "z", "x", "c", "v"
    ];

    var KeyLayout = { X: 4, Y: 4 };
    for(var i = 0; i < PhysicalKeys.length; ++i)
    {
        if(Key == PhysicalKeys[i])
        {
            var KeyPos = Get2DPosFromIndex(KeyLayout, i);
            if(KeyIsInGrid(Nav.GridSize, KeyPos) && ShouldFireGridEvents())
            {
                EnqueueGridInteraction(Nav.GridSize, KeyPos);
            }
        }
    }
}

function
BindGridKeys()
{
    document.addEventListener("keydown", ModifyGridKeybinding);
}

function
UnbindGridKeys()
{
    document.removeEventListener("keydown", ModifyGridKeybinding);
}

function
DoRotationStage(Now)
{
    if(Nav.Transition.StageDurations.length)
    {
        if(Nav.Transition.StartTime === undefined)
        {
            Nav.Transition.StartTime = Now;
        }

        var Elapsed = Now - Nav.Transition.StartTime;
        var Duration = Nav.Transition.StageDurations[0];

        if(Duration === 0)
        {
            if(Nav.Transition.Transforms.ButtonsContainer.TargetStages.length)
            {
                MergeTransform(Nav.Transition.Transforms.ButtonsContainer.Current, Nav.Transition.Transforms.ButtonsContainer.TargetStages[0]);
                ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
            }
        }
        else
        {
            var t = Clamp01(Elapsed / Duration);
            if(LerpTransforms(Nav.Transition.Transforms.ButtonsContainer, t))
            {
                ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
            }
        }

        for(var i = 0; i < Nav.ButtonsContainer.children.length; ++i)
        {
            var This = Nav.ButtonsContainer.children[i];
            var ThisTexts = This.querySelectorAll(".cineraText");
            for(var j = 0; j < ThisTexts.length; ++j)
            {
                ThisTexts[j].style.transform = "rotate3d(0, 0, 1, " + -Nav.Transition.Transforms.ButtonsContainer.Current.Rotation.Z + "deg)";
            }
        }

        if(TransformsComplete(Nav.Transition.Transforms))
        {
            FinaliseTransforms(Nav.Transition.Transforms);
        }
        Nav.Transition.RequestedFrame = window.requestAnimationFrame(DoRotationStage);
    }
    else
    {
        Nav.Transition.RequestedFrame = undefined;
        ResetButtonsContainerClone();
        DequeueInteraction();
        Nav.Controls.Header.style.overflow = null;
    }
}

function
RotateButtons(Initialising)
{
    // TODO(matt):  Consider pushing this through DoTransition(), aware that it'd need to transform ".cineraText" children
    CopyTransform(Nav.Transition.Transforms.ButtonsContainer.Initial, Nav.Transition.Transforms.ButtonsContainer.Current);
    Nav.Transition.StartTime = undefined;
    if(!Initialising && Nav.Transition.Enabled)
    {
        Nav.Transition.StageDurations.push(320);
    }
    else
    {
        Nav.Transition.StageDurations.push(0);
    }

    let Target = NullTarget();
    if(Nav.SortChronological)
    {
        Target.Rotation.Z = 0;
    }
    else
    {
        Target.Rotation.Z = 180;
    }
    Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(Target);

    CopyTransform(Nav.Transition.Transforms.ButtonsContainer.Initial, Nav.Transition.Transforms.ButtonsContainer.Current);
    Nav.Transition.RequestedFrame = window.requestAnimationFrame(DoRotationStage);
}

function
AddAnimationClass()
{
    Nav.Nexus.classList.add("anim");
}

function
Sort(Initialising)
{
    ResetButtonsContainerClone();

    if(Initialising && Nav.Transition.Enabled) { Nav.Nexus.classList.remove("anim"); }
    if(Nav.SortChronological)
    {
        Nav.Controls.Sort.textContent = "Sort: New to Old ⏷";
        Nav.Nexus.classList.add("reversed");
        for(var i = 0; i < Search.Projects.length; ++i)
        {
            if(Search.Projects[i].entriesContainer)
            {
                Search.Projects[i].entriesContainer.style.flexFlow = "column-reverse";
            }
        }
    }
    else
    {
        Nav.Controls.Sort.textContent = "Sort: Old to New ⏶";
        Nav.Nexus.classList.remove("reversed");
        for(var i = 0; i < Search.Projects.length; ++i)
        {
            if(Search.Projects[i].entriesContainer)
            {
                Search.Projects[i].entriesContainer.style.flexFlow = "column";
            }
        }
    }
    if(Initialising && Nav.Transition.Enabled) { setTimeout(AddAnimationClass, 320); }

    UnbindGridKeys(Nav.GridSize);
    Nav.SortChronological = !Nav.SortChronological;
    if(Nav.Controls.GridTraversal.PrevAscends)
    {
        if(Nav.SortChronological)
        {
            Nav.Controls.GridTraversal.Prev.children[0].textContent = "↰";
        }
        else
        {
            Nav.Controls.GridTraversal.Prev.children[0].textContent = "↲";
        }
    }

    if(MaintainingState())
    {
        if(Nav.SortChronological) { ClearStateBit(state_bit.SORT_REVERSED); }
        else { SetStateBit(state_bit.SORT_REVERSED); }
    }
    RotateButtons(Initialising);
    BindGridKeys();
    runSearch(true);
}

function
DequeueInteraction()
{
    if(Nav.InteractionQueue.length)
    {
        var I = Nav.InteractionQueue.shift();

        switch(I.Type)
        {
            case interaction_type.PUSH_BUTTON: { PushButton(I.Data.Element, I.Data.Button); } break;
            case interaction_type.SIBLING_SHIFT_PREV: { ShiftToPrevSibling(); } break;
            case interaction_type.SIBLING_SHIFT_NEXT: { ShiftToNextSibling(); } break;
            case interaction_type.ASCEND: { Ascend(); } break;
            case interaction_type.SORT: { Sort(); } break;
        }
    }
}

function
EnqueueInteraction(InteractionType, Data)
{
    // TODO(matt):  Maybe see about interpolating out of interrupted transitions?
    //
    //              Interruptability:
    //                  Reversible Pairs:
    //                      SIBLING_SHIFT_PREV                  by  SIBLING_SHIFT_NEXT
    //                      SIBLING_SHIFT_NEXT (when SHIFT)     by  SIBLING_SHIFT_PREV
    //                      SIBLING_SHIFT_NEXT (when ASCEND)    by  PUSH_BUTTON (of the corresponding button)
    //                      PUSH_BUTTON                         by  ASCEND
    //                      ASCEND                              by  PUSH_BUTTON (of the corresponding button)
    //                      SORT                                by  SORT
    //                  
    //                  Mixtures:
    //                      SIBLING_SHIFT_PREV – SORT
    //

    var I = {
        Type: InteractionType,
        Data: Data,
    };

    Nav.InteractionQueue.push(I);

    if(!Nav.Transition.RequestedFrame)
    {
        DequeueInteraction();
    }
}

function
UseOrientation(Orientation)
{
    Nav.GridContainer.classList.remove("Portrait", "Landscape", "Left", "Right");
    switch(Orientation)
    {
        case orientations.PORTRAIT:
            {
                Nav.Controls.GridTraversal.Header.insertBefore(Nav.Controls.GridTraversal.Ascend, Nav.Controls.GridTraversal.Next);
                Nav.GridContainer.classList.add("Portrait");
            } break;

        case orientations.LANDSCAPE_LEFT:
            {
                Nav.Controls.GridTraversal.Header.parentElement.insertBefore(Nav.Controls.GridTraversal.Ascend, Nav.Controls.GridTraversal.Header);
                Nav.GridContainer.classList.add("Landscape", "Left");
            } break;

        case orientations.LANDSCAPE_RIGHT:
            {
                Nav.Controls.GridTraversal.Header.parentElement.insertBefore(Nav.Controls.GridTraversal.Ascend, Nav.Controls.GridTraversal.Header);
                Nav.GridContainer.classList.add("Landscape", "Right");
            } break;
    }
}

function
InitNexus()
{
    Nav.List.classList.add("hidden");
    var ButtonsContainerPrototype = document.createElement("div");
    ButtonsContainerPrototype.setAttribute("id", "cineraIndexGrid");

    var ButtonsPrototype = document.createElement("div");
    ButtonsPrototype.classList.add("cineraButtons");

    var ButtonsClonePrototype = document.createElement("div");
    ButtonsClonePrototype.classList.add("cineraButtons");

    ButtonsContainerPrototype.appendChild(ButtonsClonePrototype);
    ButtonsContainerPrototype.appendChild(ButtonsPrototype);
    Nav.Transition.ButtonsTransitionContainerElement = Nav.GridContainer.appendChild(ButtonsContainerPrototype);
    Nav.Grid = Nav.Transition.ButtonsTransitionContainerElement;

    Nav.Transition.ButtonsContainerCloneElement = Nav.Transition.ButtonsTransitionContainerElement.querySelectorAll(".cineraButtons")[0];
    Nav.ButtonsContainer = Nav.Transition.ButtonsTransitionContainerElement.querySelectorAll(".cineraButtons")[1];
    Nav.GridColumnGap = parseInt(window.getComputedStyle(Nav.ButtonsContainer).gridColumnGap);
    Nav.GridRowGap = parseInt(window.getComputedStyle(Nav.ButtonsContainer).gridRowGap);

    // NOTE(matt):  We ResetButtonsContainerClone() anyway, but without cycling this classList Safari seems to do transitions
    //              based on the wrong size grid
    Nav.GridContainer.classList.add("hidden");
    ResetButtonsContainerClone();
    Nav.GridContainer.classList.remove("hidden");

    Nav.Nexus.classList.add("anim");

    ScrollCondition = true; // NOTE(matt): Variable in cinera_pre.js, we init with the Grid which is the view we want to auto-scroll
    if(CineraProps.IsMobile)
    {
        CineraProps.Orientation = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
        UseOrientation(CineraProps.Orientation);
    }
}

function
ComputePossibleCellsInDimension(AvailableSpaceInPixels, GridGap)
{
    var Result = 0;
    var SpaceToFill = AvailableSpaceInPixels;
    if(SpaceToFill >= Nav.MinButtonDim)
    {
        SpaceToFill -= Nav.MinButtonDim;
        ++Result;
    }

    for(; SpaceToFill >= (Nav.MinButtonDim + GridGap); )
    {
        SpaceToFill -= (Nav.MinButtonDim + GridGap);
        ++Result;
    }
    return Result;
}

function
GridSizeMeetsMinimumSupported(GridSize)
{
    return GridSize.X * GridSize.Y >= 2;
}

function
GridSizeIsSupported(GridSize)
{
    return (GridSize.X >= Nav.GridMinCellsPerDimension && GridSize.X <= Nav.GridMaxCellsPerDimension) &&
        (GridSize.Y >= Nav.GridMinCellsPerDimension && GridSize.Y <= Nav.GridMaxCellsPerDimension) &&
        GridSizeMeetsMinimumSupported(GridSize);
}

function
ComputeOptimalGridSize()
{
    var Result = {
        X: null,
        Y: null,
    };

    var WindowDim = GetWindowDim(CineraProps.IsMobile);
    var DimReduction = {
        X: 0,
        Y: Nav.Controls.Header.offsetHeight,
    };

    Nav.Transition.ButtonsTransitionContainerElement.style = null;
    Nav.ButtonsContainer.style = null;
    Nav.Controls.GridTraversal.Container.style = null;
    Nav.Controls.GridTraversal.Ascend.style = null;
    Nav.Controls.GridTraversal.Prev.style = null;
    Nav.Controls.GridTraversal.Next.style = null;

    // TODO(matt):  Maybe structure it such that the grid is always not hidden at this point?
    var GridWasHidden = Nav.GridContainer.classList.contains("hidden");
    if(GridWasHidden)
    {
        Nav.List.classList.add("hidden");
        Nav.GridContainer.classList.remove("hidden");
    }
    if(CineraProps.IsMobile && (CineraProps.Orientation == orientations.LANDSCAPE_LEFT || CineraProps.Orientation == orientations.LANDSCAPE_RIGHT))
    {
        DimReduction.X += Nav.Controls.GridTraversal.Container.offsetWidth;
    }
    else
    {
        DimReduction.Y += Nav.Controls.GridTraversal.Container.offsetHeight;
    }

    var MaxWidth = MaxWidthOfElement(Nav.GridContainer, WindowDim) - DimReduction.X;
    var MaxHeight = MaxHeightOfElement(Nav.GridContainer, WindowDim) - DimReduction.Y;

    if(GridWasHidden)
    {
        Nav.GridContainer.classList.add("hidden");
        Nav.List.classList.remove("hidden");
    }

    var BodyStyle = window.getComputedStyle(document.body);
    if(Nav.Nexus.parentNode == document.body)
    {
        // TODO(matt): Robustify this
        MaxWidth -= parseInt(BodyStyle.marginRight);
        MaxHeight -= parseInt(BodyStyle.marginBottom);
    }

    Result.X = ComputePossibleCellsInDimension(MaxWidth, Nav.GridColumnGap);
    Result.Y = ComputePossibleCellsInDimension(MaxHeight, Nav.GridRowGap);

    if(GridSizeMeetsMinimumSupported(Result))
    {
        Result.X = Clamp(Nav.GridMinCellsPerDimension, Result.X, Nav.GridMaxCellsPerDimension);
        Result.Y = Clamp(Nav.GridMinCellsPerDimension, Result.Y, Nav.GridMaxCellsPerDimension);

        var ButtonDimBasedOnX = Math.floor((MaxWidth - Nav.GridColumnGap * (Result.X - 1)) / Result.X);
        var ButtonDimBasedOnY = Math.floor((MaxHeight - Nav.GridRowGap * (Result.Y - 1)) / Result.Y);

        Nav.ButtonDim = Math.min(ButtonDimBasedOnX, ButtonDimBasedOnY);
        Nav.ButtonDim -= Nav.ButtonDim % 2; // NOTE(matt): Even-length helps CSS keep the head & tail's correct size when rotated 180 degrees

        var GridTemplateColumnsStyle = "repeat(" + Result.X + ", minmax(" + Nav.ButtonDim + "px, " + Nav.ButtonDim + "px))";
        Nav.ButtonsContainer.style.gridTemplateColumns = GridTemplateColumnsStyle;

        var GridTemplateRowsStyle = "repeat(" + Result.Y + ", " + Nav.ButtonDim + "px)";
        Nav.ButtonsContainer.style.gridTemplateRows = GridTemplateRowsStyle;

        Nav.GridDim.X = Nav.ButtonDim * Result.X + Nav.GridColumnGap * (Result.X - 1);
        Nav.GridDim.Y = Nav.ButtonDim * Result.Y + Nav.GridRowGap * (Result.Y - 1);

        SetDim(Nav.Transition.ButtonsTransitionContainerElement, Nav.GridDim.X + "px", Nav.GridDim.Y + "px");

        Nav.Controls.GridTraversal.Container.style.maxWidth = Nav.GridDim.X + "px";
        Nav.Controls.GridTraversal.Container.style.maxHeight = Nav.GridDim.Y + "px";

        var TraversalButtonCount = 3;
        if(Nav.Controls.GridTraversal.Container.scrollWidth > Nav.Controls.GridTraversal.Container.clientWidth)
        {
            var TraversalButtonDim = Nav.Controls.GridTraversal.Container.clientWidth / TraversalButtonCount;
            SetDim(Nav.Controls.GridTraversal.Ascend, TraversalButtonDim + "px", TraversalButtonDim + "px");
            SetDim(Nav.Controls.GridTraversal.Prev, TraversalButtonDim + "px", TraversalButtonDim + "px");
            SetDim(Nav.Controls.GridTraversal.Next, TraversalButtonDim + "px", TraversalButtonDim + "px");
        }
        if(Nav.Controls.GridTraversal.Container.scrollHeight > Nav.Controls.GridTraversal.Container.clientHeight)
        {
            var TraversalButtonDim = Nav.Controls.GridTraversal.Container.clientHeight / TraversalButtonCount;
            SetDim(Nav.Controls.GridTraversal.Ascend, TraversalButtonDim + "px", TraversalButtonDim + "px");
            SetDim(Nav.Controls.GridTraversal.Prev, TraversalButtonDim + "px", TraversalButtonDim + "px");
            SetDim(Nav.Controls.GridTraversal.Next, TraversalButtonDim + "px", TraversalButtonDim + "px");
        }

    }

    ResetButtonsContainerClone(); // NOTE(matt): This reapplies the sorting Z-rotation
    return Result;
}

function
GetScrollToElement(NodeList, UpperIndex)
{
    var Result = undefined;
    if(UpperIndex === null)
    {
        if(NodeList.length)
        {
            Result = NodeList[0].closest(".cineraIndexProject");
        }
        else
        {
            Result = NodeList.closest(".cineraIndexProject");
        }
    }
    else
    {
        Result = NodeList[UpperIndex];
    }
    return Result;
}

function
EmptyTraversalStack()
{
    while(Nav.TraversalStack.length > 1)
    {
        Nav.TraversalStack.pop();
    }
}

function
GetContainingProjectOfLevel(Level)
{
    var Result = null;
    if(Level.Projects !== null)
    {
        if(Level.Projects.length)
        {
            Result = Level.Projects[0].parentNode;
        }
        else
        {
            Result = Level.Projects.parentNode;
        }
    }
    else if(Level.Entries !== null)
    {
        if(Level.Entries.length)
        {
            Result = Level.Entries[0].closest(".cineraIndexProject");
        }
        else
        {
            Result = Level.Entries.closest(".cineraIndexProject");
        }
    }
    return Result;
}

function
GetContainingProject(ProjectElement)
{
    var Result = null;
    if(ProjectElement.parentNode.classList.contains("cineraIndexProject"))
    {
        Result = ProjectElement.parentNode;
    }
    return Result;
}

function
PushProjectOntoStack(Stack, ContainingProject)
{
    var Project = {
        Element: ContainingProject,
        Projects: ContainingProject.querySelectorAll(":scope > .cineraIndexProject"),
        Entries: ContainingProject.querySelectorAll(":scope > .cineraIndexEntries > div"),
        Index: null,
    };

    if(Project.Projects.length == 0) { Project.Projects = null; }
    if(Project.Entries.length == 0) { Project.Entries = null; }

    var Siblings = ContainingProject.parentNode.querySelectorAll(":scope > .cineraIndexProject");
    Project.Index = GetIndexOfElement(Siblings, ContainingProject);
    Stack.push(Project);
}

function
BuildProjectsStack(TargetLevel)
{
    let ProjectsStack = [];
    var ContainingProject = GetContainingProjectOfLevel(TargetLevel);

    PushProjectOntoStack(ProjectsStack, ContainingProject);

    ContainingProject = GetContainingProject(ProjectsStack[ProjectsStack.length - 1].Element);
    while(ContainingProject)
    {
        PushProjectOntoStack(ProjectsStack, ContainingProject);
        ContainingProject = GetContainingProject(ProjectsStack[ProjectsStack.length - 1].Element);
    }

    return ProjectsStack;
}

function
EmptyTraversalStackIntoProjectsStack()
{
    let ProjectsStack = [];
    while(Nav.TraversalStack.length > 1)
    {
        let ThisLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
        PushLevelProjectUniquely(ProjectsStack, ThisLevel);
        Nav.TraversalStack.pop();
    }
    return ProjectsStack;
}

function
DeriveTraversalStack(ProjectsStack, TargetLevel)
{
    if(ProjectsStack && TargetLevel)
    {
        while(ProjectsStack.length > 0)
        {
            var ThisProject = ProjectsStack[ProjectsStack.length - 1];

            var ButtonInfo = { HeadIndex: null, TailIndex: null, ItemCount: null, };
            let PopulationData = {
                Distribution: null,
                ThisLevel: null,
                Prev: null,
                DoingEntries: false,
            };
            PopulationData.ThisLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
            PopulationData.Distribution = ComputeItemDistribution(PopulationData.ThisLevel);

            for(var ButtonIndex = 0; ButtonIndex < Nav.Buttons.length; ++ButtonIndex)
            {
                let Button = {
                    Projects: null,
                    Entries: null,
                    HeadIndex: null,
                    TailIndex: null,
                };

                if(PopulationData.Distribution.ProjectsToPlace > 0 || PopulationData.Distribution.EntriesToPlace > 0)
                {
                    ButtonInfo = PopulateButton(PopulationData, Button, ButtonIndex);
                    if(ButtonInfo.HeadIndex <= ThisProject.Index && ButtonInfo.TailIndex >= ThisProject.Index)
                    {
                        var FoundProject = PseudoPushButton(Button);
                        if(FoundProject)
                        {
                            ProjectsStack.pop();
                        }
                        break;
                    }
                    PopulationData.Prev = ButtonInfo;
                }
            }
        }

        if(TargetLevel.HeadIndex !== null && TargetLevel.TailIndex !== null)
        {
            var Descended = false;
            while(true)
            {
                let PopulationData = {
                    Distribution: null,
                    ThisLevel: null,
                    Prev: null,
                    DoingEntries: false,
                };
                PopulationData.ThisLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
                PopulationData.Distribution = ComputeItemDistribution(PopulationData.ThisLevel);

                for(var ButtonIndex = 0; ButtonIndex < Nav.Buttons.length; ++ButtonIndex)
                {
                    let Button = {
                        Projects: null,
                        Entries: null,
                        HeadIndex: null,
                        TailIndex: null,
                    };

                    if(PopulationData.Distribution.ProjectsToPlace > 0 || PopulationData.Distribution.EntriesToPlace > 0)
                    {
                        ButtonInfo = PopulateButton(PopulationData, Button, ButtonIndex);
                        if(ButtonInfo.HeadIndex <= TargetLevel.HeadIndex && ButtonInfo.TailIndex >= TargetLevel.TailIndex)
                        {
                            Descended = true;
                            PseudoPushButton(Button);
                            break;
                        }
                        PopulationData.Prev = ButtonInfo;
                    }
                }
                if(!Descended)
                {
                    break;
                }
                else
                {
                    Descended = false;
                }
            }
        }
    }
}

function
GetGenerationOf(Element)
{
    var Result = 0;
    if(Element.classList.contains("cineraIndexProject"))
    {
        ++Result;
        var ContainingProject = GetContainingProject(Element);
        while(ContainingProject)
        {
            ++Result;
            ContainingProject = GetContainingProject(ContainingProject);
        }
    }
    return Result;
}

function
ComputeTargetLevelForViewport()
{
    var Result = {
        Projects: null,
        Entries: null,
        HeadIndex: null,
        TailIndex: null,
    };

    var ViewportTop = window.scrollY;
    var ViewportBottom = ViewportTop + window.innerHeight;

    var ControlsHeight = Nav.Controls.Header.offsetHeight;
    ViewportTop += ControlsHeight;

    var Elements = [];
    for(var ProjectIndex = 0; ProjectIndex < Search.Projects.length; ++ProjectIndex)
    {
        var ThisProject = Search.Projects[ProjectIndex];
        Elements.push(ThisProject.projectTitleElement);
        if(ThisProject.entriesContainer)
        {
            var Entries = ThisProject.entriesContainer.querySelectorAll(":scope > div");
            if(Nav.SortChronological)
            {
                for(var EntryIndex = 0; EntryIndex < Entries.length; ++EntryIndex)
                {
                    Elements.push(Entries[EntryIndex]);
                }
            }
            else
            {
                for(var EntryIndex = Entries.length - 1; EntryIndex >= 0; --EntryIndex)
                {
                    Elements.push(Entries[EntryIndex]);
                }
            }
        }
    }

    var Upper = {
        Element: null,
        Parent: null,
        Type: null,
    };
    var Lower = {
        Element: null,
        Parent: null,
        Type: null,
    };

    for(var i = 0; i < Elements.length; ++i)
    {
        var ElementTop = getElementYOffsetFromPage(Elements[i]);
        if(!Upper.Element)
        {
            if(ElementTop >= ViewportTop)
            {
                Upper.Element = Elements[i];
                Lower.Element = Upper.Element;
            }
        }
        else
        {
            var ElementBottom = ElementTop + Elements[i].scrollHeight;
            if(ElementBottom <= ViewportBottom)
            {
                Lower.Element = Elements[i];
            }
            else
            {
                break;
            }
        }
    }

    Upper.Type = Upper.Element.classList.contains("cineraProjectTitle") ? item_type.PROJECT : item_type.ENTRY;
    Lower.Type = Lower.Element.classList.contains("cineraProjectTitle") ? item_type.PROJECT : item_type.ENTRY;

    Upper.Parent = Upper.Element.closest(".cineraIndexProject");
    Lower.Parent = Lower.Element.closest(".cineraIndexProject");

    if(Upper.Parent == Lower.Parent)
    {
        if(Upper.Type == Lower.Type)
        {
            switch(Upper.Type)
            {
                case item_type.PROJECT:
                    {
                        Result.Projects = Upper.Parent.querySelectorAll(":scope > .cineraIndexProject");
                        Result.HeadIndex = GetIndexOfElement(Result.Projects, Upper.Element);
                        Result.TailIndex = GetIndexOfElement(Result.Projects, Lower.Element);
                    } break;
                case item_type.ENTRY:
                    {
                        Result.Entries = Upper.Parent.querySelectorAll(":scope > .cineraIndexEntries > div");
                        Result.HeadIndex = GetIndexOfElement(Result.Entries, Upper.Element);
                        Result.TailIndex = GetIndexOfElement(Result.Entries, Lower.Element);
                    } break;
            }
            if(!Nav.SortChronological)
            {
                var Temp = Result.HeadIndex;
                Result.HeadIndex = Result.TailIndex;
                Result.TailIndex = Temp;
            }
        }
        else
        {
            Result.Projects = Upper.Parent.querySelectorAll(":scope > .cineraIndexProject");
            if(Result.Projects.length == 0) { Result.Projects = null; }
            Result.Entries = Upper.Parent.querySelectorAll(":scope > .cineraIndexEntries > div");
            if(Result.Entries.length == 0) { Result.Entries = null; }
        }
    }
    else
    {
        var UpperGeneration = GetGenerationOf(Upper.Parent);
        var LowerGeneration = GetGenerationOf(Lower.Parent);
        while(UpperGeneration > LowerGeneration)
        {
            Upper.Parent = GetContainingProject(Upper.Parent);
            --UpperGeneration;
        }
        while(LowerGeneration > UpperGeneration)
        {
            Lower.Parent = GetContainingProject(Lower.Parent);
            --LowerGeneration;
        }

        if(UpperGeneration == 0 && LowerGeneration == 0)
        {
            Upper.Parent = null;
            Lower.Parent = null;
        }

        while(Upper.Parent && Lower.Parent && Upper.Parent != Lower.Parent)
        {
            Upper.Parent = GetContainingProject(Upper.Parent);
            Lower.Parent = GetContainingProject(Lower.Parent);
        }

        if(Upper.Parent != null)
        {
            Result.Projects = Upper.Parent.querySelectorAll(":scope > .cineraIndexProject");
            if(Result.Projects.length == 0) { Result.Projects = null; }
            Result.Entries = Upper.Parent.querySelectorAll(":scope > .cineraIndexEntries > div");
            if(Result.Entries.length == 0) { Result.Entries = null; }
        }
    }

    while(Elements.length > 0)
    {
        Elements.pop();
    }

    return Result;
}

function
ScrollToWithOffset(Element, Offset)
{
    var ScrollTop = getElementYOffsetFromPage(Element);
    ScrollTop -= Offset;
    window.scrollTo(0, ScrollTop);
}

function
ToggleView()
{
    // NOTE(matt):  While we only have two views, a toggle will suffice
    clearTimeout(ScrollerFunction);
    ScrollTicking = false;
    if(Nav.ViewType == view_type.GRID)
    {
        Nav.Controls.View.textContent = "View: List";
        Nav.ViewType = view_type.LIST;
        if(MaintainingState())
        {
            ClearStateBit(state_bit.VIEW_GRID);
            SetStateBit(state_bit.VIEW_LIST);
        }

        if(!IsQuery())
        {
            Nav.List.classList.remove("hidden");
            Nav.GridContainer.classList.add("hidden");
            var LevelBundle = GetTraversalLevelBundle();
            if(LevelBundle.Generation > 1)
            {
                var Element;
                if(LevelBundle.This.Entries !== null)
                {
                    Element = GetScrollToElement(LevelBundle.This.Entries, Nav.SortChronological ? LevelBundle.This.HeadIndex : LevelBundle.This.TailIndex);
                }
                else if(LevelBundle.This.Projects !== null)
                {
                    Element = GetScrollToElement(LevelBundle.This.Projects, Nav.SortChronological ? LevelBundle.This.HeadIndex : LevelBundle.This.TailIndex);
                }
                ScrollToWithOffset(Element, Nav.Controls.Header.offsetHeight);
            }
        }
    }
    else
    {
        if(GridSizeIsSupported(Nav.GridSize))
        {
            Nav.Controls.View.textContent = "View: Grid";
            Nav.ViewType = view_type.GRID;
            if(MaintainingState())
            {
                ClearStateBit(state_bit.VIEW_LIST);
                SetStateBit(state_bit.VIEW_GRID);
            }

            if(!IsQuery())
            {
                var TargetLevel = ComputeTargetLevelForViewport();
                EmptyTraversalStack();
                if(TargetLevel.Projects || TargetLevel.Entries)
                {
                    var ProjectsStack = BuildProjectsStack(TargetLevel);
                    DeriveTraversalStack(ProjectsStack, TargetLevel);
                }
                Nav.List.classList.add("hidden");
                Nav.GridContainer.classList.remove("hidden");

                UpdateButtons();

                ScrollToWithOffset(Nav.Controls.GridTraversal.Header, Nav.Controls.Header.offsetHeight);
            }
        }
        else
        {
            // TODO(matt): Inform user that grid view is unavailable
        }
    }
    ScrollCondition = Nav.ViewType == view_type.GRID;
}

function
ToggleAnimations()
{
    Nav.Transition.Enabled = !Nav.Transition.Enabled;
    if(Nav.Transition.Enabled)
    {
        Nav.Controls.Anim.textContent = "Animations: ✔";
        Nav.Nexus.classList.add("anim");
        ClearStateBit(state_bit.DISABLE_ANIMATIONS);
    }
    else
    {
        Nav.Controls.Anim.textContent = "Animations: ✘";
        Nav.Nexus.classList.remove("anim");
        SetStateBit(state_bit.DISABLE_ANIMATIONS);
    }
}

function
ToggleSave()
{
    if(MaintainingState())
    {
        Nav.Controls.Save.textContent = "Save Settings: ✘";
        Nav.State = 0;
        Nav.State |= state_bit.NO_SAVE;
        SaveState();
    }
    else
    {
        Nav.Controls.Save.textContent = "Save Settings: ✔";
        Nav.State ^= state_bit.NO_SAVE;
        if(!Nav.Transition.Enabled) { SetStateBit(state_bit.DISABLE_ANIMATIONS); }
        if(!Nav.SortChronological) { SetStateBit(state_bit.SORT_REVERSED); }

        if(Nav.ViewType == view_type.LIST) { SetStateBit(state_bit.VIEW_LIST); }
        else if(Nav.ViewType == view_type.GRID) { SetStateBit(state_bit.VIEW_GRID); }
    }
}

function
BindMenuItem(Item)
{
    // TODO(matt): Enable this to bind the "click" event, making it take a function and parameters
    Item.addEventListener("mouseover", function(ev) { this.classList.add("focused"); });
    Item.addEventListener("mouseout", function(ev) { this.classList.remove("focused"); });
}

function
BindControls()
{
    var SettingsMenu = Nav.Controls.Header.querySelector(".cineraMenu.ViewSettings");
    var SettingsMenuContainer = SettingsMenu.querySelector(".cineraMenuContainer");

    SettingsMenu.addEventListener("mouseenter", function(ev) {
        SettingsMenuContainer.classList.add("visible");
    });

    SettingsMenu.addEventListener("mouseleave", function(ev) {
        SettingsMenuContainer.classList.remove("visible");
    });

    SettingsMenu.addEventListener("click", function(ev) {
        SettingsMenuContainer.classList.toggle("visible");
    });

    BindMenuItem(Nav.Controls.Sort);
    Nav.Controls.Sort.addEventListener("click", function(ev) { ev.stopPropagation(); EnqueueInteraction(interaction_type.SORT); });
    BindMenuItem(Nav.Controls.View);
    Nav.Controls.View.addEventListener("click", function(ev) { ev.stopPropagation(); ToggleView(); });
    BindMenuItem(Nav.Controls.Anim);
    Nav.Controls.Anim.addEventListener("click", function(ev) { ev.stopPropagation(); ToggleAnimations(); });
    BindMenuItem(Nav.Controls.Save);
    Nav.Controls.Save.addEventListener("click", function(ev) { ev.stopPropagation(); ToggleSave(); });

    var Filter = Nav.Controls.Header.querySelector(".cineraMenu.IndexFilter");
    if(Filter)
    {
        var FilterContainer = Filter.querySelector(".cineraMenuContainer");
        // TODO(matt):  Once we have multiple menus, use a menuState on this page
        //              menuState.push(Filter);

        Filter.addEventListener("mouseenter", function(ev) {
            FilterContainer.classList.add("visible");
        });

        Filter.addEventListener("mouseleave", function(ev) {
            FilterContainer.classList.remove("visible");
        });

        Filter.addEventListener("click", function(ev) {
            FilterContainer.classList.toggle("visible");
        });

        var IndexFilterProjects = Filter.querySelectorAll(".cineraFilterProject");
        for(var i = 0; i < IndexFilterProjects.length; ++i)
        {
            IndexFilterProjects[i].addEventListener("mouseover", function(ev) {
                ev.stopPropagation();
                this.classList.add("focused");
                focusSprite(this);
            });
            IndexFilterProjects[i].addEventListener("mouseout", function(ev) {
                ev.stopPropagation();
                this.classList.remove("focused");
                unfocusSprite(this);
            });
            IndexFilterProjects[i].addEventListener("click", function(ev) {
                ev.stopPropagation();
                toggleEntriesOfProjectAndChildren(this);
            });
        }
    }

    Search.QueryElement.addEventListener("input", function(ev) {
        history.replaceState(null, null, "#" + encodeURIComponent(Search.QueryElement.value));
        runSearch();
    });

    Nav.Controls.GridTraversal.Prev.addEventListener("click", function() { EnqueueInteraction(interaction_type.SIBLING_SHIFT_PREV) });
    Nav.Controls.GridTraversal.Ascend.addEventListener("click", function() { EnqueueInteraction(interaction_type.ASCEND) });
    Nav.Controls.GridTraversal.Next.addEventListener("click", function() { EnqueueInteraction(interaction_type.SIBLING_SHIFT_NEXT) });

    BindHelp(Nav.Controls.Help, Nav.Controls.HelpDocumentation);
}

function
InitButtons()
{
    if(GridSizeIsSupported(Nav.GridSize))
    {
        var ButtonPrototype = document.createElement("div");
        ButtonPrototype.classList.add("cineraButton", "subdivision");
        for(var i = 0; i < Nav.GridSize.X * Nav.GridSize.Y; ++i)
        {
            Nav.ButtonsContainer.appendChild(ButtonPrototype.cloneNode());
        }

        var Buttons = Nav.ButtonsContainer.querySelectorAll(".cineraButton.subdivision");
        for(let j = 0; j < Buttons.length; ++j)
        {
            let Button = {
                Element: Buttons[j],
                Projects: [],
                Entries: [],
                HeadIndex: null,
                TailIndex: null,
            };

            Buttons[j].addEventListener("click", function() {
                let InteractionData = {
                    Element: this,
                    Button: Button,
                };
                EnqueueInteraction(interaction_type.PUSH_BUTTON, InteractionData);
            });

            Nav.Buttons.push(Button);
        }
    }
}

function
ReinitButtons()
{
    for(; Nav.Buttons.length > 0;)
    {
        Nav.Buttons[0].Element.remove();
        Nav.Buttons.shift();
    }
    InitButtons();
}

function
PushLevelProjectUniquely(Stack, Level)
{
    if(Level.HeadIndex == null && Level.TailIndex == null)
    {
        var Found = false;
        var ContainingProject = GetContainingProjectOfLevel(Level);

        for(var i = 0; i < Stack.length; ++i)
        {
            if(ContainingProject === Stack[i].Element)
            {
                Found = true;
                break;
            }
        }

        if(!Found)
        {
            PushProjectOntoStack(Stack, ContainingProject);
        }
    }
}

function
ButtonContainsLevel(Button, Level)
{
    var Result = false;
    if(NodesMatch(Button.Projects, Level.Projects) && 
        NodesMatch(Button.Entries, Level.Entries) && 
        Button.HeadIndex <= Level.HeadIndex &&
        Button.TailIndex >= Level.TailIndex)
    {
        Result = true;
    }
    return Result;
}

function
PopulateButton(PopulationData, Button, ButtonIndex)
{
    var Result;
    if(PopulationData.Distribution.ProjectsToPlace > 0)
    {
        Button.Projects = PopulationData.ThisLevel.Projects;
        if(PopulationData.Distribution.ProjectsToPlace == 1 || PopulationData.Distribution.ProjectsToPlace == PopulationData.Distribution.ButtonsForProjects - ButtonIndex)
        {
            PopulationData.Distribution.FullButtonProjectCount = 1;
        }

        Result = SetButtonInfo(Button, PopulationData.Prev, PopulationData.ThisLevel, PopulationData.Distribution);
        if(Result.ItemCount == 1)
        {
            Button.Projects = PopulationData.ThisLevel.Projects[Result.HeadIndex];
        }
        PopulationData.Distribution.ProjectsToPlace -= Result.ItemCount;
    }
    else
    {
        Button.Entries = PopulationData.ThisLevel.Entries;
        if(!PopulationData.DoingEntries)
        {
            PopulationData.Prev = null;
            PopulationData.DoingEntries = true;
        }

        if(PopulationData.Distribution.EntriesToPlace == 1 || PopulationData.Distribution.EntriesToPlace == PopulationData.Distribution.ButtonsForEntries - ButtonIndex)
        {
            PopulationData.Distribution.FullButtonEntryCount = 1;
        }

        Result = SetButtonInfo(Button, PopulationData.Prev, PopulationData.ThisLevel, PopulationData.Distribution);
        if(Result.ItemCount == 1)
        {
            Button.Entries = Button.Entries[Result.HeadIndex];
        }
        PopulationData.Distribution.EntriesToPlace -= Result.ItemCount;
    }
    return Result;
}

function
PseudoPushButton(Button)
{
    var ButtonIsProjectOrEntry = false;

    var Level = {
        Projects: Button.Projects,
        Entries: Button.Entries,
        HeadIndex: Button.HeadIndex,
        TailIndex: Button.TailIndex,
    };

    if(Level.Projects !== null || Level.Entries !== null)
    {
        if(Level.Projects !== null)
        {
            if(Level.Projects.length === undefined)
            {
                var Entries = Level.Projects.querySelectorAll(":scope > .cineraIndexEntries > div");
                var Projects = Level.Projects.querySelectorAll(":scope > .cineraIndexProject");
                Level.Entries = Entries.length ? Entries : null;
                Level.Projects = Projects.length ? Projects : null;
                ButtonIsProjectOrEntry = true;
            }
            Nav.TraversalStack.push(Level);
        }
        else
        {
            if(Level.Entries.length === undefined)
            {
                ButtonIsProjectOrEntry = true;
            }
            else
            {
                Nav.TraversalStack.push(Level);
            }
        }
    }

    return ButtonIsProjectOrEntry;
}

function
ResizeFunction()
{
    CineraProps.Orientation = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
    if(CineraProps.IsMobile)
    {
        UseOrientation(CineraProps.Orientation);
    }
    var NewGridSize = ComputeOptimalGridSize();
    if(Nav.GridSize !== NewGridSize)
    {
        UnbindGridKeys();
        Nav.GridSize = NewGridSize;
        ReinitButtons();
        BindGridKeys();
        SetHelpKeyAvailability(Nav.GridSize)
        if(GridSizeIsSupported(Nav.GridSize))
        {
            var TargetLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
            var ProjectsStack = EmptyTraversalStackIntoProjectsStack();
            DeriveTraversalStack(ProjectsStack, TargetLevel);
        }
        else if(Nav.ViewType == view_type.GRID)
        {
            ToggleView();
            // TODO(matt):  Inform user that we've switched to the list view
        }
        ScrollToWithOffset(Nav.Nexus, 0);
    }
    UpdateButtons();
}

function
InitResizeEventListener()
{
    window.addEventListener("resize", function() {
        if(CineraProps.IsMobile)
        {
            window.setTimeout(ResizeFunction, 512);
        }
        else
        {
            ResizeFunction();
        }
    });
}

function
InitOrientationChangeListener()
{
    window.onorientationchange = function()
    {
        if(CineraProps.IsMobile)
        {
            window.setTimeout(ResizeFunction, 512);
        }
        else
        {
            ResizeFunction();
        }
    };
}
//
// Presenting / Navigating (Laying out and traversing the grid, and sorting)