lobby

app.js

@@ -6,7 +6,7 @@ var conf = {
     dbPort: 6379,
     dbHost: '127.0.0.1',
     dbOptions: {},
-    mainroom: 'MainRoom'
+    mainroom: 'Lobby'
 };
 
 

app/css/style.min.css

@@ -6760,7 +6760,9 @@ button.close {
 /*# sourceMappingURL=bootstrap.css.map */
 
 /*! Main CSS file */
-
+body {
+  background-color:#777;
+}
 header .intro-text {
     padding-top: 100px;
     padding-bottom: 50px;
@@ -6793,24 +6795,68 @@ header .intro-text {
     pointer-events: all;
 }
 
+.tabs-below > .nav-tabs {
+  border-bottom: 0;
+}
+.tabs-below > .nav-tabs {
+  border-top: 1px solid #ddd;
+}
 
+.tabs-below > .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
+}
 
-/* ========== Audio ============ */
+.tabs-below > .nav-tabs > li > a {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
 
-.scrollable-list {
-  overflow: scroll;
-  height: 250px;
-  border-top:1px solid #cecece;
-  border-bottom:1px solid #cecece;
+.tabs-below > .nav-tabs > li > a:hover,
+.tabs-below > .nav-tabs > li > a:focus {
+  border-top-color: #ddd;
+  border-bottom-color: transparent;
 }
+
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
+  border-color: transparent #ddd #ddd #ddd;
+}
+
 ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
 }
+
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+} 
+
+.scrollable-list {
+  overflow: scroll;
+  height: 192px;
+}
+
+.scrollable-list .list-group-item {
+  padding: 3px 10px;
+  font-size:12px;
+}
+
+
+
+
+/* ========== Audio ============ */
+
+#audio_player {
+  background: rgb(145,145,145); /* Old browsers */
+  background: -moz-linear-gradient(top, rgba(145,145,145,1) 0%, rgba(204,204,204,1) 5%, rgba(237,237,237,1) 51%, rgba(237,237,237,1) 78%, rgba(237,237,237,1) 78%, rgba(196,196,196,1) 93%, rgba(196,196,196,1) 93%, rgba(145,145,145,1) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, rgba(145,145,145,1) 0%,rgba(204,204,204,1) 5%,rgba(237,237,237,1) 51%,rgba(237,237,237,1) 78%,rgba(237,237,237,1) 78%,rgba(196,196,196,1) 93%,rgba(196,196,196,1) 93%,rgba(145,145,145,1) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, rgba(145,145,145,1) 0%,rgba(204,204,204,1) 5%,rgba(237,237,237,1) 51%,rgba(237,237,237,1) 78%,rgba(237,237,237,1) 78%,rgba(196,196,196,1) 93%,rgba(196,196,196,1) 93%,rgba(145,145,145,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#919191',GradientType=0 ); /* IE6-9 */
 }
 
 div#player{
@@ -6832,6 +6878,42 @@ div#player{
 	margin: 0 auto;
   line-height:14px;
 }
