From 5b0ece51d2865c6a987bcc298db86f84f72bd5a3 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 18 Jun 2016 13:26:42 -0400
Subject: [PATCH] continue jquery removal

---
 .../filterdialog/filterdialog.template.html   |   2 +-
 dashboard-ui/connectlogin.html                |  10 +-
 dashboard-ui/itemlist.html                    |   8 +-
 dashboard-ui/livetv.html                      |   6 +-
 dashboard-ui/login.html                       |   4 +-
 dashboard-ui/scripts/connectlogin.js          | 295 +++++-----
 dashboard-ui/scripts/itemlistpage.js          | 205 ++++---
 dashboard-ui/scripts/livetvchannels.js        |  35 +-
 dashboard-ui/scripts/livetvitems.js           |  23 +-
 dashboard-ui/scripts/livetvrecordinglist.js   |   2 +-
 .../scripts/livetvtunerprovider-satip.js      |   2 +-
 dashboard-ui/scripts/loginpage.js             | 101 ++--
 dashboard-ui/scripts/selectserver.js          | 553 +++++++++---------
 dashboard-ui/scripts/site.js                  |  39 +-
 dashboard-ui/selectserver.html                |   2 +-
 15 files changed, 692 insertions(+), 595 deletions(-)

diff --git a/dashboard-ui/components/filterdialog/filterdialog.template.html b/dashboard-ui/components/filterdialog/filterdialog.template.html
index 9b777c51fe..66debc780a 100644
--- a/dashboard-ui/components/filterdialog/filterdialog.template.html
+++ b/dashboard-ui/components/filterdialog/filterdialog.template.html
@@ -5,7 +5,7 @@
     <div class="checkboxList">
         <label>
             <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard" data-filter="IsPlayed" />
-            <span>${OptionContinuing}</span>
+            <span>${OptionPlayed}</span>
         </label>
         <label>
             <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard" data-filter="IsUnPlayed" />
diff --git a/dashboard-ui/connectlogin.html b/dashboard-ui/connectlogin.html
index 150a673075..1d12eebac1 100644
--- a/dashboard-ui/connectlogin.html
+++ b/dashboard-ui/connectlogin.html
@@ -1,8 +1,8 @@
-<div id="connectLoginPage" data-role="page" class="page standalonePage connectLoginPage" data-theme="b" data-require="scripts/connectlogin,emby-input,emby-button">
+<div id="connectLoginPage" data-role="page" class="page standalonePage connectLoginPage" data-theme="b">
 
     <div data-role="content">
 
-        <form class="connectLoginForm" style="margin: 0 auto;display:none;">
+        <form class="connectLoginForm hide" style="margin: 0 auto">
 
             <div style="height:0; overflow: hidden;"><input type="text" name="fakeusernameremembered" tabindex="-1" /><input type="password" name="fakepasswordremembered" tabindex="-1" /></div>
 
@@ -36,7 +36,7 @@
             <div class="hide tvAppInfo"><br /><br /><iron-icon icon="new-releases" style="color: #52B54B"></iron-icon> Try the new <a href="//tv.emby.media" target="_blank">Emby Theater at tv.emby.media</a>, a remote-friendly app designed for your TV or large screen monitor.</div>
         </form>
 
-        <form class="manualServerForm" style="margin: 0 auto;display:none;">
+        <form class="manualServerForm hide" style="margin: 0 auto;;">
 
             <div style="display: none;">
                 <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
@@ -57,7 +57,7 @@
             <button is="emby-button" type="button" class="raised cancel block btnCancelManualServer"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
         </form>
 
-        <form class="signupForm" style="margin: 0 auto;display:none;">
+        <form class="signupForm hide" style="margin: 0 auto;">
 
             <div style="display: none;">
                 <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
@@ -85,7 +85,7 @@
             <button is="emby-button" type="button" class="raised cancel block btnCancelSignup"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
         </form>
 
-        <div class="welcomeContainer readOnlyContent" style="text-align: center; margin: 0 auto; display: none;">
+        <div class="welcomeContainer readOnlyContent hide" style="text-align: center; margin: 0 auto;">
 
             <div style="text-align: left;">
                 <h1>${HeaderWelcomeToEmby}</h1>
diff --git a/dashboard-ui/itemlist.html b/dashboard-ui/itemlist.html
index 6cdec15d67..eac0ebeeec 100644
--- a/dashboard-ui/itemlist.html
+++ b/dashboard-ui/itemlist.html
@@ -3,9 +3,11 @@
     </div>
     <div data-role="content" class="itemListContent">
 
-        <div class="viewSettings">
-            <div class="listTopPaging">
-            </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>
diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html
index 407de710a7..a28338b5e2 100644
--- a/dashboard-ui/livetv.html
+++ b/dashboard-ui/livetv.html
@@ -46,9 +46,9 @@
     <div class="pageTabContent ehsContent fullWidth flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0;">
     </div>
     <div class="pageTabContent ehsContent" id="channelsTab" data-index="2">
-        <div class="viewSettings">
-            <div class="listTopPaging">
-            </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
         </div>
         <div id="items" class="itemsContainer"></div>
     </div>
diff --git a/dashboard-ui/login.html b/dashboard-ui/login.html
index 7151f66469..9b4928d2ae 100644
--- a/dashboard-ui/login.html
+++ b/dashboard-ui/login.html
@@ -2,7 +2,7 @@
 
     <div data-role="content">
 
-        <form class="manualLoginForm" style="display: none; margin: 0 auto;">
+        <form class="manualLoginForm hide" style="margin: 0 auto;">
 
             <h1 style="text-align: left;">${HeaderPleaseSignIn}</h1>
 
@@ -41,7 +41,7 @@
         <div class="readOnlyContent" style="margin: .5em auto 1em;">
             <button is="emby-button" type="button" class="raised cancel block btnForgotPassword"><iron-icon icon="info"></iron-icon><span>${ButtonForgotPassword}</span></button>
 
-            <div class="connectButtons" style="display:none;">
+            <div class="connectButtons hide">
                 <a href="selectserver.html" class="clearLink">
                     <button is="emby-button" type="button" class="raised cancel block"><iron-icon icon="settings"></iron-icon><span>${ButtonChangeServer}</span></button>
                 </a>
diff --git a/dashboard-ui/scripts/connectlogin.js b/dashboard-ui/scripts/connectlogin.js
index f93f3d1064..67c88d57be 100644
--- a/dashboard-ui/scripts/connectlogin.js
+++ b/dashboard-ui/scripts/connectlogin.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     function login(page, username, password) {
 
@@ -18,7 +18,7 @@
                 title: Globalize.translate('HeaderLoginFailure')
             });
 
