diff --git a/dashboard-ui/autoorganizelog.html b/dashboard-ui/autoorganizelog.html
index 0656746acd..f6cbf26bd7 100644
--- a/dashboard-ui/autoorganizelog.html
+++ b/dashboard-ui/autoorganizelog.html
@@ -47,7 +47,7 @@
             </div>
         </div>
 
-        <div data-role="popup" data-transition="slidefade" class="popup episodeCorrectionPopup">
+        <div data-role="popup" class="popup episodeCorrectionPopup">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderEpisodeOrganization}</h3>
diff --git a/dashboard-ui/css/contextmenu.css b/dashboard-ui/css/contextmenu.css
deleted file mode 100644
index 34a4a9f231..0000000000
--- a/dashboard-ui/css/contextmenu.css
+++ /dev/null
@@ -1,105 +0,0 @@
-.itemContextMenu {
-    position: absolute;
-    background: #fff;
-    border: 1px solid #ddd;
-    color: #000;
-    font-size: 14px;
-    z-index: 10000;
-    background-color: #ffffff;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    *border-right-width: 2px;
-    *border-bottom-width: 2px;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    -webkit-background-clip: padding-box;
-    -moz-background-clip: padding;
-    background-clip: padding-box;
-    text-align: left;
-}
-
-.contextMenuInner {
-    padding: .5em 0;
-    width: 160px;
-}
-
-.contextMenuOption {
-    display: block;
-    color: #000;
-    text-decoration: none;
-    font-weight: normal;
-    padding: .35em 1em;
-}
-
-    .contextMenuOption:hover {
-        color: #ffffff;
-        text-decoration: none;
-        background-color: #0088cc;
-        background-color: #0081c2;
-        background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
-        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
-        background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
-        background-image: -o-linear-gradient(top, #0088cc, #0077b3);
-        background-image: linear-gradient(to bottom, #0088cc, #0077b3);
-        background-repeat: repeat-x;
-    }
-
-.contextMenuHeader {
-    font-weight: bold;
-    margin: .5em 0;
-    padding: 0 1em;
-    color: #999;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-    text-transform: uppercase;
-}
-
-.contextMenuDivider {
-    margin: .75em 0;
-    height: 1px;
-    background: #e5e5e5;
-}
-
-.itemContextMenu:before, .dropdown-context-up:before {
-	position: absolute;
-	top: -7px;
-	left: 9px;
-	display: inline-block;
-	border-right: 7px solid transparent;
-	border-bottom: 7px solid #ccc;
-	border-left: 7px solid transparent;
-	border-bottom-color: rgba(0, 0, 0, 0.2);
-	content: '';
-}
-.dropdown-context:after, .dropdown-context-up:after {
-	position: absolute;
-	top: -6px;
-	left: 10px;
-	display: inline-block;
-	border-right: 6px solid transparent;
-	border-bottom: 6px solid #ffffff;
-	border-left: 6px solid transparent;
-	content: '';
-}
-.dropdown-context-up:before, .dropdown-context-up:after {
-	top: auto;
-	bottom: -7px;
-	z-index: 9999;
-}
-.dropdown-context-up:before {
-	border-right: 7px solid transparent;
-	border-top: 7px solid #ccc;
-	border-bottom: none;
-	border-left: 7px solid transparent;
-}
-.dropdown-context-up:after {
-	border-right: 6px solid transparent;
-	border-top: 6px solid #ffffff;
-	border-left: 6px solid transparent;
-	border-bottom: none;
-}
\ No newline at end of file
diff --git a/dashboard-ui/css/images/favicon.ico b/dashboard-ui/css/images/favicon.ico
index 4acd8f9219..63f864e91c 100644
Binary files a/dashboard-ui/css/images/favicon.ico and b/dashboard-ui/css/images/favicon.ico differ
diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css
index fcf1970031..67a782a133 100644
--- a/dashboard-ui/css/mediaplayer-video.css
+++ b/dashboard-ui/css/mediaplayer-video.css
@@ -1,9 +1,6 @@
-#mediaPlayer .mediaPlayerFlyout {
-    bottom: 64px;
-}
-
-#videoBackdrop {
-    z-index: 99990;
+.videoBackdrop {
+    /* Allows popups to be closed, because their z-index is 1099 */
+    z-index: 1098;
     position: fixed;
     background-color: transparent;
     background-color: rgba(0, 0, 0, 0.6);
@@ -16,60 +13,49 @@
 #videoPlayer {
     z-index: 99997;
     position: fixed;
-    top: 50%;
-    left: 50%;
-    margin-left: -170px;
-    margin-top: -115px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #222;
 }
 
 .itemVideo {
     background-color: #000;
-    margin: 0 0 70px;
-    width: 320px;
-    height: 181px;
+    width: 100%;
+    height: auto;
 }
 
-#videoControls {
-    z-index: 99999;
-    padding: 0 5px 0;
-    height: 75px;
-    position: absolute;
-    top: auto;
-    right: 0;
-    bottom: 0;
+.videoControls {
+    padding: 0 .5em;
+    background-color: rgba(0, 0, 0, .8);
+    position: fixed;
     left: 0;
-    background-color: #222;
+    bottom: 0;
+    right: 0;
+    z-index: 99998;
+    text-align: center;
 }
 
-    #videoControls .positionSliderContainer .ui-slider-track {
-        margin: 0 !important;
-    }
+.videoTopControls {
+    padding: .7em 1em;
+    background-color: rgba(0, 0, 0, .5);
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: 99998;
+}
 
-    #videoControls .positionSliderContainer {
-        display: block;
-        width: 100%;
-        margin-top: 0px;
-    }
+.videoAdvancedControls {
+    text-align: right;
+    vertical-align: top;
+    float: right;
+}
 
-    #videoControls #video-basic-controls {
-        position: absolute;
-        top: 25px;
-        left: 10px;
-        width: 600px;
-        display: inline-block;
-    }
-
-    #videoControls #video-advanced-controls {
-        position: absolute;
-        top: 25px;
-        right: 10px;
-        width: 400px;
-        display: inline-block;
-    }
-
-    #videoControls .currentTime {
-        margin-top: 25px;
-    }
+.videoControls .currentTime {
+    margin-top: 25px;
+}
 
 #slider-tooltip {
     z-index: 99999;
@@ -83,11 +69,46 @@
     padding: 5px;
 }
 
+.nowPlayingInfo {
+    position: fixed;
+    bottom: 8px;
+    left: 10px;
+    z-index: 99999;
+}
+
+#videoPlayer .nowPlayingInfo img {
+    height: auto !important;
+    max-width: 100px;
+    max-height: 200px;
+}
+
+#videoPlayer .nowPlayingText {
+    font-weight: normal;
+    margin: 0 0 0 5px;
+    max-width: 150px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: left;
+    vertical-align: bottom;
+    position: static;
+}
+
+.videoTopControlsLogo {
+    float: left;
+}
+
+    .videoTopControlsLogo img {
+        max-height: 40px;
+        max-width: 200px;
+    }
+
+
 /* Fullscreen
     ***************************************/
 
-#videoPlayer.fullscreenVideo,
-#videoPlayer.fullscreenVideo .itemVideo {
+#videoPlayer,
+#videoPlayer .itemVideo {
     position: fixed !important;
     top: 0 !important;
     bottom: 0 !important;
@@ -106,174 +127,45 @@
     height: 2px!important;
 }
 
-#mediaPlayer .ui-slider-handle, .nowPlayingBar .ui-slider-handle, .nowPlayingPage .ui-slider-handle {
-}
-
-#videoPlayer.fullscreenVideo #videoControls {
-    opacity: 0.8;
-    background-color: #1d1d1d;
-}
-
 #videoPlayer.fullscreenVideo .inactive {
-    display: none;
-}
-
-#videoPlayer.fullscreenVideo:hover .active {
-    display: block;
-}
-
-#mediaPlayer #videoControls #video-subtitleButton:disabled, #mediaPlayer #videoControls #video-muteButton:disabled, #mediaPlayer #videoControls #video-unmuteButton:disabled {
     display: none!important;
 }
 
