From 70a185a5b68c71f03ca942191efc145969a33705 Mon Sep 17 00:00:00 2001
From: woutervanwijk <wouter@iMac-3.local>
Date: Sun, 6 Apr 2014 00:05:53 +0200
Subject: [PATCH] changes for webclient in musicbox alpha4

---
 webclient/css/add2home.css                    |   0
 webclient/css/font-awesome.css                |   0
 webclient/css/font-awesome.min.css            |   0
 webclient/css/fonts/Flat-UI-Icons-24.ttf      | Bin
 webclient/css/fonts/Flat-UI-Icons-24.woff     | Bin
 webclient/css/fonts/lato-black.ttf            | Bin
 webclient/css/fonts/lato-black.woff           | Bin
 webclient/css/fonts/lato-bold.ttf             | Bin
 webclient/css/fonts/lato-bold.woff            | Bin
 webclient/css/fonts/lato-italic.ttf           | Bin
 webclient/css/fonts/lato-italic.woff          | Bin
 webclient/css/fonts/lato-regular.ttf          | Bin
 webclient/css/fonts/lato-regular.woff         | Bin
 webclient/css/images/ajax-loader.gif          | Bin
 webclient/css/images/icons-18-black.png       | Bin
 webclient/css/images/icons-18-white.png       | Bin
 webclient/css/images/icons-36-black.png       | Bin
 webclient/css/images/icons-36-white.png       | Bin
 webclient/css/iscroll-pull-icon@2x.png        | Bin
 webclient/css/jquery.mobile-1.3.1.css         |   0
 webclient/css/jquery.mobile-1.3.1.min.css     |   0
 webclient/css/jquery.mobile-1.4.0-alpha.2.css |   0
 .../css/jquery.mobile-1.4.0-alpha.2.min.css   |   0
 webclient/css/jquery.mobile.flatui.css        |   0
 webclient/css/jquery.mobile.flatui.min.css    |   0
 .../css/jquery.mobile.iscrollview-pull.css    |   0
 webclient/css/jquery.mobile.iscrollview.css   |   0
 .../css/jquery.mobile.structure-1.3.1.css     |   0
 .../css/jquery.mobile.structure-1.3.1.min.css |   0
 .../jquery.mobile.structure-1.4.0-alpha.2.css |   0
 ...ery.mobile.structure-1.4.0-alpha.2.min.css |   0
 webclient/css/jquery.mobile.theme-1.3.1.css   |   0
 .../css/jquery.mobile.theme-1.3.1.min.css     |   0
 .../css/jquery.mobile.theme-1.4.0-alpha.2.css |   0
 .../jquery.mobile.theme-1.4.0-alpha.2.min.css |   0
 webclient/css/webclient.css                   |   8 +-
 webclient/dialog-success.html                 |   0
 webclient/index.html                          |   8 +-
 webclient/js/add2home.js                      |   0
 webclient/js/controls.js                      |  40 ++-
 webclient/js/functionsvars.js                 |   4 +-
 webclient/js/iscroll-lite.js                  |   0
 webclient/js/iscroll.js                       |   0
 webclient/js/jquery-1.10.2.js                 |   0
 webclient/js/jquery-1.10.2.min.js             |   0
 webclient/js/jquery-1.10.2.min.map            |   0
 webclient/js/jquery-1.8.3.js                  |   0
 webclient/js/jquery-1.8.3.min.js              |   0
 webclient/js/jquery-2.0.3.min.js              |   0
 webclient/js/jquery.ba-hashchange.min.js      |   0
 webclient/js/jquery.cookie.js                 |   0
 webclient/js/jquery.mobile-1.3.1.js           |   0
 webclient/js/jquery.mobile-1.3.1.min.js       |   0
 webclient/js/jquery.mobile-1.3.1.min.map      |   0
 webclient/js/jquery.mobile-1.3.2.min.js       |   0
 webclient/js/jquery.mobile-1.4.0-alpha.2.js   |   0
 .../js/jquery.mobile-1.4.0-alpha.2.min.js     |   0
 .../js/jquery.mobile-1.4.0-alpha.2.min.map    |   0
 .../jquery.mobile.iscrollview-closure-min.js  |   0
 .../js/jquery.mobile.iscrollview-yui-min.js   |   0
 webclient/js/jquery.mobile.iscrollview.js     |   0
 webclient/js/jquery.touchwipe.min.js          |   0
 webclient/js/jquery.truncate.min.js           |   0
 webclient/js/lastfm.api.cache.js              |   0
 webclient/js/lastfm.api.js                    |   0
 webclient/js/lastfm.api.md5.js                |   0
 webclient/js/library.js                       |   2 -
 webclient/settings/favicon.png                | Bin
 webclient/settings/index.html                 | 325 +++++++++++++++---
 webclient/settings/mopidy.css                 |   0
 70 files changed, 304 insertions(+), 83 deletions(-)
 mode change 100755 => 100644 webclient/css/add2home.css
 mode change 100755 => 100644 webclient/css/font-awesome.css
 mode change 100755 => 100644 webclient/css/font-awesome.min.css
 mode change 100755 => 100644 webclient/css/fonts/Flat-UI-Icons-24.ttf
 mode change 100755 => 100644 webclient/css/fonts/Flat-UI-Icons-24.woff
 mode change 100755 => 100644 webclient/css/fonts/lato-black.ttf
 mode change 100755 => 100644 webclient/css/fonts/lato-black.woff
 mode change 100755 => 100644 webclient/css/fonts/lato-bold.ttf
 mode change 100755 => 100644 webclient/css/fonts/lato-bold.woff
 mode change 100755 => 100644 webclient/css/fonts/lato-italic.ttf
 mode change 100755 => 100644 webclient/css/fonts/lato-italic.woff
 mode change 100755 => 100644 webclient/css/fonts/lato-regular.ttf
 mode change 100755 => 100644 webclient/css/fonts/lato-regular.woff
 mode change 100755 => 100644 webclient/css/images/ajax-loader.gif
 mode change 100755 => 100644 webclient/css/images/icons-18-black.png
 mode change 100755 => 100644 webclient/css/images/icons-18-white.png
 mode change 100755 => 100644 webclient/css/images/icons-36-black.png
 mode change 100755 => 100644 webclient/css/images/icons-36-white.png
 mode change 100755 => 100644 webclient/css/iscroll-pull-icon@2x.png
 mode change 100755 => 100644 webclient/css/jquery.mobile-1.3.1.css
 mode change 100755 => 100644 webclient/css/jquery.mobile-1.3.1.min.css
 mode change 100755 => 100644 webclient/css/jquery.mobile-1.4.0-alpha.2.css
 mode change 100755 => 100644 webclient/css/jquery.mobile-1.4.0-alpha.2.min.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.flatui.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.flatui.min.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.iscrollview-pull.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.iscrollview.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.structure-1.3.1.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.structure-1.3.1.min.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.structure-1.4.0-alpha.2.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.structure-1.4.0-alpha.2.min.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.theme-1.3.1.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.theme-1.3.1.min.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.theme-1.4.0-alpha.2.css
 mode change 100755 => 100644 webclient/css/jquery.mobile.theme-1.4.0-alpha.2.min.css
 mode change 100755 => 100644 webclient/css/webclient.css
 mode change 100755 => 100644 webclient/dialog-success.html
 mode change 100755 => 100644 webclient/js/add2home.js
 mode change 100755 => 100644 webclient/js/iscroll-lite.js
 mode change 100755 => 100644 webclient/js/iscroll.js
 mode change 100755 => 100644 webclient/js/jquery-1.10.2.js
 mode change 100755 => 100644 webclient/js/jquery-1.10.2.min.js
 mode change 100755 => 100644 webclient/js/jquery-1.10.2.min.map
 mode change 100755 => 100644 webclient/js/jquery-1.8.3.js
 mode change 100755 => 100644 webclient/js/jquery-1.8.3.min.js
 mode change 100755 => 100644 webclient/js/jquery-2.0.3.min.js
 mode change 100755 => 100644 webclient/js/jquery.ba-hashchange.min.js
 mode change 100755 => 100644 webclient/js/jquery.cookie.js
 mode change 100755 => 100644 webclient/js/jquery.mobile-1.3.1.js
 mode change 100755 => 100644 webclient/js/jquery.mobile-1.3.1.min.js
 mode change 100755 => 100644 webclient/js/jquery.mobile-1.3.1.min.map
 mode change 100755 => 100644 webclient/js/jquery.mobile-1.3.2.min.js
 mode change 100755 => 100644 webclient/js/jquery.mobile-1.4.0-alpha.2.js
 mode change 100755 => 100644 webclient/js/jquery.mobile-1.4.0-alpha.2.min.js
 mode change 100755 => 100644 webclient/js/jquery.mobile-1.4.0-alpha.2.min.map
 mode change 100755 => 100644 webclient/js/jquery.mobile.iscrollview-closure-min.js
 mode change 100755 => 100644 webclient/js/jquery.mobile.iscrollview-yui-min.js
 mode change 100755 => 100644 webclient/js/jquery.mobile.iscrollview.js
 mode change 100755 => 100644 webclient/js/jquery.touchwipe.min.js
 mode change 100755 => 100644 webclient/js/jquery.truncate.min.js
 mode change 100755 => 100644 webclient/js/lastfm.api.cache.js
 mode change 100755 => 100644 webclient/js/lastfm.api.js
 mode change 100755 => 100644 webclient/js/lastfm.api.md5.js
 mode change 100755 => 100644 webclient/settings/favicon.png
 mode change 100755 => 100644 webclient/settings/mopidy.css

