From f45595bdba58b389e7e4d17d720f808982506138 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 15 Aug 2015 14:17:22 -0400
Subject: [PATCH] change movie tabs to swipe tabs

---
 .../iron-a11y-keys-behavior/.bower.json       |   6 +-
 .../bower_components/iron-meta/.bower.json    |   6 +-
 .../bower_components/paper-styles/.bower.json |   4 +-
 dashboard-ui/collections.html                 |  76 +-
 dashboard-ui/itemdetails.html                 |  18 +-
 dashboard-ui/moviegenres.html                 |  73 --
 dashboard-ui/moviepeople.html                 |  71 --
 dashboard-ui/movies.html                      | 231 ------
 dashboard-ui/moviesrecommended.html           | 681 +++++++++++++++++-
 dashboard-ui/moviestudios.html                |  63 --
 dashboard-ui/movietrailers.html               | 146 ----
 dashboard-ui/scripts/alphapicker.js           |  34 +-
 dashboard-ui/scripts/collectioneditor.js      | 219 ++++++
 dashboard-ui/scripts/librarybrowser.js        |   3 +-
 dashboard-ui/scripts/librarylist.js           |  18 +-
 dashboard-ui/scripts/livetvguide.js           |   2 +-
 dashboard-ui/scripts/livetvrecordings.js      |   2 +-
 dashboard-ui/scripts/livetvseriestimers.js    |   2 +-
 dashboard-ui/scripts/livetvtimers.js          |   2 +-
 dashboard-ui/scripts/moviecollections.js      | 417 +++--------
 dashboard-ui/scripts/moviegenres.js           | 118 ++-
 dashboard-ui/scripts/moviepeople.js           | 109 +--
 dashboard-ui/scripts/movies.js                | 361 +++-------
 dashboard-ui/scripts/moviesrecommended.js     |  78 +-
 dashboard-ui/scripts/moviestudios.js          |  94 ++-
 dashboard-ui/scripts/movietrailers.js         | 144 ++--
 26 files changed, 1463 insertions(+), 1515 deletions(-)
 delete mode 100644 dashboard-ui/moviegenres.html
 delete mode 100644 dashboard-ui/moviepeople.html
 delete mode 100644 dashboard-ui/movies.html
 delete mode 100644 dashboard-ui/moviestudios.html
 delete mode 100644 dashboard-ui/movietrailers.html
 create mode 100644 dashboard-ui/scripts/collectioneditor.js

diff --git a/dashboard-ui/bower_components/iron-a11y-keys-behavior/.bower.json b/dashboard-ui/bower_components/iron-a11y-keys-behavior/.bower.json
index f0a9c76d51..4072b4af76 100644
--- a/dashboard-ui/bower_components/iron-a11y-keys-behavior/.bower.json
+++ b/dashboard-ui/bower_components/iron-a11y-keys-behavior/.bower.json
@@ -29,14 +29,14 @@
     "web-component-tester": "*",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
+  "homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
   "_release": "1.0.5",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.5",
     "commit": "cf833eab5c55a26c5aa92e56d3fcb079120ce66a"
   },
-  "_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
+  "_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-a11y-keys-behavior"
+  "_originalSource": "PolymerElements/iron-a11y-keys-behavior"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-meta/.bower.json b/dashboard-ui/bower_components/iron-meta/.bower.json
index 9e650790be..8119ebcf41 100644
--- a/dashboard-ui/bower_components/iron-meta/.bower.json
+++ b/dashboard-ui/bower_components/iron-meta/.bower.json
@@ -25,14 +25,14 @@
     "web-component-tester": "*",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/PolymerElements/iron-meta",
+  "homepage": "https://github.com/polymerelements/iron-meta",
   "_release": "1.0.3",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.3",
     "commit": "91529259262b0d8f33fed44bc3fd47aedf35cb04"
   },
-  "_source": "git://github.com/PolymerElements/iron-meta.git",
+  "_source": "git://github.com/polymerelements/iron-meta.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-meta"
+  "_originalSource": "polymerelements/iron-meta"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-styles/.bower.json b/dashboard-ui/bower_components/paper-styles/.bower.json
index 91d22f3562..04e2128c81 100644
--- a/dashboard-ui/bower_components/paper-styles/.bower.json
+++ b/dashboard-ui/bower_components/paper-styles/.bower.json
@@ -34,7 +34,7 @@
     "tag": "v1.0.11",
     "commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c"
   },
-  "_source": "git://github.com/polymerelements/paper-styles.git",
+  "_source": "git://github.com/PolymerElements/paper-styles.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/paper-styles"
+  "_originalSource": "PolymerElements/paper-styles"
 }
\ No newline at end of file
diff --git a/dashboard-ui/collections.html b/dashboard-ui/collections.html
index e8fd4402a7..e91dc94146 100644
--- a/dashboard-ui/collections.html
+++ b/dashboard-ui/collections.html
@@ -4,21 +4,7 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="boxsetsPage" data-role="page" class="page libraryPage backdropPage collectionEditorPage" data-backdroptype="movie,boxset">
-
-        <div class="libraryViewNav scopedLibraryViewNav movieTabs">
-            <a href="moviesrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-            <a href="movies.html"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
-            <a href="movietrailers.html" class="movieTrailersTab"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
-            <a href="#" class="ui-btn-active"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
-            <a href="moviegenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-            <a href="moviepeople.html" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-            <a href="moviestudios.html" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
-        </div>
-
-        <div class="libraryViewNav scopedLibraryViewNav collectionTabs">
-            <a href="#" class="ui-btn-active">${TabCollections}</a>
-        </div>
+    <div id="boxsetsPage" data-role="page" class="page libraryPage backdropPage collectionEditorPage noSecondaryNavPage" data-backdroptype="movie,boxset" data-require="scripts/moviecollections">
 
         <div data-role="content">
             <div class="viewSettings">
@@ -27,7 +13,7 @@
                     &nbsp;
                 </div>
             </div>
-            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+            <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
             <div class="noItemsMessage" style="display: none; text-align: center;">
                 <p>${MessageNoCollectionsAvailable}</p>
             </div>
@@ -35,7 +21,7 @@
             <paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
         </div>
 
-        <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
+        <div data-role="panel" class="viewPanel collectionViewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
             <form>
 
                 <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
@@ -47,8 +33,8 @@
                 <div class="tabView viewTab">
 
                     <div>
-                        <label for="selectView">${LabelView}</label>
-                        <select id="selectView">
+                        <label for="selectCollectionView">${LabelView}</label>
+                        <select id="selectCollectionView" class="selectView">
                             <option value="Poster">${OptionPoster}</option>
                             <option value="PosterCard">${OptionPosterCard}</option>
                             <option value="List">${OptionList}</option>
@@ -58,35 +44,35 @@
                     </div>
                     <br />
                     <div>
-                        <label for="selectPageSize">${LabelPageSize}</label>
-                        <select id="selectPageSize"></select>
+                        <label for="selectCollectionPageSize">${LabelPageSize}</label>
+                        <select id="selectCollectionPageSize" class="selectPageSize"></select>
                     </div>
 
                 </div>
                 <div class="tabFilter viewTab">
                     <fieldset data-role="controlgroup">
                         <legend>${HeaderFilters}</legend>
-                        <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
-                        <label for="chkIsFavorite">${OptionFavorite}</label>
+                        <input class="chkStandardFilter chkIsFavorite" type="checkbox" id="chkIsFavoriteCollection" data-filter="IsFavorite" data-mini="true">
+                        <label for="chkIsFavoriteCollection">${OptionFavorite}</label>
 
-                        <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
-                        <label for="chkLikes">${OptionLikes}</label>
+                        <input class="chkStandardFilter chkLikes" type="checkbox" id="chkLikesCollection" data-filter="Likes" data-mini="true">
+                        <label for="chkLikesCollection">${OptionLikes}</label>
 
-                        <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
-                        <label for="chkDislikes">${OptionDislikes}</label>
+                        <input class="chkStandardFilter chkDislikes" type="checkbox" id="chkDislikesCollection" data-filter="Dislikes" data-mini="true">
+                        <label for="chkDislikesCollection">${OptionDislikes}</label>
                     </fieldset>
 
                     <fieldset data-role="controlgroup">
                         <legend>${LabelFeatures}</legend>
 
-                        <input class="chkFeatureFilter" type="checkbox" name="chkTrailer" id="chkTrailer" data-mini="true">
-                        <label for="chkTrailer">${OptionHasTrailer}</label>
+                        <input class="chkFeatureFilter chkTrailer" type="checkbox" id="chkTrailerCollection" data-mini="true">
+                        <label for="chkTrailerCollection">${OptionHasTrailer}</label>
 
-                        <input class="chkFeatureFilter" type="checkbox" name="chkThemeSong" id="chkThemeSong" data-mini="true">
-                        <label for="chkThemeSong">${OptionHasThemeSong}</label>
+                        <input class="chkFeatureFilter chkThemeSong" type="checkbox" id="chkThemeSongCollection" data-mini="true">
+                        <label for="chkThemeSongCollection">${OptionHasThemeSong}</label>
 
-                        <input class="chkFeatureFilter" type="checkbox" name="chkThemeVideo" id="chkThemeVideo" data-mini="true">
-                        <label for="chkThemeVideo">${OptionHasThemeVideo}</label>
+                        <input class="chkFeatureFilter chkThemeVideo" type="checkbox" id="chkThemeVideoCollection" data-mini="true">
+                        <label for="chkThemeVideoCollection">${OptionHasThemeVideo}</label>
 
                     </fieldset>
 
@@ -97,14 +83,14 @@
                             ${HeaderSortBy}
                         </legend>
 
-                        <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
-                        <label for="radioSortName">${OptionNameSort}</label>
+                        <input class="radioSortBy defaultSort" type="radio" id="radioSortNameCollection" value="on" checked="checked" data-sortby="SortName" data-mini="true">
+                        <label for="radioSortNameCollection">${OptionNameSort}</label>
 
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating" data-mini="true">
-                        <label for="radioCommunityRating">${OptionCommunityRating}</label>
+                        <input class="radioSortBy radioCommunityRating" type="radio" id="radioCommunityRatingCollection" value="off" data-sortby="CommunityRating" data-mini="true">
+                        <label for="radioCommunityRatingCollection">${OptionCommunityRating}</label>
 
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
-                        <label for="radioDateCreated">${OptionDateAdded}</label>
+                        <input class="radioSortBy radioDateCreated" type="radio" id="radioDateCreatedCollection" value="off" data-sortby="DateCreated" data-mini="true">
+                        <label for="radioDateCreatedCollection">${OptionDateAdded}</label>
                     </fieldset>
 
                     <fieldset data-role="controlgroup">
@@ -112,19 +98,15 @@
                             ${HeaderSortOrder}
                         </legend>
 
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
-                        <label for="radioAscending">${OptionAscending}</label>
+                        <input class="radioSortOrder radioAscending" type="radio" id="radioAscendingCollection" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
+                        <label for="radioAscendingCollection">${OptionAscending}</label>
 
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
-                        <label for="radioDescending">${OptionDescending}</label>
+                        <input class="radioSortOrder radioDescending" type="radio" id="radioDescendingCollection" value="off" data-sortorder="Descending" data-mini="true">
+                        <label for="radioDescendingCollection">${OptionDescending}</label>
                     </fieldset>
                 </div>
             </form>
         </div>
-
-        <script type="text/javascript">
-            $('.newCollectionForm').off('submit', BoxSetEditor.onNewCollectionSubmit).on('submit', BoxSetEditor.onNewCollectionSubmit);
-        </script>
     </div>
 </body>
 </html>
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 3b42764b5e..4cabf8f9a1 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -15,12 +15,6 @@
             </div>
         </div>
 
-        <div id="boxsetTabs" class="itemTabs" style="display: none;">
-            <div class="libraryViewNav scopedLibraryViewNav">
-                <a href="collections.html" class="ui-btn-active">${TabCollections}</a>
-            </div>
-        </div>
-
         <div class="itemTabs homeTabs" style="display: none;">
             <div class="libraryViewNav scopedLibraryViewNav">
                 <a href="index.html" class="lnkHomeHome"><iron-icon icon="home"></iron-icon>${TabHome}</a>
@@ -33,12 +27,12 @@
         <div id="movieTabs" class="itemTabs" style="display: none;">
             <div class="libraryViewNav scopedLibraryViewNav">
                 <a href="moviesrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-                <a href="movies.html" class="lnkMovies"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
-                <a href="movietrailers.html" class="movieTrailersTab lnkMovieTrailers"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
-                <a href="collections.html?context=movies" class="lnkCollections"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
-                <a href="moviegenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-                <a href="moviepeople.html" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-                <a href="moviestudios.html" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
+                <a href="moviesrecommended.html?tab=1" class="lnkMovies"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
+                <a href="moviesrecommended.html?tab=2" class="movieTrailersTab lnkMovieTrailers"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
+                <a href="moviesrecommended.html?tab=3" class="lnkCollections"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
+                <a href="moviesrecommended.html?tab=4"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
+                <a href="moviesrecommended.html?tab=5" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
+                <a href="moviesrecommended.html?tab=6" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
             </div>
         </div>
         <div class="itemTabs photoTabs" style="display: none;">
