moved search into slide out panel

dashboard-ui/boxsets.html

@@ -21,8 +21,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/css/librarybrowser.css

@@ -4,19 +4,7 @@
 }
 
 .libraryPage {
-    padding-top: 68px !important;
+    padding-top: 46px !important;
-}
-
-@media all and (min-width: 600px) {
-    .libraryPage:not(.pageViewCount5) {
-        padding-top: 35px !important;
-    }
-}
-
-@media all and (min-width: 690px) {
-    .pageViewCount5 {
-        padding-top: 35px !important;
-    }
 }
 
 .ui-panel fieldset + fieldset {
@@ -54,21 +42,24 @@
     padding: 7px .5em 6px;
     display: inline-block;
     vertical-align: middle;
-    font-family: Arial;
 }
 
-    .viewMenuLink:hover {
+.viewMenuBar .btnCurrentUser {
+    padding: 7px 1em 6px;
+}
+
+.viewMenuLink:hover {
     color: #fff;
-    }
+}
 
     .viewMenuLink:hover img {
         opacity: .5;
     }
 
-    .viewMenuLink img {
+.viewMenuLink img {
-        height: 20px;
+    height: 24px;
     vertical-align: top;
-    }
+}
 
 .viewMenuSecondary {
     float: right;
@@ -592,6 +583,10 @@ a.itemTag:hover {
         padding-right: .8em;
     }
 
+    .viewMenuBar .btnCurrentUser {
+        padding-right: 1.5em;
+    }
+
     .lnkSibling:not(.hide) {
         display: block;
     }

dashboard-ui/css/mediaplayer.css

@@ -0,0 +1,334 @@
+
+
+/* Now playing bar */
+#nowPlayingBar {
+    padding: 6px .5em;
+    border-top: 2px solid green;
+}
+
+    #nowPlayingBar .highPosition {
+        z-index: 99999;
+        position: relative;
+        opacity: 0.5;
+    }
+
+        #nowPlayingBar .highPosition:hover:not(.barBackground ) {
+            opacity: 0.9;
+        }
+
+    #nowPlayingBar .barBackground {
+        border-top: 2px solid green;
+        background: #3c3c3c;
+        position: absolute;
+        margin: -8px -0.5em !important;
+        width: 100%;
+        height: 100%;
+    }
+
+    #nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
+        margin: 0 1em;
+        position: relative;
+    }
+
+.nowPlayingBarImage {
+    border: 1px solid #a7a7a7!important;
+    padding: 1px;
+    vertical-align: bottom;
+}
+
+.mediaButton {
+    display: inline-block;
+    position: relative;
+    top: -4px;
+}
+
+#mediaElement {
+    display: inline-block;
+    position: relative;
+}
+
+.nowPlayingMediaInfo div {
+    display: inline-block;
+}
+
+.nowPlayingMediaInfo a {
+    margin-right: .25em;
+}
+
+
+.nowPlayingMediaInfo {
+    display: none;
+}
+
+.nowPlayingText {
+    position: relative;
+    top: -3px;
+    margin-left: 3px;
+}
+
+@media all and (min-width: 650px) {
+    .nowPlayingMediaInfo {
+        display: inline-block;
+    }
+}
+
+.mediaButton img {
+    height: 24px;
+}
+
+.itemVideo {
+    position: absolute;
+    z-index: 99998;
+    height: auto;
+    width: 270px;
+    bottom: 45px;
+    left: -290px;
+    border: 1px solid #666;
+    background: #000;
+}
+
+.fullscreenVideo {
+    position: fixed;
+    top: 0 !important;
+    bottom: 0 !important;
+    right: 0 !important;
+    left: 0 !important;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    z-index: 99996;
+}
+
+.currentTime {
+    display: inline-block;
+    position: relative;
+    top: -10px;
+    width: 110px;
+    margin-right: .25em;
+}
+
+.mediaSlider {
+    position: relative;
+    top: -10px;
+    width: 50px;
+    cursor: pointer;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    /* IE10 won't see this (good) '*/
+    .mediaSlider {
+        -webkit-appearance: none;
+        -moz-apperance: none;
+        background: #777;
+        border-radius: 5px;
+        vertical-align: bottom;
+        height: 3px;
+        top: -17px;
+    }
+}
+
+
+.mediaSlider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -moz-apperance: none;
+    width: 15px;
+    height: 15px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+    border-radius: 10px;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) );
+}
+
+.positionSlider {
+    width: 130px;
+}
+
+.volumeButton {
+    margin-right: .5em!important;
+}
+
+::-ms-thumb {
+    background-image: linear-gradient(#fefefe,#dddddd);
+    width: 15px;
+}
+
+::-ms-track {
+    padding: 0;
+    border: 0;
+    color: #777;
+}
+
+input[type="range"]::-ms-fill-lower {
+    background-color: #777;
+}
+
+input[type="range"]::-ms-fill-upper {
+    background-color: #777;
+}
+
+::-ms-tooltip {
+    display: none; /* display and visibility only */
+}
+
+@media all and (max-width: 600px) {
+    .volumeButton, .volumeSlider, .nowPlayingText, .chaptersButton, .audioTracksButton {
+        display: none!important;
+    }
+
+    #nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
+        margin: 0 .5em;
+    }
+
+    .positionSlider {
+        width: 50px;
+    }
+
+    .itemVideo:not(.fullscreenVideo) {
+        left: -250px;
+    }
+}
+
+@media all and (max-width: 750px) {
+    .positionSlider {
+        width: 50px;
+    }
+}
+
+.mediaFlyoutContainer {
+    display: inline-block;
+}
+
+.mediaPlayerFlyout {
+    width: 200px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid #999;
+    position: absolute;
+    z-index: 99999;
+    bottom: 55px;
+    margin-left: -50px;
+    max-height: 300px;
+    overflow-y: auto;
+    font-size: 13px;
+}
+
+.chaptersFlyout {
+    width: 250px;
+}
+
+.audioTracksFlyout {
+    width: 250px;
+}
+
+.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);
+    background-repeat: no-repeat;
+    background-position: right top;
+    background-size: 16px 16px;
+}
+
+.mediaFlyoutOptionImage {
+    display: inline-block;
+    width: 15%;
+    vertical-align: middle;
+}
+
+    .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
+        vertical-align: top;
+        display: inline-block;
+        width: 85%;
+    }
+
+.chaptersFlyout .mediaFlyoutOptionImage {
+    width: 40%;
+}
+
+    .chaptersFlyout .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
+        width: 60%;
+    }
+
+.mediaFlyoutOptionName {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-left: 5px;
+}
+
+.mediaFlyoutOptionSecondaryText {
+    font-size: 12px;
+    color: #999;
+    margin-top: 3px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-left: 5px;
+}
+
+@media (min-width: 750px) {
+    .itemVideo:not(.fullscreenVideo) {
+        width: 320px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .itemVideo:not(.fullscreenVideo) {
+        width: 320px;
+    }
+}
+
+@media (min-width: 1440px) {
+    .itemVideo:not(.fullscreenVideo) {
+        width: 400px;
+    }
+
+    .positionSlider {
+        width: 400px;
+    }
+
+    .itemVideo {
+        left: -560px;
+    }
+}
+
+@media (min-width: 1700px) {
+    .itemVideo:not(.fullscreenVideo) {
+        width: 500px;
+    }
+
+    .positionSlider {
+        width: 500px;
+    }
+
+    .itemVideo {
+        left: -660px;
+    }
+}
+
+@media (min-width: 2400px) {
+    .itemVideo:not(.fullscreenVideo) {
+        width: 550px;
+    }
+
+    .positionSlider {
+        width: 550px;
+    }
+
+    .itemVideo {
+        left: -710px;
+    }
+}

dashboard-ui/css/search.css

@@ -1,133 +1,57 @@
-.headerSearch {
+.searchHints {
-    display: none;
+    margin-top: 1em;
-    margin-right: 1em;
-    position: relative;
-}
-
-.txtSearch {
-    vertical-align: middle;
-    font-size: 14px;
-    margin: 0 .15em 0 0;
-    width: 80px;
-    padding: 0;
-    border: 1px solid #4d90fe;
-}
-
-.btnSearch {
-    vertical-align: middle;
-    background-color: #4d90fe;
-    background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
-    background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
-    background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
-    background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
-    background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
-    background-image: linear-gradient(top,#4d90fe,#4787ed);
-    border: 1px solid #3079ed;
-    color: #fff!important;
-    margin: 0 0;
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    font-weight: bold;
-    min-width: 54px;
-    padding: 0 4px;
-    text-align: center;
-    text-decoration: none !important;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-}
-
-.txtSearch, .btnSearch {
-    height: 22px;
-    line-height: 22px;
-}
-
-    .btnSearch img {
-        height: 22px;
-        margin: 0 auto;
-        border: 0;
-    }
-
-.searchHints {
-    width: 248px;
-    color: #000;
-    background-color: #fff;
-    border: 1px solid #999;
-    position: absolute;
-    z-index: 998;
-    margin-top: 1px;
-}
-
-.searchHintsContent {
-    padding: 10px;
 }
 
 .searchHint {
     display: block;
     text-decoration: none;
-    color: #000;
+    color: #fff;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #444;
 }
 
     .searchHint:hover {
-        background-color: #eee;
+        background-color: #444;
     }
 
     .searchHint:focus {
-        background-color: #eee;
+        background-color: #444;
     }
 
 .searchHintImage {
     display: inline-block;
-    width: 15%;
+    width: 20%;
     vertical-align: middle;
+    margin: 4px 0;
 }
 
 .searchHintContent {
     vertical-align: top;
     display: inline-block;
-    width: 85%;
+    width: 80%;
 }
 
 .searchHintName {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    font-size: 14px;
+    font-size: 12px;
-    color: #000;
+    color: #fff;
 }
 
 .searchHintSecondaryText {
     font-size: 12px;
-    color: #555;
+    color: #bbb;
     margin-top: 3px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    font-weight: 300;
 }
 
 .searchHintContentInner {
     padding: 2px 5px;
 }
 
-@media all and (min-width: 300px) {
-
-    .headerSearch {
-        display: inline-block;
-    }
-}
-
-@media all and (min-width: 850px) {
-
-    .txtSearch {
-        width: 200px;
-    }
-
-    .searchHints {
-        width: 248px;
-    }
-}
-
 .circle {
     background-color: rgba(0,0,0,0);
     border: 5px solid rgba(0,183,229,0.9);

dashboard-ui/css/site.css

@@ -775,344 +775,10 @@ progress {
         opacity: .5;
     }
 
-/* Now playing bar */
-#nowPlayingBar {
-    padding: 6px .5em;
-    border-top: 2px solid green;
-}
-
-    #nowPlayingBar .highPosition {
-        z-index: 99999;
-        position: relative;
-        opacity: 0.5;
-    }
-
-        #nowPlayingBar .highPosition:hover:not(.barBackground ) {
-            opacity: 0.9;
-        }
-
-    #nowPlayingBar .barBackground {
-        border-top: 2px solid green;
-        background: #3c3c3c;
-        position: absolute;
-        margin: -8px -0.5em !important;
-        width: 100%;
-        height: 100%;
-    }
-
-    #nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
-        margin: 0 1em;
-        position: relative;
-    }
-
-.nowPlayingBarImage {
-    border: 1px solid #a7a7a7!important;
-    padding: 1px;
-    vertical-align: bottom;
-}
-
-.mediaButton {
-    display: inline-block;
-    position: relative;
-    top: -4px;
-}
-
-#mediaElement {
-    display: inline-block;
-    position: relative;
-}
-
-.nowPlayingMediaInfo div {
-    display: inline-block;
-}
-
-.nowPlayingMediaInfo a {
-    margin-right: .25em;
-}
-
-
-.nowPlayingMediaInfo {
-    display: none;
-}
-
-.nowPlayingText {
-    position: relative;
-    top: -3px;
-    margin-left: 3px;
-}
-
-@media all and (min-width: 650px) {
-    .nowPlayingMediaInfo {
-        display: inline-block;
-    }
-}
-
-.mediaButton img {
-    height: 24px;
-}
-
-.itemVideo {
-    position: absolute;
-    z-index: 99998;
-    height: auto;
-    width: 270px;
-    bottom: 45px;
-    left: -290px;
-    border: 1px solid #666;
-    background: #000;
-}
-
-.fullscreenVideo {
-    position: fixed;
-    top: 0 !important;
-    bottom: 0 !important;
-    right: 0 !important;
-    left: 0 !important;
-    width: 100%;
-    height: 100%;
-    border: 0;
-    z-index: 99996;
-}
-
-.currentTime {
-    display: inline-block;
-    position: relative;
-    top: -10px;
-    width: 110px;
-    margin-right: .25em;
-}
-
-.mediaSlider {
-    position: relative;
-    top: -10px;
-    width: 50px;
-    cursor: pointer;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    /* IE10 won't see this (good) '*/
-    .mediaSlider {
-        -webkit-appearance: none;
-        -moz-apperance: none;
-        background: #777;
-        border-radius: 5px;
-        vertical-align: bottom;
-        height: 3px;
-        top: -17px;
-    }
-}
-
-
-.mediaSlider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    -moz-apperance: none;
-    width: 15px;
-    height: 15px;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    -ms-border-radius: 10px;
-    -o-border-radius: 10px;
-    border-radius: 10px;
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) );
-}
-
-.positionSlider {
-    width: 130px;
-}
-
-.volumeButton {
-    margin-right: .5em!important;
-}
-
-::-ms-thumb {
-    background-image: linear-gradient(#fefefe,#dddddd);
-    width: 15px;
-}
-
-::-ms-track {
-    padding: 0;
-    border: 0;
-    color: #777;
-}
-
-input[type="range"]::-ms-fill-lower {
-    background-color: #777;
-}
-
-input[type="range"]::-ms-fill-upper {
-    background-color: #777;
-}
-
-::-ms-tooltip {
-    display: none; /* display and visibility only */
-}
-
 .userProfileIcon {
     width: 36px;
 }
 
-
-@media all and (max-width: 600px) {
-    .volumeButton, .volumeSlider, .nowPlayingText, .chaptersButton, .audioTracksButton {
-        display: none!important;
-    }
-
-    #nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
-        margin: 0 .5em;
-    }
-
-    .positionSlider {
-        width: 50px;
-    }
-
-    .itemVideo:not(.fullscreenVideo) {
-        left: -250px;
-    }
-}
-
-@media all and (max-width: 750px) {
-    .positionSlider {
-        width: 50px;
-    }
-}
-
-.mediaFlyoutContainer {
-    display: inline-block;
-}
-
-.mediaPlayerFlyout {
-    width: 200px;
-    color: #000;
-    background-color: #fff;
-    border: 1px solid #999;
-    position: absolute;
-    z-index: 99999;
-    bottom: 55px;
-    margin-left: -50px;
-    max-height: 300px;
-    overflow-y: auto;
-    font-size: 13px;
-}
-
-.chaptersFlyout {
-    width: 250px;
-}
-
-.audioTracksFlyout {
-    width: 250px;
-}
-
-.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);
-    background-repeat: no-repeat;
-    background-position: right top;
-    background-size: 16px 16px;
-}
-
-.mediaFlyoutOptionImage {
-    display: inline-block;
-    width: 15%;
-    vertical-align: middle;
-}
-
-    .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
-        vertical-align: top;
-        display: inline-block;
-        width: 85%;
-    }
-
-.chaptersFlyout .mediaFlyoutOptionImage {
-    width: 40%;
-}
-
-    .chaptersFlyout .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
-        width: 60%;
-    }
-
-.mediaFlyoutOptionName {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-left: 5px;
-}
-
-.mediaFlyoutOptionSecondaryText {
-    font-size: 12px;
-    color: #999;
-    margin-top: 3px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-left: 5px;
-}
-
-@media (min-width: 750px) {
-    .itemVideo:not(.fullscreenVideo) {
-        width: 320px;
-    }
-}
-
-@media (min-width: 1200px) {
-    .itemVideo:not(.fullscreenVideo) {
-        width: 320px;
-    }
-}
-
-@media (min-width: 1440px) {
-    .itemVideo:not(.fullscreenVideo) {
-        width: 400px;
-    }
-
-    .positionSlider {
-        width: 400px;
-    }
-
-    .itemVideo {
-        left: -560px;
-    }
-}
-
-@media (min-width: 1700px) {
-    .itemVideo:not(.fullscreenVideo) {
-        width: 500px;
-    }
-
-    .positionSlider {
-        width: 500px;
-    }
-
-    .itemVideo {
-        left: -660px;
-    }
-}
-
-@media (min-width: 2400px) {
-    .itemVideo:not(.fullscreenVideo) {
-        width: 550px;
-    }
-
-    .positionSlider {
-        width: 550px;
-    }
-
-    .itemVideo {
-        left: -710px;
-    }
-}
-
 #editItemMetadataPage #txtOverview {
     height: 70px;
 }