-#mediaPlayer #video-advanced-controls {
-    text-align: right;
-}
-
-#mediaPlayer #videoControls .mediaPlayerFlyout {
-    text-align: left;
-    margin-left: 0;
-    right: 0;
-    bottom: 70px;
-}
-
-#mediaPlayer .volumeSliderContainer {
+#mediaPlayer .sliderContainer {
     position: relative;
     top: 5px;
 }
 
-/* Media queries
-    ***************************************/
-
-@media all and (min-width: 640px) and (min-height: 360px) {
-    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
-        width: 480px;
-        height: 271px;
-    }
-
-    #videoPlayer {
-        margin-left: -250px;
-        margin-top: -160px;
-    }
-}
-
-@media all and (min-width: 800px) and (min-height: 450px) {
-    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
-        width: 640px;
-        height: 362px;
-    }
-
-    #videoPlayer {
-        margin-left: -330px;
-        margin-top: -205px;
-    }
-}
-
-@media all and (min-width: 960px) and (min-height: 540px) {
-    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
-        width: 720px;
-        height: 406px;
-    }
-
-    #videoPlayer {
-        margin-left: -370px;
-        margin-top: -228px;
-    }
-}
-
-@media all and (min-width: 1200px) and (min-height: 720px) {
-    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
-        width: 1080px;
-        height: 610px;
-    }
-
-    #videoPlayer {
-        margin-left: -550px;
-        margin-top: -329px;
-    }
-}
-
-@media all and (min-width: 1440px) and (min-height: 720px) {
-    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
-        width: 1080px;
-        height: 610px;
-    }
-
-    #videoPlayer {
-        margin-left: -550px;
-        margin-top: -329px;
-    }
-}
-
 /****************************************/
 
 @media all and (max-width: 1200px), all and (max-height: 720px) {
-    #videoControls .currentTime {
+    .videoControls .currentTime {
         margin-right: 0;
         min-width: 120px;
     }
 
-    #videoControls #video-advanced-controls {
-        width: 350px;
-    }
-
-    #videoControls .nowPlayingText {
+    .videoControls .nowPlayingText {
         max-width: 160px;
     }
 }
 
 @media all and (max-width: 960px), all and (max-height: 550px) {
-    #videoControls #video-advanced-controls {
-        width: 275px;
-    }
-
-    #videoControls .nowPlayingText {
+    .videoControls .nowPlayingText {
         max-width: 90px;
     }
 }
 
 @media all and (max-width: 800px), all and (max-height: 460px) {
-    #mediaPlayer #videoPlayer {
-        margin-top: -180px;
-    }
 
-    #mediaPlayer .itemVideo {
-        margin-bottom: 120px;
-    }
-
-    #mediaPlayer #videoControls {
-        height: 120px;
-    }
-
-    #mediaPlayer #video-basic-controls {
-        width: 250px;
-    }
-
-    #mediaPlayer #video-basic-controls, #mediaPlayer #video-advanced-controls {
-        width: 200px;
-        height: 120px;
-    }
-
-    #mediaPlayer #videoControls .mediaPlayerFlyout {
-        bottom: 150px;
-    }
-
-    #mediaPlayer .nowPlayingImage, #mediaPlayer .nowPlayingText {
-        display: none;
-    }
-
-    #mediaPlayer .volumeSliderContainer {
+    #mediaPlayer .sliderContainer {
         margin-top: 8px;
     }
 }
 
-@media all and (max-width: 640px), all and (max-height: 365px) {
-    #mediaPlayer #videoPlayer {
-        margin-top: -135px;
-    }
+@media all and (max-width: 1000px), all and (max-height: 460px) {
 
-    #mediaPlayer #video-advanced-controls {
-        width: 150px;
+    #mediaPlayer .nowPlayingImage, #mediaPlayer .nowPlayingText {
+        display: none;
     }
 }
 
@@ -281,6 +173,23 @@
     #mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton {
         display: none!important;
     }
+    .videoTopControlsLogo {
+        display: none!important;
+    }
+}
+
+@media all and (min-width: 800px) {
+    .videoControls .positionSliderContainer {
+        width: 300px;
+    }
+}
+
+@media all and (min-width: 1200px) {
+    #videoPlayer .nowPlayingInfo img {
+        height: auto !important;
+        max-width: 150px;
+        max-height: 300px;
+    }
 }
 
 /****************************************/
@@ -362,89 +271,40 @@
     }
 }
 
-.cursor-inactive {
-    cursor: none;
-}
-
-.mediaFlyoutContainer {
-    display: inline-block;
-}
-
-.mediaPlayerFlyout {
+.videoPlayerPopupContent {
     width: 200px;
-    color: #000;
-    background-color: #fff;
-    border: 1px solid #999;
+}
+
+.videoChaptersPopup .videoPlayerPopupContent {
+    width: 300px;
+}
+
+.videoChapterPopupImage {
     position: absolute;
-    z-index: 99999;
-    bottom: 78px;
-    margin-left: -125px;
-    max-height: 300px;
-    overflow-y: auto;
-    font-size: 13px;
-}
-
-.chaptersFlyout, .audioTracksFlyout {
-    width: 250px;
-    margin-left: -150px;
-}
-
-.mediaFlyoutOption {
-    display: block;
-    text-decoration: none;
-    color: #000;
-    border-bottom: 1px solid #eee;
-    cursor: pointer;
-}
-
-    .mediaFlyoutOption:hover, .mediaFlyoutOption:focus {
-        background-color: #eee;
-    }
-
-.selectedMediaFlyoutOption {
-    background-color: #d9F4FF;
-    background-image: url(images/media/selected.png);
+    top: 0;
+    left: 0;
+    width: 80px;
+    height: 80px;
     background-repeat: no-repeat;
-    background-position: right top;
-    background-size: 16px 16px;
+    background-size: cover;
+    background-position: center center;
 }
 
-.mediaFlyoutOptionImage {
-    display: inline-block;
-    width: 15%;
-    vertical-align: middle;
+.videoPlayerPopupScroller {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 180px;
 }
 
-    .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
-        vertical-align: top;
-        display: inline-block;
-        width: 85%;
+@media all and (min-height: 500px) {
+    .videoPlayerPopupScroller {
+        max-height: 300px;
     }
-
-.chaptersFlyout .mediaFlyoutOptionImage {
-    width: 40%;
 }
 
-    .chaptersFlyout .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
-        width: 60%;
+
+@media all and (min-height: 600px) {
+    .videoPlayerPopupScroller {
+        max-height: 400px;
     }
-
-.mediaFlyoutOptionName {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-left: 5px;
-    font-size: 13px;
-    font-weight: normal;
-}
-
-.mediaFlyoutOptionSecondaryText {
-    font-size: 13px;
-    color: #333;
-    font-weight: normal;
-    margin-top: 3px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-left: 5px;
 }
diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index c2db765b4d..f3868c4d7f 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -151,13 +151,6 @@ input[type="range"]::-ms-fill-upper {
     }
 }
 
-/*@media all and (min-width: 800px) {
-
-    .nowPlayingBar {
-        text-align: center;
-    }
-}*/
-
 @media (min-width: 1440px) {
     #nowPlayingBar .positionSliderContainer {
         width: 300px;
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index e94d78913c..296972458f 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -64,6 +64,10 @@ body {
     font-family: 'Open Sans', Arial, Helvetica, sans-serif;
 }
 
+.bodyWithPopupOpen {
+    overflow-y: hidden !important;
+}
+
 .textlink {
     text-decoration: none;
 }
@@ -170,7 +174,6 @@ pre, textarea.pre {
     margin-left: 5px;
 }
 
-
 .ui-popup-container {
     z-index: 99999;
 }
@@ -681,7 +684,9 @@ h1 .imageLink {
     bottom: -2px;
     left: -2px;
     right: -2px;
-    z-index: 99997;
+
+    /* Above everything, except for the video player and popup overlays */
+    z-index: 1097;
     color: #fff;
     border: 0 !important;
 }
diff --git a/dashboard-ui/dlnaprofile.html b/dashboard-ui/dlnaprofile.html
index 82d902a7b9..27bc4c667d 100644
--- a/dashboard-ui/dlnaprofile.html
+++ b/dashboard-ui/dlnaprofile.html
@@ -305,7 +305,7 @@
 
             </div>
         </div>
-        <div data-role="popup" data-transition="slidefade" id="popupEditDirectPlayProfile" class="popup">
+        <div data-role="popup" id="popupEditDirectPlayProfile" class="popup">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderDirectPlayProfile}</h3>
@@ -353,7 +353,7 @@
             </div>
 
         </div>
-        <div data-role="popup" data-transition="slidefade" id="transcodingProfilePopup" class="popup">
+        <div data-role="popup" id="transcodingProfilePopup" class="popup">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderTranscodingProfile}</h3>
@@ -431,7 +431,7 @@
             </div>
 
         </div>
-        <div data-role="popup" data-transition="slidefade" id="containerProfilePopup" class="popup">
+        <div data-role="popup" id="containerProfilePopup" class="popup">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderContainerProfile}</h3>
@@ -481,7 +481,7 @@
             </div>
 
         </div>
-        <div data-role="popup" data-transition="slidefade" id="codecProfilePopup" class="popup">
+        <div data-role="popup" id="codecProfilePopup" class="popup">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderCodecProfile}</h3>
@@ -519,7 +519,7 @@
             </div>
 
         </div>