-            $('#txtManualPassword', page).val('');
+            page.querySelector('#txtManualPassword').value = '';
 
         });
 
@@ -102,28 +102,29 @@
     function loadMode(page, mode) {
 
         if (mode == 'welcome') {
-            $('.connectLoginForm', page).hide();
-            $('.welcomeContainer', page).show();
-            $('.manualServerForm', page).hide();
-            $('.signupForm', page).hide();
+
+            page.querySelector('.connectLoginForm').classList.add('hide');
+            page.querySelector('.welcomeContainer').classList.remove('hide');
+            page.querySelector('.manualServerForm').classList.add('hide');
+            page.querySelector('.signupForm').classList.add('hide');
         }
         else if (mode == 'connect') {
-            $('.connectLoginForm', page).show();
-            $('.welcomeContainer', page).hide();
-            $('.manualServerForm', page).hide();
-            $('.signupForm', page).hide();
+            page.querySelector('.connectLoginForm').classList.remove('hide');
+            page.querySelector('.welcomeContainer').classList.add('hide');
+            page.querySelector('.manualServerForm').classList.add('hide');
+            page.querySelector('.signupForm').classList.add('hide');
         }
         else if (mode == 'manualserver') {
-            $('.manualServerForm', page).show();
-            $('.connectLoginForm', page).hide();
-            $('.welcomeContainer', page).hide();
-            $('.signupForm', page).hide();
+            page.querySelector('.manualServerForm').classList.remove('hide');
+            page.querySelector('.connectLoginForm').classList.add('hide');
+            page.querySelector('.welcomeContainer').classList.add('hide');
+            page.querySelector('.signupForm').classList.add('hide');
         }
         else if (mode == 'signup') {
-            $('.manualServerForm', page).hide();
-            $('.connectLoginForm', page).hide();
-            $('.welcomeContainer', page).hide();
-            $('.signupForm', page).show();
+            page.querySelector('.manualServerForm').classList.add('hide');
+            page.querySelector('.connectLoginForm').classList.add('hide');
+            page.querySelector('.welcomeContainer').classList.add('hide');
+            page.querySelector('.signupForm').classList.remove('hide');
             initSignup(page);
         }
     }
@@ -133,66 +134,6 @@
         Dashboard.navigate('selectserver.html');
     }
 
-    function onSubmit() {
-        var page = $(this).parents('.page');
-
-        submit(page);
-
-        return false;
-    }
-
-    function onManualServerSubmit() {
-        var page = $(this).parents('.page');
-
-        submitManualServer(page);
-
-        return false;
-    }
-
-    function onSignupFormSubmit() {
-
-        if (!supportInAppSignup()) {
-            return false;
-        }
-
-        var page = $(this).parents('.page');
-
-        ConnectionManager.signupForConnect($('#txtSignupEmail', page).val(), $('#txtSignupUsername', page).val(), $('#txtSignupPassword', page).val(), $('#txtSignupPasswordConfirm', page).val()).then(function () {
-
-            Dashboard.alert({
-                message: Globalize.translate('MessageThankYouForConnectSignUp'),
-                callback: function () {
-                    Dashboard.navigate('connectlogin.html?mode=welcome');
-                }
-            });
-
-        }, function (result) {
-
-            if (result.errorCode == 'passwordmatch') {
-                Dashboard.alert({
-                    message: Globalize.translate('ErrorMessagePasswordNotMatchConfirm')
-                });
-            }
-            else if (result.errorCode == 'USERNAME_IN_USE') {
-                Dashboard.alert({
-                    message: Globalize.translate('ErrorMessageUsernameInUse')
-                });
-            }
-            else if (result.errorCode == 'EMAIL_IN_USE') {
-                Dashboard.alert({
-                    message: Globalize.translate('ErrorMessageEmailInUse')
-                });
-            } else {
-                Dashboard.alert({
-                    message: Globalize.translate('DefaultErrorMessage')
-                });
-            }
-
-        });
-
-        return false;
-    }
-
     function requireCaptcha() {
         return !AppInfo.isNativeApp && window.location.href.toLowerCase().indexOf('https') == 0;
     }
@@ -217,78 +158,10 @@
         });
     }
 
