improve imgur module

* Added config.json to the party
* Moved API key (client ID) to the configuration file
* Added image link to random imgur image page
* Minimised loading message
* Added fade to loading message
* Added count to title attribute of webpage
* Removed font-size increase
* Added placeholders

modules/imgur/config.json

@@ -0,0 +1,5 @@
+{
+   "imagelength": 5,
+   "nsfwwarn": true,
+   "apikey": "xxxxxxxxx"
+}

modules/imgur/imgur.js

@@ -65,7 +65,7 @@ var imgur = function(dbot) {
                 'url': 'https://api.imgur.com/3/image/' + slug + '.json',
                 'json': true,
                 'headers': {
-                    'Authorization': 'Client-ID 86fd3a8da348b65'
+                    'Authorization': 'Client-ID ' + dbot.config.imgur.apikey
                 }
             }, function(err, response, body) {
                 callback(body);

public/imgurr.css

@@ -1,41 +1,53 @@
 #container {
-  text-align:center;
+    text-align:center;
 }
 
 #container,#image {
-  margin:0;
+    margin:0;
-  max-height:100%;
+    max-height:100%;
-  padding:0;
+    padding:0;
-}
-
-#loading, #details{
-  background:rgba(43,43,43,0.8);
-  color:#85bf25;
-  font-family:sans-serif;
-  font-weight:700;
-  padding:20px;
-  position:absolute;
-  top:50px;
 }
 
 #details {
-    right:0;
-    text-align:right;
-    border-bottom-left-radius:5px;
-    border-top-left-radius:5px
     display:none;
+    font-weight:700;
+    left:25px;
+    min-width:280px;
+    padding:20px;
+    text-align:center;
+    top:25px;
+}
+
+#link {
+    left:25px;
+    text-align:center;
+    width:168px;
+}
+
+#link,#loading {
+    font-family:monospace;
+    font-size:10px;
+    padding:10px;
+    top:95px;
 }
 
 #loading {
-    left:0;
+    font-weight:500;
-    font-size:12px;
+    left:220px;
-    border-bottom-right-radius:5px;
+    min-width:95px;
-    border-top-right-radius:5px;
+}
+
+#loading,#details,#link {
+    background:rgba(43,43,43,0.8);
+    border-radius:5px;
+    color:#85bf25;
+    font-family:sans-serif;
+    position:absolute;
 }
 
 html,body {
-  background-color:#121211;
+    background-color:#121211;
-  height:100%;
+    height:100%;
-  margin:0;
+    margin:0;
-  padding:0;
+    padding:0;
 }

views/imgur/imgurr.jade

@@ -9,24 +9,27 @@ html(lang='en')
       var count = 0;
       function getNewImage() {
         count += 1;
-        $('#details').hide();
         $('#loading').text('Loading image ' + count + '...');
-        $('#loading').css('font-size', ((count * 0.03) + 12));
+        document.title = 'random imgur (' + count + ')';
-        $('#loading').show();
+        $('#loading').fadeIn();
         $('#image').load(function(){});
         $.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]);
           $.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) {
               $("#details").text(count + ': ' + info.data[0]);
               $('#details').show();
-              $('#loading').hide();
+              $('#loading').fadeOut();
           }, "json");
         }, "json");
       }
       $(getNewImage());
       $(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) });
   body
-    div#loading Loading Image
+    div#loading Loading image 1...
     div#details Press [SPACE] to load a new image
+    a#link [SPACE] for next 
     div#container
       img#image