/* mulsu.js, part of nitpo, by Thomas Krichel */

const html_ns = 'http://www.w3.org/1999/xhtml';
// const fields = ['emad'];
// const labins = ['emala', 'eminp'];

/* STATE VARIABLES */
/* subscriber email address if set as an emad */
var set_emad = null;
/* the potential emad input by the user */
var emad_input = null;
/* the current repcode */
var set_repcode = null;
/* the old repcode */
var old_repcode = null;
/* the signup text without decoration, usually 'Sign up' */
var bare_signup_text = null;
/* the current emad set on the signup elements */
var emad_signup = null;
/* the label on the emad input, before entry */
var label_emfal = null;
/* has the user made a emad_input */
// var have_i_seen_an_emad_input = false;
/* has the first signup occured */
// var is_signup_virgin = true;
/* value of the emad, whethe correct or not */
var sticky_emad = null;
/* is the emad input new, used to prevent fidba when changing signups */
// var is_it_new_input = true;
/* the repcode at which the email input is parked after first surk */
var stationed_repcode = null;
/*  old emad, to make button reappear on reports already signed up */
var old_emad = null;

/* the regular expression for emads */
// const emad_regex = new RegExp("(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])");

// covers more cases but does not parse.
// const emad_regex = new RegExp("(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])");

const emad_regex = new RegExp("([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\"\(\[\]!#-[^-~ \t]|(\\[\t -~]))+\")@([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\[[\t -Z^-~]*])");

/* CONF variables, read with read_conf() */
/* the nitpo_url, found in the HTML id="nitpo_url" */
/* this is the king of configs. When it is zero, all the configs are read */
var nitpo_url = null;
/* the nitpo path start, found in the HTML id="nitpo_pathstart" */
//var nitpo_pathstart = null;
/* nitpo timeout, in miliseconds found in the HTML id="nitpo_timeout" */
//var nitpo_timeout = null;
/* mulsu wait phrase, displayed while the fetch is is progress
   found in the HTML id="mulsu_wait_start" */
//var mulsu_wait_start = null;
/* mulsu wait success phrase, displayed when the signup is successful
   found in the HTML id="mulsu_wait_success" */
// var mulsu_wait_success = null;
/* mulsu wait failure phrase, displayed when the signup has failed
   found in the HTML id="mulsu_wait_failure" */
// var mulsu_wait_success = null;
/* label for the input when succesfully entered */
//var label_emcor = null;

var mulsu_conf = {};

window.addEventListener('DOMContentLoaded', (event) => {
    if(mulsu_conf['nitpo_url'] === undefined) {
        read_conf();
    }
    /* find all elements in the class nitpo_adrep to adjust width to the repcode */
    if(! window.fetch) {
        console.log("fetch is not available, no buttons.");
        return;
    }
    // the above conditions checks if fetch is available. Now
    // we know that it is, let's make the on_demand elements
    // visible.
    const on_demand_eles = document.getElementsByClassName('nitpo_on_demand');
    for (const on_demand_ele of on_demand_eles) {
        on_demand_ele.style.display = 'initial';
    }
    const adrep_eles = document.getElementsByClassName('nitpo_adrep');
    for (const adrep_ele of adrep_eles) {
        const elid = adrep_ele.getAttribute('id');
        const repcode = get_repcode_from_elid(elid);
        repcode_ele = document.getElementById(repcode);
        if(! repcode_ele) {
            console.log("I don't see " + elid);
            continue
        }
        const dims = repcode_ele.getBoundingClientRect();
        const width = dims['width'];
        // this test should be run for the subscribe buttons
        if(window.fetch) {
            if(mulsu_conf['sigre_adrep'] == 'max') {
                adrep_ele.style.maxWidth = width + 'px';
                // console.log("I max " + elid);
            }
            if(mulsu_conf['sigre_min_adrep'] == 'min') {
                adrep_ele.style.minWidth = width + 'px';
                // console.log("I min " + elid);
            }
        }
        else {
            adrep_ele.style.display = 'none';
        }
    }
    // check whether this ran
    if(! document.getElementsByClassName('nitpo_adrep')) {
        button_eles = document.getElementsByTagName('buttons');
        for (const button_ele of button_eles) {
            button_ele.style.display = 'none';
        }
    }
    // set_emad = 'krichel@test.e';
    //decorate_signups();
});