-    $(document).on('pageinit', "#connectLoginPage", function () {
-
-        var page = this;
-
-        $('.btnSkipConnect', page).on('click', function () {
-            skip();
-        });
-
-        $('.connectLoginForm').off('submit', onSubmit).on('submit', onSubmit);
-        $('.manualServerForm').off('submit', onManualServerSubmit).on('submit', onManualServerSubmit);
-        $('.signupForm').off('submit', onSignupFormSubmit).on('submit', onSignupFormSubmit);
-
-        $('.btnSignupForConnect', page).on('click', function () {
-
-            if (supportInAppSignup()) {
-                Dashboard.navigate('connectlogin.html?mode=signup');
-                return false;
-            }
-        });
-
-        $('.btnCancelSignup', page).on('click', function () {
-
-            history.back();
-        });
-
-        $('.btnCancelManualServer', page).on('click', function () {
-
-            history.back();
-        });
-
-        $('.btnWelcomeNext', page).on('click', function () {
-            Dashboard.navigate('connectlogin.html?mode=connect');
-        });
-
-        var terms = page.querySelector('.terms');
-        terms.innerHTML = Globalize.translate('LoginDisclaimer') + "<div style='margin-top:5px;'><a href='http://emby.media/terms' target='_blank'>" + Globalize.translate('TermsOfUse') + "</a></div>";
-
-        if (AppInfo.isNativeApp) {
-            terms.classList.add('hide');
-            page.querySelector('.tvAppInfo').classList.add('hide');
-        } else {
-            terms.classList.remove('hide');
-            page.querySelector('.tvAppInfo').classList.remove('hide');
-        }
-
-    }).on('pagebeforeshow', "#connectLoginPage", function () {
-
-        var page = this;
-
-        $('#txtSignupEmail', page).val('');
-        $('#txtSignupUsername', page).val('');
-        $('#txtSignupPassword', page).val('');
-        $('#txtSignupPasswordConfirm', page).val('');
-
-        if (browserInfo.safari && AppInfo.isNativeApp) {
-            // With apple we can't even have a link to the site
-            $('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessageWithoutLink'));
-        } else {
-            var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
-            $('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessage', link));
-        }
-
-    }).on('pageshow', "#connectLoginPage", function () {
-
-        var page = this;
-        loadPage(page);
-    });
-
     function submitManualServer(page) {
 
-        var host = $('#txtServerHost', page).val();
-        var port = $('#txtServerPort', page).val();
+        var host = page.querySelector('#txtServerHost').value;
+        var port = page.querySelector('#txtServerPort').value;
 
         if (port) {
             host += ':' + port;
@@ -310,10 +183,132 @@
 
     function submit(page) {
 
-        var user = $('#txtManualName', page).val();
-        var password = $('#txtManualPassword', page).val();
+        var user = page.querySelector('#txtManualName').value;
+        var password = page.querySelector('#txtManualPassword').value;
 
         login(page, user, password);
     }
 
+    return function (view, params) {
+
+        function onSubmit(e) {
+            submit(view);
+
+            e.preventDefault();
+            return false;
+        }
+
+        function onManualServerSubmit(e) {
+            submitManualServer(view);
+
+            e.preventDefault();
+            return false;
+        }
+
+        function onSignupFormSubmit(e) {
+
+            if (!supportInAppSignup()) {
+                e.preventDefault();
+                return false;
+            }
+
+            var page = view;
+
+            ConnectionManager.signupForConnect(page.querySelector('#txtSignupEmail', page).value, page.querySelector('#txtSignupUsername', page).value, page.querySelector('#txtSignupPassword', page).value, page.querySelector('#txtSignupPasswordConfirm', page).value).then(function () {
+
+                Dashboard.alert({
+                    message: Globalize.translate('MessageThankYouForConnectSignUp'),
+                    callback: function () {
+                        Dashboard.navigate('connectlogin.html?mode=welcome');
+                    }
+                });
+
+            }, function (result) {
+
+                if (result.errorCode == 'passwordmatch') {
+                    Dashboard.alert({
+                        message: Globalize.translate('ErrorMessagePasswordNotMatchConfirm')
+                    });
+                }
+                else if (result.errorCode == 'USERNAME_IN_USE') {
+                    Dashboard.alert({
+                        message: Globalize.translate('ErrorMessageUsernameInUse')
+                    });
+                }
+                else if (result.errorCode == 'EMAIL_IN_USE') {
+                    Dashboard.alert({
+                        message: Globalize.translate('ErrorMessageEmailInUse')
+                    });
+                } else {
+                    Dashboard.alert({
+                        message: Globalize.translate('DefaultErrorMessage')
+                    });
+                }
+
+            });
+
+            e.preventDefault();
+            return false;
+        }
+
+        view.querySelector('.btnSkipConnect').addEventListener('click', skip);
+
+        view.querySelector('.connectLoginForm').addEventListener('submit', onSubmit);
+        view.querySelector('.manualServerForm').addEventListener('submit', onManualServerSubmit);
+        view.querySelector('.signupForm').addEventListener('submit', onSignupFormSubmit);
+
+        view.querySelector('.btnSignupForConnect').addEventListener('click', function (e) {
+            if (supportInAppSignup()) {
+                e.preventDefault();
+                e.stopPropagation();
+                Dashboard.navigate('connectlogin.html?mode=signup');
+                return false;
+            }
+        });
+
+        view.querySelector('.btnCancelSignup').addEventListener('click', function () {
+            history.back();
+        });
+
+        view.querySelector('.btnCancelManualServer').addEventListener('click', function () {
+            history.back();
+        });
+
+        view.querySelector('.btnWelcomeNext').addEventListener('click', function () {
+            Dashboard.navigate('connectlogin.html?mode=connect');
+        });
+
+        var terms = view.querySelector('.terms');
+        terms.innerHTML = Globalize.translate('LoginDisclaimer') + "<div style='margin-top:5px;'><a href='http://emby.media/terms' target='_blank'>" + Globalize.translate('TermsOfUse') + "</a></div>";
+
+        if (AppInfo.isNativeApp) {
+            terms.classList.add('hide');
+            view.querySelector('.tvAppInfo').classList.add('hide');
+        } else {
+            terms.classList.remove('hide');
+            view.querySelector('.tvAppInfo').classList.remove('hide');
+        }
+
+        view.addEventListener('viewbeforeshow', function () {
+
+            var page = this;
+
+            page.querySelector('#txtSignupEmail').value = '';
+            page.querySelector('#txtSignupUsername').value = '';
+            page.querySelector('#txtSignupPassword').value = '';
+            page.querySelector('#txtSignupPasswordConfirm').value = '';
+
+            if (browserInfo.safari && AppInfo.isNativeApp) {
+                // With apple we can't even have a link to the site
+                page.querySelector('.embyIntroDownloadMessage').innerHTML = Globalize.translate('EmbyIntroDownloadMessageWithoutLink');
+            } else {
+                var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
+                page.querySelector('.embyIntroDownloadMessage').innerHTML = Globalize.translate('EmbyIntroDownloadMessage', link);
+            }
+        });
+
+        view.addEventListener('viewshow', function () {
+            loadPage(view);
+        });
+    };
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/itemlistpage.js b/dashboard-ui/scripts/itemlistpage.js
index 52686926cd..665e578333 100644
--- a/dashboard-ui/scripts/itemlistpage.js
+++ b/dashboard-ui/scripts/itemlistpage.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'jQuery', 'alphaPicker'], function (libraryBrowser, $, alphaPicker) {
+define(['libraryBrowser', 'alphaPicker'], function (libraryBrowser, alphaPicker) {
 
     return function (view, params) {
 
@@ -75,14 +75,13 @@
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
                     showLimit: false,
-                    addLayoutButton: true,
+                    addLayoutButton: false,
                     currentLayout: viewStyle,
-                    sortButton: true,
-                    layouts: 'Poster,PosterCard,Thumb',
-                    filterButton: true
+                    sortButton: false,
+                    filterButton: false
                 });
 
-                view.querySelector('.listTopPaging').innerHTML = pagingHtml;
+                view.querySelector('.paging').innerHTML = pagingHtml;
 
                 updateFilterControls();
 
@@ -104,13 +103,6 @@
 
                     html = libraryBrowser.getPosterViewHtml(posterOptions);
                 }
-                else if (viewStyle == "Poster") {
-
-                    posterOptions.showTitle = context == 'photos' ? 'auto' : true;
-                    posterOptions.overlayText = context == 'photos';
-
-                    html = libraryBrowser.getPosterViewHtml(posterOptions);
-                }
                 else if (viewStyle == "PosterCard") {
 
                     posterOptions.showTitle = true;
@@ -124,6 +116,13 @@
 
                     posterOptions.preferThumb = true;
                     posterOptions.shape = "backdrop";
+                    html = libraryBrowser.getPosterViewHtml(posterOptions);
+                } else {
+                    
+                    // Poster
+                    posterOptions.showTitle = context == 'photos' ? 'auto' : true;
+                    posterOptions.overlayText = context == 'photos';
+
                     html = libraryBrowser.getPosterViewHtml(posterOptions);
                 }
 
@@ -131,71 +130,31 @@
                 elem.innerHTML = html + pagingHtml;
                 ImageLoader.lazyChildren(elem);
 
-                $('.btnFilter', view).on('click', function () {
-                    showFilterMenu();
-                });
+                var i, length;
+                var elems = view.querySelectorAll('.paging');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
+                }
 
-                $('.btnNextPage', view).on('click', function () {
+                function onNextPageClick() {
                     query.StartIndex += query.Limit;
                     reloadItems(view);
-                });
+                }
 
-                $('.btnPreviousPage', view).on('click', function () {
+                function onPreviousPageClick() {
                     query.StartIndex -= query.Limit;
                     reloadItems(view);
-                });
+                }
 
-                $('.btnChangeLayout', view).on('layoutchange', function (e, layout) {
-                    getPageData(view).view = layout;
-                    libraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
-                    reloadItems(view);
-                });
+                elems = view.querySelectorAll('.btnNextPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onNextPageClick);
+                }
 
-                // On callback make sure to set StartIndex = 0
-                $('.btnSort', view).on('click', function () {
-                    libraryBrowser.showSortMenu({
-                        items: [{
-                            name: Globalize.translate('OptionNameSort'),
-                            id: 'SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionCommunityRating'),
-                            id: 'CommunityRating,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionCriticRating'),
-                            id: 'CriticRating,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionDateAdded'),
-                            id: 'DateCreated,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionDatePlayed'),
-                            id: 'DatePlayed,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionParentalRating'),
-                            id: 'OfficialRating,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionPlayCount'),
-                            id: 'PlayCount,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionReleaseDate'),
-                            id: 'PremiereDate,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionRuntime'),
-                            id: 'Runtime,SortName'
-                        }],
-                        callback: function () {
-                            reloadItems(view);
-                        },
-                        query: query
-                    });
-                });
+                elems = view.querySelectorAll('.btnPreviousPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onPreviousPageClick);
+                }
 
                 libraryBrowser.saveQueryValues(params.parentId, query);
 
