       that.onclick(event.clientX - @offsetLeft + nX, event.clientY - @offsetTop + nY)
 
   loadImage: () ->
-    imageUrl = @tag.attr('data-src')
+    @imageUrl = @tag.attr('data-src')
     @bgImg = new Image()
+    that = @
+    @bgImg.onload = () ->
+      if that.layers.length == 0
+        that.setImage()
+        that.onload()
+      else
+        that.loadLayerImages()
+
+    @frameUrl = @tag.attr('data-frame')
+    if @frameUrl
+      bgName = 'map'+@tag.attr('data-area')+'-'+@tag.attr('data-info')
+      @bgLayers = [bgName, bgName+'_point']
+      $.getJSON @frameUrl, (data) ->
+        data.forEach (d) ->
+          that.frames[d.name] = {pos: {x: d.posX, y: d.posY}, width: d.width, height: d.height}
+        that.bgImg.src = that.imageUrl
+    else
+      @bgLayers = []
+      @bgImg.src = @imageUrl
+
+  loadLayerImages: () ->
     @layerImgs = []
-    that = @
-    @bgImg.onload = () ->
-      that.setImage()
-      layerCount = 0
-      if layerCount == that.layers.length
-        return that.onload()
-
-      that.layers.forEach (s) ->
-        img = new Image()
-        img.onload = ->
-          layerCount++
-          if layerCount == that.layers.length
-            that.onload()
-        img.src = imageUrl + '?suffix=' + s
-        that.layerImgs[s] = img
-    @bgImg.src = imageUrl
+    layerCount = 0
+    that = @
+    @layers.forEach (s) ->
+      img = new Image()
+      img.onload = () ->
+        layerCount++
+        if that.layers.length == layerCount
+          that.setLayers()
+          that.onload()
+
+      that.layerFrames[s] = {}
+      that.layerImgs[s] = img
+      $.getJSON that.frameUrl, {suffix: s}, (data) ->
+        data.forEach (d) ->
+          that.layerFrames[s][d.name] = {pos: {x: d.posX, y: d.posY}, width: d.width, height: d.height}
+        img.src = that.imageUrl + '?suffix=' + s
 
   setImage: () ->
     @ctx.globalAlpha = 1.0
     that = @
-    @bgLayers.forEach (name) ->
-      frame = that.frames[name]
-      that.ctx.drawImage(that.bgImg, frame.pos.x, frame.pos.y, frame.width, frame.height, 0, 0, frame.width, frame.height)
+    if @bgLayers.length != 0
+      @bgLayers.forEach (name) ->
+        frame = that.frames[name]
+        that.ctx.drawImage(that.bgImg, frame.pos.x, frame.pos.y, frame.width, frame.height, 0, 0, frame.width, frame.height)
+    else
+      @ctx.drawImage(@bgImg, 0, 0, @bgImg.width, @bgImg.height, 0, 0, @bgImg.width, @bgImg.height)
 
   setLayers: () ->
     that = @


class @SeaMap
  constructor: (idTag) ->
    layerUrl = $('#' + idTag).attr('data-layer')
    @layers = []
    that = @
    $.ajax
      url: layerUrl
      async: false
      dataType: 'json'
      success: (data) ->
        that.layers = data
    @tag = $('#' + idTag)
    @positions = []
    @cellInfos = {}
    @toAlpha = []
    @image = new MapImage(idTag, @layers)
    @image.onclick = @runClick
    @load(idTag)

  load: (idTag) ->
    posUrl = @tag.attr('data-position')
    labelUrl = @tag.attr('data-labelpos')
    infoUrl = @tag.attr('data-cellinfo')
    that = @
    @image.onload = () ->
      deferr = []
      d = new $.Deferred
      $.when(
        $.getJSON(posUrl),
        if infoUrl then $.getJSON(infoUrl) else null

    p ?= @positions[@cellInfos[cell]]
    p

  runClick: (x, y) =>
    cell = _.findIndex @positions, (pos) ->
      (pos.x - DefaultSize / 2) < x and
        x < (pos.x + DefaultSize / 2) and
