// Generated by CoffeeScript 1.10.0
(function() {
  window.leafletComponent = {
    props: {
      conf: {
        type: Object,
        required: true
      }
    },
    data: function() {
      return {
        map: null,
        point: function(x, y) {
          return this.map.unproject([x, -y], this.conf.realMaxZoom);
        },
        to_path_description: function(projection, points) {
          var i, j, len, p, starting_point, str;
          str = "";
          starting_point = (projection.latLngToLayerPoint(this.point(points[0].x, points[0].y)).x) + " " + (projection.latLngToLayerPoint(this.point(points[0].x, points[0].y)).y);
          for (i = j = 0, len = points.length; j < len; i = ++j) {
            p = points[i];
            if (i > 0) {
              str += "L " + (projection.latLngToLayerPoint(this.point(p.x, p.y)).x) + " " + (projection.latLngToLayerPoint(this.point(p.x, p.y)).y) + " ";
            }
          }
          return "M" + starting_point + " " + str + " L " + starting_point;
        },
        loadOverlay: function() {
          return d3.json('data.json', (function(_this) {
            return function(data) {
              var overlay;
              _this = _this;
              overlay = L.d3SvgOverlay(function(selection, projection) {
                var enter_paths, enter_rectangles, paths, rectangles;
                rectangles = selection.selectAll('.rectangles').data(data.annotations.filter(function(d) {
                  return (d.p1 != null) && (d.p2 != null);
                }));
                enter_rectangles = rectangles.enter().append('g').attrs({
                  "class": 'rectangles image_portion'
                }).on('click', function(d) {
                  return console.log("" + d.text.full);
                });
                enter_rectangles.append('rect').attrs({
                  width: function(d) {
                    return projection.latLngToLayerPoint(_this.point(d.p2.x, 0)).x - projection.latLngToLayerPoint(_this.point(d.p1.x, 0)).x;
                  },
                  height: function(d) {
                    return projection.latLngToLayerPoint(_this.point(0, d.p2.y)).y - projection.latLngToLayerPoint(_this.point(0, d.p1.y)).y;
                  },
                  x: function(d) {
                    return projection.latLngToLayerPoint(_this.point(d.p1.x, d.p1.y)).x;
                  },
                  y: function(d) {
                    return projection.latLngToLayerPoint(_this.point(d.p1.x, d.p1.y)).y;
                  },
                  'stroke-width': 5 / _this.map.getZoom()
                });
                paths = selection.selectAll('.path').data(data.annotations.filter(function(d) {
                  return d.path != null;
                }));
                enter_paths = paths.enter().append('g').attrs({
                  "class": 'path image_portion'
                }).on('click', function(d) {
                  return console.log("" + d.text.full);
                });
                return enter_paths.append('path').attrs({
                  d: function(d) {
                    return _this.to_path_description(projection, d.path);
                  },
                  'stroke-width': 5 / _this.map.getZoom()
                });
              });
              return overlay.addTo(_this.map);
            };
          })(this));
        }
      };
    },
    template: '<div id="map"></div>',
    mounted: function() {
      var center;
      this.map = L.map('map', this.conf.map);
      center = this.point(this.conf.width / 2, this.conf.height / 2);
      this.map.setView(center, 2, {
        animate: false
      });
      L.tileLayer.zoomify(this.conf.tileLayer, {
        width: this.conf.width,
        height: this.conf.height
      }).addTo(this.map);
      L.control.zoom({
        position: this.conf.zoomControlPosition
      }).addTo(this.map);
      return this.loadOverlay();
    }
  };

}).call(this);