formatting and semantics

_layouts/post.html

@@ -4,7 +4,53 @@ layout: default
 {% if page.category == 'releases' %}
 
 {% include header.html %}
+<script type="text/javascript">
 
+  function generateRandomPosts()
+  {
+      $.getJSON("/posts.json", function(data) {
+          console.log("[posts.json loaded for random posts]");
+
+          var postsCount = data.length;
+          var posts = data;
+
+          var randomIndexUsed = [];
+          var counter = 0;
+          var numberOfPosts = 1;
+
+          var divRandomPosts = $("#random_posts");
+
+          while (counter < numberOfPosts)
+          {
+              var randomIndex = Math.floor(Math.random() * postsCount);
+
+              if (randomIndexUsed.indexOf(randomIndex) == "-1")
+              {
+                  var postHREF = posts[randomIndex].href;
+                  var postTitle = posts[randomIndex].title;
+
+                  if (counter == (numberOfPosts - 1))
+                  {
+                      divRandomPosts.append('<a class="button" href="' + postHREF + '">🔥</a>');
+                  }
+                  else
+                  {
+                      divRandomPosts.append('<a class="button" href="' + postHREF + '">🔥</a>');
+                  }
+
+                  randomIndexUsed.push(randomIndex);
+
+                  counter++;
+              }
+          }
+      });
+  }
+
+  $(document).ready(function() {
+      generateRandomPosts();
+  });
+
+</script>
 <section id="play">
  <div class="album-player">
 
@@ -111,9 +157,11 @@ layout: default
     </div>
     {% endif %}
     <p class="right" id="npTitle" style="font-weight: bold;"></p>
-    <p class="left" id="npAction">Paused...</p>
-  </div>
 
+    <p id="npTitle" style="font-weight: bold;"></p>
+    <div id="random_posts" style="margin-right: 40px;"></div>
+  </div>
+    
 </div>
 
 {% if onetracker > 1 %}