dashboard-ui/episodes.html

@@ -22,8 +22,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/gamegenres.html

@@ -15,8 +15,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/games.html

@@ -17,8 +17,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/gamestudios.html

@@ -15,8 +15,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/gamesystems.html

@@ -15,8 +15,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/itemlist.html

@@ -22,8 +22,8 @@
                             <option value="Poster">Poster</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/librarysettings.html

@@ -17,7 +17,7 @@
 
                     <ul data-role="listview" class="ulForm">
                         <li>
-                            <input type="checkbox" id="chkEnableCustomIBNPath" name="chkEnableCustomIBNPath" data-mini="true" />
+                            <input type="checkbox" id="chkEnableCustomIBNPath" name="chkEnableCustomIBNPath" />
                             <label for="chkEnableCustomIBNPath">Use custom images by name path</label>
                             <div class="fieldDescription">
                                 This folder contains actor, artist, genre and studio images.
@@ -26,7 +26,7 @@
                         <li id="fieldEnterIBNPath" style="display: none;">
                             <label for="txtItemsByNamePath">Images by name path: </label>
                             <div style="display: inline-block; width: 92%;">
-                                <input type="text" id="txtItemsByNamePath" name="txtItemsByNamePath" data-mini="true" />
+                                <input type="text" id="txtItemsByNamePath" name="txtItemsByNamePath" />
                             </div>
                             <button id="btnSelectIBNPath" type="button" data-icon="search" data-iconpos="notext" data-inline="true">Select Directory</button>
                             <div class="fieldDescription">