-        <div data-role="popup" data-transition="slidefade" id="responseProfilePopup" class="popup">
+        <div data-role="popup" id="responseProfilePopup" class="popup">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderResponseProfile}</h3>
diff --git a/dashboard-ui/editcollectionitems.html b/dashboard-ui/editcollectionitems.html
index 0f35c04f56..37a792609c 100644
--- a/dashboard-ui/editcollectionitems.html
+++ b/dashboard-ui/editcollectionitems.html
@@ -35,7 +35,7 @@
             </div>
         </div>
 
-        <div data-role="popup" data-transition="slidefade" class="popupIdentify popup" data-theme="a">
+        <div data-role="popup" class="popupIdentify popup" data-theme="a">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderAddTitles}
diff --git a/dashboard-ui/edititemimages.html b/dashboard-ui/edititemimages.html
index 9ea2ac04ec..a88a3260c9 100644
--- a/dashboard-ui/edititemimages.html
+++ b/dashboard-ui/edititemimages.html
@@ -26,10 +26,10 @@
                 <div style="margin: -25px 0 1em;">
 
                     <div style="display: inline-block;">
-                        <a class="lnkBrowseImages lnkBrowseAllImages hide" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="cloud" data-mini="true" data-transition="pop">Browse Images</a>
+                        <a class="lnkBrowseImages lnkBrowseAllImages hide" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="cloud" data-mini="true">Browse Images</a>
                     </div>
                     <div style="display: inline-block;">
-                        <a href="#popupUpload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Upload</a>
+                        <a href="#popupUpload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true">Upload</a>
                     </div>
                 </div>
 
diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html
index c9b6206127..aed150e6f4 100644
--- a/dashboard-ui/edititemmetadata.html
+++ b/dashboard-ui/edititemmetadata.html
@@ -379,7 +379,7 @@
                 </form>
             </div>
         </div>
-        <div data-role="popup" data-transition="slidefade" id="popupConfirmDelete" class="popup" data-theme="a">
+        <div data-role="popup" id="popupConfirmDelete" class="popup" data-theme="a">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>Confirm Deletion</h3>
@@ -409,7 +409,7 @@
             </div>
 
         </div>
-        <div data-role="popup" data-transition="slidefade" class="popupIdentify popup" data-theme="a">
+        <div data-role="popup" class="popupIdentify popup" data-theme="a">
             <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
@@ -456,7 +456,7 @@
 
         </div>
 
-        <div data-role="popup" data-transition="slidefade" id="popupEditPerson" class="popup" data-theme="a">
+        <div data-role="popup" id="popupEditPerson" class="popup" data-theme="a">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3 style="margin: .5em;">Person Info</h3>
diff --git a/dashboard-ui/library.html b/dashboard-ui/library.html
index 35f07a1f4a..0f2f76177c 100644
--- a/dashboard-ui/library.html
+++ b/dashboard-ui/library.html
@@ -32,7 +32,7 @@
                 </div>
             </div>
         </div>
-        <div data-role="popup" data-transition="slidefade" id="popupEnterText" class="popup">
+        <div data-role="popup" id="popupEnterText" class="popup">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3></h3>
diff --git a/dashboard-ui/scripts/directorybrowser.js b/dashboard-ui/scripts/directorybrowser.js
index 7457238488..897ea344bf 100644
--- a/dashboard-ui/scripts/directorybrowser.js
+++ b/dashboard-ui/scripts/directorybrowser.js
@@ -93,7 +93,7 @@
             options.header = options.header || Globalize.translate('HeaderSelectMediaPath');
             options.instruction = options.instruction || "";
 
-            var html = '<div data-transition="fade" data-role="popup" id="popupDirectoryPicker" class="popup" style="min-width:65%;">';
+            var html = '<div data-role="popup" id="popupDirectoryPicker" class="popup" style="min-width:65%;">';
 
             html += '<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">';
             html += '<h3>' + options.header + '</h3>';
diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js
index 9e0f90973c..821bdaeee5 100644
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@@ -5,6 +5,12 @@
 
     function getPromise() {
 
+        var id = getParameterByName('id');
+
+        if (id) {
+            return ApiClient.getItem(Dashboard.getCurrentUserId(), id);
+        }
+
         var name = getParameterByName('person');
 
         if (name) {
@@ -64,7 +70,7 @@
 
             currentItem = item;
 
-            renderHeader(page, item);
+            renderHeader(page, item, context);
 
             var name = item.Name;
 
@@ -72,8 +78,8 @@
 
             $('.itemName', page).html(name);
 
-            renderDetails(page, item);
-            renderTabs(page, item);
+            renderDetails(page, item, context);
+            renderTabs(page, item, context);
 
             $(page).trigger('displayingitem', [{
 
@@ -105,9 +111,7 @@
         });
     }
 
-    function renderHeader(page, item) {
-
-        var context = getParameterByName('context');
+    function renderHeader(page, item, context) {
 
         $('.itemTabs', page).hide();
 
@@ -149,7 +153,7 @@
         }
     }
 
-    function renderTabs(page, item) {
+    function renderTabs(page, item, context) {
 
         var html = '<fieldset data-role="controlgroup" data-type="horizontal" class="libraryTabs">';
 
@@ -209,7 +213,6 @@
 
         bindRadioEvents(page);
 
-        var context = getParameterByName('context');
         var selectedRadio = null;
 
         if (context) {
@@ -316,7 +319,7 @@
         });
     }
 
-    function renderDetails(page, item) {
+    function renderDetails(page, item, context) {
 
         LibraryBrowser.renderDetailPageBackdrop(page, item);
         LibraryBrowser.renderOverview($('.itemOverview', page), item);
@@ -324,7 +327,7 @@
         renderUserDataIcons(page, item);
         LibraryBrowser.renderLinks($('#itemLinks', page), item);
 
-        LibraryBrowser.renderGenres($('.itemGenres', page), item, getParameterByName('context'));
+        LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
 
         if (item.Type == "Person" && item.PremiereDate) {
 
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index b5d79c8cc6..342d4771f8 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -1352,7 +1352,7 @@
 
             var cast = casts[i];
 
-            html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
+            html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&id=' + cast.Id + '">';
 
             var imgUrl;
 
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 9d54d82441..12c37ab58a 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -219,8 +219,7 @@
                 html += '<tr>';
 
                 html += '<td class="detailTableButtonsCell">';
-                html += '<button class="btnPlay" data-icon="play" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', \'Audio\');" data-inline="true" title="Play">Play</button>';
-                html += '<button class="btnQueue" data-icon="plus" type="button" data-iconpos="notext" onclick="MediaController.queue(\'' + item.Id + '\');" data-inline="true" title="Queue">Queue</button>';
+                html += '<button class="btnPlay" data-icon="play" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', false, \'Audio\');" data-inline="true" title="Play">Play</button>';
                 html += '</td>';
 
                 html += '<td class="desktopColumn">' + (item.ParentIndexNumber || "") + '</td>';
@@ -301,21 +300,13 @@
 
             $('.playFlyout').popup("close").remove();
 
-            var html = '<div data-role="popup" class="playFlyout" data-transition="fade" data-history="false">';
+            var html = '<div data-role="popup" class="playFlyout" data-history="false">';
 
             html += '<ul data-role="listview" style="min-width: 180px;">';
             html += '<li data-role="list-divider">Play Menu</li>';
 
             html += '<li><a href="#" onclick="MediaController.play(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
 
-            if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
-                html += '<li><a href="#" onclick="MediaController.instantMix(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Instant Mix</a></li>';
-            }
-
-            if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
-                html += '<li><a href="#" onclick="MediaController.shuffle(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Shuffle</a></li>';
-            }
-
             if (resumePositionTicks) {
                 html += '<li><a href="#" onclick="MediaController.play({ids:[\'' + itemId + '\'],startPositionTicks:' + resumePositionTicks + '});LibraryBrowser.closePlayMenu();">Resume</a></li>';
             }
@@ -324,6 +315,14 @@
                 html += '<li><a href="#" onclick="MediaController.queue(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Queue</a></li>';
             }
 
+            if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
+                html += '<li><a href="#" onclick="MediaController.instantMix(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Instant Mix</a></li>';
+            }
+
+            if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
+                html += '<li><a href="#" onclick="MediaController.shuffle(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Shuffle</a></li>';
+            }
+
             html += '</ul>';
 
             html += '</div>';
