properly reinstall hooks during chunk merging

server/djrandom/frontend/static/player.js

@@ -33,6 +33,8 @@ djr.Backend.prototype.search = function(query, callback, ctx) {
          });
 };
 
+// Get information about a specific song.
+
 // Read a playlist, calls callback(Playlist).
 djr.Backend.prototype.getPlaylist = function(uuid, callback, ctx) {
   $.ajax({url: '/json/playlist/get/' + uuid,
@@ -89,7 +91,7 @@ djr.PlaylistChunk.prototype.removeSong = function(sha1) {
 
 djr.PlaylistChunk.prototype.wrapHtml = function(chunk_id, songs_html) {
   return ('<div id=\"chunk_' + chunk_id + '\" class=\"chunk\">'
-          + '<div class=\"chunk_title\">' + this.title + '</div>'
+          + '<a class=\"chunk_title\">' + this.title + '</a>'
           + '<div class=\"chunk_inner\">'
           + (songs_html || '') + '</div></div>');
 };
@@ -242,13 +244,14 @@ djr.Player.prototype.mergePlaylistChunks = function() {
     plhtml.push($(this).html());
   });
 
-  // 2) Remove all the .chunk divs
-  $('.chunk').remove();
+  // 2) Remove all the .chunk divs.
+  $('#playlistDiv').empty();
+  // also: $('.chunk').remove();
 
   // 3) Create a new chunk div.
   var chunk_id = this.playlist.chunks[0];
   var chunk = this.playlist.chunk_map[chunk_id];
-  $('#playlistDiv').html(chunk.wrapHtml(chunk_id, plhtml.join('')));
+  this.setChunkHtml(chunk, chunk_id, plhtml.join(''));
 };
 
 // Search!
@@ -286,19 +289,29 @@ djr.Player.prototype.search = function(query) {
     player.backend.getHtmlForSongs(songs, function(songs_html) {
       var chunk_div = 'chunk_' + chunk_id;
       player.hideAllChunks();
-      $('#playlistDiv').append(
-        new_chunk.wrapHtml(chunk_id, songs_html));
-      $('#' + chunk_div + ' .song_a').click(function() {
+      player.setChunkHtml(new_chunk, chunk_id, songs_html);
+    });
+  });
+
+};
+
+// Set the HTML contents of a chunk object, and the related event hooks.
+djr.Player.prototype.setChunkHtml(chunk, chunk_id, songs_html) {
+  var inner_html = chunk.wrapHtml(chunk_id, songs_html);
+  $('#playlistDiv').append(inner_html);
+  var chunk_div = '#chunk_' + chunk_id;
+  $(chunk_div + ' .song_a').click(function() {
     player.play($(this).attr('id').substr(5));
   });
-      $('#' + chunk_div + ' .album_a').click(function() {
+  $(chunk_div + ' .album_a').click(function() {
     player.search('(album:\"' + $(this).text() + '\")');
   });
+  $(chunk_div + ' .chunk_title').click(function() {
+    $(chunk_div + ' .chunk_inner').toggle();
   });
-  });
-
 };
 
+
 // Start playing a specific song.
 djr.Player.prototype.play = function(song) {
   djr.debug('play ' + song);
@@ -312,6 +325,14 @@ djr.Player.prototype.play = function(song) {
   this.player.jPlayer('setMedia',
                       {mp3: url}).jPlayer('play');
 
+  // Load song info in the player UI. We cheat by stealing the data
+  // from the existing <div> instead than from the server.
+  $('#jp_playlist_1').html(
+    $('#song_' + song + ' .title').text() + '<br>'
+      + $('#song_' + song + ' .artist').text() + '<br>'
+      + '<small>' + $('#song_' + song + ' .album').text() + '</small>'
+  );
+
   // Report the new song being played.
   this.backend.nowPlaying(song);
 };