Untitled


<html>
<head>
        <title>Editor</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">

var tiles = [];
var draw = 0;
var w = 0;
var h = 0;

$(document).ready(function() {
    $('#tile-selector img').click(function() {
        draw = $(this).attr("tile");
    });
});

function run() {
    w = $("#w").val();
    h = $("#h").val();

    for (var i = 0; i < h; i++) {
            tiles[i] = [];
    }

    for (var y = 0; y < h; y++) {
            for (x = 0; x < w; x++) {
                    $("#box").append("<img src='src/" + draw +".png' x='"+ x +"' y='"+ y +"' height='15' width='15'></img>");
                    tiles[x][y] = draw;
            }
            $("#box").append("<br />");
    }

     $("#box img").click(function() {
            $(this).attr("src", "src/" + draw +".png");
            tiles[$(this).attr("x")][$(this).attr("y")] = draw;
     });
}

function end() {
    var output = "";
    for (var x = 0; x < w; x++) {
        for (var y = 0; y < h; y++) {
            output += "tiles["+ x +"+"+ y +"*width] =" + tiles[x][y] +";\r\n";
        }
    }

    $("#output").val(output);
}

</script>
</head>
<body>

        width<input type="text" id="w"></input>
        height<input type="text" id="h"></input>
        <input type="button" id="s" value="start" onclick="run();"></input>
        <input type="button" id="s" value="end" onclick="end();"></input>
        <div id="tile-selector">
            <img src="src/0.png" height="15" width="15" tile="0">
            <img src="src/1.png" height="15" width="15" tile="1">
            <img src="src/2.png" height="15" width="15" tile="2">
            <img src="src/3.png" height="15" width="15" tile="3">
            <img src="src/4.png" height="15" width="15" tile="4">
            <img src="src/5.png" height="15" width="15" tile="5">
            <img src="src/6.png" height="15" width="15" tile="6">
            <img src="src/7.png" height="15" width="15" tile="7">
            <img src="src/8.png" height="15" width="15" tile="8">
            <img src="src/9.png" height="15" width="15" tile="9">
            <img src="src/10.png" height="15" width="15" tile="10">
            <img src="src/11.png" height="15" width="15" tile="11">
            <img src="src/12.png" height="15" width="15" tile="12">
            <img src="src/13.png" height="15" width="15" tile="13">
            <img src="src/14.png" height="15" width="15" tile="14">
            <img src="src/15.png" height="15" width="15" tile="15">
            <img src="src/16.png" height="15" width="15" tile="16">
            <img src="src/17.png" height="15" width="15" tile="17">
            <img src="src/18.png" height="15" width="15" tile="18">
            <img src="src/19.png" height="15" width="15" tile="19">
            <img src="src/20.png" height="15" width="15" tile="20">
            <img src="src/21.png" height="15" width="15" tile="21">
            <img src="src/22.png" height="15" width="15" tile="22">
            <img src="src/23.png" height="15" width="15" tile="23">
            <img src="src/24.png" height="15" width="15" tile="24">
            <img src="src/25.png" height="15" width="15" tile="25">
            <br>
            <img src="src/26.png" height="15" width="15" tile="26">
            <img src="src/27.png" height="15" width="15" tile="27">
            <img src="src/28.png" height="15" width="15" tile="28">
            <img src="src/29.png" height="15" width="15" tile="29">
            <img src="src/30.png" height="15" width="15" tile="30">
            <img src="src/31.png" height="15" width="15" tile="31">
            <img src="src/32.png" height="15" width="15" tile="32">
            <img src="src/33.png" height="15" width="15" tile="33">
            <img src="src/34.png" height="15" width="15" tile="34">
            <img src="src/35.png" height="15" width="15" tile="35">
            <img src="src/36.png" height="15" width="15" tile="36">
            <img src="src/37.png" height="15" width="15" tile="37">
            <img src="src/38.png" height="15" width="15" tile="38">
            <img src="src/39.png" height="15" width="15" tile="39">
            <img src="src/40.png" height="15" width="15" tile="40">
            <img src="src/41.png" height="15" width="15" tile="41">
            <img src="src/42.png" height="15" width="15" tile="42">


        </div>
<div id="box"></div>
Output<br />
<textarea id="output" style="width: 600px; height: 300px;"></textarea>
</div>
</body>
</html>