sorting and show book

app/assets/javascripts/books.js

@@ -146,7 +146,7 @@ var books_o = {
       "author": "Barbara Kingsolver",
       "genre":  "Fiction",
       "published_date": "2009",
-      "cover_url": "http://img.freebase.com/api/trans/image_thumb/m/09rhr22?maxheight=510&mode=fit&maxwidth=510"
+      "cover_url": "http://ecx.images-amazon.com/images/I/51CfSWL432L._SL160_.jpg"
     },
     {
       "title":  "The Poisonwood Bible",

app/assets/javascripts/bookshelf.js

@@ -1,7 +1,126 @@
 $(function () {
-  $book_rows = $('div.book');
-  $book_rows.each(function(index) {
-    console.log($(this).find('img'));
-    $(this).find('img')[0].src = books_o["books"][index]["cover_url"]
+
+  // onload sort by author and display books
+  sortAuthor();
+  displayBooks();
+
+  function displayBooks() {
+    $book_rows = $('div.book');
+    $book_rows.each(function(index) {
+      //console.log($(this).find('img'));
+      $current_img = $(this).find('img')[0];
+      $current_img.src = books_o["books"][index]["cover_url"];
+      $current_img.setAttribute('data-index', index);
+    });
+  }
+
+  function sortAuthor() {
+    books_o.books.sort(function (a, b) {
+      a = a.author,
+      b = b.author;
+      return a.localeCompare(b);
+    });
+  };
+
+  function sortTitle (a, b) {
+    books_o.books.sort(function (a, b) {
+      a = a.title,
+      b = b.title;
+      return a.localeCompare(b);
+    });
+  };
+
+  function sortGenre (a, b) {
+    books_o.books.sort(function (a, b) {
+      a = a.genre,
+      b = b.genre;
+      return a.localeCompare(b);
+    });
+  };
+
+  function sortPubDate (a, b) {
+    books_o.books.sort(function (a, b) {
+      a = a.published_date,
+      b = b.published_date;
+      return a.localeCompare(b);
+    });
+  };
+
+  function showBook() {
+    var book = books_o["books"][0];
+    $('#book-detail-author').text(book.author);
+    $('#book-detail-genre').text(book.genre);
+    $('#book-detail-pubdate').text(book.published_date);
+    $('#book-detail-title').text(book.title);
+    $('#book-detail-cover').find('img')[0].src = book.cover_url;
+    $('#book-detail').fadeIn();
+  }
+
+  $('#sort-icon-author').click(function() {
+    sortAuthor();
+    displayBooks();
   });
+
+  $('#sort-icon-genre').click(function() {
+    sortGenre();
+    displayBooks();
+  });
+
+  $('#sort-icon-title').click(function() {
+    sortTitle();
+    displayBooks();
+  });
+
+  $('#sort-icon-pubdate').click(function() {
+    sortPubDate();
+    displayBooks();
+  });
+
+  $('#show-book').click(function() {
+    showBook();
+  });
+
+
+
+  // LISTEN FOR MESSAGES
+    PUBNUB.subscribe({
+        channel  : "cosmic_book_shelf",      // CONNECT TO THIS CHANNEL.
+        error    : function() {        // LOST CONNECTION (auto reconnects)
+            alert("Connection Lost. Will auto-reconnect when Online.")
+        },
+        callback : function(message) { // RECEIVED A MESSAGE.
+            console.log(message);
+            if(message != "Hi from PubNub.") {
+              //var gestures = message.gestures;
+              var gesture = message.Gestures[0].Gesture;
+              switch(gesture)
+              {
+                case "SwipeToRight":
+                  sortTitle();
+                  displayBooks();
+                  break;
+                case "SwipeToLeft":
+                  sortGenre();
+                  displayBooks();
+                  break;
+                case "Circle":
+                  sortPubDate();
+                  displayBooks();
+                  break;
+              }
+            }
+
+
+        },
+        connect  : function() {        // CONNECTION ESTABLISHED.
+
+            // SEND MESSAGE
+            PUBNUB.publish({
+                channel : "cosmic_book_shelf",
+                message : "Hi from PubNub."
+            })
+
+        }
+    })
+
 });

app/assets/stylesheets/application.css

@@ -79,4 +79,17 @@ body {
   background-image: url('/assets/book_shadow.png');
   width: 192px;
   height: 202px;
+}
+
+#book-detail {
+  display: none;
+  background-color: white;
+  width: 700px;
+  height: 400px;
+  z-index: 100;
+  position: relative;
+  top: -500px;
+  left: 160px;
+  opacity: 0.8;
+  color: black;
 }

app/views/bookshelf/index.html.erb

@@ -1,3 +1,5 @@
+<div pub-key="pub-31ccbcae-5e76-4eaa-82e4-70f61ba3aa41" sub-key="sub-d87710eb-4468-11e1-884a-cda464106799" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
+<script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
 <div class="container">
   <div class="bookshelf">
     <div class="bookshelf_walls">
@@ -27,6 +29,25 @@
   </div>
   <div class="control_panel">
     <%= image_tag "icon_search.png" %><br />
-    <%= image_tag "icon_sort.png" %>
+    <%= image_tag "icon_sort.png", :id => "sort-icon" %>
+  </div>
+  <div class="sort-control-panel">
+    <div id="sort-icon-author">author</div>
+    <div id="sort-icon-genre">genre</div>
+    <div id="sort-icon-pubdate">published date</div>
+    <div id="sort-icon-title">title</div>
+  </div>
+  <div>
+    <div id="show-book">show book</div>
+  </div>
+  <div id="book-detail">
+    <div id="book-detail-cover">
+      <%= image_tag "" %>
+    </div>
+    <div id="book-detail-author"></div>
+    <div id="book-detail-title"></div>
+    <div id="book-detail-desc"></div>
+    <div id="book-detail-genre"></div>
+    <div id="book-detail-pubdate"></div>
   </div>
 </div>

app/views/pubnubexperiment/index.html.erb

@@ -12,6 +12,21 @@ here is where we will experiment with pub nub communication
         },
         callback : function(message) { // RECEIVED A MESSAGE.
             console.log(message);
+            if(message != "Hi from PubNub.") {
+              //var gestures = message.gestures;
+              var gesture = message.Gestures[0].Gesture;
+              switch(gesture)
+              {
+                case "SwipeToRight":
+                  break;
+                case "SwipeToLeft":
+                  break;
+                case "Circle":
+                  break;
+              }
+            }
+
+
         },
         connect  : function() {        // CONNECTION ESTABLISHED.