function updateRegexValue () {
    tgRegex = document.getElementById('tgRegexInput').value;
}

function applyRegexValue () {
    abc.update();
}

class TGRegexController {
    constructor () {
        this.div = document.getElementById('tgRegexDiv');
        this.regexEntryDiv = undefined;
        this.initHtml();
        this.expanded = false;
        this.regexEntryDiv.addEventListener('input', updateRegexValue);
    }

    initHtml () {
        this.div.style.display = 'grid';
        this.div.style.gridTemplateColumns = 'auto';
        this.div.style.gridTemplateRows = 'auto auto';
        this.headerDiv = document.createElement('div');
        this.headerDiv.innerHTML = '<span style="font-weight: bold; cursor: pointer;" onclick="trc.toggleExpand();" title="Click to expand">TG Regex&nbsp;</span>';
        this.headerDiv.style.display = 'grid';
        this.headerDiv.style.gridColumn = '1';
        this.div.appendChild(this.headerDiv);
        this.div.style.gap = '5px';

        this.regexEntryDiv = document.createElement('div');
        this.regexEntryDiv.style.display = 'none';
        this.regexEntryDiv.innerHTML = '<input id="tgRegexInput" size=25>&nbsp;&nbsp;<span id="tgRegexApplyButton" style="border:solid blue;" onclick="applyRegexValue();">&nbsp;Apply&nbsp;</span>';
        this.div.appendChild(this.regexEntryDiv);
    }

    toggleExpand () {
        if (this.expanded) {
            this.collapse();
            this.expanded = false;
        } else {
            this.expand();
            this.expanded = true;
        }
    }

    collapse () {
        this.regexEntryDiv.style.display = 'none';
    }

    expand () {
        this.regexEntryDiv.style.display = 'block';
    }
}