From f3146522fc9e98aac8aa2ac189f2dc596d4d3534 Mon Sep 17 00:00:00 2001
From: Matthieu Lalonde <matth_web_git@lalonde.me>
Date: Fri, 2 Nov 2012 00:25:41 -0400
Subject: [PATCH] Moar, always moar commit messages... I'm sorry

---
 index.html                                  |  34 +--
 resources/js/app.js                         | 216 ++++++++++++++++----
 resources/js/collections/server.js          |  23 ++-
 resources/js/main.js                        |   2 +-
 resources/js/models/client.js               |  30 ++-
 resources/js/models/server.js               |  17 +-
 resources/js/views/app.js                   |  11 +-
 resources/js/views/footer.js                |  29 ++-
 resources/js/views/list.js                  |  18 ++
 resources/js/views/sidebar.js               |  67 +++---
 resources/templates/app/modal-loading.html  |  14 ++
 resources/templates/app/modal-login.html    |  22 ++
 resources/templates/footer/modal-about.html |  26 +++
 13 files changed, 382 insertions(+), 127 deletions(-)
 create mode 100644 resources/templates/app/modal-loading.html
 create mode 100644 resources/templates/app/modal-login.html
 create mode 100644 resources/templates/footer/modal-about.html
diff --git a/index.html b/index.html
index 094b25c..f706d06 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@
  		@import "/resources/css/player.css";
 	</style>
 
-	<script src="resources/js/libs/utils.js">/**/</script>
-	<script data-main="resources/js/main" src="resources/vendors/require/require.min.js">/**/</script>
+	<script src="/resources/js/libs/utils.js">/**/</script>
+	<script data-main="/resources/js/main" src="/resources/vendors/require/require.min.js">/**/</script>
 </head>
 <body>
 	<div class="ui-layout-north" id="wrapperPlayer">
@@ -104,7 +104,7 @@
 	<div class="ui-layout-south row-fluid" id="wrapperFooter">
 		<div id="wrapperFooterLeft" class="span4 row-fluid">
 			<div class="span2">
-				<button class="btn btn-mini btn-inverse" type="button" data-toggle="side-bar"><i class="icon-chevron-right icon-white"></i></button>
+				<button class="btn btn-mini btn-inverse" type="button" data-toggle="side-bar"><i class="icon-chevron-left icon-white"></i></button>
 			</div>
 			<button class="btn btn-mini btn-inverse" type="button" data-toggle="button"><i class="icon-random icon-white"></i></button>
 			<button class="btn btn-mini btn-inverse" type="button" data-toggle="button"><i class="icon-retweet icon-white"></i></button>
@@ -195,34 +195,6 @@
 		</div>
 	</script>
 
-	<script type="text/html" id="_tmplModalAboutDaapr">
-		<div id="modalAboutDaapr" data-closable="true">
-			<div class="overlay"></div>
-			<div class="modal" data-show="true" tabindex="-1" role="dialog" aria-hidden="true">
-				<div class="modal-header">
-					<h3 id="myModalLabel">About DAAPr<sup>3</sup></h3>
-				</div>
-				<div class="modal-body" style="font-size: 1.2em">
-					<p>
-						<b>DAAPr</b>, in its cubic iteration, is a web client for the 
-						<a href="http://en.wikipedia.org/wiki/Digital_Audio_Access_Protocol" title="Digital Audio Access Protocol">DAAP</a> media sharing protocol.
-						It is 100% client side javascript built using <a href="http://backbonejs.org" title="Backbone.js">Backbone.js</a>, 
-						<a href="http://jquery.com">jQuery</a> and <a href="http://twitter.github.com/bootstrap/" title="Twitter Bootstrap">Bootstrap</a>.
-					</p>
-					<p>
-						<a href="https://matth.lalonde.me/contact/">Feedback</a> is appreciated.
-					</p>
-					<p>
-						This software is <a href="http://en.wikipedia.org/wiki/Copyleft">Copyleft</a> 2012 <a href="https://matth.lalonde.me">Matthieu Lalonde</a> under <a href="http://www.gnu.org/copyleft/lesser.html">LGPL</a>, no guarantees whatsoever.
-					</p>
-				</div>
-				<div class="modal-footer">
-					<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Close</button>
-				</div>
-			</div>
-		</div>
-	</script>
-
 	<script type="text/html" id="_tmplModalFatal">
 		<div id="modalFatal">
 			<div class="overlay"></div>
