From e488108c2f254f6bfa14665e161253a9ee9facd2 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 24 Mar 2016 14:11:03 -0400
Subject: [PATCH] update tabs

---
 dashboard-ui/channels.html                |  26 ++--
 dashboard-ui/home.html                    |  74 +++++-----
 dashboard-ui/livetv.html                  | 156 ++++++++++-----------
 dashboard-ui/movies.html                  | 156 ++++++++++-----------
 dashboard-ui/music.html                   | 162 ++++++++++------------
 dashboard-ui/photos.html                  |  38 +++--
 dashboard-ui/scripts/channels.js          |   8 +-
 dashboard-ui/scripts/channelslatest.js    |   6 +-
 dashboard-ui/scripts/indexpage.js         |  16 ++-
 dashboard-ui/scripts/librarybrowser.js    | 146 ++++++-------------
 dashboard-ui/scripts/livetvsuggested.js   |   8 +-
 dashboard-ui/scripts/moviesrecommended.js |  16 ++-
 dashboard-ui/scripts/musicrecommended.js  |   8 +-
 dashboard-ui/scripts/photos.js            |   9 +-
 dashboard-ui/scripts/site.js              |   4 +-
 dashboard-ui/scripts/tvrecommended.js     |  17 ++-
 dashboard-ui/tv.html                      | 142 +++++++++----------
 17 files changed, 430 insertions(+), 562 deletions(-)

diff --git a/dashboard-ui/channels.html b/dashboard-ui/channels.html
index cedf61908..b3884ce7e 100644
--- a/dashboard-ui/channels.html
+++ b/dashboard-ui/channels.html
@@ -1,4 +1,4 @@
-<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections,paper-tabs,neon-animated-pages">
+<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections,paper-tabs">
 
     <div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
         <paper-tabs hidescrollbuttons noink>
@@ -10,21 +10,15 @@
             <a href="channels.html?tab=1">${TabChannels}</a>
         </div>
     </div>
-    <div class="ehsContent fullWidth">
-        <neon-animated-pages>
-            <neon-animatable>
-                <div class="pageTabContent latestContent">
-                    <div class="latestItems"></div>
-                </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent channelsContent">
-                    <div class="viewSettings">
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
-                </div>
-            </neon-animatable>
-        </neon-animated-pages>
+    <div class="ehsContent fullWidth pageTabsContainer">
+        <div class="pageTabContent latestContent hide">
+            <div class="latestItems"></div>
+        </div>
+        <div class="pageTabContent channelsContent hide">
+            <div class="viewSettings">
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        </div>
     </div>
 
     <div data-role="content">
diff --git a/dashboard-ui/home.html b/dashboard-ui/home.html
index 64ca8a7f9..a6193ca84 100644
--- a/dashboard-ui/home.html
+++ b/dashboard-ui/home.html
@@ -15,51 +15,41 @@
         </div>
     </div>
 
-    <div class="ehsContent fullWidth">
-        <neon-animated-pages>
-            <neon-animatable>
-                <div class="pageTabContent homeTabContent" data-index="0">
-                    <div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
-                        <h1 style="margin-top: 0;" class="tourHeader"></h1>
-                        <p>
-                            <paper-button raised class="submit block btnTakeTour"><iron-icon icon="check"></iron-icon><span class="tourButtonText"></span></paper-button>
-                        </p>
-                    </div>
+    <div class="ehsContent fullWidth pageTabsContainer">
+        <div class="pageTabContent homeTabContent hide" data-index="0">
+            <div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
+                <h1 style="margin-top: 0;" class="tourHeader"></h1>
+                <p>
+                    <paper-button raised class="submit block btnTakeTour"><iron-icon icon="check"></iron-icon><span class="tourButtonText"></span></paper-button>
+                </p>
+            </div>
 
-                    <div class="sections"></div>
+            <div class="sections"></div>
+        </div>
+        <div class="pageTabContent homeNextUpTabContent hide" data-index="1">
+            <div class="homePageSection">
+                <div>
+                    <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
+                    <paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent homeNextUpTabContent" data-index="1">
-                    <div class="homePageSection">
-                        <div>
-                            <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
-                            <paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
-                        </div>
-                        <div id="nextUpItems" class="itemsContainer">
-                        </div>
-                    </div>
-                    <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
+                <div id="nextUpItems" class="itemsContainer">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent homeFavoritesTabContent" data-index="2">
-                    <div class="favoriteSections"></div>
-                </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent homeUpcomingTabContent" data-index="3">
-                    <div id="upcomingItems" class="itemsContainer">
-                    </div>
-                    <div class="noItemsMessage" style="display: none;">
-                        <p>${MessageNothingHere}</p>
-                        <p>
-                            <a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>
-                        </p>
-                    </div>
-                </div>
-            </neon-animatable>
-        </neon-animated-pages>
+            </div>
+            <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
+        </div>
+        <div class="pageTabContent homeFavoritesTabContent hide" data-index="2">
+            <div class="favoriteSections"></div>
+        </div>
+        <div class="pageTabContent homeUpcomingTabContent hide" data-index="3">
+            <div id="upcomingItems" class="itemsContainer">
+            </div>
+            <div class="noItemsMessage" style="display: none;">
+                <p>${MessageNothingHere}</p>
+                <p>
+                    <a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>
+                </p>
+            </div>
+        </div>
     </div>
 
     <div data-role="content">
diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html
index f4041589f..d529211d3 100644
--- a/dashboard-ui/livetv.html
+++ b/dashboard-ui/livetv.html
@@ -1,4 +1,4 @@
-<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-tabs,neon-animated-pages,paper-checkbox">
+<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-tabs,paper-checkbox">
 
     <div class="libraryViewNav libraryViewNavWithMinHeight">
         <paper-tabs hidescrollbuttons noink>
@@ -19,95 +19,81 @@
         </div>
     </div>
 
-    <div class="ehsContent fullWidth">
-        <neon-animated-pages>
-            <neon-animatable>
-                <div class="pageTabContent suggestedTabContent" data-index="0">
-                    <div id="activePrograms" class="homePageSection">
-                        <h1 class="listHeader">${HeaderWhatsOnTV}</h1>
-                        <div class="activeProgramItems itemsContainer noautoinit"></div>
-                        <br />
-                    </div>
-                    <div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;">
-                        <h1 class="listHeader">${HeaderUpcomingPrograms}</h1>
-                        <div class="upcomingProgramItems itemsContainer noautoinit"></div>
-                        <br />
-                    </div>
-                    <div id="upcomingTvMovies" class="homePageSection" style="margin-top: 1em;">
-                        <div>
-                            <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingMovies}</h1>
-                            <a href="livetvitems.html?type=movies" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
-                        </div>
-                        <div class="upcomingTvMovieItems itemsContainer noautoinit"></div>
-                        <br />
-                    </div>
-                    <div id="upcomingSports" class="homePageSection" style="margin-top: 1em;">
-                        <div>
-                            <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingSports}</h1>
-                            <a href="livetvitems.html?type=sports" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
-                        </div>
-                        <div class="upcomingSportsItems itemsContainer noautoinit"></div>
-                        <br />
-                    </div>
-                    <div id="upcomingKids" class="homePageSection" style="margin-top: 1em;">
-                        <div>
-                            <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingForKids}</h1>
-                            <a href="livetvitems.html?type=kids" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
-                        </div>
-                        <div class="upcomingKidsItems itemsContainer noautoinit"></div>
-                        <br />
-                    </div>
+    <div class="ehsContent fullWidth pageTabsContainer">
+        <div class="pageTabContent suggestedTabContent hide" data-index="0">
+            <div id="activePrograms" class="homePageSection">
+                <h1 class="listHeader">${HeaderWhatsOnTV}</h1>
+                <div class="activeProgramItems itemsContainer noautoinit"></div>
+                <br />
+            </div>
+            <div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;">
+                <h1 class="listHeader">${HeaderUpcomingPrograms}</h1>
+                <div class="upcomingProgramItems itemsContainer noautoinit"></div>
+                <br />
+            </div>
+            <div id="upcomingTvMovies" class="homePageSection" style="margin-top: 1em;">
+                <div>
+                    <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingMovies}</h1>
+                    <a href="livetvitems.html?type=movies" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent guideTabContent" style="width: auto;" data-index="1">
+                <div class="upcomingTvMovieItems itemsContainer noautoinit"></div>
+                <br />
+            </div>
+            <div id="upcomingSports" class="homePageSection" style="margin-top: 1em;">
+                <div>
+                    <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingSports}</h1>
+                    <a href="livetvitems.html?type=sports" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent channelsTabContent" data-index="2">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer" style="max-width: 800px; margin: 0 auto;"></div>
+                <div class="upcomingSportsItems itemsContainer noautoinit"></div>
+                <br />
+            </div>
+            <div id="upcomingKids" class="homePageSection" style="margin-top: 1em;">
+                <div>
+                    <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingForKids}</h1>
+                    <a href="livetvitems.html?type=kids" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent recordingsTabContent" data-index="3">
-                    <div id="activeRecordings" class="homePageSection hide">
-                        <h1 class="listHeader">${HeaderActiveRecordings}</h1>
-                        <div class="recordingItems itemsContainer"></div>
-                        <br />
-                    </div>
-                    <div id="latestRecordings" class="homePageSection hide">
-                        <div>
-                            <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1>
-                            <paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
-                        </div>
-                        <div class="recordingItems itemsContainer"></div>
-                        <br />
-                    </div>
-                    <div id="recordingGroups" style="display: none;" class="homePageSection">
-                        <h1 class="listHeader">
-                            <a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a>
-                        </h1>
-                        <div id="recordingGroupItems"></div>
-                    </div>
+                <div class="upcomingKidsItems itemsContainer noautoinit"></div>
+                <br />
+            </div>
+        </div>
+        <div class="pageTabContent guideTabContent hide" style="width: auto;" data-index="1">
+        </div>
+        <div class="pageTabContent channelsTabContent hide" data-index="2">
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent timersTabContent" data-index="4">
-                    <div style="max-width: 700px; margin: 0 auto;" id="items">
-                    </div>
+            </div>
+            <div id="items" class="itemsContainer" style="max-width: 800px; margin: 0 auto;"></div>
+        </div>
+        <div class="pageTabContent recordingsTabContent hide" data-index="3">
+            <div id="activeRecordings" class="homePageSection hide">
+                <h1 class="listHeader">${HeaderActiveRecordings}</h1>
+                <div class="recordingItems itemsContainer"></div>
+                <br />
+            </div>
+            <div id="latestRecordings" class="homePageSection hide">
+                <div>
+                    <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1>
+                    <paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent seriesTimersTabContent" data-index="5">
-                    <div style="max-width: 700px; margin: 0 auto;" id="items">
-                    </div>
-                </div>
-            </neon-animatable>
-        </neon-animated-pages>
+                <div class="recordingItems itemsContainer"></div>
+                <br />
+            </div>
+            <div id="recordingGroups" style="display: none;" class="homePageSection">
+                <h1 class="listHeader">
+                    <a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a>
+                </h1>
+                <div id="recordingGroupItems"></div>
+            </div>
+        </div>
+        <div class="pageTabContent timersTabContent hide" data-index="4">
+            <div style="max-width: 700px; margin: 0 auto;" id="items">
+            </div>
+        </div>
+        <div class="pageTabContent seriesTimersTabContent hide" data-index="5">
+            <div style="max-width: 700px; margin: 0 auto;" id="items">
+            </div>
+        </div>
     </div>
 
     <div data-role="content">
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index 50c5a4d78..57cafc0a4 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -1,4 +1,4 @@
-<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paper-tabs,neon-animated-pages,paper-checkbox,paper-fab,scripts/alphapicker">
+<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paper-tabs,paper-checkbox,paper-fab,scripts/alphapicker">
 
     <div class="libraryViewNav libraryViewNavWithMinHeight">
         <paper-tabs hidescrollbuttons noink>
