save current playlist in localStorage

public/javascripts/application.js

@@ -31,18 +31,41 @@ $(window).load(function() {
 
 function initPlaylist() {
 
-// TODO: reload Playlist form localStorage
+  // TODO: reload Playlist form localStorage
+  storage = $.store.get("9minutesPlaylist");
+  if(storage !== undefined) {
+    size = storage.length;
+    for(i = 0; i < size; i++) {
+      $('#playlist').append('<li><span>'+ storage[i].title + '</span> by <a href="#">' + storage[i].artist + '</a></li>');
+      $listElement = $('#playlist li:eq('+i+')');
+      $listElement.prepend('<img class="delete-handle" src="/images/ico/delete.png" />');
+      $listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
+    }
+  }
 
   $('ul#playlist').dragsort({
       dragSelector: '.drag-handle',
       dragEnd: savePlaylist,
-      placeHolderTemplate: '<li class="placeholder">'
+      placeHolderTemplate: '<li class="placeholder">',
+      scrollContainer: '#playlist-container'
   });
   
   $('#playlist .delete-handle').live("click", onRemoveSongFromPlaylist);
 }
 
 function savePlaylist() {
+  var songs = [];
+  $('ul#playlist li').each(function(i) {
+    songs[i] = {
+      title     : $(this).children('span').text(),
+      artist    : $(this).children('a').text(),
+      videoid   : "GAItz89a3na1"
+    }
+  });
+  
+  console.log(songs);
+
+  $.store.set("9minutesPlaylist", songs);
   console.log("playlist saved ;)");
 }
 
@@ -58,8 +81,9 @@ function onAddSongToPlaylist(event) {
   $listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
   $listElement.appendTo('#playlist');
   $listElement.hide(0, function() {
-    $(this).slideDown();
-  })
+    $(this).slideDown(500);
+  });
+  savePlaylist();
   
   // TODO: prevent double entries
   // TODO: get video-id from youtube
@@ -70,6 +94,7 @@ function onRemoveSongFromPlaylist(event) {
   $listElement.fadeTo(300, 0.1, function() {
     $(this).hide("blind", function() { 
       $(this).remove();
+      savePlaylist();
     });
   });
 }

public/stylesheets/layout.css

@@ -64,8 +64,10 @@ a { text-decoration: none; color: #7d8791; }
   position: absolute;
   top: 10px;
   right: 10px;
-  min-width: 270px;
-  min-height: 400px;
+  min-width: 275px;
+  max-width: 275px;
+  min-height: 50px;
+  max-height: 400px;
   background-color: white;
   border: 1px solid #dfe4e8;
   border-radius: 7px;
@@ -79,12 +81,15 @@ a { text-decoration: none; color: #7d8791; }
 #playlist li
 {
   position: relative;
-  height: 24px; line-height: 24px;
+  height: 26px; line-height: 26px;
   border-bottom: 1px dotted #dce2e6;
   font-size: 11px;
   padding: 0 3px;
+  overflow: hidden;
 }
 
+#playlist li:last-child { border-bottom: 0; }
+
 #playlist .delete-handle
 { 
   width: 18px;
@@ -97,8 +102,10 @@ a { text-decoration: none; color: #7d8791; }
 #playlist .drag-handle
 { 
   position: absolute;
-  right: 2px;
-  top: 7px;
+  right: 0;
+  top: 0;
+  padding: 8px 0;
+  vertical-align: middle;
   padding-left: 3px;
   cursor: move!important;
   background-color: white;