/* JavaScript for simple Markdown accordion/collapsible panels */

// Select all accordion tab titles
var accordionTitles = document.querySelectorAll('summary :is(h2,h3,h4,h5,h6)')

// Add 'id' attribute to accordion titles that do not have a manually placed anchor
$(accordionTitles).each(function () {
    if ($(this).attr('id')) {
        // Do nothing since the title already has 'id' attribute
    } else { // Add 'id' attribute with value set to title text
        var titleContent = $(this).text()
        titleContent = titleContent.replace(/ /g,'-')
        titleContent = titleContent.replace(/[^a-zA-Z0-9_-]/g,'')
        $(this).attr('id', titleContent.toLowerCase())
    }
});

// Code to automatically open and close accordions that are linked to

// Select the hash in the URL of the page
var hash = window.location.hash

// Select all headers inside accordions
var accordionHeaders = document.querySelectorAll('details :is(h2,h3,h4,h5,h6)')

// This function checks for a header 'id' inside any accordion that matches current hash and opens the respective accordion
function checkAccordionIds() {
    $(accordionHeaders).each(function () {
        var accordionHeaderID = '#' + $(this).attr('id')
        if (accordionHeaderID === hash) {
            $(this).parents('details').attr('open','')
        } else {
            return
        }
    });
};

// Runs checkAccordionIds() on page load
checkAccordionIds()

// Listens for a hash change (when you click a link on the page) and then resets hash and runs checkAccordionIds()
window.addEventListener('hashchange', function() {
    hash = window.location.hash
    checkAccordionIds() 
});

// Fixed top and bottom margins for H2 accordions and any accordions that are followed by a non-accordion element

$('details').each(function () {
    if ($(this).children('summary').children().is('h2') && $(this).prev().is(':not(details)')) {
        $(this).addClass('top-h2-accordion')
    } else if (!$(this).next().is('details')) {
        $(this).addClass('final-accordion')
    } else {
        return
    }
});

// Adding class to all <summary> tags so summary::after can be better manipulated with CSS

$('summary').each(function () {
    if ($(this).children().is('h2')) {
        $(this).addClass('h2-accordion-header')
    } else if ($(this).children().is('h3')) {
        $(this).addClass('h3-accordion-header')
    } else if ($(this).children().is('h4')) {
        $(this).addClass('h4-accordion-header')
    } else if ($(this).children().is('h5')) {
        $(this).addClass('h5-accordion-header')
    } else if ($(this).children().is('h6')) {
        $(this).addClass('h6-accordion-header')
    }
});