diff --git a/dashboard-ui/moviegenres.html b/dashboard-ui/moviegenres.html
deleted file mode 100644
index 499a4d6fb5..0000000000
--- a/dashboard-ui/moviegenres.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="movieGenresPage" data-role="page" class="page libraryPage" data-require="scripts/moviegenres">
-
-        <div class="libraryViewNav scopedLibraryViewNav">
-            <a href="moviesrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-            <a href="movies.html"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
-            <a href="movietrailers.html" class="movieTrailersTab"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
-            <a href="collections.html?context=movies"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
-            <a href="#" class="ui-btn-active"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-            <a href="moviepeople.html" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-            <a href="moviestudios.html" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
-        </div>
-
-        <div data-role="content">
-            <div class="viewSettings">
-                <div class="listTopPaging">
-                </div>
-            </div>
-            <div id="items" class="itemsContainer paddedItemsContainer"></div>
-        </div>
-
-        <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
-            <form>
-
-                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
-                </div>
-
-                <div class="tabView viewTab">
-
-                    <div>
-                        <label for="selectView">${LabelView}</label>
-                        <select id="selectView">
-                            <option value="Poster">${OptionPoster}</option>
-                            <option value="Thumb">${OptionThumb}</option>
-                            <option value="ThumbCard">${OptionThumbCard}</option>
-                        </select>
-                    </div>
-                    <br />
-                    <div>
-                        <label for="selectPageSize">${LabelPageSize}</label>
-                        <select id="selectPageSize"></select>
-                    </div>
-
-                </div>
-                <div class="tabFilter viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderFilters}
-                        </legend>
-                        <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
-                        <label for="chkIsFavorite">${OptionFavorite}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
-                        <label for="chkLikes">${OptionLikes}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
-                        <label for="chkDislikes">${OptionDislikes}</label>
-                    </fieldset>
-
-                </div>
-            </form>
-        </div>
-
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/moviepeople.html b/dashboard-ui/moviepeople.html
deleted file mode 100644
index 1e2c5d21af..0000000000
--- a/dashboard-ui/moviepeople.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="moviePeoplePage" data-role="page" class="page libraryPage" data-require="scripts/moviepeople">
-
-        <div class="libraryViewNav scopedLibraryViewNav">
-            <a href="moviesrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-            <a href="movies.html"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
-            <a href="movietrailers.html" class="movieTrailersTab"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
-            <a href="collections.html?context=movies"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
-            <a href="moviegenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-            <a href="#" class="ui-btn-active"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-            <a href="moviestudios.html" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
-        </div>
-
-        <div class="alphabetPicker">
-        </div>
-        <div data-role="content">
-            <div class="viewSettings">
-                <div class="listTopPaging">
-                </div>
-            </div>
-            <div id="items" class="itemsContainer paddedItemsContainer"></div>
-        </div>
-
-        <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
-            <form>
-
-                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
-                </div>
-
-                <div class="tabFilter viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderFilters}
-                        </legend>
-                        <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
-                        <label for="chkIsFavorite">${OptionFavorite}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
-                        <label for="chkLikes">${OptionLikes}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
-                        <label for="chkDislikes">${OptionDislikes}</label>
-                    </fieldset>
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderPersonTypes}
-                        </legend>
-                        <input class="chkPersonTypeFilter" type="checkbox" name="chkActor" id="chkActor" data-filter="Actor" data-mini="true">
-                        <label for="chkActor">${OptionActors}</label>
-
-                        <input class="chkPersonTypeFilter" type="checkbox" name="chkDirector" id="chkDirector" data-filter="Director" data-mini="true">
-                        <label for="chkDirector">${OptionDirectors}</label>
-
-                        <input class="chkPersonTypeFilter" type="checkbox" name="chkProducer" id="chkProducer" data-filter="Producer" data-mini="true">
-                        <label for="chkProducer">${OptionProducers}</label>
-
-                        <input class="chkPersonTypeFilter" type="checkbox" name="chkWriter" id="chkWriter" data-filter="Writer" data-mini="true">
-                        <label for="chkWriter">${OptionWriters}</label>
-                    </fieldset>
-                </div>
-            </form>
-        </div>
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
deleted file mode 100644
index f4be8eae48..0000000000
--- a/dashboard-ui/movies.html
+++ /dev/null
@@ -1,231 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="moviesPage" data-role="page" class="page libraryPage collectionEditorPage" data-require="scripts/movies,scripts/queryfilters,jqmicons">
-
-        <div class="libraryViewNav scopedLibraryViewNav">
-            <a href="moviesrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-            <a href="#" class="ui-btn-active"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
-            <a href="movietrailers.html" class="movieTrailersTab"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
-            <a href="collections.html?context=movies"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
-            <a href="moviegenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-            <a href="moviepeople.html" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-            <a href="moviestudios.html" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
-        </div>
-
-        <div class="alphabetPicker">
-        </div>
-        <div data-role="content">
-            <div class="viewSettings">
-                <div class="listTopPaging">
-                </div>
-
-                <div class="selectionCommands" style="display: none;">
-                    <div class="selectionCommandsControlGroup">
-                        <button class="btnAddToPlaylist" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToPlaylist}">${ButtonAddToPlaylist}</button>
-                        <button class="btnMergeVersions" data-mini="true" data-icon="recycle" data-inline="true" title="${ButtonGroupVersions}">${ButtonGroupVersions}</button>
-                        <button class="btnAddToCollection" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToCollection}">${ButtonAddToCollection}</button>
-                        <button class="btnSyncItems" data-mini="true" data-icon="refresh" data-inline="true" title="${ButtonSync}">${ButtonSync}</button>
-                    </div>
-                </div>
-            </div>
-            <div id="items" class="itemsContainer paddedItemsContainer"></div>
-        </div>
-
-        <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
-            <form>
-
-                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabSort">${TabSort}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
-                </div>
-
-                <div class="tabView viewTab">
-
-                    <div>
-                        <label for="selectView">${LabelView}</label>
-                        <select id="selectView">
-                            <option value="Banner">${OptionBanner}</option>
-                            <option value="List">${OptionList}</option>
-                            <option value="Poster">${OptionPoster}</option>
-                            <option value="PosterCard">${OptionPosterCard}</option>
-                            <option value="Thumb">${OptionThumb}</option>
-                            <option value="ThumbCard">${OptionThumbCard}</option>
-                            <option value="Timeline">${OptionTimeline}</option>
-                        </select>
-                    </div>
-                    <br />
-                    <div>
-                        <label for="selectPageSize">${LabelPageSize}</label>
-                        <select id="selectPageSize"></select>
-                    </div>
-
-                </div>
-                <div class="tabFilter viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderFilters}
-                        </legend>
-                        <input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-filter="IsPlayed" data-mini="true">
-                        <label for="chkPlayed">${OptionPlayed}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-filter="IsUnPlayed" data-mini="true">
-                        <label for="chkUnplayed">${OptionUnplayed}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-filter="IsResumable" data-mini="true">
-                        <label for="chkResumable">${OptionResumable}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
-                        <label for="chkIsFavorite">${OptionFavorite}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
-                        <label for="chkLikes">${OptionLikes}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
-                        <label for="chkDislikes">${OptionDislikes}</label>
-                    </fieldset>
-                    <br />
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true">
-                        <h2>${HeaderFeatures}</h2>
-
-                        <div data-role="controlgroup">
-
-                            <input class="chkFeatureFilter" type="checkbox" name="chkSubtitle" id="chkSubtitle" data-mini="true">
-                            <label for="chkSubtitle">${OptionHasSubtitles}</label>
-
-                            <input class="chkFeatureFilter" type="checkbox" name="chkTrailer" id="chkTrailer" data-mini="true">
-                            <label for="chkTrailer">${OptionHasTrailer}</label>
-
-                            <input class="chkFeatureFilter" type="checkbox" name="chkSpecialFeature" id="chkSpecialFeature" data-mini="true">
-                            <label for="chkSpecialFeature">${OptionHasSpecialFeatures}</label>
-
-                            <input class="chkFeatureFilter" type="checkbox" name="chkThemeSong" id="chkThemeSong" data-mini="true">
-                            <label for="chkThemeSong">${OptionHasThemeSong}</label>
-
-                            <input class="chkFeatureFilter" type="checkbox" name="chkThemeVideo" id="chkThemeVideo" data-mini="true">
-                            <label for="chkThemeVideo">${OptionHasThemeVideo}</label>
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters">
-                        <h2>${HeaderGenres}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters">
-                        <h2>${HeaderParentalRatings}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters">
-                        <h2>${HeaderTags}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true">
-                        <h2>${HeaderVideoTypes}</h2>
-
-                        <div data-role="controlgroup">
-
-                            <input class="chkVideoTypeFilter" type="checkbox" name="chkBluray" id="chkBluray" data-filter="Bluray" data-mini="true">
-                            <label for="chkBluray">${OptionBluray}</label>
-
-                            <input class="chkVideoTypeFilter" type="checkbox" name="chkDvd" id="chkDvd" data-filter="Dvd" data-mini="true">
-                            <label for="chkDvd">${OptionDvd}</label>
-
-                            <input class="chkVideoTypeFilter" type="checkbox" name="chkIso" id="chkIso" data-filter="Iso" data-mini="true">
-                            <label for="chkIso">${OptionIso}</label>
-
-                            <input class="chkHDFilter" type="checkbox" name="chkHD" id="chkHD" data-filter="IsHD" data-mini="true">
-                            <label for="chkHD">${OptionIsHD}</label>
-
-                            <input class="chkSDFilter" type="checkbox" name="chkSD" id="chkSD" data-filter="IsHD" data-mini="true">
-                            <label for="chkSD">${OptionIsSD}</label>
-
-                            <input class="chk3DFilter" type="checkbox" name="chk3D" id="chk3D" data-filter="Digital3D,Sbs3D" data-mini="true">
-                            <label for="chk3D">${Option3D}</label>
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters">
-                        <h2>${HeaderYears}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                </div>
-                <div class="tabSort viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderSortBy}
-                        </legend>
-
-                        <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
-                        <label for="radioSortName">${OptionNameSort}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioBudget" value="off" data-sortby="Budget,SortName" data-mini="true">
-                        <label for="radioBudget">${OptionBudget}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating,SortName" data-mini="true">
-                        <label for="radioCommunityRating">${OptionImdbRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCriticRating" value="off" data-sortby="CriticRating,SortName" data-mini="true">
-                        <label for="radioCriticRating">${OptionCriticRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,SortName" data-mini="true">
-                        <label for="radioDateCreated">${OptionDateAdded}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,SortName" data-mini="true">
-                        <label for="radioDatePlayed">${OptionDatePlayed}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioMetascore" value="off" data-sortby="Metascore,SortName" data-mini="true">
-                        <label for="radioMetascore">${OptionMetascore}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioContentRating" value="off" data-sortby="OfficialRating,SortName" data-mini="true">
-                        <label for="radioContentRating">${OptionParentalRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,SortName" data-mini="true">
-                        <label for="radioPlayCount">${OptionPlayCount}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,SortName" data-mini="true">
-                        <label for="radioPremiereDate">${OptionReleaseDate}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioRevenue" value="off" data-sortby="Revenue,SortName" data-mini="true">
-                        <label for="radioRevenue">${OptionRevenue}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime,SortName" data-mini="true">
-                        <label for="radioRuntime">${OptionRuntime}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioVideoBitRate" value="off" data-sortby="VideoBitRate,SortName" data-mini="true">
-                        <label for="radioVideoBitRate">${OptionVideoBitrate}</label>
-                    </fieldset>
-
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderSortOrder}
-                        </legend>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
-                        <label for="radioAscending">${OptionAscending}</label>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
-                        <label for="radioDescending">${OptionDescending}</label>
-                    </fieldset>
-                </div>
-            </form>
-        </div>
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/moviesrecommended.html b/dashboard-ui/moviesrecommended.html
index df1c70cb53..71716cbf5d 100644
--- a/dashboard-ui/moviesrecommended.html
+++ b/dashboard-ui/moviesrecommended.html
@@ -4,47 +4,654 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="moviesRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paperbuttonstyle">
+    <div id="moviesRecommendedPage" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="movie" data-require="jqmicons,scripts/moviesrecommended,paperbuttonstyle,scripts/moviestudios,scripts/moviepeople,scripts/moviegenres,scripts/movietrailers,scripts/queryfilters,scripts/movies,scripts/moviecollections">
 
-        <div class="libraryViewNav scopedLibraryViewNav">
-            <a href="#" class="ui-btn-active"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-            <a href="movies.html"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
-            <a href="movietrailers.html" class="movieTrailersTab"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
-            <a href="collections.html?context=movies"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
-            <a href="moviegenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-            <a href="moviepeople.html" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-            <a href="moviestudios.html" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
+        <div class="libraryViewNav libraryViewNavWithMinHeight">
+            <paper-tabs style="display:none;min-width:800px;margin:auto;">
+                <paper-tab><iron-icon icon="info"></iron-icon>${TabSuggestions}</paper-tab>
+                <paper-tab><iron-icon icon="local-movies"></iron-icon>${TabMovies}</paper-tab>
+                <paper-tab class="movieTrailersTab"><iron-icon icon="movie"></iron-icon>${TabTrailers}</paper-tab>
+                <paper-tab><iron-icon icon="video-library"></iron-icon>${TabCollections}</paper-tab>
+                <paper-tab><iron-icon icon="video-library"></iron-icon>${TabGenres}</paper-tab>
+                <paper-tab class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</paper-tab>
+                <paper-tab class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</paper-tab>
+            </paper-tabs>
+            <div class="legacyTabs scopedLibraryViewNav" style="display:none;">
+                <a href="moviesrecommended.html" class="ui-btn-active"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
+                <a href="moviesrecommended.html?tab=1"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
+                <a href="moviesrecommended.html?tab=2" class="movieTrailersTab"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
+                <a href="moviesrecommended.html?tab=3"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
+                <a href="moviesrecommended.html?tab=4"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
+                <a href="moviesrecommended.html?tab=5" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
+                <a href="moviesrecommended.html?tab=6" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
+            </div>
+        </div>
+
+        <div class="pageBackground"></div>
+
+        <div class="ehsContent fullWidth">
+            <neon-animated-pages>
+                <neon-animatable>
+                    <div class="pageTabContent" data-index="0">
+                        <div id="resumableSection" style="display: none;" class="homePageSection">
+                            <div>
+                                <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
+                                <paper-button raised class="submit mini categorySyncButton" data-category="Resume"><iron-icon icon="refresh"></iron-icon><span>${ButtonSync}</span></paper-button>
+                            </div>
+
+                            <div id="resumableItems" class="itemsContainer">
+                            </div>
+                        </div>
+
+                        <div class="homePageSection">
+                            <div>
+                                <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
+                                <paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="refresh"></iron-icon><span>${ButtonSync}</span></paper-button>
+                            </div>
+
+                            <div id="recentlyAddedItems" class="itemsContainer">
+                            </div>
+                        </div>
+
+                        <div class="recommendations homePageSection">
+                        </div>
+                        <div class="noItemsMessage" style="display: none;">
+                            <br />
+                            <p>${MessageNoMovieSuggestionsAvailable}</p>
+                        </div>
+                    </div>
+                </neon-animatable>
+                <neon-animatable>
+                    <div class="pageTabContent" data-index="1">
+                        <div class="alphabetPicker">
+                        </div>
+                        <div class="viewSettings">
+                            <div class="listTopPaging">
+                            </div>
+
+                            <div class="selectionCommands" style="display: none;">
+                                <div class="selectionCommandsControlGroup">
+                                    <button class="btnAddToPlaylist" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToPlaylist}">${ButtonAddToPlaylist}</button>
+                                    <button class="btnMergeVersions" data-mini="true" data-icon="recycle" data-inline="true" title="${ButtonGroupVersions}">${ButtonGroupVersions}</button>
+                                    <button class="btnAddToCollection" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToCollection}">${ButtonAddToCollection}</button>
+                                    <button class="btnSyncItems" data-mini="true" data-icon="refresh" data-inline="true" title="${ButtonSync}">${ButtonSync}</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="itemsContainer"></div>
+                    </div>
+                </neon-animatable>
+                <neon-animatable>
+                    <div class="pageTabContent" data-index="2">
+                        <div class="alphabetPicker">
+                        </div>
+                        <div class="viewSettings">
+                            <div class="listTopPaging">
+                            </div>
+                            <button class="btnTrailerReel" type="button" data-icon="action" data-inline="true" data-mini="true">${ButtonTrailerReel}</button>
+                        </div>
+                        <div class="itemsContainer"></div>
+                        <p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
+                    </div>
+                </neon-animatable>
+                <neon-animatable>
+                    <div class="pageTabContent" data-index="3">
+                        <div class="viewSettings">
+
+                            <div class="listTopPaging">
+                                &nbsp;
+                            </div>
+                        </div>
+                        <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+                        <div class="noItemsMessage" style="display: none; text-align: center;">
+                            <p>${MessageNoCollectionsAvailable}</p>
+                        </div>
+
+                        <paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
+                    </div>
+                </neon-animatable>
+                <neon-animatable>
+                    <div class="pageTabContent" data-index="4">
+                        <div class="viewSettings">
+                            <div class="listTopPaging">
+                            </div>
+                        </div>
+                        <div class="itemsContainer"></div>
+                    </div>
+                </neon-animatable>
+                <neon-animatable>
+                    <div class="pageTabContent" data-index="5">
+                        <div class="alphabetPicker">
+                        </div>
+                        <div class="viewSettings">
+                            <div class="listTopPaging">
+                            </div>
+                        </div>
+                        <div class="itemsContainer"></div>
+                    </div>
+                </neon-animatable>
+                <neon-animatable>
+                    <div class="pageTabContent" data-index="6">
+                        <div class="viewSettings">
+                            <div class="listTopPaging">
+                            </div>
+                        </div>
+                        <div class="itemsContainer" style="text-align:center;"></div>
+                    </div>
+                </neon-animatable>
+            </neon-animated-pages>
+        </div>
+
+        <div data-role="panel" class="viewPanel collectionViewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
+            <form>
+
+                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabSort">${TabSort}</a>
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
+                </div>
+
+                <div class="tabView viewTab">
+
+                    <div>
+                        <label for="selectCollectionView">${LabelView}</label>
+                        <select id="selectCollectionView" class="selectView">
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="PosterCard">${OptionPosterCard}</option>
+                            <option value="List">${OptionList}</option>
+                            <option value="Thumb">${OptionThumb}</option>
+                            <option value="ThumbCard">${OptionThumbCard}</option>
+                        </select>
+                    </div>
+                    <br />
+                    <div>
+                        <label for="selectCollectionPageSize">${LabelPageSize}</label>
+                        <select id="selectCollectionPageSize" class="selectPageSize"></select>
+                    </div>
+
+                </div>
+                <div class="tabFilter viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>${HeaderFilters}</legend>
+                        <input class="chkStandardFilter chkIsFavorite" type="checkbox" id="chkIsFavoriteCollection" data-filter="IsFavorite" data-mini="true">
+                        <label for="chkIsFavoriteCollection">${OptionFavorite}</label>
+
+                        <input class="chkStandardFilter chkLikes" type="checkbox" id="chkLikesCollection" data-filter="Likes" data-mini="true">
+                        <label for="chkLikesCollection">${OptionLikes}</label>
+
+                        <input class="chkStandardFilter chkDislikes" type="checkbox" id="chkDislikesCollection" data-filter="Dislikes" data-mini="true">
+                        <label for="chkDislikesCollection">${OptionDislikes}</label>
+                    </fieldset>
+
+                    <fieldset data-role="controlgroup">
+                        <legend>${LabelFeatures}</legend>
+
+                        <input class="chkFeatureFilter chkTrailer" type="checkbox" id="chkTrailerCollection" data-mini="true">
+                        <label for="chkTrailerCollection">${OptionHasTrailer}</label>
+
+                        <input class="chkFeatureFilter chkThemeSong" type="checkbox" id="chkThemeSongCollection" data-mini="true">
+                        <label for="chkThemeSongCollection">${OptionHasThemeSong}</label>
+
+                        <input class="chkFeatureFilter chkThemeVideo" type="checkbox" id="chkThemeVideoCollection" data-mini="true">
+                        <label for="chkThemeVideoCollection">${OptionHasThemeVideo}</label>
+
+                    </fieldset>
+
+                </div>
+                <div class="tabSort viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderSortBy}
+                        </legend>
+
+                        <input class="radioSortBy defaultSort" type="radio" id="radioSortNameCollection" value="on" checked="checked" data-sortby="SortName" data-mini="true">
+                        <label for="radioSortNameCollection">${OptionNameSort}</label>
+
+                        <input class="radioSortBy radioCommunityRating" type="radio" id="radioCommunityRatingCollection" value="off" data-sortby="CommunityRating" data-mini="true">
+                        <label for="radioCommunityRatingCollection">${OptionCommunityRating}</label>
+
+                        <input class="radioSortBy radioDateCreated" type="radio" id="radioDateCreatedCollection" value="off" data-sortby="DateCreated" data-mini="true">
+                        <label for="radioDateCreatedCollection">${OptionDateAdded}</label>
+                    </fieldset>
+
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderSortOrder}
+                        </legend>
+
+                        <input class="radioSortOrder radioAscending" type="radio" id="radioAscendingCollection" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
+                        <label for="radioAscendingCollection">${OptionAscending}</label>
+
+                        <input class="radioSortOrder radioDescending" type="radio" id="radioDescendingCollection" value="off" data-sortorder="Descending" data-mini="true">
+                        <label for="radioDescendingCollection">${OptionDescending}</label>
+                    </fieldset>
+                </div>
+            </form>
+        </div>
+        <div data-role="panel" class="viewPanel movieViewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
+            <form>
+
+                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabSort">${TabSort}</a>
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
+                </div>
+
+                <div class="tabView viewTab">
+
+                    <div>
+                        <label for="selectMovieView">${LabelView}</label>
+                        <select id="selectMovieView" class="selectView">
+                            <option value="Banner">${OptionBanner}</option>
+                            <option value="List">${OptionList}</option>
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="PosterCard">${OptionPosterCard}</option>
+                            <option value="Thumb">${OptionThumb}</option>
+                            <option value="ThumbCard">${OptionThumbCard}</option>
+                            <option value="Timeline">${OptionTimeline}</option>
+                        </select>
+                    </div>
+                    <br />
+                    <div>
+                        <label for="selectMoviePageSize">${LabelPageSize}</label>
+                        <select id="selectMoviePageSize" class="selectPageSize"></select>
+                    </div>
+
+                </div>
+                <div class="tabFilter viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderFilters}
+                        </legend>
+                        <input class="chkStandardFilter" type="checkbox" id="chkPlayedMovie" data-filter="IsPlayed" data-mini="true">
+                        <label for="chkPlayedMovie">${OptionPlayed}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkUnplayedMovie" data-filter="IsUnPlayed" data-mini="true">
+                        <label for="chkUnplayedMovie">${OptionUnplayed}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkResumableMovie" data-filter="IsResumable" data-mini="true">
+                        <label for="chkResumableMovie">${OptionResumable}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteMovie" data-filter="IsFavorite" data-mini="true">
+                        <label for="chkIsFavoriteMovie">${OptionFavorite}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkLikesMovie" data-filter="Likes" data-mini="true">
+                        <label for="chkLikesMovie">${OptionLikes}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkDislikesMovie" data-filter="Dislikes" data-mini="true">
+                        <label for="chkDislikesMovie">${OptionDislikes}</label>
+                    </fieldset>
+                    <br />
+
+                    <div data-role="collapsible" data-collapsed="true" data-mini="true">
+                        <h2>${HeaderFeatures}</h2>
+
+                        <div data-role="controlgroup">
+
+                            <input class="chkFeatureFilter chkSubtitle" type="checkbox" id="chkSubtitleMovie" data-mini="true">
+                            <label for="chkSubtitleMovie">${OptionHasSubtitles}</label>
+
+                            <input class="chkFeatureFilter chkTrailer" type="checkbox" id="chkTrailerMovie" data-mini="true">
+                            <label for="chkTrailerMovie">${OptionHasTrailer}</label>
+
+                            <input class="chkFeatureFilter chkSpecialFeature" type="checkbox" id="chkSpecialFeatureMovie" data-mini="true">
+                            <label for="chkSpecialFeatureMovie">${OptionHasSpecialFeatures}</label>
+
+                            <input class="chkFeatureFilter chkThemeSong" type="checkbox" id="chkThemeSongMovie" data-mini="true">
+                            <label for="chkThemeSongMovie">${OptionHasThemeSong}</label>
+
+                            <input class="chkFeatureFilter chkThemeVideo" type="checkbox" id="chkThemeVideoMovie" data-mini="true">
+                            <label for="chkThemeVideoMovie">${OptionHasThemeVideo}</label>
+                        </div>
+                    </div>
+
+                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters">
+                        <h2>${HeaderGenres}</h2>
+
+                        <div class="filterOptions">
+                        </div>
+                    </div>
+
+                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters">
+                        <h2>${HeaderParentalRatings}</h2>
+
+                        <div class="filterOptions">
+                        </div>
+                    </div>
+
+                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters">
+                        <h2>${HeaderTags}</h2>
+
+                        <div class="filterOptions">
+                        </div>
+                    </div>
+
+                    <div data-role="collapsible" data-collapsed="true" data-mini="true">
+                        <h2>${HeaderVideoTypes}</h2>
+
+                        <div data-role="controlgroup">
+
+                            <input class="chkVideoTypeFilter chkBluray" type="checkbox" id="chkBlurayMovie" data-filter="Bluray" data-mini="true">
+                            <label for="chkBlurayMovie">${OptionBluray}</label>
+
+                            <input class="chkVideoTypeFilter chkDvd" type="checkbox" id="chkDvdMovie" data-filter="Dvd" data-mini="true">
+                            <label for="chkDvdMovie">${OptionDvd}</label>
+
+                            <input class="chkVideoTypeFilter chkIso" type="checkbox" id="chkIsoMovie" data-filter="Iso" data-mini="true">
+                            <label for="chkIsoMovie">${OptionIso}</label>
+
+                            <input class="chkHDFilter IsHD" type="checkbox" id="chkHDMovie" data-filter="IsHD" data-mini="true">
+                            <label for="chkHDMovie">${OptionIsHD}</label>
+
+                            <input class="chkSDFilter IsHD" type="checkbox" id="chkSDMovie" data-filter="IsHD" data-mini="true">
+                            <label for="chkSDMovie">${OptionIsSD}</label>
+
+                            <input class="chk3DFilter chk3D" type="checkbox" id="chk3DMovie" data-filter="Digital3D,Sbs3D" data-mini="true">
+                            <label for="chk3DMovie">${Option3D}</label>
+                        </div>
+                    </div>
+
+                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters">
+                        <h2>${HeaderYears}</h2>
+
+                        <div class="filterOptions">
+                        </div>
+                    </div>
+
+                </div>
+                <div class="tabSort viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderSortBy}
+                        </legend>
+
+                        <input class="radioSortBy defaultSort radioSortName" type="radio" id="radioSortNameMovie" value="on" checked="checked" data-sortby="SortName" data-mini="true">
+                        <label for="radioSortNameMovie">${OptionNameSort}</label>
+
+                        <input class="radioSortBy radioBudget" type="radio" id="radioBudgetMovie" value="off" data-sortby="Budget,SortName" data-mini="true">
+                        <label for="radioBudgetMovie">${OptionBudget}</label>
+
+                        <input class="radioSortBy radioCommunityRating" type="radio" id="radioCommunityRatingMovie" value="off" data-sortby="CommunityRating,SortName" data-mini="true">
+                        <label for="radioCommunityRatingMovie">${OptionImdbRating}</label>
+
+                        <input class="radioSortBy radioCriticRating" type="radio" id="radioCriticRatingMovie" value="off" data-sortby="CriticRating,SortName" data-mini="true">
+                        <label for="radioCriticRatingMovie">${OptionCriticRating}</label>
+
+                        <input class="radioSortBy radioDateCreated" type="radio" id="radioDateCreatedMovie" value="off" data-sortby="DateCreated,SortName" data-mini="true">
+                        <label for="radioDateCreatedMovie">${OptionDateAdded}</label>
+
+                        <input class="radioSortBy radioDatePlayed" type="radio" id="radioDatePlayedMovie" value="off" data-sortby="DatePlayed,SortName" data-mini="true">
+                        <label for="radioDatePlayedMovie">${OptionDatePlayed}</label>
+
+                        <input class="radioSortBy radioMetascore" type="radio" id="radioMetascoreMovie" value="off" data-sortby="Metascore,SortName" data-mini="true">
+                        <label for="radioMetascoreMovie">${OptionMetascore}</label>
+
+                        <input class="radioSortBy radioContentRating" type="radio" id="radioContentRatingMovie" value="off" data-sortby="OfficialRating,SortName" data-mini="true">
+                        <label for="radioContentRatingMovie">${OptionParentalRating}</label>
+
+                        <input class="radioSortBy radioPlayCount" type="radio" id="radioPlayCountMovie" value="off" data-sortby="PlayCount,SortName" data-mini="true">
+                        <label for="radioPlayCountMovie">${OptionPlayCount}</label>
+
+                        <input class="radioSortBy radioPremiereDate" type="radio" id="radioPremiereDateMovie" value="off" data-sortby="PremiereDate,SortName" data-mini="true">
+                        <label for="radioPremiereDateMovie">${OptionReleaseDate}</label>
+
+                        <input class="radioSortBy radioRevenue" type="radio" id="radioRevenueMovie" value="off" data-sortby="Revenue,SortName" data-mini="true">
+                        <label for="radioRevenueMovie">${OptionRevenue}</label>
+
+                        <input class="radioSortBy radioRuntime" type="radio" id="radioRuntimeMovie" value="off" data-sortby="Runtime,SortName" data-mini="true">
+                        <label for="radioRuntimeMovie">${OptionRuntime}</label>
+
+                        <input class="radioSortBy radioVideoBitRate" type="radio" id="radioVideoBitRateMovie" value="off" data-sortby="VideoBitRate,SortName" data-mini="true">
+                        <label for="radioVideoBitRateMovie">${OptionVideoBitrate}</label>
+                    </fieldset>
+
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderSortOrder}
+                        </legend>
+
+                        <input class="radioSortOrder radioAscending" type="radio" id="radioAscendingMovie" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
+                        <label for="radioAscendingMovie">${OptionAscending}</label>
+
+                        <input class="radioSortOrder radioDescending" type="radio" id="radioDescendingMovie" value="off" data-sortorder="Descending" data-mini="true">
+                        <label for="radioDescendingMovie">${OptionDescending}</label>
+                    </fieldset>
+                </div>
+            </form>
+        </div>
+
+        <div data-role="panel" class="viewPanel trailerViewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
+            <form>
+
+                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabSort">${TabSort}</a>
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
+                </div>
+
+                <div class="tabView viewTab">
+
+                    <div>
+                        <label for="selectTrailerPageSize">${LabelPageSize}</label>
+                        <select id="selectTrailerPageSize" class="selectPageSize"></select>
+                    </div>
+
+                </div>
+                <div class="tabFilter viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderFilters}
+                        </legend>
+                        <input class="chkStandardFilter" type="checkbox" id="chkPlayedTrailer" data-filter="IsPlayed" data-mini="true">
+                        <label for="chkPlayedTrailer">${OptionPlayed}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkUnplayedTrailer" data-filter="IsUnPlayed" data-mini="true">
+                        <label for="chkUnplayedTrailer">${OptionUnplayed}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkResumableTrailer" data-filter="IsResumable" data-mini="true">
+                        <label for="chkResumableTrailer">${OptionResumable}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteTrailer" data-filter="IsFavorite" data-mini="true">
+                        <label for="chkIsFavoriteTrailer">${OptionFavorite}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkLikesTrailer" data-filter="Likes" data-mini="true">
+                        <label for="chkLikesTrailer">${OptionLikes}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkDislikesTrailer" data-filter="Dislikes" data-mini="true">
+                        <label for="chkDislikesTrailer">${OptionDislikes}</label>
+                    </fieldset>
+
+                </div>
+                <div class="tabSort viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderSortBy}
+                        </legend>
+
+                        <input class="radioSortBy defaultSort" type="radio" id="radioSortNameTrailer" value="on" checked="checked" data-sortby="SortName" data-mini="true">
+                        <label for="radioSortNameTrailer">${OptionNameSort}</label>
+
+                        <input class="radioSortBy" type="radio" id="radioCommunityRatingTrailer" value="off" data-sortby="CommunityRating,SortName" data-mini="true">
+                        <label for="radioCommunityRatingTrailer">${OptionImdbRating}</label>
+
+                        <input class="radioSortBy" type="radio" id="radioDateCreatedTrailer" value="off" data-sortby="DateCreated,SortName" data-mini="true">
+                        <label for="radioDateCreatedTrailer">${OptionDateAdded}</label>
+
+                        <input class="radioSortBy" type="radio" id="radioDatePlayedTrailer" value="off" data-sortby="DatePlayed,SortName" data-mini="true">
+                        <label for="radioDatePlayedTrailer">${OptionDatePlayed}</label>
+
+                        <input class="radioSortBy" type="radio" id="radioContentRatingTrailer" value="off" data-sortby="OfficialRating,SortName" data-mini="true">
+                        <label for="radioContentRatingTrailer">${OptionParentalRating}</label>
+
+                        <input class="radioSortBy" type="radio" id="radioPlayCountTrailer" value="off" data-sortby="PlayCount,SortName" data-mini="true">
+                        <label for="radioPlayCountTrailer">${OptionPlayCount}</label>
+
+                        <input class="radioSortBy" type="radio" id="radioPremiereDateTrailer" value="off" data-sortby="PremiereDate,SortName" data-mini="true">
+                        <label for="radioPremiereDateTrailer">${OptionReleaseDate}</label>
+                    </fieldset>
+
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderSortOrder}
+                        </legend>
+
+                        <input class="radioSortOrder radioAscending" type="radio" id="radioAscendingTrailer" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
+                        <label for="radioAscendingTrailer">${OptionAscending}</label>
+
+                        <input class="radioSortOrder radioDescending" type="radio" id="radioDescendingTrailer" value="off" data-sortorder="Descending" data-mini="true">
+                        <label for="radioDescendingTrailer">${OptionDescending}</label>
+                    </fieldset>
+                </div>
+            </form>
+        </div>
+
+        <div data-role="popup" class="popup popupTrailerReel" data-theme="a">
+
+            <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
+                <h3 style="margin: .5em;">${HeaderTrailerReel}</h3>
+            </div>
+
+            <div data-role="content">
+
+                <form class="popupTrailerReelForm" style="min-width: 200px;">
+
+                    <p>${HeaderTrailerReelHelp}</p>
+                    <div>
+                        <label for="chkUnwatchedOnly">${OptionPlayUnwatchedTrailersOnly}</label>
+                        <input id="chkUnwatchedOnly" class="chkUnwatchedOnly" data-mini="true" type="checkbox" />
+                    </div>
+                    <br />
+                    <p>
+                        <button type="submit" data-theme="b" data-icon="check" data-mini="true">
+                            ${ButtonOk}
+                        </button>
+                        <button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
+                            ${ButtonCancel}
+                        </button>
+                    </p>
+                </form>
+            </div>
+
+        </div>
+        <div data-role="panel" class="viewPanel genreViewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
+            <form>
+
+                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
+                </div>
+
+                <div class="tabView viewTab">
+
+                    <div>
+                        <label for="selectGenreView">${LabelView}</label>
+                        <select id="selectGenreView" class="selectView">
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="Thumb">${OptionThumb}</option>
+                            <option value="ThumbCard">${OptionThumbCard}</option>
+                        </select>
+                    </div>
+                    <br />
+                    <div>
+                        <label for="selectGenrePageSize">${LabelPageSize}</label>
+                        <select id="selectGenrePageSize" class="selectPageSize"></select>
+                    </div>
+
+                </div>
+                <div class="tabFilter viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderFilters}
+                        </legend>
+                        <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteGenre" data-filter="IsFavorite" data-mini="true">
+                        <label for="chkIsFavoriteGenre">${OptionFavorite}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkLikesGenre" data-filter="Likes" data-mini="true">
+                        <label for="chkLikesGenre">${OptionLikes}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkDislikesGenre" data-filter="Dislikes" data-mini="true">
+                        <label for="chkDislikesGenre">${OptionDislikes}</label>
+                    </fieldset>
+
+                </div>
+            </form>
+        </div>
+        <div data-role="panel" class="viewPanel peopleViewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
+            <form>
+
+                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
+                </div>
+
+                <div class="tabFilter viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderFilters}
+                        </legend>
+                        <input class="chkStandardFilter" type="checkbox" id="chkIsFavoritePerson" data-filter="IsFavorite" data-mini="true">
+                        <label for="chkIsFavoritePerson">${OptionFavorite}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkLikesPerson" data-filter="Likes" data-mini="true">
+                        <label for="chkLikesPerson">${OptionLikes}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkDislikesPerson" data-filter="Dislikes" data-mini="true">
+                        <label for="chkDislikesPerson">${OptionDislikes}</label>
+                    </fieldset>
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderPersonTypes}
+                        </legend>
+                        <input class="chkPersonTypeFilter" type="checkbox" id="chkActorPerson" data-filter="Actor" data-mini="true">
+                        <label for="chkActorPerson">${OptionActors}</label>
+
+                        <input class="chkPersonTypeFilter" type="checkbox" id="chkDirectorPerson" data-filter="Director" data-mini="true">
+                        <label for="chkDirectorPerson">${OptionDirectors}</label>
+
+                        <input class="chkPersonTypeFilter" type="checkbox" id="chkProducerPerson" data-filter="Producer" data-mini="true">
+                        <label for="chkProducerPerson">${OptionProducers}</label>
+
+                        <input class="chkPersonTypeFilter" type="checkbox" id="chkWriterPerson" data-filter="Writer" data-mini="true">
+                        <label for="chkWriterPerson">${OptionWriters}</label>
+                    </fieldset>
+                </div>
+            </form>
+        </div>
+        <div data-role="panel" class="viewPanel studioViewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
+            <form>
+
+                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
+                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
+                </div>
+
+                <div class="tabView viewTab">
+
+                    <div>
+                        <label for="selectStudioPageSize">${LabelPageSize}</label>
+                        <select id="selectStudioPageSize" class="selectPageSize"></select>
+                    </div>
+
+                </div>
+                <div class="tabFilter viewTab">
+                    <fieldset data-role="controlgroup">
+                        <legend>
+                            ${HeaderFilters}
+                        </legend>
+                        <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteStudio" data-filter="IsFavorite" data-mini="true" />
+                        <label for="chkIsFavoriteStudio">${OptionFavorite}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkLikesStudio" data-filter="Likes" data-mini="true" />
+                        <label for="chkLikesStudio">${OptionLikes}</label>
+
+                        <input class="chkStandardFilter" type="checkbox" id="chkDislikesStudio" data-filter="Dislikes" data-mini="true" />
+                        <label for="chkDislikesStudio">${OptionDislikes}</label>
+                    </fieldset>
+
+                </div>
+            </form>
         </div>
         <div data-role="content">
 