diff --git a/resources/js/app.js b/resources/js/app.js
index 20a9eac..3755d7d 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -8,6 +8,11 @@
 // Filename: app.js
 define([
 	"underscore"
+	, "jquery"
+	, "backbone"
+	, "async"
+
+	, "config"
 
 	, "views/app"
 	, "views/footer"
@@ -15,11 +20,21 @@ define([
 	, "views/player"
 	, "views/main"
 
-//	, "models/client"
-	, "models/dmap"
+	, "models/client"
+//	, "models/dmap"
+
+	, "collections/server"
+
+	, "text!../templates/app/modal-loading.html"
+	, "text!../templates/app/modal-login.html"
 ],
 function(
 _
+, $
+, Backbone
+, async
+
+, Config
 
 , AppView
 , FooterView
@@ -27,47 +42,164 @@ _
 , PlayerView
 , MainView
 
-//, ClientModel
-, DMAPModel
+, ClientModel
+//, DMAPModel
+, ServerCollection
+
+, tmplModalLoading
+, tmplModalLogin
 ) {
-"use strict";
-
-	var init = function() {
-		console.log("app.js::init()");
-
-		// Setup underscore templates with mustache styles
-		_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
-
-		this.Views			= {};
-
-		this.Views.SideBar	= new SideBarView();
-		this.Views.Player	= new PlayerView();
-		this.Views.Main		= new MainView();
-		this.Views.App		= new AppView();
-		this.Views.Footer	= new FooterView(this.Views.App);
-/*
-		var client = new ClientModel({
-			hostname:	"daap.localhost"
-			, protocol:	"http"
-			, port:		80
-			, password:	"lawl"
-		});
-
-		client.on("unauthorized", function __client_unauthorized() {
-			console.log(arguments);
-		});
-
-		client.on("inited", function (collections) {
-			console.log(client.url(), arguments);
-
-			var item = collections.databases[collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing").get(107);
-			console.log(item, item.toJSON(), collections.databases[collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing").toJSON());
-		});
- */
-		//client.init();
-
-		return this;
+	"use strict";
+
+	return {
+		init:	function() {
+			_.bindAll(this
+				, "_serverInit"
+			);
+
+			var that	= this
+			;
+
+			console.log("app.js::init()");
+
+			// Setup underscore templates with mustache styles
+			_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
+
+			var Router = Backbone.Router.extend({
+				routes: {
+					"playlist":				"_routerActionPlaylist"
+					, "servers":			"_routerActionClient"
+					, "items/:id":			"_routerActionItem"
+					, ":server/items/:id":	"_routerActionServerItem"
+					//"*actions": "defaultRoute" // matches http://example.com/#anything-here
+				}
+			});
+
+			this.Router			= new Router();
+
+			Backbone.history.start({
+				pushState: true
+				, root: "/"
+			});
+
+			this.servers	= new ServerCollection();
+
+			this.servers.on("add", function (server) {
+				server.save();
+			});
+
+			this.servers.on("client:unauthorized", function __fnAppEventClientUnauthorized(event) {
+				var client		= event.shift()
+				;
+				console.log(arguments);
+			});
+
+			this.loadingStates	= 0;
+			this.loadingModal	= $(tmplModalLoading);
+			this.loadingTimeout	= null;
+
+			async.waterfall([
+				function __asyncAppFetchServerCollection(callback) {
+					that.servers.fetch({
+						success:	function (collection, modelsAttributes) {
+							if (modelsAttributes.length === 0) {
+								console.info("Adding default daap server");
+								collection.add(Config.daap);
+							}
+
+							callback(null, collection);
+						}
+
+						, error: callback
+					});
+				}
+
+				, function __asyncAppAttachStateEvents(servers, callback) {
+					async.forEach(that.servers.models, function (server) {
+						that._serverInit(server);
+					});
+
+					that.servers.on("add", function (server) {
+						that._serverInit(server);
+					});
+
+					callback(null, servers);
+				}
+			]
+			, function __asyncAppDependenciesReady(err, result) {
+				that.Views			= {};
+
+				that.Views.SideBar	= new SideBarView(that.servers);
+				that.Views.Player	= new PlayerView();
+				that.Views.Main		= new MainView();
+				that.Views.App		= new AppView();
+				that.Views.Footer	= new FooterView();
+
+				that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar() {
+					that.Views.App.toggleSideBar();
+				});
+
+				that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) {
+					$(event.target).remove();
+				});
+
+			});
+
+			return this;
+		}
+
+		, _routerActionPlaylist:	function () {
+
+		}
+
+		, _routerActionClient:		function (hostname) {
+
+		}
+
+		, _routerActionItem:		function (item) {
+
+		}
+
+		, _routerActionServerItem:	function (server, item) {
+
+		}
+
+		, _serverInit:	function(server) {
+			var that	= this
+			;
+
+			server.client.on("state", function __fnAppEventClientStateChange(client, state) {
+				console.log(state);
+				if (state === ClientModel.defaults._states.loading) {
+
+					if (that.loadingStates === 0) {
+						that.loadingTimeout	= setTimeout(function __fnAppTimeoutLoadingStat() {
+							that.loadingModal.modal();
+							that.loadingTimeout	= null;
+						}, 800);
+					}
+
+					that.loadingStates++;
+				} else if (state === ClientModel.defaults._states.loaded) {
+					that.loadingStates--;
+
+					if (that.loadingStates === 0) {
+						clearTimeout(that.loadingTimeout);
+						that.loadingModal.modal("hide");
+					}
+				}
+			});
+
+			server.client.on("unauthorized", function __fnAppEventClientUnauthorized(client, xhr) {
+				var tmplHtml	= _.template(tmplModalLogin)({ dmap_itemname: client.url() })
+				,	$tmpl		= $(tmplHtml)
+				;
+
+				$tmpl.modal();
+			});
+
+			server.client.init();
+		}
 	};
 
-	return { init: init };
 });
