Added column sorting

css/master.css

@@ -225,6 +225,13 @@ table#torrent_table {
 a:hover {color: #000000;}
 .clr { clear: both; }
 
+#mass-buttons {
+  padding: 10px;
+  font-size: 1.1em;
+  color: darkRed;
+  font-weight: bold;
+}
+
 #mass-buttons a {
   border: 0;
   cursor: pointer;
@@ -240,4 +247,12 @@ a:hover {color: #000000;}
     #mass-buttons a.state.pause { background-position: 0 0; width: 16px; height: 16px; }
     #mass-buttons a.delete { background: url(/themes/standard/images/remove.png) no-repeat left top; }
     #mass-buttons a.data { background: url(/themes/standard/images/trash.png) no-repeat left top; }
-    #mass-buttons a.torrent { background: url(/themes/standard/images/database.png) no-repeat left top; }
+    #mass-buttons a.torrent { background: url(/themes/standard/images/database.png) no-repeat left top; }
+
+.sortable:hover {
+  cursor: pointer;
+}
+
+.sorted {
+    color: darkRed;
+}

js/status/status.js

@@ -19,8 +19,6 @@ jQuery(document).ready(function ($) {
     const REFRESH_INTERVAL = 2000;
     var refreshTimer = Timer(REFRESH_INTERVAL);
 
-
-
     // I can't get the popup to play nicely when there is a scroll bar and then
     // when there isn't - so going to adjust the width if a scroll bar is
     // visible (this needs to be done on timeout to give popup time to show).
@@ -434,6 +432,30 @@ jQuery(document).ready(function ($) {
         });
     }());
 
+    $(function() {
+        $('#table_header_' + localStorage.sortColumn).addClass('sorted ' + localStorage.sortMethod);
+
+        $('.sortable').click(function () {
+            var $link = $(this)
+                , column = $link.attr('rel'); 
+            // If the link clicked is different to the active one
+            // then reset the assending order and add the active class.
+            if (column === localStorage.sortColumn) {
+                // If it's the same just change the sorting order.
+                localStorage.sortMethod = localStorage.sortMethod === 'asc' ? 'desc' : 'asc';
+                $link.removeClass('asc desc').addClass(localStorage.sortMethod);
+            } else {
+                // Make sure none of the links are the active one.
+                $('.sortable').removeClass('sorted asc desc');
+                $link.addClass('sorted asc');
+
+                localStorage.sortMethod = 'asc';
+                localStorage.sortColumn = column;
+            }
+            updateTable();
+        });
+    }());
+
     /*
      * Check the status of the extension and do the handling for the popup.
      *

js/status/torrents.js

@@ -8,15 +8,54 @@ var Torrents = (function ($) {
         , globalInformation = {};
 
     function sortCallback(a, b) {
-        a = a.name;
-        b = b.name;
+        switch (localStorage.sortColumn) {
+        case 'name':
+            a = a.name;
+            b = b.name;
+            break;
+
+        case 'size':
+            a = a.size;
+            b = b.size;
+            break;
+
+        case 'progress':
+            a = a.progress;
+            b = b.progress;
+            break;
+
+        case 'speed':
+            a = a.speed;
+            b = b.speed;
+            break;
+
+        case 'eta':
+            a = a.eta;
+            b = b.eta;
+            break;
+
+        case 'position':
+            a = a.position;
+            b = b.position;
+            break;
+
+        // Sort by queue asc if nothing is already set.
+        default:
+            a = a.position;
+            b = b.position;
+            // Set them for future use.
+            localStorage.sortColumn = 'position';
+            localStorage.sortMethod = 'asc';
+            break;
+        }
 
         if (a < b) {
             return -1;
         }
         if (a > b) {
             return 1;
         }
+
         return 0;
     }