Added basic playlist implementation using backbone.js.

33 files changed, 322 insertions, 79 deletions

diff --git a/static/backbone-localstorage.js b/static/backbone-localstorage.js
new file mode 100644
index 0000000..091d7f3
--- /dev/null
+++ b/static/backbone-localstorage.js
@@ -0,0 +1,84 @@
+// A simple module to replace `Backbone.sync` with *localStorage*-based
+// persistence. Models are given GUIDS, and saved into a JSON object. Simple
+// as that.
+
+// Generate four random hex digits.
+function S4() {
+   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+};
+
+// Generate a pseudo-GUID by concatenating random hexadecimal.
+function guid() {
+   return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
+};
+
+// Our Store is represented by a single JS object in *localStorage*. Create it
+// with a meaningful name, like the name you'd give a table.
+var Store = function(name) {
+  this.name = name;
+  var store = localStorage.getItem(this.name);
+  this.data = (store && JSON.parse(store)) || {};
+};
+
+_.extend(Store.prototype, {
+
+  // Save the current state of the **Store** to *localStorage*.
+  save: function() {
+    localStorage.setItem(this.name, JSON.stringify(this.data));
+  },
+
+  // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
+  // have an id of it's own.
+  create: function(model) {
+    if (!model.id) model.id = model.attributes.id = guid();
+    this.data[model.id] = model;
+    this.save();
+    return model;
+  },
+
+  // Update a model by replacing its copy in `this.data`.
+  update: function(model) {
+    this.data[model.id] = model;
+    this.save();
+    return model;
+  },
+
+  // Retrieve a model from `this.data` by id.
+  find: function(model) {
+    return this.data[model.id];
+  },
+
+  // Return the array of all models currently in storage.
+  findAll: function() {
+    return _.values(this.data);
+  },
+
+  // Delete a model from `this.data`, returning it.
+  destroy: function(model) {
+    delete this.data[model.id];
+    this.save();
+    return model;
+  }
+
+});
+
+// Override `Backbone.sync` to use delegate to the model or collection's
+// *localStorage* property, which should be an instance of `Store`.
+Backbone.sync = function(method, model, options) {
+
+  var resp;
+  var store = model.localStorage || model.collection.localStorage;
+
+  switch (method) {
+    case "read":    resp = model.id ? store.find(model) : store.findAll(); break;
+    case "create":  resp = store.create(model);                            break;
+    case "update":  resp = store.update(model);                            break;
+    case "delete":  resp = store.destroy(model);                           break;
+  }
+
+  if (resp) {
+    options.success(resp);
+  } else {
+    options.error("Record not found");
+  }
+};
\ No newline at end of file
diff --git a/static/backbone-min.js b/static/backbone-min.js
new file mode 100644
index 0000000..5846b32
--- /dev/null
+++ b/static/backbone-min.js
@@ -0,0 +1,37 @@
+// Backbone.js 0.9.1
+
+// (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc.
+// Backbone may be freely distributed under the MIT license.
+// For all details and documentation:
+// http://backbonejs.org
+(function(){var i=this,r=i.Backbone,s=Array.prototype.slice,t=Array.prototype.splice,g;g="undefined"!==typeof exports?exports:i.Backbone={};g.VERSION="0.9.1";var f=i._;!f&&"undefined"!==typeof require&&(f=require("underscore"));var h=i.jQuery||i.Zepto||i.ender;g.setDomLibrary=function(a){h=a};g.noConflict=function(){i.Backbone=r;return this};g.emulateHTTP=!1;g.emulateJSON=!1;g.Events={on:function(a,b,c){for(var d,a=a.split(/\s+/),e=this._callbacks||(this._callbacks={});d=a.shift();){d=e[d]||(e[d]=
+{});var f=d.tail||(d.tail=d.next={});f.callback=b;f.context=c;d.tail=f.next={}}return this},off:function(a,b,c){var d,e,f;if(a){if(e=this._callbacks)for(a=a.split(/\s+/);d=a.shift();)if(f=e[d],delete e[d],b&&f)for(;(f=f.next)&&f.next;)if(!(f.callback===b&&(!c||f.context===c)))this.on(d,f.callback,f.context)}else delete this._callbacks;return this},trigger:function(a){var b,c,d,e;if(!(d=this._callbacks))return this;e=d.all;for((a=a.split(/\s+/)).push(null);b=a.shift();)e&&a.push({next:e.next,tail:e.tail,
+event:b}),(c=d[b])&&a.push({next:c.next,tail:c.tail});for(e=s.call(arguments,1);c=a.pop();){b=c.tail;for(d=c.event?[c.event].concat(e):e;(c=c.next)!==b;)c.callback.apply(c.context||this,d)}return this}};g.Events.bind=g.Events.on;g.Events.unbind=g.Events.off;g.Model=function(a,b){var c;a||(a={});b&&b.parse&&(a=this.parse(a));if(c=j(this,"defaults"))a=f.extend({},c,a);b&&b.collection&&(this.collection=b.collection);this.attributes={};this._escapedAttributes={};this.cid=f.uniqueId("c");if(!this.set(a,
+{silent:!0}))throw Error("Can't create an invalid model");delete this._changed;this._previousAttributes=f.clone(this.attributes);this.initialize.apply(this,arguments)};f.extend(g.Model.prototype,g.Events,{idAttribute:"id",initialize:function(){},toJSON:function(){return f.clone(this.attributes)},get:function(a){return this.attributes[a]},escape:function(a){var b;if(b=this._escapedAttributes[a])return b;b=this.attributes[a];return this._escapedAttributes[a]=f.escape(null==b?"":""+b)},has:function(a){return null!=
+this.attributes[a]},set:function(a,b,c){var d,e;f.isObject(a)||null==a?(d=a,c=b):(d={},d[a]=b);c||(c={});if(!d)return this;d instanceof g.Model&&(d=d.attributes);if(c.unset)for(e in d)d[e]=void 0;if(!this._validate(d,c))return!1;this.idAttribute in d&&(this.id=d[this.idAttribute]);var b=this.attributes,k=this._escapedAttributes,n=this._previousAttributes||{},h=this._setting;this._changed||(this._changed={});this._setting=!0;for(e in d)if(a=d[e],f.isEqual(b[e],a)||delete k[e],c.unset?delete b[e]:b[e]=
+a,this._changing&&!f.isEqual(this._changed[e],a)&&(this.trigger("change:"+e,this,a,c),this._moreChanges=!0),delete this._changed[e],!f.isEqual(n[e],a)||f.has(b,e)!=f.has(n,e))this._changed[e]=a;h||(!c.silent&&this.hasChanged()&&this.change(c),this._setting=!1);return this},unset:function(a,b){(b||(b={})).unset=!0;return this.set(a,null,b)},clear:function(a){(a||(a={})).unset=!0;return this.set(f.clone(this.attributes),a)},fetch:function(a){var a=a?f.clone(a):{},b=this,c=a.success;a.success=function(d,
+e,f){if(!b.set(b.parse(d,f),a))return!1;c&&c(b,d)};a.error=g.wrapError(a.error,b,a);return(this.sync||g.sync).call(this,"read",this,a)},save:function(a,b,c){var d,e;f.isObject(a)||null==a?(d=a,c=b):(d={},d[a]=b);c=c?f.clone(c):{};c.wait&&(e=f.clone(this.attributes));a=f.extend({},c,{silent:!0});if(d&&!this.set(d,c.wait?a:c))return!1;var k=this,h=c.success;c.success=function(a,b,e){b=k.parse(a,e);c.wait&&(b=f.extend(d||{},b));if(!k.set(b,c))return!1;h?h(k,a):k.trigger("sync",k,a,c)};c.error=g.wrapError(c.error,
+k,c);b=this.isNew()?"create":"update";b=(this.sync||g.sync).call(this,b,this,c);c.wait&&this.set(e,a);return b},destroy:function(a){var a=a?f.clone(a):{},b=this,c=a.success,d=function(){b.trigger("destroy",b,b.collection,a)};if(this.isNew())return d();a.success=function(e){a.wait&&d();c?c(b,e):b.trigger("sync",b,e,a)};a.error=g.wrapError(a.error,b,a);var e=(this.sync||g.sync).call(this,"delete",this,a);a.wait||d();return e},url:function(){var a=j(this.collection,"url")||j(this,"urlRoot")||o();return this.isNew()?
+a:a+("/"==a.charAt(a.length-1)?"":"/")+encodeURIComponent(this.id)},parse:function(a){return a},clone:function(){return new this.constructor(this.attributes)},isNew:function(){return null==this.id},change:function(a){if(this._changing||!this.hasChanged())return this;this._moreChanges=this._changing=!0;for(var b in this._changed)this.trigger("change:"+b,this,this._changed[b],a);for(;this._moreChanges;)this._moreChanges=!1,this.trigger("change",this,a);this._previousAttributes=f.clone(this.attributes);
+delete this._changed;this._changing=!1;return this},hasChanged:function(a){return!arguments.length?!f.isEmpty(this._changed):this._changed&&f.has(this._changed,a)},changedAttributes:function(a){if(!a)return this.hasChanged()?f.clone(this._changed):!1;var b,c=!1,d=this._previousAttributes,e;for(e in a)if(!f.isEqual(d[e],b=a[e]))(c||(c={}))[e]=b;return c},previous:function(a){return!arguments.length||!this._previousAttributes?null:this._previousAttributes[a]},previousAttributes:function(){return f.clone(this._previousAttributes)},
+isValid:function(){return!this.validate(this.attributes)},_validate:function(a,b){if(b.silent||!this.validate)return!0;var a=f.extend({},this.attributes,a),c=this.validate(a,b);if(!c)return!0;b&&b.error?b.error(this,c,b):this.trigger("error",this,c,b);return!1}});g.Collection=function(a,b){b||(b={});b.comparator&&(this.comparator=b.comparator);this._reset();this.initialize.apply(this,arguments);a&&this.reset(a,{silent:!0,parse:b.parse})};f.extend(g.Collection.prototype,g.Events,{model:g.Model,initialize:function(){},
+toJSON:function(){return this.map(function(a){return a.toJSON()})},add:function(a,b){var c,d,e,g,h,i={},j={};b||(b={});a=f.isArray(a)?a.slice():[a];for(c=0,d=a.length;c<d;c++){if(!(e=a[c]=this._prepareModel(a[c],b)))throw Error("Can't add an invalid model to a collection");if(i[g=e.cid]||this._byCid[g]||null!=(h=e.id)&&(j[h]||this._byId[h]))throw Error("Can't add the same model to a collection twice");i[g]=j[h]=e}for(c=0;c<d;c++)(e=a[c]).on("all",this._onModelEvent,this),this._byCid[e.cid]=e,null!=
+e.id&&(this._byId[e.id]=e);this.length+=d;t.apply(this.models,[null!=b.at?b.at:this.models.length,0].concat(a));this.comparator&&this.sort({silent:!0});if(b.silent)return this;for(c=0,d=this.models.length;c<d;c++)if(i[(e=this.models[c]).cid])b.index=c,e.trigger("add",e,this,b);return this},remove:function(a,b){var c,d,e,g;b||(b={});a=f.isArray(a)?a.slice():[a];for(c=0,d=a.length;c<d;c++)if(g=this.getByCid(a[c])||this.get(a[c]))delete this._byId[g.id],delete this._byCid[g.cid],e=this.indexOf(g),this.models.splice(e,
+1),this.length--,b.silent||(b.index=e,g.trigger("remove",g,this,b)),this._removeReference(g);return this},get:function(a){return null==a?null:this._byId[null!=a.id?a.id:a]},getByCid:function(a){return a&&this._byCid[a.cid||a]},at:function(a){return this.models[a]},sort:function(a){a||(a={});if(!this.comparator)throw Error("Cannot sort a set without a comparator");var b=f.bind(this.comparator,this);1==this.comparator.length?this.models=this.sortBy(b):this.models.sort(b);a.silent||this.trigger("reset",
+this,a);return this},pluck:function(a){return f.map(this.models,function(b){return b.get(a)})},reset:function(a,b){a||(a=[]);b||(b={});for(var c=0,d=this.models.length;c<d;c++)this._removeReference(this.models[c]);this._reset();this.add(a,{silent:!0,parse:b.parse});b.silent||this.trigger("reset",this,b);return this},fetch:function(a){a=a?f.clone(a):{};void 0===a.parse&&(a.parse=!0);var b=this,c=a.success;a.success=function(d,e,f){b[a.add?"add":"reset"](b.parse(d,f),a);c&&c(b,d)};a.error=g.wrapError(a.error,
+b,a);return(this.sync||g.sync).call(this,"read",this,a)},create:function(a,b){var c=this,b=b?f.clone(b):{},a=this._prepareModel(a,b);if(!a)return!1;b.wait||c.add(a,b);var d=b.success;b.success=function(e,f){b.wait&&c.add(e,b);d?d(e,f):e.trigger("sync",a,f,b)};a.save(null,b);return a},parse:function(a){return a},chain:function(){return f(this.models).chain()},_reset:function(){this.length=0;this.models=[];this._byId={};this._byCid={}},_prepareModel:function(a,b){a instanceof g.Model?a.collection||
+(a.collection=this):(b.collection=this,a=new this.model(a,b),a._validate(a.attributes,b)||(a=!1));return a},_removeReference:function(a){this==a.collection&&delete a.collection;a.off("all",this._onModelEvent,this)},_onModelEvent:function(a,b,c,d){("add"==a||"remove"==a)&&c!=this||("destroy"==a&&this.remove(b,d),b&&a==="change:"+b.idAttribute&&(delete this._byId[b.previous(b.idAttribute)],this._byId[b.id]=b),this.trigger.apply(this,arguments))}});f.each("forEach,each,map,reduce,reduceRight,find,detect,filter,select,reject,every,all,some,any,include,contains,invoke,max,min,sortBy,sortedIndex,toArray,size,first,initial,rest,last,without,indexOf,shuffle,lastIndexOf,isEmpty,groupBy".split(","),
+function(a){g.Collection.prototype[a]=function(){return f[a].apply(f,[this.models].concat(f.toArray(arguments)))}});g.Router=function(a){a||(a={});a.routes&&(this.routes=a.routes);this._bindRoutes();this.initialize.apply(this,arguments)};var u=/:\w+/g,v=/\*\w+/g,w=/[-[\]{}()+?.,\\^$|#\s]/g;f.extend(g.Router.prototype,g.Events,{initialize:function(){},route:function(a,b,c){g.history||(g.history=new g.History);f.isRegExp(a)||(a=this._routeToRegExp(a));c||(c=this[b]);g.history.route(a,f.bind(function(d){d=
+this._extractParameters(a,d);c&&c.apply(this,d);this.trigger.apply(this,["route:"+b].concat(d));g.history.trigger("route",this,b,d)},this));return this},navigate:function(a,b){g.history.navigate(a,b)},_bindRoutes:function(){if(this.routes){var a=[],b;for(b in this.routes)a.unshift([b,this.routes[b]]);b=0;for(var c=a.length;b<c;b++)this.route(a[b][0],a[b][1],this[a[b][1]])}},_routeToRegExp:function(a){a=a.replace(w,"\\$&").replace(u,"([^/]+)").replace(v,"(.*?)");return RegExp("^"+a+"$")},_extractParameters:function(a,
+b){return a.exec(b).slice(1)}});g.History=function(){this.handlers=[];f.bindAll(this,"checkUrl")};var m=/^[#\/]/,x=/msie [\w.]+/,l=!1;f.extend(g.History.prototype,g.Events,{interval:50,getFragment:function(a,b){if(null==a)if(this._hasPushState||b){var a=window.location.pathname,c=window.location.search;c&&(a+=c)}else a=window.location.hash;a=decodeURIComponent(a);a.indexOf(this.options.root)||(a=a.substr(this.options.root.length));return a.replace(m,"")},start:function(a){if(l)throw Error("Backbone.history has already been started");
+this.options=f.extend({},{root:"/"},this.options,a);this._wantsHashChange=!1!==this.options.hashChange;this._wantsPushState=!!this.options.pushState;this._hasPushState=!(!this.options.pushState||!window.history||!window.history.pushState);var a=this.getFragment(),b=document.documentMode;if(b=x.exec(navigator.userAgent.toLowerCase())&&(!b||7>=b))this.iframe=h('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo("body")[0].contentWindow,this.navigate(a);this._hasPushState?h(window).bind("popstate",
+this.checkUrl):this._wantsHashChange&&"onhashchange"in window&&!b?h(window).bind("hashchange",this.checkUrl):this._wantsHashChange&&(this._checkUrlInterval=setInterval(this.checkUrl,this.interval));this.fragment=a;l=!0;a=window.location;b=a.pathname==this.options.root;if(this._wantsHashChange&&this._wantsPushState&&!this._hasPushState&&!b)return this.fragment=this.getFragment(null,!0),window.location.replace(this.options.root+"#"+this.fragment),!0;this._wantsPushState&&this._hasPushState&&b&&a.hash&&
+(this.fragment=a.hash.replace(m,""),window.history.replaceState({},document.title,a.protocol+"//"+a.host+this.options.root+this.fragment));if(!this.options.silent)return this.loadUrl()},stop:function(){h(window).unbind("popstate",this.checkUrl).unbind("hashchange",this.checkUrl);clearInterval(this._checkUrlInterval);l=!1},route:function(a,b){this.handlers.unshift({route:a,callback:b})},checkUrl:function(){var a=this.getFragment();a==this.fragment&&this.iframe&&(a=this.getFragment(this.iframe.location.hash));
+if(a==this.fragment||a==decodeURIComponent(this.fragment))return!1;this.iframe&&this.navigate(a);this.loadUrl()||this.loadUrl(window.location.hash)},loadUrl:function(a){var b=this.fragment=this.getFragment(a);return f.any(this.handlers,function(a){if(a.route.test(b))return a.callback(b),!0})},navigate:function(a,b){if(!l)return!1;if(!b||!0===b)b={trigger:b};var c=(a||"").replace(m,"");this.fragment==c||this.fragment==decodeURIComponent(c)||(this._hasPushState?(0!=c.indexOf(this.options.root)&&(c=
+this.options.root+c),this.fragment=c,window.history[b.replace?"replaceState":"pushState"]({},document.title,c)):this._wantsHashChange?(this.fragment=c,this._updateHash(window.location,c,b.replace),this.iframe&&c!=this.getFragment(this.iframe.location.hash)&&(b.replace||this.iframe.document.open().close(),this._updateHash(this.iframe.location,c,b.replace))):window.location.assign(this.options.root+a),b.trigger&&this.loadUrl(a))},_updateHash:function(a,b,c){c?a.replace(a.toString().replace(/(javascript:|#).*$/,
+"")+"#"+b):a.hash=b}});g.View=function(a){this.cid=f.uniqueId("view");this._configure(a||{});this._ensureElement();this.initialize.apply(this,arguments);this.delegateEvents()};var y=/^(\S+)\s*(.*)$/,p="model,collection,el,id,attributes,className,tagName".split(",");f.extend(g.View.prototype,g.Events,{tagName:"div",$:function(a){return this.$el.find(a)},initialize:function(){},render:function(){return this},remove:function(){this.$el.remove();return this},make:function(a,b,c){a=document.createElement(a);
+b&&h(a).attr(b);c&&h(a).html(c);return a},setElement:function(a,b){this.$el=h(a);this.el=this.$el[0];!1!==b&&this.delegateEvents();return this},delegateEvents:function(a){if(a||(a=j(this,"events"))){this.undelegateEvents();for(var b in a){var c=a[b];f.isFunction(c)||(c=this[a[b]]);if(!c)throw Error('Event "'+a[b]+'" does not exist');var d=b.match(y),e=d[1],d=d[2],c=f.bind(c,this),e=e+(".delegateEvents"+this.cid);""===d?this.$el.bind(e,c):this.$el.delegate(d,e,c)}}},undelegateEvents:function(){this.$el.unbind(".delegateEvents"+
+this.cid)},_configure:function(a){this.options&&(a=f.extend({},this.options,a));for(var b=0,c=p.length;b<c;b++){var d=p[b];a[d]&&(this[d]=a[d])}this.options=a},_ensureElement:function(){if(this.el)this.setElement(this.el,!1);else{var a=j(this,"attributes")||{};this.id&&(a.id=this.id);this.className&&(a["class"]=this.className);this.setElement(this.make(this.tagName,a),!1)}}});g.Model.extend=g.Collection.extend=g.Router.extend=g.View.extend=function(a,b){var c=z(this,a,b);c.extend=this.extend;return c};
+var A={create:"POST",update:"PUT","delete":"DELETE",read:"GET"};g.sync=function(a,b,c){var d=A[a],e={type:d,dataType:"json"};c.url||(e.url=j(b,"url")||o());if(!c.data&&b&&("create"==a||"update"==a))e.contentType="application/json",e.data=JSON.stringify(b.toJSON());g.emulateJSON&&(e.contentType="application/x-www-form-urlencoded",e.data=e.data?{model:e.data}:{});if(g.emulateHTTP&&("PUT"===d||"DELETE"===d))g.emulateJSON&&(e.data._method=d),e.type="POST",e.beforeSend=function(a){a.setRequestHeader("X-HTTP-Method-Override",
+d)};"GET"!==e.type&&!g.emulateJSON&&(e.processData=!1);return h.ajax(f.extend(e,c))};g.wrapError=function(a,b,c){return function(d,e){e=d===b?e:d;a?a(b,e,c):b.trigger("error",b,e,c)}};var q=function(){},z=function(a,b,c){var d;d=b&&b.hasOwnProperty("constructor")?b.constructor:function(){a.apply(this,arguments)};f.extend(d,a);q.prototype=a.prototype;d.prototype=new q;b&&f.extend(d.prototype,b);c&&f.extend(d,c);d.prototype.constructor=d;d.__super__=a.prototype;return d},j=function(a,b){return!a||!a[b]?
+null:f.isFunction(a[b])?a[b]():a[b]},o=function(){throw Error('A "url" property or function must be specified');}}).call(this);
diff --git a/static/images/ui-bg_diagonals-thick_18_b81900_40x40.png b/static/images/ui-bg_diagonals-thick_18_b81900_40x40.png
deleted file mode 100644
index 954e22d..0000000
--- a/static/images/ui-bg_diagonals-thick_18_b81900_40x40.png
+++ /dev/null
diff --git a/static/images/ui-bg_diagonals-thick_20_666666_40x40.png b/static/images/ui-bg_diagonals-thick_20_666666_40x40.png
deleted file mode 100644
index 64ece57..0000000
--- a/static/images/ui-bg_diagonals-thick_20_666666_40x40.png
+++ /dev/null
diff --git a/static/images/ui-bg_diagonals-thick_90_eeeeee_40x40.png b/static/images/ui-bg_diagonals-thick_90_eeeeee_40x40.png
new file mode 100644
index 0000000..6348115
--- /dev/null
+++ b/static/images/ui-bg_diagonals-thick_90_eeeeee_40x40.png
diff --git a/static/images/ui-bg_flat_10_000000_40x100.png b/static/images/ui-bg_flat_10_000000_40x100.png
deleted file mode 100644
index abdc010..0000000
--- a/static/images/ui-bg_flat_10_000000_40x100.png
+++ /dev/null
diff --git a/static/images/ui-bg_flat_15_cd0a0a_40x100.png b/static/images/ui-bg_flat_15_cd0a0a_40x100.png
new file mode 100644
index 0000000..7680b54
--- /dev/null
+++ b/static/images/ui-bg_flat_15_cd0a0a_40x100.png
diff --git a/static/images/ui-bg_glass_100_ebebeb_1x400.png b/static/images/ui-bg_glass_100_ebebeb_1x400.png
new file mode 100644
index 0000000..19814f9
--- /dev/null
+++ b/static/images/ui-bg_glass_100_ebebeb_1x400.png
diff --git a/static/images/ui-bg_glass_100_f6f6f6_1x400.png b/static/images/ui-bg_glass_100_f6f6f6_1x400.png
deleted file mode 100644
index 9b383f4..0000000
--- a/static/images/ui-bg_glass_100_f6f6f6_1x400.png
+++ /dev/null
diff --git a/static/images/ui-bg_glass_100_fdf5ce_1x400.png b/static/images/ui-bg_glass_100_fdf5ce_1x400.png
deleted file mode 100644
index a23baad..0000000
--- a/static/images/ui-bg_glass_100_fdf5ce_1x400.png
+++ /dev/null
diff --git a/static/images/ui-bg_glass_50_8f8f8f_1x400.png b/static/images/ui-bg_glass_50_8f8f8f_1x400.png
new file mode 100644
index 0000000..7865244
--- /dev/null
+++ b/static/images/ui-bg_glass_50_8f8f8f_1x400.png
diff --git a/static/images/ui-bg_glass_65_ffffff_1x400.png b/static/images/ui-bg_glass_65_ffffff_1x400.png
deleted file mode 100644
index 42ccba2..0000000
--- a/static/images/ui-bg_glass_65_ffffff_1x400.png
+++ /dev/null
diff --git a/static/images/ui-bg_glass_80_e6e6e6_1x400.png b/static/images/ui-bg_glass_80_e6e6e6_1x400.png
new file mode 100644
index 0000000..abaa23f
--- /dev/null
+++ b/static/images/ui-bg_glass_80_e6e6e6_1x400.png
diff --git a/static/images/ui-bg_gloss-wave_35_f6a828_500x100.png b/static/images/ui-bg_gloss-wave_35_f6a828_500x100.png
deleted file mode 100644
index 39d5824..0000000
--- a/static/images/ui-bg_gloss-wave_35_f6a828_500x100.png
+++ /dev/null
diff --git a/static/images/ui-bg_highlight-hard_100_f5f5f5_1x100.png b/static/images/ui-bg_highlight-hard_100_f5f5f5_1x100.png
new file mode 100644
index 0000000..4ec3ee1
--- /dev/null
+++ b/static/images/ui-bg_highlight-hard_100_f5f5f5_1x100.png
diff --git a/static/images/ui-bg_highlight-hard_70_000000_1x100.png b/static/images/ui-bg_highlight-hard_70_000000_1x100.png
new file mode 100644
index 0000000..d588297
--- /dev/null
+++ b/static/images/ui-bg_highlight-hard_70_000000_1x100.png
diff --git a/static/images/ui-bg_highlight-soft_100_e6e6e6_1x100.png b/static/images/ui-bg_highlight-soft_100_e6e6e6_1x100.png
new file mode 100644
index 0000000..b7b4076
--- /dev/null
+++ b/static/images/ui-bg_highlight-soft_100_e6e6e6_1x100.png
diff --git a/static/images/ui-bg_highlight-soft_100_eeeeee_1x100.png b/static/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
deleted file mode 100644
index f127367..0000000
--- a/static/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
+++ /dev/null
diff --git a/static/images/ui-bg_highlight-soft_25_ffef8f_1x100.png b/static/images/ui-bg_highlight-soft_25_ffef8f_1x100.png
new file mode 100644
index 0000000..0de3275
--- /dev/null
+++ b/static/images/ui-bg_highlight-soft_25_ffef8f_1x100.png
diff --git a/static/images/ui-bg_highlight-soft_75_ffe45c_1x100.png b/static/images/ui-bg_highlight-soft_75_ffe45c_1x100.png
deleted file mode 100644
index 359397a..0000000
--- a/static/images/ui-bg_highlight-soft_75_ffe45c_1x100.png
+++ /dev/null
diff --git a/static/images/ui-icons_ffd27a_256x240.png b/static/images/ui-icons_2e83ff_256x240.png
index e117eff..09d1cdc 100644
--- a/static/images/ui-icons_ffd27a_256x240.png
+++ b/static/images/ui-icons_2e83ff_256x240.png
diff --git a/static/images/ui-icons_444_256x240.png b/static/images/ui-icons_444_256x240.png
new file mode 100644
index 0000000..e835325
--- /dev/null
+++ b/static/images/ui-icons_444_256x240.png
diff --git a/static/images/ui-icons_222222_256x240.png b/static/images/ui-icons_757575_256x240.png
index b273ff1..f7e09d6 100644
--- a/static/images/ui-icons_222222_256x240.png
+++ b/static/images/ui-icons_757575_256x240.png
diff --git a/static/images/ui-icons_228ef1_256x240.png b/static/images/ui-icons_858585_256x240.png
index a641a37..e0df3a3 100644
--- a/static/images/ui-icons_228ef1_256x240.png
+++ b/static/images/ui-icons_858585_256x240.png
diff --git a/static/images/ui-icons_ef8c08_256x240.png b/static/images/ui-icons_9c9c9c_256x240.png
index 2675cae..ba230cb 100644
--- a/static/images/ui-icons_ef8c08_256x240.png
+++ b/static/images/ui-icons_9c9c9c_256x240.png
diff --git a/static/images/ui-icons_edef01_256x240.png b/static/images/ui-icons_edef01_256x240.png
new file mode 100644
index 0000000..55de1f9
--- /dev/null
+++ b/static/images/ui-icons_edef01_256x240.png
diff --git a/static/index.html b/static/index.html
index fd0dcb2..587b0b2 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,9 +6,14 @@
 	<script type="text/javascript" src="/static/jquery-ui-1.8.18.custom.min.js"></script>
 	<script type="text/javascript" src="/static/soundmanager2-jsmin.js"></script>
 	<script type="text/javascript" src="/static/handlebars-1.0.0.beta.6.js"></script>