@@ -35,13 +35,13 @@
                         </li>
                         <li>
                             <label for="txtSeasonZeroName">Season 0 display name: </label>
-                            <input type="text" id="txtSeasonZeroName" name="txtSeasonZeroName" required="required" data-mini="true" />
+                            <input type="text" id="txtSeasonZeroName" name="txtSeasonZeroName" required="required" />
                         </li>
                         <li>
-                            <button type="submit" data-theme="b" data-icon="check" data-mini="true">
+                            <button type="submit" data-theme="b" data-icon="check">
                                 Save
                             </button>
-                            <button type="button" onclick="Dashboard.navigate('dashboard.html');" data-icon="delete" data-mini="true">
+                            <button type="button" onclick="Dashboard.navigate('dashboard.html');" data-icon="delete">
                                 Cancel
                             </button>
                         </li>

dashboard-ui/moviegenres.html

@@ -19,8 +19,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/moviepeople.html

@@ -21,8 +21,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/movies.html

@@ -28,8 +28,8 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/moviestudios.html

@@ -19,8 +19,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/movietrailers.html

@@ -21,8 +21,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/musicalbumartists.html

@@ -20,8 +20,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/musicalbums.html

@@ -25,8 +25,8 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/musicartists.html

@@ -20,8 +20,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/musicgenres.html

