Added comments to javascript code.

website/public/js/masonry.js

@@ -1,3 +1,4 @@
+// Vertical margin between two posts.
 margin = 20;
 
 // scrolling modal taken from http://stackoverflow.com/questions/10476632/how-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen
@@ -11,9 +12,12 @@ function scrollbarMargin(width, overflow) {
     });
 }
 
+// Get post from the server.
 function requestPost(postID) {
+    // Make the modal view visible.
     $(".modal").show();
 
+    // Send get request to the server to load the post.
     $.get("API/loadPost.php", { postID : postID }).done(function(data) {
         $('.modal-default').hide();
         var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
@@ -23,11 +27,14 @@ function requestPost(postID) {
     });
 }
 
+// Create a new post.
 function postPost() {
     title = $("input.newpost[name='title']").val();
     content = $("textarea.newpost[name='content']").val();
 
+    // Masonrymode 2: when on group page and user is an admin.
     if (masonryMode == 2) {
+        // Create the new group post.
         $.post("API/postPost.php", { title: title,
                                      content : content,
                                      group : groupID })
@@ -42,6 +49,7 @@ function postPost() {
                 }
             });
     } else {
+        // Create the new user post.
         $.post("API/postPost.php", { title: title,
                                      content : content })
             .done(function(data) {
@@ -68,6 +76,7 @@ var postAmount = 0;
 var noposts = false;
 
 $(document).ready(function () {
+    // Initialise variables for masonry.
     windowWidth = $(window).width();
     columnCount = Math.floor($(".posts").width() / 250);
     columns = new Array(columnCount);
@@ -78,6 +87,7 @@ $(window).on("load", function() {
     $(".modal-close").click(function (){closeModal()});
 
     // http://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom
+    // Infinite scroll.
     window.onscroll = function(ev) {
         if($(window).scrollTop() + $(window).height() == $(document).height() ) {
             loadMorePosts(userID, groupID, postAmount, postLimit);
@@ -85,6 +95,7 @@ $(window).on("load", function() {
     };
 });
 
+// Hide modal view from the screen.
 function closeModal() {
     $(".modal").hide();
     scrollbarMargin(0, 'auto');
@@ -92,23 +103,30 @@ function closeModal() {
     $('.modal-default').show();
 }
 
+// Will fire when user resizes the window.
 $(window).resize(function() {
     clearTimeout(window.resizedFinished);
     window.resizeFinished = setTimeout(function() {
+        // Check if the width of the screen changed.
         if ($(window).width() != windowWidth) {
+            // Save width.
             windowWidth = $(window).width();
-
+            // Check if there fit more or less columns in the new width.
             if (columnCount != Math.floor($(".posts").width() / 250)) {
                 columnCount = Math.floor($(".posts").width() / 250);
+                // Respawn the masonry grid.
                 masonry(masonryMode);
             }
         }
     }, 250);
 });
 
+// Select the container for masonry.
 var $container = $(".posts");
 
+// Spawn the masonry grid.
 function masonry(mode) {
+    // save the masonry mode.
     masonryMode = mode;
     $container.children().remove();
 
@@ -116,10 +134,7 @@ function masonry(mode) {
     noposts = false;
     postAmount = 0;
 
-    /*
-     * Initialise columns.
-     */
-
+    // Initialise columns.
     for (i = 0; i < columnCount; i++) {
         $column = $("<div class=\"column\">");
         $column.width(100/columnCount + "%");
@@ -127,11 +142,13 @@ function masonry(mode) {
         columns[i] = [0, $column];
     }
 
+    // Place the form for new posts.
     if(mode > 0) {
         $postInput = $("<div class=\"post platform\">");
         $form = $("<form class=\"newpost\" action=\"API/postPost.php\" method=\"post\" onsubmit=\"postPost(); return false;\">");
         $postInput.append($form);
 
+        //Add extra input for group posts.
         if(mode == 2) {
             $form.append($("<input class=\"newpost\" type=\"hidden\" name=\"group\" value=\"" + groupID + "\">"));
         }
@@ -144,17 +161,11 @@ function masonry(mode) {
         columns[0][0] = $postInput.height() + margin;
     }
 
-    /*
-     * Function will find the column with the shortest height.
-     */
-
-
-    /*
-     * Get the posts from the server.
-     */
+    // Get the posts from the server.
     loadMorePosts(userID, groupID, 0, postLimit);
 }
 
+// Find the column with the shortest hight.
 function getShortestColumn(columns) {
     column = columns[0];
 
@@ -166,17 +177,20 @@ function getShortestColumn(columns) {
     return column;
 }
 
+// Load certain range of posts.
 function loadMorePosts(uID, gID, offset, limit) {
     if (noposts) {
         return;
     }
 
+    // Get a list of posts from the server.
     $.post("API/getPosts.php", { usr : uID,
                                  grp : gID,
                                  offset : offset,
                                  limit : limit})
         .done(function(data) {
             if (!data) {
+                // No posts were found, show noposts bar to user.
                 $('.noposts').show();
                 noposts = true;
                 return;
@@ -184,9 +198,7 @@ function loadMorePosts(uID, gID, offset, limit) {
 
             posts = JSON.parse(data);
 
-            /*
-             * Rearange the objects.
-             */
+             // Rearange the objects.
             $.each(posts, function() {
                 $post = $("<div class=\"post platform\" onclick=\"requestPost(\'"+this['postID']+"\')\">");
                 $post.append($("<h2>").html(this["title"]));