<script type="text/javascript">
// if a configuration was updated that requires the header frame to reload, this will be true
var reloadHeader = {RELOAD_HEADER};

var wasNull = false;

$(function() {
    $('input[name="debug{_}debug_to_screen"]').change(function() {
        $('#debug_msg', Con.getFrame('header').document).toggle();
    });
    if (reloadHeader) {
        Con.getFrame('header').location.reload();
        reloadMenu();
    }
});


function reloadMenu() {
    var frame = Con.getFrame('header');
    //we're waiting for the header frame to be completely reloaded. This function is checking if the sub_system link vanishes and reappears
    //when this function is first called, the DOM is still loaded which means a simple check for the sub_system link will be true. Which leads to the header reloading AFTER we marked this sub-category
    //while the frame is reloading the DOM won't be loaded and we won't be able to find the sub_system tag. After the DOM reappears we're ready to apply changes
    if (!frame || null === frame.document.getElementById("sub_system")) { //this will be true while the frame is reloading
        wasNull = true;
        window.setTimeout(function() {
            reloadMenu();
        }, 20);
        return;
    }
    if (!wasNull) { //this will be true before the frame has started reloading
        window.setTimeout(function() {
            reloadMenu();
        }, 20);
        return;
    }

    //we will land here when the frame has finished reloading
    frame.Con.HeaderClickMenu.activate(frame.document.getElementById("main_5"));
    frame.Con.HeaderDelayMenu.activate(frame.document.getElementById("main_5"));
    frame.Con.HeaderMenu.markActive(frame.document.getElementById("sub_system"));
}

</script>
{FORM}
