--- a/mhrok.css	Fri Oct 26 16:54:26 2012 +0200
+++ b/mhrok.css	Tue Oct 30 16:26:49 2012 +0100
@@ -4,6 +4,7 @@
     height: 480px;
     background: #666;
     position: relative;
+    overflow: hidden;
 }
 
 #mhrok .mhrok-mob {
@@ -54,6 +55,9 @@
     height: 24px;
     background-image: url('floor.png');
 }
+#mhrok .mhrok-map b:hover {
+    opacity: 0.5;
+}
 
 #mhrok .mhrok-map .mhrok-X {
     background-position: 0px -0;

--- a/mhrok.js	Fri Oct 26 16:54:26 2012 +0200
+++ b/mhrok.js	Tue Oct 30 16:26:49 2012 +0100
@@ -1,18 +1,10 @@
 (function () {
-    var Mob = function (game) {
+    var Mob = function () {
         this.animation = 'stand';
-        this.element = window.document.createElement('i');
-        this.element.className = this.classes;
-        this.element.style.left = '0px';
-        this.element.style.top = '0px';
-        game.mobs.push(this);
-        game.element.appendChild(this.element);
-        this.shadow = window.document.createElement('b');
-        this.shadow.className = 'mhrok-shadow';
-        this.element.appendChild(this.shadow);
-        this.sprite = window.document.createElement('b');
-        this.sprite.className = 'mhrok-sprite';
-        this.element.appendChild(this.sprite);
+        this.x = 0;
+        this.y = 0;
+        this.x = 0;
+        this.frame = 0;
     };
     Mob.prototype = {};
     Mob.prototype.classes = 'mhrok-mob';
@@ -30,16 +22,31 @@
     };
     Mob.prototype.animate = function (frame) {
         var animation = this.animations[this.animation];
-        var tile = animation.frames[frame];
         var motion = animation.motion[frame];
-        this.sprite.style.backgroundPosition = ('' +
-            (-tile[0] * 48) + 'px ' + (-tile[1] * 48) + 'px');
-        this.element.style.left = ('' + 
-            (parseInt(this.element.style.left) + motion[0]) + 'px');
-        this.element.style.top = ('' + 
-            (parseInt(this.element.style.top) + motion[1]) + 'px');
+        this.frame = frame;
+        this.x += motion[0];
+        this.y += motion[1];
+        this.z = this.y;
     };
     Mob.prototype.update = function (game) {};
+    Mob.prototype.html = function () {
+        var animation = this.animations[this.animation];
+        var tile = animation.frames[this.frame];
+        return (
+            '<i class="' + this.classes + '" style="' +
+                'left:' + this.x + 'px;' +
+                'top:' + this.y + 'px;' +
+                'z-index:' + this.z +
+            '">' +
+                '<b class="mhrok-shadow"></b>' +
+                '<b class="mhrok-sprite" style="' +
+                    'background-position:' +
+                        (-tile[0] * 48) + 'px ' +
+                        (-tile[1] * 48) + 'px' +
+                '"></b>' +
+            '</i>'
+        );
+    };
 
 
     var Hero = function () {
@@ -163,36 +170,34 @@
     };
 
 
-    var Level = function (game, map) {
+    var Level = function (map) {
         this.map = map;
-        this.element = window.document.createElement('div');
-        this.element.className = 'mhrok-map';
-        game.element.appendChild(this.element);
-        var row;
-        var row_element;
-        this.elements = [];
-        for (var y=0; y < 20; ++y) {
-            row = [];
-            this.elements.push(row);
-            row_element = window.document.createElement('div');
-            this.element.appendChild(row_element);
-            for (var x=0; x < 20; ++x) {
-                var element = window.document.createElement('b');
-                element.className = 'mhrok-' + this.map[y][x];
-                row_element.appendChild(element);
-                row.push(element);
-            };
-        };
     };
     Level.prototype = {};
+    Level.prototype.html = function () {
+        html = '';
+        for (var y=0; y < 20; ++y) {
+            html += '<div>';
+            for (var x=0; x < 20; ++x) {
+                var className = 'mhrok-' + this.map[y][x];
+                html += '<b class="' + className + '"></b>'
+            };
+            html += '</div>';
+        };
+        return html;
+    };
 
 
     var Game = function (element) {
+        element.innerHTML = (
+            '<div class="mhrok-map"></div>' +
+            '<div class="mhrok-mobs"></div>'
+        );
+        this.map_element = element.getElementsByClassName('mhrok-map')[0];
+        this.mobs_element = element.getElementsByClassName('mhrok-mobs')[0];
         this.element = element;
     };
     Game.prototype = {};
-    Game.prototype.addMob = function (mob) {
-    };
     Game.prototype.run = function () {
         var that = this;
         this.frame_number = 0;
@@ -200,7 +205,7 @@
         this.keys = {};
         this.last_key = null;
 
-        this.level = new Level(this, [
+        this.level = new Level([
             'XXXXXXXXXXXXXXXXXXXX',
             'XabaaaaaaaaaaaaaaaaX',
             'XaaaaaabaaaaaaaaaaaX',
@@ -222,7 +227,9 @@
             'XaaaabbbbbbbbbbbbbbX',
             'XXXXXXXXXXXXXXXXXXXX',
         ]);
+        this.map_element.innerHTML = this.level.html();
         this.hero = new Hero(this);
+        this.mobs.push(this.hero);
 
         this.animation = window.setInterval(function () {
             that.frame();
@@ -251,6 +258,11 @@
         this.mobs.forEach(function (mob) {
             mob.animate(this.frame_number);
         }, this);
+        var html = '';
+        this.mobs.forEach(function (mob) {
+            html += mob.html();
+        }, this);
+        this.mobs_element.innerHTML = html;
     };