Commit ae8e01e6

@@ -15,12 +15,12 @@
     <% }); %>
     <hr />
     <p><%= story %></p>
-    <a href="#/cakes/<%= id %>/photos/new" class="btn">Add Photo</a>
   </div>
 </div>
 
 <div class="row">
   <div class="span12">
+    <a id="add-photo" class="btn">Add Photo</a>
     <a href="<%= Routes.creation_photos_path(id) %>">View photos &raquo;</a>
   </div>
   <div class="span12">

@@ -0,0 +1,20 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+  <h2>This is a modal!</h2>
+</div>
+<div class="modal-body">
+  <form id="new-photo" name="photo" class="form-horizontal">
+    <fieldset>
+      <div class="control-group">
+        <label class="control-label" for="photo_attachment">Photo</label>
+        <div class="controls">
+          <input class="input-xxlarge" id="photo_attachment" name="attachment" type="file">
+        </div>
+      </div>
+    </fieldset>
+  </form>
+</div>
+<div class="modal-footer">
+  <a href="#" class="btn" data-dismiss="modal">Close</a>
+  <button id="upload-photo-button" type="submit" class="btn btn-primary">Upload Photo</button>
+</div>

@@ -3,6 +3,18 @@ Cake.Views.Cakes ||= {}
 class Cake.Views.Cakes.ShowView extends Backbone.View
   template: JST["backbone/templates/cakes/show"]
 
+  events:
+    "click #add-photo": "launchAddPhoto"
+
+  constructor: (options) ->
+    super(options)
+    @model.on('sync', @render)
+
   render: ->
     $(@el).html(@template(@model.toJSON()))
     return this
+
+  launchAddPhoto: ->
+    view = new Cake.Views.Photos.NewModalView(cake: @model)
+    $("#modal").html(view.render().el)
+    $("#modal").modal()

@@ -0,0 +1,40 @@
+Cake.Views.Photos ||= {}
+
+class Cake.Views.Photos.NewModalView extends Backbone.View
+  template: JST["backbone/templates/photos/new-modal"]
+
+  events:
+    "click #upload-photo-button": "save"
+
+  constructor: (options) ->
+    super(options)
+    @collection = new Cake.Collections.PhotosCollection(cake_id: options.cake.id)
+    @model = new @collection.model()
+    @cake = options.cake
+
+    @model.bind("change:errors", () =>
+      this.render()
+    )
+
+  save: (e) ->
+    e.preventDefault()
+    e.stopPropagation()
+
+    @model.unset("errors")
+
+    fileObject = @$(':input[type="file"]')[0].files[0]
+    @model.set('image', fileObject)
+    @model.on('progress', console.log)
+    @collection.create(@model.toJSON(),
+      success: (photo) =>
+        @model = photo
+        $('#modal').modal('hide')
+
+      error: (photo, jqXHR) =>
+        @model.set({errors: $.parseJSON(jqXHR.responseText)})
+    )
+
+  render: ->
+    $(@el).html(@template(@model.toJSON()))
+    this.$("form").backboneLink(@model)
+    return this

@@ -26,7 +26,6 @@ class Cake.Views.Photos.NewView extends Backbone.View
     @collection.create(@model.toJSON(),
       success: (photo) =>
         @model = photo
-        debugger
         window.location.hash = "/#{@model.cake_id}"
 
       error: (photo, jqXHR) =>

@@ -6,3 +6,4 @@
 
 <%= render partial: "shared/account_nav", locals: { selected: :creations } %>
 <div id="backbone-content"></div>
+<div id="modal" class="modal hide fade"></div>