inverse

HTML

<p>
<input id=size></input>
<input id=setSize type=button value="set size"></input>
</p><p>
<table id=input data-editable class=no-js>
    <caption>Input</caption>
</table>
</p><p>
<table id=output2 class=no-js>
    <caption>Identity</caption>
</table>
<table id=output1 class=no-js>
    <caption>Inverse</caption>
</table>
</p><p>
<table id=output2-xors class=no-js></table>
<table id=output1-xors class=no-js></table>
</p>

CSS

table {
    border:1px solid black;
    padding: 10px 0;
    border-spacing: 0;
    display:inline-table;
    margin:10px;
    font-size:0;
}

table caption {
    font-size:12px;
}

.no-js {
    display:none;
}

tr.selected {
    background: yellow;
}

td{
    position: relative;
    border: 1px solid transparent;
    margin: 0px;
}

input[type=checkbox] {
    margin:0;
}

td:first-child{
    padding: 0 0 0 10px;
}

td:last-child{
    padding: 0 10px 0 0;
}

.click-fix {
    position: absolute;
    top:0; bottom:0;
    left:0; right:0;
    background: transparent;
}

JavaScript

var eSize = document.getElementById("size")
var eInput = document.getElementById("input")
var eOutput1 = document.getElementById("output1")
var eOutput2 = document.getElementById("output2")

    function onSetSize() {
        var size = parseInt(eSize.value);
        if (size > 0) {
            [eInput, eOutput1, eOutput2].forEach(function (table) {
                table.classList.remove("no-js");
                while (table.rows.length) {
                    table.removeChild(table.rows[0]);
                }
                var editable = table.getAttribute("data-editable") !== null;
                var i, j;
                var df = document.createDocumentFragment();
                for (i = 0; i < size; i++) {
                    var tr = document.createElement("tr");
                    for (j = 0; j < size; j++) {
                        var td = document.createElement("td");
                        var cb = document.createElement("input");
                        var fix;
                        cb.type = "checkbox";
                        if (!editable) {
                            cb.disabled = true;
                            fix = document.createElement("div");
                            fix.classList.add("click-fix");
                        }
                        td.appendChild(cb);
                        if(!editable) td.appendChild(fix);
                        tr.appendChild(td);
                    }

                    df.appendChild(tr);
                }
                table.appendChild(df);
            })
        }
    }
document.getElementById("setSize").addEventListener("click", onSetSize);
document.getElementById("size").addEventListener("keypress", function (e) {
    if (e.which == 13) onSetSize();
})

function computeInverse(input, inverse, identity) {
    //copy the input
    var size = input.length,
        temp2, x, y, px, py;
    for (y = 0; y < size; y++) {
        for (x = 0; x < size; x++) {
            inverse[y][x] =...