//= require templates/notes/show
//= require templates/notes/new

$(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 createNote(feature, form) {
    var location = unproj(feature.geometry.getBounds().getCenterLonLat());

    $(form).find("input[type=submit]").prop("disabled", true);

    $.ajax($("#createnoteanchor").attr("href"), {
      type: "POST",
      data: {
        lon: location.lon,
        lat: location.lat,
        text: $(form.text).val()
      },
      success: function (data) {
        map.noteSelector.unselect(feature);

        feature.attributes = data.properties;

        map.noteLayer.drawFeature(feature);

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

  function updateNote(feature, form, close) {
    var url = close ? feature.attributes.close_url : feature.attributes.comment_url;

    $(form).find("input[type=submit]").prop("disabled", true);

    $.ajax(url, {
      type: "POST",
      data: {
        text: $(form.text).val()
      },
      success: function (data) {
        map.noteSelector.unselect(feature)
        
        feature.attributes = data.properties;
        
        map.noteSelector.select(feature)
      }
    });
  }

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

    if (feature.attributes.status === "new") {
      content = JST["templates/notes/new"]();

      onClose = function (e) {
        feature.attributes.status = "cancelled";

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

        feature.destroy();

        map.noteMover.deactivate();
      };
    } else {
      content = JST["templates/notes/show"]({ note: feature.attributes });

      onClose = function (e) {
        map.noteSelector.unselect(feature)
      };
    };

    feature.popup = new OpenLayers.Popup.FramedCloud(
      feature.attributes.id, location, null, content, null, true, onClose
    );

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

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

    $(feature.popup.contentDiv).find("textarea").on("input", function (e) {
      var form = e.target.form;

      if ($(e.target).val() == "") {
        $(form.close).val(I18n.t("javascripts.notes.show.close"));
      } else {
        $(form.close).val(I18n.t("javascripts.notes.show.comment_and_close"));
      }
    });

    $(feature.popup.contentDiv).find("input#note-add").click(function (e) {
      e.preventDefault();

      createNote(feature, e.target.form);
    });

    $(feature.popup.contentDiv).find("input#note-comment").click(function (e) {
      e.preventDefault();

      updateNote(feature, e.target.form, false);
    });

    $(feature.popup.contentDiv).find("input#note-close").click(function (e) {
      e.preventDefault();

      updateNote(feature, e.target.form, true);
    });

    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();
    });
  });
});