Can display Library.

assets/css/common.css.sass

@@ -17,13 +17,3 @@ body
 
 #content
   height: 100%
-
-.header
-  position: fixed
-  top: 0
-  width: $interface-width
-  background: rgba(248, 248, 248, 0.95)
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
-  h1
-    text-align: center
-    font-size: 1em

assets/css/includes/header.css.sass

@@ -0,0 +1,9 @@
+.header
+  position: fixed
+  top: 0
+  width: $interface-width
+  background: rgba(248, 248, 248, 0.95)
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
+  h1
+    text-align: center
+    font-size: 1em

assets/css/includes/list.css.sass

@@ -0,0 +1,19 @@
+.list
+  list-style: none
+  margin: 0
+  padding: 0
+  li
+    position: relative
+    padding: 10px
+    padding-right: 42px
+    border-bottom: 1px solid #ddd
+
+.ordered-list
+  @extend .list
+  counter-reset: index
+  li
+    counter-increment: index
+    &:before
+      float: left
+      padding: 0.5em 1em 0.5em 0
+      content: counter(index,decimal-leading-zero)

assets/css/library.css.sass

@@ -7,5 +7,12 @@
   height: 100%
   width: 100%
   z-index: 2
+  &.show
+    display: block
   header
     @extend .header
+    a.close
+      position: absolute
+      right: 10px
+      top: 8px
+      @include button

assets/css/mpd-client.css.sass

@@ -4,6 +4,8 @@
 @import 'includes/fonts'
 @import 'includes/colours'
 @import 'includes/button'
+@import 'includes/header'
+@import 'includes/list'
 @import 'common'
 @import 'transport'
 @import 'queue'

assets/css/queue.css.sass

@@ -5,16 +5,29 @@
   header
     z-index: 1
     @extend .header
-    button.library
+    a.library
       position: absolute
       left: 10px
       top: 8px
       @include button
   ol
-    list-style: none
-    margin: 0
-    padding: 0
-    counter-reset: index
+    @extend .ordered-list
+    li
+      &.playing
+        .title
+          color: $highlight
+        &:before
+          font-weight: bold
+        &:after
+          @extend .icon
+          position: absolute
+          font-size: 1.25em
+          right: 10px
+          top: 10px
+          padding: 0.3em
+          content: "playing"
+        .length
+          display: none
   p
     margin: 0
   .artist
@@ -33,28 +46,3 @@
     padding: 0.8em 0
     right: 10px
     top: 10px
-  li
-    position: relative
-    padding: 10px
-    padding-right: 42px
-    border-bottom: 1px solid #ddd
-    counter-increment: index
-    &:before
-      float: left
-      padding: 0.5em 1em 0.5em 0
-      content: counter(index,decimal-leading-zero)
-    &.playing
-      .title
-        color: $highlight
-      &:before
-        font-weight: bold
-      &:after
-        @extend .icon
-        position: absolute
-        font-size: 1.25em
-        right: 10px
-        top: 10px
-        padding: 0.3em
-        content: "playing"
-      .length
-        display: none

assets/js/controls/library.js

@@ -1,9 +1,27 @@
 var Library = can.Control.extend({
 
   init: function(element, options) {
+    this.element = element
     element.html(
-      can.view( 'views/library.ejs')
+      can.view('views/library.ejs')
     );
+  },
+
+  show: function() {
+    $(this.element).addClass('show');
+  },
+
+  hide: function() {
+    $(this.element).removeClass('show');
+  },
+
+  'a.close click': 'hide',
+
+  ':page route': function(data) {
+    console.log(data);
+    if (data.page == 'library') {
+      this.show();
+    }
   }
 
 });

assets/js/models/album.js

@@ -0,0 +1,3 @@
+var Album = can.Model.extend({
+  findAll: 'GET /api/albums'
+}, {});

assets/js/models/artist.js

@@ -0,0 +1,3 @@
+var Artist = can.Model.extend({
+  findAll: 'GET /api/artists'
+}, {});

assets/js/models/song.js

@@ -0,0 +1,3 @@
+var Song = can.Model.extend({
+  findAll: 'GET /api/songs'
+}, {});

assets/js/mpd-client.js

@@ -2,9 +2,9 @@
 //= require ./libs/can.jquery.min.js
 //= require ./libs/can.ejs.js
 
+//= require ./routes.js
 //= require_tree ./models/
 //= require_tree ./helpers/
 //= require_tree ./controls/
 //= require_tree ./constructs/
-//= require ./router.js
 //= require ./application.js

assets/js/router.js

@@ -1 +0,0 @@
-

assets/js/routes.js

@@ -0,0 +1,2 @@
+can.route(':page');
+can.route.ready();

public/views/library.ejs

@@ -1,8 +1,7 @@
 <header>
+  <a class="close" href="#!">Close</a>
   <h1>Library</h1>
 </header>
 <ol class="list">
-  <li>Artists</li>
-  <li>Albums</li>
-  <li>Songs</li>
+  <%== can.view.render('views/library/root.ejs', {}) %>
 </ol>

public/views/library/root.ejs

@@ -0,0 +1,3 @@
+<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>

public/views/queue.ejs

@@ -1,5 +1,5 @@
 <header>
-  <button class="library">Library</button>
+  <a class="library" href="#!library">Library</a>
   <h1>Queue</h1>
 </header>
 <ol class="queue">