<?php
/**
 * Template Name: Status Page
 **/
?>
<?php get_header(); ?>
<script>
function xhrPromise(url) {
    return new Promise(function(resolve, reject) {
        var xhrRequest = new XMLHttpRequest();
        xhrRequest.open('GET', url, true);
        xhrRequest.responseType = "json";

        xhrRequest.onload = function() {
            if (xhrRequest.status == 200) {
                if (xhrRequest.response) {
                    resolve(xhrRequest.response);
                } else {
                    reject({ request: xhrRequest, url:url});
                }
            } else {
                reject({ request: xhrRequest, url:url});
            }
        };
        xhrRequest.onerror = function() {
            reject({ request: xhrRequest, url:url});
        };
        xhrRequest.send();
    });
}
var origin = new URL("https://<?php echo strpos(WP_HOST, "webkit.org") !== false ? "svn.webkit.org" : WP_HOST; ?>/");
var loadJavaScriptCoreFeatures = xhrPromise(new URL("/repository/webkit/trunk/Source/JavaScriptCore/features.json", origin));
var loadWebCoreFeatures = xhrPromise(new URL("/repository/webkit/trunk/Source/WebCore/features.json", origin));
</script>

<style>

:root {
    --feature-rule-color: hsl(0, 0%, 89.4%);
    --status-color: hsl(0, 0%, 60%);
    --supported-color: hsl(100, 100%, 30%);
    --supported-in-preview-color: hsl(275.4, 77.7%, 35.1%);
    --in-development-color: hsl(24.5, 91.3%, 50.6%);
    --no-active-development-color: hsl(240, 60.6%, 59.2%);
    --partially-supported-color: hsl(180, 25%, 43.9%);
    --prototyping-color: hsl(211.3, 100%, 50%);
    --under-consideration-color: hsl(5.9, 40.2%, 60%);
}

@media(prefers-color-scheme:dark) {
    :root {
        --feature-rule-color: hsl(0, 0%, 20%);
        --status-color: hsl(0, 0%, 51%);
        --supported-color: hsl(79.5, 45.3%, 52%);
        --supported-in-preview-color: hsl(276.7, 36.3%, 51.4%);
        --in-development-color: hsl(24.5, 91.3%, 50.6%);
        --no-active-development-color: hsl(240, 60.6%, 59.2%);
        --partially-supported-color: hsl(180, 30%, 52%);
        --prototyping-color: hsl(211.3, 100%, 50%);
        --under-consideration-color: hsl(0, 35%, 61%);
    }
}

.page h1 {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 6rem;
    margin: 3rem auto;
    width: 100%;
    text-align: center;
}

.page h1 a {
    color: inherit;
}

.feature-status-page {
    padding-bottom: 3rem;
}

.feature-status-page p {
    max-width: 920px;
    margin: 0 auto 3rem;
}

.feature-filters {
    background-color: hsl(0, 0%, 0%);
    background-color: var(--figure-mattewhite-background-color);
    width: 100vw;
    left: 50%;
    position: relative;
    transform: translate(-50vw, 0);
    box-sizing: border-box;
    margin-bottom: 3rem;
    border: 1px solid hsl(0, 0%, 90.6%);
    border-color: var(--article-border-color);
    border-left: none;
    border-right: none;
}

.feature-filters form {
    max-width: 920px;
    margin: 0 auto 0;
    position: relative;
    top: 0;
}
/*.feature-filters form {
    padding-top: 3rem;
    padding-bottom: 3rem;
}*/

.feature-filters .search-input {
    background-repeat: no-repeat;
    background-position-x: 0.5rem;
    background-position-y: 1rem;
    background-size: 2rem;
    padding: 1rem;
    padding-left: 3rem;
    padding-right: 8.5rem;
    font-size: 2rem;
    width: 100%;
    margin-top: 0rem;
    margin-bottom: 0rem;
    box-sizing: border-box;
    border-color: transparent;
}

.feature-filters .filters-toggle-button {
    background-repeat: no-repeat;
    background-size: 2rem;
    background-position: right;
    background-filter: lightness(2);
    position: absolute;
    padding-right: 2.5rem;
    right: 1rem;
    top: 1rem;
    border: none;
    color: hsl(240, 2.3%, 56.7%);
}

.feature-filters .filters-toggle-button:hover {
    filter: brightness(0);
}

