<div id="view" class="table">

  <div id="threadView" class="tableCell">
    <div class="threadBox">


    </div>
    <hr/>
  </div>

  <div id="recentView" class="tableCell">
    <div id="recentTitle">
      Online Users
    </div>
    <div id="onlineUsers">
    </div>
  </div>

</div>

<script>
$( document ).ready(function() {

$.getJSON("_recentthreads", function(response) {

  var result = "";
  $.each(response, function(i, category) {
    result += "<div class=\"categoryTitle datThing\"> \
                  <div class=\"title\"><a href=\"category?id=" + category["categoryID"] + "\">" + category["categoryTitle"] + "</a></div> \
                  <div class=\"categoryDescription\">" + category["categoryDescription"] + "</div>" +
              "</div> \
              <div class=\"threadPreview table\">";

              $.each(category["recentThreads"], function(i, thread)
              {
                  result += "<div class=\"individualThreadInfo\">";
                  result += "<i class=\"fa fa-comment\" aria-hidden=\"true\"></i>";
                  result += "<span class=\"threadTitle tableCell\"><a href=\"thread?id=" + thread.id + "\">" + decodeURIComponent(thread.title) + "</a> &mdash; <a style='opacity: 0.5;' href=\"user?id=" + thread.author.id + "\">" + thread.author['username']  + "</a></span>";
                  result += "<span class=\"threadInfo tableCell\"><a class=\"themeOrange\" href=\"" + "user?id=" + thread.author['id'] + "\"></a><span class=\"light\">" + checkJustNow(thread.lastModificationString) + "</span></span>";
                  result += "<div style=\"display: table-row;\"></div>";
                  result += "</div>";
              });

              result += "</div>"
  });


      $('.threadBox').append(result);

});

$.getJSON("_stats", function(response) {
    $.each(response.onlineUsers, function(i, user) {
      $('#onlineUsers').append('<a href="user?id=' + user.id + '"><p>' + getColorForLevel(user.ranking.name, user.username) + '<p></a>');
    });
});

});

</script>