/* called by HTML, press a signup button */
async function on_sigup(button_ele) {
    /* must have id of form nitpo_REPCODE_signup */
    /* read the configuration if the nitpo address is not set */
    if(mulsu_conf['nitpo_url'] === undefined) {
        read_conf();
    }
    button_ele.style.display = 'none';
    elid = button_ele.getAttribute('id');
    set_bare_text_on_former_selection();
    clear_feedback();
    /* if the email input on the current element has focus, we should */
    /* do nothing here, but this is not (yet) implemented */
    /* this is for setting at the start, should be onload= */
    if(bare_signup_text === null) {
        bare_signup_text = button_ele.textContent;
    }
    old_repcode = set_repcode;
    if(old_repcode) {
        console.log("old repcode is " + old_repcode);
        show(old_repcode + '_fidba', false);
        show(old_repcode + '_rebut', false);
        show(old_repcode + '_sigup', true);
    }
    set_repcode = get_repcode_from_elid(elid);
    show(set_repcode + '_fidba', false);
    // after the repcode is stationed by as surk
    if(! stationed_repcode) {
        console.log('rebut appears I');
        show(set_repcode + '_rebut', true);
    }
    show(set_repcode + '_emala', true);
    /* open the emad_input_form at start, or emad_input is not an emad */
    if(! set_emad || old_repcode !== set_repcode) {
        if(old_repcode !== null) {
            close_emad_input_form(old_repcode);
        }
        /* special function to activate return */
        open_eminp(button_ele);
        console.log('end of button');
        return false;
    }
    console.log('should not be reached');
}

async function hit_the_server(button_ele) {
    if(! set_emad) {
        console.log("I seed set_emad here.");
        return false;
    }
    if(! set_repcode) {
        console.log("I seed set_repcode here.");
        return false;
    }
    set_emad = set_emad.toLowerCase();
    const url = form_url();
    console.log('CALL ' + url);
    button_ele.oldText = button_ele.textContents;
    button_ele.textContent = mulsu_conf['wait_start'] + ' ' + set_emad + "…";
    const response = await fetchWithTimeout(url, button_ele, options = {});
    let end = '';
    if(! response.ok) {
        catastrophic();
    }
    else {
        end = mulsu_conf['wait_success'];
    }
    const json_data = await response.json(); // Get JSON value from the response body
    const message = json_data['message'];
    if(! message) {
        console.log('no message from server.');
        return false;
    }
    console.log('result ' + message);
    // make the server result visible
    outcome = show(set_repcode + '_seres', message);
    // outcome is false  _seres does not exist
    if(! outcome) {
        show(set_repcode + '_fidba', message);
    }
    button_ele.textContent += ' ' + end;
    button_ele.disable = true;
    button_ele.style.display = 'none';
    // is_signup_virgin = false;
    // console.log('call decorate');
    show(set_repcode + '_rebut', false);
    if(! (old_emad && old_emad != set_emad)) {
        show(set_repcode + '_decos', false);
    }
    // decorate_signups();
    return true;
}