.feature-filters li {
    display: inline-block;
}

.feature-status label,
.feature-filters label {
    display: table-cell;
    padding: 0.5rem 1rem;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    cursor: pointer;
    float: right;
    line-height: 1;
    font-size: 1.6rem;
}

.status-filters label {
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.feature-filters label {
    float: none;
    display: inline-block;
}

.status-filters {
    list-style: none;
    display: none;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

#feature-filters.opened {
    margin-top: 1.5rem;
}

#feature-filters.opened .status-filters {
    display: block;
}
#feature-filters.opened .search-input {
    border-color: hsl(0, 0%, 83.9%);
    border-color: var(--input-border-color);
}

.filter-toggle:checked + .filter-status {
    color: hsl(240, 1.3%, 84.5%);
    color: var(--text-color);
}

.feature-filters label > input {
    position: relative;
    top: -1px;
}

.filter-status,
.feature-status {
    color: hsl(0, 0%, 60%);
    color: var(--status-color);
    border-color: hsl(0, 0%, 60%);
    border-color: var(--status-color);
}

.feature-status a {
    color: inherit;
}

.filter-status,
.status-marker {
    border-color: hsl(0, 0%, 60%);
    border-color: var(--status-color)
}
.filter-toggle:checked + .filter-status {
    background-color: hsl(0, 0%, 60%);
    background-color: var(--status-color);
}

/** Status color mapping **/
.supported {
    color: hsl(100, 100%, 30%);
    color: var(--supported-color);
    border-color: hsl(100, 100%, 30%);
    border-color: var(--supported-color);
}

.filter-toggle:checked + .supported {
    background-color: hsl(100, 100%, 30%);
    background-color: var(--supported-color);
}

.supported-in-preview {
    color: hsl(275.4, 77.7%, 35.1%);
    color: var(--supported-in-preview-color);
    border-color: hsl(275.4, 77.7%, 35.1%);
    border-color: var(--supported-in-preview-color);
}

.filter-toggle:checked + .supported-in-preview {
    background-color: hsl(275.4, 77.7%, 35.1%);
    background-color: var(--supported-in-preview-color);
}

.in-development {
    color: hsl(24.5, 91.3%, 50.6%);
    color: var(--in-development-color);
    border-color: hsl(24.5, 91.3%, 50.6%);
    border-color: var(--in-development-color);
}
.filter-toggle:checked + .in-development {
    background-color: hsl(24.5, 91.3%, 50.6%);
    background-color: var(--in-development-color);
}

.no-active-development {
    color: hsl(240, 60.6%, 59.2%);
    color: var(--no-active-development-color);
    border-color: hsl(240, 60.6%, 59.2%);
    border-color: var(--no-active-development-color);
}

.filter-toggle:checked + .no-active-development {
    background-color: hsl(240, 60.6%, 59.2%);
    background-color: var(--no-active-development-color);
}

.partially-supported  {
    color: hsl(180, 25%, 43.9%);
    color: var(--partially-supported-color);
    border-color: hsl(180, 25%, 43.9%);
    border-color: var(--partially-supported-color);
}

.filter-toggle:checked + .partially-supported {
    background-color: hsl(180, 25%, 43.9%);
    background-color: var(--partially-supported-color);
}

.prototyping {
    color: hsl(211.3, 100%, 50%);
    color: var(--prototyping-color);
    border-color: hsl(211.3, 100%, 50%);
    border-color: var(--prototyping-color);
}

.filter-toggle:checked + .prototyping {
    background-color: hsl(211.3, 100%, 50%);
    background-color: var(--prototyping-color);
}

.under-consideration {
    color: hsl(5.9, 40.2%, 60%);
    color: var(--under-consideration-color);
    border-color: hsl(5.9, 40.2%, 60%);
    border-color: var(--under-consideration-color);
}

.filter-toggle:checked + .under-consideration {
    background-color: hsl(5.9, 40.2%, 60%);
    background-color: var(--under-consideration-color);
}

.feature.is-hidden {
    display: none;
}

.features,
.features-count {
    max-width: 920px;
    margin: 0 auto 3rem;
}

.features {
    border-bottom: 1px solid hsl(0, 0%, 89.4%);
    border-color: var(--feature-rule-color);
}

.feature-count {
    text-align: right;
    color: #999;
}

