Panel switching works.

assets/css/library.css.sass

@@ -1,11 +1,15 @@
 mpd-library
-  background: white
   position: absolute
+  background: white
   top: 100%
   height: 100%
   width: 100%
   z-index: 2
   @include transition(top 0.35s ease-in-out)
+  .panels
+    position: absolute
+    height: 100%
+    @include transition(left 0.35s ease-in-out)
   header
     top: 100%
     z-index: 1
@@ -35,9 +39,10 @@ mpd-library
     @extend .list
   ol.songs
     @extend .song-list
-  mpd-panel
+  mpd-panel-root, mpd-panel-artists, mpd-panel-albums, mpd-panel-songs
     position: absolute
     width: $interface-width
     height: 100%
     padding: 2.5em 0 0
     overflow: auto
+    left: calc(attr(depth) * 20em)

assets/js/components/library.js

@@ -5,7 +5,11 @@ can.Component.extend({
   template: can.view('views/library.mustache'),
 
   scope: {
-    currentPane: 0
+    currentDepth: 0,
+    leftPos: function() {
+      var ems = - (this.attr('currentDepth') * 20);
+      return ems + 'em';
+    }
   },
 
   events: {
@@ -17,6 +21,15 @@ can.Component.extend({
       $(this.element).removeClass('show');
     },
 
+    addPanel: function(data) {
+      var newPanel = can.view.mustache('<mpd-panel-' + data.show +
+                                       ' depth="' + data.depth + '"' +
+                                       ' style="left: ' + data.depth * 20 + 'em"' +
+                                       ' artist="' + data.artist + '"' +
+                                       ' album="' + data.album + '" />');
+      $('.panels', this.element).append(newPanel);
+    },
+
     'route': function(data) {
       this.hide();
     },
@@ -24,13 +37,17 @@ can.Component.extend({
     ':type route': function(data) {
       if (data.type == 'library') {
         this.show();
-        if (data.pane > this.currentPane) {
-          this.addPane(data);
+        if (data.depth > this.scope.currentDepth) {
+          this.addPanel(data);
         }
-        else if (data.pane < this.currentPane) {
-          this.removePane(data);
+        else if (data.depth < this.scope.currentDepth) {
+          this.removePanel(data);
         }
       }
+    },
+
+    ' showPanel': function(el, ev, data) {
+      this.scope.attr('currentDepth', data);
     }
   }
 

assets/js/components/panel-albums.js

@@ -0,0 +1,39 @@
+can.Component.extend({
+
+  tag: 'mpd-panel-albums',
+
+  template: can.view('views/panels/albums.mustache'),
+
+  init: function() {
+    var self = this;
+    Album.findAll({ artist: this.scope.artist }, function(data) {
+      self.scope.attr('items', data);
+    });
+  },
+
+  scope: {
+    depth: "@",
+    artist: "@",
+    title: function() {
+      if (this.artist !== undefined) {
+        return this.artist;
+      }
+      else {
+        return 'Albums';
+      }
+    }
+  },
+
+  helpers: {
+    link: function(item) {
+      return can.route.link(item.name, {
+        type: 'library',
+        show: 'songs',
+        artist: item.artist,
+        album: item.title,
+        depth: +this.depth + 1
+      });
+    },
+  }
+
+});

assets/js/components/panel-artists.js

@@ -0,0 +1,31 @@
+can.Component.extend({
+
+  tag: 'mpd-panel-artists',
+
+  template: can.view('views/panels/artists.mustache'),
+
+  init: function() {
+    var self = this;
+    Artist.findAll({}, function(data) {
+      console.log(data);
+      self.scope.attr('items', data);
+      self._control.element.trigger('showPanel', self.scope.depth);
+    });
+  },
+
+  scope: {
+    depth: "@"
+  },
+
+  helpers: {
+    link: function(item) {
+      return can.route.link(item.name, {
+        type: 'library',
+        show: 'albums',
+        artist: item.name,
+        depth: +this.depth + 1
+      });
+    },
+  }
+
+});

assets/js/components/panel-root.js

@@ -0,0 +1,26 @@
+can.Component.extend({
+
+  tag: 'mpd-panel-root',
+
+  template: can.view('views/panels/root.mustache'),
+
+  scope: {
+    depth: "@",
+    items: [
+      { label: 'Artists', show: 'artists' },
+      { label: 'Albums', show: 'albums' },
+      { label: 'Songs', show: 'songs' }
+    ]
+  },
+
+  helpers: {
+    link: function(item) {
+      return can.route.link(item.label, {
+        type: 'library',
+        show: item.show,
+        depth: +this.depth + 1
+      });
+    },
+  }
+
+});

assets/js/components/panel.js

@@ -13,16 +13,17 @@ can.Component.extend({
       if (this.show == 'root') return 'Library';
     },
     fetchItems: {
-      root: new can.List(['Artists', 'Albums', 'Songs']),
+      root: [
+        { label: 'Artists', show: 'artists' },
+        { label: 'Albums', show: 'albums' },
+        { label: 'Songs', show: 'songs' }
+      ],
       artists: function() { return Artist.findAll({}) },
       albums: function() { Album.findAll({ artist: this.artist }) },
       songs: function() { Song.findAll({ artist: this.artist, album: this.album }) }
     }
   },
 
-  events: {
-  },
-
   helpers: {
     renderItems: function() {
       return can.view.render('views/library/' + this.show, {
@@ -30,10 +31,22 @@ can.Component.extend({
       });
     },
 
-    rootLink: function(label, show) {
-      return can.route.link(label, {
-        type: 'library', show: show
+    rootLink: function(item) {
+      console.log(item);
+      return can.route.link(item.label, {
+        type: 'library',
+        show: item.show,
+        depth: +this.depth + 1
       });
+    },
+
+    artistLink: function(item) {
+      return can.route.link(item.attr('name'), {
+        page: 'library',
+        show: 'albums',
+        depth: console.log(this),
+        artist: item.attr('name')
+      })
     }
   }
 

public/views/library.mustache

@@ -1 +1,3 @@
-<mpd-panel show="root" style="left: 0;"></mpd-panel>
+<div class="panels" style="left: {{leftPos}}">
+  <mpd-panel-root depth="0" style="left: 0;"></mpd-panel-root>
+</div>

public/views/library/root.mustache

@@ -1,3 +0,0 @@
-<ul class="root">
-  <li>{{{rootLink 'Artists', 'artists'}}}</li>
-</ul>

public/views/panels/albums.mustache

@@ -0,0 +1,10 @@
+<header>
+  <a class="close" href="#!">Close</a>
+  <h1>{{title}}</h1>
+</header>
+
+<ol class="albums">
+  {{#each items}}
+    <li>{{{link .}}}</li>
+  {{/each}}
+</ol>

public/views/panels/artists.mustache

@@ -0,0 +1,10 @@
+<header>
+  <a class="close" href="#!">Close</a>
+  <h1>Artists</h1>
+</header>
+
+<ol class="artists">
+  {{#items}}
+    <li>{{{link .}}}</li>
+  {{/items}}
+</ol>

public/views/panels/root.mustache

@@ -0,0 +1,10 @@
+<header>
+  <a class="close" href="#!">Close</a>
+  <h1>Library</h1>
+</header>
+
+<ul class="root">
+  {{#items}}
+    <li>{{{link .}}}</li>
+  {{/items}}
+</ul>