@@ -432,26 +431,26 @@
                 return "itemdetails.html?id=" + id;
             }
             if (item.Type == "Genre") {
-                return "itembynamedetails.html?genre=" + ApiClient.encodeName(item.Name);
+                return "itembynamedetails.html?id=" + id;
             }
             if (item.Type == "MusicGenre") {
-                return "itembynamedetails.html?musicgenre=" + ApiClient.encodeName(item.Name);
+                return "itembynamedetails.html?id=" + id;
             }
             if (item.Type == "GameGenre") {
-                return "itembynamedetails.html?gamegenre=" + ApiClient.encodeName(item.Name);
+                return "itembynamedetails.html?id=" + id;
             }
             if (item.Type == "Studio") {
-                return "itembynamedetails.html?studio=" + ApiClient.encodeName(item.Name);
+                return "itembynamedetails.html?id=" + id;
             }
             if (item.Type == "Person") {
-                return "itembynamedetails.html?person=" + ApiClient.encodeName(item.Name);
+                return "itembynamedetails.html?id=" + id;
             }
             if (item.Type == "Recording") {
                 return "livetvrecording.html?id=" + id;
             }
 
             if (item.Type == "MusicArtist") {
-                return "itembynamedetails.html?musicartist=" + ApiClient.encodeName(item.Name);
+                return "itembynamedetails.html?id=" + id;
             }
 
             if (item.IsFolder) {
@@ -1993,7 +1992,7 @@
             if (typeof (index) == "undefined") index = 0;
 
             html += '<div class="galleryImageContainer">';
-            html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
+            html += '<a href="#pop_' + index + '_' + tag + '" data-rel="popup" data-position-to="window">';
 
             html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
                 maxWidth: screenWidth,
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js
index c7e85b79ce..15845a0497 100644
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@@ -114,11 +114,6 @@
 
             html += '<button type="button" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext" title="' + Globalize.translate('ButtonPlay') + '" onclick="' + onPlayClick + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonPlay') + '</button>';
             buttonCount++;
-
-            if (item.MediaType == "Audio" || item.Type == "MusicAlbum") {
-                html += '<button type="button" data-mini="true" data-inline="true" data-icon="plus" data-iconpos="notext" title="' + Globalize.translate('ButtonQueue') + '" onclick="MediaController.queue(\'' + item.Id + '\');return false;" style="' + buttonMargin + '">' + Globalize.translate('ButtonQueue') + '</button>';
-                buttonCount++;
-            }
         }
 
         if (item.LocalTrailerCount && item.PlayAccess == 'Full') {
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index 1e820ef5ea..986baa580e 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@@ -29,14 +29,12 @@
 
         self.remoteFullscreen = function () {
 
-            var videoControls = $("#videoControls");
-
             if (remoteFullscreen) {
                 exitFullScreenToWindow();
-                videoControls.removeClass("inactive");
+                $('.hiddenOnIdle').removeClass("inactive");
             } else {
                 enterFullScreen();
-                videoControls.addClass("inactive");
+                $('.hiddenOnIdle').addClass("inactive");
             }
 
             remoteFullscreen = !remoteFullscreen;
@@ -65,9 +63,8 @@
         self.resetEnhancements = function () {
             $("#mediaPlayer").hide();
             $('#videoPlayer').removeClass('fullscreenVideo');
-            $("#videoControls").removeClass("inactive");
+            $('.hiddenOnIdle').removeClass("inactive");
             $("video").remove();
-            $("html").css("cursor", "default");
         };
 
         self.exitFullScreen = function () {
@@ -90,53 +87,38 @@
 
         self.showSubtitleMenu = function () {
 
-            var flyout = $('#video-subtitleFlyout');
+            var elem = $('.videoSubtitlePopup').html(getSubtitleTracksHtml())
+                .trigger('create')
+                .popup("option", "positionTo", $('.videoSubtitleButton'));
 
-            if (!flyout.is(':visible')) {
-
-                flyout.html(getSubtitleTracksHtml()).trigger('create').scrollTop(0);
-                toggleFlyout(flyout, '#video-subtitleButton');
-
-            } else {
-                toggleFlyout(flyout, '#video-subtitleButton');
-            }
+            elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
         };
 
         self.showQualityFlyout = function () {
 
-            var flyout = $('.video-qualityFlyout');
+            var elem = $('.videoQualityPopup').html(getQualityFlyoutHtml())
+                .trigger('create')
+                .popup("option", "positionTo", $('.videoQualityButton'));
 
-            if (!flyout.is(':visible')) {
-                flyout.html(getQualityFlyoutHtml()).scrollTop(0);
-            }
-
-            toggleFlyout(flyout, '.video-qualityButton');
-            
-            //$('.videoQualityPopup').html(getQualityFlyoutHtml()).trigger('create').popup('open');
+            elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
         };
 
         self.showChaptersFlyout = function () {
 
-            var flyout = $('#video-chaptersFlyout');
+            var elem = $('.videoChaptersPopup').html(getChaptersFlyoutHtml())
+                .trigger('create')
+                .popup("option", "positionTo", $('.videoChaptersButton'));
 
-            if (!flyout.is(':visible')) {
-                flyout.html(getChaptersFlyoutHtml()).scrollTop(0);
-            }
-
-            toggleFlyout(flyout, '#video-chaptersButton');
+            elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
         };
 
         self.showAudioTracksFlyout = function () {
 
-            var flyout = $('#video-audioTracksFlyout');
+            var elem = $('.videoAudioPopup').html(getAudioTracksHtml())
+                .trigger('create')
+                .popup("option", "positionTo", $('.videoAudioButton'));
 
-            if (!flyout.is(':visible')) {
-
-                flyout.html(getAudioTracksHtml()).trigger('create').scrollTop(0);
-                toggleFlyout(flyout, '#video-audioTracksButton');
-            } else {
-                toggleFlyout(flyout, '#video-audioTracksButton');
-            }
+            elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
         };
 
         self.setAudioStreamIndex = function (index) {
@@ -250,6 +232,84 @@
             });
         };
 
+        self.updateNowPlayingInfo = function (item) {
+
+            if (!item) {
+                throw new Error('item cannot be null');
+            }
+
+            var mediaControls = $("#videoPlayer");
+
+            var state = self.getPlayerStateInternal(self.currentMediaElement, item, self.currentMediaSource);
+
+            var url = "";
+
+            if (state.NowPlayingItem.PrimaryImageTag) {
+
+                url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
+                    type: "Primary",
+                    width: 150,
+                    tag: state.NowPlayingItem.PrimaryImageTag
+                });
+            }
+            else if (state.NowPlayingItem.PrimaryImageTag) {
+
+                url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
+                    type: "Primary",
+                    width: 150,
+                    tag: state.NowPlayingItem.PrimaryImageTag
+                });
+            }
+            else if (state.NowPlayingItem.BackdropImageTag) {
+
+                url = ApiClient.getScaledImageUrl(state.NowPlayingItem.BackdropItemId, {
+                    type: "Backdrop",
+                    height: 300,
+                    tag: state.NowPlayingItem.BackdropImageTag,
+                    index: 0
+                });
+
+            }
+            else if (state.NowPlayingItem.ThumbImageTag) {
+
+                url = ApiClient.getScaledImageUrl(state.NowPlayingItem.ThumbImageItemId, {
+                    type: "Thumb",
+                    height: 300,
+                    tag: state.NowPlayingItem.ThumbImageTag
+                });
+            }
+
+            var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
+            var nameHtml = self.getNowPlayingNameHtml(state);
+
+            if (nameHtml.indexOf('<br/>') != -1) {
+                nowPlayingTextElement.addClass('nowPlayingDoubleText');
+            } else {
+                nowPlayingTextElement.removeClass('nowPlayingDoubleText');
+            }
+
+            if (url) {
+                $('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
+            } else {
+                $('.nowPlayingImage', mediaControls).html('');
+            }
+
+            if (state.NowPlayingItem.LogoItemId) {
+
+                url = ApiClient.getScaledImageUrl(state.NowPlayingItem.LogoItemId, {
+                    type: "Logo",
+                    height: 40,
+                    tag: state.NowPlayingItem.LogoImageTag
+                });
+
+                $('.videoTopControlsLogo', mediaControls).html('<img src="' + url + '" />');
+            } else {
+                $('.videoTopControlsLogo', mediaControls).html('');
+            }
+
+            nowPlayingTextElement.html(nameHtml);
+        };
+
         function onPositionSliderChange() {
 
             isPositionSliderActive = false;
@@ -282,40 +342,40 @@
                 self.setVolume(vol * 100);
             });
 
