add history

public/imgurr.css

@@ -18,31 +18,36 @@
     top:25px;
 }
 
-#link {
+#history a {
     left:25px;
     text-align:center;
     width:168px;
     font-family:monospace
+    margin-bottom:15px;
 }
 
-#link,#loading {
+#history a,#loading {
     font-family:monospace;
     font-size:10px;
     padding:10px;
-    top:95px;
+    display:block;
 }
 
+
 #loading {
     font-weight:500;
     left:220px;
     min-width:95px;
+    top:95px;
 }
 
-#loading,#details,#link {
+#loading,#details,#history a {
     background:rgba(43,43,43,0.8);
     border-radius:5px;
     color:#85bf25;
-    font-family:sans-serif;
+}
+
+#history,#loading,#details {
     position:absolute;
 }
 
@@ -52,3 +57,33 @@ html,body {
     margin:0;
     padding:0;
 }
+
+#history {
+    top:95px;
+    left:25px;
+    max-height:210x;
+    overflow:hidden;
+}
+#history a {
+    margin-bottom:10px;
+    opacity:0.05;
+}
+
+#details {
+    font-family:sans-serif;
+}
+#history a:hover, #history a:nth-of-type(1) {
+    opacity:1 !important;
+}
+#history a:nth-of-type(2) {
+    opacity:0.8;
+}
+#history a:nth-of-type(3) {
+    opacity:0.6;
+}
+#history a:nth-of-type(4) {
+    opacity:0.4;
+}
+#history a:nth-of-type(5) {
+    opacity:0.2;
+}

views/imgur/imgurr.jade

@@ -9,7 +9,7 @@ html(lang='en')
       var count = 0;
       function getNewImage() {
         count += 1;
-        $('#loading').show();
+        $('#loading').fadeIn();
         $('#loading').text('Loading image ' + count + '...');
         document.title = 'random imgur (' + count + ')';
         $('#loading').fadeIn();
@@ -17,16 +17,15 @@ html(lang='en')
         $.get("/api/imgur/getRandomImage", function(d) {
           $('#image').attr('src', d.data[0]);
           $('#details').text("Fetching info...");
-          $('#link').text(d.data[0]);
-          $('#link').attr('href',d.data[0]);
+          $('<a href="' + d.data[0] + '">' + d.data[0] + '</a>').prependTo('#history').hide().slideDown();
           $.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) {
-              if(info.data[0].indexOf('undefined') == -1) {
-                $("#details").text(count + ': ' + info.data[0]);
-                $('#details').show();
-              } else {
-                $("#details").hide();
-              }
-              $('#loading').fadeOut();
+            if(info.data[0].indexOf('undefined') == -1) {
+              $("#details").text(count + ': ' + info.data[0]);
+              $('#details').show();
+            } else {
+              $("#details").hide();
+            }
+            $('#loading').fadeOut();
           }, "json");
         }, "json");
       }
@@ -35,6 +34,7 @@ html(lang='en')
   body
     div#loading Loading image 1...
     div#details Press [SPACE] to load a new image
-    a#link [SPACE] for next 
+    div#history
+      a Press [SPACE] for next 
     div#container
       img#image