@@ -237,19 +196,6 @@
             });
         }
 
-        function onListItemClick(e) {
-
-            var query = getQuery();
-            var info = libraryBrowser.getListItemInfo(this);
-
-            if (info.mediaType == 'Photo') {
-                require(['scripts/photos'], function () {
-                    Photos.startSlideshow(view, query, info.id);
-                });
-                return false;
-            }
-        }
-
         var alphaPickerElement = view.querySelector('.alphaPicker');
         alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
             var newValue = e.detail.value;
@@ -264,7 +210,35 @@
             valueChangeEvent: 'click'
         });
 
-        $(view).on('click', '.mediaItem', onListItemClick);
+        function parentWithClass(elem, className) {
+
+            while (!elem.classList || !elem.classList.contains(className)) {
+                elem = elem.parentNode;
+
+                if (!elem) {
+                    return null;
+                }
+            }
+
+            return elem;
+        }
+
+        view.addEventListener('click', function (e) {
+
+            var mediaItem = parentWithClass(e.target, 'mediaItem');
+            if (mediaItem) {
+                var query = getQuery();
+                var info = libraryBrowser.getListItemInfo(mediaItem);
+
+                if (info.mediaType == 'Photo') {
+                    require(['scripts/photos'], function () {
+                        Photos.startSlideshow(view, query, info.id);
+                    });
+                    e.preventDefault();
+                    return false;
+                }
+            }
+        });
 
         function updateFilterControls() {
 
@@ -273,6 +247,69 @@
             self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
+        var btnSelectView = view.querySelector('.btnSelectView');
+        btnSelectView.addEventListener('click', function (e) {
+
+            libraryBrowser.showLayoutMenu(e.target, getPageData().view, 'Poster,PosterCard,Thumb'.split(','));
+        });
+
+        btnSelectView.addEventListener('layoutchange', function (e) {
+            var layout = e.detail.viewStyle;
+            getPageData().view = layout;
+            libraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
+            reloadItems(view);
+        });
+
+        view.querySelector('.btnFilter').addEventListener('click', function () {
+            showFilterMenu();
+        });
+
+        // On callback make sure to set StartIndex = 0
+        view.querySelector('.btnSort').addEventListener('click', function () {
+            libraryBrowser.showSortMenu({
+                items: [{
+                    name: Globalize.translate('OptionNameSort'),
+                    id: 'IsFolder,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionCommunityRating'),
+                    id: 'CommunityRating,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionCriticRating'),
+                    id: 'CriticRating,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionDateAdded'),
+                    id: 'DateCreated,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionDatePlayed'),
+                    id: 'DatePlayed,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionParentalRating'),
+                    id: 'OfficialRating,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionPlayCount'),
+                    id: 'PlayCount,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionReleaseDate'),
+                    id: 'PremiereDate,SortName'
+                },
+                {
+                    name: Globalize.translate('OptionRuntime'),
+                    id: 'Runtime,SortName'
+                }],
+                callback: function () {
+                    reloadItems(view);
+                },
+                query: getQuery()
+            });
+        });
+
         view.addEventListener('viewbeforeshow', function (e) {
             reloadItems(view);
             updateFilterControls();
diff --git a/dashboard-ui/scripts/livetvchannels.js b/dashboard-ui/scripts/livetvchannels.js
index 1006fc83ea..72da67bad0 100644
--- a/dashboard-ui/scripts/livetvchannels.js
+++ b/dashboard-ui/scripts/livetvchannels.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     return function (view, params, tabContent) {
 
@@ -52,14 +52,14 @@
 
             var query = getQuery(context);
 
-            $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
+            context.querySelector('.paging').innerHTML = LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
                 showLimit: false,
                 updatePageSizeSetting: false,
-                filterButton: true
-            }));
+                filterButton: false
+            });
 
             var html = getChannelsHtml(result.Items);
 
@@ -67,19 +67,28 @@
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', context).on('click', function () {
+            var i, length;
+            var elems;
+
+            function onNextPageClick() {
                 query.StartIndex += query.Limit;
                 reloadItems(context);
-            });
+            }
 
-            $('.btnPreviousPage', context).on('click', function () {
+            function onPreviousPageClick() {
                 query.StartIndex -= query.Limit;
                 reloadItems(context);
-            });
+            }
 
-            $('.btnFilter', context).on('click', function () {
-                showFilterMenu(context);
-            });
+            elems = context.querySelectorAll('.btnNextPage');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('click', onNextPageClick);
+            }
+
+            elems = context.querySelectorAll('.btnPreviousPage');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('click', onPreviousPageClick);
+            }
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
         }
@@ -117,6 +126,10 @@
             });
         }
 