@@ -17,8 +17,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/musicvideos.html

@@ -21,8 +21,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/scripts/librarybrowser.js

@@ -2392,9 +2392,7 @@
 
         html += '<div class="viewMenuSecondary">';
 
-        html += Search.getSearchHtml();
+        html += '<a class="viewMenuLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout(this);">';
-
-        html += '<a class="viewMenuLink" class="btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout(this);">';
 
         if (user.PrimaryImageTag) {
 
@@ -2411,8 +2409,10 @@
 
         html += '</a>';
 
+        html += '<button onclick="Search.showSearchPanel($.mobile.activePage);" type="button" data-icon="search" data-inline="true" data-iconpos="notext">Search</button>';
+
         if (user.Configuration.IsAdministrator) {
-            html += '<a class="viewMenuLink" href="dashboard.html" title="Dashboard"><img src="css/images/toolswhite.png" alt="Dashboard" /></a>';
+            html += '<a href="dashboard.html" data-role="button" data-icon="gear" data-inline="true" data-iconpos="notext">Dashboard</a>';
         }
 
         html += '</div>';
@@ -2421,7 +2421,7 @@
 
         $(page).prepend(html);
 
-        Search.onSearchRendered($('.viewMenuBar', page));
+        Search.onSearchRendered($('.viewMenuBar', page).trigger('create'));
     }
 
     function insertViews(page, user, counts, liveTvServices) {
@@ -2433,36 +2433,27 @@
 
         var view = page.getAttribute('data-view') || getParameterByName('context');
 
-        var viewCount = 0;
-
         if (counts.MovieCount || counts.TrailerCount) {
 
             html += '<a class="viewMenuLink viewMenuTextLink' + (view == 'movies' ? selectedCssClass : '') + '" href="moviesrecommended.html">' + (view == 'movies' ? selectedHtml : '') + '<span class="viewName">Movies</span></a>';
-            viewCount++;
         }
 
         if (counts.EpisodeCount || counts.SeriesCount) {
             html += '<a class="viewMenuLink viewMenuTextLink' + (view == 'tv' ? selectedCssClass : '') + '" href="tvrecommended.html">' + (view == 'tv' ? selectedHtml : '') + '<span class="viewName">TV</span></a>';
-            viewCount++;
         }
 
         if (liveTvServices.length) {
             html += '<a class="viewMenuLink viewMenuTextLink' + (view == 'livetv' ? selectedCssClass : '') + '" href="livetvchannels.html">' + (view == 'livetv' ? selectedHtml : '') + '<span class="viewName">Live TV</span></a>';
-            viewCount++;
         }
 
         if (counts.SongCount || counts.MusicVideoCount) {
             html += '<a class="viewMenuLink viewMenuTextLink' + (view == 'music' ? selectedCssClass : '') + '" href="musicrecommended.html">' + (view == 'music' ? selectedHtml : '') + '<span class="viewName">Music</span></a>';
-            viewCount++;
         }
 
         if (counts.GameCount) {
             html += '<a class="viewMenuLink viewMenuTextLink' + (view == 'games' ? selectedCssClass : '') + '" href="gamesrecommended.html">' + (view == 'games' ? selectedHtml : '') + '<span class="viewName">Games</span></a>';
-            viewCount++;
         }
 
-        $(page).addClass('pageViewCount' + viewCount);
-
         $('.homeMenuLink', page).after(html);
     }
 