/* called by HTML */
function on_eminp(ele) {
    /* must have id of form nitpo_REPCODE_eminp */
    const elid = ele.getAttribute('id');
    const input = ele.value;
    // same as sticky emad
    const trimmed_input = input.trim();
    if(! trimmed_input) {
        ele.value = '';
        ele.focus();
        return;
    }
    const is_emad = is_it_emad(trimmed_input);
    if(input) {
        ele.value = input;
    }
    emad_value = trimmed_input;
    if(is_emad === false) {
        cant_signup(set_repcode, input);
        set_emad = null;
        stationed_repcode = null;
        show(set_repcode + '_seres', false);
        decorate_signups();
        when_decos('show');
        return;
    }
    // console.log('* dig for emad' + elid);
    // set_emad = dig_for_emad(eminp);
    set_emad = trimmed_input;
    console.log("setting set_emad to '" + set_emad + "'");
    /* move current decos or rebut into viewport */
    const decos_elid = 'nitpo_' + set_repcode + '_decos';
    decos_ele = document.getElementById(decos_elid);
    if(! is_it_in_viewport(decos_ele)) {
        decos_ele.scrollIntoView();
    }
    const rebut_elid = 'nitpo_' + set_repcode + '_rebut';
    rebut_ele = document.getElementById(rebut_elid);
    if(! is_it_in_viewport(rebut_ele)) {
        rebut_ele.scrollIntoView();
    }
    // ele.style.width = ele.value.length + 'ch';
    if(mulsu_conf['do_adjust_input_to_decos']) {
        /* adjust the eminp to the length of the decos, for decoration */
        const eminp_elid = 'nitpo_' + set_repcode + '_eminp';
        /* 8px is an approximation for the difference between input and button */
        set_width(decos_elid, eminp_elid, '-8px');
    }
    if(mulsu_conf['do_adjust_input_to_rebut']) {
        /* adjust the eminp to the length of the decos, for decoration */
        const eminp_elid = 'nitpo_' + set_repcode + '_eminp';
        /* 8px is an approximation for the difference between input and button */
        set_width(rebut_elid, eminp_elid, '-8px');
    }
    focus_on_rebut(set_repcode);
    return false;
}


/* called by HTML */
function on_rebut(ele) {
    console.log('start on rebut');
    elid = ele.getAttribute('id');
    set_repcode = get_repcode_from_elid(elid);
    // this produces false on failure
    outcome = hit_the_server(ele);
    if(! outcome) {
        castastrophic();
        return false;
    }
    show(set_repcode + '_fidba', true);
    show(old_repcode + '_rebut', false);
    console.log("start decorate");
    decorate_signups();
    when_decos('hide');
    stationed_repcode = set_repcode;
    console.log('end of on_rebut');
    old_emad = set_emad;
}

function on_decos(ele) {
    console.log("start decos");
    old_repcode = set_repcode;
    show(old_repcode + '_seres', false);
    show(old_repcode + '_decos', false);
    elid = ele.getAttribute('id');
    set_repcode = get_repcode_from_elid(elid);
    // this produces false on failure
    outcome = hit_the_server(ele);
    if(! outcome) {
        castastrophic();
        return false;
    }
    console.log("end decos");
    old_emad = set_emad;
}

/* function called to disable further signup attempt after a non-200 response */
function catastrophic() {
    button_eles = document.getElementsByTagNameNS(html_ns, 'button');
    for (const button_ele of button_eles) {
        button_ele.style.display = 'none';
    }
    const emala_elid = 'nitpo_' + set_repcode + '_emala';
    label_ele = document.getElementById(emala_elid)
    if(label_ele !== null) {
        label_ele.style.display = 'none';
    }
    const eminp_elid = 'nitpo_' + set_repcode + '_eminp';
    const eminp_ele = document.getElementById(eminp_elid);
    if(eminp_ele !== null) {
        eminp_ele.style.display = 'none';
    }
    const emad_emala_elid = 'nitpo_' + set_repcode + '_emad_label';
    const emad_label_ele = document.getElementById(emad_label_elid);
    if(emad_label_ele !== null) {
        // console.log('hidden');
        emad_label_ele.style.visibilty = 'hidden';
    }
    const fidba_elid = 'nitpo_' + set_repcode + '_fidba';
    const ele = document.getElementById(fidba_elid);
    ele.textContent = mulsu_conf['catastrophic'];
    ele.style.display = 'initial';
}

