double-click to elide/unelide long output

* elided output area gets grey border, so you can identify them.
* long outputs are elided by default.
* tries to scroll to bottom, but doesn't always work.

IPython/frontend/html/notebook/static/css/notebook.css

@@ -157,6 +157,7 @@ div.input_prompt {
 div.output {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
+    border-radius: 3px;
 }
 
 div.output_prompt {

IPython/frontend/html/notebook/static/js/codecell.js

@@ -576,6 +576,35 @@ var IPython = (function (IPython) {
             this.append_stream(json);
         };
         this.outputs.push(json);
+
+        this.elide_output();
+    };
+
+
+    CodeCell.prototype.elide_output = function () {
+        var that=this;
+        var outdiv = this.element.find("div.output");
+        var h = outdiv.height();
+        var hlimit = $("div#notebook").height();
+        if ((h+100) > hlimit) {
+            outdiv.height(hlimit-100);
+            outdiv.css("overflow", "scroll");
+            outdiv.css("border", "2px solid #ccc");
+            outdiv.scrollTop(h+100-hlimit);
+            outdiv.dblclick(function(){that.unelide_output()});
+        }
+    };
+
+
+    CodeCell.prototype.unelide_output = function () {
+        var that=this;
+        var outdiv = this.element.find("div.output");
+        var h = outdiv.height();
+        var hlimit = $("div#notebook").height();
+        outdiv.height("auto");
+        outdiv.css("border", "none");
+        outdiv.css("overflow", "");
+        outdiv.dblclick(function(){that.elide_output()});
     };