$(function () {
    var xMediaQuery = window.matchMedia("(min-width: 40em)")
    checkOverflowInfo(xMediaQuery) // Call listener function at run time
    xMediaQuery.addListener(checkOverflowInfo) // Attach listener function on state changes

    window.addEventListener('resize', infoBox);
    window.addEventListener('DOMContentLoaded', infoBox);
    if (typeof showAllContentLangToken === 'undefined' ) {
      showAllContentLangToken = '';
    }
    window.showAllContentLangToken = showAllContentLangToken;
});

function infoBox(evt) {
        let $arrInfoBox = $(".news-event__content-elements .frame-layout-news-info-box-left,.news-event__content-elements .frame-layout-news-info-box-right,.news-event__content-elements .frame-layout-news-info-box-center,.news-event__content-elements .frame-layout-news-info-box");
    let arrInfboxCnt = $arrInfoBox.length;
    let lang = document.getElementsByTagName('html')[0].getAttribute('lang');

    for (let i = 0; i < arrInfboxCnt; i++) {
        // Get id
        let infoBoxId = $arrInfoBox[i].id;

        if ($arrInfoBox[i].parentElement.className.indexOf('frame-layout-news-info-box-collapse-wrapper')) {
            $("#" + infoBoxId).wrap('<div class="frame-layout-news-info-box-collapse-wrapper"></div>');

            // Add button
            let newInfoboxButton = $('<button/>').attr({
                id: "btn-" + infoBoxId,
                title: evt.currentTarget.showAllContentLangToken,
                class: "button button--icon button--icon--hide-label frame-layout-news-info-box-collapse-wrapper__toggle",
                "aria-expanded": "false"
            });
            $arrInfoBox[i].parentElement.prepend(newInfoboxButton[0]);

            // Add click handler
            $("#btn-" + $arrInfoBox[i].id).click(function () {
                let $btnSelector = $('#' + $arrInfoBox[i].id).parent();
                $btnSelector.toggleClass("frame-layout-news-info-box-collapse-wrapper--is-expanded");
                $btnSelector.toggleClass("frame-layout-news-info-box--is-overflown");
                if ($('#btn-' + $arrInfoBox[i].id)[0].getAttribute('aria-expanded') == 'false') {
                    $('#btn-' + $arrInfoBox[i].id)[0].setAttribute('aria-expanded', 'true')
                } else {
                    $('#btn-' + $arrInfoBox[i].id)[0].setAttribute('aria-expanded', 'false')
                }
            });
        }
    }
}

function checkOverflowInfo(x) {
    const overflownClass = 'frame-layout-news-info-box--is-overflown';
    const collection = document.querySelectorAll('.frame-layout-news-info-box-collapse-wrapper > div');
    collection.forEach((div) => {
        if (x.matches) {
            div.classList.remove(overflownClass);
        } else {
            div.classList.add(overflownClass);
        }
    });
}