Set by default a clean UI with no panel

public/css/main.css

@@ -51,9 +51,12 @@ article footer {
 	-o-border-radius: 5px;
 	border-radius: 5px;
 	box-shadow: 0 0 30px 10px #000;
-	height: 320px;
+	height: 250px;
 	margin: 50px auto 0;
-	width: 500px;
+	width: 450px;
+}
+#player.default.with-infos {
+	height: 320px;
 }
 #player.default,
 #player.default button,
@@ -82,16 +85,16 @@ article footer {
 
 /* REMOTE PANEL */
 #player.default .remote {
-	bottom: 10px;
-	left: 10px;
 	padding-right: 20px;
 	position: absolute;
+	right: 10px;
+	top: 10px;
 }
 #player.default .remote .button {
 	border: 2px solid;
-	display: inline-block;	
+	display: block;	
 	height: 25px;
-	margin-right: 50px;
+	margin-bottom: 20px;
 	padding: 0;
 	vertical-align: middle;
 }
@@ -187,7 +190,7 @@ article footer {
 	-ms-border-radius: 15px;
 	-o-border-radius: 15px;
 	border-radius: 15px;
-	border-width: 3px;
+	border-width: 2px;
 	-webkit-box-shadow: 0 1px 2px #666 inset, 0 -1px 2px #000 inset;
 	-moz-box-shadow: 0 1px 2px #666 inset, 0 -1px 2px #000 inset;
 	-ms-box-shadow: 0 1px 2px #666 inset, 0 -1px 2px #000 inset;
@@ -221,23 +224,25 @@ article footer {
 	background: linear-gradient(top left, #111, #1A1A1A);
 	border: 2px solid #000;
 	border-radius: 3px;
+	bottom: 10px;
 	color: #444;
 	padding: 10px;
 	position: absolute;
-	right: 10px;
 	text-align: right;
-	top: 10px;
+}
+
+/** OTHER PANELS / INFOS **/
+#player.default .infos {
+	right: 10px
 }
 #player.default .infos p span {
 	color: #999;
 	display: inline-block;
 	min-width: 35px;
 }
+/** OTHER PANELS / PLAYLIST **/
 #player.default .playlist {
-	bottom: 10px;
-	position: absolute;
-	right: 10px;
-	top: auto;
+	left: 10px;
 }
 #player.default .playlist button {
 	background: transparent;

public/index.php

@@ -73,8 +73,8 @@
 				<br />animateDelay=5000</li>
 			<li><a href="index.php?useInfos=true&infos=duration,current,timer,position">Display the informations panel and choose the track informations</a>
 				<br />useInfos=true&infos=duration,current,timer,position</li>
-			<li><a href="index.php?usePlaylist=false&useInfos=false">Clean turntable with no distraction</a>
-				<br />usePlaylist=false&useInfos=false</li>
+			<li><a href="index.php?usePlaylist=true&useInfos=true">All panels displayed</a>
+				<br />usePlaylist=true&useInfos=true</li>
 		</ul>
 		<h2>All the config settings :</h2>
 		<pre>

public/js/turntable-player.js

@@ -28,8 +28,8 @@ turntablePlayerEngine.prototype = {
 		infos: ["duration", "timer"], // Choices : duration, current, timer, position
 		logMethodNames: ["log", "debug", "warn", "info"], // Log informations in the console
 		theme: 'wood', // The name of the theme
-		useInfos: true, // Display the informations panel
-		usePlaylist: true, // Display the playlist panel
+		useInfos: false, // Display the informations panel
+		usePlaylist: false, // Display the playlist panel
 		useTransitions: true, // Use the audio transitions
 
 		themes : { // The list of the available themes with their settings
@@ -163,7 +163,7 @@ turntablePlayerEngine.prototype = {
 					cover: {
 						r: 45,
 						fill: '#666',
-						stroke: '#fff',
+						stroke: 'transparent',
 						turnable: false
 					},
 					title: {
@@ -527,6 +527,8 @@ turntablePlayerEngine.prototype = {
 			}
 			this._wrapper = wrapper;
 			this.toggleClass(this._wrapper, this.options.themes[this.options.theme].cssClass, 'add');
+			if (this.options.useInfos || this.options.usePlaylist)
+				this.toggleClass(this._wrapper, 'with-infos', 'add');
 		}
 
 		return this._wrapper;
@@ -649,7 +651,7 @@ turntablePlayerEngine.prototype = {
 	},
 
 	/**
-	 * Add the power button to the player
+	 * Add the power button in the remote panel
 	 */
 	initPowerButton : function () {
 		if (!this._powerButtons.inputON) {
@@ -699,6 +701,9 @@ turntablePlayerEngine.prototype = {
 		}
 	},
 
+	/**
+	 * Add the next button in the remote panel
+	 */
 	initNextButton : function () {
 		if (!this._nextButton) {
 			var
@@ -720,8 +725,6 @@ turntablePlayerEngine.prototype = {
 		}
 	},
 
-
-
 	/**
 	 * Init the playlist
 	 */