2 files changed, 34 insertions, 2 deletions
diff --git a/imdb-lookup/index.jinja2.html b/imdb-lookup/index.jinja2.html
index 58dd4bf..b2bde45 100644
--- a/imdb-lookup/index.jinja2.html
+++ b/imdb-lookup/index.jinja2.html
@@ -15,15 +15,24 @@
   <script type="text/x-handlebars" id="index">
   <div class="box">
    <div class="sort">
-    <h2>Sort</h2>
+    <button {{action 'sortBy' 'title'}}>Title</button>
     <button {{action 'sortBy' 'imdbRating'}}>IMDB Rating</button>
     <button {{action 'sortBy' 'imdbVotes'}}>IMDB Votes</button>
     <button {{action 'sortBy' 'release'}}>Release Year</button>
     <button {{action 'sortBy' 'omdbTomato'}}>RT Meter %</button>
     <button {{action 'sortBy' 'omdbTomatoRating'}}>RT Rating</button>
+    <label>Per page:</label>
+    {{view "select" content=visiblePerPage value=perPage}}
    </div>
   </div>
-  {{#each movie in arrangedContent}}
+  <div class="box">
+   <center>
+    {{#each page in pages}}
+     <button {{action 'setPage' page}}>{{page}}</button>
+    {{/each}}
+   </center>
+  </div>
+  {{#each movie in paginatedContent}}
    <div class="box">
     <table>
      <tr>
diff --git a/imdb-lookup/js/app.js b/imdb-lookup/js/app.js
index 8cd5e76..d5f7c53 100644
--- a/imdb-lookup/js/app.js
+++ b/imdb-lookup/js/app.js
@@ -49,10 +49,33 @@ App.Movie = DS.Model.extend({
 });
 
 App.IndexController = Ember.ArrayController.extend({
+    page: 1,
+    perPage: "10",
+    visiblePerPage: ["10", "20", "25", "50", "100", "250", "500"],
+    pages: function() {
+        var list = [];
+        for (var i = 1; i <= this.get("pagesCount"); i++) {
+            list.push(i);
+        }
+        return list;
+    }.property('page','perPage'),
+    paginatedContent: function() {
+        var page = this.get('page');
+        var perPage = parseInt(this.get('perPage'));
+        var start   = (page - 1 ) * perPage;
+        var end     = page * perPage;
+        return this.get('arrangedContent').slice(start, end)
+    }.property('arrangedContent.[]', 'page', 'perPage'),
+    pagesCount: function() {
+        return Math.ceil(this.get("content.length") / parseInt(this.get("perPage")))
+    }.property('content.[]', 'perPage'),
     actions: {
         sortBy: function(property) {
             this.set('sortProperties', [property]);
             this.set('sortAscending', !this.get('sortAscending'));
+        },
+        setPage: function(property) {
+            this.set('page', property)
         }
     }
 });