removing js refrences from index.html

UI/.idea/runConfigurations/Debug___Chrome.xml

@@ -3,22 +3,22 @@
     <JSRemoteDebuggerConfigurationSettings>
       <option name="engineId" value="chrome" />
       <option name="fileUrl" value="http://localhost:8989" />
-      <mapping local-file="$PROJECT_DIR$/Calendar" url="http://localhost:8989/Calendar" />
-      <mapping local-file="$PROJECT_DIR$/MainMenuView.js" url="http://localhost:8989/MainMenuView.js" />
-      <mapping local-file="$PROJECT_DIR$/Settings" url="http://localhost:8989/Settings" />
-      <mapping local-file="$PROJECT_DIR$/Upcoming" url="http://localhost:8989/Upcoming" />
-      <mapping local-file="$PROJECT_DIR$/app.js" url="http://localhost:8989/app.js" />
-      <mapping local-file="$PROJECT_DIR$/Mixins" url="http://localhost:8989/Mixins" />
-      <mapping local-file="$PROJECT_DIR$/Missing" url="http://localhost:8989/Missing" />
-      <mapping local-file="$PROJECT_DIR$/Quality" url="http://localhost:8989/Quality" />
-      <mapping local-file="$PROJECT_DIR$/Config.js" url="http://localhost:8989/Config.js" />
-      <mapping local-file="$PROJECT_DIR$/Shared" url="http://localhost:8989/Shared" />
-      <mapping local-file="$PROJECT_DIR$/AddSeries" url="http://localhost:8989/AddSeries" />
-      <mapping local-file="$PROJECT_DIR$/HeaderView.js" url="http://localhost:8989/HeaderView.js" />
-      <mapping local-file="$PROJECT_DIR$" url="http://localhost:8989" />
-      <mapping local-file="$PROJECT_DIR$/Routing.js" url="http://localhost:8989/Routing.js" />
-      <mapping local-file="$PROJECT_DIR$/Controller.js" url="http://localhost:8989/Controller.js" />
-      <mapping local-file="$PROJECT_DIR$/Series" url="http://localhost:8989/Series" />
+      <mapping url="http://localhost:8989/Calendar" local-file="$PROJECT_DIR$/Calendar" />
+      <mapping url="http://localhost:8989/MainMenuView.js" local-file="$PROJECT_DIR$/MainMenuView.js" />
+      <mapping url="http://localhost:8989/Settings" local-file="$PROJECT_DIR$/Settings" />
+      <mapping url="http://localhost:8989/Upcoming" local-file="$PROJECT_DIR$/Upcoming" />
+      <mapping url="http://localhost:8989/app.js" local-file="$PROJECT_DIR$/app.js" />
+      <mapping url="http://localhost:8989/Mixins" local-file="$PROJECT_DIR$/Mixins" />
+      <mapping url="http://localhost:8989/Missing" local-file="$PROJECT_DIR$/Missing" />
+      <mapping url="http://localhost:8989/Quality" local-file="$PROJECT_DIR$/Quality" />
+      <mapping url="http://localhost:8989/Config.js" local-file="$PROJECT_DIR$/Config.js" />
+      <mapping url="http://localhost:8989/Shared" local-file="$PROJECT_DIR$/Shared" />
+      <mapping url="http://localhost:8989/AddSeries" local-file="$PROJECT_DIR$/AddSeries" />
+      <mapping url="http://localhost:8989/HeaderView.js" local-file="$PROJECT_DIR$/HeaderView.js" />
+      <mapping url="http://localhost:8989" local-file="$PROJECT_DIR$" />
+      <mapping url="http://localhost:8989/Routing.js" local-file="$PROJECT_DIR$/Routing.js" />
+      <mapping url="http://localhost:8989/Controller.js" local-file="$PROJECT_DIR$/Controller.js" />
+      <mapping url="http://localhost:8989/Series" local-file="$PROJECT_DIR$/Series" />
     </JSRemoteDebuggerConfigurationSettings>
     <RunnerSettings RunnerId="JavascriptDebugRunner" />
     <ConfigurationWrapper RunnerId="JavascriptDebugRunner" />

