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

const html_ns = 'http://www.w3.org/1999/xhtml';

/* 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;
/* value of the emad, whether 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 statrep = null;
/*  old emad, to make button reappear on reports already signed up */
var old_emad = null;
/* message coming back from the server */
var message = null;

/* the regular expression for emads, as per web source */
// 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])+)\])");

/* extended email regex, the above tried to fit into JS */
/* 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]+)\])"); */

/* more basic one */
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;

var mulsu_conf = {};
window.addEventListener('DOMContentLoaded', (event) => {
    if(mulsu_conf['nitpo_url'] === undefined) {
        read_conf();
    }
    /* hide the pomad to start with. This should not be required
       if the CSS takes care of it */
    hide('pomad');
    if(! window.fetch) {
        /* if we can't fetch, we don't make the buttons visible */
        console.log("fetch is not available, no buttons.");
        return;
    }
    /* set find signup text */
    const sigre_eles = document.getElementsByClassName('nitpo_sigup');
    bare_signup_text = sigre_eles[0].textContent;
    /* the above conditions checks if fetch is available. Now
       we know that it is, let's make the sigup lements
       visible. */
    const sigup_eles = document.getElementsByClassName('nitpo_sigup');
    for (const sigup_ele of sigup_eles) {
        reveal(sigup_ele);
    }
    /* find all elements in the class nitpo_adrep to adjust width to the repcode */
    const adrep_eles = document.getElementsByClassName('nitpo_adrep');
    for (const adrep_ele of adrep_eles) {
        run_adrep(adrep_ele, 'sigre');
    }
    /* test pomad below */
    // set_emad = 'krichel@test.e';
    // statrep = 'nep-big';
    // statrep = 'bims-librar';
    // message = 'teste';
    // go_pomad();
    /* test pomad above */
});


/* run the adrep */
function run_adrep(adrep_ele, type) {
    const conf_var = type + '_adrep';
    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);
        return false;
    }
    const dims = repcode_ele.getBoundingClientRect();
    const width = dims['width'];
    // this test should be run for the subscribe buttons
    // if(window.fetch) {
    if(mulsu_conf[conf_var] == 'max') {
        adrep_ele.style.maxWidth = width + 'px';
        // console.log("I max " + elid);
    }
    if(mulsu_conf[conf_var] == 'min') {
        adrep_ele.style.minWidth = width + 'px';
        // console.log("I min " + elid);
    }
}


/* 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) {
    //    console.log('setting');
    //    bare_signup_text = button_ele.textContent;
    //}
    old_repcode = set_repcode;
    set_repcode = get_repcode_from_elid(elid);
    if(old_repcode && old_repcode !== set_repcode) {
        console.log("old repcode is " + old_repcode);
        show(old_repcode + '_fidba', false);
        show(old_repcode + '_rebut', false);
        show(old_repcode + '_sigup', true);
    }
    show(set_repcode + '_fidba', false);
    // after the repcode is stationed by as surk
    if(! statrep) {
        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');
}

/* a lot of functionality was addded the time I could not get the async to run */
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 need 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 || ! response.ok) {
        catastrophic();
    }
    else {
        end = mulsu_conf['wait_success'];
    }
    const json_data = await response.json(); // Get JSON value from the response body
    message = json_data['message'];
    if(! message) {
        console.log('no message from server.');
        return false;
    }
    console.log('result ' + message);
    // make the server result visible
    // a call to show() seems not to work
    if (typeof message === 'string' || message instanceof String) {
        console.log('show message');
        const seres_elid = 'nitpo_' + set_repcode + '_seres';
        const seres_ele = document.getElementById(seres_elid);
        if(seres_elid) {
            seres_ele.textContent = message;
            show(seres_ele, true);
            console.log(set_repcode + '_seres' + ' ' + message);
        }
    }
    console.log('shown on ' + set_repcode + '_seres');
    // outcome is false  _seres does not exist
    // make the server result visible
    if(message) {
        outcome = show(set_repcode + '_seres', message);
        if(! outcome) {
            console.log('show failed');
            /* use fidba as fallback */
            show(set_repcode + '_fidba', message);
        }
    }
    button_ele.textContent += ' ' + end;
    show(set_repcode + '_rebut', false);
    if(! (old_emad && old_emad != set_emad)) {
        decos_action(set_repcode);
    }
    /* once set the statrep stays there */
    if(! statrep) {
        statrep = set_repcode;
    }
    return true;
}