@@ -19,96 +19,82 @@
         </div>
     </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="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
-                        </div>
-
-                        <div id="resumableItems" class="itemsContainer noautoinit">
-                        </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="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
-                        </div>
-
-                        <div id="recentlyAddedItems" class="itemsContainer noautoinit">
-                        </div>
-                    </div>
-
-                    <div class="recommendations homePageSection">
-                    </div>
-                    <div class="noItemsMessage" style="display: none;">
-                        <br />
-                        <p>${MessageNoMovieSuggestionsAvailable}</p>
-                    </div>
+    <div class="ehsContent fullWidth pageTabsContainer">
+        <div class="pageTabContent hide" 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="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="1">
-                    <div class="alphabetPicker">
-                    </div>
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div class="itemsContainer" style="text-align:center;"></div>
-                </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="2">
-                    <div class="alphabetPicker">
-                    </div>
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div class="itemsContainer" style="text-align:center;"></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" style="text-align:center;"></div>
-                    <div class="noItemsMessage" style="display: none; text-align: center;">
-                        <p>${MessageNoCollectionsAvailable}</p>
-                    </div>
+                <div id="resumableItems" class="itemsContainer noautoinit">
+                </div>
+            </div>
 
-                    <paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
+            <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="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="4">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div class="itemsContainer"></div>
+
+                <div id="recentlyAddedItems" class="itemsContainer noautoinit">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="5">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div class="itemsContainer" style="text-align:center;"></div>
+            </div>
+
+            <div class="recommendations homePageSection">
+            </div>
+            <div class="noItemsMessage" style="display: none;">
+                <br />
+                <p>${MessageNoMovieSuggestionsAvailable}</p>
+            </div>
+        </div>
+        <div class="pageTabContent hide" data-index="1">
+            <div class="alphabetPicker">
+            </div>
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-            </neon-animatable>
-        </neon-animated-pages>
+            </div>
+            <div class="itemsContainer" style="text-align:center;"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="2">
+            <div class="alphabetPicker">
+            </div>
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div class="itemsContainer" style="text-align:center;"></div>
+            <p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
+        </div>
+        <div class="pageTabContent hide" data-index="3">
+            <div class="viewSettings">
+
+                <div class="listTopPaging">
+                    &nbsp;
+                </div>
+            </div>
+            <div class="itemsContainer" 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>
+        <div class="pageTabContent hide" data-index="4">
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div class="itemsContainer"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="5">
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div class="itemsContainer" style="text-align:center;"></div>
+        </div>
     </div>
 
     <div data-role="content">
diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html
index 6dd5164ea..268f92078 100644
--- a/dashboard-ui/music.html
+++ b/dashboard-ui/music.html
@@ -1,4 +1,4 @@
-<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,paper-tabs,neon-animated-pages,paper-checkbox,scripts/alphapicker">
+<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,paper-tabs,paper-checkbox,scripts/alphapicker">
     <div class="libraryViewNav libraryViewNavWithMinHeight">
         <paper-tabs hidescrollbuttons noink>
             <paper-tab>${TabSuggestions}</paper-tab>
@@ -20,103 +20,87 @@
         </div>
     </div>
 
-    <div class="ehsContent fullWidth">
+    <div class="ehsContent fullWidth pageTabsContainer">
 
-        <neon-animated-pages>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="0">
-                    <div class="homePageSection">
-                        <h1 class="listHeader">${HeaderLatestMusic}</h1>
+        <div class="pageTabContent hide" data-index="0">
+            <div class="homePageSection">
+                <h1 class="listHeader">${HeaderLatestMusic}</h1>
 
