Add support for creating new notes

app/assets/javascripts/notes.js.erb

@@ -1,4 +1,4 @@
-function addNoteLayer(map, notesUrl, newNoteControls, minZoom) {
+function addNoteLayer(map, notesUrl, newNoteControls, newNoteForm, minZoom) {
   var newNotes;
 
   var noteCallback = function (scope, response) {
@@ -22,17 +22,69 @@ function addNoteLayer(map, notesUrl, newNoteControls, minZoom) {
   var noteSelected = function (o) {
     var feature = o.feature;
     var location = feature.geometry.getBounds().getCenterLonLat();
+    var content;
+    var close;
+
+    if (feature.attributes.status === "new") {
+      var form = newNoteForm.clone();
+      form.removeClass("hidden");
+      content = form.html();
+      close = false;
+    } else {
+      content = "<p>" + feature.attributes.id + "</p>";
+      close = true;
+    };
 
     feature.popup = new OpenLayers.Popup.FramedCloud(
-      feature.attributes.id, location, null,
+      feature.attributes.id, location, null, content, null, close,
-      "<p>" + feature.attributes.id + "</p>",
-      null, 
-      feature.attributes.status !== "new",
       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();
   };
 
   var noteUnselected = function (o) {

app/views/notes/_new.html.erb

@@ -0,0 +1,12 @@
+<p>
+  Move the marker to the correct position and<br/>
+  describe the problem in the box below:
+</p>
+<%= form_tag notes_path do %>
+  <%= hidden_field_tag "lon" %>
+  <%= hidden_field_tag "lat" %>
+  <%= text_area_tag "comment", "", :cols => 40, :rows => 10 %>
+  <br/>
+  <%= submit_tag "Submit", :id => "note-submit" %>
+  <%= submit_tag "Cancel", :id => "note-cancel" %>
+<% end %>

app/views/site/index.html.erb

@@ -45,6 +45,8 @@
   </table>
 </div>
 
+<div id="new-note" class="hidden"><%= render :partial => "notes/new" %></div>
+
 <script type="text/javascript">
   var marker;
   var map;
@@ -64,7 +66,7 @@
       });
       map.addLayer(map.dataLayer);
 
-      map.noteLayer = addNoteLayer(map, "<%= notes_url :format => 'json' %>", $("#createnoteanchor"), 11);
+      map.noteLayer = addNoteLayer(map, "<%= notes_url :format => 'json' %>", $("#createnoteanchor"), $("#new-note"), 11);
 
       <% if params[:notes] == "yes" -%>
       map.noteLayer.setVisibility(true);