+        tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+            showFilterMenu(tabContent);
+        });
+
         self.renderTab = function () {
 
             reloadItems(tabContent);
diff --git a/dashboard-ui/scripts/livetvitems.js b/dashboard-ui/scripts/livetvitems.js
index 1b0e56e03a..71ce7d3d84 100644
--- a/dashboard-ui/scripts/livetvitems.js
+++ b/dashboard-ui/scripts/livetvitems.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
 
@@ -69,15 +69,28 @@
             elem.innerHTML = html + pagingHtml;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', page).on('click', function () {
+            var i, length;
+            var elems;
+
+            function onNextPageClick() {
                 query.StartIndex += query.Limit;
                 reloadItems(page);
-            });
+            }
 
-            $('.btnPreviousPage', page).on('click', function () {
+            function onPreviousPageClick() {
                 query.StartIndex -= query.Limit;
                 reloadItems(page);
-            });
+            }
+
+            elems = page.querySelectorAll('.btnNextPage');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('click', onNextPageClick);
+            }
+
+            elems = page.querySelectorAll('.btnPreviousPage');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('click', onPreviousPageClick);
+            }
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
diff --git a/dashboard-ui/scripts/livetvrecordinglist.js b/dashboard-ui/scripts/livetvrecordinglist.js
index cb37e9051c..7a8e6ac460 100644
--- a/dashboard-ui/scripts/livetvrecordinglist.js
+++ b/dashboard-ui/scripts/livetvrecordinglist.js
@@ -29,7 +29,7 @@
 
             updateFilterControls();
 
-            var screenWidth = $(window).width();
+            var screenWidth = window.innerWidth;
 
             html += LibraryBrowser.getPosterViewHtml({
 
diff --git a/dashboard-ui/scripts/livetvtunerprovider-satip.js b/dashboard-ui/scripts/livetvtunerprovider-satip.js
index 85ce486bce..c0c329d9ed 100644
--- a/dashboard-ui/scripts/livetvtunerprovider-satip.js
+++ b/dashboard-ui/scripts/livetvtunerprovider-satip.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     function reload(page, providerId) {
 
diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js
index 5b512a6483..5142235643 100644
--- a/dashboard-ui/scripts/loginpage.js
+++ b/dashboard-ui/scripts/loginpage.js
@@ -1,10 +1,11 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     var LoginPage = {
 
         showVisualForm: function (page) {
-            $('.visualLoginForm', page).show();
-            $('.manualLoginForm', page).hide();
+
+            page.querySelector('.visualLoginForm').classList.remove('hide');
+            page.querySelector('.manualLoginForm').classList.add('hide');
         },
 
         getLastSeenText: function (lastActivityDate) {
@@ -41,9 +42,8 @@
 
             }, function (response) {
 
-                $('#pw', page).val('');
-                $('#txtManualName', page).val('');
-                $('#txtManualPassword', page).val('');
+                page.querySelector('#txtManualName').value = '';
+                page.querySelector('#txtManualPassword').value = '';
 
                 Dashboard.hideLoadingMsg();
 
@@ -80,31 +80,21 @@
         }
     }
 
-    function onManualSubmit() {
-        var page = $(this).parents('.page');
-
-        getApiClient().then(function (apiClient) {
-            LoginPage.authenticateUserByName(page, apiClient, $('#txtManualName', page).val(), $('#txtManualPassword', page).val());
-        });
-
-        // Disable default form submission
-        return false;
-    }
-
     function showManualForm(context, showCancel, focusPassword) {
-        $('.visualLoginForm', context).hide();
-        $('.manualLoginForm', context).show();
+
+        context.querySelector('.manualLoginForm').classList.remove('hide');
+        context.querySelector('.visualLoginForm').classList.add('hide');
 
         if (focusPassword) {
-            $('#txtManualPassword', context).focus();
+            context.querySelector('#txtManualPassword').focus();
         } else {
-            $('#txtManualName', context).focus();
+            context.querySelector('#txtManualName').focus();
         }
 
         if (showCancel) {
-            $('.btnCancel', context).show();
+            context.querySelector('.btnCancel').classList.remove('hide');
         } else {
-            $('.btnCancel', context).hide();
+            context.querySelector('.btnCancel').classList.add('hide');
         }
     }
 
@@ -163,32 +153,59 @@
             html += '</div>';
         }
 
-        var elem = $('#divUsers', context).html(html);
+        context.querySelector('#divUsers').innerHTML = html;
+    }
 
-        $('a', elem).on('click', function () {
+    function parentWithClass(elem, className) {
 
-            var id = this.getAttribute('data-userid');
-            var name = this.getAttribute('data-username');
-            var haspw = this.getAttribute('data-haspw');
+        while (!elem.classList || !elem.classList.contains(className)) {
+            elem = elem.parentNode;
 
-            if (id == 'manual') {
-                showManualForm(context, true);
+            if (!elem) {
+                return null;
             }
-            else if (haspw == 'false') {
-                LoginPage.authenticateUserByName(context, apiClient, name, '');
-            } else {
-                $('#txtManualName', context).val(name);
-                $('#txtManualPassword', context).val('');
-                showManualForm(context, true, true);
-            }
-        });
+        }
+
+        return elem;
     }
 
     return function (view, params) {
 
         var self = this;
 
-        $('.manualLoginForm', view).on('submit', onManualSubmit);
+        view.querySelector('#divUsers').addEventListener('click', function(e) {
+            var cardContent = parentWithClass(e.target, 'cardContent');
+
+            if (cardContent) {
+
+                var context = view;
+                var id = cardContent.getAttribute('data-userid');
+                var name = cardContent.getAttribute('data-username');
+                var haspw = cardContent.getAttribute('data-haspw');
+
+                if (id == 'manual') {
+                    showManualForm(context, true);
+                }
+                else if (haspw == 'false') {
+                    LoginPage.authenticateUserByName(context, getApiClient(), name, '');
+                } else {
+
+                    context.querySelector('#txtManualName').value = name;
+                    context.querySelector('#txtManualPassword').value = '';
+                    showManualForm(context, true, true);
+                }
+            }
+        });
+
+        view.querySelector('.manualLoginForm').addEventListener('submit', function (e) {
+            getApiClient().then(function (apiClient) {
+                LoginPage.authenticateUserByName(view, apiClient, view.querySelector('#txtManualName').value, view.querySelector('#txtManualPassword').value);
+            });
+
+            e.preventDefault();
+            // Disable default form submission
+            return false;
+        });
 
         view.querySelector('.btnForgotPassword').addEventListener('click', function () {
             Dashboard.navigate('forgotpassword.html');
@@ -224,14 +241,14 @@
 
                 apiClient.getJSON(apiClient.getUrl('Branding/Configuration')).then(function (options) {
 
-                    $('.disclaimer', view).html(options.LoginDisclaimer || '');
+                    view.querySelector('.disclaimer').innerHTML = options.LoginDisclaimer || '';
                 });
             });
 
             if (Dashboard.isConnectMode()) {
-                $('.connectButtons', view).show();
+                view.querySelector('.connectButtons').classList.remove('hide');
             } else {
-                $('.connectButtons', view).hide();
+                view.querySelector('.connectButtons').classList.add('hide');
             }
         });
     };