-            <div class="ehsContent">
-                <div id="resumableSection" style="display: none;" class="homePageSection">
-                    <div>
-                        <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
-                        <paper-button raised class="submit mini categorySyncButton" data-category="Resume"><iron-icon icon="refresh"></iron-icon><span>${ButtonSync}</span></paper-button>
-                    </div>
-
-                    <div id="resumableItems" class="itemsContainer">
-                    </div>
-                </div>
-
-                <div class="homePageSection">
-                    <div>
-                        <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
-                        <paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="refresh"></iron-icon><span>${ButtonSync}</span></paper-button>
-                    </div>
-
-                    <div id="recentlyAddedItems" class="itemsContainer">
-                    </div>
-                </div>
-
-                <div class="recommendations homePageSection">
-                </div>
-                <div class="noItemsMessage" style="display: none;">
-                    <br />
-                    <p>${MessageNoMovieSuggestionsAvailable}</p>
-                </div>
-            </div>
         </div>
     </div>
 </body>
diff --git a/dashboard-ui/moviestudios.html b/dashboard-ui/moviestudios.html
deleted file mode 100644
index d1f1081309..0000000000
--- a/dashboard-ui/moviestudios.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="movieStudiosPage" data-role="page" class="page libraryPage" data-require="scripts/moviestudios">
-
-        <div class="libraryViewNav scopedLibraryViewNav">
-            <a href="moviesrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-            <a href="movies.html"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
-            <a href="movietrailers.html" class="movieTrailersTab"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
-            <a href="collections.html?context=movies"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
-            <a href="moviegenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-            <a href="moviepeople.html" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-            <a href="#" class="ui-btn-active"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
-        </div>
-
-        <div data-role="content">
-            <div class="viewSettings">
-                <div class="listTopPaging">
-                </div>
-            </div>
-            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
-        </div>
-
-        <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
-            <form>
-
-                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
-                </div>
-
-                <div class="tabView viewTab">
-
-                    <div>
-                        <label for="selectPageSize">${LabelPageSize}</label>
-                        <select id="selectPageSize"></select>
-                    </div>
-
-                </div>
-                <div class="tabFilter viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderFilters}
-                        </legend>
-                        <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
-                        <label for="chkIsFavorite">${OptionFavorite}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
-                        <label for="chkLikes">${OptionLikes}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
-                        <label for="chkDislikes">${OptionDislikes}</label>
-                    </fieldset>
-
-                </div>
-            </form>
-        </div>
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/movietrailers.html b/dashboard-ui/movietrailers.html
deleted file mode 100644
index c9446526d8..0000000000
--- a/dashboard-ui/movietrailers.html
+++ /dev/null
@@ -1,146 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="movieTrailersPage" data-role="page" class="page libraryPage" data-require="scripts/movietrailers,jqmicons">
-
-        <div class="libraryViewNav scopedLibraryViewNav">
-            <a href="moviesrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-            <a href="movies.html"><iron-icon icon="local-movies"></iron-icon>${TabMovies}</a>
-            <a href="#" class="ui-btn-active"><iron-icon icon="movie"></iron-icon>${TabTrailers}</a>
-            <a href="collections.html?context=movies"><iron-icon icon="video-library"></iron-icon>${TabCollections}</a>
-            <a href="moviegenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-            <a href="moviepeople.html" class="moviePeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-            <a href="moviestudios.html" class="movieStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabStudios}</a>
-        </div>
-
-        <div class="alphabetPicker">
-        </div>
-        <div data-role="content">
-            <div class="viewSettings">
-                <div class="listTopPaging">
-                </div>
-                <button class="btnTrailerReel" type="button" data-icon="action" data-inline="true" data-mini="true">${ButtonTrailerReel}</button>
-            </div>
-            <div id="items" class="itemsContainer paddedItemsContainer"></div>
-            <p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
-        </div>
-
-        <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
-            <form>
-
-                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabSort">${TabSort}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
-                </div>
-
-                <div class="tabView viewTab">
-
-                    <div>
-                        <label for="selectPageSize">${LabelPageSize}</label>
-                        <select id="selectPageSize"></select>
-                    </div>
-
-                </div>
-                <div class="tabFilter viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderFilters}
-                        </legend>
-                        <input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-filter="IsPlayed" data-mini="true">
-                        <label for="chkPlayed">${OptionPlayed}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-filter="IsUnPlayed" data-mini="true">
-                        <label for="chkUnplayed">${OptionUnplayed}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-filter="IsResumable" data-mini="true">
-                        <label for="chkResumable">${OptionResumable}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
-                        <label for="chkIsFavorite">${OptionFavorite}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
-                        <label for="chkLikes">${OptionLikes}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
-                        <label for="chkDislikes">${OptionDislikes}</label>
-                    </fieldset>
-
-                </div>
-                <div class="tabSort viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderSortBy}
-                        </legend>
-
-                        <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
-                        <label for="radioSortName">${OptionNameSort}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating,SortName" data-mini="true">
-                        <label for="radioCommunityRating">${OptionImdbRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,SortName" data-mini="true">
-                        <label for="radioDateCreated">${OptionDateAdded}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,SortName" data-mini="true">
-                        <label for="radioDatePlayed">${OptionDatePlayed}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioContentRating" value="off" data-sortby="OfficialRating,SortName" data-mini="true">
-                        <label for="radioContentRating">${OptionParentalRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,SortName" data-mini="true">
-                        <label for="radioPlayCount">${OptionPlayCount}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,SortName" data-mini="true">
-                        <label for="radioPremiereDate">${OptionReleaseDate}</label>
-                    </fieldset>
-
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderSortOrder}
-                        </legend>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
-                        <label for="radioAscending">${OptionAscending}</label>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
-                        <label for="radioDescending">${OptionDescending}</label>
-                    </fieldset>
-                </div>
-            </form>
-        </div>
-
-        <div data-role="popup" class="popup popupTrailerReel" data-theme="a">
-
-            <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
-                <h3 style="margin: .5em;">${HeaderTrailerReel}</h3>
-            </div>
-
-            <div data-role="content">
-
-                <form class="popupTrailerReelForm" style="min-width: 200px;">
-
-                    <p>${HeaderTrailerReelHelp}</p>
-                    <div>
-                        <label for="chkUnwatchedOnly">${OptionPlayUnwatchedTrailersOnly}</label>
-                        <input id="chkUnwatchedOnly" data-mini="true" type="checkbox" />
-                    </div>
-                    <br />
-                    <p>
-                        <button type="submit" data-theme="b" data-icon="check" data-mini="true">
-                            ${ButtonOk}
-                        </button>
-                        <button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
-                            ${ButtonCancel}
-                        </button>
-                    </p>
-                </form>
-            </div>
-
-        </div>
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/scripts/alphapicker.js b/dashboard-ui/scripts/alphapicker.js
index a88ce4dc99..e3559a2c84 100644
--- a/dashboard-ui/scripts/alphapicker.js
+++ b/dashboard-ui/scripts/alphapicker.js
@@ -35,17 +35,9 @@
         return html;
     }
 