+	<script type="text/javascript" src="/static/underscore-min.js"></script>
+	<script type="text/javascript" src="/static/backbone-min.js"></script>
+	<script type="text/javascript" src="/static/backbone-localstorage.js"></script>
+	<script type="text/javascript" src="/static/sound.js"></script>
+	<script type="text/javascript" src="/static/playlist.js"></script>
 	<script type="text/javascript" src="/static/init.js"></script>
-	<link rel="stylesheet" href="/static/style.css" type="text/css" />
 	<link rel="stylesheet" href="/static/jquery-ui-1.8.18.custom.css" type="text/css" />
+	<link rel="stylesheet" href="/static/style.css" type="text/css" />
 </head>
 <body>
 	<div id="content">
@@ -19,8 +24,20 @@
 			<a href="javascript:pause()"><img src="/static/icons/control_pause_blue.png" alt="Play" /></a>
 			<div id="progress"></div>
 		</div>
-		<ul id="directory-list">
-		</ul>
+		<div id="tabs">
+			<ul>
+				<li><a href="#directory-tab">Directories</a></li>
+				<li><a href="#playlist-tab">Playlist</a></li>
+			</ul>
+			<div id="directory-tab">
+				<ul id="directory-list">
+				</ul>
+			</div>
+			<div id="playlist-tab">
+				<ul id="playlist">
+				</ul>
+			</div>
+		</div>
 	</div>
 </body>
 </html>