diff --git a/webclient/css/add2home.css b/webclient/css/add2home.css
old mode 100755
new mode 100644
diff --git a/webclient/css/font-awesome.css b/webclient/css/font-awesome.css
old mode 100755
new mode 100644
diff --git a/webclient/css/font-awesome.min.css b/webclient/css/font-awesome.min.css
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/Flat-UI-Icons-24.ttf b/webclient/css/fonts/Flat-UI-Icons-24.ttf
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/Flat-UI-Icons-24.woff b/webclient/css/fonts/Flat-UI-Icons-24.woff
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/lato-black.ttf b/webclient/css/fonts/lato-black.ttf
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/lato-black.woff b/webclient/css/fonts/lato-black.woff
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/lato-bold.ttf b/webclient/css/fonts/lato-bold.ttf
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/lato-bold.woff b/webclient/css/fonts/lato-bold.woff
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/lato-italic.ttf b/webclient/css/fonts/lato-italic.ttf
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/lato-italic.woff b/webclient/css/fonts/lato-italic.woff
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/lato-regular.ttf b/webclient/css/fonts/lato-regular.ttf
old mode 100755
new mode 100644
diff --git a/webclient/css/fonts/lato-regular.woff b/webclient/css/fonts/lato-regular.woff
old mode 100755
new mode 100644
diff --git a/webclient/css/images/ajax-loader.gif b/webclient/css/images/ajax-loader.gif
old mode 100755
new mode 100644
diff --git a/webclient/css/images/icons-18-black.png b/webclient/css/images/icons-18-black.png
old mode 100755
new mode 100644
diff --git a/webclient/css/images/icons-18-white.png b/webclient/css/images/icons-18-white.png
old mode 100755
new mode 100644
diff --git a/webclient/css/images/icons-36-black.png b/webclient/css/images/icons-36-black.png
old mode 100755
new mode 100644
diff --git a/webclient/css/images/icons-36-white.png b/webclient/css/images/icons-36-white.png
old mode 100755
new mode 100644
diff --git a/webclient/css/iscroll-pull-icon@2x.png b/webclient/css/iscroll-pull-icon@2x.png
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile-1.3.1.css b/webclient/css/jquery.mobile-1.3.1.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile-1.3.1.min.css b/webclient/css/jquery.mobile-1.3.1.min.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile-1.4.0-alpha.2.css b/webclient/css/jquery.mobile-1.4.0-alpha.2.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile-1.4.0-alpha.2.min.css b/webclient/css/jquery.mobile-1.4.0-alpha.2.min.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.flatui.css b/webclient/css/jquery.mobile.flatui.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.flatui.min.css b/webclient/css/jquery.mobile.flatui.min.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.iscrollview-pull.css b/webclient/css/jquery.mobile.iscrollview-pull.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.iscrollview.css b/webclient/css/jquery.mobile.iscrollview.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.structure-1.3.1.css b/webclient/css/jquery.mobile.structure-1.3.1.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.structure-1.3.1.min.css b/webclient/css/jquery.mobile.structure-1.3.1.min.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.structure-1.4.0-alpha.2.css b/webclient/css/jquery.mobile.structure-1.4.0-alpha.2.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.structure-1.4.0-alpha.2.min.css b/webclient/css/jquery.mobile.structure-1.4.0-alpha.2.min.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.theme-1.3.1.css b/webclient/css/jquery.mobile.theme-1.3.1.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.theme-1.3.1.min.css b/webclient/css/jquery.mobile.theme-1.3.1.min.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.theme-1.4.0-alpha.2.css b/webclient/css/jquery.mobile.theme-1.4.0-alpha.2.css
old mode 100755
new mode 100644
diff --git a/webclient/css/jquery.mobile.theme-1.4.0-alpha.2.min.css b/webclient/css/jquery.mobile.theme-1.4.0-alpha.2.min.css
old mode 100755
new mode 100644
diff --git a/webclient/css/webclient.css b/webclient/css/webclient.css
old mode 100755
new mode 100644
index 0f237cd..83f2b44
--- a/webclient/css/webclient.css
+++ b/webclient/css/webclient.css
@@ -186,7 +186,7 @@
     margin-right: 35px;
 }
 