-            $('#video-chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
+            $('.videoChaptersPopup').on('click', '.mediaPopupOption', function () {
 
                 var ticks = parseInt(this.getAttribute('data-positionticks'));
 
                 self.changeStream(ticks);
 
-                hideFlyout($('#video-chaptersFlyout'));
+                $('.videoChaptersPopup').popup('close');
             });
 
-            $('#video-audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
+            $('.videoAudioPopup').on('click', '.mediaPopupOption', function () {
 
-                if (!$(this).hasClass('selectedMediaFlyoutOption')) {
+                if (!$(this).hasClass('selectedMediaPopupOption')) {
                     var index = parseInt(this.getAttribute('data-index'));
 
                     self.setAudioStreamIndex(index);
                 }
 
-                hideFlyout($('#video-audioTracksFlyout'));
+                $('.videoAudioPopup').popup('close');
             });
 
-            $('#video-subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
+            $('.videoSubtitlePopup').on('click', '.mediaPopupOption', function () {
 
-                if (!$(this).hasClass('selectedMediaFlyoutOption')) {
+                if (!$(this).hasClass('selectedMediaPopupOption')) {
                     var index = parseInt(this.getAttribute('data-index'));
 
                     self.setSubtitleStreamIndex(index);
                 }
 
-                hideFlyout($('#video-subtitleFlyout'));
+                $('.videoSubtitlePopup').popup('close');
             });
 
-            $('.video-qualityFlyout').on('click', '.mediaFlyoutOption', function () {
+            $('.videoQualityPopup').on('click', '.mediaPopupOption', function () {
 
-                if (!$(this).hasClass('selectedMediaFlyoutOption')) {
+                if (!$(this).hasClass('selectedMediaPopupOption')) {
 
                     var maxWidth = parseInt(this.getAttribute('data-maxwidth'));
                     var bitrate = parseInt(this.getAttribute('data-bitrate'));
@@ -329,14 +389,14 @@
                     });
                 }
 
-                hideFlyout($('.video-qualityFlyout'));
+                $('.videoQualityPopup').popup('close');
             });
 
             var trackChange = false;
 
             var tooltip = $('<div id="slider-tooltip"></div>');
 
-            $("#videoControls .positionSliderContainer .slider").on("change", function (e) {
+            $(".videoControls .positionSliderContainer .slider").on("change", function (e) {
                 if (!trackChange) return;
 
                 var pct = $(this).val();
@@ -352,7 +412,7 @@
             }).on("slidestart", function (e) {
                 trackChange = true;
 
-                var handle = $("#videoControls .positionSliderContainer .ui-slider-handle");
+                var handle = $(".videoControls .positionSliderContainer .ui-slider-handle");
 
                 handle.after(tooltip);
             }).on("slidestop", function (e) {
@@ -361,32 +421,42 @@
                 tooltip.remove();
             });
 
-            $('.video-qualityButton').on('click', function () {
+            $('.videoSubtitleButton').on('click', function () {
+
+                self.showSubtitleMenu();
+            });
+
+            $('.videoQualityButton').on('click', function () {
 
                 self.showQualityFlyout();
             });
+
+            $('.videoAudioButton').on('click', function () {
+
+                self.showAudioTracksFlyout();
+            });
+
+            $('.videoChaptersButton').on('click', function () {
+
+                self.showChaptersFlyout();
+            });
         });
 
         function idleHandler() {
 
-            var video = $(".itemVideo");
-            var videoControls = $("#videoControls");
-
             if (timeout) {
                 window.clearTimeout(timeout);
             }
 
             if (idleState == true) {
-                video.removeClass("cursor-inactive");
-                videoControls.removeClass("inactive").addClass("active");
+                $('.hiddenOnIdle').removeClass("inactive");
             }
 
             idleState = false;
 
             timeout = window.setTimeout(function () {
                 idleState = true;
-                video.addClass("cursor-inactive");
-                videoControls.removeClass("active").addClass("inactive");
+                $('.hiddenOnIdle').addClass("inactive");
             }, 4000);
         }
 
@@ -434,99 +504,76 @@
 
         }
 
-        function toggleFlyout(flyout, button) {
-
-            $(document.body).off("mousedown.mediaflyout").on("mousedown.mediaflyout", function (e) {
-
-                var elem = $(e.target);
-
-                var flyoutId = flyout[0].id;
-                var safeItems = button + ',#' + flyoutId;
-
-                if (!elem.is(safeItems) && !elem.parents(safeItems).length) {
-
-                    hideFlyout(flyout);
-                }
-
-            });
-
-            var visible = $(flyout).is(":visible");
-
-            if (!visible) {
-
-                flyout.slideDown();
-
-            } else {
-
-                $(button).blur();
-
-                hideFlyout(flyout);
-            }
-        }
-
-        function hideFlyout(flyout) {
-
-            flyout.slideUp().empty();
-
-            $(document.body).off("mousedown.hidesearchhints");
-        }
-
-
         function getChaptersFlyoutHtml() {
 
-            var html = '';
-
+            var item = self.currentItem;
             var currentTicks = self.getCurrentTicks();
+            var chapters = item.Chapters || [];
 
-            var chapters = self.currentItem.Chapters || [];
+            var html = '';
+            html += '<div class="videoPlayerPopupContent">';
+            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Scenes</li>';
+            html += '</ul>';
 
-            for (var i = 0, length = chapters.length; i < length; i++) {
+            html += '<div class="videoPlayerPopupScroller">';
+            html += '<ul data-role="listview" data-inset="true">';
 
-                var chapter = chapters[i];
+            var index = 0;
 
-                var isSelected = false;
+            html += chapters.map(function (chapter) {
+
+                var cssClass = "mediaPopupOption";
+
+                var selected = false;
 
                 if (currentTicks >= chapter.StartPositionTicks) {
-
-                    var nextChapter = chapters[i + 1];
-
-                    isSelected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
+                    var nextChapter = chapters[index + 1];
+                    selected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
                 }
 
-                if (isSelected) {
-                    html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
-                } else {
-                    html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption">';
-                }
+                var optionHtml = '<li><a data-positionticks="' + chapter.StartPositionTicks + '" class="' + cssClass + '" href="#" style="padding-top:0;padding-bottom:0;">';
 
-                var imgUrl;
+                var imgUrl = "css/images/media/chapterflyout.png";
 
                 if (chapter.ImageTag) {
 
-                    imgUrl = ApiClient.getScaledImageUrl(self.currentItem.Id, {
-                        maxWidth: 100,
+                    optionHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        width: 160,
                         tag: chapter.ImageTag,
                         type: "Chapter",
-                        index: i
+                        index: index
                     });
+                    optionHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
 
                 } else {
-                    imgUrl = "css/images/media/chapterflyout.png";
+                    optionHtml += '<img src="' + imgUrl + '" />';
                 }
 
-                html += '<img class="mediaFlyoutOptionImage" src="' + imgUrl + '" />';
+                // TODO: Add some indicator if selected = true
 
-                html += '<div class="mediaFlyoutOptionContent">';
+                optionHtml += '<p style="margin:12px 0 0;">';
 
-                var name = chapter.Name || "Chapter " + (i + 1);
+                var textLines = [];
+                textLines.push(chapter.Name);
+                textLines.push(Dashboard.getDisplayTime(chapter.StartPositionTicks));
 
-                html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
-                html += '<div class="mediaFlyoutOptionSecondaryText">' + Dashboard.getDisplayTime(chapter.StartPositionTicks) + '</div>';
+                optionHtml += textLines.join('<br/>');
 
-                html += '</div>';
+                optionHtml += '</p>';
 
-                html += "</div>";
-            }
+                optionHtml += '</a></li>';
+
+                index++;
+
+                return optionHtml;
+
+            }).join('');
+
+            html += '</ul>';
+            html += '</div>';
+
+            html += '</div>';
 
             return html;
         }
@@ -540,61 +587,73 @@
             var currentIndex = getParameterByName('AudioStreamIndex', self.currentMediaElement.currentSrc);
 
             var html = '';
+            html += '<div class="videoPlayerPopupContent">';
+            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Audio Tracks</li>';
+            html += '</ul>';
 
-            for (var i = 0, length = streams.length; i < length; i++) {
+            html += '<div class="videoPlayerPopupScroller">';
+            html += '<ul data-role="listview" data-inset="true">';
 
-                var stream = streams[i];
+            html += streams.map(function (stream) {
 
-                if (stream.Index == currentIndex) {
-                    html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
-                } else {
-                    html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
+                var cssClass = "mediaPopupOption";
+
+                var selected = stream.Index == currentIndex;
+
+                if (selected) {
+                    cssClass += ' selectedMediaPopupOption';
                 }
 
-                html += '<img class="mediaFlyoutOptionImage" src="css/images/media/audioflyout.png" />';
+                var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
 
-                html += '<div class="mediaFlyoutOptionContent">';
+                optionHtml += '<p style="margin:0;">';
 
-                html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
+                if (selected) {
+                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
+                }
 
-                var options = [];
+                var textLines = [];
+                textLines.push(stream.Language || 'Unknown language');
+
+                var attributes = [];
 
                 if (stream.Codec) {
-                    options.push(stream.Codec);
+                    attributes.push(stream.Codec);
                 }
                 if (stream.Profile) {
-                    options.push(stream.Profile);
+                    attributes.push(stream.Profile);
                 }
 
                 if (stream.BitRate) {
-                    options.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
+                    attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
                 }
 
                 if (stream.Channels) {
-                    options.push(stream.Channels + ' ch');
+                    attributes.push(stream.Channels + ' ch');
                 }
 
-                if (options.length) {
-                    html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
-                }
-
-                options = [];
-
                 if (stream.IsDefault) {
-                    options.push('Default');
-                }
-                if (stream.IsForced) {
-                    options.push('Forced');
+                    attributes.push('(D)');
                 }
 
-                if (options.length) {
-                    html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
+                if (attributes.length) {
+                    textLines.push(attributes.join('&nbsp;&#149;&nbsp;'));
                 }
 
-                html += "</div>";
+                optionHtml += textLines.join('<br/>');
 
-                html += "</div>";
-            }
+                optionHtml += '</p>';
+
+                optionHtml += '</a></li>';
+
+                return optionHtml;
+
+            }).join('');
+
+            html += '</ul>';
+            html += '</div>';
+
+            html += '</div>';
 
             return html;
         }
@@ -607,75 +666,80 @@
 
             var currentIndex = self.currentSubtitleStreamIndex || -1;
 
-            var html = '';
-
             streams.unshift({
                 Index: -1,
                 Language: "Off"
             });
 
-            for (var i = 0, length = streams.length; i < length; i++) {
+            var html = '';
+            html += '<div class="videoPlayerPopupContent">';
+            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Subtitles</li>';
+            html += '</ul>';
 
-                var stream = streams[i];
+            html += '<div class="videoPlayerPopupScroller">';
+            html += '<ul data-role="listview" data-inset="true">';
 
-                if (stream.Index == currentIndex) {
-                    html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
-                } else {
-                    html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
+            html += streams.map(function (stream) {
+
+                var cssClass = "mediaPopupOption";
+
+                var selected = stream.Index == currentIndex;
+
+                if (selected) {
+                    cssClass += ' selectedMediaPopupOption';
                 }
 
-                if (stream.Index != -1) {
-                    html += '<img class="mediaFlyoutOptionImage" src="css/images/media/subtitleflyout.png" />';
-                } else {
-                    html += '<div class="mediaFlyoutOptionImage"></div>';
+                var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
+
+                optionHtml += '<p style="margin:0;">';
+
+                if (selected) {
+                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
                 }
 
-                html += '<div class="mediaFlyoutOptionContent">';
-
-                var options = [];
-
-                if (stream.Language == "Off") {
-                    options.push('&nbsp;');
-                }
-
-                html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
+                var textLines = [];
+                textLines.push(stream.Language || 'Unknown language');
 
                 if (stream.Codec) {
-                    options.push(stream.Codec);
+                    textLines.push(stream.Codec);
                 }
 
-                if (options.length) {
-                    html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
-                }
-
-                options = [];
+                var attributes = [];
 
                 if (stream.IsDefault) {
-                    options.push('Default');
+                    attributes.push('Default');
                 }
                 if (stream.IsForced) {
-                    options.push('Forced');
+                    attributes.push('Forced');
                 }
                 if (stream.IsExternal) {
-                    options.push('External');
+                    attributes.push('External');
                 }
 
-                if (options.length) {
-                    html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
+                if (attributes.length) {
+                    textLines.push(attributes.join('&nbsp;&#149;&nbsp;'));
                 }
 
-                html += "</div>";
+                optionHtml += textLines.join('<br/>');
 
-                html += "</div>";
-            }
+                optionHtml += '</p>';
+
+                optionHtml += '</a></li>';
+
+                return optionHtml;
+
+            }).join('');
+
+            html += '</ul>';
+            html += '</div>';
+
+            html += '</div>';
 
             return html;
         }
 
         function getQualityFlyoutHtml() {
 
-            var html = '';
-
             var currentSrc = self.currentMediaElement.currentSrc.toLowerCase();
             var isStatic = currentSrc.indexOf('static=true') != -1;
 
@@ -689,26 +753,44 @@
                 options[0].name = "Direct";
             }
 
-            for (var i = 0, length = options.length; i < length; i++) {
+            var html = '';
+            html += '<div class="videoPlayerPopupContent">';
+            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Video Quality</li>';
+            html += '</ul>';
 
-                var option = options[i];
+            html += '<div class="videoPlayerPopupScroller">';
+            html += '<ul data-role="listview" data-inset="true">';
 
-                var cssClass = "mediaFlyoutOption";
+            html += options.map(function (option) {
+
+                var cssClass = "mediaPopupOption";
 
                 if (option.selected) {
-                    cssClass += " selectedMediaFlyoutOption";
+                    cssClass += ' selectedMediaPopupOption';
                 }
 
-                html += '<div data-maxwidth="' + option.maxWidth + '" data-bitrate="' + option.bitrate + '" class="' + cssClass + '">';
+                var optionHtml = '<li><a data-maxwidth="' + option.maxWidth + '" data-bitrate="' + option.bitrate + '" class="' + cssClass + '" href="#">';
 
-                html += '<div class="mediaFlyoutOptionContent">';
+                optionHtml += '<p style="margin:0;">';
 
-                html += '<div class="mediaFlyoutOptionName" style="padding:.5em;">' + option.name + '</div>';
+                if (option.selected) {
+                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
+                }
 
-                html += "</div>";
+                optionHtml += option.name;
 
-                html += "</div>";
-            }
+                optionHtml += '</p>';
+
+                optionHtml += '</a></li>';
+
+                return optionHtml;
+
+            }).join('');
+
+            html += '</ul>';
+            html += '</div>';
+
+            html += '</div>';
 
             return html;
         }
@@ -805,7 +887,8 @@
                     $('.itemVideo').on('mousemove.videoplayer keydown.videoplayer scroll.videoplayer', idleHandler).trigger('mousemove');
 
                 } else {
-                    $('#videoControls').removeClass("active inactive");
+                    $('.hiddenOnIdle').removeClass("inactive");
+
                     exitFullScreenToWindow();
                 }
 
@@ -897,7 +980,7 @@
 
             self.startTimeTicksOffset = isStatic ? 0 : startPosition || 0;
 
-            var seekParam = isStatic && startPosition ? '#t=' + (startPosition / 10000000) : '';
+            var seekParam = startPosition ? '#t=' + (startPosition / 10000000) : '';
 
             var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
                 Static: isStatic,
@@ -911,7 +994,9 @@
 
                 // None of the browsers seem to like this
                 EnableAutoStreamCopy: false
-            })) + seekParam;
+            }));
+
+            if (isStatic) mp4VideoUrl += seekParam;
 
             var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
                 VideoCodec: 'vpx',
@@ -920,36 +1005,49 @@
                 videoBitrate: webmQuality.videoBitrate,
                 audioBitrate: webmQuality.audioBitrate,
                 EnableAutoStreamCopy: false
-            })) + seekParam;
+            }));
 