diff --git a/static/init.js b/static/init.js
index 4a7febd..6102e29 100644
--- a/static/init.js
+++ b/static/init.js
@@ -70,46 +70,7 @@ function load_directory(dir_id, dir_item) {
 			var id = el.attr('id');
 			if(item.type == "track") {
 				$(el, 'a').click(function() {
-					el.addClass('loading');
-					if(sound) {
-						sound.stop();
-						sound.destruct();
-					}
-					sound = soundManager.createSound({
-						id: 'audio',
-						url: '/track/' + item.id,
-						whileloading: function() {
-							$('#status').text('Loading... ' + this.bytesLoaded);
-						},
-						onload: function(success) {
-							el.removeClass('loading').removeClass('nocache');
-							slider = $('#progress').slider({
-								max: sound.duration,
-								slide: function(event, ui) {
-									if(event.originalEvent)
-										sound.setPosition(ui.value);
-								}
-							});
-						},
-						whileplaying: function() {
-							$('#progress').slider("value", sound.position);
-							$('#' + id).addClass('playing');
-							var seconds = (this.position / 1000).toFixed(0);
-							var minutes = Math.floor(seconds / 60).toFixed(0);
-							seconds %= 60;
-							if(seconds < 10)
-								seconds = '0' + seconds;
-							var pos = minutes + ':' + seconds;
-							$('#status').text(pos);
-						},
-						onstop: function() {
-							$('#' + id).removeClass('playing');
-						},
-						onfinish: function() {
-							$('#' + id).removeClass('playing');
-						}
-					});
-					sound.play();
+					playlist.add(item);
 					return false;
 				});
 			} else if(item.type == "dir") {
@@ -125,6 +86,7 @@ function load_directory(dir_id, dir_item) {
 }
 
 $(document).ready(function() {
+	$('#tabs').tabs();
 	preload_images();
 	load_directory(0);
 	$('#progress').slider();
diff --git a/static/jquery-ui-1.8.18.custom.css b/static/jquery-ui-1.8.18.custom.css
index 1e401e4..1e57a7c 100644
--- a/static/jquery-ui-1.8.18.custom.css
+++ b/static/jquery-ui-1.8.18.custom.css
@@ -47,35 +47,35 @@
  *
  * http://docs.jquery.com/UI/Theming/API
  *
- * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+ * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=e6e6e6&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=100&borderColorHeader=cfcfcf&fcHeader=222222&iconColorHeader=444&bgColorContent=f5f5f5&bgTextureContent=04_highlight_hard.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=303030&iconColorContent=9c9c9c&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=80&borderColorDefault=c9c9c9&fcDefault=66696b&iconColorDefault=757575&bgColorHover=ebebeb&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=ababab&fcHover=525252&iconColorHover=858585&bgColorActive=8f8f8f&bgTextureActive=02_glass.png&bgImgOpacityActive=50&borderColorActive=8c8c8c&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=ffef8f&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=25&borderColorHighlight=f9dd34&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=cd0a0a&bgTextureError=01_flat.png&bgImgOpacityError=15&borderColorError=cd0a0a&fcError=ffffff&iconColorError=edef01&bgColorOverlay=eeeeee&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=90&opacityOverlay=80&bgColorShadow=000000&bgTextureShadow=04_highlight_hard.png&bgImgOpacityShadow=70&opacityShadow=30&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px
  */
 
 
 /* Component containers
 ----------------------------------*/
-.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
+.ui-widget { font-family: sans-serif; font-size: 1.1em; }
 .ui-widget .ui-widget { font-size: 1em; }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
-.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
-.ui-widget-content a { color: #333333; }
-.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
-.ui-widget-header a { color: #ffffff; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: sans-serif; font-size: 1em; }
+.ui-widget-content { border: 1px solid #dddddd; background: #f5f5f5 url(images/ui-bg_highlight-hard_100_f5f5f5_1x100.png) 50% top repeat-x; color: #303030; }
+.ui-widget-content a { color: #303030; }
+.ui-widget-header { border: 1px solid #cfcfcf; background: #e6e6e6 url(images/ui-bg_highlight-soft_100_e6e6e6_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
+.ui-widget-header a { color: #222222; }
 
 /* Interaction states
 ----------------------------------*/
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; }
-.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; }
-.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
-.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; }
-.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #c9c9c9; background: #e6e6e6 url(images/ui-bg_glass_80_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #66696b; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #66696b; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #ababab; background: #ebebeb url(images/ui-bg_glass_100_ebebeb_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #525252; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #525252; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #8c8c8c; background: #8f8f8f url(images/ui-bg_glass_50_8f8f8f_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; }
 .ui-widget :active { outline: none; }
 
 /* Interaction Cues
 ----------------------------------*/
-.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fed22f; background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color: #363636; }
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #f9dd34; background: #ffef8f url(images/ui-bg_highlight-soft_25_ffef8f_1x100.png) 50% top repeat-x; color: #363636; }
 .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
-.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #cd0a0a url(images/ui-bg_flat_15_cd0a0a_40x100.png) 50% 50% repeat-x; color: #ffffff; }
 .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
 .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
 .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
@@ -86,14 +86,14 @@
 ----------------------------------*/
 
 /* states and images */
-.ui-ico