dashboard-ui/scripts/notifications.js

@@ -26,7 +26,7 @@
 
         var context = this;
 
-        var html = '<div data-role="popup" class="notificationsFlyout" style="min-width:250px;margin-top:30px;margin-right:20px;background: #f8f8f8;">';
+        var html = '<div data-role="popup" class="notificationsFlyout" style="min-width:250px;margin-top:30px;margin-right:20px;" data-theme="a">';
 
         html += '<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
 
@@ -40,7 +40,7 @@
 
         html += '</p>';
 
-        html += '<p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true">Mark these read</button></p>';
+        html += '<p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true" data-theme="b">Mark these read</button></p>';
         html += '</div>';
 
         html += '</div>';

dashboard-ui/scripts/pluginspage.js

@@ -1,10 +1,10 @@
 var PluginsPage = {
 
     onPageShow: function () {
-        PluginsPage.reloadList();
+        PluginsPage.reloadList(this);
     },
 
-    reloadList: function () {
+    reloadList: function (page) {
 
         Dashboard.showLoadingMsg();
 
@@ -14,14 +14,12 @@
 
         $.when(promise1, promise2).done(function(response1, response2) {
 
-            PluginsPage.populateList(response1[0], response2[0]);
+            PluginsPage.populateList(page, response1[0], response2[0]);
 
         });
     },
 
-    populateList: function (plugins, pluginConfigurationPages) {
+    populateList: function (page, plugins, pluginConfigurationPages) {
-
-        var page = $($.mobile.activePage);
 
         plugins = plugins.sort(function (plugin1, plugin2) {
 
@@ -71,6 +69,7 @@
 
     deletePlugin: function (link) {
 
+        var page = $(link).parents('.page');
         var name = link.getAttribute('data-pluginname');
         var uniqueid = link.getAttribute('data-id');
 
@@ -83,7 +82,7 @@
 
                 ApiClient.uninstallPlugin(uniqueid).done(function () {
 
-                    PluginsPage.reloadList();
+                    PluginsPage.reloadList(page);
                 });
             }
         });

dashboard-ui/scripts/search.js

@@ -11,43 +11,12 @@
         }
     }
 
-    function createSearchHintsElement(page) {
+    function updateSearchHints(page, searchTerm) {
-
-        $(document.body).off("mousedown.hidesearchhints").on("mousedown.hidesearchhints", function (e) {
-
-            var elem = $(e.target);
-
-            if (!elem.is('#searchHints,#txtSearch,#btnSearch') && !elem.parents('#searchHints,#txtSearch,#btnSearch').length) {
-                hideFlyout(page);
-            }
-
-        });
-
-        return $('#searchHints', page).show();
-    }
-
-    function hideFlyout(page) {
-        $('#searchHints', page).hide();
-
-        $(document.body).off("mousedown.hidesearchhints");
-    }
-
-    function showFlyout(page) {
-
-        var hints = $('#searchHints:visible');
-
-        if (!hints.length) {
-
-            createSearchHintsElement(page);
-        }
-    }
-
-    function updateFlyout(page, searchTerm) {
 
         if (!searchTerm) {
 
+            $('#searchHints', page).empty();
             clearSearchHintTimeout();
-            hideFlyout(page);
             return;
         }
 
@@ -70,10 +39,6 @@
                 return;
             }
             
-            if (!result.TotalRecordCount) {
-                hideFlyout(page);
-                return;
-            }
             renderSearchHintResult(page, result.SearchHints);
         });
     }
