photo description with ajax request

app/views/photos/edit.html.haml

@@ -16,6 +16,7 @@
   = form_for @photo do |p|
     = p.text_field :caption, :value => @photo.caption
     = p.submit
+  %div{:class => 'clear'}
 
   #content_bottom
     .back

app/views/photos/show.html.haml

@@ -19,16 +19,44 @@
     }
   });
 
-  //asign a flag to determine if textarea has focus
   $(document).ready(function(){
+    //add a clas to verify if a textarea has focus
     $("textarea").live('focus',function(){
       $(this).addClass("hasfocus");
     });
     $("textarea").live('blur',function(){
       $(this).removeClass("hasfocus");
     });
+
+    //show form to add description
+    $(".edit-desc").click(function(){
+      $(".edit_photo").toggle(); 
+      //$(".caption").toggle();
     });
 
+    //Add a description with ajax request
+    $("#photo_submit").click(function(evenet){
+      event.preventDefault();
+      var method = $(".edit_photo").attr("method");
+      var url = $(".edit_photo").attr("action");
+      var data = $(".edit_photo").serialize();
+      $(".description").text($("#photo_caption").val());
+      //$(".caption").toggle();
+      $(".edit_photo").toggle();
+
+        $.ajax({  
+          type: method,
+          url: url,  
+          data: data,  
+          success: function(response){  
+            $("#add-description").remove();
+          }
+        });
+
+    });
+
+  });//end document ready
+
 = content_for :page_title do
   = link_to "◂ #{@photo.album.name}", @photo.album
 
@@ -54,8 +82,22 @@
   #show_photo
     = linked_scaled_photo @photo, @album
     .caption
+      -if current_user.owns? @album
+        -if @photo.caption and @photo.caption != ""
+          = link_to 'Edit','javascript:void(0)', :id => "edit-desc", :class => "edit-desc"
+      .description
         = @photo.caption
 
+    -if current_user.owns? @album
+      %div{:class => 'clear'}
+      -if !@photo.caption or @photo.caption == ""
+        = link_to 'Add a description','javascript:void(0)', :id => "add-description", :class => "edit-desc"
+
+    = form_for @photo do |p|
+      = p.text_field :caption, :value => @photo.caption
+      = p.submit
+      %div{:class => 'clear'}
+
   #content_bottom
     .back
       = link_to "⇧ #{@album.name}", album_path(@album)

public/stylesheets/application.css

@@ -610,6 +610,25 @@ h1.big_text {
 
 #fancybox-close:hover {
   background-color: transparent; }
+.edit_photo{
+  display:none;}
 #photo_caption{
+  width:100%;
   margin:auto;}
-
+.caption .description{
+  text-align:left;
+  margin-left:3em;
+  display:block
+  width:90%;}
+.caption a{
+  float:left;
+}
+#add-description{
+  width:100%;}
+.caption, .edit_photo{
+  margin:auto;
+  width:70%;}
+#photo_submit{
+  float:right;}
+.clear{
+  clear:both;}