+output.volume {
+  position: absolute;
+  background-image: -moz-linear-gradient(top, #444444, #999999);
+  background-image: -o-linear-gradient(top, #444444, #999999);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
+  background-image: -webkit-linear-gradient(top, #444444, #999999);
+  width: 40px;
+  height: 30px;
+  text-align: center;
+  color: white;
+  border-radius: 10px;
+  display: inline-block;
+  font: bold 15px/30px Georgia;
+  bottom: 175%;
+  left: 0;
+  margin-left: -1%;
+}
+output.volume:after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 10px solid #999999;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  margin-top: -1px;
+}
+meter {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
 #amplitude-play-pause{
 	width: 30px;
 	height: 34px;

app/index.html

@@ -62,7 +62,7 @@
          <section id="audio" class="bg-light-gray">
              
             <!-- START Player -->
-            <div class="panel panel-default">
+            <div id="audio_player" class="panel panel-default">
                <div class="panel-body">
                   <div id="player">
                      <div id="song-information">
@@ -79,9 +79,11 @@
                   <div id="controls">
                      <div id="amplitude-play-pause" class="amplitude-paused"></div><br>
                      <span id="amplitude-current-time">0:00</span>
+                     <meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>
                   </div>
-                  <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: 0 0 0 0;font-size:20px"></span>
-                  <input class="bar" type="range" id="amplitude-volume-slider" value="90"/>
+                  <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -4px 0 0 0;font-size:20px"></span>
+                  <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=90/>
+                  <output class="volume" for="volume">90</output>
                   <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-18px 0 0;font-size:20px"></span>
 
                </div>
@@ -94,12 +96,24 @@
 
    			<!-- START Playlist -->
             <div class="panel panel-default">
-         		<div class="scrollable-list">
-                  <ul class="list-group">
-         				<div class="recent"></div>
-         			</ul>
+               <div class="tabbable tabs-below">
+                  <div class="tab-content scrollable-list">
+                     <div class="tab-pane active" id="one_">
+                           <ul class="list-group">
+                              <div class="recent"></div>
+                           </ul>
+                     </div>
+                     <div class="tab-pane" id="two_">
+                     </div>
+                     <div class="tab-pane" id="twee_">
+                     </div>
+                  </div>
+                     <ul class="nav nav-tabs">
+                        <li class="active"><a href="#one" data-toggle="tab"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>&nbsp;Last 100</a></li>
+                        <li><a href="#two" data-toggle="tab">Top Artist</a></li>
+                        <li><a href="#twee" data-toggle="tab">Top Tracks</a></li>
+                     </ul>
                </div>
-               <h5 class="cm-type">Last 100 Tracks:</h5>
             </div>
             <!-- END Playlist -->
          
@@ -122,14 +136,14 @@
                                 <li><a href="#modal_setnick" data-toggle="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Set nickname</a></li>
                             </ul>
                         </li>
-                        <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
+                        <li id="Lobby_tab" class="active"><a href="#Lobby" data-toggle="tab">Lobby</a></li>
                     </ul>
                </div>
                <!-- END Room Tabs -->
                
                <!-- START Rooms -->
                <div id="rooms" class="tab-content">
-                   <div class="tab-pane active" id="MainRoom">
+                   <div class="tab-pane active" id="Lobby">
                       <div class="well">
                            <div class="row-fluid">
                                <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
@@ -138,7 +152,7 @@
                            </div>  
                            <div class="row-fluid">
                               <div id="room_users">
-                                  <span class="label label-success">online</span> <span class="label label-danger">Radio-bot</span>
+                                  <span class="label label-success">online:</span> <span class="label label-danger">Radio-bot</span>
                               </div>
                            </div>
                        </div>
@@ -146,19 +160,19 @@
                </div>
                <!-- END Rooms -->
                
-
-
                 <!-- START message -->
-                <div class="row-fluid">
-                    <form class="form-inline">
-                       <div class="input-group">
-                          <input id="message_text" class="form-control" type="text" placeholder="What say you?" >
-                           <span class="input-group-btn">
-                              <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
-                           </span>
-                        </div>
-                     </form>
-                     <!--<button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>-->
+                <div class="panel-footer">
+                   <div class="row-fluid">
+                       <form class="form">
+                          <div class="input-group">
+                             <input id="message_text" class="form-control" type="text" placeholder="What say you?" >
+                              <span class="input-group-btn">
+                                 <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
+                              </span>
+                           </div>
+                        </form>
+                        <!--<button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>-->
+                   </div>
                 </div>
                 <!-- END message -->
             </div>

app/js/main.js

@@ -13,7 +13,7 @@
         console.log(data);
 
         // Get users connected to mainroom
-        socket.emit('getUsersInRoom', {'room':'MainRoom'});
+        socket.emit('getUsersInRoom', {'room':'Lobby'});
 
         if (debug) {
             // Subscription to rooms
@@ -32,13 +32,13 @@
 
     // Disconnected from server
     socket.on('disconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
+        var info = {'room':'Lobby', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
         addMessage(info);
     });
     
     // Reconnected to server
     socket.on('reconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
+        var info = {'room':'Lobby', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
         addMessage(info);
     });
 
@@ -271,13 +271,13 @@
     $('#b_leave_room').click(function(eventObject) {
         eventObject.preventDefault();
         var currentRoom = getCurrentRoom();
-        if (currentRoom != 'MainRoom') {
+        if (currentRoom != 'Lobby') {
             socket.emit('unsubscribe', {'rooms':[getCurrentRoom()]}); 
 
             // Toogle to MainRoom
-            $('[href="#MainRoom"]').click();
+            $('[href="#Lobby"]').click();
         } else {
-            console.log('Cannot leave MainRoom, sorry');
+            console.log('Cannot leave Lobby, sorry');
         }
     });
 

app/js/radio.min.js

@@ -13,7 +13,7 @@
         console.log(data);
 
         // Get users connected to mainroom
-        socket.emit('getUsersInRoom', {'room':'MainRoom'});
+        socket.emit('getUsersInRoom', {'room':'Lobby'});
 
         if (debug) {
             // Subscription to rooms
@@ -32,13 +32,13 @@
 
     // Disconnected from server
     socket.on('disconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
+        var info = {'room':'Lobby', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
         addMessage(info);
     });
     
     // Reconnected to server
     socket.on('reconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
+        var info = {'room':'Lobby', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
         addMessage(info);
     });
 
@@ -271,13 +271,13 @@
     $('#b_leave_room').click(function(eventObject) {
         eventObject.preventDefault();
         var currentRoom = getCurrentRoom();
-        if (currentRoom != 'MainRoom') {
+        if (currentRoom != 'Lobby') {
             socket.emit('unsubscribe', {'rooms':[getCurrentRoom()]}); 
 
             // Toogle to MainRoom
-            $('[href="#MainRoom"]').click();
+            $('[href="#Lobby"]').click();
         } else {
-            console.log('Cannot leave MainRoom, sorry');
+            console.log('Cannot leave Lobby, sorry');
         }
     });
 
@@ -300,6 +300,670 @@
 })();
 
 
+/*!
+ * jQuery Color Animations v@VERSION
+ * https://github.com/jquery/jquery-color
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * Date: @DATE
+ */
+(function( jQuery, undefined ) {
+
+	var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",
+
+	// plusequals test for += 100 -= 100
+	rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
+	// a set of RE's that can match strings and generate color tuples.
+	stringParsers = [{
+			re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ],
+					execResult[ 2 ],
+					execResult[ 3 ],
+					execResult[ 4 ]
+				];
+			}
+		}, {
+			re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ] * 2.55,
+					execResult[ 2 ] * 2.55,
+					execResult[ 3 ] * 2.55,
+					execResult[ 4 ]
+				];
+			}
+		}, {
+			// this regex ignores A-F because it's compared against an already lowercased string
+			re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
+			parse: function( execResult ) {
+				return [
+					parseInt( execResult[ 1 ], 16 ),
+					parseInt( execResult[ 2 ], 16 ),
+					parseInt( execResult[ 3 ], 16 )
+				];
+			}
+		}, {
+			// this regex ignores A-F because it's compared against an already lowercased string
+			re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
+			parse: function( execResult ) {
+				return [
+					parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
+					parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
+					parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
+				];
+			}
+		}, {
+			re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			space: "hsla",
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ],
+					execResult[ 2 ] / 100,
+					execResult[ 3 ] / 100,
+					execResult[ 4 ]
+				];
+			}
+		}],
+
+	// jQuery.Color( )
+	color = jQuery.Color = function( color, green, blue, alpha ) {
+		return new jQuery.Color.fn.parse( color, green, blue, alpha );
+	},
+	spaces = {
+		rgba: {
+			props: {
+				red: {
+					idx: 0,
+					type: "byte"
+				},
+				green: {
+					idx: 1,
+					type: "byte"
+				},
+				blue: {
+					idx: 2,
+					type: "byte"
+				}
+			}
+		},
+
+		hsla: {
+			props: {
+				hue: {
+					idx: 0,
+					type: "degrees"
+				},
+				saturation: {
+					idx: 1,
+					type: "percent"
+				},
+				lightness: {
+					idx: 2,
+					type: "percent"
+				}
+			}
+		}
+	},
+	propTypes = {
+		"byte": {
+			floor: true,
+			max: 255
+		},
+		"percent": {
+			max: 1
+		},
+		"degrees": {
+			mod: 360,
+			floor: true
+		}
+	},
+	support = color.support = {},
+
+	// element for support tests
+	supportElem = jQuery( "<p>" )[ 0 ],
+
+	// colors = jQuery.Color.names
+	colors,
+
+	// local aliases of functions called often
+	each = jQuery.each;
+
+// determine rgba support immediately
+supportElem.style.cssText = "background-color:rgba(1,1,1,.5)";
+support.rgba = supportElem.style.backgroundColor.indexOf( "rgba" ) > -1;
+
+// define cache name and alpha properties
+// for rgba and hsla spaces
+each( spaces, function( spaceName, space ) {
+	space.cache = "_" + spaceName;
+	space.props.alpha = {
+		idx: 3,
+		type: "percent",
+		def: 1
+	};
+});
+
+function clamp( value, prop, allowEmpty ) {
+	var type = propTypes[ prop.type ] || {};
+
+	if ( value == null ) {
+		return (allowEmpty || !prop.def) ? null : prop.def;
+	}
+
+	// ~~ is an short way of doing floor for positive numbers
+	value = type.floor ? ~~value : parseFloat( value );
+
+	// IE will pass in empty strings as value for alpha,
+	// which will hit this case
+	if ( isNaN( value ) ) {
+		return prop.def;
+	}
+
+	if ( type.mod ) {
+		// we add mod before modding to make sure that negatives values
+		// get converted properly: -10 -> 350
+		return (value + type.mod) % type.mod;
+	}
+
+	// for now all property types without mod have min and max
+	return 0 > value ? 0 : type.max < value ? type.max : value;
+}
+
+function stringParse( string ) {
+	var inst = color(),
+		rgba = inst._rgba = [];
+
+	string = string.toLowerCase();
+
+	each( stringParsers, function( i, parser ) {
+		var parsed,
+			match = parser.re.exec( string ),
+			values = match && parser.parse( match ),
+			spaceName = parser.space || "rgba";
+
+		if ( values ) {
+			parsed = inst[ spaceName ]( values );
+
+			// if this was an rgba parse the assignment might happen twice
+			// oh well....
+			inst[ spaces[ spaceName ].cache ] = parsed[ spaces[ spaceName ].cache ];
+			rgba = inst._rgba = parsed._rgba;
+
+			// exit each( stringParsers ) here because we matched
+			return false;
+		}
+	});
+
+	// Found a stringParser that handled it
+	if ( rgba.length ) {
+
+		// if this came from a parsed string, force "transparent" when alpha is 0
+		// chrome, (and maybe others) return "transparent" as rgba(0,0,0,0)
+		if ( rgba.join() === "0,0,0,0" ) {
+			jQuery.extend( rgba, colors.transparent );
+		}
+		return inst;
+	}
+
+	// named colors
+	return colors[ string ];
+}
+
+color.fn = jQuery.extend( color.prototype, {
+	parse: function( red, green, blue, alpha ) {
+		if ( red === undefined ) {
+			this._rgba = [ null, null, null, null ];
+			return this;
+		}
+		if ( red.jquery || red.nodeType ) {
+			red = jQuery( red ).css( green );
+			green = undefined;
+		}
+
+		var inst = this,
+			type = jQuery.type( red ),
+			rgba = this._rgba = [];
+
+		// more than 1 argument specified - assume ( red, green, blue, alpha )
+		if ( green !== undefined ) {
+			red = [ red, green, blue, alpha ];
+			type = "array";
+		}
+
+		if ( type === "string" ) {
+			return this.parse( stringParse( red ) || colors._default );
+		}
+
+		if ( type === "array" ) {
+			each( spaces.rgba.props, function( key, prop ) {
+				rgba[ prop.idx ] = clamp( red[ prop.idx ], prop );
+			});
+			return this;
+		}
+
+		if ( type === "object" ) {
+			if ( red instanceof color ) {
+				each( spaces, function( spaceName, space ) {
+					if ( red[ space.cache ] ) {
+						inst[ space.cache ] = red[ space.cache ].slice();
+					}
+				});
+			} else {
+				each( spaces, function( spaceName, space ) {
+					var cache = space.cache;
+					each( space.props, function( key, prop ) {
+
+						// if the cache doesn't exist, and we know how to convert
+						if ( !inst[ cache ] && space.to ) {
+
+							// if the value was null, we don't need to copy it
+							// if the key was alpha, we don't need to copy it either
+							if ( key === "alpha" || red[ key ] == null ) {
+								return;
+							}
+							inst[ cache ] = space.to( inst._rgba );
+						}
+
+						// this is the only case where we allow nulls for ALL properties.
+						// call clamp with alwaysAllowEmpty
+						inst[ cache ][ prop.idx ] = clamp( red[ key ], prop, true );
+					});
+
+					// everything defined but alpha?
+					if ( inst[ cache ] && jQuery.inArray( null, inst[ cache ].slice( 0, 3 ) ) < 0 ) {
+						// use the default of 1
+						inst[ cache ][ 3 ] = 1;
+						if ( space.from ) {
+							inst._rgba = space.from( inst[ cache ] );
+						}
+					}
+				});
+			}
+			return this;
+		}
+	},
+	is: function( compare ) {
+		var is = color( compare ),
+			same = true,
+			inst = this;
+
+		each( spaces, function( _, space ) {
+			var localCache,
+				isCache = is[ space.cache ];
+			if (isCache) {
+				localCache = inst[ space.cache ] || space.to && space.to( inst._rgba ) || [];
+				each( space.props, function( _, prop ) {
+					if ( isCache[ prop.idx ] != null ) {
+						same = ( isCache[ prop.idx ] === localCache[ prop.idx ] );
+						return same;
+					}
+				});
+			}
+			return same;
+		});
+		return same;
+	},
+	_space: function() {
+		var used = [],
+			inst = this;
+		each( spaces, function( spaceName, space ) {
+			if ( inst[ space.cache ] ) {
+				used.push( spaceName );
+			}
+		});
+		return used.pop();
+	},
+	transition: function( other, distance ) {
+		var end = color( other ),
+			spaceName = end._space(),
+			space = spaces[ spaceName ],
+			startColor = this.alpha() === 0 ? color( "transparent" ) : this,
+			start = startColor[ space.cache ] || space.to( startColor._rgba ),
+			result = start.slice();
+
+		end = end[ space.cache ];
+		each( space.props, function( key, prop ) {
+			var index = prop.idx,
+				startValue = start[ index ],
+				endValue = end[ index ],
+				type = propTypes[ prop.type ] || {};
+
+			// if null, don't override start value
+			if ( endValue === null ) {
+				return;
+			}
+			// if null - use end
+			if ( startValue === null ) {
+				result[ index ] = endValue;
+			} else {
+				if ( type.mod ) {
+					if ( endValue - startValue > type.mod / 2 ) {
+						startValue += type.mod;
+					} else if ( startValue - endValue > type.mod / 2 ) {
+						startValue -= type.mod;
+					}
+				}
+				result[ index ] = clamp( ( endValue - startValue ) * distance + startValue, prop );
+			}
+		});
+		return this[ spaceName ]( result );
+	},
+	blend: function( opaque ) {
+		// if we are already opaque - return ourself
+		if ( this._rgba[ 3 ] === 1 ) {
+			return this;
+		}
+
+		var rgb = this._rgba.slice(),
+			a = rgb.pop(),
+			blend = color( opaque )._rgba;
+
+		return color( jQuery.map( rgb, function( v, i ) {
+			return ( 1 - a ) * blend[ i ] + a * v;
+		}));
+	},
+	toRgbaString: function() {
+		var prefix = "rgba(",
+			rgba = jQuery.map( this._rgba, function( v, i ) {
+				return v == null ? ( i > 2 ? 1 : 0 ) : v;
+			});
+
+		if ( rgba[ 3 ] === 1 ) {
+			rgba.pop();
+			prefix = "rgb(";
+		}
+
+		return prefix + rgba.join() + ")";
+	},
+	toHslaString: function() {
+		var prefix = "hsla(",
+			hsla = jQuery.map( this.hsla(), function( v, i ) {
+				if ( v == null ) {
+					v = i > 2 ? 1 : 0;
+				}
+
+				// catch 1 and 2
+				if ( i && i < 3 ) {
+					v = Math.round( v * 100 ) + "%";
+				}
+				return v;
+			});
+
+		if ( hsla[ 3 ] === 1 ) {
+			hsla.pop();
+			prefix = "hsl(";
+		}
+		return prefix + hsla.join() + ")";
+	},
+	toHexString: function( includeAlpha ) {
+		var rgba = this._rgba.slice(),
+			alpha = rgba.pop();
+
+		if ( includeAlpha ) {
+			rgba.push( ~~( alpha * 255 ) );
+		}
+
+		return "#" + jQuery.map( rgba, function( v ) {
+
+			// default to 0 when nulls exist
+			v = ( v || 0 ).toString( 16 );
+			return v.length === 1 ? "0" + v : v;
+		}).join("");
+	},
+	toString: function() {
+		return this._rgba[ 3 ] === 0 ? "transparent" : this.toRgbaString();
+	}
+});
+color.fn.parse.prototype = color.fn;
+
+// hsla conversions adapted from:
+// https://code.google.com/p/maashaack/source/browse/packages/graphics/trunk/src/graphics/colors/HUE2RGB.as?r=5021
+
+function hue2rgb( p, q, h ) {
+	h = ( h + 1 ) % 1;
+	if ( h * 6 < 1 ) {
+		return p + (q - p) * h * 6;
+	}
+	if ( h * 2 < 1) {
+		return q;
+	}
+	if ( h * 3 < 2 ) {
+		return p + (q - p) * ((2/3) - h) * 6;
+	}
+	return p;
+}
+
+spaces.hsla.to = function ( rgba ) {
+	if ( rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null ) {
+		return [ null, null, null, rgba[ 3 ] ];
+	}
+	var r = rgba[ 0 ] / 255,
+		g = rgba[ 1 ] / 255,
+		b = rgba[ 2 ] / 255,
+		a = rgba[ 3 ],
+		max = Math.max( r, g, b ),
+		min = Math.min( r, g, b ),
+		diff = max - min,
+		add = max + min,
+		l = add * 0.5,
+		h, s;
+
+	if ( min === max ) {
+		h = 0;
+	} else if ( r === max ) {
+		h = ( 60 * ( g - b ) / diff ) + 360;
+	} else if ( g === max ) {
+		h = ( 60 * ( b - r ) / diff ) + 120;
+	} else {
+		h = ( 60 * ( r - g ) / diff ) + 240;
+	}
+
+	// chroma (diff) == 0 means greyscale which, by definition, saturation = 0%
+	// otherwise, saturation is based on the ratio of chroma (diff) to lightness (add)
+	if ( diff === 0 ) {
+		s = 0;
+	} else if ( l <= 0.5 ) {
+		s = diff / add;
+	} else {
+		s = diff / ( 2 - add );
+	}
+	return [ Math.round(h) % 360, s, l, a == null ? 1 : a ];
+};
+
+spaces.hsla.from = function ( hsla ) {
+	if ( hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null ) {
+		return [ null, null, null, hsla[ 3 ] ];
+	}
+	var h = hsla[ 0 ] / 360,
+		s = hsla[ 1 ],
+		l = hsla[ 2 ],
+		a = hsla[ 3 ],
+		q = l <= 0.5 ? l * ( 1 + s ) : l + s - l * s,
+		p = 2 * l - q;
+
+	return [
+		Math.round( hue2rgb( p, q, h + ( 1 / 3 ) ) * 255 ),
+		Math.round( hue2rgb( p, q, h ) * 255 ),
+		Math.round( hue2rgb( p, q, h - ( 1 / 3 ) ) * 255 ),
+		a
+	];
+};
+
+
+each( spaces, function( spaceName, space ) {
+	var props = space.props,
+		cache = space.cache,
+		to = space.to,
+		from = space.from;
+
+	// makes rgba() and hsla()
+	color.fn[ spaceName ] = function( value ) {
+
+		// generate a cache for this space if it doesn't exist
+		if ( to && !this[ cache ] ) {
+			this[ cache ] = to( this._rgba );
+		}
+		if ( value === undefined ) {
+			return this[ cache ].slice();
+		}
+
+		var ret,
+			type = jQuery.type( value ),
+			arr = ( type === "array" || type === "object" ) ? value : arguments,
+			local = this[ cache ].slice();
+
+		each( props, function( key, prop ) {
+			var val = arr[ type === "object" ? key : prop.idx ];
+			if ( val == null ) {
+				val = local[ prop.idx ];
+			}
+			local[ prop.idx ] = clamp( val, prop );
+		});
+
+		if ( from ) {
+			ret = color( from( local ) );
+			ret[ cache ] = local;
+			return ret;
+		} else {
+			return color( local );
+		}
+	};
+
+	// makes red() green() blue() alpha() hue() saturation() lightness()
+	each( props, function( key, prop ) {
+		// alpha is included in more than one space
+		if ( color.fn[ key ] ) {
+			return;
+		}
+		color.fn[ key ] = function( value ) {
+			var vtype = jQuery.type( value ),
+				fn = ( key === "alpha" ? ( this._hsla ? "hsla" : "rgba" ) : spaceName ),
+				local = this[ fn ](),
+				cur = local[ prop.idx ],
+				match;
+
+			if ( vtype === "undefined" ) {
+				return cur;
+			}
+
+			if ( vtype === "function" ) {
+				value = value.call( this, cur );
+				vtype = jQuery.type( value );
+			}
+			if ( value == null && prop.empty ) {
+				return this;
+			}
+			if ( vtype === "string" ) {
+				match = rplusequals.exec( value );
+				if ( match ) {
+					value = cur + parseFloat( match[ 2 ] ) * ( match[ 1 ] === "+" ? 1 : -1 );
+				}
+			}
+			local[ prop.idx ] = value;
+			return this[ fn ]( local );
+		};
+	});
+});
+
+// add cssHook and .fx.step function for each named hook.
+// accept a space separated string of properties
+color.hook = function( hook ) {
+	var hooks = hook.split( " " );
+	each( hooks, function( i, hook ) {
+		jQuery.cssHooks[ hook ] = {
+			set: function( elem, value ) {
+				var parsed, curElem,
+					backgroundColor = "";
+
+				if ( value !== "transparent" && ( jQuery.type( value ) !== "string" || ( parsed = stringParse( value ) ) ) ) {
+					value = color( parsed || value );
+					if ( !support.rgba && value._rgba[ 3 ] !== 1 ) {
+						curElem = hook === "backgroundColor" ? elem.parentNode : elem;
+						while (
+							(backgroundColor === "" || backgroundColor === "transparent") &&
+							curElem && curElem.style
+						) {
+							try {
+								backgroundColor = jQuery.css( curElem, "backgroundColor" );
+								curElem = curElem.parentNode;
+							} catch ( e ) {
+							}
+						}
+
+						value = value.blend( backgroundColor && backgroundColor !== "transparent" ?
+							backgroundColor :
+							"_default" );
+					}
+
+					value = value.toRgbaString();
+				}
+				try {
+					elem.style[ hook ] = value;
+				} catch( e ) {
+					// wrapped to prevent IE from throwing errors on "invalid" values like 'auto' or 'inherit'
+				}
+			}
+		};
+		jQuery.fx.step[ hook ] = function( fx ) {
+			if ( !fx.colorInit ) {
+				fx.start = color( fx.elem, hook );
+				fx.end = color( fx.end );
+				fx.colorInit = true;
+			}
+			jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
+		};
+	});
+
+};
+
+color.hook( stepHooks );
+
+jQuery.cssHooks.borderColor = {
+	expand: function( value ) {
+		var expanded = {};
+
+		each( [ "Top", "Right", "Bottom", "Left" ], function( i, part ) {
+			expanded[ "border" + part + "Color" ] = value;
+		});
+		return expanded;
+	}
+};
+
+// Basic color names only.
+// Usage of any of the other color names requires adding yourself or including
+// jquery.color.svg-names.js.
+colors = jQuery.Color.names = {
+	// 4.1. Basic color keywords
+	aqua: "#00ffff",
+	black: "#000000",
+	blue: "#0000ff",
+	fuchsia: "#ff00ff",
+	gray: "#808080",
+	green: "#008000",
+	lime: "#00ff00",
+	maroon: "#800000",
+	navy: "#000080",
+	olive: "#808000",
+	purple: "#800080",
+	red: "#ff0000",
+	silver: "#c0c0c0",
+	teal: "#008080",
+	white: "#ffffff",
+	yellow: "#ffff00",
+
+	// 4.2.3. "transparent" color keyword
+	transparent: [ null, null, null, 0 ],
+
+	_default: "#ffffff"
+};
+
+}( jQuery ));
+
 /* Radio Funtions */
 
 /*
@@ -409,16 +1073,51 @@ function radioTitle() {
 */
 }
 