function go_pomad() {
    decorate_signups();
    console.log('stationed at '  + statrep);
    const inpem_elid = 'nitpo_' + statrep + '_inpem';
    const inpem_ele = document.getElementById(inpem_elid);
    if(inpem_ele) {
        console.log('I have inpem');
        inpem_ele.setAttribute('value', set_emad);
        add_char_treatment(inpem_ele);
    }
    else {
        console.log('no inpem');
    }
    const decos_elid = 'nitpo_' + statrep + '_decos';
    /* make the input element as large as th decos */
    set_width(decos_elid, inpem_elid, '-8px');
    hide('antem');
    unhide('pomad');
    show(statrep + '_labem', true);
    show(statrep + '_inpem', true);
    show(statrep + '_setma', true);
    size_inpem_from_decos(statrep);
    console.log('go_pomad done');
}


/* called by HTML */
function focus_inpem(ele) {
    const elid = ele.getAttribute('id');
    statrep = get_repcode_from_elid(elid);
    hide('seres');
    show(statrep + '_labem', true);
    console.log('done focus_inpem');
}


/* called by HTML */
function blur_input(ele) {
    /* must have id of form nitpo_REPCODE_eminp */
    const elid = ele.getAttribute('id');
    set_repcode = get_repcode_from_elid(elid);
    /* eminp, (antem) or inemp (pomad) */
    const orig = elid.slice(-5);
    const input = ele.value;
    // same as sticky emad
    const cand_emad = emad_from_input(ele.value);
    if(! cand_emad) {
        ele.value = '';
        ele.focus();
        return true;
    }
    const is_emad = is_it_emad(cand_emad);
    // if(input) {
    //    ele.value = input;
    // }
    emad_value = cand_emad;
    if(! is_emad) {
        cant_signup(set_repcode, input);
        set_emad = null;
        statrep = null;
        console.log('I hide the seres');
        show(set_repcode + '_seres', false);
        hide('pomad');
        unhide('antem');
        // decorate_signups();
        return true;
    }
    // console.log('* dig for emad' + elid);
    // set_emad = dig_for_emad(eminp);
    set_emad = cand_emad;
    console.log("setting set_emad to '" + set_emad + "'");
    /* pomad case */
    if(orig == 'inpem') {
        console.log('decorate');
        decorate_signups();
        if(mulsu_conf['do_adjust_input_to_decos']) {
            /* adjust the eminp to the length of the decos, for decoration */
            const inemp_elid = 'nitpo_' + set_repcode + '_inemp';
            /* 8px is an approximation for the difference between input and button */
            set_width(decos_elid, inemp_elid, '-8px');
        }
        return true;
    }
    console.log('origin is ' + orig);
    /* 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_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');
    }
    /* rebut only exists under antem */
    focus_on_rebut(set_repcode);
    return false;
}


/* called by HTML */
async function on_rebut(ele) {
    console.log('start on rebut');
    const elid = ele.getAttribute('id');
    set_repcode = get_repcode_from_elid(elid);
    const string = ele.textContent;
    // this produces false on failure
    outcome = await hit_the_server(ele);
    if(! outcome) {
        castastrophic();
        return false;
    }
    ele.textContent = string;
    show(set_repcode + '_fidba', true);
    if(old_repcode) {
        show(old_repcode + '_rebut', false);
    }
    console.log("start decorate");
    decorate_signups();
    // when_decos('hide');
    statrep = set_repcode;
    console.log('show seres');
    show(set_repcode + '_seres', message);
    old_emad = set_emad;
    console.log('on_rebut calls go_pomad');
    go_pomad();
    decos_action(set_repcode);
    // show(set_repcode + '_decos', false);
    console.log('end of on_rebut');
}