-.ui-mobile .ui-page .ui-slider-input, .ui-mobile .ui-dialog .ui-slider-input {
+.ui-slider-input {
     display: none !important;
 }
 
@@ -524,7 +524,11 @@ a {
 }
 
 
-
+.settingscoll label {
+    font-size: 120%;
+    font-weight: bold;
+    padding-top: 30px;
+}
 
 /* panel workaround to make it responsive wrap push on wide viewports once open */
 @media (min-width: 35em){
diff --git a/webclient/dialog-success.html b/webclient/dialog-success.html
old mode 100755
new mode 100644
diff --git a/webclient/index.html b/webclient/index.html
index 4bd19a7..e70912c 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -37,11 +37,11 @@
     <meta http-equiv="cleartype" content="on">
 
     <!-- Tile icon for Win8 (144x144 + tile color) -->
-    <meta name="msapplication-TileImage" content="/mopidy/favicon.png">
+    <meta name="msapplication-TileImage" content="mopidy/favicon.png">
     <meta name="msapplication-TileColor" content="#eee">
 
-    <link rel="apple-touch-icon" href="/mopidy/favicon.png"/>
-
+    <link rel="apple-touch-icon" href="mopidy/favicon.png"/>
+    <link rel="shortcut icon" type="image/x-icon" href="mopidy/favicon.png">
     <script src="js/jquery.mobile-1.3.2.min.js"></script>
     <meta name="description" content="MusicBox">
     <meta name="author" content="Wouter van Wijk">
@@ -92,7 +92,7 @@
                 <span class="navtxt"> Exit Fullscreen </span><i class="fa  fa-desktop"></i></a>
         </li>
         <li id="navSettings" data-icon="false">
-                <a href="/settings">
+                <a href="/Settings" onclick="toast('Loading...', 2000);">
                 <span class="navtxt"> Settings </span><i class="fa fa-cog"></i></a>
         </li>
         <li id="navshutdown" data-icon="false">
diff --git a/webclient/js/add2home.js b/webclient/js/add2home.js
old mode 100755
new mode 100644
diff --git a/webclient/js/controls.js b/webclient/js/controls.js
index 29a0ebd..d19d467 100644
--- a/webclient/js/controls.js
+++ b/webclient/js/controls.js
@@ -10,17 +10,19 @@ function playBrowsedTracks(addtoqueue, trackid) {
     toast('Loading...');
 
     var selected = 0, counter = 0;
+
+    var isRadio = isRadioUri(trackid);
     //only add one station for dirble, otherwise add all tracks
-    if (isRadioUri(trackid)) {
-	mopidy.tracklist.add(null, null, trackid);
+    if (isRadio) {
+    	mopidy.tracklist.add(null, null, trackid);
     } else {
-        //add selected item to the playlist
-	$('.browsetrack').each(function() { 
+          //add selected item to the playlist
+        $('.browsetrack').each(function() { 
     	    if (this.id == trackid) {
-		    selected = counter;
-		    mopidy.tracklist.add(null, null, this.id);
-	    }
-	    counter++;
+		      selected = counter;
+            }
+	      mopidy.tracklist.add(null, null, this.id);
+	      counter++;
         } );
     }
 
@@ -35,16 +37,18 @@ function playBrowsedTracks(addtoqueue, trackid) {
     //add all items, but selected to the playlist
     selected = 0;
     counter = 0
-    $('.browsetrack').each(function() { 
-	    //do not add selected song again
-    	    if (this.id == trackid) {
-		selected = counter;
-	    } else {
-		mopidy.tracklist.add(null, counter, this.id);
-	    }
-	    counter++;
+/*    if(!isRadio) {
+        $('.browsetrack').each(function() { 
+    	  //do not add selected song again
+    	  if (this.id == trackid) {
+		    selected = counter;
+	      } else {
+	      	mopidy.tracklist.add(null, counter, this.id);
+	      }
+	      counter++;
         } );
-
+      }
+*/
     return false;
 }
 
@@ -124,7 +128,7 @@ function playTrack(addtoqueue) {
 
     mopidy.tracklist.add(tracks.slice(0, selected), 0);
     if (selected < tracks.length) {
-	mopidy.tracklist.add(tracks.slice(selected + 1) );
+    	mopidy.tracklist.add(tracks.slice(selected + 1) );
     }
      
     //console.log(selected);
diff --git a/webclient/js/functionsvars.js b/webclient/js/functionsvars.js
index 4d16a3b..72129c4 100644
--- a/webclient/js/functionsvars.js
+++ b/webclient/js/functionsvars.js
@@ -444,5 +444,7 @@ $.event.special.swipe = $.extend($.event.special.swipe, {
 
 function isRadioUri (uri) {
     var uriSplit = uri.split(":");
-    return validUri(uri) || radioExtensionsUris.indexOf(uriSplit[0].toLowerCase()) >= 0;
+    var a = validUri(uri);
+    var b = radioExtensionsUris.indexOf(uriSplit[0].toLowerCase()) >= 0;
+    return a || b;
 }
diff --git a/webclient/js/iscroll-lite.js b/webclient/js/iscroll-lite.js
old mode 100755
new mode 100644
diff --git a/webclient/js/iscroll.js b/webclient/js/iscroll.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery-1.10.2.js b/webclient/js/jquery-1.10.2.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery-1.10.2.min.js b/webclient/js/jquery-1.10.2.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery-1.10.2.min.map b/webclient/js/jquery-1.10.2.min.map
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery-1.8.3.js b/webclient/js/jquery-1.8.3.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery-1.8.3.min.js b/webclient/js/jquery-1.8.3.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery-2.0.3.min.js b/webclient/js/jquery-2.0.3.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.ba-hashchange.min.js b/webclient/js/jquery.ba-hashchange.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.cookie.js b/webclient/js/jquery.cookie.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile-1.3.1.js b/webclient/js/jquery.mobile-1.3.1.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile-1.3.1.min.js b/webclient/js/jquery.mobile-1.3.1.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile-1.3.1.min.map b/webclient/js/jquery.mobile-1.3.1.min.map
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile-1.3.2.min.js b/webclient/js/jquery.mobile-1.3.2.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile-1.4.0-alpha.2.js b/webclient/js/jquery.mobile-1.4.0-alpha.2.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile-1.4.0-alpha.2.min.js b/webclient/js/jquery.mobile-1.4.0-alpha.2.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile-1.4.0-alpha.2.min.map b/webclient/js/jquery.mobile-1.4.0-alpha.2.min.map
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile.iscrollview-closure-min.js b/webclient/js/jquery.mobile.iscrollview-closure-min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile.iscrollview-yui-min.js b/webclient/js/jquery.mobile.iscrollview-yui-min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.mobile.iscrollview.js b/webclient/js/jquery.mobile.iscrollview.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.touchwipe.min.js b/webclient/js/jquery.touchwipe.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/jquery.truncate.min.js b/webclient/js/jquery.truncate.min.js
old mode 100755
new mode 100644
diff --git a/webclient/js/lastfm.api.cache.js b/webclient/js/lastfm.api.cache.js
old mode 100755
new mode 100644
diff --git a/webclient/js/lastfm.api.js b/webclient/js/lastfm.api.js
old mode 100755
new mode 100644
diff --git a/webclient/js/lastfm.api.md5.js b/webclient/js/lastfm.api.md5.js
old mode 100755
new mode 100644
diff --git a/webclient/js/library.js b/webclient/js/library.js
index 8fc409e..1302ef0 100644
--- a/webclient/js/library.js
+++ b/webclient/js/library.js
@@ -157,7 +157,6 @@ function getPlaylists() {
 
 function getBrowseDir(rootdir) {
     //  get directory to browse
-//    console.log('browse init: ' + rootdir);
     showLoading(true);
     if (!rootdir) {
 	browseStack.pop();
@@ -165,7 +164,6 @@ function getBrowseDir(rootdir) {
     } else {
 	browseStack.push(rootdir);
     }
-    console.log(rootdir, browseStack);
     mopidy.library.browse(rootdir).then(processBrowseDir, console.error);
 }
 
diff --git a/webclient/settings/favicon.png b/webclient/settings/favicon.png
old mode 100755
new mode 100644
diff --git a/webclient/settings/index.html b/webclient/settings/index.html
index 46d9e36..5bfe16d 100644
--- a/webclient/settings/index.html
+++ b/webclient/settings/index.html
@@ -15,7 +15,7 @@
     <meta content="true" name="MSSmartTagsPreventParsing"/>
 
     <meta http-equiv="cleartype" content="on">
-
+    <title>MusicBox Settings</title>
     <!-- Tile icon for Win8 (144x144 + tile color) -->
     <meta name="msapplication-TileImage" content="../mopidy/favicon.png">
     <meta name="msapplication-TileColor" content="#eee">
@@ -28,6 +28,15 @@
     <meta name="copyright" content="(c) 2012-2013 Wouter van Wijk"/>
     <link href="../css/webclient.css" rel="stylesheet">
     <link rel="stylesheet" href="../css/font-awesome.min.css">
+    <style>
+        .ui-slider-input {
+            display: block !important;
+        }
+        .ui-slider-track {
+            margin-left: 4em;
+        }
+
+    </style>
 </head>
 
 <body>
@@ -35,37 +44,7 @@
     <h3>Settings</h3>
     <div>{{ error }}</div>
         <form action="/updateSettings" method="post">
-        <div data-role="collapsible" data-collapsed="false">
-            <h2>MusicBox</h2>
-            <label for="network__name">Device name</label>
-            <p>Set the name of the MusicBox. In this way you can create different devices on the same network (in different rooms). The webinterface is accessible via the name you use here, e.g. http://kitchen.local/, and multiple devices will show up in AirTunes. You can only use normal caracters and numbers in the name (no spaces, dots, etc). You can even have different devices with different Spotify accounts when needed.</p>
-            <input type="text" name="network__name" value="{{ network__name }}" size="12" maxlength="9"/>
-
-            <label for="musicbox__root_password">Root password</label>
-            <p>To secure your device a bit more than with only changing the default password, you can also change the default password of root, the superuser.</p>
-            <input type="password" name="musicbox__root_password" value="{{ musicbox__root_password }}" size="15" maxlength="40"/>
-
-            <label for="flip-spot">Resize filesystem</label><br/>
-            <p>Enable this to let MusicBox automatically resize the filesystem of your SD Card, so the system uses all the space of your card. Recommended because otherwise the card might fill up. This is beta, you can lose data on your card if you enable this!! (If so, you can put the original MusicBox image on it again and start over) </p>
-            <div>
-                <select name="musicbox__resize_once" data-role="slider"><br/>
-                    <option value="false">Off</option>
-                    <option value="true" selected="{{musicbox__resize_once}}">On</option>
-                </select> 
-            </div>
-
-            <label for="flip-spot">Scan Music Files</label><br/>
-            <p>Use this setting to let Mopidy/MusicBox scan on startup for new music files on the SD Card, USB or the Network. This could take a while! This can slowdown the boot a lot. Disable it again if your music doesn't change.</p>
-            <div>
-                <select name="musicbox__scan_always" data-role="slider"><br/>
-                    <option value="false">Off</option>
-                    <option value="true" selected="{{ musicbox__scan_always }}">On</option>
-                </select> 
-            </div>
-
-        </div>
-
-        <div data-role="collapsible" data-collapsed="false">
+        <div data-role="collapsible" class="settingscoll">
             <h2>Network</h2>
             <label for="network__wifi_network">Wifi Network Name</label>
             <input type="text" name="network__wifi_network" value="{{ network__wifi_network }}" size="15" maxlength="40"/>
@@ -76,9 +55,94 @@
             <p>Here you can change the default workgroup of the Windows network. This will set the workgroup to the name you want</p>
             <input type="text" name="network__workgroup" value="{{ network__workgroup }}" size="15" maxlength="40"/>
             
+            <label for="network__enable_ssh">Enable SSH</label><br/>
+            <div>
+                <select name="network__enable_ssh" data-role="slider"><br/>
+                    <option value="false"{% if network__enable_ssh == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if network__enable_ssh == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select> 
+            </div>
+        </div>
+
+        <div data-role="collapsible" class="settingscoll">
+            <h2>MusicBox</h2>
+            <label for="network__name">Device name</label>
+            <p>Set the name of the MusicBox. In this way you can create different devices on the same network (in different rooms). The webinterface is accessible via the name you use here, e.g. http://kitchen.local/, and multiple devices will show up in AirTunes. You can only use normal caracters and numbers in the name (no spaces, dots, etc). You can even have different devices with different Spotify accounts when needed.</p>
+            <input type="text" name="network__name" value="{{ network__name }}" size="12" maxlength="9"/>
+            <label for="musicbox__output">Audio output</label>
+            <p>Automatic detection sets to usb audio if an usb audio device is found, else to hdmi, if hdmi is connected at boot, and otherwise to the analog output.
+i2s (HifiBerry et all) cannot be detected automatically. Set it here to be able to use it.</p>
+	    <select name="musicbox__output">
+	    	<option value=""{% if musicbox__output == "" %} selected="true"{% endif
+  %}>Automatic</option>
+	    	<option value="usb"{% if musicbox__output == "usb" %} selected="true"{% endif
+  %}>USB</option>
+	    	<option value="hdmi"{% if musicbox__output == "hdmi" %} selected="true"{% endif
+  %}>HDMI</option>
+	    	<option value="i2s"{% if musicbox__output == "i2s" %} selected="true"{% endif
+  %}>i2s (HifiBerry etc.)</option>
+	    	<option value="analog"{% if musicbox__output == "analog" %} selected="true"{% endif
+  %}>Analog</option>
+	    </select>
+            
+            <label for="audio__mixer_volume">Initial audio volume:</label>
+            <input type="range" name="audio__mixer_volume" style=".ui-slider-input {
+    display: block !important;
+}" value="{{ audio__mixer_volume  }}" min="0" max="100">
+            
+            <label for="musicbox__downsample_usb">Downsample USB</label><br/>
+            <p>Because of limitations with some USB-DACs, MusicBox downsamples USB sound to 44k by default. You can disable this here.</p>
+            <div>
+                <select name="musicbox__downsample_usb" data-role="slider"><br/>
+                    <option value="false"{% if musicbox__downsample_usb == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if musicbox__downsample_usb == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select> 
+            </div>
+
+            <label for="audio__mixer">Hardware Mixer</label><br/>
+            <p>For some USB audiocards (DACs), you can enable hardware mixing of the volume.</p>
+            <div>
+                <select name="audio__mixer" data-role="slider"><br/>
+                    <option value="software"{% if audio__mixer == "software" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="autoaudiomixer"{% if audio__mixer == "autoaudiomixer" %} selected="true"{% endif
+  %}>On</option>
+                </select> 
+            </div>
+
+            <label for="musicbox__autoplay">Autoplay Url</label>
+            <p>MusicBox can automatically start playing a radiostation or stream at startup. It will wait a number of seconds before trying to play, to give the system (Mopidy) time to start. Since this time can vary per device, network and configuration, you can also set the number of seconds. If it does not work, give the system more time, e.g. 60 seconds.</p>
+            <input type="text" name="musicbox__autoplay" value="{{ musicbox__autoplay }}" size="15" maxlength="40"/>
+
+            <label for="musicbox__autoplaywait">Wait time</label>
+            <input type="range" name="musicbox__autoplaywait" value="{{ musicbox__autoplaywait }}" min="0" max="600">
+
+            <label for="musicbox__root_password">Root password</label>
+            <p>To secure your device, you can change the default password of root, the superuser.</p>
+            <input type="password" name="musicbox__root_password" value="{{ musicbox__root_password }}" size="15" maxlength="40"/>
+
+        </div>
+
+        <div data-role="collapsible" class="settingscoll">
+            <h2>Music files</h2>
+            <label for="musicbox__scan_always">Scan Music Files</label><br/>
+            <p>Use this setting to let Mopidy/MusicBox scan on startup for new music files on the SD Card, USB or the Network. This could take a while! This can slowdown the boot a lot. Disable it again if your music doesn't change.</p>
+            <div>
+                <select name="musicbox__scan_always" data-role="slider"><br/>
+                    <option value="false"{% if musicbox__scan_always == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if musicbox__scan_always == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select> 
+            </div>
+
             <label for="network__mount_address">Network Drive</label>
-            <p>Mount Windows Network Drive on boot (via samba/cifs). The address is exactly how Samba mount works: //servername/mountpoint/directory e.g. //192.168.1.5/musicmount or //server.local/shared/music<br/>
-If the mount needs a username/password, also set it (leave empty for guest-access). Don't forget to let Mopidy/MusicBox scan the contents at first boot (see below)</p>
+            <p>Mount Windows Network Drive on boot. Type the address exactly like this (samba mount): //servername/mountpoint/directory e.g. //192.168.1.5/musicmount or //server.local/shared/music<br/>
+If the mount needs a username/password, also set it (leave empty for guest-access). Don't forget to let Mopidy/MusicBox scan the contents at first boot (see MusicBox Settings section)</p>
             <input type="text" name="network__mount_address" value="{{ network__mount_address }}" size="10" maxlength="40"/>
 
             <label for="network__mount_user">Username</label>
@@ -87,40 +151,121 @@ If the mount needs a username/password, also set it (leave empty for guest-acces
             <label for="network__mount_password">Password</label>
             <input type="password" name="network__mount_password" value="{{ network__mount_password }}" size="15" maxlength="40"/>
 
-            <label for="flip-spot">Enable SSH</label><br/>
+            <label for="musicbox__resize_once">Resize filesystem (Restart Required)</label><br/>
+            <p>Enable this to let MusicBox automatically resize the filesystem of your SD Card, so the system uses all the space of your card. Recommended because otherwise the card might fill up. This is beta, you can lose data on your card if you enable this!! (If so, you can put the original MusicBox image on it again and start over) </p>
             <div>
-                <select name="network__ssh" data-role="slider"><br/>
-                    <option value="false">Off</option>
-                    <option value="true" selected="{{network__ssh}}">On</option>
+                <select name="musicbox__resize_once" data-role="slider"><br/>
+                    <option value="false"{% if musicbox__resize_once == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if musicbox__resize_once == "true" %} selected="true"{% endif
+  %}>On</option>
                 </select> 
             </div>
+
         </div>
-        <div data-role="collapsible">
+                    
+    <h3>Services</h3>
+        <div data-role="collapsible" class="settingscoll">
             <h2>Spotify</h2>
-            <p>Please provide your username, password to enable playing music from Spotify.</p>
-            <label for="flip-spot">Enable</label><br/>
+            <p>Enable playing music from Spotify.</p>
             <div>
                 <select name="spotify__enabled" data-role="slider"><br/>
-                    <option value="false">Off</option>
-                    <option value="true" selected="{{spotify__enabled}}">On</option>
+                    <option value="false"{% if spotify__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if spotify__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
                 </select> 
             </div>
             <label for="spotify__username">Username</label>
             <input type="text" name="spotify__username" value="{{ spotify__username }}" size="15" maxlength="40"/>
             <label for="spotify__password">Password</label>
             <input type="password" name="spotify__password" value="{{ spotify__password }}" size="10" maxlength="40"/>
-            <label for="spotify__bitrate">Bitrate</label>
-            <input type="text" name="spotify__bitrate" value="{{ spotify__bitrate }}" size="15" maxlength="40"/>
+            <label for="spotify__bitrate">Music Quality (bitrate)</label>
+	    <select name="spotify__bitrate">
+	    	<option value="96"{% if spotify__bitrate == "96" %} selected="true"{% endif
+  %}>Lowest, low network usage (96kbps)</option>
+	    	<option value="160"{% if spotify__bitrate == "160" %} selected="true"{% endif
+  %}>Medium, medium network usage (160kbps)</option>
+	    	<option value="320"{% if spotify__bitrate == "320" %} selected="true"{% endif
+  %}>High, higher network usage (320kbps)</option>
+	    </select>
         </div>
 
-        <div data-role="collapsible">
+        <div data-role="collapsible" class="settingscoll">
+            <script src="//connect.soundcloud.com/sdk.js"></script>
+              <script>
+                SC.initialize({
+                  client_id: "93e33e327fd8a9b77becd179652272e2",
+                  redirect_uri: "http://www.mopidy.com/soundcloud_callback",
+                });
+                function auth_soundcloud () {
+                  SC.connect(function() {
+                    SC.get("/me", function(user, error) {
+                      if (error) {
+                        alert("Error: " + error.message);
+                      } else {
+                        alert(SC.accessToken());
+                        $("#sc_token").val(SC.accessToken());
+                      }
+                    });
+                  });
+                }
+              </script>
+            
+            <h2>SoundCloud</h2>
+            <p>If you want to use SoundCloud, you must first authenticate
+      your installation to access your SoundCloud account. <!-- Click here to do that: <a href="#soundcloud" class="img"
+            onclick="javascript:auth_soundcloud()"><img src="http://connect.soundcloud.com/2/btn-connect-sc-l.png"
+              alt="Connect with SoundCloud"></a>. Or --> To do that, go to <a href="http://www.mopidy.com/authenticate" target="_blank">http://www.mopidy.com/authenticate</a></p>
+            <div>
+                <select name="soundcloud__enabled" data-role="slider"><br/>
+                    <option value="false"{% if soundcloud__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if soundcloud__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select>
+            </div>
+            <label for="soundcloud__auth_token">Token</label>
+            <p>Fill the token here e.g. 1-1111-1111111</p>
+            <input type="text" name="soundcloud__auth_token" id="sc_token" value="{{ soundcloud__auth_token }}" size="15" maxlength="40"/>
+<!-- does not work yey            <label for="soundcloud__explore">Explore</label>
+            <p>The explore option lets you define playlists to explore in SoundCloud. For example, if you want Jazz from <a href="https://soundcloud.com/explore/jazz" target="_blank">https://soundcloud.com/explore/jazz</a> your entry would be 'jazz'. More info at <a href="https://github.com/dz0ny/mopidy-soundcloud" target="_blank">https://github.com/dz0ny/mopidy-soundcloud</a>. Seperate with commas. E.g. explore = jazz, electronic/Ambient, pop/New Wave, rock/Indie</p>
+            <div data-role="fieldcontain">
+                <textarea rows="8" cols="40" name="soundcloud__explore">{{ soundcloud__explore }}</textarea>
+            </div>
+-->
+        </div>
+
+        <div data-role="collapsible" class="settingscoll">
+            <h2>Google Music</h2>
+            <p>Please provide your username, password to enable Google Music. You have to supply a device-id too.</p>
+            <div>
+                <select name="gmusic__enabled" data-role="slider"><br/>
+                    <option value="false"{% if gmusic__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if gmusic__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select>
+            </div>
+            <label for="gmusic__username">Username</label>
+            <input type="text" name="gmusic__username" value="{{ gmusic__username }}" size="15" maxlength="40"/>
+            <label for="gmusic__password">Password</label>
+            <p>If you use 2-way authentication, you need an application-specific password.</p>
+            <input type="password" name="gmusic__password" value="{{ gmusic__password }}" size="10" maxlength="40"/>
+            <label for="gmusic__deviceid">Device ID</label>
+            <p>The device ID is a 16-digit hexadecimal string (without a '0x' prefix) identifying the Android device registered for Google Play Music. You can obtain this ID by dialing *#*#8255#*#* on your phone (see the aid) or using an app like Android Device ID (see the Google Service Framework ID Key). You may also leave this field empty. MusicBox will try to find the ID by itself. See the Mopidy logs for more information. More info at <a href="https://github.com/hechtus/mopidy-gmusic">https://github.com/hechtus/mopidy-gmusic</a></p>
+            <input type="text" name="gmusic__deviceid" value="{{ gmusic__deviceid }}" size="10" maxlength="40"/>
+        </div>
+
+        <div data-role="collapsible" class="settingscoll">
             <h2>Last.FM</h2>
             <p>Please provide your username, password to enable scrobbling music to Last.FM.</p>
-            <label for="flip-spot">Enable</label><br/>
             <div>
                 <select name="scrobbler__enabled" data-role="slider"><br/>
-                    <option value="false">Off</option>
-                    <option value="true" selected="{{scrobbler__enabled}}">On</option>
+                    <option value="false"{% if scrobbler__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if scrobbler__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
                 </select>
             </div>
             <label for="scrobbler__username">Username</label>
@@ -129,23 +274,91 @@ If the mount needs a username/password, also set it (leave empty for guest-acces
             <input type="password" name="scrobbler__password" value="{{ scrobbler__password }}" size="10" maxlength="40"/>
         </div>
 
-        <div data-role="collapsible">
-            <h2>Dirble</h2>
-            <p>Enable Dirble webradio directory.</p>
-            <label for="flip-spot">Enable</label><br/>
+        <div data-role="collapsible" class="settingscoll">
+            <h2>TuneIn</h2>
+            <p>Select radiostations from TuneIn directory.</p>
             <div>
-                <select name="dirble__enabled" data-role="slider"><br/>
-                    <option value="false">Off</option>
-                    <option value="true" selected="{{dirble__enabled}}">On</option>
+                <select name="tunein__enabled" data-role="slider"><br/>
+                    <option value="false"{% if tunein__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if tunein__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
                 </select>
             </div>
+        </div>
+        
+        <div data-role="collapsible" class="settingscoll">
+            <h2>Dirble</h2>
+            <p>Enable Dirble webradio directory.</p>
+            <div>
+                <select name="dirble__enabled" data-role="slider"><br/>
+                    <option value="false"{% if dirble__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if dirble__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select>
+            </div>
+            
+<!-- does not work yet            <label for="dirble__countries">Countries</label>
+            <p>Fill in the stations of country codes you want to see in the Dirble directory. Seperate with commas. E.g. US, NL, DE, NO, SE</p>
+            <input type="text" name="dirble__countries" value="{{ dirble__countries }}" size="15" maxlength="40"/>
+-->            
             <label for="dirble__api_key">API-key</label>
             <p>Optionally you can get an api-key by creating an account at <a href="http://www.dirble.com/">Dirble.com</a>. Then go to the section 'Your API-Keys' and copy the key you see and fill it in e.g 473279e3fa0e7010cbbbb40ecc31890d46e57a2e</p>
             <input type="text" name="dirble__api_key" value="{{ dirble__api_key }}" size="15" maxlength="40"/>
             
         </div>
+
+        <div data-role="collapsible" class="settingscoll">
+            <h2>Podcasts</h2>
+            <p>Play Podcasts from iTunes and Gpodder.net.</p>
+            <div>
+                <select name="podcast__enabled" data-role="slider"><br/>
+                    <option value="false"{% if podcast__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if podcast__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select>
+            </div>
+<!-- does work yet            <label for="podcast__feed_urls">Feed urls</label>
+            <p>Give the links to podcast RSS feeds you want to use. Seperate with commas. E.g. http://www.npr.org/rss/podcast.php?id=510019, http://www.npr.org/rss/podcast.php?id=510253</p>
+            <div data-role="fieldcontain">
+                <textarea rows="8" cols="40" name="podcast__feed_urls">{{ podcast__feed_urls }}</textarea>
+            </div>
+-->
+        </div>
+        <div data-role="collapsible" class="settingscoll">
+            <h2>Subsonic</h2>
+            <p>Enable subsonic musicstreamer support.</p>
+            <div>
+                <select name="subsonic__enabled" data-role="slider"><br/>
+                    <option value="false"{% if subsonic__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if subsonic__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select>
+            </div>
+            <label for="subsonic__hostname">Host url (e.g. music.pimusicbox.com )</label>
+            <input type="text" name="subsonic__hostname" value="{{ subsonic__hostname }}" size="15" maxlength="40"/>
+            <label for="subsonic__port">Port (e.g. 445)</label>
+            <input type="text" name="subsonic__port" value="{{ subsonic__port }}" size="6" maxlength="5"/>
+            <label for="subsonic__username">Username</label>
+            <input type="text" name="subsonic__username" value="{{ subsonic__username }}" size="15" maxlength="40"/>
+            <label for="subsonic__api_key">Password</label>
+            <input type="password" name="subsonic__password" value="{{ subsonic__password }}" size="15" maxlength="40"/>
+            <label for="subsonic__ssl">Enable SSL</label><br/>
+            <div>
+                <select name="subsonic__ssl" data-role="slider"><br/>
+                    <option value="no"{% if subsonic__ssl == "no" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="yes"{% if subsonic__ssl == "yes" %} selected="true"{% endif
+  %}>On</option>
+                </select> 
+            </div>
+        </div>
         <input type="submit" value="Update settings" />
       </form>
+      <br/><br/>
     </div>
   </body>
 </html>
diff --git a/webclient/settings/mopidy.css b/webclient/settings/mopidy.css
old mode 100755
new mode 100644