function clear_feedback() {
    console.log('clear feedback');
    fidba_eles = document.getElementsByClassName('nitpo_fidba');
    for (const fidba_ele of fidba_eles) {
        const elid = fidba_ele.getAttribute('id');
        //        console.log('clear_feedback ' + elid);
        // console.log('clear feedback on ' + elid);
        fidba_ele.style.display = 'none';
    }
    console.log('clear feedback on ' + elid);
}

function set_bare_text_on_former_selection() {
    /* happens if we don't have a valid email on it, before it is changed */
    if(set_emad !== null) {
        return false;
    }
    if(set_repcode === null) {
        return false;
    }
    if(bare_signup_text === null) {
        return false;
    }
    // relabel_eminp();
    const elid = 'nitpo_' + set_repcode + '_eminp'
    let signup_button_ele = document.getElementById(elid);
    if(signup_button_ele === null) {
        return false;
    }
    // console.log('reset ' + set_repcode);
    signup_button_ele.textContent = bare_signup_text;
    // console.log('done reset ' + set_repcode + ' ' + bare_signup_text);
    return true;
}

// keep this for the moment
// function dig_for_emad(string) {
//     /* look for the email in something like */
//     /* Thomas Krichel <krichel@openlib.org> */
//     const words = string.split(" ");
//     let found = null;
//     for (const word of words) {
//         if(! is_it_emad(word)) {
//             continue;
//         }
//         found = word;
//     }
//     if(found === null) {
//         return null;
//     }
//     found = found.replace('<','');
//     found = found.replace('>','');
//     // console.log('dug emad "' + found + '"');
//     return found;
// }


function form_url() {
    if(nitpo_url === null) {
        read_conf();
    }
    nitpo_url = mulsu_conf['nitpo_url'];
    url = nitpo_url + '/' + set_repcode + '/' + set_emad;
    return url;
}

function open_eminp(sigup_ele) {
    let is_focus_set = false;
    /* make infid visible */
    console.log('start open eminp');
    // const infid_elid = 'nitpo_' + set_repcode + '_infid';
    // const infid_ele = document.getElementById(infid_elid);
    // if(infid_ele !== null) {
    //   infid_ele.style.display = 'initial';
    // }
    /* open the rebut */
    const eminp_elid = 'nitpo_' + set_repcode + '_eminp';
    const eminp_ele = document.getElementById(eminp_elid);
    if(! eminp_ele) {
        console.log("I need " + eminp_elid);
        return false;
    }
    /* fetch from the old report */
    if(old_repcode && old_repcode !== set_repcode) {
        old_eminp_elid = 'nitpo_' + old_repcode + '_eminp';
        old_eminp_ele = document.getElementById(old_eminp_elid);
        if(old_eminp_ele) {
            eminp_ele.value = old_eminp_ele.value;
        }
        /* let's not annoy the use with the feedback */
        show(set_repcode + '_fidba', false);
    }
    const rebut_elid = 'nitpo_' + set_repcode + '_rebut';
    const rebut_ele = document.getElementById(rebut_elid);
    if(rebut_ele && (! stationed_repcode)) {
        /* rebut has same text as sigup initially */
        rebut_ele.style.display = 'initial';
        text = bare_signup_text;
        if(sticky_emad !== null) {
            text += " " + sticky_emad;
        }
        rebut_ele.textContent = text;
    }
    /* activate the char treatment at input  */
    add_char_treatment(eminp_ele);
    show(set_repcode + '_emala', true);
    eminp_ele.style.display = 'initial';
    eminp_ele.focus();
    /* if sticky_emad is emad */
    if(set_emad) {
        if(rebut_ele) {
            rebut_ele.removeAttribute('disabled');
            focus_on_rebut(set_repcode);
        }
    }
    console.log('shown eminp');
    // decorate_signups();
    console.log('done on_eminp');
}