-                        <div id="recentlyAddedSongs" class="itemsContainer noautoinit" style="text-align:left;">
-                        </div>
-                    </div>
-
-                    <div id="playlists" style="display: none;" class="homePageSection">
-                        <h1 class="listHeader">${HeaderPlaylists}</h1>
-
-                        <div class="itemsContainer noautoinit" style="text-align:left;">
-                        </div>
-                    </div>
-
-                    <div id="recentlyPlayed" style="display: none;" class="homePageSection">
-                        <h1 class="listHeader">${HeaderRecentlyPlayed}</h1>
-
-                        <div id="recentlyPlayedSongs" class="itemsContainer noautoinit" style="text-align:left;">
-                        </div>
-                    </div>
-
-                    <div id="topPlayed" style="display: none;" class="homePageSection">
-                        <h1 class="listHeader">${HeaderFrequentlyPlayed}</h1>
-
-                        <div id="topPlayedSongs" class="itemsContainer noautoinit" style="text-align: left;">
-                        </div>
-                    </div>
-
-                    <div class="favoriteSections homePageSection"></div>
+                <div id="recentlyAddedSongs" class="itemsContainer noautoinit" style="text-align:left;">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="1">
-                    <div class="alphabetPicker">
-                    </div>
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer"></div>
+            </div>
+
+            <div id="playlists" style="display: none;" class="homePageSection">
+                <h1 class="listHeader">${HeaderPlaylists}</h1>
+
+                <div class="itemsContainer noautoinit" style="text-align:left;">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="2">
-                    <div class="alphabetPicker">
-                    </div>
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+            </div>
+
+            <div id="recentlyPlayed" style="display: none;" class="homePageSection">
+                <h1 class="listHeader">${HeaderRecentlyPlayed}</h1>
+
+                <div id="recentlyPlayedSongs" class="itemsContainer noautoinit" style="text-align:left;">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="3">
-                    <div class="alphabetPicker">
-                    </div>
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+            </div>
+
+            <div id="topPlayed" style="display: none;" class="homePageSection">
+                <h1 class="listHeader">${HeaderFrequentlyPlayed}</h1>
+
+                <div id="topPlayedSongs" class="itemsContainer noautoinit" style="text-align: left;">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="4">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
+            </div>
+
+            <div class="favoriteSections homePageSection"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="1">
+            <div class="alphabetPicker">
+            </div>
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="5">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer"></div>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="2">
+            <div class="alphabetPicker">
+            </div>
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="6">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer"></div>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="3">
+            <div class="alphabetPicker">
+            </div>
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-            </neon-animatable>
-        </neon-animated-pages>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="4">
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="5">
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="6">
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        </div>
     </div>
 
     <div data-role="content">
diff --git a/dashboard-ui/photos.html b/dashboard-ui/photos.html
index 396b69494..7a03a2f1c 100644
--- a/dashboard-ui/photos.html
+++ b/dashboard-ui/photos.html
@@ -1,4 +1,4 @@
-<div id="photosPage" data-role="page" data-dom-cache="true" class="page libraryPage pageWithAbsoluteTabs" data-require="scripts/photos,paper-tabs,neon-animated-pages">
+<div id="photosPage" data-role="page" data-dom-cache="true" class="page libraryPage pageWithAbsoluteTabs" data-require="scripts/photos,paper-tabs">
 
     <div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
         <paper-tabs hidescrollbuttons noink>
@@ -13,35 +13,29 @@
         </div>
     </div>
 
-    <neon-animated-pages>
-        <neon-animatable>
-            <div class="pageTabContent albumTabContent">
-                <div class="viewSettings">
-                    <div class="listTopPaging">
-                    </div>
-                </div>
-                <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
-            </div>
-        </neon-animatable>
-        <div class="pageTabContent photoTabContent">
+    <div class="pageTabsContainer">
+        <div class="pageTabContent albumTabContent hide">
             <div class="viewSettings">
                 <div class="listTopPaging">
                 </div>
             </div>
             <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
         </div>
-        <neon-animatable>
-        </neon-animatable>
-        <neon-animatable>
-            <div class="pageTabContent videoTabContent">
-                <div class="viewSettings">
-                    <div class="listTopPaging">
-                    </div>
+        <div class="pageTabContent photoTabContent hide">
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-                <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
             </div>
-        </neon-animatable>
-    </neon-animated-pages>
+            <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        </div>
+        <div class="pageTabContent videoTabContent hide">
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        </div>
+    </div>
 
     <div data-role="content">
     </div>
diff --git a/dashboard-ui/scripts/channels.js b/dashboard-ui/scripts/channels.js
index c59bd5619..a937da54a 100644
--- a/dashboard-ui/scripts/channels.js
+++ b/dashboard-ui/scripts/channels.js
@@ -75,12 +75,12 @@
         var page = this;
 
         var tabs = page.querySelector('paper-tabs');
-        var pages = page.querySelector('neon-animated-pages');
+        var pageTabsContainer = page.querySelector('.pageTabsContainer');
 
-        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages, 'channels.html');
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, 'channels.html');
 
-        pages.addEventListener('tabchange', function (e) {
-            loadTab(page, parseInt(e.target.selected));
+        pageTabsContainer.addEventListener('tabchange', function (e) {
+            loadTab(page, parseInt(e.detail.selectedTabIndex));
         });
 
     });
