Can browse down through library.

assets/javascripts/controllers/library.controller.js

@@ -14,6 +14,8 @@ mpdClient.controller('library', function ($scope, api) {
     ]
   }
 
+  $scope.currentPanelTemplate = 'panels/root.html'
+
   $scope.panes = [rootPane]
 
   $scope.currentPaneIndex = 0
@@ -22,7 +24,14 @@ mpdClient.controller('library', function ($scope, api) {
     return $scope.panes[$scope.currentPaneIndex]
   }
 
-  $scope.newPane = function (path, params) {
-    console.log(path)
+  $scope.newPane = function (path, params, queryParams) {
+    $scope.panes.push({
+      title: params.title,
+      entries: api.getItems(path).query(queryParams)
+    })
+
+    $scope.currentPaneIndex += 1
+
+    $scope.currentPanelTemplate = 'panels' + path + '.html'
   }
 })

assets/javascripts/controllers/mpd-client.controller.js

@@ -1,5 +1,3 @@
 mpdClient.controller('mpd-client', function ($rootScope, $scope) {
   $scope.showLibrary = function () { $scope.$broadcast('library:show') }
-
-  $scope.currentPanelTemplate = 'panels/root.html'
 })

assets/javascripts/services/api.service.js

@@ -17,6 +17,10 @@ mpdClient.factory('api', function ($rootScope, $http, $resource) {
 
     getQueue: function () {
       return $resource(apiUrl + '/queue')
+    },
+
+    getItems: function (path) {
+      return $resource(apiUrl + path)
     }
   }
 })

public/panels/albums.html

@@ -0,0 +1,6 @@
+<ol class="albums">
+  <li ng-repeat="entry in currentPane().entries"
+      ng-click="newPane('/songs', { title: entry.title }, { artist: entry.artist, album: entry.title })">
+    {{ entry.title }}
+  </li>
+</ol>

public/panels/artists.html

@@ -0,0 +1,6 @@
+<ol class="artists">
+  <li ng-repeat="entry in currentPane().entries"
+      ng-click="newPane('/albums', { title: entry.name }, { artist: entry.name })">
+    {{ entry.name }}
+  </li>
+</ol>

public/panels/root.html

@@ -1,3 +1,6 @@
 <ul class="root">
-  <li ng-repeat="entry in currentPane().entries" ng-click="newPane(entry.path, {})">{{ entry.label }}</li>
+  <li ng-repeat="entry in currentPane().entries"
+      ng-click="newPane(entry.path, { title: entry.label })">
+    {{ entry.label }}
+  </li>
 </ul>

public/panels/songs.html

@@ -0,0 +1,7 @@
+<ol class="songs">
+  <li ng-repeat="entry in currentPane().entries" ng-click="newPane('/songs', { title: entry.title, artist: entry.artist })">
+    <p class="title">{{ entry.title }}</p>
+    <p class="artist">{{ entry.artist }}</p>
+    <p class="length">{{ entry.length | formatLength }}</p>
+  </li>
+</ol>