UI/.idea/runConfigurations/Debug___Firefox.xml

@@ -3,22 +3,22 @@
     <JSRemoteDebuggerConfigurationSettings>
       <option name="engineId" value="firefox" />
       <option name="fileUrl" value="http://localhost:8989" />
-      <mapping local-file="$PROJECT_DIR$/Calendar" url="http://localhost:8989/Calendar" />
-      <mapping local-file="$PROJECT_DIR$/MainMenuView.js" url="http://localhost:8989/MainMenuView.js" />
-      <mapping local-file="$PROJECT_DIR$/Settings" url="http://localhost:8989/Settings" />
-      <mapping local-file="$PROJECT_DIR$/Upcoming" url="http://localhost:8989/Upcoming" />
-      <mapping local-file="$PROJECT_DIR$/app.js" url="http://localhost:8989/app.js" />
-      <mapping local-file="$PROJECT_DIR$/Mixins" url="http://localhost:8989/Mixins" />
-      <mapping local-file="$PROJECT_DIR$/Missing" url="http://localhost:8989/Missing" />
-      <mapping local-file="$PROJECT_DIR$/Config.js" url="http://localhost:8989/Config.js" />
-      <mapping local-file="$PROJECT_DIR$/Quality" url="http://localhost:8989/Quality" />
-      <mapping local-file="$PROJECT_DIR$/AddSeries" url="http://localhost:8989/AddSeries" />
-      <mapping local-file="$PROJECT_DIR$/Shared" url="http://localhost:8989/Shared" />
-      <mapping local-file="$PROJECT_DIR$/HeaderView.js" url="http://localhost:8989/HeaderView.js" />
-      <mapping local-file="$PROJECT_DIR$" url="http://localhost:8989" />
-      <mapping local-file="$PROJECT_DIR$/Routing.js" url="http://localhost:8989/Routing.js" />
-      <mapping local-file="$PROJECT_DIR$/Controller.js" url="http://localhost:8989/Controller.js" />
-      <mapping local-file="$PROJECT_DIR$/Series" url="http://localhost:8989/Series" />
+      <mapping url="http://localhost:8989/Calendar" local-file="$PROJECT_DIR$/Calendar" />
+      <mapping url="http://localhost:8989/MainMenuView.js" local-file="$PROJECT_DIR$/MainMenuView.js" />
+      <mapping url="http://localhost:8989/Settings" local-file="$PROJECT_DIR$/Settings" />
+      <mapping url="http://localhost:8989/Upcoming" local-file="$PROJECT_DIR$/Upcoming" />
+      <mapping url="http://localhost:8989/app.js" local-file="$PROJECT_DIR$/app.js" />
+      <mapping url="http://localhost:8989/Mixins" local-file="$PROJECT_DIR$/Mixins" />
+      <mapping url="http://localhost:8989/Missing" local-file="$PROJECT_DIR$/Missing" />
+      <mapping url="http://localhost:8989/Config.js" local-file="$PROJECT_DIR$/Config.js" />
+      <mapping url="http://localhost:8989/Quality" local-file="$PROJECT_DIR$/Quality" />
+      <mapping url="http://localhost:8989/AddSeries" local-file="$PROJECT_DIR$/AddSeries" />
+      <mapping url="http://localhost:8989/Shared" local-file="$PROJECT_DIR$/Shared" />
+      <mapping url="http://localhost:8989/HeaderView.js" local-file="$PROJECT_DIR$/HeaderView.js" />
+      <mapping url="http://localhost:8989" local-file="$PROJECT_DIR$" />
+      <mapping url="http://localhost:8989/Routing.js" local-file="$PROJECT_DIR$/Routing.js" />
+      <mapping url="http://localhost:8989/Controller.js" local-file="$PROJECT_DIR$/Controller.js" />
+      <mapping url="http://localhost:8989/Series" local-file="$PROJECT_DIR$/Series" />
     </JSRemoteDebuggerConfigurationSettings>
     <RunnerSettings RunnerId="JavascriptDebugRunner" />
     <ConfigurationWrapper RunnerId="JavascriptDebugRunner" />