diff --git a/dashboard-ui/scripts/channelslatest.js b/dashboard-ui/scripts/channelslatest.js
index 51004f33c..11428bdd5 100644
--- a/dashboard-ui/scripts/channelslatest.js
+++ b/dashboard-ui/scripts/channelslatest.js
@@ -26,10 +26,10 @@
     pageIdOn('pageinit', "channelsPage", function () {
 
         var page = this;
-        var pages = page.querySelector('neon-animated-pages');
+        var pageTabsContainer = page.querySelector('.pageTabsContainer');
 
-        pages.addEventListener('tabchange', function (e) {
-            loadTab(page, parseInt(e.target.selected));
+        pageTabsContainer.addEventListener('tabchange', function (e) {
+            loadTab(page, parseInt(e.detail.selectedTabIndex));
         });
 
     });
diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js
index d8afc051d..c1d384eb7 100644
--- a/dashboard-ui/scripts/indexpage.js
+++ b/dashboard-ui/scripts/indexpage.js
@@ -276,9 +276,13 @@
 
         if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
             var page = $.mobile.activePage;
-            var pages = page.querySelector('neon-animated-pages');
+            var pageTabsContainer = page.querySelector('.pageTabsContainer');
 
-            pages.dispatchEvent(new CustomEvent("tabchange", {}));
+            pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
+                detail: {
+                    selectedTabIndex: libraryBrowser.selectedTabIndex(pageTabsContainer)
+                }
+            }));
         }
     }
 
@@ -295,12 +299,12 @@
 
         var self = this;
 
-        var pages = view.querySelector('neon-animated-pages');
+        var pageTabsContainer = view.querySelector('.pageTabsContainer');
 
-        libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pages, 'home.html');
+        libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, 'home.html');
 
