Added album selection frontend stuff

app/views/pages/music1.twig

@@ -56,7 +56,7 @@
   <section class="row">
     {% for album in albums %}
       <!-- album details -->
-      <div class="music-album col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
+      <div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
         <div class="thumbnail shadow-1">
           <img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
           <div class="caption">

assets/sass/pages/_music.sass

@@ -61,3 +61,19 @@
 
 .album-art
   width: 100%
+
+.music-album
+  +transition(background, 200ms)
+
+  &:hover
+    background: #f0f0f0
+    cursor: pointer
+
+    a
+      color: $main-color
+
+  &.selected
+    background: #e0e0e0
+
+    a
+      color: $main-color

public/css/main.css

@@ -680,6 +680,20 @@ body {
 .album-art {
   width: 100%; }
 
+.music-album {
+  -webkit-transition: background, 200ms;
+  -moz-transition: background, 200ms;
+  transition: background, 200ms; }
+  .music-album:hover {
+    background: #f0f0f0;
+    cursor: pointer; }
+    .music-album:hover a {
+      color: #e51400; }
+  .music-album.selected {
+    background: #e0e0e0; }
+    .music-album.selected a {
+      color: #e51400; }
+
 .shows-header {
   margin-top: -20px;
   margin-bottom: 20px;

public/js/music.js

@@ -9,6 +9,19 @@ $(document).ready(function() {
   });
 });
 
+function changeSelectedAlbum(albumElem) {
+  var oldSelected = $('.music-album.selected');
+  var newSelected = $(albumElem);
+
+  if (oldSelected.data('albumid') != newSelected.data('albumid')) {
+    // remove selected class from the old element and add it to the new one
+    oldSelected.removeClass('selected');
+    newSelected.addClass('selected');
+
+    // change available songs
+  }
+}
+
 function changeSelectedTrack(trackElem) {
   var oldSelected = $('.now-playing-list .music-track.selected');
   var newSelected = $(trackElem);