-            var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
-                timeStampOffsetMs: 0,
-                maxWidth: m3U8Quality.maxWidth,
-                videoBitrate: m3U8Quality.videoBitrate,
-                audioBitrate: m3U8Quality.audioBitrate,
-                VideoCodec: m3U8Quality.videoCodec,
-                AudioCodec: m3U8Quality.audioCodec,
-                profile: 'baseline',
-                level: '3'
-            })) + seekParam;
+            if (isStatic) webmVideoUrl += seekParam;
+
+            var hlsVideoUrl;
+
+            if (item.RunTimeTicks) {
+                hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/master.m3u8', $.extend({}, baseParams, {
+                    timeStampOffsetMs: 0,
+                    maxWidth: m3U8Quality.maxWidth,
+                    videoBitrate: m3U8Quality.videoBitrate,
+                    audioBitrate: m3U8Quality.audioBitrate,
+                    VideoCodec: m3U8Quality.videoCodec,
+                    AudioCodec: m3U8Quality.audioCodec,
+                    profile: 'baseline',
+                    level: '3',
+                    StartTimeTicks: 0
+
+                })) + seekParam;
+
+            } else {
+                hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
+                    timeStampOffsetMs: 0,
+                    maxWidth: m3U8Quality.maxWidth,
+                    videoBitrate: m3U8Quality.videoBitrate,
+                    audioBitrate: m3U8Quality.audioBitrate,
+                    VideoCodec: m3U8Quality.videoCodec,
+                    AudioCodec: m3U8Quality.audioCodec,
+                    profile: 'baseline',
+                    level: '3'
+                })) + seekParam;
+            }
 
             //======================================================================================>
 
