Matrix RREF Program

by jcubed111

HTML

<label>Fast? <input id='fast' type='checkbox' checked='true'/></label><br/>
<textarea id='inputMatrix' class='toMatrix' onchange='doRREF();'></textarea>
<div id='RREFWork'></div>

CSS

fieldset.matrixEntry{
    display:inline-block;
    width:auto;
    overflow:hidden;
    padding:0;
    margin:0;
    border:none;
}

div.matrixRow{
    white-space:nowrap;
}

input.matrixCell{
    margin:2px;
    padding:4px;
    font-size:18px;
    font-family:monospace;
    width:70px;
    border:1px solid #cfcfcf;
    text-align:right;
    color:#000;
}

input.matrixCell::-webkit-input-placeholder{  
   color:#bbb;  
}

input.matrixCell:focus::-webkit-input-placeholder{  
   color:transparent;  
}

/*
input.matrixCell:-moz-placeholder,
input.matrixCell::-moz-placeholder,
input.matrixCell:-ms-input-placeholder
*/


div.matrixRow input.matrixCell:last-child,
div.matrixRow:last-child input.matrixCell{
    border-color:#eee;
}

div.matrixRow input.matrixCell:last-child::-webkit-input-placeholder,
div.matrixRow:last-child input.matrixCell::-webkit-input-placeholder{
    color:transparent;
}






#RREFWork td{
    font-size:18px;
    padding:3px 10px;
    min-width:40px;
    font-family:monospace;
    text-align:right;
}

#RREFWork table{
    border-left:1px solid #888;
    border-right:1px solid #888;
}

#RREFWork hr{
    border:0px none transparent;
    border-bottom:1px solid #ddd;
}

JavaScript

$ = jQuery;

matrixSizes = [];


function matrixInputChange(){
    
    i = this.id.split('_')[1]*1;
    
    rows = matrixSizes[i][0];
    columns = matrixSizes[i][1];
    
    
    if(event.type == 'keydown'){
        j = this.id.split('_')[2]*1;
        k = this.id.split('_')[3]*1;
        if(event.shiftKey){
            switch(event.keyCode){
                case 9: //tab
                    //TODO: move on to element after textarea
                    break;
            }
        }else{
            switch(event.keyCode){
                case 9: //tab
                    break;
                case 13: //enter
                    $("#matrixEntry_"+i+"_"+(j+1)+"_"+0).focus();
                    return;
                case 37: //left
                    $("#matrixEntry_"+i+"_"+j+"_"+(k-1)).focus();
                    return;
                case 38: //up
                    $("#matrixEntry_"+i+"_"+(j-1)+"_"+k).focus();
                    return;
                case 39: //right
                    $("#matrixEntry_"+i+"_"+j+"_"+(k+1)).focus();
                    return;
                case 40: //down
                    $("#matrixEntry_"+i+"_"+(j+1)+"_"+k).focus();
                    return;
            }
        }
    }else if(event.type == 'focus'){
        $(this).select();
    }
    
    
    
    maxRow = 0;
    maxColumn = 0;
    
    
    for(j=0; j<rows; j++){
        for(k=0; k<columns; k++){
            cell = $("#matrixEntry_"+i+"_"+j+"_"+k);
            if(cell.val() != "" || cell.is(":focus") || cell[0] === this){
                maxRow = Math.max(maxRow, j);
                maxColumn = Math.max(maxColumn, k);
            }
        }
    }
    //this.value=maxColumn;
    if(rows < maxRow+2){
        addRowToMatrix(i);
    }else if(rows > maxRow+2 && matrixSizes[i][0]>0){
        for(var h=0; h<rows-maxRow-2; h++){
            removeLastRowFromMatrix(i);
        }
    }
    
    if(columns < maxColumn+2){
        addColumnToMatrix(i);
    }...