UI/Cells/AirDateCell.js

@@ -1,5 +1,5 @@
 "use strict";
-define(['app', 'Shared/FormatHelpers'], function () {
+define(['app', 'Shared/FormatHelpers','backgrid'], function () {
     NzbDrone.Cells.AirDateCell = Backgrid.Cell.extend({
         className: "air-date-cell",
 

UI/History/HistoryLayout.js

@@ -10,6 +10,8 @@ define([
     'Cells/EpisodeTitleCell',
     'Cells/QualityCell',
     'Shared/Toolbar/ToolbarLayout',
+    'Shared/Grid/Pager',
+    'Shared/Grid/HeaderCell',
     'Shared/LoadingView'
 ],
     function () {
@@ -67,7 +69,7 @@ define([
                         className : 'table table-hover'
                     }));
 
-                this.pager.show(new Backgrid.NzbDronePaginator({
+                this.pager.show(new NzbDrone.Shared.Grid.Pager({
                     columns   : this.columns,
                     collection: this.historyCollection
                 }));

UI/Index.html

@@ -93,9 +93,8 @@
 <script src="/JsLibraries/backbone.marionette.js"></script>
 <script src="/JsLibraries/backbone.pageable.js"></script>
 <script src="/JsLibraries/lunr.js"></script>
-<script src="/JsLibraries/backbone.backgrid.js"></script>
-<script src="/JsLibraries/backbone.backgrid.paginator.js"></script>
-<script src="/JsLibraries/backbone.backgrid.filter.js"></script>
+<!--<script src="/JsLibraries/backbone.backgrid.js"></script>
+<script src="/JsLibraries/backbone.backgrid.filter.js"></script>-->
 <script src="/JsLibraries/jquery.backstretch.js"></script>
 <script src="/JsLibraries/sugar.js"></script>
 <script src="/JsLibraries/fullcalendar.js"></script>
@@ -106,7 +105,6 @@
 <script src="/Mixins/backbone.marionette.region.mixin.js"></script>
 <script src="/Mixins/backbone.ajax.js"></script>
 <script src="/Mixins/backbone.modelbinder.mixin.js"></script>
-<script src="/Mixins/backbone.backgrid.mixin.js"></script>
 <script src="/Mixins/backbone.signalr.mixin.js"></script>
 
 <script data-main="/app" src="/JsLibraries/require.js"></script>

UI/Logs/Layout.js

@@ -2,7 +2,8 @@
 define([
     'app',
     'Logs/Collection',
-    'Shared/Toolbar/ToolbarLayout'
+    'Shared/Toolbar/ToolbarLayout',
+    'Shared/Grid/Pager'
 ],
     function () {
         NzbDrone.Logs.Layout = Backbone.Marionette.Layout.extend({
@@ -50,7 +51,7 @@ define([
                         className : 'table table-hover'
                     }));
 
-                this.pager.show(new Backgrid.NzbDronePaginator({
+                this.pager.show(new NzbDrone.Shared.Grid.Pager({
                     columns   : this.columns,
                     collection: this.collection
                 }));

UI/Missing/MissingLayout.js

@@ -10,6 +10,7 @@ define([
     'Cells/EpisodeNumberCell',
     'Cells/EpisodeTitleCell',
     'Cells/AirDateCell',
+    'Shared/Grid/Pager',
     'Shared/LoadingView'
 ],
     function () {
@@ -57,7 +58,7 @@ define([
                         className : 'table table-hover'
                     }));
 
-                this.pager.show(new Backgrid.NzbDronePaginator({
+                this.pager.show(new NzbDrone.Shared.Grid.Pager({
                     columns   : this.columns,
                     collection: this.missingCollection
                 }));

UI/Mixins/backbone.Backgrid.mixin.js

@@ -1,243 +0,0 @@
-"use strict";
-
-Backgrid.Column.prototype.defaults = {
-    name      : undefined,
-    label     : undefined,
-    sortable  : true,
-    editable  : false,
-    renderable: true,
-    formatter : undefined,
-    cell      : undefined,
-    headerCell: 'nzbDrone'
-};
-
-
-Backgrid.NzbDroneHeaderCell = Backgrid.HeaderCell.extend({
-    events: {
-        'click': 'onClick'
-    },
-
-    render: function () {
-        this.$el.empty();
-        this.$el.append(this.column.get("label"));
-
-        if (this.column.get('sortable')) {
-            this.$el.addClass('clickable');
-            this.$el.append(" <i class='pull-right'></i>");
-
-            if (this.collection.state) {
-                var sortKey = this.collection.state.sortKey;
-                var sortDir = this._convertIntToDirection(this.collection.state.order);
-
-                if (sortKey === this.column.get('name')) {
-                    this.$el.children('i').addClass(this._convertDirectionToIcon(sortDir));
-                    this._direction = sortDir;
-                }
-            }
-        }
-        this.delegateEvents();
-        return this;
-    },
-
-    direction: function (dir) {
-        if (arguments.length) {
-            if (this._direction) {
-                this.$el.children('i').removeClass(this._convertDirectionToIcon(this._direction));
-            }
-            if (dir) {
-                this.$el.children('i').addClass(this._convertDirectionToIcon(dir));
-            }
-            this._direction = dir;
-        }
-
-        return this._direction;
-    },
-
-    onClick: function (e) {
-        e.preventDefault();
-
-        var columnName = this.column.get("name");
-
-        if (this.column.get("sortable")) {
-            if (this.direction() === "ascending") {
-                this.sort(columnName, "descending", function (left, right) {
-                    var leftVal = left.get(columnName);
-                    var rightVal = right.get(columnName);
-                    if (leftVal === rightVal) {
-                        return 0;
-                    }
-                    else if (leftVal > rightVal) {
-                        return -1;
-                    }
-                    return 1;
-                });
-            }
-            else {
-                this.sort(columnName, "ascending", function (left, right) {
-                    var leftVal = left.get(columnName);
-                    var rightVal = right.get(columnName);
-                    if (leftVal === rightVal) {
-                        return 0;
-                    }
-                    else if (leftVal < rightVal) {
-                        return -1;
-                    }
-                    return 1;
-                });
-            }
-        }
-    },
-
-    _convertDirectionToIcon: function (dir) {
-        if (dir === 'ascending') {
-            return 'icon-sort-up';
-        }
-
-        return 'icon-sort-down';
-    },
-
-    _convertIntToDirection: function (dir) {
-        if (dir === '-1') {
-            return 'ascending';
-        }
-
-        return 'descending';
-    }
-});
-
-Backgrid.NzbDronePaginator = Backgrid.Extension.Paginator.extend({
-
-    template: 'Shared/BackgridPaginatorTemplate',
-
-    events: {
-        "click .pager-btn": "changePage"
-    },
-
-    windowSize: 1,
-
-    fastForwardHandleLabels: {
-        first: 'icon-fast-backward',
-        prev : 'icon-backward',
-        next : 'icon-forward',
-        last : 'icon-fast-forward'
-    },
-
-    changePage: function (e) {
-        e.preventDefault();
-
-        var target = $(e.target);
-
-        if (target.closest('li').hasClass('disabled')) {
-            return;
-        }
-
-        var label = target.attr('data-action');
-        var ffLabels = this.fastForwardHandleLabels;
-
-        var collection = this.collection;
-
-        if (ffLabels) {
-            switch (label) {
-                case 'first':
-                    collection.getFirstPage();
-                    return;
-                case 'prev':
-                    if (collection.hasPrevious()) {
-                        collection.getPreviousPage();
-                    }
-                    return;
-                case 'next':
-                    if (collection.hasNext()) {
-                        collection.getNextPage();
-                    }
-                    return;
-                case 'last':
-                    collection.getLastPage();
-                    return;
-            }
-        }
-
-        var state = collection.state;
-        var pageIndex = $(e.target).text() * 1;
-        collection.getPage(state.firstPage === 0 ? pageIndex - 1 :pageIndex);
-    },
-
-    makeHandles: function () {
-
-        var handles = [];
-        var collection = this.collection;
-        var state = collection.state;
-
-        // convert all indices to 0-based here
-        var firstPage = state.firstPage;
-        var lastPage = +state.lastPage;
-        lastPage = Math.max(0, firstPage ? lastPage - 1 : lastPage);
-        var currentPage = Math.max(state.currentPage, state.firstPage);
-        currentPage = firstPage ? currentPage - 1 : currentPage;
-        var windowStart = Math.floor(currentPage / this.windowSize) * this.windowSize;
-        var windowEnd = Math.min(lastPage + 1, windowStart + this.windowSize);
-
-        if (collection.mode !== "infinite") {
-            for (var i = windowStart; i < windowEnd; i++) {
-                handles.push({
-                    label: i + 1,
-                    title: "No. " + (i + 1),
-                    className: currentPage === i ? "active" : undefined,
-                    pageNumber: i + 1
-                });
-            }
-        }
-
-        var ffLabels = this.fastForwardHandleLabels;
-        if (ffLabels) {
-
-            if (ffLabels.prev) {
-                handles.unshift({
-                    label: ffLabels.prev,
-                    className: collection.hasPrevious() ? void 0 : "disabled",
-                    action: 'prev'
-                });
-            }
-
-            if (ffLabels.first) {
-                handles.unshift({
-                    label: ffLabels.first,
-                    className: collection.hasPrevious() ? void 0 : "disabled",
-                    action: 'first'
-                });
-            }
-
-            if (ffLabels.next) {
-                handles.push({
-                    label: ffLabels.next,
-                    className: collection.hasNext() ? void 0 : "disabled",
-                    action: 'next'
-                });
-            }
-
-            if (ffLabels.last) {
-                handles.push({
-                    label: ffLabels.last,
-                    className: collection.hasNext() ? void 0 : "disabled",
-                    action: 'last'
-                });
-            }
-        }
-
-        return handles;
-    },
-
-    render: function () {
-        this.$el.empty();
-
-        var templateFunction = Marionette.TemplateCache.get(this.template);
-
-        this.$el.html(templateFunction({
-            handles: this.makeHandles()
-        }));
-
-        this.delegateEvents();
-
-        return this;
-    }
-});

UI/Release/ApprovalStatusCell.js

@@ -1,19 +1,22 @@
 "use strict";
-NzbDrone.Release.ApprovalStatusCell = Backgrid.Cell.extend({
 
-    className: "approval-status-cell",
+require(['app', 'backgrid'], function () {
+    NzbDrone.Release.ApprovalStatusCell = Backgrid.Cell.extend({
 
-    render: function () {
-        var rejections = this.model.get(this.column.get("name"));
+        className: "approval-status-cell",
 
-        var result = '';
+        render: function () {
+            var rejections = this.model.get(this.column.get("name"));
 
-        _.each(rejections, function (reason) {
-            result += reason + ' ';
-        });
+            var result = '';
 
-        this.$el.html(result);
-        this.delegateEvents();
-        return this;
-    }
+            _.each(rejections, function (reason) {
+                result += reason + ' ';
+            });
+
+            this.$el.html(result);
+            this.delegateEvents();
+            return this;
+        }
+    });
 });

UI/Shared/Grid/HeaderCell.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Backgrid.Column.prototype.defaults = {
+    name      : undefined,
+    label     : undefined,
+    sortable  : true,
+    editable  : false,
+    renderable: true,
+    formatter : undefined,
+    cell      : undefined,
+    headerCell: 'nzbDrone'
+};
+
+
+Backgrid.NzbDroneHeaderCell = Backgrid.HeaderCell.extend({
+    events: {
+        'click': 'onClick'
+    },
+
+    render: function () {
+        this.$el.empty();
+        this.$el.append(this.column.get("label"));
+
+        if (this.column.get('sortable')) {
+            this.$el.addClass('clickable');
+            this.$el.append(" <i class='pull-right'></i>");
+
+            if (this.collection.state) {
+                var sortKey = this.collection.state.sortKey;
+                var sortDir = this._convertIntToDirection(this.collection.state.order);
+
+                if (sortKey === this.column.get('name')) {
+                    this.$el.children('i').addClass(this._convertDirectionToIcon(sortDir));
+                    this._direction = sortDir;
+                }
+            }
+        }
+        this.delegateEvents();
+        return this;
+    },
+
+    direction: function (dir) {
+        if (arguments.length) {
+            if (this._direction) {
+                this.$el.children('i').removeClass(this._convertDirectionToIcon(this._direction));
+            }
+            if (dir) {
+                this.$el.children('i').addClass(this._convertDirectionToIcon(dir));
+            }
+            this._direction = dir;
+        }
+
+        return this._direction;
+    },
+
+    onClick: function (e) {
+        e.preventDefault();
+
+        var columnName = this.column.get("name");
+
+        if (this.column.get("sortable")) {
+            if (this.direction() === "ascending") {
+                this.sort(columnName, "descending", function (left, right) {
+                    var leftVal = left.get(columnName);
+                    var rightVal = right.get(columnName);
+                    if (leftVal === rightVal) {
+                        return 0;
+                    }
+                    else if (leftVal > rightVal) {
+                        return -1;
+                    }
+                    return 1;
+                });
+            }
+            else {
+                this.sort(columnName, "ascending", function (left, right) {
+                    var leftVal = left.get(columnName);
+                    var rightVal = right.get(columnName);
+                    if (leftVal === rightVal) {
+                        return 0;
+                    }
+                    else if (leftVal < rightVal) {
+                        return -1;
+                    }
+                    return 1;
+                });
+            }
+        }
+    },
+
+    _convertDirectionToIcon: function (dir) {
+        if (dir === 'ascending') {
+            return 'icon-sort-up';
+        }
+
+        return 'icon-sort-down';
+    },
+
+    _convertIntToDirection: function (dir) {
+        if (dir === '-1') {
+            return 'ascending';
+        }
+
+        return 'descending';
+    }
+});

UI/Shared/Grid/Pager.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Backgrid.Column.prototype.defaults = {
+    name      : undefined,
+    label     : undefined,
+    sortable  : true,
+    editable  : false,
+    renderable: true,
+    formatter : undefined,
+    cell      : undefined,
+    headerCell: 'nzbDrone'
+};
+
+
+define([
+    'app',
+    'JsLibraries/backbone.backgrid.paginator'
+], function () {
+
+    NzbDrone.Shared.Grid.Pager = Backgrid.Extension.Paginator.extend({
+
+        template: 'Shared/Grid/PagerTemplate',
+
+        events: {
+            "click .pager-btn": "changePage"
+        },
+
+        windowSize: 1,
+
+        fastForwardHandleLabels: {
+            first: 'icon-fast-backward',
+            prev : 'icon-backward',
+            next : 'icon-forward',
+            last : 'icon-fast-forward'
+        },
+
+        changePage: function (e) {
+            e.preventDefault();
+
+            var target = $(e.target);
+
+            if (target.closest('li').hasClass('disabled')) {
+                return;
+            }
+
+            var label = target.attr('data-action');
+            var ffLabels = this.fastForwardHandleLabels;
+
+            var collection = this.collection;
+
+            if (ffLabels) {
+                switch (label) {
+                    case 'first':
+                        collection.getFirstPage();
+                        return;
+                    case 'prev':
+                        if (collection.hasPrevious()) {
+                            collection.getPreviousPage();
+                        }
+                        return;
+                    case 'next':
+                        if (collection.hasNext()) {
+                            collection.getNextPage();
+                        }
+                        return;
+                    case 'last':
+                        collection.getLastPage();
+                        return;
+                }
+            }
+
+            var state = collection.state;
+            var pageIndex = $(e.target).text() * 1;
+            collection.getPage(state.firstPage === 0 ? pageIndex - 1 :pageIndex);
+        },
+
+        makeHandles: function () {
+
+            var handles = [];
+            var collection = this.collection;
+            var state = collection.state;
+
+            // convert all indices to 0-based here
+            var firstPage = state.firstPage;
+            var lastPage = +state.lastPage;
+            lastPage = Math.max(0, firstPage ? lastPage - 1 :lastPage);
+            var currentPage = Math.max(state.currentPage, state.firstPage);
+            currentPage = firstPage ? currentPage - 1 :currentPage;
+            var windowStart = Math.floor(currentPage / this.windowSize) * this.windowSize;
+            var windowEnd = Math.min(lastPage + 1, windowStart + this.windowSize);
+
+            if (collection.mode !== "infinite") {
+                for (var i = windowStart; i < windowEnd; i++) {
+                    handles.push({
+                        label     : i + 1,
+                        title     : "No. " + (i + 1),
+                        className : currentPage === i ? "active" :undefined,
+                        pageNumber: i + 1
+                    });
+                }
+            }
+
+            var ffLabels = this.fastForwardHandleLabels;
+            if (ffLabels) {
+
+                if (ffLabels.prev) {
+                    handles.unshift({
+                        label    : ffLabels.prev,
+                        className: collection.hasPrevious() ? void 0 :"disabled",
+                        action   : 'prev'
+                    });
+                }
+
+                if (ffLabels.first) {
+                    handles.unshift({
+                        label    : ffLabels.first,
+                        className: collection.hasPrevious() ? void 0 :"disabled",
+                        action   : 'first'
+                    });
+                }
+
+                if (ffLabels.next) {
+                    handles.push({
+                        label    : ffLabels.next,
+                        className: collection.hasNext() ? void 0 :"disabled",
+                        action   : 'next'
+                    });
+                }
+
+                if (ffLabels.last) {
+                    handles.push({
+                        label    : ffLabels.last,
+                        className: collection.hasNext() ? void 0 :"disabled",
+                        action   : 'last'
+                    });
+                }
+            }
+
+            return handles;
+        },
+
+        render: function () {
+            this.$el.empty();
+
+            var templateFunction = Marionette.TemplateCache.get(this.template);
+
+            this.$el.html(templateFunction({
+                handles: this.makeHandles()
+            }));
+
+            this.delegateEvents();
+
+            return this;
+        }
+    });
+});

UI/app.js

@@ -3,9 +3,11 @@ require.config({
 
     paths: {
         'backbone'  : 'JsLibraries/backbone',
+        '$'         : 'JsLibraries/jquery',
         'underscore': 'JsLibraries/underscore',
         'marionette': 'JsLibraries/backbone.marionette',
-        'handlebars': 'JsLibraries/handlebars'
+        'handlebars': 'JsLibraries/handlebars',
+        'libs'      : 'JsLibraries/'
     },
 
     shim: {
@@ -13,7 +15,7 @@ require.config({
             exports: '_'
         },
         backbone  : {
-            deps   : ['underscore'],
+            deps   : ['underscore', '$'],
             exports: 'Backbone'
         },
         marionette: {
@@ -22,11 +24,19 @@ require.config({
         },
         handlebars: {
             exports: 'Handlebars'
+        },
+
+        backbone_backgrid :{
+            exports: 'backgrid'
+        },
+
+        backgrid  : {
+            deps: ['backbone', 'libs/backbone.backgrid', 'libs/backbone.backgrid.paginator']
         }
     }
 });
 
-define('app', ['shared/modal/region'], function (ModalRegion) {
+define(['backbone','backgrid'], function (ModalRegion) {
 
     window.NzbDrone = new Backbone.Marionette.Application();
     window.NzbDrone.Config = {};
@@ -64,7 +74,8 @@ define('app', ['shared/modal/region'], function (ModalRegion) {
     window.NzbDrone.Shared = {
         Toolbar      : {},
         Messenger    : {},
-        FormatHelpers: {}
+        FormatHelpers: {},
+        Grid         : {}
 
     };