Edit title works now.

Change-Id: Iedeab4ce600425f23c3c6e84415e7f914d8c6715

server/go/camlistored/ui/pics.css

@@ -62,11 +62,11 @@ li a span {
 li input {
   text-align: right;
 }
-.camliadmin li a span:hover {
-  border: 1px outset #ccc;
-  background: #fff;
-  color: #000;
-  font-weight: normal;
-  text-decoration: none;
-}
 
+a.pics-edit,
+a.pics-edit:hover {
+  font-size: 70%;
+  color: #f00;
+  margin-right: .5em;
+  font-weight: normal;
+}

server/go/camlistored/ui/pics.js

@@ -22,60 +22,91 @@ function addColorboxen() {
   });
 }
 
+var titleInput, editLink;
 function init() {
   $(document).ready(function() {
+    // Before the images are loaded, rewrite the urls to include the square
+    // parameter.
+    $('li img').each(function() {
+      this.src = this.src + '&square=1';
+    });
+
     if (camliViewIsOwner) {
       $('body').addClass('camliadmin');
 
-      var titleInput = $(document.createElement('input'));
-      titleInput.blur(function() {
-        var spanTitle = $(this).parent().find('a span');
-        var spanText = spanTitle.text();
-        var newVal = $(this).val();
-        if (spanText != newVal) {
-          spanTitle.text(newVal);
-          var blobRef = $(this).parent().attr('id').replace(/^camli-/, '');
-          window.console.log('blobRef', blobRef);
-          camliNewSetAttributeClaim(
-            blobRef,
-            "title",
-            newVal,
-            {
-                success: function() {
-                    var elapsedMs = new Date().getTime() - startTime.getTime();
-                    setTimeout(function() {
-                        inputTitle.disabled = false;
-                        btnSaveTitle.disabled = false;
-                        buildPermanodeUi();
-                    }, Math.max(250 - elapsedMs, 0));
-                },
-                fail: function(msg) {
-                    alert(msg);
-                    inputTitle.disabled = false;
-                    btnSaveTitle.disabled = false;
-                }
-            });
-        }
-        $(this).hide();
-        spanTitle.show();
+      editLink = $(document.createElement('a'));
+      editLink.attr('#');
+      editLink.addClass('pics-edit');
+      editLink.html('edit title');
+      editLink.click(function(e) {
+        editTitle();
+        e.stopPropagation();
+        e.preventDefault();
       });
 
-      $('li a span').mouseover(function() {
-        titleInput.val($(this).text());
-        $(this).parent().after(titleInput);
-        titleInput.show();
-        titleInput.focus();
-        titleInput.select();
-        $(this).hide();
+      titleInput = $(document.createElement('input'));
+      titleInput.blur(function() {
+        saveImgTitle($(this));
+      });
+      titleInput.bind('keypress', function(e) {
+        if (e.keyCode == 13) {
+          saveImgTitle($(this));
+        }
+      });
+
+      $('li').mouseenter(function(e) {
+        $(this).find('img').after(editLink);
+        editLink.show();
+      });
+      $('li').mouseleave(function(e) {
+        editLink.hide();
       });
     }
   });
 }
 
+function editTitle() {
+  var titleSpan = editLink.next();
+  titleInput.val(titleSpan.text());
+  titleSpan.parent().after(titleInput);
+  titleInput.show();
+  titleInput.focus();
+  titleInput.select();
+  titleSpan.hide();
+  editLink.hide();
+}
+
+function saveImgTitle(titleInput) {
+  var spanTitle = titleInput.parent().find('a span');
+  var spanText = spanTitle.text();
+  var newVal = titleInput.val();
+  if (spanText != newVal) {
+    spanTitle.text(newVal);
+    var blobRef = titleInput.parent().attr('id').replace(/^camli-/, '');
+    camliNewSetAttributeClaim(
+      blobRef,
+      "title",
+      newVal,
+      {
+          success: function() {
+              titleInput.hide();
+              spanTitle.show();
+              spanTitle.effect('highlight', {}, 300);
+          },
+          fail: function(msg) {
+              alert(msg);
+          }
+      });
+  }
+  titleInput.hide();
+  spanTitle.show();
+}
+
 // Installs jQuery and the colorbox library along with an onload listener
 // to fire the init function above.
 if (typeof window['jQuery'] == 'undefined') {
   document.write('<link media="screen" rel="stylesheet" href="//colorpowered.com/colorbox/core/example1/colorbox.css">');
-  document.write('<scr'+'ipt  src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" onload="init()"></sc'+'ript>');
+  document.write('<scr'+'ipt  src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" onload="init()"></sc'+'ript>');
+  document.write('<scr'+'ipt  src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></sc'+'ript>');
   document.write('<scr'+'ipt  src="//colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js" onload="addColorboxen()"></sc'+'ript>');
 }