Refactor library code.

assets/css/includes/button.css.sass

@@ -3,3 +3,5 @@
   background: none
   color: $highlight
   font-size: 0.8em
+  text-decoration: none
+  padding: 5px

assets/css/library.css.sass

@@ -16,3 +16,26 @@
       right: 10px
       top: 8px
       @include button
+  .browser
+    position: absolute
+    height: 100%
+    @include transition(left 0.25s ease-in-out)
+    &[data-pane="2"]
+      left: -$interface-width
+    &[data-pane="3"]
+      left: -$interface-width * 2
+    &[data-pane="4"]
+      left: -$interface-width * 3
+    ul, ol
+      position: absolute
+      width: $interface-width
+      @extend .list
+      height: 100%
+      &:first-child
+        left: 0
+      &:nth-child(2)
+        left: $interface-width
+      &:nth-child(3)
+        left: $interface-width * 2
+      &:nth-child(4)
+        left: $interface-width * 3

assets/js/controls/library.js

@@ -1,10 +1,13 @@
 var Library = can.Control.extend({
 
   init: function(element, options) {
-    this.element = element
+    this.element = element;
+    this.browser = new can.Model({ pane: 1 });
     element.html(
-      can.view('views/library.ejs')
+      can.view('views/library.ejs', { browser: this.browser })
     );
+    var rootControl = new Pane('#library .root', { show: 'root' })
+    this.panes = new can.List([rootControl]);
   },
 
   show: function() {
@@ -15,13 +18,55 @@ var Library = can.Control.extend({
     $(this.element).removeClass('show');
   },
 
+  nextPane: function() {
+    this.browser.attr('pane', this.browser.attr('pane') + 1);
+  },
+
+  previousPane: function() {
+    this.browser.attr('pane', this.browser.attr('pane') - 1);
+  },
+
   'a.close click': 'hide',
 
   ':page route': function(data) {
-    console.log(data);
     if (data.page == 'library') {
       this.show();
     }
   }
 
 });
+
+var Pane = can.Control.extend({
+
+  init: function(element, data, pane) {
+    this.element = element;
+    this.data = data;
+    this.renderPane[data.show].call(this, data);
+  },
+
+  renderPane: {
+    root: function() {
+      this.element.html(
+        can.view('views/library/root.ejs', {})
+      );
+    },
+    artists: function(data) {
+      Artist.findAll({}, renderCallback('artists'));
+    },
+    albums: function(data) {
+      Album.findAll({ artist: data.artist }, renderCallback('albums'));
+    },
+    songs: function(data) {
+      Song.findAll({ artist: data.artist, album: data.album }, renderCallback('songs'));
+    }
+  },
+
+  renderCallback: function(type) {
+    return function(items) {
+      $(this.element).html(
+        can.view('views/library/' + type + '.ejs', { items: items })
+      );
+    }.bind(this)
+  }
+
+});

lib/mpd_client/song.rb

@@ -24,7 +24,7 @@ module MPDClient
     end
 
     def <=>(other)
-      [artist, album, title] <=> [other.artist, other.album, other.title]
+      [artist, album, track] <=> [other.artist, other.album, other.track]
     end
 
     def to_h

public/views/library.ejs

@@ -2,6 +2,7 @@
   <a class="close" href="#!">Close</a>
   <h1>Library</h1>
 </header>
-<ol class="list">
-  <%== can.view.render('views/library/root.ejs', {}) %>
-</ol>
+<div class="browser" data-pane="<%= browser.attr('pane') %>">
+  <div class="root"></div>
+  <%# can.view.render('views/library/root.ejs', {}) %>
+</div>

public/views/library/albums.ejs

@@ -0,0 +1,12 @@
+<ol class="albums">
+  <% list(albums, function(album) { %>
+    <li id="<%= album.attr('id') %>">
+      <%== can.route.link(album.attr('title'), {
+        page: 'library',
+        show: 'songs',
+        artist: album.attr('artist'),
+        album: album.attr('album')
+      }) %>
+    </li>
+  <% }) %>
+</ol>

public/views/library/artists.ejs

@@ -0,0 +1,11 @@
+<ol class="artists">
+  <% list(artists, function(artist) { %>
+    <li id="<%= artist.attr('id') %>">
+      <%== can.route.link(artist.attr('name'), {
+        page: 'library',
+        show: 'albums',
+        artist: artist.attr('name')
+      }) %>
+    </li>
+  <% }) %>
+</ol>

public/views/library/root.ejs

@@ -1,3 +1,5 @@
-<li><%== can.route.link('Artists', { page: 'library', mode: 'artists' }) %></li>
-<li><%== can.route.link('Albums', { page: 'library', mode: 'albums' }) %></li>
-<li><%== can.route.link('Songs', { page: 'library', mode: 'songs' }) %></li>
+<ul class="root">
+  <li><%== can.route.link('Artists', { page: 'library', show: 'artists' }) %></li>
+  <li><%== can.route.link('Albums', { page: 'library', show: 'albums' }) %></li>
+  <li><%== can.route.link('Songs', { page: 'library', show: 'songs' }) %></li>
+</ul>

public/views/library/songs.ejs

@@ -0,0 +1,7 @@
+<ol class="songs">
+  <% list(songs, function(song) { %>
+    <li id="<%= song.attr('id') %>">
+      <%= song.attr('title') %>
+    </li>
+  <% }) %>
+</ol>