@@ -239,38 +204,71 @@
         $('#searchHints', page).html(html);
     }
     
+    function getSearchPanel(page) {
+        
+        var panel = $('#searchPanel', page);
+
+        if (!panel.length) {
+
+            var html = '';
+
+            html += '<div data-role="panel" id="searchPanel" class="searchPanel" data-position="right" data-display="overlay" data-position-fixed="true" data-theme="b">';
+
+            html += '<h3>';
+            html += 'Search';
+            html += '</h3>';
+
+            html += '<input id="txtSearch" class="txtSearch" type="search" data-theme="a" />';
+
+            html += '<div id="searchHints" class="searchHints"></div>';
+
+            html += '</div>';
+
+            $(page).append(html);
+
+            panel = $('#searchPanel', page).panel({}).trigger('create');
+
+            $('#txtSearch', panel).on("keyup", function (e) {
+
+                // Down
+                if (e.keyCode == 40) {
+
+                    var first = $('.searchHint', panel)[0];
+
+                    if (first) {
+                        first.focus();
+                    }
+
+                    return false;
+                }
+
+            }).on("keyup", function (e) {
+
+                if (e.keyCode != 40) {
+                    var value = this.value;
+
+                    updateSearchHints(panel, value);
+                }
+
+            });
+        }
+
+        return panel;
+    }
+
     function search() {
 
         var self = this;
 
-        self.getSearchHtml = function () {
+        self.showSearchPanel = function (page) {
 
-            var html = '<div class="headerSearch"><form id="searchForm" name="searchForm">';
+            var panel = getSearchPanel(page);
 
-            html += '<input id="txtSearch" class="txtSearch" type="search" required="required" />';
+            $(panel).panel('toggle');
-
-            html += '<button id="btnSearch" class="btnSearch" type="submit">';
-            html += '<img src="css/images/searchbutton.png" />';
-            html += '</button>';
-
-            html += '</form>';
-
-            html += '<div id="searchHints" class="searchHints" style="display:none;"><div class="searchHintsContent"><div class="circle"></div><div class="circle1"></div></div></div>';
-
-            html += '</div>';
-
-            return html;
         };
 
         self.onSearchRendered = function (parentElem) {
 
-            $('#searchForm', parentElem).on("submit", function () {
-
-                Dashboard.alert('Coming soon.');
-
-                return false;
-            });
-
             $('#searchHints', parentElem).on("keydown", '.searchHint', function (e) {
 
                 // Down
@@ -298,39 +296,6 @@
                 }
             });
 
-            $('#txtSearch', parentElem).on("keyup", function (e) {
-
-                // Down
-                if (e.keyCode == 40) {
-
-                    var first = $('.searchHint', parentElem)[0];
-
-                    if (first) {
-                        first.focus();
-                    }
-
-                    return false;
-                }
-
-            }).on("keyup", function (e) {
-
-                if (e.keyCode != 40) {
-                    var value = this.value;
-
-                    showFlyout(parentElem);
-                    updateFlyout(parentElem, value);
-                }
-
-            }).on("focus", function () {
-
-                var value = this.value;
-
-                if (value) {
-                    showFlyout(parentElem, value);
-                }
-
-            });
-
         };
     }
 