-    $(document).on('pageinitdepends', ".libraryPage", function () {
+    function init(container, picker) {
 
-        var page = this;
-
-        var picker = page.querySelector('.alphabetPicker');
-
-        if (!picker) {
-            return;
-        }
-
-        $('.itemsContainer', page).addClass('itemsContainerWithAlphaPicker');
+        $('.itemsContainer', container).addClass('itemsContainerWithAlphaPicker');
 
         picker.innerHTML = getPickerHtml();
 
@@ -65,6 +57,28 @@
                 Events.trigger(picker, 'alphaclear');
             }
         });
+    }
+
+    $(document).on('pageinitdepends', ".libraryPage", function () {
+
+        var page = this;
+
+        var pickers = page.querySelectorAll('.alphabetPicker');
+
+        if (!pickers.length) {
+            return;
+        }
+
+        if (page.classList.contains('pageWithAbsoluteTabs')) {
+
+            for (var i = 0, length = pickers.length; i < length; i++) {
+                init($(pickers[i]).parents('.pageTabContent'), pickers[i]);
+            }
+
+        } else {
+            init(page, pickers[0]);
+        }
+
     });
 
     $.fn.alphaValue = function (val) {
diff --git a/dashboard-ui/scripts/collectioneditor.js b/dashboard-ui/scripts/collectioneditor.js
new file mode 100644
index 0000000000..5ed1534ba9
--- /dev/null
+++ b/dashboard-ui/scripts/collectioneditor.js
@@ -0,0 +1,219 @@
+(function ($, document) {
+
+    function getNewCollectionPanel(createIfNeeded) {
+
+        var panel = $('.newCollectionPanel');
+
+        if (createIfNeeded && !panel.length) {
+
+            var html = '';
+
+            html += '<div>';
+            html += '<div data-role="panel" class="newCollectionPanel" data-position="right" data-display="overlay" data-position-fixed="true" data-theme="a">';
+            html += '<form class="newCollectionForm">';
+
+            html += '<h3>' + Globalize.translate('HeaderAddToCollection') + '</h3>';
+
+            html += '<div class="fldSelectCollection">';
+            html += '<br />';
+            html += '<label for="selectCollectionToAddTo">' + Globalize.translate('LabelSelectCollection') + '</label>';
+            html += '<select id="selectCollectionToAddTo" data-mini="true"></select>';
+            html += '</div>';
+
+            html += '<div class="newCollectionInfo">';
+            html += '<br />';
+
+            html += '<div>';
+            html += '<label for="txtNewCollectionName">' + Globalize.translate('LabelName') + '</label>';
+            html += '<input type="text" id="txtNewCollectionName" required="required" />';
+            html += '<div class="fieldDescription">' + Globalize.translate('NewCollectionNameExample') + '</div>';
+            html += '</div>';
+
+            html += '<br />';
+
+            html += '<div>';
+            html += '<label for="chkEnableInternetMetadata">' + Globalize.translate('OptionSearchForInternetMetadata') + '</label>';
+            html += '<input type="checkbox" id="chkEnableInternetMetadata" data-mini="true" />';
+            html += '</div>';
+
+            // newCollectionInfo
+            html += '</div>';
+
+            html += '<br />';
+            html += '<p>';
+            html += '<input class="fldSelectedItemIds" type="hidden" />';
+            html += '<button type="submit" data-icon="plus" data-mini="true" data-theme="b">' + Globalize.translate('ButtonSubmit') + '</button>';
+            html += '</p>';
+
+            html += '</form>';
+            html += '</div>';
+            html += '</div>';
+
+            panel = $(html).appendTo(document.body).trigger('create').find('.newCollectionPanel');
+
+            $('#selectCollectionToAddTo', panel).on('change', function () {
+
+                if (this.value) {
+                    $('.newCollectionInfo', panel).hide();
+                    $('#txtNewCollectionName', panel).removeAttr('required');
+                } else {
+                    $('.newCollectionInfo', panel).show();
+                    $('#txtNewCollectionName', panel).attr('required', 'required');
+                }
+            });
+
+            $('.newCollectionForm', panel).off('submit', onSubmit).on('submit', onSubmit);
+        }
+        return panel;
+    }
+
+    function showCollectionPanel(items) {
+
+        var panel = getNewCollectionPanel(true).panel('toggle');
+
+        $('.fldSelectedItemIds', panel).val(items.join(','));
+
+
+        require(['jqmicons']);
+
+        if (items.length) {
+            $('.fldSelectCollection', panel).show();
+            populateCollections(panel);
+        } else {
+            $('.fldSelectCollection', panel).hide();
+            $('#selectCollectionToAddTo', panel).html('').val('').selectmenu('refresh').trigger('change');
+        }
+    }
+
+    function populateCollections(panel) {
+
+        var select = $('#selectCollectionToAddTo', panel);
+
+        $('.newCollectionInfo', panel).hide();
+
+        var options = {
+
+            Recursive: true,
+            IncludeItemTypes: "BoxSet",
+            SortBy: "SortName"
+        };
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+            var html = '';
+
+            html += '<option value="">' + Globalize.translate('OptionNewCollection') + '</option>';
+
+            html += result.Items.map(function (i) {
+
+                return '<option value="' + i.Id + '">' + i.Name + '</option>';
+            });
+
+            select.html(html).val('').selectmenu('refresh').trigger('change');
+
+        });
+    }
+
+    function onSubmit() {
+        Dashboard.showLoadingMsg();
+
+        var panel = getNewCollectionPanel(false);
+
+        var collectionId = $('#selectCollectionToAddTo', panel).val();
+
+        if (collectionId) {
+            addToCollection(panel, collectionId);
+        } else {
+            createCollection(panel);
+        }
+
+        return false;
+    }
+
+    $(document).on('pageinitdepends', ".collectionEditorPage", function () {
+
+        var page = this;
+
+        // The button is created dynamically
+        $(page).on('click', '.btnNewCollection', function () {
+
+            BoxSetEditor.showPanel([]);
+        });
+    });
+
+    function redirectToCollection(id) {
+
+        var context = getParameterByName('context');
+
+        ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+            Dashboard.navigate(LibraryBrowser.getHref(item, context));
+
+        });
+    }
+
+    function createCollection(panel) {
+
+        var url = ApiClient.getUrl("Collections", {
+
+            Name: $('#txtNewCollectionName', panel).val(),
+            IsLocked: !$('#chkEnableInternetMetadata', panel).checked(),
+            Ids: $('.fldSelectedItemIds', panel).val() || ''
+
+            //ParentId: getParameterByName('parentId') || LibraryMenu.getTopParentId()
+
+        });
+
+        ApiClient.ajax({
+            type: "POST",
+            url: url,
+            dataType: "json"
+
+        }).done(function (result) {
+
+            Dashboard.hideLoadingMsg();
+
+            var id = result.Id;
+
+            panel.panel('toggle');
+            redirectToCollection(id);
+
+        });
+    }
+
+    function addToCollection(panel, id) {
+
+        var url = ApiClient.getUrl("Collections/" + id + "/Items", {
+
+            Ids: $('.fldSelectedItemIds', panel).val() || ''
+        });
+
+        ApiClient.ajax({
+            type: "POST",
+            url: url
+
+        }).done(function () {
+
+            Dashboard.hideLoadingMsg();
+
+            panel.panel('toggle');
+
+            Dashboard.alert(Globalize.translate('MessageItemsAdded'));
+        });
+    }
+
+    window.BoxSetEditor = {
+
+        showPanel: function (items) {
+            showCollectionPanel(items);
+        },
+
+        supportsAddingToCollection: function (item) {
+
+            var invalidTypes = ['Person', 'Genre', 'MusicGenre', 'Studio', 'GameGenre', 'BoxSet', 'Playlist', 'UserView', 'CollectionFolder', 'Audio', 'Episode'];
+
+            return item.LocationType == 'FileSystem' && !item.CollectionType && invalidTypes.indexOf(item.Type) == -1 && item.MediaType != 'Photo';
+        }
+    };
+
+})(jQuery, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 488487afce..13789ba5b6 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2401,7 +2401,8 @@
                 if (options.viewButton) {
 
                     //html += '<paper-button raised class="subdued notext"><iron-icon icon="view-comfy"></iron-icon></paper-button>';
-                    html += '<paper-button raised class="subdued notext" onclick="require([\'jqmicons\']);jQuery(\'.viewPanel\', jQuery(this).parents(\'.page\')).panel(\'toggle\');"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></paper-button>';
+                    var viewPanelClass = options.viewPanelClass || 'viewPanel';
+                    html += '<paper-button raised class="subdued notext" onclick="require([\'jqmicons\']);jQuery(\'.' + viewPanelClass + '\', jQuery(this).parents(\'.page\')).panel(\'toggle\');"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></paper-button>';
                 }
 
                 html += '</div>';
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js
index db02ff353a..3deaf1d3b1 100644
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@@ -1181,16 +1181,15 @@
 
         $(page.getElementsByClassName('viewTabButton')).on('click', function () {
 
-            $('.viewTabButton', page).removeClass('ui-btn-active');
+            var parent = $(this).parents('.viewPanel');
+            $('.viewTabButton', parent).removeClass('ui-btn-active');
             this.classList.add('ui-btn-active');
 
-            $('.viewTab', page).hide();
-            $('.' + this.getAttribute('data-tab'), page).show();
+            $('.viewTab', parent).hide();
+            $('.' + this.getAttribute('data-tab'), parent).show();
         });
 
-        var viewPanel = $('.viewPanel', page);
-
-        $('#selectPageSize', viewPanel).html(LibraryBrowser.getDefaultPageSizeSelections().map(function (i) {
+        $('select.selectPageSize', $('.viewPanel', page)).html(LibraryBrowser.getDefaultPageSizeSelections().map(function (i) {
 
             return '<option value="' + i + '">' + i + '</option>';
 
@@ -1212,12 +1211,7 @@
         var page = this;
 
         hideSelections(page);
-
-        var elem = page.querySelector('.viewTabButton');
-        if (elem) {
-            Events.trigger(elem, 'click');
-        }
-
+        $(page.querySelectorAll('.viewTabButton:first-child')).trigger('click');
     });
 
     function renderUserDataChanges(card, userData) {
diff --git a/dashboard-ui/scripts/livetvguide.js b/dashboard-ui/scripts/livetvguide.js
index deaf168c8f..a78b1b38bb 100644
--- a/dashboard-ui/scripts/livetvguide.js
+++ b/dashboard-ui/scripts/livetvguide.js
@@ -487,7 +487,7 @@
             selectDate(page);
         });
 
-    }).on('pagebeforeshowready', "#liveTvSuggestedPage", function () {
+    }).on('pageinitdepends', "#liveTvSuggestedPage", function () {
 
         var page = this;
 
diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js
index 9c57a9e3bf..c2223b67e9 100644
--- a/dashboard-ui/scripts/livetvrecordings.js
+++ b/dashboard-ui/scripts/livetvrecordings.js
@@ -101,7 +101,7 @@
         });
     }
 
-    $(document).on('pagebeforeshowready', "#liveTvSuggestedPage", function () {
+    $(document).on('pageinitdepends', "#liveTvSuggestedPage", function () {
 
         var page = this;
 
diff --git a/dashboard-ui/scripts/livetvseriestimers.js b/dashboard-ui/scripts/livetvseriestimers.js
index 1d80f17f91..928017159e 100644
--- a/dashboard-ui/scripts/livetvseriestimers.js
+++ b/dashboard-ui/scripts/livetvseriestimers.js
@@ -117,7 +117,7 @@
         }).checkboxradio('refresh');
     }
 
-    $(document).on('pagebeforeshowready', "#liveTvSuggestedPage", function () {
+    $(document).on('pageinitdepends', "#liveTvSuggestedPage", function () {
 
         var page = this;
 
diff --git a/dashboard-ui/scripts/livetvtimers.js b/dashboard-ui/scripts/livetvtimers.js
index 58582f5103..98f66ddb8f 100644
--- a/dashboard-ui/scripts/livetvtimers.js
+++ b/dashboard-ui/scripts/livetvtimers.js
@@ -106,7 +106,7 @@
         });
     }
 
-    $(document).on('pagebeforeshowready', "#liveTvSuggestedPage", function () {
+    $(document).on('pageinitdepends', "#liveTvSuggestedPage", function () {
 
         var page = this;
 
diff --git a/dashboard-ui/scripts/moviecollections.js b/dashboard-ui/scripts/moviecollections.js
index 24207caaf1..1bc5ce3337 100644
--- a/dashboard-ui/scripts/moviecollections.js
+++ b/dashboard-ui/scripts/moviecollections.js
@@ -2,28 +2,43 @@
 
     var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
 
-    // The base query options
-    var query = {
+    var data = {};
+    function getQuery() {
 
-        SortBy: "SortName",
-        SortOrder: "Ascending",
-        IncludeItemTypes: "BoxSet",
-        Recursive: true,
-        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo,CanDelete",
-        StartIndex: 0,
-        ImageTypeLimit: 1,
-        EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
-    };
+        var key = getSavedQueryKey();
+        var pageData = data[key];
+
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    SortBy: "SortName",
+                    SortOrder: "Ascending",
+                    IncludeItemTypes: "BoxSet",
+                    Recursive: true,
+                    Fields: "PrimaryImageAspectRatio,SortName,SyncInfo,CanDelete",
+                    ImageTypeLimit: 1,
+                    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+                    StartIndex: 0,
+                    Limit: LibraryBrowser.getDefaultPageSize()
+                }
+            };
+
+            //pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData.query;
+    }
 
     function getSavedQueryKey() {
 
-        return 'collections' + (query.ParentId || '');
+        return getWindowUrl();
     }
 
-    function reloadItems(page) {
+    function reloadItems(page, viewPanel) {
 
         Dashboard.showLoadingMsg();
 
+        var query = getQuery();
         var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
         var promise2 = Dashboard.getCurrentUser();
 
@@ -43,18 +58,22 @@
                 totalRecordCount: result.TotalRecordCount,
                 viewButton: true,
                 showLimit: false,
+                viewPanelClass: 'collectionViewPanel'
+
             })).trigger('create');
 
-            updateFilterControls(page);
+            updateFilterControls(page, viewPanel);
             var trigger = false;
 
             if (result.TotalRecordCount) {
 
+                var context = getParameterByName('context');
+
                 if (view == "List") {
 
                     html = LibraryBrowser.getListViewHtml({
                         items: result.Items,
-                        context: 'movies',
+                        context: context,
                         sortBy: query.SortBy
                     });
                     trigger = true;
@@ -63,7 +82,7 @@
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "auto",
-                        context: 'movies',
+                        context: context,
                         showTitle: true,
                         centerText: true,
                         lazy: true
@@ -73,7 +92,7 @@
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "auto",
-                        context: 'movies',
+                        context: context,
                         showTitle: true,
                         cardLayout: true,
                         lazy: true,
@@ -84,7 +103,7 @@
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
-                        context: 'movies',
+                        context: context,
                         showTitle: true,
                         centerText: true,
                         lazy: true,
@@ -95,7 +114,7 @@
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
-                        context: 'movies',
+                        context: context,
                         showTitle: true,
                         lazy: true,
                         preferThumb: true,
@@ -121,12 +140,12 @@
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             $('.btnPreviousPage', page).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@@ -135,22 +154,23 @@
         });
     }
 
-    function updateFilterControls(page) {
+    function updateFilterControls(tabContent, viewPanel) {
 
+        var query = getQuery();
         // Reset form values using the last used query
-        $('.radioSortBy', page).each(function () {
+        $('.radioSortBy', viewPanel).each(function () {
 
             this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
 
         }).checkboxradio('refresh');
 
-        $('.radioSortOrder', page).each(function () {
+        $('.radioSortOrder', viewPanel).each(function () {
 
             this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
 
         }).checkboxradio('refresh');
 
-        $('.chkStandardFilter', page).each(function () {
+        $('.chkStandardFilter', viewPanel).each(function () {
 
             var filters = "," + (query.Filters || "");
             var filterName = this.getAttribute('data-filter');
@@ -159,31 +179,32 @@
 
         }).checkboxradio('refresh');
 
-        $('#selectView', page).val(view).selectmenu('refresh');
+        $('select.selectView', viewPanel).val(view).selectmenu('refresh');
 
-        $('#chkTrailer', page).checked(query.HasTrailer == true).checkboxradio('refresh');
-        $('#chkThemeSong', page).checked(query.HasThemeSong == true).checkboxradio('refresh');
-        $('#chkThemeVideo', page).checked(query.HasThemeVideo == true).checkboxradio('refresh');
+        $('.chkTrailer', viewPanel).checked(query.HasTrailer == true).checkboxradio('refresh');
+        $('.chkThemeSong', viewPanel).checked(query.HasThemeSong == true).checkboxradio('refresh');
+        $('.chkThemeVideo', viewPanel).checked(query.HasThemeVideo == true).checkboxradio('refresh');
 
-        $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
+        $('select.selectPageSize', viewPanel).val(query.Limit).selectmenu('refresh');
     }
 
-    $(document).on('pageinitdepends', "#boxsetsPage", function () {
+    function initEvents(tabContent, viewPanel) {
 
-        var page = this;
-
-        $('.radioSortBy', this).on('click', function () {
+        $('.radioSortBy', viewPanel).on('click', function () {
+            var query = getQuery();
             query.SortBy = this.getAttribute('data-sortby');
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.radioSortOrder', this).on('click', function () {
+        $('.radioSortOrder', viewPanel).on('click', function () {
+            var query = getQuery();
             query.SortOrder = this.getAttribute('data-sortorder');
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.chkStandardFilter', this).on('change', function () {
+        $('.chkStandardFilter', viewPanel).on('change', function () {
 
+            var query = getQuery();
             var filterName = this.getAttribute('data-filter');
             var filters = query.Filters || "";
 
@@ -196,313 +217,91 @@
             query.StartIndex = 0;
             query.Filters = filters;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkTrailer', this).on('change', function () {
+        $('.chkTrailer', viewPanel).on('change', function () {
 
+            var query = getQuery();
             query.StartIndex = 0;
             query.HasTrailer = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkThemeSong', this).on('change', function () {
+        $('.chkThemeSong', viewPanel).on('change', function () {
 
+            var query = getQuery();
             query.StartIndex = 0;
             query.HasThemeSong = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkThemeVideo', this).on('change', function () {
+        $('.chkThemeVideo', viewPanel).on('change', function () {
 
+            var query = getQuery();
             query.StartIndex = 0;
             query.HasThemeVideo = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#selectView', this).on('change', function () {
+        $('select.selectView', viewPanel).on('change', function () {
 
             view = this.value;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
 
             LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
         });
 
-        $('#selectPageSize', page).on('change', function () {
+        $('select.selectPageSize', viewPanel).on('change', function () {
+            var query = getQuery();
             query.Limit = parseInt(this.value);
             query.StartIndex = 0;
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
+    }
+
+    $(document).on('pageinitdepends', "#moviesRecommendedPage", function () {
+
+        var page = this;
+        var index = 3;
+        var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
+        var viewPanel = $('.collectionViewPanel', page);
+
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
+
+            if (parseInt(this.selected) == index) {
+                if (LibraryBrowser.needsRefresh(tabContent)) {
+                    reloadItems(tabContent, viewPanel);
+                    updateFilterControls(viewPanel);
+                }
+            }
+        });
+
+        initEvents(tabContent, viewPanel);
+    });
+
+    $(document).on('pageinitdepends', "#boxsetsPage", function () {
+
+        var page = this;
+
+        var content = page;
+        var viewPanel = page.querySelector('.viewPanel');
+
+        initEvents(content, viewPanel);
 
     }).on('pagebeforeshowready', "#boxsetsPage", function () {
 
         var page = this;
 
-        var context = getParameterByName('context');
-
-        if (context == 'movies') {
-            $('.collectionTabs', page).hide();
-            $('.movieTabs', page).show();
-
-            // TODO: Improve in the future to limit scope
-            query.ParentId = null;
-        } else {
-            $('.collectionTabs', page).show();
-            $('.movieTabs', page).hide();
-            query.ParentId = LibraryMenu.getTopParentId();
-
-            // Doing this for now due to reports of the page being empty for AutoBoxSet users
-            query.ParentId = null;
-        }
-
-        var limit = LibraryBrowser.getDefaultPageSize();
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
-        }
-
-        var viewkey = getSavedQueryKey();
-
-        LibraryBrowser.loadSavedQueryValues(viewkey, query);
-
-        LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
-
-            if (val) {
-                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
-            } else {
-                reloadItems(page);
-            }
-        });
-
-        updateFilterControls(this);
+        var content = page;
+        var viewPanel = page.querySelector('.viewPanel');
 
+        reloadItems(content, viewPanel);
+        updateFilterControls(content, viewPanel);
     });
 
-})(jQuery, document);
-
-(function ($, document) {
-
-    function getNewCollectionPanel(createIfNeeded) {
-
-        var panel = $('.newCollectionPanel');
-
-        if (createIfNeeded && !panel.length) {
-
-            var html = '';
-
-            html += '<div>';
-            html += '<div data-role="panel" class="newCollectionPanel" data-position="right" data-display="overlay" data-position-fixed="true" data-theme="a">';
-            html += '<form class="newCollectionForm">';
-
-            html += '<h3>' + Globalize.translate('HeaderAddToCollection') + '</h3>';
-
-            html += '<div class="fldSelectCollection">';
-            html += '<br />';
-            html += '<label for="selectCollectionToAddTo">' + Globalize.translate('LabelSelectCollection') + '</label>';
-            html += '<select id="selectCollectionToAddTo" data-mini="true"></select>';
-            html += '</div>';
-
-            html += '<div class="newCollectionInfo">';
-            html += '<br />';
-
-            html += '<div>';
-            html += '<label for="txtNewCollectionName">' + Globalize.translate('LabelName') + '</label>';
-            html += '<input type="text" id="txtNewCollectionName" required="required" />';
-            html += '<div class="fieldDescription">' + Globalize.translate('NewCollectionNameExample') + '</div>';
-            html += '</div>';
-
-            html += '<br />';
-
-            html += '<div>';
-            html += '<label for="chkEnableInternetMetadata">' + Globalize.translate('OptionSearchForInternetMetadata') + '</label>';
-            html += '<input type="checkbox" id="chkEnableInternetMetadata" data-mini="true" />';
-            html += '</div>';
-
-            // newCollectionInfo
-            html += '</div>';
-
-            html += '<br />';
-            html += '<p>';
-            html += '<input class="fldSelectedItemIds" type="hidden" />';
-            html += '<button type="submit" data-icon="plus" data-mini="true" data-theme="b">' + Globalize.translate('ButtonSubmit') + '</button>';
-            html += '</p>';
-
-            html += '</form>';
-            html += '</div>';
-            html += '</div>';
-
-            panel = $(html).appendTo(document.body).trigger('create').find('.newCollectionPanel');
-
-            $('#selectCollectionToAddTo', panel).on('change', function () {
-
-                if (this.value) {
-                    $('.newCollectionInfo', panel).hide();
-                    $('#txtNewCollectionName', panel).removeAttr('required');
-                } else {
-                    $('.newCollectionInfo', panel).show();
-                    $('#txtNewCollectionName', panel).attr('required', 'required');
-                }
-            });
-
-            $('.newCollectionForm', panel).off('submit', BoxSetEditor.onNewCollectionSubmit).on('submit', BoxSetEditor.onNewCollectionSubmit);
-        }
-        return panel;
-    }
-
-    function showCollectionPanel(items) {
-
-        var panel = getNewCollectionPanel(true).panel('toggle');
-
-        $('.fldSelectedItemIds', panel).val(items.join(','));
-
-
-        require(['jqmicons']);
-
-        if (items.length) {
-            $('.fldSelectCollection', panel).show();
-            populateCollections(panel);
-        } else {
-            $('.fldSelectCollection', panel).hide();
-            $('#selectCollectionToAddTo', panel).html('').val('').selectmenu('refresh').trigger('change');
-        }
-    }
-
-    function populateCollections(panel) {
-
-        var select = $('#selectCollectionToAddTo', panel);
-
-        $('.newCollectionInfo', panel).hide();
-
-        var options = {
-
-            Recursive: true,
-            IncludeItemTypes: "BoxSet",
-            SortBy: "SortName"
-        };
-
-        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
-
-            var html = '';
-
-            html += '<option value="">' + Globalize.translate('OptionNewCollection') + '</option>';
-
-            html += result.Items.map(function (i) {
-
-                return '<option value="' + i.Id + '">' + i.Name + '</option>';
-            });
-
-            select.html(html).val('').selectmenu('refresh').trigger('change');
-
-        });
-    }
-
-    $(document).on('pageinitdepends', ".collectionEditorPage", function () {
-
-        var page = this;
-
-        // The button is created dynamically
-        $(page).on('click', '.btnNewCollection', function () {
-
-            showCollectionPanel([]);
-        });
-    });
-
-    function redirectToCollection(id) {
-
-        var context = getParameterByName('context');
-
-        ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
-
-            Dashboard.navigate(LibraryBrowser.getHref(item, context));
-
-        });
-    }
-
-    function createCollection(panel) {
-
-        var url = ApiClient.getUrl("Collections", {
-
-            Name: $('#txtNewCollectionName', panel).val(),
-            IsLocked: !$('#chkEnableInternetMetadata', panel).checked(),
-            Ids: $('.fldSelectedItemIds', panel).val() || ''
-
-            //ParentId: getParameterByName('parentId') || LibraryMenu.getTopParentId()
-
-        });
-
-        ApiClient.ajax({
-            type: "POST",
-            url: url,
-            dataType: "json"
-
-        }).done(function (result) {
-
-            Dashboard.hideLoadingMsg();
-
-            var id = result.Id;
-
-            panel.panel('toggle');
-            redirectToCollection(id);
-
-        });
-    }
-
-    function addToCollection(panel, id) {
-
-        var url = ApiClient.getUrl("Collections/" + id + "/Items", {
-
-            Ids: $('.fldSelectedItemIds', panel).val() || ''
-        });
-
-        ApiClient.ajax({
-            type: "POST",
-            url: url
-
-        }).done(function () {
-
-            Dashboard.hideLoadingMsg();
-
-            panel.panel('toggle');
-
-            Dashboard.alert(Globalize.translate('MessageItemsAdded'));
-        });
-    }
-
-    window.BoxSetEditor = {
-
-        showPanel: function (items) {
-            showCollectionPanel(items);
-        },
-
-        onNewCollectionSubmit: function () {
-
-            Dashboard.showLoadingMsg();
-
-            var panel = getNewCollectionPanel(false);
-
-            var collectionId = $('#selectCollectionToAddTo', panel).val();
-
-            if (collectionId) {
-                addToCollection(panel, collectionId);
-            } else {
-                createCollection(panel);
-            }
-
-            return false;
-        },
-
-        supportsAddingToCollection: function (item) {
-
-            var invalidTypes = ['Person', 'Genre', 'MusicGenre', 'Studio', 'GameGenre', 'BoxSet', 'Playlist', 'UserView', 'CollectionFolder', 'Audio', 'Episode'];
-
-            return item.LocationType == 'FileSystem' && !item.CollectionType && invalidTypes.indexOf(item.Type) == -1 && item.MediaType != 'Photo';
-        }
-    };
-
 })(jQuery, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/moviegenres.js b/dashboard-ui/scripts/moviegenres.js
index 003ca9092e..7cfd27800e 100644
--- a/dashboard-ui/scripts/moviegenres.js
+++ b/dashboard-ui/scripts/moviegenres.js
@@ -2,26 +2,41 @@
 
     var view = LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb');
 
-    // The base query options
-    var query = {
+    var data = {};
+    function getQuery() {
 
-        SortBy: "SortName",
-        SortOrder: "Ascending",
-        IncludeItemTypes: "Movie",
-        Recursive: true,
-        Fields: "DateCreated,SyncInfo,ItemCounts",
-        StartIndex: 0
-    };
+        var key = getSavedQueryKey();
+        var pageData = data[key];
+
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    SortBy: "SortName",
+                    SortOrder: "Ascending",
+                    IncludeItemTypes: "Movie",
+                    Recursive: true,
+                    Fields: "DateCreated,SyncInfo,ItemCounts",
+                    StartIndex: 0,
+                    Limit: LibraryBrowser.getDefaultPageSize()
+                }
+            };
+
+            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData.query;
+    }
 
     function getSavedQueryKey() {
 
-        return 'moviegenres' + (query.ParentId || '');
+        return getWindowUrl();
     }
 
-    function reloadItems(page) {
+    function reloadItems(page, viewPanel) {
 
         Dashboard.showLoadingMsg();
 
+        var query = getQuery();
         ApiClient.getGenres(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
@@ -34,7 +49,9 @@
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
                 viewButton: true,
-                showLimit: false
+                showLimit: false,
+                viewPanelClass: 'genreViewPanel'
+
             })).trigger('create');
 
             updateFilterControls(page);
@@ -85,18 +102,18 @@
                 });
             }
 
-            var elem = page.querySelector('#items');
+            var elem = page.querySelector('.itemsContainer');
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             $('.btnPreviousPage', page).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@@ -107,16 +124,31 @@
 
     function updateFilterControls(page) {
 
-        $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
-        $('#selectView', page).val(view).selectmenu('refresh');
+        var query = getQuery();
+        $('select.selectPageSize', page).val(query.Limit).selectmenu('refresh');
+        $('select.selectView', page).val(view).selectmenu('refresh');
     }
 
-    $(document).on('pageinitdepends', "#movieGenresPage", function () {
+    $(document).on('pageinitdepends', "#moviesRecommendedPage", function () {
 
         var page = this;
+        var index = 4;
+        var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
+        var viewPanel = $('.genreViewPanel', page);
 
-        $('.chkStandardFilter', this).on('change', function () {
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
 
+            if (parseInt(this.selected) == index) {
+                if (LibraryBrowser.needsRefresh(tabContent)) {
+                    reloadItems(tabContent, viewPanel);
+                    updateFilterControls(viewPanel);
+                }
+            }
+        });
+
+        $('.chkStandardFilter', viewPanel).on('change', function () {
+
+            var query = getQuery();
             var filterName = this.getAttribute('data-filter');
             var filters = query.Filters || "";
 
@@ -129,60 +161,24 @@
             query.StartIndex = 0;
             query.Filters = filters;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#selectPageSize', page).on('change', function () {
+        $('select.selectPageSize', viewPanel).on('change', function () {
+            var query = getQuery();
             query.Limit = parseInt(this.value);
             query.StartIndex = 0;
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#selectView', this).on('change', function () {
+        $('select.selectView', viewPanel).on('change', function () {
 
             view = this.value;
 
-            if (view == "Timeline") {
-
-                query.SortBy = "PremiereDate";
-                query.SortOrder = "Descending";
-                query.StartIndex = 0;
-                $('#radioPremiereDate', page)[0].click();
-
-            } else {
-                reloadItems(page);
-            }
-
+            reloadItems(tabContent, viewPanel);
             LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
         });
 
-    }).on('pagebeforeshowready', "#movieGenresPage", function () {
-
-        var page = this;
-        query.ParentId = LibraryMenu.getTopParentId();
-
-        var limit = LibraryBrowser.getDefaultPageSize();
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
-        }
-
-        var viewkey = getSavedQueryKey();
-
-        LibraryBrowser.loadSavedQueryValues(viewkey, query);
-
-        LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
-
-            if (val) {
-                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
-            } else {
-                reloadItems(page);
-            }
-        });
-
-        updateFilterControls(this);
     });
 
 })(jQuery, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/moviepeople.js b/dashboard-ui/scripts/moviepeople.js
index 64a11bf241..bd9bcde10c 100644
--- a/dashboard-ui/scripts/moviepeople.js
+++ b/dashboard-ui/scripts/moviepeople.js
@@ -1,29 +1,43 @@
 (function ($, document) {
 
     var pageSizeKey = 'people';
+    var data = {};
 
-    // The base query options
-    var query = {
+    function getQuery() {
 
-        SortBy: "SortName",
-        SortOrder: "Ascending",
-        IncludeItemTypes: "Movie,Trailer",
-        Recursive: true,
-        Fields: "DateCreated,ItemCounts",
-        PersonTypes: "",
-        StartIndex: 0,
-        Limit: 100
-    };
+        var key = getSavedQueryKey();
+        var pageData = data[key];
+
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    SortBy: "SortName",
+                    SortOrder: "Ascending",
+                    IncludeItemTypes: "Movie,Trailer",
+                    Recursive: true,
+                    Fields: "DateCreated,ItemCounts",
+                    PersonTypes: "",
+                    StartIndex: 0,
+                    Limit: 100
+                }
+            };
+
+            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData.query;
+    }
 
     function getSavedQueryKey() {
 
-        return 'moviepeople' + (query.ParentId || '');
+        return getWindowUrl();
     }
 
-    function reloadItems(page) {
+    function reloadItems(page, viewPanel) {
 
         Dashboard.showLoadingMsg();
 
+        var query = getQuery();
         ApiClient.getPeople(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
@@ -37,12 +51,13 @@
                 viewButton: true,
                 showLimit: false,
                 updatePageSizeSetting: false,
-                pageSizeKey: pageSizeKey
+                pageSizeKey: pageSizeKey,
+                viewPanelClass: 'peopleViewPanel'
             });
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
-            updateFilterControls(page);
+            updateFilterControls(page, viewPanel);
 
             html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
@@ -54,18 +69,18 @@
                 lazy: true
             });
 
-            var elem = page.querySelector('#items');
+            var elem = page.querySelector('.itemsContainer');
             elem.innerHTML = html + pagingHtml;
             ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             $('.btnPreviousPage', page).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@@ -74,9 +89,10 @@
         });
     }
 
-    function updateFilterControls(page) {
+    function updateFilterControls(tabContent, viewPanel) {
 
-        $('.chkPersonTypeFilter', page).each(function () {
+        var query = getQuery();
+        $('.chkPersonTypeFilter', viewPanel).each(function () {
 
             var filters = "," + (query.PersonTypes || "");
             var filterName = this.getAttribute('data-filter');
@@ -85,15 +101,30 @@
 
         }).checkboxradio('refresh');
 
-        $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
+        $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
     }
 
-    $(document).on('pageinitdepends', "#moviePeoplePage", function () {
+    $(document).on('pageinitdepends', "#moviesRecommendedPage", function () {
 
         var page = this;
+        var index = 5;
+        var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
+        var viewPanel = $('.peopleViewPanel', page);
 
-        $('.chkStandardFilter', this).on('change', function () {
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
 
+            if (parseInt(this.selected) == index) {
+
+                if (LibraryBrowser.needsRefresh(tabContent)) {
+                    reloadItems(tabContent, viewPanel);
+                    updateFilterControls(tabContent, viewPanel);
+                }
+            }
+        });
+
+        $('.chkStandardFilter', viewPanel).on('change', function () {
+
+            var query = getQuery();
             var filterName = this.getAttribute('data-filter');
             var filters = query.Filters || "";
 
@@ -106,11 +137,12 @@
             query.StartIndex = 0;
             query.Filters = filters;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.chkPersonTypeFilter', this).on('change', function () {
+        $('.chkPersonTypeFilter', viewPanel).on('change', function () {
 
+            var query = getQuery();
             var filterName = this.getAttribute('data-filter');
             var filters = query.PersonTypes || "";
 
@@ -123,40 +155,25 @@
             query.StartIndex = 0;
             query.PersonTypes = filters;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.alphabetPicker', this).on('alphaselect', function (e, character) {
+        $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
 
+            var query = getQuery();
             query.NameStartsWithOrGreater = character;
             query.StartIndex = 0;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
 
         }).on('alphaclear', function (e) {
 
+            var query = getQuery();
             query.NameStartsWithOrGreater = '';
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-    }).on('pagebeforeshowready', "#moviePeoplePage", function () {
-
-        query.ParentId = LibraryMenu.getTopParentId();
-
-        var limit = LibraryBrowser.getDefaultPageSize(pageSizeKey, 100);
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
-        }
-
-        LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
-
-        reloadItems(this);
-
-        updateFilterControls(this);
     });
 
 })(jQuery, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js
index dc920cd870..caadc2ff96 100644
--- a/dashboard-ui/scripts/movies.js
+++ b/dashboard-ui/scripts/movies.js
@@ -35,7 +35,7 @@
         return getWindowUrl();
     }
 
-    function reloadItems(page) {
+    function reloadItems(page, viewPanel) {
 
         Dashboard.showLoadingMsg();
 
@@ -56,7 +56,8 @@
                 totalRecordCount: result.TotalRecordCount,
                 viewButton: true,
                 showLimit: false,
-                addSelectionButton: true
+                addSelectionButton: true,
+                viewPanelClass: 'movieViewPanel'
 
             });
 
@@ -70,7 +71,6 @@
                     items: result.Items,
                     shape: "backdrop",
                     preferThumb: true,
-                    context: 'movies',
                     lazy: true,
                     overlayText: true,
                     showDetailsMenu: true
@@ -82,7 +82,6 @@
                     items: result.Items,
                     shape: "backdrop",
                     preferThumb: true,
-                    context: 'movies',
                     lazy: true,
                     showTitle: true,
                     cardLayout: true,
@@ -96,7 +95,6 @@
                     items: result.Items,
                     shape: "banner",
                     preferBanner: true,
-                    context: 'movies',
                     lazy: true,
                     showDetailsMenu: true
                 });
@@ -105,7 +103,6 @@
 
                 html = LibraryBrowser.getListViewHtml({
                     items: result.Items,
-                    context: 'movies',
                     sortBy: query.SortBy
                 });
                 trigger = true;
@@ -114,7 +111,6 @@
                 html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,
                     shape: "portrait",
-                    context: 'movies',
                     centerText: true,
                     lazy: true,
                     overlayText: true,
@@ -125,7 +121,6 @@
                 html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,
                     shape: "portrait",
-                    context: 'movies',
                     showTitle: true,
                     showYear: true,
                     lazy: true,
@@ -137,7 +132,6 @@
                 html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,
                     shape: "portrait",
-                    context: 'movies',
                     showTitle: true,
                     timeline: true,
                     centerText: true,
@@ -156,38 +150,47 @@
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             $('.btnPreviousPage', page).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
             LibraryBrowser.setLastRefreshed(page);
+
             Dashboard.hideLoadingMsg();
         });
+
+        Dashboard.getCurrentUser().done(function (user) {
+            if (user.Policy.IsAdministrator) {
+                $('.btnMergeVersions', page).show();
+            } else {
+                $('.btnMergeVersions', page).hide();
+            }
+        });
     }
 
-    function updateFilterControls(page) {
+    function updateFilterControls(tabContent, viewPanel) {
 
         var query = getQuery();
         // Reset form values using the last used query
-        $('.radioSortBy', page).each(function () {
+        $('.radioSortBy', viewPanel).each(function () {
 
             this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
 
         }).checkboxradio('refresh');
 
-        $('.radioSortOrder', page).each(function () {
+        $('.radioSortOrder', viewPanel).each(function () {
 
             this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
 
         }).checkboxradio('refresh');
 
-        $('.chkStandardFilter', page).each(function () {
+        $('.chkStandardFilter', viewPanel).each(function () {
 
             var filters = "," + (query.Filters || "");
             var filterName = this.getAttribute('data-filter');
@@ -196,7 +199,7 @@
 
         }).checkboxradio('refresh');
 
-        $('.chkVideoTypeFilter', page).each(function () {
+        $('.chkVideoTypeFilter', viewPanel).each(function () {
 
             var filters = "," + (query.VideoTypes || "");
             var filterName = this.getAttribute('data-filter');
@@ -205,61 +208,74 @@
 
         }).checkboxradio('refresh');
 
-        $('#selectView', page).val(view).selectmenu('refresh');
+        $('select.selectView', viewPanel).val(view).selectmenu('refresh');
 
-        $('#chk3D', page).checked(query.Is3D == true).checkboxradio('refresh');
-        $('#chkHD', page).checked(query.IsHD == true).checkboxradio('refresh');
-        $('#chkSD', page).checked(query.IsHD == false).checkboxradio('refresh');
+        $('.chk3D', viewPanel).checked(query.Is3D == true).checkboxradio('refresh');
+        $('.chkHD', viewPanel).checked(query.IsHD == true).checkboxradio('refresh');
+        $('.chkSD', viewPanel).checked(query.IsHD == false).checkboxradio('refresh');
 
-        $('#chkSubtitle', page).checked(query.HasSubtitles == true).checkboxradio('refresh');
-        $('#chkTrailer', page).checked(query.HasTrailer == true).checkboxradio('refresh');
-        $('#chkSpecialFeature', page).checked(query.HasSpecialFeature == true).checkboxradio('refresh');
-        $('#chkThemeSong', page).checked(query.HasThemeSong == true).checkboxradio('refresh');
-        $('#chkThemeVideo', page).checked(query.HasThemeVideo == true).checkboxradio('refresh');
+        $('.chkSubtitle', viewPanel).checked(query.HasSubtitles == true).checkboxradio('refresh');
+        $('.chkTrailer', viewPanel).checked(query.HasTrailer == true).checkboxradio('refresh');
+        $('.chkSpecialFeature', viewPanel).checked(query.HasSpecialFeature == true).checkboxradio('refresh');
+        $('.chkThemeSong', viewPanel).checked(query.HasThemeSong == true).checkboxradio('refresh');
+        $('.chkThemeVideo', viewPanel).checked(query.HasThemeVideo == true).checkboxradio('refresh');
 
-        $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
-        $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
+        $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
+        $('select.selectPageSize', viewPanel).val(query.Limit).selectmenu('refresh');
     }
 
     var filtersLoaded;
-    function reloadFiltersIfNeeded(page) {
+    function reloadFiltersIfNeeded(tabContent, viewPanel) {
 
         if (!filtersLoaded) {
 
             filtersLoaded = true;
 
             var query = getQuery();
-            QueryFilters.loadFilters(page, Dashboard.getCurrentUserId(), query, function () {
+            QueryFilters.loadFilters(viewPanel, Dashboard.getCurrentUserId(), query, function () {
 
-                reloadItems(page);
+                reloadItems(tabContent, viewPanel);
             });
         }
     }
 
-    $(document).on('pageinitdepends', "#moviesPage", function () {
+    $(document).on('pageinitdepends', "#moviesRecommendedPage", function () {
 
         var page = this;
+        var index = 1;
+        var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
+        var viewPanel = $('.movieViewPanel', page);
 
-        $('.viewPanel', page).on('panelopen', function () {
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
 
-            reloadFiltersIfNeeded(page);
+            if (parseInt(this.selected) == index) {
+                if (LibraryBrowser.needsRefresh(tabContent)) {
+                    reloadItems(tabContent, viewPanel);
+                    updateFilterControls(tabContent, viewPanel);
+                }
+            }
         });
 
-        $('.radioSortBy', this).on('click', function () {
+        $(viewPanel).on('panelopen', function () {
+
+            reloadFiltersIfNeeded(tabContent, viewPanel);
+        });
+
+        $('.radioSortBy', viewPanel).on('click', function () {
             var query = getQuery();
             query.StartIndex = 0;
             query.SortBy = this.getAttribute('data-sortby');
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.radioSortOrder', this).on('click', function () {
+        $('.radioSortOrder', viewPanel).on('click', function () {
             var query = getQuery();
             query.StartIndex = 0;
             query.SortOrder = this.getAttribute('data-sortorder');
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.chkStandardFilter', this).on('change', function () {
+        $('.chkStandardFilter', viewPanel).on('change', function () {
 
             var query = getQuery();
             var filterName = this.getAttribute('data-filter');
@@ -274,10 +290,10 @@
             query.StartIndex = 0;
             query.Filters = filters;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#selectView', this).on('change', function () {
+        $('select.selectView', viewPanel).on('change', function () {
 
             view = this.value;
 
@@ -287,16 +303,16 @@
                 query.SortBy = "PremiereDate";
                 query.SortOrder = "Descending";
                 query.StartIndex = 0;
-                $('#radioPremiereDate', page)[0].click();
+                $('.radioPremiereDate', page)[0].click();
 
             } else {
-                reloadItems(page);
+                reloadItems(tabContent, viewPanel);
             }
 
             LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
         });
 
-        $('.chkVideoTypeFilter', this).on('change', function () {
+        $('.chkVideoTypeFilter', viewPanel).on('change', function () {
 
             var query = getQuery();
             var filterName = this.getAttribute('data-filter');
@@ -311,323 +327,130 @@
             query.StartIndex = 0;
             query.VideoTypes = filters;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chk3D', this).on('change', function () {
+        $('.chk3D', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
             query.Is3D = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkHD', this).on('change', function () {
+        $('.chkHD', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
             query.IsHD = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkSD', this).on('change', function () {
+        $('.chkSD', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
             query.IsHD = this.checked ? false : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkSubtitle', this).on('change', function () {
+        $('.chkSubtitle', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
             query.HasSubtitles = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkTrailer', this).on('change', function () {
+        $('.chkTrailer', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
             query.HasTrailer = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkSpecialFeature', this).on('change', function () {
+        $('.chkSpecialFeature', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
             query.HasSpecialFeature = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkThemeSong', this).on('change', function () {
+        $('.chkThemeSong', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
             query.HasThemeSong = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkThemeVideo', this).on('change', function () {
+        $('.chkThemeVideo', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
             query.HasThemeVideo = this.checked ? true : null;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.alphabetPicker', this).on('alphaselect', function (e, character) {
+        $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
 
             var query = getQuery();
             query.NameStartsWithOrGreater = character;
             query.StartIndex = 0;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
 
         }).on('alphaclear', function (e) {
 
             var query = getQuery();
             query.NameStartsWithOrGreater = '';
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#radioBasicFilters', this).on('change', function () {
+        $('.radioBasicFilters', viewPanel).on('change', function () {
 
             if (this.checked) {
-                $('.basicFilters', page).show();
-                $('.advancedFilters', page).hide();
+                $('.basicFilters', viewPanel).show();
+                $('.advancedFilters', viewPanel).hide();
             } else {
-                $('.basicFilters', page).hide();
+                $('.basicFilters', viewPanel).hide();
             }
         });
 
-        $('#radioAdvancedFilters', this).on('change', function () {
+        $('.radioAdvancedFilters', viewPanel).on('change', function () {
 
             if (this.checked) {
-                $('.advancedFilters', page).show();
-                $('.basicFilters', page).hide();
+                $('.advancedFilters', viewPanel).show();
+                $('.basicFilters', viewPanel).hide();
             } else {
-                $('.advancedFilters', page).hide();
+                $('.advancedFilters', viewPanel).hide();
             }
         });
 
-        $('.itemsContainer', page).on('needsrefresh', function () {
+        $('.itemsContainer', tabContent).on('needsrefresh', function () {
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
 
         });
 
-        $('#selectPageSize', page).on('change', function () {
+        $('select.selectPageSize', viewPanel).on('change', function () {
             var query = getQuery();
             query.Limit = parseInt(this.value);
             query.StartIndex = 0;
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-    }).on('pagebeforeshowready', "#moviesPage", function () {
-
-        var query = getQuery();
-
-        var page = this;
-
-        var viewkey = getSavedQueryKey();
-
-        LibraryBrowser.loadSavedQueryValues(viewkey, query);
-
-        QueryFilters.onPageShow(page, query);
-
-        if (LibraryBrowser.needsRefresh(page)) {
-            LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
-
-                if (val) {
-                    $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
-                } else {
-                    reloadItems(page);
-                }
-            });
-        }
-
-        updateFilterControls(page);
-
-        filtersLoaded = false;
-
-        Dashboard.getCurrentUser().done(function (user) {
-            if (user.Policy.IsAdministrator) {
-                $('.btnMergeVersions', page).show();
-            } else {
-                $('.btnMergeVersions', page).hide();
-            }
-        });
     });
 
-})(jQuery, document);
-
-(function (window) {
-
-    function renderOptions(page, selector, cssClass, items) {
-
-        var elem;
-
-        if (items.length) {
-
-            elem = $(selector, page).show();
-
-        } else {
-            elem = $(selector, page).hide();
-        }
-
-        var html = '';
-
-        //  style="margin: -.2em -.8em;"
-        html += '<div data-role="controlgroup">';
-
-        var index = 0;
-        var idPrefix = 'chk' + selector.substring(1);
-
-        html += items.map(function (filter) {
-
-            var itemHtml = '';
-
-            var id = idPrefix + index;
-            itemHtml += '<label for="' + id + '">' + filter + '</label>';
-            itemHtml += '<input id="' + id + '" type="checkbox" data-filter="' + filter + '" data-mini="true" class="' + cssClass + '" />';
-
-            index++;
-
-            return itemHtml;
-
-        }).join('');
-
-        html += '</div>';
-
-        $('.filterOptions', elem).html(html).trigger('create');
-    }
-
-    function renderFilters(page, result) {
-
-        // If there's a huge number of these they will be really show to render
-        if (result.Tags) {
-            result.Tags.length = Math.min(result.Tags.length, 50);
-        }
-
-        renderOptions(page, '.genreFilters', 'chkGenreFilter', result.Genres);
-        renderOptions(page, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings);
-        renderOptions(page, '.tagFilters', 'chkTagFilter', result.Tags);
-        renderOptions(page, '.yearFilters', 'chkYearFilter', result.Years);
-
-    }
-
-    function onFiltersLoaded(page, query, reloadItemsFn) {
-
-        $('.chkGenreFilter', page).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.Genres || "";
-            var delimiter = '|';
-
-            filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + delimiter + filterName) : filterName;
-            }
-
-            query.StartIndex = 0;
-            query.Genres = filters;
-
-            reloadItemsFn();
-        });
-        $('.chkTagFilter', page).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.Tags || "";
-            var delimiter = '|';
-
-            filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + delimiter + filterName) : filterName;
-            }
-
-            query.StartIndex = 0;
-            query.Tags = filters;
-
-            reloadItemsFn();
-        });
-        $('.chkYearFilter', page).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.Years || "";
-            var delimiter = ',';
-
-            filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + delimiter + filterName) : filterName;
-            }
-
-            query.StartIndex = 0;
-            query.Years = filters;
-
-            reloadItemsFn();
-        });
-        $('.chkOfficialRatingFilter', page).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.OfficialRatings || "";
-            var delimiter = '|';
-
-            filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + delimiter + filterName) : filterName;
-            }
-
-            query.StartIndex = 0;
-            query.OfficialRatings = filters;
-
-            reloadItemsFn();
-        });
-    }
-
-    function loadFilters(page, userId, itemQuery, reloadItemsFn) {
-
-        return ApiClient.getJSON(ApiClient.getUrl('Items/Filters', {
-
-            UserId: userId,
-            ParentId: itemQuery.ParentId,
-            IncludeItemTypes: itemQuery.IncludeItemTypes
-
-
-        })).done(function (result) {
-
-            renderFilters(page, result);
-
-            onFiltersLoaded(page, itemQuery, reloadItemsFn);
-        });
-
-    }
-
-    function onPageShow(page, query) {
-        query.Genres = null;
-        query.Years = null;
-        query.OfficialRatings = null;
-        query.Tags = null;
-    }
-
-    window.QueryFilters = {
-        loadFilters: loadFilters,
-        onPageShow: onPageShow
-    };
-
-})(window);
\ No newline at end of file
+})(jQuery, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js
index 18cfff8c11..d3c0a7f445 100644
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@@ -230,17 +230,10 @@
         });
     }
 
-    $(document).on('pageinitdepends', "#moviesRecommendedPage", function () {
-
-        var page = this;
-
-        $('.recommendations', page).createCardMenus();
-
-    }).on('pagebeforeshowready', "#moviesRecommendedPage", function () {
+    function loadSuggestionsTab(page) {
 
         var parentId = LibraryMenu.getTopParentId();
 
-        var page = this;
         var userId = Dashboard.getCurrentUserId();
 
         var containers = page.querySelectorAll('.itemsContainer');
@@ -258,6 +251,75 @@
                 loadSuggestions(page, userId, parentId);
             }
         }
+    }
+
+    function loadTab(page, index) {
+
+        page = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
+
+        switch (index) {
+
+            case 0:
+                loadSuggestionsTab(page);
+                break;
+            default:
+                break;
+        }
+    }
+
+    $(document).on('pageinitdepends', "#moviesRecommendedPage", function () {
+
+        var page = this;
+
+        $('.recommendations', page).createCardMenus();
+
+        var tabs = page.querySelector('paper-tabs');
+        var pages = page.querySelector('neon-animated-pages');
+
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages);
+
+        $(tabs).on('iron-select', function () {
+            var selected = this.selected;
+
+            if (LibraryBrowser.navigateOnLibraryTabSelect()) {
+
+                if (selected) {
+                    Dashboard.navigate('moviesrecommended.html?tab=' + selected);
+                } else {
+                    Dashboard.navigate('moviesrecommended.html');
+                }
+
+            } else {
+                page.querySelector('neon-animated-pages').selected = selected;
+            }
+        });
+
+        $(pages).on('tabchange', function () {
+            loadTab(page, parseInt(this.selected));
+        });
+
+    }).on('pageshowready', "#moviesRecommendedPage", function () {
+
+        var page = this;
+
+        if (!page.getAttribute('data-title')) {
+
+            var parentId = LibraryMenu.getTopParentId();
+
+            if (parentId) {
+
+                ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).done(function (item) {
+
+                    page.setAttribute('data-title', item.Name);
+                    LibraryMenu.setTitle(item.Name);
+                });
+
+
+            } else {
+                page.setAttribute('data-title', Globalize.translate('TabMovies'));
+                LibraryMenu.setTitle(Globalize.translate('TabMovies'));
+            }
+        }
 
     });
 
diff --git a/dashboard-ui/scripts/moviestudios.js b/dashboard-ui/scripts/moviestudios.js
index 51bca2fe2d..9d617c01cc 100644
--- a/dashboard-ui/scripts/moviestudios.js
+++ b/dashboard-ui/scripts/moviestudios.js
@@ -1,25 +1,43 @@
 (function ($, document) {
 
     // The base query options
-    var query = {
+    var data = {};
 
-        SortBy: "SortName",
-        SortOrder: "Ascending",
-        IncludeItemTypes: "Movie",
-        Recursive: true,
-        Fields: "DateCreated,ItemCounts",
-        StartIndex: 0
-    };
+    function getQuery() {
+
+        var key = getSavedQueryKey();
+        var pageData = data[key];
+
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    SortBy: "SortName",
+                    SortOrder: "Ascending",
+                    IncludeItemTypes: "Movie",
+                    Recursive: true,
+                    Fields: "DateCreated,ItemCounts",
+                    StartIndex: 0,
+                    Limit: LibraryBrowser.getDefaultPageSize()
+                }
+            };
+
+            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData.query;
+    }
 
     function getSavedQueryKey() {
 
-        return 'moviestudios' + (query.ParentId || '');
+        return getWindowUrl();
     }
 
-    function reloadItems(page) {
+    function reloadItems(page, viewPanel) {
 
         Dashboard.showLoadingMsg();
 
+        var query = getQuery();
+
         ApiClient.getStudios(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
@@ -31,12 +49,13 @@
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
                 viewButton: true,
-                showLimit: false
+                showLimit: false,
+                viewPanelClass: 'studioViewPanel'
             });
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
-            updateFilterControls(page);
+            updateFilterControls(viewPanel);
 
             html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
@@ -48,18 +67,18 @@
                 lazy: true
             });
 
-            var elem = page.querySelector('#items');
+            var elem = page.querySelector('.itemsContainer');
             elem.innerHTML = html + pagingHtml;
             ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             $('.btnPreviousPage', page).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@@ -69,15 +88,30 @@
     }
 
     function updateFilterControls(page) {
-        $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
+        var query = getQuery();
+        $('select.selectPageSize', page).val(query.Limit).selectmenu('refresh');
     }
 
-    $(document).on('pageinitdepends', "#movieStudiosPage", function () {
+    $(document).on('pageinitdepends', "#moviesRecommendedPage", function () {
 
         var page = this;
+        var index = 6;
+        var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
+        var viewPanel = $('.studioViewPanel', page);
 
-        $('.chkStandardFilter', this).on('change', function () {
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
 
+            if (parseInt(this.selected) == index) {
+                if (LibraryBrowser.needsRefresh(tabContent)) {
+                    reloadItems(tabContent, viewPanel);
+                    updateFilterControls(viewPanel);
+                }
+            }
+        });
+
+        $('.chkStandardFilter', viewPanel).on('change', function () {
+
+            var query = getQuery();
             var filterName = this.getAttribute('data-filter');
             var filters = query.Filters || "";
 
@@ -90,32 +124,16 @@
             query.StartIndex = 0;
             query.Filters = filters;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('#selectPageSize', page).on('change', function () {
+        $('.selectPageSize', viewPanel).on('change', function () {
+            var query = getQuery();
             query.Limit = parseInt(this.value);
             query.StartIndex = 0;
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-    }).on('pagebeforeshowready', "#movieStudiosPage", function () {
-
-        query.ParentId = LibraryMenu.getTopParentId();
-
-        var limit = LibraryBrowser.getDefaultPageSize();
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
-        }
-
-        LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
-
-        reloadItems(this);
-
-        updateFilterControls(this);
     });
 
 })(jQuery, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/movietrailers.js b/dashboard-ui/scripts/movietrailers.js
index e859ac1083..e140678ae5 100644
--- a/dashboard-ui/scripts/movietrailers.js
+++ b/dashboard-ui/scripts/movietrailers.js
@@ -1,28 +1,42 @@
 (function ($, document) {
 
-    var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
+    var data = {};
 
-    // The base query options
-    var query = {
+    function getQuery() {
 
-        SortBy: "SortName",
-        SortOrder: "Ascending",
-        Recursive: true,
-        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
-        StartIndex: 0,
-        ImageTypeLimit: 1,
-        EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
-    };
+        var key = getSavedQueryKey();
+        var pageData = data[key];
+
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    SortBy: "SortName",
+                    SortOrder: "Ascending",
+                    Recursive: true,
+                    Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
+                    ImageTypeLimit: 1,
+                    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+                    StartIndex: 0,
+                    Limit: LibraryBrowser.getDefaultPageSize()
+                }
+            };
+
+            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData.query;
+    }
 
     function getSavedQueryKey() {
 
-        return 'trailers' + (query.ParentId || '');
+        return getWindowUrl();
     }
 
-    function reloadItems(page) {
+    function reloadItems(page, viewPanel) {
 
         Dashboard.showLoadingMsg();
 
+        var query = getQuery();
         query.UserId = Dashboard.getCurrentUserId();
 
         ApiClient.getJSON(ApiClient.getUrl('Trailers', query)).done(function (result) {
@@ -43,17 +57,17 @@
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
                 viewButton: true,
-                showLimit: false
+                showLimit: false,
+                viewPanelClass: 'trailerViewPanel'
             });
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
-            updateFilterControls(page);
+            updateFilterControls(page, viewPanel);
 
             html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: "portrait",
-                context: 'movies-trailers',
                 lazy: true,
                 showDetailsMenu: true
             });
@@ -64,12 +78,12 @@
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             $('.btnPreviousPage', page).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(page, viewPanel);
             });
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@@ -87,22 +101,23 @@
         });
     }
 
-    function updateFilterControls(page) {
+    function updateFilterControls(tabContent, viewPanel) {
 
+        var query = getQuery();
         // Reset form values using the last used query
-        $('.radioSortBy', page).each(function () {
+        $('.radioSortBy', viewPanel).each(function () {
 
             this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
 
         }).checkboxradio('refresh');
 
-        $('.radioSortOrder', page).each(function () {
+        $('.radioSortOrder', viewPanel).each(function () {
 
             this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
 
         }).checkboxradio('refresh');
 
-        $('.chkStandardFilter', page).each(function () {
+        $('.chkStandardFilter', viewPanel).each(function () {
 
             var filters = "," + (query.Filters || "");
             var filterName = this.getAttribute('data-filter');
@@ -111,8 +126,8 @@
 
         }).checkboxradio('refresh');
 
-        $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
-        $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
+        $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
+        $('select.selectPageSize', viewPanel).val(query.Limit).selectmenu('refresh');
     }
 
     function playReel(page) {
@@ -126,7 +141,7 @@
             Fields: "MediaSources,Chapters"
         };
 
-        if ($('#chkUnwatchedOnly', page).checked()) {
+        if ($('.chkUnwatchedOnly', page).checked()) {
             reelQuery.Filters = "IsPlayed";
         }
 
@@ -145,24 +160,40 @@
         return false;
     }
 
-    $(document).on('pageinitdepends', "#movieTrailersPage", function () {
+    $(document).on('pageinitdepends', "#moviesRecommendedPage", function () {
 
         var page = this;
+        var index = 2;
+        var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
+        var viewPanel = $('.trailerViewPanel', page);
 
-        $('.radioSortBy', this).on('click', function () {
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
+
+            if (parseInt(this.selected) == index) {
+                if (LibraryBrowser.needsRefresh(tabContent)) {
+                    reloadItems(tabContent, viewPanel);
+                    updateFilterControls(tabContent, viewPanel);
+                }
+            }
+        });
+
+        $('.radioSortBy', viewPanel).on('click', function () {
+            var query = getQuery();
             query.StartIndex = 0;
             query.SortBy = this.getAttribute('data-sortby');
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.radioSortOrder', this).on('click', function () {
+        $('.radioSortOrder', viewPanel).on('click', function () {
+            var query = getQuery();
             query.StartIndex = 0;
             query.SortOrder = this.getAttribute('data-sortorder');
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.chkStandardFilter', this).on('change', function () {
+        $('.chkStandardFilter', viewPanel).on('change', function () {
 
+            var query = getQuery();
             var filterName = this.getAttribute('data-filter');
             var filters = query.Filters || "";
 
@@ -175,70 +206,45 @@
             query.StartIndex = 0;
             query.Filters = filters;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.alphabetPicker', this).on('alphaselect', function (e, character) {
+        $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
 
+            var query = getQuery();
             query.NameStartsWithOrGreater = character;
             query.StartIndex = 0;
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
 
         }).on('alphaclear', function (e) {
 
+            var query = getQuery();
             query.NameStartsWithOrGreater = '';
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.itemsContainer', page).on('needsrefresh', function () {
+        $('.itemsContainer', tabContent).on('needsrefresh', function () {
 
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
 
         });
 
-        $('#selectPageSize', page).on('change', function () {
+        $('select.selectPageSize', viewPanel).on('change', function () {
+            var query = getQuery();
             query.Limit = parseInt(this.value);
             query.StartIndex = 0;
-            reloadItems(page);
+            reloadItems(tabContent, viewPanel);
         });
 
-        $('.btnTrailerReel', page).on('click', function () {
+        $('.btnTrailerReel', tabContent).on('click', function () {
 
             $('.popupTrailerReel', page).popup('open');
 
         });
 
-        $('.popupTrailerReelForm').off('submit', onSubmit).on('submit', onSubmit);
-
-    }).on('pagebeforeshowready', "#movieTrailersPage", function () {
-
-        query.ParentId = LibraryMenu.getTopParentId();
-
-        var page = this;
-        var limit = LibraryBrowser.getDefaultPageSize();
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
-        }
-
-        var viewkey = getSavedQueryKey();
-
-        LibraryBrowser.loadSavedQueryValues(viewkey, query);
-
-        LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
-
-            if (val) {
-                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
-            } else {
-                reloadItems(page);
-            }
-        });
-
-        updateFilterControls(this);
+        $('.popupTrailerReelForm', page).off('submit', onSubmit).on('submit', onSubmit);
     });
 
 })(jQuery, document);
\ No newline at end of file