-            // Show loading animation
-            $("html").css("cursor", "wait");
-
             // Create video player
             var html = '';
 
-            var requiresControls = $.browser.msie || $.browser.android || ($.browser.webkit && !$.browser.chrome);
+            var requiresNativeControls = $.browser.msie || $.browser.mobile;
 
             // Can't autoplay in these browsers so we need to use the full controls
-            if (requiresControls) {
-                if ($.browser.msie) {
-                    html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
-                } else {
-                    html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay controls>';
-                }
+            if (requiresNativeControls) {
+                html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
             } else {
 
                 // Chrome 35 won't play with preload none
@@ -991,10 +1089,9 @@
             html += '</video>';
 
             var mediaPlayerContainer = $("#mediaPlayer").show();
-            var videoControls = $('#videoControls', mediaPlayerContainer);
+            var videoControls = $('.videoControls', mediaPlayerContainer);
 
             //show stop button
-            $('#video-stopButton', videoControls).show();
             $('#video-playButton', videoControls).hide();
             $('#video-pauseButton', videoControls).show();
             $('#video-previousTrackButton', videoControls).hide();
@@ -1002,35 +1099,50 @@
 
             var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html);
 
-            $('.video-qualityButton', videoControls).show();
+            $('.videoQualityButton', videoControls).show();
 
             if (mediaStreams.filter(function (s) {
                 return s.Type == "Audio";
             }).length) {
-                $('#video-audioTracksButton', videoControls).show();
+                $('.videoAudioButton').show();
             } else {
-                $('#video-audioTracksButton', videoControls).hide();
+                $('.videoAudioButton').hide();
             }
 
             if (subtitleStreams.length) {
-                $('#video-subtitleButton', videoControls).show().prop("disabled", false);
+                $('.videoSubtitleButton').show();
             } else {
-                $('#video-subtitleButton', videoControls).hide().prop("disabled", true);
-                ;
+                $('.videoSubtitleButton').hide();
             }
 
             if (item.Chapters && item.Chapters.length) {
-                $('#video-chaptersButton', videoControls).show();
+                $('.videoChaptersButton').show();
             } else {
-                $('#video-chaptersButton', videoControls).hide();
+                $('.videoChaptersButton').hide();
             }
 
-            if (requiresControls) {
+            if (requiresNativeControls) {
                 $('#video-fullscreenButton', videoControls).hide();
             } else {
                 $('#video-fullscreenButton', videoControls).show();
             }
 
+            if ($.browser.mobile) {
+                $('.volumeSliderContainer', videoControls).addClass('hide');
+                $('.muteButton', videoControls).addClass('hide');
+                $('.unmuteButton', videoControls).addClass('hide');
+            } else {
+                $('.volumeSliderContainer', videoControls).removeClass('hide');
+                $('.muteButton', videoControls).removeClass('hide');
+                $('.unmuteButton', videoControls).removeClass('hide');
+            }
+
+            if (requiresNativeControls) {
+                videoControls.addClass('hide');
+            } else {
+                videoControls.removeClass('hide');
+            }
+
             var video = $("video", videoElement);
 
             initialVolume = self.getSavedVolume();
@@ -1089,7 +1201,6 @@
 
                 self.clearPauseStop();
 
-                $("html").css("cursor", "default");
                 self.resetEnhancements();
 
                 var errorCode = this.error ? this.error.code : '';
@@ -1118,22 +1229,6 @@
 
                 self.toggleFullscreen();
 
-            }).on("seeking.mediaplayerevent", function (e) {
-
-                $("html").css("cursor", "wait");
-
-            }).on("seeked.mediaplayerevent", function (e) {
-
-                $("html").css("cursor", "default");
-
-            }).on("loadstart.mediaplayerevent", function () {
-
-                $("html").css("cursor", "progress");
-
-            }).on("canplay.mediaplayerevent", function () {
-
-                $("html").css("cursor", "default");
-
             }).on("ended.playbackstopped", function () {
 
                 currentTimeElement.empty();
@@ -1152,6 +1247,8 @@
 
             self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex;
 
+            $('body').addClass('bodyWithPopupOpen');
+
             return video[0];
         };
     }
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index 9c1eb7f2bd..9e4b1b6b6f 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -504,67 +504,6 @@
             }
         };
 
