Some more view events....

index.html

@@ -102,8 +102,10 @@
 	</div>
 
 	<div class="ui-layout-south row-fluid" id="wrapperFooter">
-		<div id="wrapperFooterLeft" class="span4">
+		<div id="wrapperFooterLeft" class="span4 row-fluid">
-			<button class="btn btn-mini btn-inverse" type="button" data-toggle="side-bar"><i class="icon-chevron-left icon-white"></i></button>
+			<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>
+			</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>
 		</div>

resources/css/app.css

@@ -382,10 +382,14 @@ div#wrapperPlayer {
 
 div#wrapperFooter,
 table.dataTable tr td,
-table.dataTable tr th {
+table.dataTable tr th,
+div#wrapperSideBar,
+div#wrapperPlayer {
 	-webkit-user-select: none;
+	-ms-user-select: none;
 	-moz-user-select: none;
 	-khtml-user-select: none;
+	user-select: none;
 	cursor: default;
 }
 

resources/js/models/client.js

@@ -21,6 +21,8 @@ define([
 		constructor:	function(attributes, options) {
 			_.bindAll(this
 				, "setAuth"
+				, "setState"
+				, "getState"
 				, "init"
 				, "deinit"
 				, "logout"
@@ -69,10 +71,30 @@ define([
 			}
 		}
 
+		, setState:		function (state) {
+			if (_.isNumber(state)) {
+				this.trigger("state", this, state);
+
+				return this.state	= state;
+			} else if (_.isString(state) && !_.isUndefined(this._states[state])) {
+				this.trigger("state", this, this._states[state]);
+
+				return this.state	= this._states[state];
+			}
+
+			return undefined;
+		}
+
+		, getState:		function () {
+			return this.state;
+		}
+
 		, init:			function () {
 			var that	= this
 			;
 
+			this.setState("connecting");
+
 			console.debug("Fetching content types");
 			that.fetchContentTypes(function __fnClientCbFetchContentTypes(contentTypes) {
 				console.debug("Fetching server info");
@@ -94,6 +116,7 @@ define([
 											//that.fetchArtists(function () {
 												//console.debug("Fetching albums of db 1");
 												//that.fetchAlbums(function () {
+													that.setState("connected");
 													that.trigger("inited", serverInfo);
 												//});
 											//});
@@ -195,11 +218,15 @@ define([
 			try {
 				xhr.onerror		= function () {console.log("Error", arguments, this);};
 				xhr.onabort		= function () {console.log("Abort", arguments, this);};
-				xhr.ontimeout	= function () {console.log("Timeout", arguments, this);};
+				xhr.ontimeout	= function () {
+					that.setState("timedout");
+				};
+
 				xhr.onload		= function (e) {
 					if (this.status === 200) {
 						callback(null, this.response);
 					} else if (this.status === 401) {
+						that.setState("unauthorized");
 						that.trigger("unauthorized", [this, e]);
 					} else {
 						callback(e.status);
@@ -428,15 +455,16 @@ define([
 				, password:		""
 			}
 
-			, status:			0
+			, state:			0
 
-			, statusCodes:	{
+			, _states:	{
 				disconnected:	0
-				, connecting:	1
+				, timedout:		1
-				, timedout:		2
+				, connecting:	2
 				, unauthorized:	3
 				, connected:	4
-				, loaded:		5
+				, loading:		5
+				, loaded:		6
 			}
 
 			, collections:	{

resources/js/views/sidebar.js

@@ -159,6 +159,10 @@ _
 				}
 			});
 
+			item.on("client:state", function __fnSideBarViewEventClientState(event) {
+				that.changeServerItemState($item.find("span > i:first-child"), event);
+			});
+
 			item.client.init();
 
 			$item.find("a.sidebar-list-action").on("click", function (model) {
@@ -181,5 +185,36 @@ _
 				};
 			}(item));
 		}
+
+		, changeServerItemState:	function ($glyph, event) {
+				var newClass	= "icon-folder-closed"
+				,	client		= event.shift()
+				,	state		= event.shift()
+				;
+
+				switch (state) {
+					case 2:
+					case 5:
+						newClass	= "icon-loading";
+					break;
+					case 3:
+						newClass	= "icon-exclamation-sign";
+					break;
+					case 4:
+						newClass	= "icon-ok-sign";
+					break;
+					case 6:
+						newClass	= "icon-folder-open";
+					break;
+					default:
+					case 0:
+					case 1:
+						newClass	= "icon-folder-closed";
+					break;
+				}
+
+				$glyph.removeClass();
+				$glyph.addClass(newClass);
+		}
 	});
 });