You... yes you, commit message... why do you keep bothering me at 3am?

index.html

@@ -51,7 +51,7 @@
 	<div class="ui-layout-west">
 		<div id="wrapperSideBar">
 			<ul>
-				<li class="droppable selected"><span><i class="icon-list"></i>&nbsp;Playlist</span></li>
+				<li class="droppable"><span><i class="icon-list"></i>&nbsp;Playlist</span></li>
 				<li>
 					<span>
 						<i class="icon-home"></i>&nbsp;<span>Servers</span>

resources/js/app.js

@@ -135,7 +135,7 @@ _
 				});
 
 				// For now let's reset the state when we start up
-				that.navigate("", false);
+				//that.navigate("", false);
 
 				App.__super__.initialize.apply(that, that.routes);
 			});
@@ -144,21 +144,31 @@ _
 		}
 
 		, _routerActionPlaylist:		function () {
+			var that	= this
+			;
 
+			that.Views.SideBar.select("> ul > li:first");
 		}
 
 		, _routerActionClient:			function (hostname) {
-			var server	= this.servers.get(hostname)
+			var that	= this
+			,	server	= this.servers.get(hostname)
 			,	client	= server.client
 			;
 
+			that.Views.SideBar.select(server);
+
 			if (client) {
-				if (client.sate < 4) {
-					client.on("inited", function __fnAppEventClientInitited(_client) {
-						_client.fetchDatabases(_client.fetchDatabase);
-					});
+				if (client.state < 4) {
+					var __fnAppEventClientInitited	= function () {
+						client.fetchDatabases(client.fetchDatabase);
+					};
+
+					client.on("inited", __fnAppEventClientInitited);
 
-					client.init();
+					if (client.state <= 0) {
+						client.init();
+					}
 				} else if (client.state === 4) {
 					client.fetchDatabases(client.fetchDatabase);
 				}

resources/js/views/sidebar.js

@@ -36,15 +36,17 @@ _
 	"use strict";
 
 	return Backbone.View.extend({
-		el:				$("div#wrapperSideBar")
-		, elServerList:	$("div#wrapperSideBar ul.siderbar-server-list")
+		el:						$("div#wrapperSideBar")
+		, elServerList:			$("div#wrapperSideBar ul.siderbar-server-list")
 
-		, events:			{
+		, events:				{
 			"click > ul > li:last-child > span > a.sidebar-list-action":	"_addServerItem"
 		}
 
-		, initialize:	function (servers) {
-			_.bindAll(this, "renderServerItem", "_addServerItem");
+		, router:				null
+
+		, initialize:			function (servers) {
+			_.bindAll(this, "renderServerItem", "_addServerItem", "_routerActionPlaylist", "_routerActionClient");
 			var that		= this
 			, serverModel	= null
 			;
@@ -53,6 +55,13 @@ _
 
 			async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() {
 				that.trigger("rendered");
+
+				that.router	= new Backbone.Router.extend({
+					"playlist":					that._routerActionPlaylist
+					, "servers/:server":		that._routerActionClient
+					, ":server/items/:item":	that._routerActionClient
+					//"*actions": "defaultRoute" // matches http://example.com/#anything-here
+				});
 			});
 
 			this.servers.on("add", function (server) {
@@ -69,7 +78,25 @@ _
 			});
 		}
 
-		, _addServerItem:	function(event) {
+		, select:					function (serverModel) {
+			var that	= this
+			,	cid		= (serverModel.cid && "#" + serverModel.cid) || serverModel
+			,	$server	= that.$el.find(cid)
+			;
+
+			that.$el.find("li.selected").removeClass("selected");
+			$server.addClass("selected");
+		}
+
+		, _routerActionPlaylist:	function (event) {
+console.log(event);
+		}
+
+		, _routerActionClient:		function (event) {
+console.log(event);
+		}
+
+		, _addServerItem:			function(event) {
 			var that	= this
 			, modalEl	= $(tmplModalNewServer)
 			;
@@ -145,7 +172,8 @@ _
 		, renderServerItem:	function (item) {
 			var that	= this
 			, itemHtml	= _.template(tmplServerListItem, {
-							server_name:	item.getName()
+							cid:			item.cid
+							, server_name:	item.getName()
 						})
 			, $item	= $(itemHtml)
 			;

resources/templates/sidebar/server-list-item.html

@@ -1,4 +1,4 @@
-<li>
+<li id="{{cid}}">
 	<span>
 		<i class="icon-folder-close"></i>&nbsp;<span>{{server_name}}</span>
 		<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>