+$(function() {
+  var el, newPoint, newPlace, offset;
+  $("input[type='range']").change(function() {
+    el = $(this);
+    width = el.width();
+    newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
+    offset = -1.3;
+    if (newPoint < 0) { newPlace = 0;  }
+    else if (newPoint > 1) { newPlace = width; }
+    else { newPlace = width * newPoint + offset; offset -= newPoint;}
+    el
+      .next("output")
+      .css({
+        left: newPlace,
+        marginLeft: offset + "%"
+      })
+      .text(el.val());
+  })
+  .trigger('change');
+});
+
+
+
+
 $(document).ready(function () {
     //setTimeout(function () {radioTitle();}, 2000);
     //setInterval(function () {radioTitle();}, 30000); // update every 30 seconds
-});
+    
+  spectrum();
+    
+  function spectrum() {
+      var randomColor = Math.floor(Math.random()*16777215).toString(16);
+      $("span#user-label").css({ backgroundColor: '#' + randomColor });
+      //$("body").animate({ backgroundColor: '#' + randomColor });
+      //$("body").animate({ backgroundColor: '#' + randomColor }, 1000);
+      //spectrum();
+  }
+                            
 
-$(function() {
-    var randomColor = Math.floor(Math.random()*16777215).toString(16);
-    $("body").css({ backgroundColor: '#' + randomColor });
-    $("span#user-label").css({ backgroundColor: '#' + randomColor });
-    $("#colorcode").text("#" + randomColor);
+
+  
 });
 
 