-        pages.addEventListener('tabchange', function (e) {
-            loadTab(view, parseInt(e.target.selected));
+        pageTabsContainer.addEventListener('tabchange', function (e) {
+            loadTab(view, parseInt(e.detail.selectedTabIndex));
         });
 
         view.querySelector('.btnTakeTour').addEventListener('click', function () {
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 4ed9d4a63..7d8ab6404 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -180,23 +180,6 @@
                 return AppInfo.isNativeApp;
             },
 
-            animatePaperTabs: function () {
-
-                if (!LibraryBrowser.enableFullPaperTabs()) {
-                    return false;
-                }
-
-                if (!browserInfo.animate) {
-                    return false;
-                }
-
-                if (browserInfo.mobile) {
-                    return false;
-                }
-
-                return true;
-            },
-
             allowSwipe: function (target) {
 
                 function allowSwipeOn(elem) {
@@ -246,39 +229,42 @@
 
             },
 
-            configureSwipeTabs: function (ownerpage, tabs, pages) {
+            selectedTab: function (pageTabsContainer, selected) {
 
-                if (LibraryBrowser.animatePaperTabs()) {
-                    if (browserInfo.mobile) {
+                if (selected == null) {
 
-                        require(['slide-left-animation', 'slide-from-right-animation'], function () {
-                            pages.entryAnimation = 'slide-from-right-animation';
-                            pages.exitAnimation = 'slide-left-animation';
-                        });
-                    } else {
-
-                        require(['fade-in-animation', 'fade-out-animation'], function () {
-                            pages.entryAnimation = 'fade-in-animation';
-                            pages.exitAnimation = 'fade-out-animation';
-                        });
-                    }
+                    return pageTabsContainer.selectedTabIndex;
                 }
 
-                var pageCount = pages.querySelectorAll('neon-animatable').length;
+                var tabs = pageTabsContainer.querySelectorAll('.pageTabContent');
+                for (var i = 0, length = tabs.length; i < length; i++) {
+                    if (i == selected) {
+                        tabs[i].classList.remove('hide');
+                    } else {
+                        tabs[i].classList.add('hide');
+                    }
+                }
+                pageTabsContainer.selectedTabIndex = selected;
+                pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
+                    detail: {
+                        selectedTabIndex: selected
+                    }
+                }));
+            },
+
+            configureSwipeTabs: function (ownerpage, tabs, pageTabsContainer) {
+
+                var pageCount = pageTabsContainer.querySelectorAll('.pageTabContent').length;
 
                 require(['hammer'], function (Hammer) {
 
-                    var hammertime = new Hammer(pages);
+                    var hammertime = new Hammer(pageTabsContainer);
                     hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
 
                     hammertime.on('swipeleft', function (e) {
                         if (LibraryBrowser.allowSwipe(e.target)) {
-                            var selected = parseInt(pages.selected || '0');
+                            var selected = parseInt(LibraryBrowser.selectedTab(pageTabsContainer) || '0');
                             if (selected < (pageCount - 1)) {
-                                if (LibraryBrowser.animatePaperTabs()) {
-                                    pages.entryAnimation = 'slide-from-right-animation';
-                                    pages.exitAnimation = 'slide-left-animation';
-                                }
                                 tabs.selectNext();
                             }
                         }
@@ -286,12 +272,8 @@
 
                     hammertime.on('swiperight', function (e) {
                         if (LibraryBrowser.allowSwipe(e.target)) {
-                            var selected = parseInt(pages.selected || '0');
+                            var selected = parseInt(LibraryBrowser.selectedTab(pageTabsContainer) || '0');
                             if (selected > 0) {
-                                if (LibraryBrowser.animatePaperTabs()) {
-                                    pages.entryAnimation = 'slide-from-left-animation';
-                                    pages.exitAnimation = 'slide-right-animation';
-                                }
                                 tabs.selectPrevious();
                             }
                         }
@@ -303,7 +285,7 @@
                 return !LibraryBrowser.enableFullPaperTabs();
             },
 
-            configurePaperLibraryTabs: function (ownerpage, tabs, pages) {
+            configurePaperLibraryTabs: function (ownerpage, tabs, pageTabsContainer) {
 
                 // Causing iron-select to not fire in IE and safari
                 if (browserInfo.chrome) {
@@ -317,7 +299,7 @@
                         tabs.noSlide = true;
                         tabs.noBar = true;
                     } else {
-                        LibraryBrowser.configureSwipeTabs(ownerpage, tabs, pages);
+                        LibraryBrowser.configureSwipeTabs(ownerpage, tabs, pageTabsContainer);
                     }
 
                     if (libraryViewNav) {
@@ -333,9 +315,9 @@
                     var legacyTabs = ownerpage.querySelector('.legacyTabs');
 
                     if (legacyTabs) {
-                        pages.addEventListener('iron-select', function (e) {
+                        pageTabsContainer.addEventListener('tabchange', function (e) {
 
-                            var selected = pages.selected;
+                            var selected = e.detail.selectedTabIndex;
                             var anchors = legacyTabs.querySelectorAll('a');
                             for (var i = 0, length = anchors.length; i < length; i++) {
                                 if (i == selected) {
@@ -354,41 +336,10 @@
 
                 ownerpage.addEventListener('viewbeforeshow', LibraryBrowser.onTabbedpagebeforeshow);
 
-                pages.addEventListener('iron-select', function () {
-                    // When transition animations are used, add a content loading delay to allow the animations to finish
-                    // Otherwise with both operations happening at the same time, it can cause the animation to not run at full speed.
-                    var pgs = this;
-                    var delay = LibraryBrowser.animatePaperTabs() || !tabs.noSlide ? 300 : 0;
-
-                    setTimeout(function () {
-                        pgs.dispatchEvent(new CustomEvent("tabchange", {}));
-                    }, delay);
-                });
-
-                function fadeOutLeft(elem, iterations) {
-                    var keyframes = [{ opacity: '1', transform: 'none', offset: 0 },
-                      { opacity: '0', transform: 'translate3d(-100%, 0, 0)', offset: 1 }];
-                    var timing = { duration: 300, iterations: iterations };
-                    return elem.animate(keyframes, timing);
-                }
                 if (!LibraryBrowser.navigateOnLibraryTabSelect()) {
                     tabs.addEventListener('iron-select', function () {
 
-                        var animateTab = !browserInfo.safari;
-                        animateTab = false;
-
-                        var selected = pages.selected;
-                        if (selected != null && animateTab) {
-                            var newValue = this.selected;
-                            var currentTab = pages.querySelectorAll('.pageTabContent')[selected];
-
-                            fadeOutLeft(currentTab, 1).onfinish = function () {
-                                pages.selected = newValue;
-                            };
-                        }
-                        else {
-                            pages.selected = this.selected;
-                        }
+                        LibraryBrowser.selectedTab(pageTabsContainer, this.selected);
                     });
                 }
             },
@@ -417,7 +368,7 @@
 
             onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) {
 
-                var pages = page.querySelector('neon-animated-pages');
+                var pageTabsContainer = page.querySelector('.pageTabsContainer');
 
                 if (isFirstLoad) {
 
@@ -437,29 +388,24 @@
                         tabs.selected = selected;
 
                     } else {
-                        pages.selected = selected;
+                        LibraryBrowser.selectedTab(pageTabsContainer, selected);
                     }
 
                 } else {
 
                     // Go back to the first tab
                     if (LibraryBrowser.enableFullPaperTabs() && !e.detail.isRestored) {
-                        if (pages.selected) {
-
-                            var entryAnimation = pages.entryAnimation;
-                            var exitAnimation = pages.exitAnimation;
-                            pages.entryAnimation = null;
-                            pages.exitAnimation = null;
+                        if (LibraryBrowser.selectedTab(pageTabsContainer)) {
 
                             page.querySelector('paper-tabs').selected = 0;
-
-                            pages.entryAnimation = entryAnimation;
-                            pages.exitAnimation = exitAnimation;
-
                             return;
                         }
                     }
-                    pages.dispatchEvent(new CustomEvent("tabchange", {}));
+                    pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
+                        detail: {
+                            selectedTabIndex: 0
+                        }
+                    }));
                 }
             },
 
@@ -479,14 +425,9 @@
                     document.removeEventListener('pagebeforeshow', afterNavigate);
                     if (window.location.href.toLowerCase().indexOf(url.toLowerCase()) != -1) {
 
-                        var pages = this.querySelector('neon-animated-pages');
+                        var pageTabsContainer = this.querySelector('.pageTabsContainer');
 
-                        if (pages) {
-
-                            var entryAnimation = pages.entryAnimation;
-                            var exitAnimation = pages.exitAnimation;
-                            pages.entryAnimation = null;
-                            pages.exitAnimation = null;
+                        if (pageTabsContainer) {
 
                             var tabs = this.querySelector('paper-tabs');
 
@@ -497,9 +438,6 @@
                                 var noSlide = tabs.noSlide;
                                 tabs.noSlide = true;
                                 tabs.selected = index;
-
-                                pages.entryAnimation = entryAnimation;
-                                pages.exitAnimation = exitAnimation;
                                 tabs.noSlide = noSlide;
 
                             }, delay);
@@ -1687,7 +1625,7 @@
                 function getValue(shape) {
 
                     switch (shape) {
-                    
+
                         case 'portrait':
                             if (screenWidth >= 2200) return 10;
                             if (screenWidth >= 2100) return 9;
@@ -3196,7 +3134,7 @@
             markDislike: function (link) {
 
                 // TODO: remove jQuery
-                require(['jQuery'], function($) {
+                require(['jQuery'], function ($) {
                     var id = link.getAttribute('data-itemid');
 
                     var $link = $(link);
diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js
index 18d7f2a4e..6c81df036 100644
--- a/dashboard-ui/scripts/livetvsuggested.js
+++ b/dashboard-ui/scripts/livetvsuggested.js
@@ -197,12 +197,12 @@
         var page = this;
 
         var tabs = page.querySelector('paper-tabs');
-        var pages = page.querySelector('neon-animated-pages');
+        var pageTabsContainer = page.querySelector('.pageTabsContainer');
 
-        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages, 'livetv.html');
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, 'livetv.html');
 
-        pages.addEventListener('tabchange', function (e) {
-            loadTab(page, parseInt(e.target.selected));
+        pageTabsContainer.addEventListener('tabchange', function (e) {
+            loadTab(page, parseInt(e.detail.selectedTabIndex));
         });
 
     });
diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js
index 73e984cac..266ac6f73 100644
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@@ -333,7 +333,7 @@
         $('.recommendations', page).createCardMenus();
 
         var tabs = page.querySelector('paper-tabs');
-        var pages = page.querySelector('neon-animated-pages');
+        var pageTabsContainer = page.querySelector('.pageTabsContainer');
 
         var baseUrl = 'movies.html';
         var topParentId = LibraryMenu.getTopParentId();
@@ -341,10 +341,10 @@
             baseUrl += '?topParentId=' + topParentId;
         }
 
-        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages, baseUrl);
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, baseUrl);
 
-        pages.addEventListener('tabchange', function (e) {
-            loadTab(page, parseInt(e.target.selected));
+        pageTabsContainer.addEventListener('tabchange', function (e) {
+            loadTab(page, parseInt(e.detail.selectedTabIndex));
         });
     });
 
@@ -384,9 +384,13 @@
 
         if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
             var page = $($.mobile.activePage)[0];
-            var pages = page.querySelector('neon-animated-pages');
+            var pageTabsContainer = page.querySelector('.pageTabsContainer');
 
-            pages.dispatchEvent(new CustomEvent("tabchange", {}));
+            pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
+                detail: {
+                    selectedTabIndex: libraryBrowser.selectedTabIndex(pageTabsContainer)
+                }
+            }));
         }
     }
 
diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js
index 52273ee56..38007a7f5 100644
--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@@ -286,7 +286,7 @@
         $('.recommendations', page).createCardMenus();
 
         var tabs = page.querySelector('paper-tabs');
-        var pages = page.querySelector('neon-animated-pages');
+        var pageTabsContainer = page.querySelector('.pageTabsContainer');
 
         var baseUrl = 'music.html';
         var topParentId = LibraryMenu.getTopParentId();
@@ -294,10 +294,10 @@
             baseUrl += '?topParentId=' + topParentId;
         }
 
-        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages, baseUrl);
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, baseUrl);
 
-        pages.addEventListener('tabchange', function (e) {
-            loadTab(page, parseInt(e.target.selected));
+        pageTabsContainer.addEventListener('tabchange', function (e) {
+            loadTab(page, parseInt(e.detail.selectedTabIndex));
         });
 
     });
diff --git a/dashboard-ui/scripts/photos.js b/dashboard-ui/scripts/photos.js
index aac886205..1f848dac0 100644
--- a/dashboard-ui/scripts/photos.js
+++ b/dashboard-ui/scripts/photos.js
@@ -155,8 +155,7 @@
         var info = LibraryBrowser.getListItemInfo(this);
 
         if (info.mediaType == 'Photo') {
-            var tab = page.querySelector('neon-animated-pages').selected;
-            var query = getQuery(tab);
+            var query = getQuery(LibraryBrowser.selectedTabIndex(page.querySelector('.pageTabsContainer')));
 
             Photos.startSlideshow(page, query, info.id);
             return false;
@@ -199,10 +198,10 @@
             baseUrl += '?topParentId=' + topParentId;
         }
 
-        LibraryBrowser.configurePaperLibraryTabs(page, tabs, page.querySelector('neon-animated-pages'), baseUrl);
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, page.querySelector('.pageTabsContainer'), baseUrl);
 
-        page.querySelector('neon-animated-pages').addEventListener('tabchange', function (e) {
-            loadTab(page, parseInt(e.target.selected));
+        page.querySelector('.pageTabsContainer').addEventListener('tabchange', function (e) {
+            loadTab(page, parseInt(e.detail.selectedTabIndex));
         });
 
         $(page).on('click', '.mediaItem', onListItemClick);
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index a61f11f30..c28b9e83a 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -2426,7 +2426,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/home.html',
-            dependencies: ['paper-tabs', 'neon-animated-pages'],
+            dependencies: ['paper-tabs'],
             autoFocus: false,
             controller: 'scripts/indexpage'
         });
@@ -2813,7 +2813,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/tv.html',
-            dependencies: ['paper-tabs', 'neon-animated-pages', 'paper-checkbox'],
+            dependencies: ['paper-tabs', 'paper-checkbox'],
             autoFocus: false,
             controller: 'scripts/tvrecommended'
         });
diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js
index f7f4d3d2f..422a0ff5f 100644
--- a/dashboard-ui/scripts/tvrecommended.js
+++ b/dashboard-ui/scripts/tvrecommended.js
@@ -234,13 +234,18 @@
         function onPlaybackStop(e, state) {
 
             if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
-                var pages = view.querySelector('neon-animated-pages');
 
-                pages.dispatchEvent(new CustomEvent("tabchange", {}));
+                var pageTabsContainer = view.querySelector('.pageTabsContainer');
+
+                pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
+                    detail: {
+                        selectedTabIndex: libraryBrowser.selectedTabIndex(pageTabsContainer)
+                    }
+                }));
             }
         }
 
-        var pages = view.querySelector('neon-animated-pages');
+        var pageTabsContainer = view.querySelector('.pageTabsContainer');
 
         var baseUrl = 'tv.html';
         var topParentId = params.topParentId;
@@ -255,10 +260,10 @@
         }
         libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
 
-        libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pages, baseUrl);
+        libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, baseUrl);
 