@@ -338,8 +303,6 @@
 
     $(document).on('pagehide', ".libraryPage", function () {
 
-        hideFlyout(this);
-
         $('#txtSearch', this).val('');
     });
 

dashboard-ui/scripts/site.js

@@ -265,7 +265,7 @@ var Dashboard = {
 
     showServerRestartWarning: function (systemInfo) {
 
-        var html = '<span style="margin-right: 1em;">Please restart Media Browser Server to finish updating.</span>';
+        var html = '<span style="margin-right: 1em;">Please restart to finish updating.</span>';
 
         if (systemInfo.CanSelfRestart) {
             html += '<button type="button" data-icon="refresh" onclick="$(this).buttonEnabled(false);Dashboard.restartServer();" data-theme="b" data-inline="true" data-mini="true">Restart Server</button>';
@@ -717,7 +717,6 @@ var Dashboard = {
 
         var page = $.mobile.activePage;
 
-
         $("#dashboardPanel", page).panel("open");
     },
 

dashboard-ui/scripts/userprofilespage.js

@@ -61,6 +61,7 @@
 
     deleteUser: function (link) {
 
+        var page = $.mobile.activePage;
         var name = link.getAttribute('data-username');
 
         var msg = "Are you sure you wish to delete " + name + "?";
@@ -74,7 +75,7 @@
 
                 ApiClient.deleteUser(id).done(function () {
 
-                    Dashboard.validateCurrentUser($.mobile.activePage);
+                    Dashboard.validateCurrentUser(page);
                     UserProfilesPage.loadPageData();
                 });
             }

dashboard-ui/scripts/wizarduserpage.js

@@ -13,7 +13,7 @@
         self.onSubmit = function () {
             Dashboard.showLoadingMsg();
 
-            var page = $.mobile.activePage;
+            var form = this;
 
             ApiClient.getUsers().done(function (users) {
 
@@ -23,13 +23,13 @@
 
                     user = users[0];
 
-                    user.Name = $('#txtUsername', page).val();
+                    user.Name = $('#txtUsername', form).val();
 
                     ApiClient.updateUser(user).done(onSaveComplete);
 
                 } else {
 
-                    user = { Name: $('#txtUsername', page).val() };
+                    user = { Name: $('#txtUsername', form).val() };
 
                     ApiClient.createUser(user).done(onSaveComplete);
                 }

dashboard-ui/songs.html

@@ -17,8 +17,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/tvgenres.html

@@ -18,8 +18,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/tvpeople.html

@@ -21,8 +21,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/tvshows.html

@@ -27,8 +27,8 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>

dashboard-ui/tvstudios.html

@@ -18,8 +18,8 @@
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>