function cant_signup(repcode, string) {
    const sigup_elid = 'nitpo_' + repcode + '_sigup';
    const fidba_elid = 'nitpo_' + repcode + '_fidba';
    const input_elid = 'nitpo_' + repcode + '_eminp';
    const input_ele = document.getElementById(input_elid);
    /* set input length
    if(input_ele !== null) {
        const input_length = input_ele.value.length;
        // multiply by 1.25 for extra space
        const show_input = 1.25 * input_length;
        console.log('show_input' + show_input);
        input_ele.style.width = show_input + 'ch';
        } */
    /* if we have the fidba element, print fidba there */
    const sigup_ele = document.getElementById(sigup_elid);
    const fidba_ele = document.getElementById(fidba_elid);
    if(sigup_ele === null && fidba_ele === null) {
        console.log("early end to cant");
        return;
    }
    let target_ele = sigup_ele;
    if(fidba_ele) {
        sigup_ele.style.display = 'none';
        target_ele = fidba_ele;
        //if(! is_it_new_input) {
        prefix_blank(fidba_ele);
        target_ele.style.display = 'initial';
        //}
        // is_it_new_input = true;
    }
    fidba_text = mulsu_conf['cant_signup_prefix'] + string + mulsu_conf['cant_signup_postfix'];
    if(string === '') {
        /* just show the default */
        console.log('cant signup null');
        return;
        sigup_ele.textContent = bare_signup_text;
        target_ele.textContent = fidba_text;
        input_ele.focus();
        show(set_repcode + '_rebut', false);
        return false;
    }
    target_ele.textContent = fidba_text;
    if(repcode === set_repcode) {
        console.log('in cant, set focus on ' + input_elid);
        input_ele.focus();
    }
    show(set_repcode + '_rebut', false);
    return false;
}

function focus_on_rebut(repcode) {
    const rebut_elid = 'nitpo_' + repcode + '_rebut';
    console.log('focus on ' + rebut_elid);
    const rebut_ele = document.getElementById(rebut_elid);
    if(! rebut_ele) {
        print('no rebut');
        return false;
    }
    rebut_ele.focus();
    console.log('focused');
    return true;
}

function close_emad_input_form(repcode) {
    if(set_repcode === null) {
        console.log("With no set repcode, I keep the input open.");
        return false;
    }
    show(repcode + '_eminp', false);
    show(repcode + '_emala', false);
    show(repcode + '_sigup', true);
    return true;
}

function when_decos(string) {
    console.log('start when_decos ' + string);
    if(string == 'hide') {
        eles = document.getElementsByClassName('hide_when_decos');
        for (const ele of eles) {
            ele.style.display = 'none';
        }
        return true;
    }
    if(string == 'show') {
        eles = document.getElementsByClassName('hide_when_decos');
        for (const ele of eles) {
            ele.style.display = 'initial';
        }
        return true;
    }
    return false;
}

function remove_sigups() {
    const sigup_eles = document.getElementsByClassName('nitpo_sigup');
    for (const sigup_ele of sigup_eles) {
        sigup_ele.style.display = 'none';
    }
}

function get_element(string) {
    const elid = 'nitpo_' + set_repcode + '_' + string;
    return document.getElementById(elid);
}

function remove_seres() {
    const seres_eles = document.getElementsByClassName('nitpo_seres');
    for (const seres_ele of seres_eles) {
        seres_ele.style.display = 'none';
    }
    /* remove rebuto if we are have the stationed repcode */
    if(stationed_repcode) {
        show(stationed_repcode + '_rebuto', false);
    }
}