diff --git a/resources/js/collections/server.js b/resources/js/collections/server.js
index 38bc4ba..d069ac5 100644
--- a/resources/js/collections/server.js
+++ b/resources/js/collections/server.js
@@ -15,14 +15,29 @@ define([
 , function (_, Backbone, ServerModel) {
 	"use strict";
 
-	return Backbone.Collection.extend({
+	var Server		= Backbone.Collection.extend({
 		model:			ServerModel
 
 		, localStorage:	new Backbone.LocalStorage("daap-servers")
-/*
+
 		, initialize:	function () {
-			return this.__super__.initialize.call(this, arguments);
+			_.bindAll(this, "relayClientTrigger");
+
+			//this.on("all", this.relayClientTrigger);
+
+			return Server.__super__.initialize.call(this, arguments);
 		}
-		*/
+/*
+		, relayClientTrigger:	function() {
+			var eventName	=  arguments[0]
+			;
+console.log(eventName);
+			if (eventName.indexOf("client") === 0) {
+				delete arguments[0];
+				//this.trigger(eventName, _.values(arguments));
+			}
+		}*/
 	});
+
+	return Server;
 });
\ No newline at end of file
diff --git a/resources/js/main.js b/resources/js/main.js
index 1d83fac..418217d 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -71,7 +71,7 @@ require.config({
 		//, "config":					"config"
 	}
 
-	, baseUrl: "./resources/js"
+	, baseUrl: "/resources/js"
 	, urlArgs: "v=0.3.2"
 });
 
diff --git a/resources/js/models/client.js b/resources/js/models/client.js
index 3a8bf88..a870a43 100644
--- a/resources/js/models/client.js
+++ b/resources/js/models/client.js
@@ -227,8 +227,9 @@ define([
 						callback(null, this.response);
 					} else if (this.status === 401) {
 						that.setState("unauthorized");
-						that.trigger("unauthorized", [this, e]);
+						that.trigger("unauthorized", that, [this, e]);
 					} else {
+						that.setState("failed");
 						callback(e.status);
 					}
 				};
@@ -297,7 +298,12 @@ define([
 			var that	= this
 			;
 
+
+			this.setState("loading");
+
 			that.fetchXHR("/databases", function __fetchDatabasesCallback(content) {
+				that.setState("loaded");
+
 				that.collections.databasesInfo		= new DMAPModel(content, {
 					contentCodes:	that.collections.contentCodes
 				});
@@ -316,7 +322,12 @@ define([
 				dbId	= 1;
 			}
 
+
+			this.setState("loading");
+
 			that.fetchXHR("/databases/" + dbId + "/items", function __fetchDatabaseCallback(content) {
+				that.setState("loaded");
+
 				that.collections.databases[dbId]	= new DMAPModel(content, {
 					contentCodes:	that.collections.contentCodes
 				});
@@ -335,7 +346,12 @@ define([
 				dbId	= 1;
 			}
 
+
+			this.setState("loading");
+
 			that.fetchXHR("/databases/" + dbId + "/containers", function __fetchPlaylistsCallback(content) {
+				that.setState("loaded");
+
 				that.collections.playlistsInfo		= new DMAPModel(content, {
 					contentCodes:	that.collections.contentCodes
 				});
@@ -367,7 +383,12 @@ define([
 			requestUri	+= "/items";
 			requestUri	+= "?meta=dmap.itemid,dmap.persistentid,dmap.containeritemid";
 
+
+			this.setState("loading");
+
 			that.fetchXHR(requestUri, function __fetchPlaylistCallback(content) {
+				that.setState("loaded");
+
 				if (!_.isArray(that.collections.playlists[dbId])) {
 					that.collections.playlists[dbId]	= [];
 				}
@@ -400,7 +421,11 @@ define([
 			requestUri	+= "?meta=dmap.itemid,dmap.persistentid,dmap.containeritemid";
 
 
+			this.setState("loading");
+
 			that.fetchXHR(requestUri, function __fetchBrowseCallback(content) {
+				that.setState("loaded");
+
 				that.collections.browser[type][dbId]	= new DMAPModel(content, {
 					contentCodes:	that.collections.contentCodes
 				});
@@ -458,7 +483,8 @@ define([
 			, state:			0
 
 			, _states:	{
-				disconnected:	0
+				failed:			-1
+				, disconnected:	0
 				, timedout:		1
 				, connecting:	2
 				, unauthorized:	3
diff --git a/resources/js/models/server.js b/resources/js/models/server.js
index b07da90..3d1bbff 100644
--- a/resources/js/models/server.js
+++ b/resources/js/models/server.js
@@ -16,6 +16,7 @@ define([
 
 	var Model	= Backbone.Model.extend({
 		client:			null
+		, idAttribute:	"hostname"
 
 		, initialize:		function (attributes, options) {
 			_.bindAll(this, "destroy", "getName", "relayEvent");
@@ -30,21 +31,23 @@ define([
 					// We could save here, but it is debatable if we want to leep the name attribute locally
 					// that.save();
 				}
+
+				//that.client.fetchDatabases(that.client.fetchDatabase);
 			});
 
-			this.client.on("all", this.relayEvent);
+			//this.client.on("all", this.relayEvent);
 
 			return Model.__super__.initialize.call(this, arguments);
 		}
-
+/*
 		, relayEvent:		function () {
-			var args	= _.values(arguments)
-			, eventName	= args.shift()
+			var eventName	=  arguments[0]
 			;
-
-			this.trigger("client:" + eventName, args);
+			delete arguments[0];
+console.log(eventName);
+			this.trigger("client:" + eventName, _.values(arguments));
 		}
-
+ */
 		, destroy:			function () {
 			if (this.client && this.client.deinit) {
 				this.client.deinit();
diff --git a/resources/js/views/app.js b/resources/js/views/app.js
index 1c46f73..2fc49da 100644
--- a/resources/js/views/app.js
+++ b/resources/js/views/app.js
@@ -6,11 +6,12 @@
 /*jslint devel:true */
 
 define([
-	"jquery"
+	"underscore"
+	, "jquery"
 	, "backbone"
 	, "jquery-layout"
 ]
-, function ($, Backbone) {
+, function (_, $, Backbone) {
 	"use strict";
 
 	return Backbone.View.extend({
@@ -23,7 +24,7 @@ define([
 		}
 
 		, initialize: function() {
-			//_.bindAll(this);
+			_.bindAll(this, "toggleSideBar");
 
 			var that	= this;
 
@@ -55,5 +56,9 @@ define([
 				}
 			});
 		}
+
+		, toggleSideBar:	function () {
+			this.layout.toggle("west");
+		}
 	});
 });
\ No newline at end of file
diff --git a/resources/js/views/footer.js b/resources/js/views/footer.js
index a1314d5..88dba71 100644
--- a/resources/js/views/footer.js
+++ b/resources/js/views/footer.js
@@ -5,22 +5,29 @@
 /*jslint browser:true */
 /*jslint devel:true */
 define([
-	"jquery"
+	"underscore"
+	, "jquery"
 	, "backbone"
 	, "bootstrap"
+
+	, "text!../../templates/footer/modal-about.html"
 ]
-, function ($, Backbone, Bootstrap) {
+, function (_, $, Backbone, Bootstrap, tmplModalAbout) {
 	"use strict";
 
-	return Backbone.View.extend({
-		el:		$("div#wrapperFooter")
+	var View = Backbone.View.extend({
+		el:					$("div#wrapperFooter")
+
+		, events:			{
+			"click button[data-target='modalAboutDaapr']":	"_buttonAboutClick"
+		}
 
-		, initialize:		function (AppView) {
+		, initialize:		function () {
 			var that	= this
 			;
 
 			that.$el.delegate("button[data-toggle='side-bar']", "click", function (event) {
-				AppView.layout.toggle("west");
+				that.trigger("toggle:sidebar");
 
 				var $target		= $(event.target);
 				if (event.target.tagName === "BUTTON") {
@@ -30,6 +37,16 @@ define([
 				$target.toggleClass("icon-chevron-right");
 				$target.toggleClass("icon-chevron-left");
 			});
+
+		}
+
+		, _buttonAboutClick:		function(event) {
+			var $modal	= $(tmplModalAbout)
+			;
+
+			$modal.modal();
 		}
 	});
+
+	return View;
 });
\ No newline at end of file
diff --git a/resources/js/views/list.js b/resources/js/views/list.js
index e69de29..96b3edd 100644
--- a/resources/js/views/list.js
+++ b/resources/js/views/list.js
@@ -0,0 +1,18 @@
+/*jslint laxbreak:true */
+/*jslint laxcomma:true */
+/*jslint loopfunc:true */
+/*jslint strict:true */
+/*jslint browser:true */
+/*jslint devel:true */
+define([
+	"jquery"
+	, "backbone"
+	, "bootstrap"
+]
+, function ($, Backbone, Bootstrap) {
+	"use strict";
+
+	return Backbone.View.extend({
+		
+	});
+});
\ No newline at end of file
diff --git a/resources/js/views/sidebar.js b/resources/js/views/sidebar.js
index 1e5640a..ca80965 100644
--- a/resources/js/views/sidebar.js
+++ b/resources/js/views/sidebar.js
@@ -43,28 +43,29 @@ _
 			"click > ul > li:last-child > span > a.sidebar-list-action":	"_addServerItem"
 		}
 
-		, initialize:	function () {
+		, initialize:	function (servers) {
 			_.bindAll(this, "renderServerItem", "_addServerItem");
 			var that		= this
 			, serverModel	= null
 			;
 
-			this.servers	= new ServerCollection();
+			this.servers	= servers;
 
-			this.servers.fetch({
-				success:	function (collection, modelsAttributes) {
-					if (modelsAttributes.length === 0) {
-						console.info("Adding default daap server");
-						collection.add(Config.daap);
-					}
-
-					async.forEach(collection.models, that.renderServerItem);
-				}
+			async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() {
+				that.trigger("rendered");
 			});
 
 			this.servers.on("add", function (server) {
 				that.renderServerItem(server);
-				server.save();
+			});
+
+			this.$el.delegate("> ul > li:first-child", "dblclick", function __fnSideBarEventDblclickPlaylist(event) {
+				Backbone.Router.prototype.navigate("playlist", false);
+
+				setTimeout(function __fnSideBarViewTimeoutTogglePlaylistClass() {
+					that.$el.find("li.selected").removeClass("selected");
+					$(event.target).parents("ul:first").find("> li:first-child").addClass("selected");
+				}, 10);
 			});
 		}
 
@@ -126,13 +127,11 @@ _
 				} else {
 					modalEl.modal("hide");
 
-					setTimeout(function __fnSaveServerModel() {
-						that.servers.add({
-							protocol:	protocol
-							, port:		port
-							, hostname:	domain
-						});
-					}, 10);
+					that.servers.add({
+						protocol:	protocol
+						, port:		port
+						, hostname:	domain
+					});
 				}
 
 				return false;
@@ -159,12 +158,10 @@ _
 				}
 			});
 
-			item.on("client:state", function __fnSideBarViewEventClientState(event) {
-				that.changeServerItemState($item.find("span > i:first-child"), event);
+			item.client.on("state", function __fnSideBarViewEventClientState(client, state) {
+				that.changeServerItemState($item.find("span > i:first-child"), client, state);
 			});
 
-			item.client.init();
-
 			$item.find("a.sidebar-list-action").on("click", function (model) {
 				return function __fnSideBarClickRemoveAction (event) {
 					var confirmMessage	= "Are you sure you want to delete:\n" + item.getName();
@@ -179,17 +176,22 @@ _
 				};
 			}(item));
 
-			$item.on("dblclick", function (model) {
-				return function __fnSideBarViewEventDblClickItem(event) {
-
-				};
-			}(item));
+			$item.on("dblclick", function __fnSideBarViewEventDblClickItem(event) {
+					that.$el.find("li.selected").removeClass("selected");
+					$item.addClass("selected");
+/*
+					if (item.client.state < item.client._states.loaded) {
+						item.client.fetchDatabases(item.client.fetchDatabase);
+					} else {
+						console.log(item.client.collections);
+					}
+ */
+					Backbone.Router.prototype.navigate("servers/" + item.id, false);
+			});
 		}
 
-		, changeServerItemState:	function ($glyph, event) {
+		, changeServerItemState:	function ($glyph, client, state) {
 				var newClass	= "icon-folder-closed"
-				,	client		= event.shift()
-				,	state		= event.shift()
 				;
 
 				switch (state) {
@@ -206,6 +208,9 @@ _
 					case 6:
 						newClass	= "icon-folder-open";
 					break;
+					case -1:
+						newClass	= "icon-warning-sign";
+					break;
 					default:
 					case 0:
 					case 1:
diff --git a/resources/templates/app/modal-loading.html b/resources/templates/app/modal-loading.html
new file mode 100644
index 0000000..924a90f
--- /dev/null
+++ b/resources/templates/app/modal-loading.html
@@ -0,0 +1,14 @@
+<div class="modal span4"
+	data-backdrop="static"
+	data-keyboard="false"
+	data-show="true"
+	tabindex="-1" role="dialog">
+	<div class="modal-header">
+		<h4>Loading</h4>
+	</div>
+	<div class="modal-body" style="padding: 10px 10px 0 10px;">
+		<div class="progress progress-striped">
+			<div class="bar" style="width: 100%;"></div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/resources/templates/app/modal-login.html b/resources/templates/app/modal-login.html
new file mode 100644
index 0000000..8f9a595
--- /dev/null
+++ b/resources/templates/app/modal-login.html
@@ -0,0 +1,22 @@
+<div class="modal" data-show="true" tabindex="-1" role="dialog" aria-hidden="true">
+	<div class="modal-body" style="font-size: 1.2em">
+		<form>
+			<fieldset>
+				<legend>{{dmap_itemname}} login</legend>
+				<p>
+					<input type="text" class="input-large" placeholder="Login">
+				</p>
+				<p>
+					<input type="password" class="input-large" placeholder="Password">
+				</p>
+				<!--label class="checkbox">
+				<input type="checkbox"> Remember me
+				</label-->
+			</fieldset>
+		</form>
+	</div>
+	<div class="modal-footer">
+		<button class="btn btn-mini" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Cancel</button>
+		<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i>&nbsp;Login</button>
+	</div>
+</div>
\ No newline at end of file
diff --git a/resources/templates/footer/modal-about.html b/resources/templates/footer/modal-about.html
new file mode 100644
index 0000000..275ef75
--- /dev/null
+++ b/resources/templates/footer/modal-about.html
@@ -0,0 +1,26 @@
+<div class="modal"
+	data-backdrop="true"
+	data-keyboard="true"
+	data-show="true"
+	tabindex="-1" role="dialog" aria-hidden="true">
+	<div class="modal-header">
+		<h3 id="myModalLabel">About DAAPr<sup>3</sup></h3>
+	</div>
+	<div class="modal-body" style="font-size: 1.2em">
+		<p>
+			<b>DAAPr</b>, in its cubic iteration, is a web client for the 
+			<a href="http://en.wikipedia.org/wiki/Digital_Audio_Access_Protocol" title="Digital Audio Access Protocol">DAAP</a> media sharing protocol.
+			It is 100% client side javascript built using <a href="http://backbonejs.org" title="Backbone.js">Backbone.js</a>, 
+			<a href="http://jquery.com">jQuery</a> and <a href="http://twitter.github.com/bootstrap/" title="Twitter Bootstrap">Bootstrap</a>.
+		</p>
+		<p>
+			<a href="https://matth.lalonde.me/contact/">Feedback</a> is appreciated.
+		</p>
+		<p>
+			This software is <a href="http://en.wikipedia.org/wiki/Copyleft">Copyleft</a> 2012 <a href="https://matth.lalonde.me">Matthieu Lalonde</a> under <a href="http://www.gnu.org/copyleft/lesser.html">LGPL</a>, no guarantees whatsoever.
+		</p>
+	</div>
+	<div class="modal-footer">
+		<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Close</button>
+	</div>
+</div>
