Untitled

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style>
        table
        {
            width:1500px;
            margin: 0;
            padding: 0;
            font-size:6px;
            border-spacing:0;
        }

        td
        {
            margin: 0;
            padding: 0;
            width:150x;
            height:10px;
            border:1px solid white;
            background:#eee;
        }

        td div
        {
            display:block;
            float:left;
            text-align:center;
            width:100%;
            height:33%;
            cursor:pointer;
        }

        .current
        {
            background-color:red;
        }

        .current.clickable
        {
            background-color:blue;
        }

        .north
        {
            background:#aa0;
        }

        .east
        {
            background:#0aa;
            width:50%;
            float:right;
        }
        .west
        {
            background:#088;
            width:50%;
        }
        .south
        {
            background:#880;
        }
        .north:hover
        {
            background:#fa6;
        }
        .south:hover
        {
            background:#fa0;
        }
        .east:hover
        {`
            background:#f6a;
        }
        .west:hover
        {
            background:#f06;
        }
        .potential
        {
            background-color:yellow;
        }

        .current {border:1px solid black}

    </style>
</head>
<body>
<table id="grid">
</table>
<script type="text/javascript">
    function default_for(arg, val)
    {
        return typeof arg !== 'undefined' ? arg : val;
    }

    function json_togrid(data, bit, result)
    {
        var result = default_for(result, []);
        var keys = Object.keys(data);
        keys.forEach(function(key)
        {
            var tkeys = Object.keys(data[key]);
            tkeys.forEach(function(tkey)
            {
                if (data[key][tkey] == -1)
                    return  ;
                if (typeof result[key] == 'undefined')
                result[key] = Array();
                var okeys = Object.keys(data[key][tkey]);
                okeys.forEach(function(okey)
                {
                    if (typeof result[key][tkey] == 'undefined')
                        result[key][tkey] = Array();
                    result[key][tkey][okey] |= (1 << bit);
                });
            });
        });
        return result;
    }

    function get_grid(x, y, ori)
    {
        x = default_for(x, 50);
        y = default_for(y, 70);
        ori = default_for(ori, 0);

        var ajax_time= new Date().getTime();
        res = $.getJSON('grid.php', {"x" : x, "y" : y, "ori" : ori}).done(function(data)
        {
            fill_array_time = new Date().getTime();
            console.log('--request :', fill_array_time - ajax_time);
            var grid= json_togrid(data, 0);
            if (typeof grid[y] == 'undefined')
                grid[y] = Array();
            draw_grid(grid, x, y);
        });
    }

    function    append_link(node, classname, content)
    {
        var tmpdv = document.createElement('div');
        tmpdv.className += " " + classname
    //  tmpdv.textContent = content;
        node.appendChild(tmpdv);
    }

    function draw_grid(grid, x, y)
    {
        ghtml = document.getElementById('grid');
        ghtml.innerHTML = '';

        for (var i = 0; i < 100; ++i)
        {
            var tmptr = document.createElement('tr');
            for (var j = 0; j < 150; ++j)
            {
                var tmptd = document.createElement('td');
                if (y == i && x == j)
                    tmptd.className += " current";
                if (typeof grid[i] != 'undefined' && typeof grid[i][j] != 'undefined')
                {
                    tmptd.className += ' clickable';
                    if (typeof grid[i][j][0] != 'undefined')
                        append_link(tmptd, "north", "N");
                    if (typeof grid[i][j][3] != 'undefined')
                        append_link(tmptd, "west", "W");
                    if (typeof grid[i][j][1] != 'undefined')
                        append_link(tmptd, "east", "E");
                    if (typeof grid[i][j][2] != 'undefined')
                        append_link(tmptd, "south", "S");
                }
                tmptr.appendChild(tmptd);
            }
            ghtml.appendChild(tmptr);
        }
    }

    $(document).ready(function()
    {
            get_grid();
    });

    $('#grid').on('click', '.clickable div', function()
    {
        var orient = Array("north", "east", "south", "west");
        var x = $(this).parent().index();
        var y = $(this).parent().parent().index();
        var ori = orient.indexOf($(this).attr('class').trim());
        get_grid(x, y, ori);
    });
</script>
</body>
</html>