diff --git a/dashboard-ui/scripts/selectserver.js b/dashboard-ui/scripts/selectserver.js
index 9eeb6a67ba..ade5e8aaf5 100644
--- a/dashboard-ui/scripts/selectserver.js
+++ b/dashboard-ui/scripts/selectserver.js
@@ -1,45 +1,16 @@
-define(['jQuery', 'paper-icon-button-light'], function ($) {
+define(['paper-icon-button-light'], function () {
 
-    function connectToServer(page, server) {
+    function updatePageStyle(page) {
 
-        Dashboard.showLoadingMsg();
-
-        ConnectionManager.connectToServer(server).then(function (result) {
-
-            Dashboard.hideLoadingMsg();
-
-            var apiClient = result.ApiClient;
-
-            switch (result.State) {
-
-                case MediaBrowser.ConnectionState.SignedIn:
-                    {
-                        Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient);
-                        Dashboard.navigate('home.html');
-                    }
-                    break;
-                case MediaBrowser.ConnectionState.ServerSignIn:
-                    {
-                        Dashboard.onServerChanged(null, null, apiClient);
-                        Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id);
-                    }
-                    break;
-                case MediaBrowser.ConnectionState.ServerUpdateNeeded:
-                    {
-                        Dashboard.alert(alert({
-
-                            text: Globalize.translate('core#ServerUpdateNeeded', 'https://emby.media'),
-                            html: Globalize.translate('core#ServerUpdateNeeded', '<a href="https://emby.media">https://emby.media</a>')
-
-                        }));
-                    }
-                    break;
-                default:
-                    showServerConnectionFailure();
-                    break;
-            }
-
-        });
+        if (getParameterByName('showuser') == '1') {
+            page.classList.add('libraryPage');
+            page.classList.add('noSecondaryNavPage');
+            page.classList.remove('standalonePage');
+        } else {
+            page.classList.add('standalonePage');
+            page.classList.remove('noSecondaryNavPage');
+            page.classList.remove('libraryPage');
+        }
     }
 
     function showServerConnectionFailure() {
@@ -84,280 +55,326 @@
     function renderServers(page, servers) {
 
         if (servers.length) {
-            $('.noServersMessage', page).hide();
-            $('.serverList', page).show();
+            page.querySelector('.noServersMessage').classList.add('hide');
+            page.querySelector('.serverList').classList.remove('hide');
         } else {
-            $('.noServersMessage', page).show();
-            $('.serverList', page).hide();
+            page.querySelector('.serverList').classList.add('hide');
+            page.querySelector('.noServersMessage').classList.remove('hide');
         }
 
         var html = '';
 
         html += servers.map(getServerHtml).join('');
 
-        var elem = $('.serverList', page).html(html);
-
-        $('.lnkServer', elem).on('click', function () {
-
-            var item = $(this).parents('.serverItem')[0];
-            var id = item.getAttribute('data-id');
-
-            var server = servers.filter(function (s) {
-                return s.Id == id;
-            })[0];
-
-            connectToServer(page, server);
-
-        });
-
-        $('.btnServerMenu', elem).on('click', function () {
-            showServerMenu(this);
-        });
+        page.querySelector('.serverList').innerHTML = html;
     }
 
     function showGeneralError() {
 
-        // Need the timeout because jquery mobile will not show a popup if there's currently already one in the process of closing
-        setTimeout(function () {
-
-            Dashboard.hideModalLoadingMsg();
-            Dashboard.alert({
-                message: Globalize.translate('DefaultErrorMessage')
-            });
-        }, 300);
-
-    }
-
-    function acceptInvitation(page, id) {
-
-        Dashboard.showModalLoadingMsg();
-
-        // Add/Update connect info
-        ConnectionManager.acceptServer(id).then(function () {
-
-            Dashboard.hideModalLoadingMsg();
-            loadPage(page);
-
-        }, function () {
-
-            showGeneralError();
+        Dashboard.hideModalLoadingMsg();
+        Dashboard.alert({
+            message: Globalize.translate('DefaultErrorMessage')
         });
     }
 
-    function deleteServer(page, serverId) {
+    function parentWithClass(elem, className) {
 
-        Dashboard.showModalLoadingMsg();
+        while (!elem.classList || !elem.classList.contains(className)) {
+            elem = elem.parentNode;
 
-        // Add/Update connect info
-        ConnectionManager.deleteServer(serverId).then(function () {
+            if (!elem) {
+                return null;
+            }
+        }
 
-            Dashboard.hideModalLoadingMsg();
-
-            loadPage(page);
-
-        }, function () {
-
-            showGeneralError();
-
-        });
+        return elem;
     }
 
-    function rejectInvitation(page, id) {
+    return function (view, params) {
 
-        Dashboard.showModalLoadingMsg();
+        var cachedServers;
 
-        // Add/Update connect info
-        ConnectionManager.rejectServer(id).then(function () {
+        function connectToServer(page, server) {
 
-            Dashboard.hideModalLoadingMsg();
+            Dashboard.showLoadingMsg();
 
-            loadPage(page);
+            ConnectionManager.connectToServer(server).then(function (result) {
 
-        }, function () {
+                Dashboard.hideLoadingMsg();
 
-            showGeneralError();
+                var apiClient = result.ApiClient;
 
-        });
-    }
+                switch (result.State) {
 
-    function showServerMenu(elem) {
+                    case MediaBrowser.ConnectionState.SignedIn:
+                        {
+                            Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient);
+                            Dashboard.navigate('home.html');
+                        }
+                        break;
+                    case MediaBrowser.ConnectionState.ServerSignIn:
+                        {
+                            Dashboard.onServerChanged(null, null, apiClient);
+                            Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id);
+                        }
+                        break;
+                    case MediaBrowser.ConnectionState.ServerUpdateNeeded:
+                        {
+                            Dashboard.alert(alert({
 
-        var card = $(elem).parents('.serverItem');
-        var page = $(elem).parents('.page');
-        var serverId = card.attr('data-id');
+                                text: Globalize.translate('core#ServerUpdateNeeded', 'https://emby.media'),
+                                html: Globalize.translate('core#ServerUpdateNeeded', '<a href="https://emby.media">https://emby.media</a>')
 
-        var menuItems = [];
-
-        menuItems.push({
-            name: Globalize.translate('ButtonDelete'),
-            id: 'delete',
-            ironIcon: 'delete'
-        });
-
-        require(['actionsheet'], function (actionsheet) {
-
-            actionsheet.show({
-                items: menuItems,
-                positionTo: elem,
-                callback: function (id) {
-
-                    switch (id) {
-
-                        case 'delete':
-                            deleteServer(page, serverId);
-                            break;
-                        default:
-                            break;
-                    }
+                            }));
+                        }
+                        break;
+                    default:
+                        showServerConnectionFailure();
+                        break;
                 }
+
+            });
+        }
+
+        function acceptInvitation(page, id) {
+
+            Dashboard.showModalLoadingMsg();
+
+            // Add/Update connect info
+            ConnectionManager.acceptServer(id).then(function () {
+
+                Dashboard.hideModalLoadingMsg();
+                loadPage(page);
+
+            }, function () {
+
+                showGeneralError();
+            });
+        }
+
+        function deleteServer(page, serverId) {
+
+            Dashboard.showModalLoadingMsg();
+
+            // Add/Update connect info
+            ConnectionManager.deleteServer(serverId).then(function () {
+
+                Dashboard.hideModalLoadingMsg();
+
+                loadPage(page);
+
+            }, function () {
+
+                showGeneralError();
+
+            });
+        }
+
+        function rejectInvitation(page, id) {
+
+            Dashboard.showModalLoadingMsg();
+
+            // Add/Update connect info
+            ConnectionManager.rejectServer(id).then(function () {
+
+                Dashboard.hideModalLoadingMsg();
+
+                loadPage(page);
+
+            }, function () {
+
+                showGeneralError();
+
+            });
+        }
+
+        function showServerMenu(elem) {
+
+            var card = parentWithClass(elem, 'serverItem');
+            var page = parentWithClass(elem, 'page');
+            var serverId = card.getAttribute('data-id');
+
+            var menuItems = [];
+
+            menuItems.push({
+                name: Globalize.translate('ButtonDelete'),
+                id: 'delete',
+                ironIcon: 'delete'
             });
 
-        });
-    }
+            require(['actionsheet'], function (actionsheet) {
 
-    function showPendingInviteMenu(elem) {
+                actionsheet.show({
+                    items: menuItems,
+                    positionTo: elem,
+                    callback: function (id) {
 
-        var card = $(elem).parents('.inviteItem');
-        var page = $(elem).parents('.page');
-        var invitationId = card.attr('data-id');
+                        switch (id) {
 
-        var menuItems = [];
-
-        menuItems.push({
-            name: Globalize.translate('ButtonAccept'),
-            id: 'accept',
-            ironIcon: 'add'
-        });
-
-        menuItems.push({
-            name: Globalize.translate('ButtonReject'),
-            id: 'reject',
-            ironIcon: 'cancel'
-        });
-
-        require(['actionsheet'], function (actionsheet) {
-
-            actionsheet.show({
-                items: menuItems,
-                positionTo: elem,
-                callback: function (id) {
-
-                    switch (id) {
-
-                        case 'accept':
-                            acceptInvitation(page, invitationId);
-                            break;
-                        case 'reject':
-                            rejectInvitation(page, invitationId);
-                            break;
-                        default:
-                            break;
+                            case 'delete':
+                                deleteServer(page, serverId);
+                                break;
+                            default:
+                                break;
+                        }
                     }
-                }
-            });
-
-        });
-    }
-
-    function getPendingInviteHtml(invite) {
-
-        var html = '';
-
-        html += '<paper-icon-item class="inviteItem" data-id="' + invite.Id + '">';
-
-        html += '<paper-fab mini class="blue lnkServer" icon="wifi" item-icon></paper-fab>';
-
-        html += '<paper-item-body two-line>';
-
-        html += '<div>';
-        html += invite.Name;
-        html += '</div>';
-
-        html += '</paper-item-body>';
-
-        html += '<button is="paper-icon-button-light" class="btnInviteMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
-
-        html += '</paper-icon-item>';
-
-        return html;
-    }
-
-    function renderInvitations(page, list) {
-
-        if (list.length) {
-            $('.invitationSection', page).show();
-        } else {
-            $('.invitationSection', page).hide();
-        }
-
-        var html = list.map(getPendingInviteHtml).join('');
-
-        var elem = $('.invitationList', page).html(html);
-
-        $('.btnInviteMenu', elem).on('click', function () {
-            showPendingInviteMenu(this);
-        });
-    }
-
-    function loadInvitations(page) {
-
-        if (ConnectionManager.isLoggedIntoConnect()) {
-
-            ConnectionManager.getUserInvitations().then(function (list) {
-
-                renderInvitations(page, list);
+                });
 
             });
-
-        } else {
-
-            renderInvitations(page, []);
         }
 
-    }
+        function showPendingInviteMenu(elem) {
 
-    function loadPage(page) {
+            var card = parentWithClass(elem, 'inviteItem');
+            var page = parentWithClass(elem, 'page');
+            var invitationId = card.getAttribute('data-id');
 
-        Dashboard.showLoadingMsg();
+            var menuItems = [];
 
-        ConnectionManager.getAvailableServers().then(function (servers) {
+            menuItems.push({
+                name: Globalize.translate('ButtonAccept'),
+                id: 'accept',
+                ironIcon: 'add'
+            });
 
-            servers = servers.slice(0);
+            menuItems.push({
+                name: Globalize.translate('ButtonReject'),
+                id: 'reject',
+                ironIcon: 'cancel'
+            });
 
-            renderServers(page, servers);
+            require(['actionsheet'], function (actionsheet) {
 
-            Dashboard.hideLoadingMsg();
+                actionsheet.show({
+                    items: menuItems,
+                    positionTo: elem,
+                    callback: function (id) {
+
+                        switch (id) {
+
+                            case 'accept':
+                                acceptInvitation(page, invitationId);
+                                break;
+                            case 'reject':
+                                rejectInvitation(page, invitationId);
+                                break;
+                            default:
+                                break;
+                        }
+                    }
+                });
+
+            });
+        }
+
+        function getPendingInviteHtml(invite) {
+
+            var html = '';
+
+            html += '<paper-icon-item class="inviteItem" data-id="' + invite.Id + '">';
+
+            html += '<paper-fab mini class="blue lnkServer" icon="wifi" item-icon></paper-fab>';
+
+            html += '<paper-item-body two-line>';
+
+            html += '<div>';
+            html += invite.Name;
+            html += '</div>';
+
+            html += '</paper-item-body>';
+
+            html += '<button is="paper-icon-button-light" class="btnInviteMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
+
+            html += '</paper-icon-item>';
+
+            return html;
+        }
+
+        function renderInvitations(page, list) {
+
+            if (list.length) {
+                page.querySelector('.invitationSection').classList.remove('hide');
+            } else {
+                page.querySelector('.invitationSection').classList.add('hide');
+            }
+
+            var html = list.map(getPendingInviteHtml).join('');
+
+            page.querySelector('.invitationList').innerHTML = html;
+        }
+
+        function loadInvitations(page) {
+
+            if (ConnectionManager.isLoggedIntoConnect()) {
+
+                ConnectionManager.getUserInvitations().then(function (list) {
+
+                    renderInvitations(page, list);
+
+                });
+
+            } else {
+
+                renderInvitations(page, []);
+            }
+
+        }
+
+        function loadPage(page) {
+
+            Dashboard.showLoadingMsg();
+
+            ConnectionManager.getAvailableServers().then(function (servers) {
+
+                servers = servers.slice(0);
+                cachedServers = servers;
+
+                renderServers(page, servers);
+
+                Dashboard.hideLoadingMsg();
+            });
+
+            loadInvitations(page);
+
+            if (ConnectionManager.isLoggedIntoConnect()) {
+                page.querySelector('.connectLogin').classList.add('hide');
+            } else {
+                page.querySelector('.connectLogin').classList.remove('hide');
+            }
+        }
+
+        view.querySelector('.invitationList').addEventListener('click', function (e) {
+
+            var btnInviteMenu = parentWithClass(e.target, 'btnInviteMenu');
+            if (btnInviteMenu) {
+                showPendingInviteMenu(btnInviteMenu);
+            }
+        });
+        view.querySelector('.serverList').addEventListener('click', function (e) {
+
+            var lnkServer = parentWithClass(e.target, 'lnkServer');
+            if (lnkServer) {
+                var item = parentWithClass(lnkServer, 'serverItem');
+                var id = item.getAttribute('data-id');
+
+                var server = cachedServers.filter(function (s) {
+                    return s.Id == id;
+                })[0];
+
+                connectToServer(page, server);
+            }
+
+            var btnServerMenu = parentWithClass(e.target, 'btnServerMenu');
+            if (btnServerMenu) {
+                showServerMenu(btnServerMenu);
+            }
         });
 
-        loadInvitations(page);
-
-        if (ConnectionManager.isLoggedIntoConnect()) {
-            $('.connectLogin', page).hide();
-        } else {
-            $('.connectLogin', page).show();
-        }
-    }
-
-    function updatePageStyle(page) {
-
-        if (getParameterByName('showuser') == '1') {
-            $(page).addClass('libraryPage').addClass('noSecondaryNavPage').removeClass('standalonePage');
-        } else {
-            $(page).removeClass('libraryPage').removeClass('noSecondaryNavPage').addClass('standalonePage');
-        }
-    }
-
-    pageIdOn('pagebeforeshow', "selectServerPage", function () {
-
-        var page = this;
-        updatePageStyle(page);
-    });
-
-    pageIdOn('pageshow', "selectServerPage", function () {
-
-        var page = this;
-
-        loadPage(page);
-    });
-
+        view.addEventListener('viewbeforeshow', function () {
+            updatePageStyle(this);
+        });
+        view.addEventListener('viewshow', function () {
+            loadPage(this);
+        });
+    };
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 857376ca81..4ffe01a8e3 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -310,18 +310,20 @@ var Dashboard = {
             footerHtml += '<div id="footerNotifications"></div>';
             footerHtml += '</div>';
 
-            $(document.body).append(footerHtml);
-
+            document.body.insertAdjacentHTML('beforeend', footerHtml);
         }
 
-        var footer = $(".footer").css("top", "initial").show();
+        var footer = document.querySelector('.footer');
+        footer.style.top = 'initial';
+        footer.classList.remove('hide');
 
-        var parentElem = $('#footerNotifications', footer);
+        var parentElem = footer.querySelector('#footerNotifications');
 
-        var elem = $('#' + options.id, parentElem);
+        var elem = parentElem.querySelector('#' + options.id);
 
         if (!elem.length) {
-            elem = $('<p id="' + options.id + '" class="footerNotification"></p>').appendTo(parentElem);
+            parentElem.insertAdjacentHTML('beforeend', '<p id="' + options.id + '" class="footerNotification"></p>');
+            elem = parentElem.querySelector('#' + options.id);
         }
 
         var onclick = removeOnHide ? "jQuery(\"#" + options.id + "\").trigger(\"notification.remove\").remove();" : "jQuery(\"#" + options.id + "\").trigger(\"notification.hide\").hide();";
@@ -331,30 +333,30 @@ var Dashboard = {
         }
 
         if (options.forceShow) {
-            elem.show();
+            elem.classList.remove('hide');
         }
 
-        elem.html(options.html);
+        elem.innerHTML = options.html;
 
         if (options.timeout) {
 
             setTimeout(function () {
 
                 if (removeOnHide) {
-                    elem.trigger("notification.remove").remove();
+                    $(elem).trigger("notification.remove").remove();
                 } else {
-                    elem.trigger("notification.hide").hide();
+                    $(elem).trigger("notification.hide").hide();
                 }
 
             }, options.timeout);
         }
 
-        footer.on("notification.remove notification.hide", function (e) {
+        $(footer).on("notification.remove notification.hide", function (e) {
 
             setTimeout(function () { // give the DOM time to catch up
 
-                if (!parentElem.html()) {
-                    footer.hide();
+                if (!parentElem.innerHTML) {
+                    footer.classList.add('hide');
                 }
 
             }, 50);
@@ -2429,9 +2431,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/connectlogin.html',
-            dependencies: ['emby-button'],
+            dependencies: ['emby-button', 'emby-input'],
             autoFocus: false,
-            anonymous: true
+            anonymous: true,
+            controller: 'scripts/connectlogin'
         });
 
         defineRoute({
@@ -2928,9 +2931,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/selectserver.html',
-            dependencies: [],
+            dependencies: ['paper-fab', 'paper-item-body', 'paper-icon-item', 'emby-button'],
             autoFocus: false,
-            anonymous: true
+            anonymous: true,
+            controller: 'scripts/selectserver'
         });
 
         defineRoute({
@@ -3179,7 +3183,6 @@ var AppInfo = {};
 
             layoutManager.init();
 
-            //$.mobile.initializePage();
             window.Emby = {};
             window.Emby.Page = pageObjects;
             window.Emby.TransparencyLevel = pageObjects.TransparencyLevel;
diff --git a/dashboard-ui/selectserver.html b/dashboard-ui/selectserver.html
index 64e7ed6f58..168c943d9a 100644
--- a/dashboard-ui/selectserver.html
+++ b/dashboard-ui/selectserver.html
@@ -1,4 +1,4 @@
-<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage" data-theme="b" data-require="scripts/selectserver,paper-fab,paper-item-body,paper-icon-item,emby-button">
+<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage" data-theme="b">
 
     <div data-role="content">