+
+
+
+

app/js/templates/room.handlebars

@@ -8,7 +8,7 @@
       </div>
       <div class="row-fluid">
          <div id="room_users">
-            <span class="label label-success">online</span> <span class="label label-danger">Radio-bot</span>
+            <span class="label label-success">online:</span> <span class="label label-danger">Radio-bot</span>
          </div>
       </div>
    </div>

gulpfile.js

@@ -12,6 +12,8 @@ var copyTask = function() {
   gulp.src(['./src/css/bootstrap-v3.3.6.css', './src/css/main.css'])
     .pipe(concat('style.min.css'))
     .pipe(gulp.dest('./app/css'));
+  gulp.src('./src/js/main.js')
+    .pipe(gulp.dest('./app/js'));
   gulp.src(['./src/js/main.js', './src/js/radio.js'])
     .pipe(concat('radio.min.js'))
     .pipe(gulp.dest('./app/js'));

src/css/main.css

@@ -1,5 +1,7 @@
 /*! Main CSS file */
-
+body {
+  background-color:#777;
+}
 header .intro-text {
     padding-top: 100px;
     padding-bottom: 50px;
@@ -32,24 +34,68 @@ header .intro-text {
     pointer-events: all;
 }
 
+.tabs-below > .nav-tabs {
+  border-bottom: 0;
+}
+.tabs-below > .nav-tabs {
+  border-top: 1px solid #ddd;
+}
 
+.tabs-below > .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
+}
 
-/* ========== Audio ============ */
+.tabs-below > .nav-tabs > li > a {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
 
-.scrollable-list {
-  overflow: scroll;
-  height: 250px;
-  border-top:1px solid #cecece;
-  border-bottom:1px solid #cecece;
+.tabs-below > .nav-tabs > li > a:hover,
+.tabs-below > .nav-tabs > li > a:focus {
+  border-top-color: #ddd;
+  border-bottom-color: transparent;
+}
+
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
+  border-color: transparent #ddd #ddd #ddd;
 }
+
 ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
 }
+
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+} 
+
+.scrollable-list {
+  overflow: scroll;
+  height: 192px;
+}
+
+.scrollable-list .list-group-item {
+  padding: 3px 10px;
+  font-size:12px;
+}
+
+
+
+
+/* ========== Audio ============ */
+
+#audio_player {
+  background: rgb(145,145,145); /* Old browsers */
+  background: -moz-linear-gradient(top, rgba(145,145,145,1) 0%, rgba(204,204,204,1) 5%, rgba(237,237,237,1) 51%, rgba(237,237,237,1) 78%, rgba(237,237,237,1) 78%, rgba(196,196,196,1) 93%, rgba(196,196,196,1) 93%, rgba(145,145,145,1) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, rgba(145,145,145,1) 0%,rgba(204,204,204,1) 5%,rgba(237,237,237,1) 51%,rgba(237,237,237,1) 78%,rgba(237,237,237,1) 78%,rgba(196,196,196,1) 93%,rgba(196,196,196,1) 93%,rgba(145,145,145,1) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, rgba(145,145,145,1) 0%,rgba(204,204,204,1) 5%,rgba(237,237,237,1) 51%,rgba(237,237,237,1) 78%,rgba(237,237,237,1) 78%,rgba(196,196,196,1) 93%,rgba(196,196,196,1) 93%,rgba(145,145,145,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#919191',GradientType=0 ); /* IE6-9 */
 }
 
 div#player{
@@ -71,6 +117,42 @@ div#player{
 	margin: 0 auto;
   line-height:14px;
 }
