function itemgetter(index){
    return function inner(x){ return x[index];};
}

function none(lst){
    for (var i = 0; i < lst.length; i++){
        if (lst[i]){
            return false;
        }
    }
    return true;
}

function drawStateTable(pattern, states){
    $('#state-table').html(makeStateTable(pattern, states));
    $('#state-table table th').mouseover(function (){

        setBackground($(this).index());
    })
}

function repeat(string, times){
    var out = "";
    for (var i=0; i < times; i++){
        out += string;
    }
    return out;
}

function makeStateTable(pattern, states){
    colString = repeat("<col/>", states.length);
    PATTERN = pattern;
    headerString = '<tr class="throws-row">' + 
        pattern.map(function(x) {return "<th>" + x + "</th>" }).join(' ') +  "</tr>";

    var rows = []
    var i = 0;
    while (true) {
        var row = states.map(itemgetter(i));

        if (none(row)){
            break;
        }
        rows.push(row);
        i += 1;
    }

    function formatRow(row){
        var cells = row.map(function (x) { return "<td>" + x + "</td>";}, row );
        return "<tr>" + cells.join(" ") + "</tr>";
    }

    return "<table>" + colString + headerString + rows.map(formatRow).join("\n") + "</table>";
}

function setBackground(index){

    $('#state-table table th').css('background-color', '');
    $($('#state-table table th')[index]).css('background-color', 'pink');

    var parity = index % 2? 'odd': 'even';
    $('#state-table table td').removeClass('throw-position');

    $('#state-table table col').css('background-color', '');
    $('#state-table table col:' + parity).css('background-color', 'lightgray');
    var col = $('#state-table table col')[index];
    $(col).css('background-color', 'pink');

    var nextCol = $($('#state-table table col')[index + 1]);

    var throwHeight = parseInt($('#siteswap-input').attr('value')[index]);
    var row = $($('#state-table table tr')[throwHeight]);
    $(row.find('td')[index + 1]).addClass('throw-position');
}

var inputString = null;

$(function() {

    function main(entry){
        var string = entry.attr('value');
        if (inputString != string){
            inputString = string;
            var ss = parseSiteswap(string);
            var states = getStates(ss);
            States = states;
            drawStateTable(ss, states);
        }
        setBackground(entry.attr('selectionStart'));
    }

    input = $('#siteswap-input')
    if (input.attr('value')){
        main(input);
    }

    $('#siteswap-input').mouseup(function (){
        setBackground(this.selectionStart);
    })

    $('#siteswap-input').keyup(function (event){
        main($(this));
    });
});