var line_height = 32;
var mystyle = document.createElement('style');
document.head.appendChild(mystyle);
var mycss = mystyle.sheet;
var ak_shown = 0;

var links = document.getElementsByTagName("a");


function show_accesskeys() {
    mycss.insertRule('a b.ad { visibility:visible; } '); 
    ak_shown = 1;
}

function is_textfield_in_focus() {
    return ['textfield', 'input'].includes(document.activeElement.tagName.toLowerCase())
}


document.addEventListener("keydown", event => {
    if(ak_shown) {
        for(l in links) {
            if (links[l].accessKey == event.key.toUpperCase()) {
                links[l].click();
                return false;
            }
        }
    } else {
        if(event.getModifierState("Alt") && event.getModifierState("Shift"))
        { 
            show_accesskeys(); 
            return false; 
        }
    }

    console.log(document.activeElement.tagName.toLowerCase());
    // normal mode
    switch(event.key) {
        case 'h': is_textfield_in_focus() || window.history.back(); break;
        case 'l': is_textfield_in_focus() || window.history.forward(); break;
        case 'j': is_textfield_in_focus() || window.scrollBy(0, line_height); break;
        case 'k': is_textfield_in_focus() || window.scrollBy(0, -line_height); break;
        case 'Shift': show_accesskeys(); break;
        default:
            console.log("not bound: '" + event.key + "'");
    }
});

document.addEventListener("keyup", event => {

    if(ak_shown) {
        mycss.deleteRule(0);
        ak_shown = 0;
    }
});

for(l in links) {
    links[l].accessKey = String.fromCharCode(65 + parseInt(l));
    links[l].innerHTML = "<b class='ad'>" + links[l].accessKey + "</b>" + links[l].innerHTML;
    console.log((parseInt(l) + 97) + ' ' + links[l].accessKey);
}