var $ = window.$,
    rows = 3,
    columns = 3,
    currentLhs = [], // rows x columns matrix
    currentRhs = []; // rows x 1 matrix
    solutionContainer = $('#solution_container');

function main() {
    $('#reset_button').on('click', onResetClicked);
    $('#solve_button').on('click', onSolveClicked);
    resetView();
}

function resetView() {
    renderLHS();
    renderUnknowns();
    renderRHS();

    currentLhs = [];
    currentRhs = [];
    for (var r = 0; r < rows; r++) {
        for (var c = 0; c < columns; c++) {
            currentLhs.push(0);
        }
    }

    for (var otherR = 0; otherR < rows; otherR++) {
        currentRhs.push(0);
    }

    solutionContainer.empty();
}

// Renders for the input container.
function renderLHS() {
    var lhs = $('#matrix_lhs').empty(),
        addCell = function(index) {
            $('<input>').type('number').val(0).on('change',  function(event) {
                currentLhs[index] = Number(event.target.value);
            }).appendTo(lhs);
        };

    for (var r = 0; r < rows; r++) {
        for (var c = 0; c < columns; c++) {
            addCell((r * rows) + c);
        }
    }
}

function renderUnknowns() {
    var unknownsContainer = $('#unknown_variables').empty();

    for (var r = 0; r < columns; r++) {
        var cell = $('<input>').disabled(true).val(String.fromCharCode('x'.charCodeAt(0) + r).toUpperCase());
        unknownsContainer.append(cell);
    }
}

function renderRHS() {
    var rhs = $('#matrix_rhs').empty(),
        addCell = function(index) {
            $('<input>').type('number').val(0).on('change', function(event) {
                currentRhs[index] = Number(event.target.value);
            }).appendTo(rhs);
        };

    for (var r = 0; r < rows; r++) {
        addCell(r);
    }
}

// Renders for the solution container
function renderAugmentedMatrix(lhs, rhs) {
    var container = $('<div>').addClass('augmented_matrix_container'),
        lhsContainer = $('<div>').appendTo(container),
        rhsContainer = $('<div>').appendTo(container),
        addLhsCell = function(index) {
            $('<input>').type('number').val(lhs[index]).disabled(true).appendTo(lhsContainer);
        },
        addRhsCell = function(index) {
            $('<input>').type('number').val(rhs[index]).disabled(true).appendTo(rhsContainer);
        };
    
    for (var r = 0; r < rows; r++) {
        for (var c = 0; c < columns; c++) {
            addLhsCell(r * rows + c);
        }
    }

    for (var otherR = 0; otherR < rows; otherR++) {
        addRhsCell(otherR);
    }

    return container;
}

// Callbacks for actions
function onResetClicked() {
    resetView();
}

function onSolveClicked() {
    solutionContainer.append(renderAugmentedMatrix(currentLhs, currentRhs));
}

main();