Normalise tower construction

Dragging + dropping a tower now creates a new entry in the model,
instead of just a new DOM node

index.html

@@ -9,60 +9,88 @@
   <script src="res/data/layout.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(function() {
+    var activeTower, thisLevel;
+
     $.fn.rotate = function(rot) {
      return this.css('-webkit-transform', 'rotate(' + rot + 'deg)')
                 .css('-moz-transform', 'rotate(' + rot + 'deg');
     };
 
-    function createElForTower(type) {
+    $.fn.offsetFrom = function(el) {
+     var offset = this.offset();
+     var otherOffset = $(el).offset();
+     return {top: offset.top - otherOffset.top, left: offset.left - otherOffset.left};
+    }
+
+    function createBaseElForTower(key) {
+     var type = towers[key];
+
      return $('<img>')
        .attr('src', type.image)
        .attr('alt', type.name)
+       .data('type', key)
        .addClass('tower');
     }
 
-    function adjustMapOffset(towerOffset, level) {
+    function createElForTower(tower) {
+     return createBaseElForTower(tower.type)
+       .data('tower', tower)
+       .draggable()
+       .css('position', 'absolute')
+       .offset(adjustMapOffset(tower.position, thisLevel))
+       .rotate(tower.rotation);
+    }
+
+    function adjustMapOffset(towerOffset, level, reverse) {
      var res = $.extend({}, towerOffset);
 
-     if (level.offsets) {
+     if (level.offsets && !reverse) {
       res.left += level.offsets.left;
       res.top += level.offsets.top;
      }
 
      if (level.scale) {
-      res.left *= level.scale.left;
-      res.top *= level.scale.top;
+      if (reverse) {
+       res.left /= level.scale.left;
+       res.top /= level.scale.top;
+      } else {
+       res.left *= level.scale.left;
+       res.top *= level.scale.top;
+      }
+     }
+
+     if (level.offsets && reverse) {
+      res.left -= level.offsets.left;
+      res.top -= level.offsets.top;
      }
 
      return res;
     }
 
-    $.each(towers, function() {
-     createElForTower(this)
-       .appendTo($('#palette'));
+    $.each(towers, function(key) {
+     createBaseElForTower(key, this).appendTo($('#palette'));
     });
 
     $('.tower,.core').draggable({
      helper: 'clone',
      containment: 'window',
      stop: function(evt, ui) {
-      $(this).clone()
-        .draggable()
-        .css('position', 'absolute')
-        .offset(ui.helper.offset())
-        .appendTo(document.body);
+      var tower = {
+       type: $(this).data('type'),
+       rotation: 0,
+       position: adjustMapOffset(ui.helper.offsetFrom('#mapcontainer'), thisLevel, 1)
+      };
+
+      layout.towers.push(tower);
+      createElForTower(tower).appendTo($('#mapcontainer'));
      }
     });
 
-    $('#mapcontainer').css('background-image', 'url("' + levels[layout.level - 1].minimap + '")');
+    thisLevel = levels[layout.level - 1];
+    $('#mapcontainer').css('background-image', 'url("' + thisLevel.minimap + '")');
 
     $.each(layout.towers, function() {
-     createElForTower(towers[this.type])
-       .draggable()
-       .css('position', 'absolute')
-       .offset(adjustMapOffset(this.position, levels[layout.level - 1]))
-       .rotate(this.rotation)
-       .appendTo($('#mapcontainer'));
+     createElForTower(this).appendTo($('#mapcontainer'));
     });
    });
   </script>