function decorate_signups() {
    //    relabel_eminp();
    // if(is_signup_virgin) {
    //    console.log("virgin");
    //    return;
    // }
    const decos_eles = document.getElementsByClassName('nitpo_decos');
    const sigup_eles = document.getElementsByClassName('nitpo_sigup');
    if(! set_emad) {
        // remove the elements
        for (const decos_ele of decos_eles) {
            decos_ele.style.display = 'none';
        }
        for (const sigup_ele of sigup_eles) {
            sigup_ele.style.display = 'initial';
        }
        return true;
    }
    text = bare_signup_text + ' ' + set_emad;
    console.log(text);
    for (const decos_ele of decos_eles) {
        decos_ele.textContent = text;
        decos_ele.style.display = 'initial';
    }
    for (const sigup_ele of sigup_eles) {
        sigup_ele.style.display = 'none';
    }
    /* when a new emad comes, put the decos back */
    if(old_emad && old_emad != set_emad) {
        for (const decos_ele of decos_eles) {
            decos_ele.textContent = text;
            decos_ele.style.display = 'initial';
        }
    }
    /* remove rebut on stationed */
    if(stationed_repcode) {
        show(stationed_repcode + '_rebut', false);
    }
    if(stationed_repcode) {
        const elid_start = 'nitpo_' + stationed_repcode + '_';
        set_width(elid_start + 'decos', elid_start + 'eminp', '-8px');
        console.log('width set ' + stationed_repcode);
    }
    console.log('done decoss ' + decos_eles.length);
}


function prefix_blank(ele) {
    const text = document.createTextNode(" ");
    ele.parentNode.insertBefore(text, ele.nextSibling);
    // console.log("Inserted at " + ele);
}

function have_i(elid) {
    const out = document.getElementById(elid);
    console.log("have i " + elid);
    if(out === null) {
        return false;
    }
    return true;
}

/* decos or signup ? */
function decos_or_signup(ele) {
    elid = ele.getAttribute('id');
    return elid.substr(-6);
}


function is_it_emad(string) {
    /* this is the same check as used server-side, don't change */
    const is_emad = emad_regex.test(string);
    return is_emad;
}




/*
function has_emad(string) {
    const last_part = last_word(string);
    if(is_it_emad(last_part)) {
        return last_part;
    }
    return null;
}

function last_word(anchor_string) {
    const words = anchor_string.split(" ");
    return words[words.length - 1];
}
*/

function get_repcode_from_elid(elid) {
    // starts with nitpo_
    const from_repcode_start = elid.substring(6);
    const end_of_repcode = from_repcode_start.indexOf('_')
    const repcode = from_repcode_start.substring(0, end_of_repcode)
    return repcode;
}

async function call_fetch(url) {
     try {
        let res = await fetch(url);
        return await res;
    }
    catch (error) {
        /* give fidba */
        show(set_repcode + '_seres', error);
        console.log(error);
    }
}


/* from https://dmitripavlutin.com/timeout-fetch-reqpuest/ */
async function fetchWithTimeout(url, button_ele, options = {}) {
    const { timeout = mulsu_conf['nitpo_timeout'] } = options;
    const controller = new AbortController();
    const timeout_id = setTimeout(() => controller.abort(), timeout);
    const response = await call_fetch(url, {
        signal: controller.signal
    });
    clearTimeout(timeout_id);
    return response;
}