/* called by HTML */
async function on_decos(ele) {
    console.log("start decos");
    old_repcode = set_repcode;
    // should only be done on changing the emad
    hide('seres');
    const string = ele.textContent;
    elid = ele.getAttribute('id');
    set_repcode = get_repcode_from_elid(elid);
    // this produces false on failure
    message = await hit_the_server(ele);
    if(! outcome) {
        castastrophic();
        return false;
    }
    ele.textContent = string;
    // show(statrep + '_seres', message);
    console.log('start decos action ' + set_repcode);
    decos_action(set_repcode);
    console.log("end decos");
    show(old_repcode + '_seres', false);
    show(statrep + '_seres', false);
    old_emad = set_emad;
    return true;
}

/* get an element */
function get_ele(string) {
    const elid = 'nitpo_' + string;
    ele = document.getElementById(elid);
    return ele;
}

/* action to take when a decos is hit */
function decos_action(repcode) {
    console.log('decos_action ' + mulsu_conf['decos_action']);
    const to_do = mulsu_conf['decos_action'];
    if(! to_do) {
        console.log('no decos_action in configuration');
        return false;
    }
    decos_ele = get_ele(repcode + '_decos');
    if(to_do == 'disable') {
        decos_ele.disabled = true;
        return true;
    }
    if(to_do == 'hide') {
        decos_ele.style.visiblity = 'hidden';
        return true;
    }
    if(to_do == 'remove') {
        decos_ele.style.display = 'none';
        return true;
    }
    return false;
}