-        self.updateNowPlayingInfo = function (item) {
-
-            if (!item) {
-                throw new Error('item cannot be null');
-            }
-
-            var mediaControls = $("#videoControls");
-
-            var state = self.getPlayerStateInternal(self.currentMediaElement, item, self.currentMediaSource);
-
-            var url = "";
-
-            if (state.NowPlayingItem.PrimaryImageTag) {
-
-                url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
-                    type: "Primary",
-                    height: 40,
-                    tag: state.NowPlayingItem.PrimaryImageTag
-                });
-            }
-            else if (state.NowPlayingItem.BackdropImageTag) {
-
-                url = ApiClient.getScaledImageUrl(state.NowPlayingItem.BackdropItemId, {
-                    type: "Backdrop",
-                    height: 40,
-                    tag: state.NowPlayingItem.BackdropImageTag,
-                    index: 0
-                });
-
-            } else if (state.NowPlayingItem.ThumbImageTag) {
-
-                url = ApiClient.getScaledImageUrl(state.NowPlayingItem.ThumbImageItemId, {
-                    type: "Thumb",
-                    height: 40,
-                    tag: state.NowPlayingItem.ThumbImageTag
-                });
-            }
-
-            else if (item.Type == "TvChannel" || item.Type == "Recording") {
-                url = "css/images/items/detail/tv.png";
-            }
-            else if (item.MediaType == "Audio") {
-                url = "css/images/items/detail/audio.png";
-            }
-            else {
-                url = "css/images/items/detail/video.png";
-            }
-
-            var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
-            var nameHtml = self.getNowPlayingNameHtml(state);
-
-            if (nameHtml.indexOf('<br/>') != -1) {
-                nowPlayingTextElement.addClass('nowPlayingDoubleText');
-            } else {
-                nowPlayingTextElement.removeClass('nowPlayingDoubleText');
-            }
-
-            $('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
-            nowPlayingTextElement.html(nameHtml);
-        };
-
         self.getNowPlayingNameHtml = function (playerState) {
 
             var nowPlayingItem = playerState.NowPlayingItem;
@@ -1044,7 +983,12 @@
 
                 var imageTags = item.ImageTags || {};
 
-                if (imageTags.Primary) {
+                if (item.SeriesPrimaryImageTag) {
+
+                    nowPlayingItem.PrimaryImageItemId = item.SeriesId;
+                    nowPlayingItem.PrimaryImageTag = item.SeriesPrimaryImageTag;
+                }
+                else if (imageTags.Primary) {
 
                     nowPlayingItem.PrimaryImageItemId = item.Id;
                     nowPlayingItem.PrimaryImageTag = imageTags.Primary;
@@ -1071,6 +1015,17 @@
                     nowPlayingItem.ThumbItemId = item.Id;
                     nowPlayingItem.ThumbImageTag = imageTags.Thumb;
                 }
+
+                if (imageTags.Logo) {
+
+                    nowPlayingItem.LogoItemId = item.Id;
+                    nowPlayingItem.LogoImageTag = imageTags.Logo;
+                }
+                else if (item.ParentLogoImageTag) {
+
+                    nowPlayingItem.LogoItemId = item.ParentLogoItemId;
+                    nowPlayingItem.LogoImageTag = item.ParentLogoImageTag;
+                }
             }
 
             return state;
@@ -1106,6 +1061,8 @@
 
         self.onPlaybackStopped = function () {
 
+            $('body').removeClass('bodyWithPopupOpen');
+
             self.clearPauseStop();
 
             var playerElement = this;
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 57dc1980a0..32addeae6e 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -42,7 +42,7 @@ var Dashboard = {
         //$.mobile.listview.prototype.options.dividerTheme = "b";
 
         //$.mobile.popup.prototype.options.theme = "c";
-        //$.mobile.popup.prototype.options.transition = "none";
+        $.mobile.popup.prototype.options.transition = "fade";
         $.mobile.defaultPageTransition = "none";
         //$.mobile.collapsible.prototype.options.contentTheme = "a";
     },
@@ -364,7 +364,7 @@ var Dashboard = {
 
         $('.confirmFlyout').popup("close").remove();
 
-        var html = '<div data-role="popup" data-transition="slidefade" class="confirmFlyout" style="max-width:500px;" data-theme="a">';
+        var html = '<div data-role="popup" class="confirmFlyout" style="max-width:500px;" data-theme="a">';
 
         html += '<div class="ui-bar-a" style="text-align:center;">';
         html += '<h3>' + title + '</h3>';
@@ -1211,34 +1211,53 @@ $(function () {
 
     var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
 
-    videoPlayerHtml += '<div id="videoBackdrop">';
+    videoPlayerHtml += '<div class="videoBackdrop">';
     videoPlayerHtml += '<div id="videoPlayer">';
-    videoPlayerHtml += '<div id="videoElement">';
 
+    videoPlayerHtml += '<div id="videoElement">';
     videoPlayerHtml += '<div id="play" class="status"></div>';
     videoPlayerHtml += '<div id="pause" class="status"></div>';
-
     videoPlayerHtml += '</div>';
 
+    videoPlayerHtml += '<div class="videoTopControls hiddenOnIdle">';
+    videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
+    videoPlayerHtml += '<div class="videoAdvancedControls">';
+
+    videoPlayerHtml += '<button class="imageButton mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
+    videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
+
+    videoPlayerHtml += '<button class="imageButton mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
+    videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
+
+    videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
+    videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
+
+    videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
+    videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
+
+    videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">Stop</button>';
+
+    videoPlayerHtml += '</div>'; // videoAdvancedControls
+    videoPlayerHtml += '</div>'; // videoTopControls
+
     // Create controls
-    videoPlayerHtml += '<div id="videoControls" class="videoControls">';
+    videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
+
+    videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
+    videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
+    videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
+    videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
 
     videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
     videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
     videoPlayerHtml += '</div>';
 
-    videoPlayerHtml += '<div id="video-basic-controls">';
-
-    videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
-    videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
-    videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
-
-    videoPlayerHtml += '<button id="video-stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
-    videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
-
     videoPlayerHtml += '<div class="currentTime"></div>';
+
+    videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
     videoPlayerHtml += '<div class="nowPlayingImage"></div>';
     videoPlayerHtml += '<div class="nowPlayingText"></div>';
+    videoPlayerHtml += '</div>'; // nowPlayingInfo
 
     videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">Mute</button>';
     videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
@@ -1247,26 +1266,8 @@ $(function () {
     videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
     videoPlayerHtml += '</div>';
 
-    videoPlayerHtml += '</div>'; // video-basic-controls
-    videoPlayerHtml += '<div id="video-advanced-controls">';
-
-    videoPlayerHtml += '<button class="mediaButton video-qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
-    //videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-transition="flip"></div>';
-    videoPlayerHtml += '<div style="display:none;" id="video-qualityFlyout" class="video-qualityFlyout mediaPlayerFlyout"></div>';
-
-    videoPlayerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="video-audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
-    videoPlayerHtml += '<div id="video-audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div>';
-
-    videoPlayerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="video-subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
-    videoPlayerHtml += '<div id="video-subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div>';
-
-    videoPlayerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="video-chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
-    videoPlayerHtml += '<div id="video-chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div>';
-
     videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">Fullscreen</button>';
 
-    videoPlayerHtml += '</div>'; // video-advanced-controls
-
     videoPlayerHtml += '</div>'; // videoControls
 
     videoPlayerHtml += '</div>'; // videoPlayer
@@ -1299,6 +1300,22 @@ $(function () {
     });
 });
 
+$.fn.openPopup = function () {
+
+    this.one('popupbeforeposition', function () {
+
+        //$("body").on("touchmove.popup", false);
+        //$('body').addClass('bodyWithPopupOpen');
+
+    }).one('popupafterclose', function () {
+        //$("body").off("touchmove.popup");
+
+        //$('body').removeClass('bodyWithPopupOpen');
+    });
+
+    return this.popup('open');
+};
+
 Dashboard.jQueryMobileInit();
 
 $(document).on('pagebeforeshow', ".page", function () {
diff --git a/dashboard-ui/wizardlibrary.html b/dashboard-ui/wizardlibrary.html
index 4ec525fa57..2e0f559e9e 100644
--- a/dashboard-ui/wizardlibrary.html
+++ b/dashboard-ui/wizardlibrary.html
@@ -21,7 +21,7 @@
                 </div>
                 <p><a href="https://github.com/MediaBrowser/MediaBrowser/wiki/Library-Structure" target="_blank">${ReferToMediaLibraryWiki}</a></p>
 
-                <div data-role="popup" data-transition="slidefade" id="popupEnterText" class="popup">
+                <div data-role="popup" id="popupEnterText" class="popup">
 
                     <div class="ui-corner-top ui-bar-a" style="text-align: center; padding: 0 20px;">
                         <h3></h3>