!!! 5
html(lang='en')
  head 
    meta(charset='utf-8')
    script(type="text/javascript", src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
    link(rel="stylesheet", href="/imgurr.css")
    title random imgur
    script
      var count = 0;
      function getNewImage() {
        count += 1;
        $('#loading').fadeIn();
        $('#loading').text('Loading image ' + count + '...');
        document.title = 'random imgur (' + count + ')';
        $('#loading').fadeIn();
        $('#image').load(function(){});
        $.get("/api/imgur/getRandomImage", function(d) {
          $('#image').attr('src', d.data[0]);
          $('#details').text("Fetching info...");
          $('<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();
          }, "json");
        }, "json");
      }
      $(getNewImage());
      $(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) });
  body
    div#loading Loading image 1...
    div#details Press [SPACE] to load a new image
    div#history
      a Press [SPACE] for next 
    div#container
      img#image