.feature {
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-top-color: hsl(0, 0%, 89.4%);
    border-top-color: var(--feature-rule-color);
    padding: 0.5rem;
    line-height: 1.618;
    transition: background-color 0.3s ease-out;
}

.feature-header {
    font-weight: 400;
    font-size: 2.5rem;
    display: flex;
}

.feature-header h3 {
    flex: 1;
    flex-grow: 2;
    padding-right: 1rem;
    box-sizing: border-box;
}

.feature-header h3 a {
    padding-right: 1rem;
}

.feature-header .feature-status {
    flex: 2;
    text-align: right;
    font-size: 2rem;
}

.feature-container.status-marker {
    border-left-width: 3px;
    border-left-style: solid;
    padding: 0.5rem 0 0.5rem 1rem;
}

.feature-header a[name] {
    color: hsl(0, 0%, 26.7%);
    color: var(--text-color-heading);
}

.feature-header .internal-reference {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 600;
    white-space: nowrap;
}

.feature-header .internal-reference a {
    color: hsl(0, 0%, 33.3%);
    color: var(--text-color-medium);
}

@media(prefers-color-scheme:dark) {
    .feature-header:after {
        filter: invert(1);
    }

    .search-input:hover,
    .search-input:focus,
    .feature-filters .filters-toggle-button:hover {
        filter: brightness(2);
    }
}

.feature.opened .feature-header:after {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    perspective: 600;
}

.feature-header:after {
    position: relative;
    width: 2rem;
    height: 2rem;
    right: 0;
    top: 0.5rem;
    margin-left: 1rem;
    transition: transform 0.3s ease-out;
}

.feature-details {
    display: none;
    width: 50%;
}

.feature.opened {
    background-color: hsl(0, 0%, 100%);
    background-color: var(--figure-mattewhite-background-color);
    border-left-color: hsl(0, 0%, 89.4%);
    border-left-color: var(--feature-rule-color);
    border-right-color: hsl(0, 0%, 89.4%);
    border-right-color: var(--feature-rule-color);
}

.feature.opened .feature-details {
    display: block;
}

.feature h4 {
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0;
    color: hsl(0, 0%, 33.3%);
    color: var(--text-color-medium);
}

.feature .moreinfo {
    list-style: none;
    display: flex;
    width: 100%;
}

.feature .moreinfo li {
    flex-grow: 1;
}

.feature .moreinfo .contact {
    text-align: right;
}

.feature .feature-desc {
    color: hsl(0, 0%, 20%);
    color: var(--text-color);
}

.feature .comment {
    color: hsl(0, 0%, 33.3%);
    color: var(--text-color-medium);
    font-style: italic;
}

.sub-features {
    font-size: 1.5rem;
    color: hsl(0, 0%, 24%);
    color: var(--text-color-light);
}

.sub-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-features li {
    display: inline-block;
    white-space: nowrap;
}

.sub-features li:after {
    content: ", ";
    white-space: pre;
}

.sub-features li:last-child:after {
    content: "";
}

.pagination:after {
    display: none;
}

.pagination,
.pagination + h1 {
    margin-top: 0;
}

@media only screen and (max-width: 1180px) {
    .feature-details {
        width: 100%;
    }

    .feature-filters .filters-toggle-button {
        right: 3rem;
    }
}

@media only screen and (max-width: 508px) {
    #feature-filters,
    #feature-list {
        width: 100%;
    }

    #feature-filters {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .feature-header h3 {
        font-size: 2rem;
        padding-right: 0.5rem;
    }

    .feature-status {
        font-size: 1.6rem;
        margin-top: 0.4rem;
        float: left;
    }

    .feature-header:after {
        width: 1rem;
        height: 1rem;
        background-size: 1rem;
        top: 1rem;
    }

    .feature h3 {
        font-size: 2rem;
        padding-top: 4rem;
    }

    .feature-header .feature-status {
        font-size: 1.6rem;
        position: absolute;
        text-align: left;
    }

    .feature .moreinfo {
        flex-wrap: wrap;
    }

    .feature .moreinfo .contact {
        text-align: left;
    }

    .status-filters {
        flex-basis: 100%;
    }

    .status-filters label {
        margin-left: 0;
        margin-right: 1rem;
    }
}

h3 a[name], .admin-bar h3 a[name] {
    top: initial;
    width: auto;
    display: inline-block;
    visibility: visible;
}