+output.volume {
+  position: absolute;
+  background-image: -moz-linear-gradient(top, #444444, #999999);
+  background-image: -o-linear-gradient(top, #444444, #999999);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
+  background-image: -webkit-linear-gradient(top, #444444, #999999);
+  width: 40px;
+  height: 30px;
+  text-align: center;
+  color: white;
+  border-radius: 10px;
+  display: inline-block;
+  font: bold 15px/30px Georgia;
+  bottom: 175%;
+  left: 0;
+  margin-left: -1%;
+}
+output.volume:after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 10px solid #999999;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  margin-top: -1px;
+}
+meter {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
 #amplitude-play-pause{
 	width: 30px;
 	height: 34px;

src/index.html

@@ -62,7 +62,7 @@
          <section id="audio" class="bg-light-gray">
              
             <!-- START Player -->
-            <div class="panel panel-default">
+            <div id="audio_player" class="panel panel-default">
                <div class="panel-body">
                   <div id="player">
                      <div id="song-information">
@@ -79,9 +79,11 @@
                   <div id="controls">
                      <div id="amplitude-play-pause" class="amplitude-paused"></div><br>
                      <span id="amplitude-current-time">0:00</span>
+                     <meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>
                   </div>
-                  <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: 0 0 0 0;font-size:20px"></span>
-                  <input class="bar" type="range" id="amplitude-volume-slider" value="90"/>
+                  <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -4px 0 0 0;font-size:20px"></span>
+                  <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=90/>
+                  <output class="volume" for="volume">90</output>
                   <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-18px 0 0;font-size:20px"></span>
 
                </div>
@@ -94,12 +96,24 @@
 
    			<!-- START Playlist -->
             <div class="panel panel-default">
-         		<div class="scrollable-list">
-                  <ul class="list-group">
-         				<div class="recent"></div>
-         			</ul>
+               <div class="tabbable tabs-below">
+                  <div class="tab-content scrollable-list">
+                     <div class="tab-pane active" id="one_">
+                           <ul class="list-group">
+                              <div class="recent"></div>
+                           </ul>
+                     </div>
+                     <div class="tab-pane" id="two_">
+                     </div>
+                     <div class="tab-pane" id="twee_">
+                     </div>
+                  </div>
+                     <ul class="nav nav-tabs">
+                        <li class="active"><a href="#one" data-toggle="tab"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>&nbsp;Last 100</a></li>
+                        <li><a href="#two" data-toggle="tab">Top Artist</a></li>
+                        <li><a href="#twee" data-toggle="tab">Top Tracks</a></li>
+                     </ul>
                </div>
-               <h5 class="cm-type">Last 100 Tracks:</h5>
             </div>
             <!-- END Playlist -->
          
@@ -122,14 +136,14 @@
                                 <li><a href="#modal_setnick" data-toggle="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Set nickname</a></li>
                             </ul>
                         </li>
-                        <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
+                        <li id="Lobby_tab" class="active"><a href="#Lobby" data-toggle="tab">Lobby</a></li>
                     </ul>
                </div>
                <!-- END Room Tabs -->
                
                <!-- START Rooms -->
                <div id="rooms" class="tab-content">
-                   <div class="tab-pane active" id="MainRoom">
+                   <div class="tab-pane active" id="Lobby">
                       <div class="well">
                            <div class="row-fluid">
                                <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
@@ -138,7 +152,7 @@
                            </div>  
                            <div class="row-fluid">
                               <div id="room_users">
-                                  <span class="label label-success">online</span> <span class="label label-danger">Radio-bot</span>
+                                  <span class="label label-success">online:</span> <span class="label label-danger">Radio-bot</span>
                               </div>
                            </div>
                        </div>
@@ -146,19 +160,19 @@
                </div>
                <!-- END Rooms -->
                
-
-
                 <!-- START message -->
-                <div class="row-fluid">
-                    <form class="form-inline">
-                       <div class="input-group">
-                          <input id="message_text" class="form-control" type="text" placeholder="What say you?" >
-                           <span class="input-group-btn">
-                              <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
-                           </span>
-                        </div>
-                     </form>
-                     <!--<button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>-->
+                <div class="panel-footer">
+                   <div class="row-fluid">
+                       <form class="form">
+                          <div class="input-group">
+                             <input id="message_text" class="form-control" type="text" placeholder="What say you?" >
+                              <span class="input-group-btn">
+                                 <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
+                              </span>
+                           </div>
+                        </form>
+                        <!--<button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>-->
+                   </div>
                 </div>
                 <!-- END message -->
             </div>

src/js/main.js

@@ -13,7 +13,7 @@
         console.log(data);
 
         // Get users connected to mainroom
-        socket.emit('getUsersInRoom', {'room':'MainRoom'});
+        socket.emit('getUsersInRoom', {'room':'Lobby'});
 
         if (debug) {
             // Subscription to rooms
@@ -32,13 +32,13 @@
 
     // Disconnected from server
     socket.on('disconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
+        var info = {'room':'Lobby', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
         addMessage(info);
     });
     
     // Reconnected to server
     socket.on('reconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
+        var info = {'room':'Lobby', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
         addMessage(info);
     });
 
@@ -271,13 +271,13 @@
     $('#b_leave_room').click(function(eventObject) {
         eventObject.preventDefault();
         var currentRoom = getCurrentRoom();
-        if (currentRoom != 'MainRoom') {
+        if (currentRoom != 'Lobby') {
             socket.emit('unsubscribe', {'rooms':[getCurrentRoom()]}); 
 
             // Toogle to MainRoom
-            $('[href="#MainRoom"]').click();
+            $('[href="#Lobby"]').click();
         } else {
-            console.log('Cannot leave MainRoom, sorry');
+            console.log('Cannot leave Lobby, sorry');
         }
     });
 

src/js/radio.js

@@ -1,3 +1,667 @@
+/*!
+ * jQuery Color Animations v@VERSION
+ * https://github.com/jquery/jquery-color
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * Date: @DATE
+ */
+(function( jQuery, undefined ) {
+
+	var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",
+
+	// plusequals test for += 100 -= 100
+	rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
+	// a set of RE's that can match strings and generate color tuples.
+	stringParsers = [{
+			re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ],
+					execResult[ 2 ],
+					execResult[ 3 ],
+					execResult[ 4 ]
+				];
+			}
+		}, {
+			re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ] * 2.55,
+					execResult[ 2 ] * 2.55,
+					execResult[ 3 ] * 2.55,
+					execResult[ 4 ]
+				];
+			}
+		}, {
+			// this regex ignores A-F because it's compared against an already lowercased string
+			re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
+			parse: function( execResult ) {
+				return [
+					parseInt( execResult[ 1 ], 16 ),
+					parseInt( execResult[ 2 ], 16 ),
+					parseInt( execResult[ 3 ], 16 )
+				];
+			}
+		}, {
+			// this regex ignores A-F because it's compared against an already lowercased string
+			re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
+			parse: function( execResult ) {
+				return [
+					parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
+					parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
+					parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
+				];
+			}
+		}, {
+			re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			space: "hsla",
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ],
+					execResult[ 2 ] / 100,
+					execResult[ 3 ] / 100,
+					execResult[ 4 ]
+				];
+			}
+		}],
+
+	// jQuery.Color( )
+	color = jQuery.Color = function( color, green, blue, alpha ) {
+		return new jQuery.Color.fn.parse( color, green, blue, alpha );
+	},
+	spaces = {
+		rgba: {
+			props: {
+				red: {
+					idx: 0,
+					type: "byte"
+				},
+				green: {
+					idx: 1,
+					type: "byte"
+				},
+				blue: {
+					idx: 2,
+					type: "byte"
+				}
+			}
+		},
+
+		hsla: {
+			props: {
+				hue: {
+					idx: 0,
+					type: "degrees"
+				},
+				saturation: {
+					idx: 1,
+					type: "percent"
+				},
+				lightness: {
+					idx: 2,
+					type: "percent"
+				}
+			}
+		}
+	},
+	propTypes = {
+		"byte": {
+			floor: true,
+			max: 255
+		},
+		"percent": {
+			max: 1
+		},
+		"degrees": {
+			mod: 360,
+			floor: true
+		}
+	},
+	support = color.support = {},
+
+	// element for support tests
+	supportElem = jQuery( "<p>" )[ 0 ],
+
+	// colors = jQuery.Color.names
+	colors,
+
+	// local aliases of functions called often
+	each = jQuery.each;
+
+// determine rgba support immediately
+supportElem.style.cssText = "background-color:rgba(1,1,1,.5)";
+support.rgba = supportElem.style.backgroundColor.indexOf( "rgba" ) > -1;
+
+// define cache name and alpha properties
+// for rgba and hsla spaces
+each( spaces, function( spaceName, space ) {
+	space.cache = "_" + spaceName;
+	space.props.alpha = {
+		idx: 3,
+		type: "percent",
+		def: 1
+	};
+});
+
+function clamp( value, prop, allowEmpty ) {
+	var type = propTypes[ prop.type ] || {};
+
+	if ( value == null ) {
+		return (allowEmpty || !prop.def) ? null : prop.def;
+	}
+
+	// ~~ is an short way of doing floor for positive numbers
+	value = type.floor ? ~~value : parseFloat( value );
+
+	// IE will pass in empty strings as value for alpha,
+	// which will hit this case
+	if ( isNaN( value ) ) {
+		return prop.def;
+	}
+
+	if ( type.mod ) {
+		// we add mod before modding to make sure that negatives values
+		// get converted properly: -10 -> 350
+		return (value + type.mod) % type.mod;
+	}
+
+	// for now all property types without mod have min and max
+	return 0 > value ? 0 : type.max < value ? type.max : value;
+}
+
+function stringParse( string ) {
+	var inst = color(),
+		rgba = inst._rgba = [];
+
+	string = string.toLowerCase();
+
+	each( stringParsers, function( i, parser ) {
+		var parsed,
+			match = parser.re.exec( string ),
+			values = match && parser.parse( match ),
+			spaceName = parser.space || "rgba";
+
+		if ( values ) {
+			parsed = inst[ spaceName ]( values );
+
+			// if this was an rgba parse the assignment might happen twice
+			// oh well....
+			inst[ spaces[ spaceName ].cache ] = parsed[ spaces[ spaceName ].cache ];
+			rgba = inst._rgba = parsed._rgba;
+
+			// exit each( stringParsers ) here because we matched
+			return false;
+		}
+	});
+
+	// Found a stringParser that handled it
+	if ( rgba.length ) {
+
+		// if this came from a parsed string, force "transparent" when alpha is 0
+		// chrome, (and maybe others) return "transparent" as rgba(0,0,0,0)
+		if ( rgba.join() === "0,0,0,0" ) {
+			jQuery.extend( rgba, colors.transparent );
+		}
+		return inst;
+	}
+
+	// named colors
+	return colors[ string ];
+}
+
+color.fn = jQuery.extend( color.prototype, {
+	parse: function( red, green, blue, alpha ) {
+		if ( red === undefined ) {
+			this._rgba = [ null, null, null, null ];
+			return this;
+		}
+		if ( red.jquery || red.nodeType ) {
+			red = jQuery( red ).css( green );
+			green = undefined;
+		}
+
+		var inst = this,
+			type = jQuery.type( red ),
+			rgba = this._rgba = [];
+
+		// more than 1 argument specified - assume ( red, green, blue, alpha )
+		if ( green !== undefined ) {
+			red = [ red, green, blue, alpha ];
+			type = "array";
+		}
+
+		if ( type === "string" ) {
+			return this.parse( stringParse( red ) || colors._default );
+		}
+
+		if ( type === "array" ) {
+			each( spaces.rgba.props, function( key, prop ) {
+				rgba[ prop.idx ] = clamp( red[ prop.idx ], prop );
+			});
+			return this;
+		}
+
+		if ( type === "object" ) {
+			if ( red instanceof color ) {
+				each( spaces, function( spaceName, space ) {
+					if ( red[ space.cache ] ) {
+						inst[ space.cache ] = red[ space.cache ].slice();
+					}
+				});
+			} else {
+				each( spaces, function( spaceName, space ) {
+					var cache = space.cache;
+					each( space.props, function( key, prop ) {
+
+						// if the cache doesn't exist, and we know how to convert
+						if ( !inst[ cache ] && space.to ) {
+
+							// if the value was null, we don't need to copy it
+							// if the key was alpha, we don't need to copy it either
+							if ( key === "alpha" || red[ key ] == null ) {
+								return;
+							}
+							inst[ cache ] = space.to( inst._rgba );
+						}
+
+						// this is the only case where we allow nulls for ALL properties.
+						// call clamp with alwaysAllowEmpty
+						inst[ cache ][ prop.idx ] = clamp( red[ key ], prop, true );
+					});
+
+					// everything defined but alpha?
+					if ( inst[ cache ] && jQuery.inArray( null, inst[ cache ].slice( 0, 3 ) ) < 0 ) {
+						// use the default of 1
+						inst[ cache ][ 3 ] = 1;
+						if ( space.from ) {
+							inst._rgba = space.from( inst[ cache ] );
+						}
+					}
+				});
+			}
+			return this;
+		}
+	},
+	is: function( compare ) {
+		var is = color( compare ),
+			same = true,
+			inst = this;
+
+		each( spaces, function( _, space ) {
+			var localCache,
+				isCache = is[ space.cache ];
+			if (isCache) {
+				localCache = inst[ space.cache ] || space.to && space.to( inst._rgba ) || [];
+				each( space.props, function( _, prop ) {
+					if ( isCache[ prop.idx ] != null ) {
+						same = ( isCache[ prop.idx ] === localCache[ prop.idx ] );
+						return same;
+					}
+				});
+			}
+			return same;
+		});
+		return same;
+	},
+	_space: function() {
+		var used = [],
+			inst = this;
+		each( spaces, function( spaceName, space ) {
+			if ( inst[ space.cache ] ) {
+				used.push( spaceName );
+			}
+		});
+		return used.pop();
+	},
+	transition: function( other, distance ) {
+		var end = color( other ),
+			spaceName = end._space(),
+			space = spaces[ spaceName ],
+			startColor = this.alpha() === 0 ? color( "transparent" ) : this,
+			start = startColor[ space.cache ] || space.to( startColor._rgba ),
+			result = start.slice();
+
+		end = end[ space.cache ];
+		each( space.props, function( key, prop ) {
+			var index = prop.idx,
+				startValue = start[ index ],
+				endValue = end[ index ],
+				type = propTypes[ prop.type ] || {};
+
+			// if null, don't override start value
+			if ( endValue === null ) {
+				return;
+			}
+			// if null - use end
+			if ( startValue === null ) {
+				result[ index ] = endValue;
+			} else {
+				if ( type.mod ) {
+					if ( endValue - startValue > type.mod / 2 ) {
+						startValue += type.mod;
+					} else if ( startValue - endValue > type.mod / 2 ) {
+						startValue -= type.mod;
+					}
+				}
+				result[ index ] = clamp( ( endValue - startValue ) * distance + startValue, prop );
+			}
+		});
+		return this[ spaceName ]( result );
+	},
+	blend: function( opaque ) {
+		// if we are already opaque - return ourself
+		if ( this._rgba[ 3 ] === 1 ) {
+			return this;
+		}
+
+		var rgb = this._rgba.slice(),
+			a = rgb.pop(),
+			blend = color( opaque )._rgba;
+
+		return color( jQuery.map( rgb, function( v, i ) {
+			return ( 1 - a ) * blend[ i ] + a * v;
+		}));
+	},
+	toRgbaString: function() {
+		var prefix = "rgba(",
+			rgba = jQuery.map( this._rgba, function( v, i ) {
+				return v == null ? ( i > 2 ? 1 : 0 ) : v;
+			});
+
+		if ( rgba[ 3 ] === 1 ) {
+			rgba.pop();
+			prefix = "rgb(";
+		}
+
+		return prefix + rgba.join() + ")";
+	},
+	toHslaString: function() {
+		var prefix = "hsla(",
+			hsla = jQuery.map( this.hsla(), function( v, i ) {
+				if ( v == null ) {
+					v = i > 2 ? 1 : 0;
+				}
+
+				// catch 1 and 2
+				if ( i && i < 3 ) {
+					v = Math.round( v * 100 ) + "%";
+				}
+				return v;
+			});
+
+		if ( hsla[ 3 ] === 1 ) {
+			hsla.pop();
+			prefix = "hsl(";
+		}
+		return prefix + hsla.join() + ")";
+	},
+	toHexString: function( includeAlpha ) {
+		var rgba = this._rgba.slice(),
+			alpha = rgba.pop();
+
+		if ( includeAlpha ) {
+			rgba.push( ~~( alpha * 255 ) );
+		}
+
+		return "#" + jQuery.map( rgba, function( v ) {
+
+			// default to 0 when nulls exist
+			v = ( v || 0 ).toString( 16 );
+			return v.length === 1 ? "0" + v : v;
+		}).join("");
+	},
+	toString: function() {
+		return this._rgba[ 3 ] === 0 ? "transparent" : this.toRgbaString();
+	}
+});
+color.fn.parse.prototype = color.fn;
+
+// hsla conversions adapted from:
+// https://code.google.com/p/maashaack/source/browse/packages/graphics/trunk/src/graphics/colors/HUE2RGB.as?r=5021
+
+function hue2rgb( p, q, h ) {
+	h = ( h + 1 ) % 1;
+	if ( h * 6 < 1 ) {
+		return p + (q - p) * h * 6;
+	}
+	if ( h * 2 < 1) {
+		return q;
+	}
+	if ( h * 3 < 2 ) {
+		return p + (q - p) * ((2/3) - h) * 6;
+	}
+	return p;
+}
+
+spaces.hsla.to = function ( rgba ) {
+	if ( rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null ) {
+		return [ null, null, null, rgba[ 3 ] ];
+	}
+	var r = rgba[ 0 ] / 255,
+		g = rgba[ 1 ] / 255,
+		b = rgba[ 2 ] / 255,
+		a = rgba[ 3 ],
+		max = Math.max( r, g, b ),
+		min = Math.min( r, g, b ),
+		diff = max - min,
+		add = max + min,
+		l = add * 0.5,
+		h, s;
+
+	if ( min === max ) {
+		h = 0;
+	} else if ( r === max ) {
+		h = ( 60 * ( g - b ) / diff ) + 360;
+	} else if ( g === max ) {
+		h = ( 60 * ( b - r ) / diff ) + 120;
+	} else {
+		h = ( 60 * ( r - g ) / diff ) + 240;
+	}
+
+	// chroma (diff) == 0 means greyscale which, by definition, saturation = 0%
+	// otherwise, saturation is based on the ratio of chroma (diff) to lightness (add)
+	if ( diff === 0 ) {
+		s = 0;
+	} else if ( l <= 0.5 ) {
+		s = diff / add;
+	} else {
+		s = diff / ( 2 - add );
+	}
+	return [ Math.round(h) % 360, s, l, a == null ? 1 : a ];
+};
+
+spaces.hsla.from = function ( hsla ) {
+	if ( hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null ) {
+		return [ null, null, null, hsla[ 3 ] ];
+	}
+	var h = hsla[ 0 ] / 360,
+		s = hsla[ 1 ],
+		l = hsla[ 2 ],
+		a = hsla[ 3 ],
+		q = l <= 0.5 ? l * ( 1 + s ) : l + s - l * s,
+		p = 2 * l - q;
+
+	return [
+		Math.round( hue2rgb( p, q, h + ( 1 / 3 ) ) * 255 ),
+		Math.round( hue2rgb( p, q, h ) * 255 ),
+		Math.round( hue2rgb( p, q, h - ( 1 / 3 ) ) * 255 ),
+		a
+	];
+};
+
+
+each( spaces, function( spaceName, space ) {
+	var props = space.props,
+		cache = space.cache,
+		to = space.to,
+		from = space.from;
+
+	// makes rgba() and hsla()
+	color.fn[ spaceName ] = function( value ) {
+
+		// generate a cache for this space if it doesn't exist
+		if ( to && !this[ cache ] ) {
+			this[ cache ] = to( this._rgba );
+		}
+		if ( value === undefined ) {
+			return this[ cache ].slice();
+		}
+
+		var ret,
+			type = jQuery.type( value ),
+			arr = ( type === "array" || type === "object" ) ? value : arguments,
+			local = this[ cache ].slice();
+
+		each( props, function( key, prop ) {
+			var val = arr[ type === "object" ? key : prop.idx ];
+			if ( val == null ) {
+				val = local[ prop.idx ];
+			}
+			local[ prop.idx ] = clamp( val, prop );
+		});
+
+		if ( from ) {
+			ret = color( from( local ) );
+			ret[ cache ] = local;
+			return ret;
+		} else {
+			return color( local );
+		}
+	};
+
+	// makes red() green() blue() alpha() hue() saturation() lightness()
+	each( props, function( key, prop ) {
+		// alpha is included in more than one space
+		if ( color.fn[ key ] ) {
+			return;
+		}
+		color.fn[ key ] = function( value ) {
+			var vtype = jQuery.type( value ),
+				fn = ( key === "alpha" ? ( this._hsla ? "hsla" : "rgba" ) : spaceName ),
+				local = this[ fn ](),
+				cur = local[ prop.idx ],
+				match;
+
+			if ( vtype === "undefined" ) {
+				return cur;
+			}
+
+			if ( vtype === "function" ) {
+				value = value.call( this, cur );
+				vtype = jQuery.type( value );
+			}
+			if ( value == null && prop.empty ) {
+				return this;
+			}
+			if ( vtype === "string" ) {
+				match = rplusequals.exec( value );
+				if ( match ) {
+					value = cur + parseFloat( match[ 2 ] ) * ( match[ 1 ] === "+" ? 1 : -1 );
+				}
+			}
+			local[ prop.idx ] = value;
+			return this[ fn ]( local );
+		};
+	});
+});
+
+// add cssHook and .fx.step function for each named hook.
+// accept a space separated string of properties
+color.hook = function( hook ) {
+	var hooks = hook.split( " " );
+	each( hooks, function( i, hook ) {
+		jQuery.cssHooks[ hook ] = {
+			set: function( elem, value ) {
+				var parsed, curElem,
+					backgroundColor = "";
+
+				if ( value !== "transparent" && ( jQuery.type( value ) !== "string" || ( parsed = stringParse( value ) ) ) ) {
+					value = color( parsed || value );
+					if ( !support.rgba && value._rgba[ 3 ] !== 1 ) {
+						curElem = hook === "backgroundColor" ? elem.parentNode : elem;
+						while (
+							(backgroundColor === "" || backgroundColor === "transparent") &&
+							curElem && curElem.style
+						) {
+							try {
+								backgroundColor = jQuery.css( curElem, "backgroundColor" );
+								curElem = curElem.parentNode;
+							} catch ( e ) {
+							}
+						}
+
+						value = value.blend( backgroundColor && backgroundColor !== "transparent" ?
+							backgroundColor :
+							"_default" );
+					}
+
+					value = value.toRgbaString();
+				}
+				try {
+					elem.style[ hook ] = value;
+				} catch( e ) {
+					// wrapped to prevent IE from throwing errors on "invalid" values like 'auto' or 'inherit'
+				}
+			}
+		};
+		jQuery.fx.step[ hook ] = function( fx ) {
+			if ( !fx.colorInit ) {
+				fx.start = color( fx.elem, hook );
+				fx.end = color( fx.end );
+				fx.colorInit = true;
+			}
+			jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
+		};
+	});
+
+};
+
+color.hook( stepHooks );
+
+jQuery.cssHooks.borderColor = {
+	expand: function( value ) {
+		var expanded = {};
+
+		each( [ "Top", "Right", "Bottom", "Left" ], function( i, part ) {
+			expanded[ "border" + part + "Color" ] = value;
+		});
+		return expanded;
+	}
+};
+
+// Basic color names only.
+// Usage of any of the other color names requires adding yourself or including
+// jquery.color.svg-names.js.
+colors = jQuery.Color.names = {
+	// 4.1. Basic color keywords
+	aqua: "#00ffff",
+	black: "#000000",
+	blue: "#0000ff",
+	fuchsia: "#ff00ff",
+	gray: "#808080",
+	green: "#008000",
+	lime: "#00ff00",
+	maroon: "#800000",
+	navy: "#000080",
+	olive: "#808000",
+	purple: "#800080",
+	red: "#ff0000",
+	silver: "#c0c0c0",
+	teal: "#008080",
+	white: "#ffffff",
+	yellow: "#ffff00",
+
+	// 4.2.3. "transparent" color keyword
+	transparent: [ null, null, null, 0 ],
+
+	_default: "#ffffff"
+};
+
+}( jQuery ));
+
 /* Radio Funtions */
 
 /*
@@ -107,16 +771,51 @@ function radioTitle() {
 */
 }
 