function add_char_treatment(ele) {
    // don't do that after we have the first signup
    // if(stationed_repcode) {
    //    return false;
    //}
    ele.addEventListener('keyup', function(event) {
        // if(e.keyCode == 32 && e.target == document.body) {
        //    e.preventDefault();
        //}
        if(event.keyCode == 32) {
            event.preventDefault();
        }
        /* normal case */
        var target_repcode = set_repcode;
        if(stationed_repcode) {
            target_repcode = stationed_repcode;
        }
        // is_it_new_input = false;
        const code = event.keyCode;
        if(! (code == 13 || code == 32 || code == 9)) {
            const eminp_elid = 'nitpo_' + target_repcode + '_eminp';
            const eminp_ele = document.getElementById(eminp_elid);
            const rebut_elid = 'nitpo_' + target_repcode + '_rebut';
            const rebut_ele = document.getElementById(rebut_elid);
            const sigup_elid = 'nitpo_' + target_repcode + '_signup';
            const sigup_ele = document.getElementById(sigup_elid);
            const fidba_elid = 'nitpo_' + target_repcode + '_fidba';
            const fidba_ele = document.getElementById(fidba_elid);
            if(! fidba_ele) {
                console.log("I can't see " + fidba_elid);
            }
            if(! rebut_ele) {
                console.log("I can't see " + rebut_elid);
            }
            fidba_ele.style.display = 'none';
            if(! eminp_ele) {
                console.log('I have not found ' + eminp_elid);
                return;
            }
            /* needs to be done only once */
            // rebut_ele.style.display = 'initial';
            // sigup_ele.style.display = 'none';
            sticky_emad = eminp_ele.value.trim();
            rebut_ele.textContent = bare_signup_text + ' ' + sticky_emad;
            rebut_ele.value = sticky_emad;
            /* the rebut would double the repcode sigup */
            if(stationed_repcode) {
                rebut_ele.style.display = 'none';
            }
            if(is_it_emad(sticky_emad)) {
                fidba_ele.textContent = '';
                rebut_ele.removeAttribute('disabled');
            }
            else {
                set_emad = null;
                rebut_ele.setAttribute('disabled', 'disabled');
            }
            rebut_ele.style.display = 'initial';
            if(stationed_repcode) {
                if(is_it_emad(sticky_emad)) {
                    set_emad = sticky_emad;
                    console.log("is emad");
                    decorate_signups();
                }
            }
            return;
        }
        const on_ele = document.activeElement;
        const on_elid = on_ele.getAttribute('id');
        const to_elid = 'nitpo_' + set_repcode + '_rebut';
        const to_ele = document.getElementById(to_elid);
        on_ele.blur();
        to_ele.focus();
    });
    return false;
}

function set_width(elid_from, elid_to, adjust_pixel) {
    console.log("set width from " + elid_from + ' to  ' + elid_to);
    if(typeof adjust_pixel === 'undefined') {
        adjust_pixel = '0px';
    }
    const from = document.getElementById(elid_from);
    const to = document.getElementById(elid_to);
    if(from === null) {
        console.log("I can't see '" + elid_from + "'");
        return;
    }
    const style = window.getComputedStyle(from);
    const target_width = style.getPropertyValue('width');
    if(target_width == 'auto') {
        return;
    }
    const target_number = parseInt(target_width);
    const adjust_number = parseInt(adjust_pixel);
    const width = target_number + adjust_number + 'px';
    console.log('width set to ' + width + ' of ' + elid_from);
    to.style.width = width;
}

function is_it_in_viewport(ele) {
    if(ele === null) {
        return true;
    }
    /* https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/ */
    var rect = ele.getBoundingClientRect();
    return (
        rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

function read_conf() {
    /* conf variables, set to null at the start, set with read_conf */
    /* the nitpo address, found in the HTML id="nitpo_url"
       if this is null, invoque read_conf */
    conf_ele = document.getElementById('mulsu_conf');
    divs = conf_ele.getElementsByTagName('div');
    for (const div of divs) {
        mulsu_conf[div.getAttribute('id')] = div.textContent;
    }
    // console.log('conf ' + mulsu_conf);
}


function read_a_conf(elid) {
    let ele = document.getElementById(elid);
    if(ele === null) {
        return null;
    }
    out = ele.textContent;
    return out;
}

// remove an elid from display
function show(elid, message) {
    const nitpo_elid = 'nitpo_' + elid;
    const ele = document.getElementById(nitpo_elid);
    if(! ele) {
        console.trace();
        console.log("I don't see " + nitpo_elid);
        return false;
    }
    /* something like "nitpo_fobar_css" */
    const css_class = 'nitpo_' + elid.substring(elid.indexOf('_') + 1) + '_css';
    if(typeof message != "boolean") {
        // use the message as textContent
        ele.textContent = message;
    }
    if(message) {
        ele.classList.remove('nitpo_invisible');
        ele.classList.add(css_class);
    }
    else {
        ele.style.display = 'none';
        ele.classList.remove(css_class);
    }
    return true;
}