$(document).ready(function () {
  var params = OSM.mapParams();
  var newNotes;

  function saveNewNotes(o) {
    var layer = o.object;
    newNotes = layer.getFeaturesByAttribute("status", "new")
    layer.removeFeatures(newNotes, { silent: true });
  }

  function restoreNewNotes(o) {
    var layer = o.object;
    layer.addFeatures(newNotes);
    newNotes = undefined;
  }

  function describeNote(n) {
    var description = "<h2>Note " + n.id + "</h2>";

    n.comments.forEach(function (c) {
      description += "<p><small class='deemphasize'>" + c.action + " by ";
      description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
    });

    return description;
  }

  function noteSelected(o) {
    var feature = o.feature;
    var location = feature.geometry.getBounds().getCenterLonLat();
    var content;
    var close;

    if (feature.attributes.status === "new") {
      var form = $("#new-note").clone();
      form.removeClass("hidden");
      content = form.html();
      close = false;
    } else {
      content = describeNote(feature.attributes);
      close = true;
    };

    feature.popup = new OpenLayers.Popup.FramedCloud(
      feature.attributes.id, location, null, content, null, close,
      function (e) { map.noteSelector.unselect(feature) }
    );

    map.addPopup(feature.popup);
    // feature.popup.show();

    $(feature.popup.contentDiv).find("textarea").autoGrow();

    $(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
      var location = unproj(feature.geometry.getBounds().getCenterLonLat());
      var form = $(e.target).parents("form").first();

      $.ajax(form.prop("action"), {
        type: form.prop("method"),
        data: {
          lon: location.lon,
          lat: location.lat,
          text: form.find("textarea#comment").val()
        },
        success: function (data) {
          map.noteSelector.unselect(feature);

          feature.attributes.status = "open";
          feature.attributes.id = data;

          map.noteLayer.drawFeature(feature);

          map.noteMover.deactivate();
        }
      });

      e.preventDefault();
    });

    $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
      feature.attributes.status = "cancelled";

      map.noteSelector.unselect(feature);
      map.noteLayer.removeFeatures(feature);

      feature.destroy();

      map.noteMover.deactivate();

      e.preventDefault();
    });

    feature.popup.updateSize();
  }

  function noteUnselected(o) {
    var feature = o.feature;

    map.removePopup(feature.popup);
  }

  function addNote() {
    var lonlat = map.getCenter();
    var layer = map.noteLayer;
    var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
    var feature = new OpenLayers.Feature.Vector(geometry, {
      status: "new"
    });

    layer.addFeatures(feature);
    map.noteSelector.unselectAll();
    map.noteSelector.select(feature);
    map.noteMover.activate();
    map.noteLayer.setVisibility(true);
  }

  $("#map").on("initialised", function () {
    map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
      visibility: params.notes,
      displayInLayerSwitcher: false,
      projection: new OpenLayers.Projection("EPSG:4326"),
      styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
        graphicWidth: 22,
        graphicHeight: 22,
        graphicOpacity: 0.7,
        graphicXOffset: -11,
        graphicYOffset: -11
      }, {
        rules: [
          new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.EQUAL_TO,
              property: "status",
              value: "new"
            }),
            symbolizer: {
              externalGraphic: "<%= image_path 'new_note_marker.png' %>"
            }
          }),
          new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.EQUAL_TO,
              property: "status",
              value: "open"
            }),
            symbolizer: {
              externalGraphic: "<%= image_path 'open_note_marker.png' %>"
            }
          }),
          new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.EQUAL_TO,
              property: "status",
              value: "closed"
            }),
            symbolizer: {
              externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
            }
          })
        ]
      })),
      strategies: [
        new OpenLayers.Strategy.BBOX()
      ],
      protocol: new OpenLayers.Protocol.HTTP({
        url: $("#show_notes").attr("href"),
        format: new OpenLayers.Format.GeoJSON()
      })
    });

    map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
    map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
    map.noteLayer.events.register("featureselected", map, noteSelected);
    map.noteLayer.events.register("featureunselected", map, noteUnselected);

    map.addLayer(map.noteLayer);

    map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
      autoActivate: true
    });

    map.addControl(map.noteSelector);

    map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
      onDrag: function (feature, pixel) {
        feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
        feature.popup.updatePosition();
      },
      featureCallbacks: {
        over: function (feature) {
          if (feature.attributes.status === "new") {
            map.noteMover.overFeature.apply(map.noteMover, [feature]);
          }
        }
      }
    });

    map.addControl(map.noteMover);

    $("#show_notes").click(function (e) {
      map.noteLayer.setVisibility(true);

      e.preventDefault();
    });

    $("#createnoteanchor").click(function (e) {
      map.noteLayer.setVisibility(true);

      addNote();

      e.preventDefault();
    });
  });
});