<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Sokoban Bitmap Editor</title>
    <script type="text/javascript">
        var grid = new Array(0);

        function Init() {
            grid = InitGrid();
            DisplayGrid();            
        }

        function InitGrid() {
            var _grid = new Array(16);
            for (i=0; i<16; i++) {
                _grid[i] = new Array(16);
                for (j=0; j<16; j++) {
                    _grid[i][j]=false;
                }
            }
            return _grid;
        }

        function RotateBitmapRight() {
            var _grid = InitGrid();

            for (i=0; i<16; i++) {
                for (j=0; j<16; j++) {
                    _grid[j][15-i]=grid[i][j];
                }
            }
            
            grid = _grid;
            DisplayGrid();
        }

        function MirrorBitmap() {
            var _grid = InitGrid();

            for (i=0; i<16; i++) {
                for (j=0; j<16; j++) {
                    _grid[i][15-j]=grid[i][j];
                }
            }

            grid = _grid;
            DisplayGrid();
        }
        
        function DisplayGrid() {
            var str = "<table border=1 cellspacing=0>";
            var i,j, backgroundColor;
            for (i=-1; i<16; i++) {
                str=str+"<tr>";
                for (j=-1; j<16; j++) {
                    if (i == -1 && j != -1) {
                        str=str+"<td>" + (j+1) + "</td>";
                    } else if (i != -1 && j == -1) {
                        str=str+"<td>" + (i+1) + "</td>";
                    } else if (i ==-1 && j == -1) {
                        str=str+"<td/>";
                    } else {

                        if (grid[i][j] == true)
                            backgroundColor = "black";
                        else
                            backgroundColor = "white";

                        str=str+"<td onclick=\"OnCellClicked(this)\" id="; str=str+(i*16+j); str=str+" width=16 height=16 bgcolor=" + backgroundColor + "></td>";
                    }                                        
                }
                str=str+"</tr>";
            }
            str=str+"</table>"

            gridElement = document.getElementById('grid');
            gridElement.innerHTML = str;
            GenerateBitMap() ;
        }

        function OnCellClicked(cell) {
            var i = cell.id / 16 |0;
            var j = cell.id - i*16;
            grid[i][j] = !grid[i][j];
            if (grid[i][j])
                cell.style.backgroundColor = "black";
            else
                cell.style.backgroundColor = "white";
            GenerateBitMap();
        }

        function GenerateBitMap() {
            var i, j;
            var value;

            var functionTypeSelect = document.getElementById('functionType');            
            methodType = functionTypeSelect.options[functionTypeSelect.selectedIndex].value;

            generateCode = document.getElementById('generatedCode');
            generateCode.value =    methodType + " void " +
                                    document.getElementById('functionName').value +
                                    "(int location) {\n\tlet memAddress = 16384+location;\n";

            for (i=0; i<16; i++) {
                //get grid binary representation
                binary = "";
                for (j=0; j<16; j++) {
                    if (grid[i][j])
                        binary = "1" + binary;
                    else
                        binary = "0" + binary;
                }
              
                isNegative = false;
                //if number is negative, get its  one's complement
                if (binary[0] == "1") {
                    isNegative = true;
                    oneComplement = "";
                    for (k=0; k<16; k++) {
                        if (binary[k] == "1")
                            oneComplement = oneComplement + "0";
                        else
                            oneComplement = oneComplement + "1";
                    }
                    binary = oneComplement;                 
                }
                
                //calculate one's complement decimal value
                value = 0;
                for (k=0; k<16; k++) {
                    value = value * 2;
                    if (binary[k] == "1")
                        value=value+1;
                }                

                //two's complement value if it is a negative value
                if (isNegative == true)
                    value = -(value + 1)

                generateCode.value = generateCode.value + GenerateCodeLine(i, value);
            }

            generateCode.value = generateCode.value + "\treturn;\n}";
        }

        function GenerateCodeLine(row, value) {
            str = "\tdo Memory.poke(memAddress+" + row*32 + ", " + value + ");\n";
            return str;
        }
    </script>
</head>
<body onload="Init();">
    <h4><i>IDC Herzliya / Efi Arazi School of Computer Science / Digital Systems Construction, Spring 2011 / Project 09 / Golan Parashi</i></h4>
    <h1>Sokoban Bitmap Editor</h1>
    <p>This javascript applicaiton is used to generate highly optimized jack code for drawing a 16x16 bitmap to the screen.</p>
    <p>Using the mouse, click the desired cell to mark/unmark it. You may use 90 degrees rotation and vertical mirroring by<br>
    clicking the appropriate buttons.</p>
    <p>When you are finished drawing, you may select function type and enter function's name.</p>
    <p>
    <table>
        <thead>
            <tr>
                <th align="left">Bitmap</th>
                <th align="left"></th>
                <th align="left">Generated Jack Code</th>
            </tr>
        </thead>
        <tr>
            <td><div id="grid"/></td>
            <td>
                <form action="javascript:GenerateBitMap();">
                    <table>
                        <tr><td align="left">Function Type:</td></tr>
                        <tr><td align="center">
                                <select id="functionType" onChange="GenerateBitMap()">
                                    <option value="function" selected="selected">function</option>
                                    <option value="method">method</option>                                    
                                </select>
                        </td></tr>
                        <tr><td align="left">Function Name:</td></tr>
                        <tr><td align="left"><input type="text" value="draw" id="functionName" onkeyup="GenerateBitMap()"/></td></tr>
                        <tr><td></td></tr>
                        <tr><td align="center"><input type="button" value="Generate Code >>" onclick="GenerateBitMap()"/></td></tr>
                    </table>
                </form>
            </td>
            <td><textarea id="generatedCode" cols="50" rows="20" readonly="read-only"></textarea></td>                                
        </tr>
        <tr>
            <table>
                <tr>
                    <td align="center"><input type="button" value="Rotate right" onclick="RotateBitmapRight()"/></td>
                    <td align="center"><input type="button" value="Vertical Mirror" onclick="MirrorBitmap()"/></td>
                </tr>
            </table>
        </tr>
    </table>
</body>
</html>