+$(function() {
+  var el, newPoint, newPlace, offset;
+  $("input[type='range']").change(function() {
+    el = $(this);
+    width = el.width();
+    newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
+    offset = -1.3;
+    if (newPoint < 0) { newPlace = 0;  }
+    else if (newPoint > 1) { newPlace = width; }
+    else { newPlace = width * newPoint + offset; offset -= newPoint;}
+    el
+      .next("output")
+      .css({
+        left: newPlace,
+        marginLeft: offset + "%"
+      })
+      .text(el.val());
+  })
+  .trigger('change');
+});
+
+
+
+
 $(document).ready(function () {
     //setTimeout(function () {radioTitle();}, 2000);
     //setInterval(function () {radioTitle();}, 30000); // update every 30 seconds
-});
+    
+  spectrum();
+    
+  function spectrum() {
+      var randomColor = Math.floor(Math.random()*16777215).toString(16);
+      $("span#user-label").css({ backgroundColor: '#' + randomColor });
+      //$("body").animate({ backgroundColor: '#' + randomColor });
+      //$("body").animate({ backgroundColor: '#' + randomColor }, 1000);
+      //spectrum();
+  }
+                            
 
-$(function() {
-    var randomColor = Math.floor(Math.random()*16777215).toString(16);
-    $("body").css({ backgroundColor: '#' + randomColor });
-    $("span#user-label").css({ backgroundColor: '#' + randomColor });
-    $("#colorcode").text("#" + randomColor);
+
+  
 });
 
 
+
+
+
+

src/js/templates/room.handlebars

@@ -8,7 +8,7 @@
       </div>
       <div class="row-fluid">
          <div id="room_users">
-            <span class="label label-success">online</span> <span class="label label-danger">Radio-bot</span>
+            <span class="label label-success">online:</span> <span class="label label-danger">Radio-bot</span>
          </div>
       </div>
    </div>