-        pages.addEventListener('tabchange', function (e) {
-            loadTab(view, parseInt(this.selected));
+        pageTabsContainer.addEventListener('tabchange', function (e) {
+            loadTab(view, parseInt(e.detail.selectedTabIndex));
         });
 
         view.addEventListener('viewbeforeshow', function (e) {
diff --git a/dashboard-ui/tv.html b/dashboard-ui/tv.html
index 753f49b9b..18f0ea453 100644
--- a/dashboard-ui/tv.html
+++ b/dashboard-ui/tv.html
@@ -21,94 +21,78 @@
         </div>
     </div>
 
-    <div class="ehsContent fullWidth">
-        <neon-animated-pages>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="0">
-                    <div id="resumableSection" 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="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
-                        </div>
+    <div class="ehsContent fullWidth pageTabsContainer">
+        <div class="pageTabContent hide" data-index="0">
+            <div id="resumableSection" 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="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
+                </div>
 
-                        <div id="resumableItems" class="itemsContainer noautoinit">
-                        </div>
-                    </div>
+                <div id="resumableItems" class="itemsContainer noautoinit">
+                </div>
+            </div>
 
-                    <div class="homePageSection">
-                        <div>
-                            <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
-                            <paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
-                        </div>
-                        <div id="nextUpItems" class="itemsContainer">
-                        </div>
-                    </div>
-                    <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
+            <div class="homePageSection">
+                <div>
+                    <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
+                    <paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="1">
-                    <div class="homePageSection">
-                        <div>
-                            <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
-                            <paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
-                        </div>
-                        <div id="latestEpisodes" class="itemsContainer">
-                        </div>
-                    </div>
+                <div id="nextUpItems" class="itemsContainer">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="2">
-                    <div id="upcomingItems">
-                    </div>
-                    <div class="noItemsMessage" style="display: none;">
-                        <p>${MessageNothingHere}</p>
-                        <p>
-                            <a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>
-                        </p>
-                    </div>
+            </div>
+            <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
+        </div>
+        <div class="pageTabContent hide" data-index="1">
+            <div class="homePageSection">
+                <div>
+                    <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
+                    <paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="3">
-                    <div class="alphabetPicker">
-                    </div>
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
+                <div id="latestEpisodes" class="itemsContainer">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="4">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer"></div>
+            </div>
+        </div>
+        <div class="pageTabContent hide" data-index="2">
+            <div id="upcomingItems">
+            </div>
+            <div class="noItemsMessage" style="display: none;">
+                <p>${MessageNothingHere}</p>
+                <p>
+                    <a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>
+                </p>
+            </div>
+        </div>
+        <div class="pageTabContent hide" data-index="3">
+            <div class="alphabetPicker">
+            </div>
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="5">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer"></div>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="4">
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-            </neon-animatable>
-            <neon-animatable>
-                <div class="pageTabContent" data-index="6">
-                    <div class="viewSettings">
-                        <div class="listTopPaging">
-                        </div>
-                    </div>
-                    <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="5">
+            <div class="viewSettings">
+                <div class="listTopPaging">
                 </div>
-            </neon-animatable>
-        </neon-animated-pages>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        </div>
+        <div class="pageTabContent hide" data-index="6">
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
+        </div>
     </div>
 
     <div data-role="content">