/* 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 + '_emala';
    const emala_ele = document.getElementById(emala_elid);
    if(emala_ele !== null) {
        // console.log('hidden');
        emala_ele.style.visibilty = 'hidden';
    }
    const fidba_elid = 'nitpo_' + set_repcode + '_fidba';
    const fidba_ele = document.getElementById(fidba_elid);
    fidba_ele.textContent = mulsu_conf['catastrophic'];
    reveal(fidba_ele);
}

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;
}

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 && (! statrep)) {
        /* rebut has same text as sigup initially */
        reveal(rebut_ele);
        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');
    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);
    /* 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 false;
    }
    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');
        sigup_ele.textContent = bare_signup_text;
    }
    target_ele.textContent = fidba_text;
    reveal(sigup_ele);
    sigup_ele.focus();
    show(set_repcode + '_rebut', false);
    return true;
    //
    //target_ele.textContent = fidba_text;
    // if(repcode === set_repcode) {
    //     console.log('in cant, set focus on ' + input_elid);
    //    input_ele.focus();
    //}
    // 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) {
        console.log('no rebut');
        return false;
    }
    text = bare_signup_text;
    if(set_emad) {
        text += " " + set_emad;
    }
    rebut_ele.textContent = text;
    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;
}

/* shows an element in the display assigned by a class name */
/* example: nitpo_display_inline-block */
function reveal(ele) {
    const the_classes = ele.classList;
    for (const the_class of the_classes) {
        if(! the_class.startsWith('nitpo_display_')) {
            continue;
        }
        display = the_class.replace('nitpo_display_', '');
        ele.style.display = display;
        return true;
    }
    /* in the absence of the class */
    ele.style.display = 'initial';
    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(statrep) {
//        show(statrep + '_rebuto', false);
//    }
//}

// function hide_show(to_hide, to_show) {
//     const to_hide_eles = document.getElementsByClassName('nitpo_' + to_hide);
//     for (const to_hide_ele of to_show_eles) {
//         decos_ele.style.display = 'none';
//     }
//     const to_show_eles = document.getElementsByClassName('nitpo_' + to_show);
//     for (const to_show_ele of to_show_eles) {
//         reveal(show_ele);
//     }
// }

function decorate_signups() {
    text = bare_signup_text + ' ' + set_emad;
    const decos_eles = document.getElementsByClassName('nitpo_decos');
    for (const decos_ele of decos_eles) {
        decos_ele.textContent = text;
        reveal(decos_ele);
    }
    /* 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;
            reveal(decos_ele);
        }
    }
    /* remove rebut on stationed */
    if(statrep) {
        show(statrep + '_rebut', false);
    }
    if(statrep) {
        const elid_start = 'nitpo_' + statrep + '_';
        set_width(elid_start + 'decos', elid_start + 'eminp', '-8px');
        console.log('width set ' + statrep);
    }
    console.log('done decorate_signups ' + 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 emad_from_input(string) {
    string = string.trim();
    string = string.toLowerCase();
    string = string.replace(' ','');
    return string;
}

/* set inpem to size of decos, purely decorative */
function size_inpem_from_decos(repcode) {
    const inpem_elid = 'nitpo_' + repcode + '_inpem';
    const inpem_ele = document.getElementById(inpem_elid);
    const elid_start = 'nitpo_' + statrep + '_';
    set_width(elid_start + 'decos', elid_start + 'inpem', '-8px');
}


function add_char_treatment(ele) {
    ele.addEventListener('keyup', function(event) {
        const code = event.keyCode;
        if(code == 32 ) {
            // console.log('dont care.');
            event.preventDefault();
            return true;
        }
        if(code == 13 || code == 9) {
            const on_ele = document.activeElement;
            const string = on_ele.value;
            if(! set_emad) {
                const cand_emad = emad_from_input(string);
                const is_emad = is_it_emad(cand_emad);
                if(! is_emad) {
                    event.preventDefault();
                    console.log('prevented');
                    on_ele.focus();
                    return false;
                }
                set_emad = cand_emad;
            }
            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 true;
        }
        var target_repcode = set_repcode;
        /* pomad case */
        if(statrep) {
            target_repcode = statrep;
            sticky_emad = emad_from_input(ele.value);
            const decos_eles = document.getElementsByClassName('nitpo_decos');
            for (const decos_ele of decos_eles) {
                decos_ele.textContent = bare_signup_text + ' ' + sticky_emad;
                decos_ele.disabled = false;
            }
            console.log('done text change ' + decos_eles.length);
            size_inpem_from_decos(target_repcode);
            // const inpem_elid = 'nitpo_' + target_repcode + '_inpem';
            // const inpem_ele = document.getElementById(inpem_elid);
            // const elid_start = 'nitpo_' + statrep + '_';
            //set_width(elid_start + 'decos', elid_start + 'inpem', '-8px');
            return true;
        }
        /* antem case */
        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 true;
        }
        /* 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(statrep) {
            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');
        }
        reveal(rebut_ele);
        // this code will not be reached.
        if(statrep) {
            if(is_it_emad(sticky_emad)) {
                set_emad = sticky_emad;
                console.log("is emad");
                hide('antem');
                unhide('pomad');
                // decorate_signups();
            }
            return true;
        }
    });
    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');
        /* put initial first */
        ele.classList.add(css_class);
        // last resort
        reveal(ele);
    }
    else {
        ele.style.display = 'none';
        ele.classList.add('nitpo_invisible');
        ele.classList.remove(css_class);
    }
    return true;
}

function hide(the_class) {
    console.log("I hide " + the_class);
    const eles = document.getElementsByClassName('nitpo_' + the_class);
    for (const ele of eles) {
        elid =  ele.getAttribute('id');
        // console.log("I hide " + elid);
        ele.style.display = 'none';
    }
}

function unhide(the_class) {
    const eles = document.getElementsByClassName('nitpo_' + the_class);
    for (const ele of eles) {
        reveal(ele);
    }
}