</style>
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div class="page feature-status-page" id="post-<?php the_ID(); ?>">
            <div class="connected pagination">
                <?php wp_nav_menu( array('theme_location'  => 'feature-subnav') ); ?>
            </div>

            <h1><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>

            <section class="feature-filters">
                <form id="feature-filters" class="page-width">
                    <input type="text" id="search" class="search-input" placeholder="Search features&hellip;" title="Filter the feature list." required><label class="filters-toggle-button">Filters</label>
                    <ul id="status-filters" class="status-filters"></ul>
                </form>
            </section>

            <section id="feature-list">
                <div class="feature-count">
                    <p><span id="feature-count"></span> <span id="feature-pluralize">features</span></p>
                </div>

            </section>

            <template id="success-template">
                <ul class="features" id="features-container"></ul>
                <p>Cannot find something? You can contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or contact the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list for questions.</p>
                <p>You can also <a href="/contributing-code/">contribute to features</a> directly, the entire project is Open Source. To report bugs on existing features or check existing bug reports, see <a href="https://bugs.webkit.org">https://bugs.webkit.org</a>.</p>
            </template>
            <template id="error-template">
                <p>Error: unable to load the features list (<span id="error-message"></span>).</p>
                <p>If this is not resolved soon, please contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list.</p>
            </template>
        </div>

    <?php endwhile; else: ?>

        <p>No posts.</p>

    <?php endif; ?>


<script>
function initializeStatusPage() {

    const statusOrder = [
        'under consideration',
        'prototyping',
        'in development',
        'supported in preview',
        'partially supported',
        'supported',
        'deprecated',
        'removed',
        'removed in preview',
        'not considering'
    ];

    function sortAlphabetically(array)
    {
        array.sort(function(a, b){
            var aName = a.name.toLowerCase();
            var bName = b.name.toLowerCase();

            var nameCompareResult = aName.localeCompare(bName);

            if ( nameCompareResult )
                return nameCompareResult;

            // Status sort
            var aStatus = a.status != undefined ? a.status.status.toLowerCase() : '';
            var bStatus = b.status != undefined ? b.status.status.toLowerCase() : '';

            return aStatus.localeCompare(bStatus);
        });
    }

    function createFeatureView(featureObject)
    {

        function createLinkWithHeading(elementName, heading, linkText, linkUrl) {
            var container = document.createElement(elementName);
            if (heading) {
                var h4 = document.createElement('h4');
                h4.textContent = heading;
                container.appendChild(h4);
            }
            var link = document.createElement("a");
            link.textContent = linkText;
            link.href = linkUrl;
            if (linkText == linkUrl)
                link.textContent = link.hostname + "…";
            container.appendChild(link);
            return container;
        }

        function makeTwitterLink(twitterHandle) {
            if (twitterHandle[0] == "@")
                twitterHandle = twitterHandle.substring(1);
            return "https://twitter.com/" + twitterHandle;
        }

        var container = document.createElement('li');
        var hasDocumentationLink = "documentation-url" in featureObject;
        var hasReferenceLink = "url" in featureObject;
        var hasContactObject = "contact" in featureObject;
        var hasSpecificationObject = "specification" in featureObject;

        container.addEventListener('click', function (e) {
            if ( container.className.indexOf('opened') !== -1 ) {
                container.className = container.className.replace(' opened','');
            } else container.className += " opened";
        });

        container.className = "feature";

        var slug = canonicalizeIdentifier(featureObject.name);
        if ("features" in featureObject) {
            container.setAttribute("id", "specification-" + slug);
        } else {
            container.setAttribute("id", "feature-" + slug);
        }

        if (window.location.hash && window.location.hash == "#" + container.getAttribute('id')) {
            container.className += " opened";
        }

        var featureContainer = document.createElement('div');
        featureContainer.className = "feature-container status-marker";

        var featureHeaderContainer = document.createElement('div');
        featureHeaderContainer.className = "feature-header";
        featureContainer.appendChild(featureHeaderContainer);

        var titleElement = document.createElement("h3");
        var anchorLinkElement = document.createElement("a");
        anchorLinkElement.href = "#" + container.getAttribute("id");
        anchorLinkElement.name = container.getAttribute("id");
        anchorLinkElement.textContent = featureObject.name;
        titleElement.appendChild(anchorLinkElement);

        // Add sub-feature here
        if (hasSpecificationObject) {
            var specification = featureObject.specification;
            var specSpan = createLinkWithHeading("h4", null, specification.name, "#specification-" + specification.name.toLowerCase().replace(/ /g, '-'));
            specSpan.className = "internal-reference";
            titleElement.appendChild(specSpan);
        }

        featureHeaderContainer.appendChild(titleElement);

        if ("status" in featureObject) {
            var statusContainer = document.createElement("div");
            var statusClassName = canonicalizeIdentifier(featureObject.status.status);
            featureContainer.className += " " + statusClassName;
            statusContainer.className = "feature-status " + statusClassName;
            var statusLabel = document.createElement("label");

            if ("webkit-url" in featureObject) {
                var statusLink = document.createElement("a");
                statusLink.href = featureObject["webkit-url"];
                statusLink.textContent = featureObject.status.status;
                statusLabel.appendChild(statusLink);
            } else {
                statusLabel.textContent = featureObject.status.status;
            }

            statusContainer.appendChild(statusLabel);
            featureHeaderContainer.appendChild(statusContainer);
        }

        var featureDetails = document.createElement('div');
        featureDetails.className = 'feature-details';

        if ("description" in featureObject) {
            var textDescription = document.createElement('p');
            textDescription.className = "feature-desc";
            textDescription.innerHTML = featureObject.description;
            featureDetails.appendChild(textDescription);
        }

        if ("comment" in featureObject) {
            var comment = document.createElement('p');
            comment.className = 'comment';
            comment.innerHTML = featureObject.comment;
            featureDetails.appendChild(comment);
        }

        if ("features" in featureObject && featureObject.features.length) {
            var internalLinkContainer = document.createElement("div");
            internalLinkContainer.className = "internal-reference sub-features";
            var internalHeading = document.createElement("h4");
            internalHeading.textContent = "Includes";
            internalLinkContainer.appendChild(internalHeading);

            var list = document.createElement("ul");
            for (var feature of featureObject.features) {
                var link = document.createElement("a");
                link.textContent = feature.name;
                link.href = "#feature-" + canonicalizeIdentifier(feature.name);

                var li = document.createElement("li");
                li.appendChild(link);
                list.appendChild(li);
            }
            internalLinkContainer.appendChild(list);
            featureDetails.appendChild(internalLinkContainer);
        }

        if (hasDocumentationLink || hasReferenceLink || hasContactObject) {
            var moreInfoList = document.createElement("ul");
            moreInfoList.className = 'moreinfo';
            if (hasDocumentationLink) {
                var url = featureObject["documentation-url"];
                moreInfoList.appendChild(createLinkWithHeading("li", "Documentation", url, url));
            }

            if (hasReferenceLink) {
                var url = featureObject.url;
                moreInfoList.appendChild(createLinkWithHeading("li", "Reference", url, url));
            }

            if (hasContactObject) {
                var li = document.createElement("li");
                li.className = "contact";
                var contactHeading = document.createElement("h4");
                contactHeading.textContent = "Contact";
                li.appendChild(contactHeading);

                if (featureObject.contact.twitter) {
                    li.appendChild(createLinkWithHeading("span", null, featureObject.contact.twitter, makeTwitterLink(featureObject.contact.twitter)));
                }
                if (featureObject.contact.email) {
                    if (featureObject.contact.twitter) {
                        li.appendChild(document.createTextNode(" - "));
                    }
                    var emailText = featureObject.contact.email;
                    if (featureObject.contact.name) {
                        emailText = featureObject.contact.name;
                    }
                    li.appendChild(createLinkWithHeading("span", null, emailText, "mailto:" + featureObject.contact.email));
                }
                moreInfoList.appendChild(li);
            }

            featureDetails.appendChild(moreInfoList);
        }

        featureContainer.appendChild(featureDetails);
        container.appendChild(featureContainer);

        return container;
    }

    function canonicalizeIdentifier(identifier)
    {
        return identifier.toLocaleLowerCase().replace(/ /g, '-');
    }


    function renderFeaturesAndSpecifications(featureLikeObjects)
    {
        var featureContainer = document.getElementById('features-container');
        for (var featureLikeObject of featureLikeObjects) {
            featureContainer.appendChild(createFeatureView(featureLikeObject));
        }
    }

    function initSearch(featuresArray)
    {
        var filtersForm = document.getElementById('feature-filters');
        var filtersToggleButton = document.getElementsByClassName('filters-toggle-button')[0];
        var statusContainer = document.getElementById('status-filters');
        var inputField = document.getElementById('search');
        var featuresEls = document.querySelectorAll('.features > li');
        var statusFilters = {};

        featuresArray.forEach(function(feature, i) {
            feature.el = featuresEls[i];
            feature.visible = true;

            if (feature.status != undefined) {
                featureStatusKey = feature.status.status.toLocaleLowerCase();

                if (!statusFilters[featureStatusKey])
                    statusFilters[featureStatusKey] = feature.status.status;

                if (statusOrder.indexOf(featureStatusKey) == -1)
                    window.console.log('Status ' + featureStatusKey + ' is not one of the predefined status keys ', statusOrder);

            }
        });

        var searchTerm = searchTermFromURL();
        var selectedStatuses = statusesFromURL();

        for (var key of statusOrder) {
            if (statusFilters[key] == undefined)
                continue;

            var statusLabel = statusFilters[key];
            var statusId = canonicalizeIdentifier(statusLabel);
            var entry = document.createElement("li");
            var label = document.createElement("label");
            var input = document.createElement("input");

            input.setAttribute('type','checkbox');
            input.setAttribute('value', key);
            input.setAttribute('id', 'toggle-' + statusId);
            input.className = 'filter-toggle';
            input.addEventListener('change', function() { updateSearch(featuresArray); });

            if (selectedStatuses.indexOf(statusId) != -1) {
                filtersForm.classList.add('opened');
                input.checked = true;
            }

            label.className = "filter-status " + statusId;
            label.setAttribute('for', 'toggle-' + statusId);
            label.appendChild(input);
            label.appendChild(document.createTextNode(" " + statusLabel));

            entry.appendChild(label);

            statusContainer.appendChild(entry);
        }

        filtersToggleButton.addEventListener('click', function (e) {
            filtersForm.classList.toggle('opened');
        });

        if (searchTerm.length) {
            inputField.value = searchTerm;
            inputField.placeholder = '';
        }
        inputField.addEventListener('input', function() { updateSearch(featuresArray); });


        var inputs = [].slice.call(filtersForm.getElementsByTagName('input'));
        inputs.forEach(function (input,i) {
            input.addEventListener('click', function (e) {
                e.stopPropagation();
            });
        });

        function search(ev)
        {
            var searchTerm = inputField.value.trim().toLowerCase();
            var activeStatusFilters = [];
            var checkboxes = [].slice.call(statusContainer.getElementsByTagName('input'));
            checkboxes.forEach(function(checkbox,i) {
                if ( checkbox.checked )
                    activeStatusFilters.push(checkbox.value);
            });

            searchFeatures(featuresArray, searchTerm, activeStatusFilters);
        }
    }

    function getValuesOfCheckedItems(items)
    {
        var checkedValues = [];
        items.forEach(function(item,i) {
            if (item.checked)
                checkedValues.push(item.value);
        });

        return checkedValues;
    }

    function updateSearch(properties)
    {
        var inputField = document.getElementById('search');
        var statusContainer = document.getElementById('status-filters');

        var searchTerm = inputField.value.trim().toLowerCase();
        var activeStatusFilters = getValuesOfCheckedItems([].slice.call(statusContainer.querySelectorAll('.filter-toggle')));

        var numVisible = searchFeatures(properties, searchTerm, activeStatusFilters);
        document.getElementById('feature-pluralize').textContent = numVisible == 1 ? 'feature' : 'features';
        document.getElementById('feature-count').textContent = numVisible;

        updateURL(searchTerm, activeStatusFilters);
    }

    function searchFeatures(features, searchTerm, statusFilters)
    {
        var visibleCount = 0;
        features.forEach(function(featureObject) {
            var matchesStatusSearch = isStatusFiltered(featureObject, statusFilters);

            var visible = isSearchMatch(featureObject, searchTerm) && matchesStatusSearch;
            if (visible && !featureObject.visible)
                featureObject.el.className = 'feature';
            else if (!visible && featureObject.visible)
                featureObject.el.className = 'feature is-hidden';

            if (visible) {
                // filterValues(featureObject, searchTerm);
                ++visibleCount;
            }

            featureObject.visible = visible;
        });

        return visibleCount;
    }

    function searchTermFromURL()
    {
        var search = window.location.search;
        var searchRegExp = /\#.*search=([^&]+)/;

        var result;
        if (result = window.location.href.match(searchRegExp))
            return decodeURIComponent(result[1]);

        return '';
    }

    function statusesFromURL()
    {
        var search = window.location.search;
        var statusRegExp = /\#.*status=([^&]+)/;

        var result;
        if (result = window.location.href.match(statusRegExp))
            return result[1].split(',');

        return [];
    }

    function isSearchMatch(feature, searchTerm)
    {
        if (feature.name.toLowerCase().indexOf(searchTerm) !== -1)
            return true;
        if ("keywords" in feature) {
            for (var keyword of feature.keywords) {
                if (keyword.toLowerCase().indexOf(searchTerm) !== -1)
                    return true;
            }
        }
        return false;
    }

    function isStatusFiltered(feature, activeFilters)
    {
        if (activeFilters.length == 0)
            return true;
        if (feature.status === undefined)
            return false;
        if (activeFilters.indexOf(feature.status.status.toLowerCase()) != -1)
            return true;

        return false;
    }

    function filterValues(featureObject, searchTerm, statusFilters)
    {
        for (var valueObj of featureObject.values) {
            if (!valueObj.el)
                continue;

            var visible = false;
            visible = valueObj.value.toLowerCase().indexOf(searchTerm) !== -1;

            if (visible)
                valueObj.el.classList.remove('hidden');
            else
                valueObj.el.classList.add('hidden');
        }
    }

    function displayFeatures(results)
    {
        var mainContent = document.getElementById("feature-list");
        var successSubtree = document.importNode(document.getElementById("success-template").content, true);
        mainContent.appendChild(successSubtree);

        var allSpecifications = [];
        for (var i in results) {
            allSpecifications = allSpecifications.concat(results[i].specification);
        }
        var specificationsByName = {}
        for (var specification of allSpecifications) {
            specification.features = [];
            specification.isSpecification = true;
            specificationsByName[specification.name] = specification;
        }

        var allFeatures = [];
        for (var i in results) {
            allFeatures = allFeatures.concat(results[i].features);
        }
        var featuresByName = {};
        for (var feature of allFeatures) {
            if ('specification' in feature) {
                var featureSpecification = feature.specification;
                var specificationObject = specificationsByName[featureSpecification];
                if (specificationObject != undefined) {
                    specificationObject.features.push(feature);
                    feature.specification = specificationObject;
                } else {
                    feature.specification = {
                        name: featureSpecification
                    };
                }
            }
            feature.isSpecification = false;
            featuresByName[feature.name] = feature;
        }

        var everythingToShow = allFeatures.concat(allSpecifications);

        sortAlphabetically(everythingToShow);

        renderFeaturesAndSpecifications(everythingToShow);

        initSearch(everythingToShow);

        updateSearch(everythingToShow);

        if (window.location.hash.length) {
            var hash = window.location.hash;
            window.location.hash = ""; // Change hash so navigation takes place
            window.location.hash = hash;
        }
    }

    function displayError(error)
    {
        var mainContent = document.getElementById("feature-list");
        var successSubtree = document.importNode(document.getElementById("error-template").content, true);

        var errorMessage = "Unable to load " + error.url;

        if (error.request.status !== 200) {
            errorMessage += ", status: " + error.request.status + " - " + error.request.statusText;
        } else if (!error.response) {
            errorMessage += ", the JSON file cannot be processed.";
        }

        successSubtree.querySelector("#error-message").textContent = errorMessage;

        mainContent.appendChild(successSubtree);
    }

    function updateURL(searchTerm, activeStatusFilters)
    {
        var searchString = '';

        function appendDelimiter()
        {
            searchString += searchString.length ? '&' : '?';
        }

        if (searchTerm.length > 0) {
            appendDelimiter();
            searchString += 'search=' + encodeURIComponent(searchTerm);
        }

        if (activeStatusFilters.length) {
            appendDelimiter();
            searchString += 'status=' + activeStatusFilters.join(',');
        }

        if (searchString.length) {
            var current = window.location.href;
            window.location.href = current.replace(/\??#(.*)$/, '') + '#' + searchString;
        }

    }


    Promise.all([loadJavaScriptCoreFeatures, loadWebCoreFeatures]).then(displayFeatures).catch(displayError);
}

document.addEventListener("DOMContentLoaded", initializeStatusPage);
</script>

<?php get_footer(); ?>