From a7ade97b44dee348b85de6e5b12c3cec078d7909 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Tue, 14 Jul 2015 16:29:51 -0400
Subject: [PATCH] rework metadata manager tabs

---
 .../bower_components/font-roboto/roboto.html  |   2 +-
 .../bower_components/paper-styles/.bower.json |   8 +-
 .../bower_components/paper-styles/bower.json  |   2 +-
 .../paper-styles/classes/typography.html      |   2 +-
 dashboard-ui/css/metadataeditor.css           |   8 +-
 dashboard-ui/editcollectionitems.html         |  73 --
 dashboard-ui/edititemimages.html              | 143 ---
 dashboard-ui/edititemmetadata.html            | 919 +++++++++++-------
 dashboard-ui/edititemsubtitles.html           |  54 -
 dashboard-ui/scripts/editcollectionitems.js   |  46 +-
 dashboard-ui/scripts/edititemimages.js        |  59 +-
 dashboard-ui/scripts/edititemmetadata.js      |  91 +-
 dashboard-ui/scripts/edititemsubtitles.js     |  67 +-
 dashboard-ui/scripts/homeupcoming.js          |   3 +-
 dashboard-ui/scripts/indexpage.js             |   6 +-
 dashboard-ui/scripts/itembynamedetailpage.js  |   2 +-
 dashboard-ui/scripts/itemdetailpage.js        |   4 +-
 dashboard-ui/scripts/reports.js               |   6 +-
 dashboard-ui/vulcanize-out.html               |   1 -
 19 files changed, 672 insertions(+), 824 deletions(-)
 delete mode 100644 dashboard-ui/editcollectionitems.html
 delete mode 100644 dashboard-ui/edititemimages.html
 delete mode 100644 dashboard-ui/edititemsubtitles.html

diff --git a/dashboard-ui/bower_components/font-roboto/roboto.html b/dashboard-ui/bower_components/font-roboto/roboto.html
index 7a24999fff..e73ba34772 100644
--- a/dashboard-ui/bower_components/font-roboto/roboto.html
+++ b/dashboard-ui/bower_components/font-roboto/roboto.html
@@ -7,5 +7,5 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
+<!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">-->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
diff --git a/dashboard-ui/bower_components/paper-styles/.bower.json b/dashboard-ui/bower_components/paper-styles/.bower.json
index 05c9c40788..7765e262a2 100644
--- a/dashboard-ui/bower_components/paper-styles/.bower.json
+++ b/dashboard-ui/bower_components/paper-styles/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-styles",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Common (global) styles for Material Design elements.",
   "authors": [
     "The Polymer Authors"
@@ -28,11 +28,11 @@
   "devDependencies": {
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "_release": "1.0.9",
+  "_release": "1.0.10",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.9",
-    "commit": "cb73f4d677c1bb64342263956a0592a2936922d2"
+    "tag": "v1.0.10",
+    "commit": "f1a79cd7916f7870a59918911062007bbc07867e"
   },
   "_source": "git://github.com/PolymerElements/paper-styles.git",
   "_target": "^1.0.0",
diff --git a/dashboard-ui/bower_components/paper-styles/bower.json b/dashboard-ui/bower_components/paper-styles/bower.json
index 536eafef15..4f7e0ede0d 100644
--- a/dashboard-ui/bower_components/paper-styles/bower.json
+++ b/dashboard-ui/bower_components/paper-styles/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-styles",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Common (global) styles for Material Design elements.",
   "authors": [
     "The Polymer Authors"
diff --git a/dashboard-ui/bower_components/paper-styles/classes/typography.html b/dashboard-ui/bower_components/paper-styles/classes/typography.html
index 9a73e3df27..14e2744749 100644
--- a/dashboard-ui/bower_components/paper-styles/classes/typography.html
+++ b/dashboard-ui/bower_components/paper-styles/classes/typography.html
@@ -7,7 +7,7 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
-<link rel="import" href="../font-roboto/roboto.html">
+<link rel="import" href="../../font-roboto/roboto.html">
 
 <!--
 Typographic styles are provided matching the Material Design standard styles:
diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css
index 1961f85516..f64f11a399 100644
--- a/dashboard-ui/css/metadataeditor.css
+++ b/dashboard-ui/css/metadataeditor.css
@@ -1,4 +1,8 @@
-.editPageContent {
+.editorTab {
+    padding-bottom: 200px;
+}
+
+.editPageContent {
     padding: 0;
 }
 
@@ -193,7 +197,7 @@
 
 .editorTile {
     display: inline-block;
-    margin: 0 2em 2em 0;
+    margin: 1em 2em 2em 0;
     text-align: center;
     vertical-align: middle;
 }
diff --git a/dashboard-ui/editcollectionitems.html b/dashboard-ui/editcollectionitems.html
deleted file mode 100644
index 2323147442..0000000000
--- a/dashboard-ui/editcollectionitems.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="editCollectionTitlesPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/editcollectionitems,jqmicons">
-        <div data-role="content editPageContent">
-            <div class="editPageSidebar">
-                <div class="libraryTree">
-                    <ul></ul>
-                </div>
-            </div>
-
-            <div class="editPageInnerContent">
-                <h1 class="itemName editPageName">&nbsp;</h1>
-                <br />
-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="#" data-role="button" id="btnEditMetadata">${TabMetadata}</a>
-                    <a href="#" data-role="button" class="ui-btn-active">${TabCollectionTitles}</a>
-                    <a id="btnEditImages" href="#" data-role="button">${TabImages}</a>
-                </div>
-
-                <p style="margin-top: -20px;">
-                    ${EditCollectionItemsHelp}
-                </p>
-
-                <div>
-                    <button type="button" id="btnAddItem" data-icon="plus" data-inline="true" data-mini="true">${ButtonAdd}</button>
-                    <button type="button" id="btnRemoveItems" data-icon="delete" data-inline="true" data-mini="true" disabled="disabled">${ButtonRemove}</button>
-                </div>
-                <br />
-                <div class="collectionItems"></div>
-            </div>
-        </div>
-
-        <div data-role="popup" class="popupIdentify popup" data-theme="a">
-
-            <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
-                <h3>
-                    ${HeaderAddTitles}
-                </h3>
-            </div>
-
-            <div data-role="content">
-
-                <form class="collectionItemSearchForm" style="max-width: initial;">
-
-                    <div>
-                        <label for="txtLookupName">${LabelName}</label>
-
-                        <div style="display: inline-block; width: 75%;">
-                            <input type="text" id="txtLookupName" required="required" />
-                        </div>
-
-                        <button type="submit" data-icon="search" data-mini="true" data-inline="true" data-iconpos="notext">
-                            ${ButtonSearch}
-                        </button>
-                    </div>
-
-                    <div class="collectionItemSearchResults">
-                    </div>
-
-                    <button id="btnAddItems" type="button" data-icon="plus" data-mini="true">
-                        ${ButtonAdd}
-                    </button>
-                </form>
-            </div>
-
-        </div>
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/edititemimages.html b/dashboard-ui/edititemimages.html
deleted file mode 100644
index 25c2e573fb..0000000000
--- a/dashboard-ui/edititemimages.html
+++ /dev/null
@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="editItemImagesPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/edititemimages,jqmicons">
-        <div data-role="content editPageContent">
-            <div class="editPageSidebar smoothScrollY">
-                <div class="libraryTree">
-                    <ul></ul>
-                </div>
-            </div>
-
-            <div class="editPageInnerContent">
-                <h1 class="itemName editPageName">&nbsp;</h1>
-                <br />
-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="#" data-role="button" id="btnEditMetadata">${TabMetadata}</a>
-                    <a id="btnEditSubtitles" style="display: none;" href="#" data-role="button">${TabSubtitles}</a>
-                    <a id="btnEditCollectionTitles" style="display: none;" href="#" data-role="button">${TabCollectionTitles}</a>
-                    <a href="#" data-role="button" class="ui-btn-active">${TabImages}</a>
-                </div>
-
-                <div style="margin: 0 0 1em;">
-
-                    <paper-button raised class="subdued btnBrowseAllImages"><iron-icon icon="cloud"></iron-icon><span>${ButtonBrowseImages}</span></paper-button>
-                    <paper-button raised class="subdued btnOpenUploadMenu"><iron-icon icon="add"></iron-icon><span>${ButtonUpload}</span></paper-button>
-                </div>
-
-                <div id="imagesContainer" style="display: none;">
-                    <h1>${HeaderImages}</h1>
-                    <div id="images">
-                    </div>
-                    <br />
-                </div>
-
-                <div id="backdropsContainer" style="display: none;">
-                    <h1>${HeaderBackdrops}</h1>
-                    <div id="backdrops">
-                    </div>
-                    <br />
-                </div>
-
-                <div id="screenshotsContainer" style="display: none;">
-                    <h1>${Screenshots}</h1>
-                    <div id="screenshots">
-                    </div>
-                </div>
-
-            </div>
-        </div>
-
-        <div data-role="popup" id="popupUpload" data-theme="a">
-            <form class="uploadItemImageForm" style="max-width: 100%; margin: 0 1.5em 1.5em;">
-                <h2>${HeaderAddUpdateImage}</h2>
-                <div>
-                    <p>${LabelJpgPngOnly}</p>
-                    <input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
-
-                    <div id="imageDropZone" class="imageDropZone">
-                        <h3>${LabelDropImageHere}</h3>
-                        <output id="imageOutput"></output>
-                    </div>
-                    <div id="fldUpload" style="display: none;">
-                        <p data-role="fieldcontain">
-                            <label for="selectImageType">${LabelImageType}</label>
-                            <select id="selectImageType" name="selectImageType">
-                                <option value="Primary">${OptionPrimary}</option>
-                                <option value="Art">${OptionArt}</option>
-                                <option value="Backdrop">${OptionBackdrop}</option>
-                                <option value="Banner">${OptionBanner}</option>
-                                <option value="Box">${OptionBox}</option>
-                                <option value="BoxRear">${OptionBoxRear}</option>
-                                <option value="Disc">${OptionDisc}</option>
-                                <option value="Icon">${OptionIcon}</option>
-                                <option value="Logo">${OptionLogo}</option>
-                                <option value="Menu">${OptionMenu}</option>
-                                <option value="Screenshot">${OptionScreenshot}</option>
-                                <option value="Thumb">${OptionThumb}</option>
-                            </select>
-                        </p>
-                        <button type="submit" data-icon="check" data-theme="b">${ButtonUpload}</button>
-                    </div>
-                    <a data-role="button" data-rel="back" data-icon="delete" onclick="Events.trigger($('#uploadImage').val('')[0], 'change');">${ButtonCancel}</a>
-                </div>
-            </form>
-        </div>
-
-        <div data-role="popup" class="popup popupDownload" data-theme="a">
-
-            <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">${ButtonClose}</a>
-            <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
-                <h3>${HeaderBrowseOnlineImages}</h3>
-            </div>
-
-            <div data-role="content">
-
-                <div style="text-align: center;">
-                    <div style="margin: 0; display: inline-block;">
-                        <label for="selectImageProvider">${LabelSource}</label>
-                    </div>
-                    <div style="margin: 0; display: inline-block;">
-                        <select id="selectImageProvider" name="selectImageProvider" data-mini="true" data-inline="true">
-                            <option value="">${OptionAll}</option>
-                        </select>
-                    </div>
-                    <div style="margin: 0; display: inline-block;">
-                        <label for="selectBrowsableImageType">${LabelImage}</label>
-                    </div>
-                    <div style="margin: 0; display: inline-block;">
-                        <select id="selectBrowsableImageType" name="selectBrowsableImageType" data-mini="true" data-inline="true">
-                            <option value="Primary">${OptionPrimary}</option>
-                            <option value="Art">${OptionArt}</option>
-                            <option value="Backdrop">${OptionBackdrop}</option>
-                            <option value="Banner">${OptionBanner}</option>
-                            <option value="Box">${OptionBox}</option>
-                            <option value="BoxRear">${OptionBoxRear}</option>
-                            <option value="Disc">${OptionDisc}</option>
-                            <option value="Icon">${OptionIcon}</option>
-                            <option value="Logo">${OptionLogo}</option>
-                            <option value="Menu">${OptionMenu}</option>
-                            <option value="Screenshot">${OptionScreenshot}</option>
-                            <option value="Thumb">${OptionThumb}</option>
-                        </select>
-                    </div>
-                    <div class="availableImagesPaging" style="margin: 0; display: inline-block;"></div>
-                    <div style="margin: 0; display: inline-block; vertical-align: middle; margin-left: 10px;">
-                        <label for="chkAllLanguages">${LabelAllLanguages}</label>
-                        <input type="checkbox" id="chkAllLanguages" data-mini="true" />
-                    </div>
-                </div>
-
-                <div class="availableImagesList"></div>
-                <div style="text-align: center;">
-                    <a href="#" data-rel="back" data-role="button" data-mini="true" data-inline="true" data-icon="delete">${ButtonClose}</a>
-                </div>
-            </div>
-        </div>
-
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html
index c544b01d35..9ced60eaea 100644
--- a/dashboard-ui/edititemmetadata.html
+++ b/dashboard-ui/edititemmetadata.html
@@ -4,8 +4,8 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="editItemMetadataPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/edititemmetadata,jqmicons">
-        <div data-role="content editPageContent">
+    <div id="editItemMetadataPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/edititemmetadata,jqmicons,scripts/edititemsubtitles,scripts/editcollectionitems,scripts/edititemimages">
+        <div>
             <div class="editPageSidebar smoothScrollY">
                 <div class="libraryTree">
                     <ul></ul>
@@ -14,375 +14,449 @@
             <div class="editPageInnerContent" style="display: none;">
                 <h1 class="itemName editPageName">&nbsp;</h1>
                 <br />
-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="#" data-role="button" class="ui-btn-active">${TabMetadata}</a>
-                    <a id="btnEditSubtitles" style="display: none;" href="#" data-role="button">${TabSubtitles}</a>
-                    <a id="btnEditCollectionTitles" style="display: none;" href="editcollectionitems.html" data-role="button">${TabCollectionTitles}</a>
-                    <a href="#" data-role="button" id="btnEditImages">${TabImages}</a>
-                </div>
+                <paper-tabs>
+                    <paper-tab class="metadataTabButton">${TabMetadata}</paper-tab>
+                    <paper-tab class="subtitleTabButton">${TabSubtitles}</paper-tab>
+                    <paper-tab class="collectionItemsTabButton">${TabCollectionTitles}</paper-tab>
+                    <paper-tab class="imagesTabButton">${TabImages}</paper-tab>
+                </paper-tabs>
 
-                <form class="editItemMetadataForm editMetadataForm" style="margin-top: -20px;">
-                    <div class="metadataFormFields">
+                <neon-animated-pages>
+                    <neon-animatable>
+                        <div class="editorTab">
 
-                        <div>
-                            <button class="btnSave" type="submit" data-theme="a" data-icon="check" data-mini="true" data-inline="true">
-                                ${ButtonSave}
-                            </button>
-                            <button class="btnRefresh btnSimpleRefresh" type="button" data-icon="refresh" data-mini="true" data-inline="true">${ButtonRefresh}</button>
-                            <button class="btnRefresh btnRefreshAdvanced" type="button" data-icon="refresh" data-mini="true" data-inline="true">${ButtonAdvancedRefresh}</button>
-                            <button id="btnIdentify" type="button" data-icon="info" data-mini="true" data-inline="true">${ButtonIdentify}</button>
-                            <div style="vertical-align: bottom; display: inline-block;">
-                                <div id="fldDelete" style="display: none;">
-                                    <button id="btnDelete" type="button" data-icon="delete" data-mini="true" data-inline="true">${ButtonDelete}</button>
-                                </div>
-                            </div>
-                        </div>
+                            <form class="editItemMetadataForm editMetadataForm">
+                                <div class="metadataFormFields">
 
-                        <div style="padding: 10px 0;">
-                            <div data-role="fieldcontain" id="fldContentType" style="display:none;">
-                                <label for="selectContentType">${LabelContentType}</label>
-                                <select id="selectContentType" data-mini="true"></select>
-                            </div>
-                            <div data-role="fieldcontain" id="fldPath">
-                                <label for="txtPath">${LabelPath}</label>
-                                <input type="text" id="txtPath" readonly="readonly" />
-                            </div>
-                            <div data-role="fieldcontain">
-                                <label for="txtName">${LabelName}</label>
-                                <input type="text" id="txtName" required="required" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldSortName" style="display: none;">
-                                <label for="txtSortName">${LabelSortName}</label>
-                                <input type="text" id="txtSortName" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldDateAdded" style="display: none;">
-                                <label for="txtDateAdded">${LabelDateAdded}</label>
-                                <input type="date" id="txtDateAdded" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldStatus" style="display: none;">
-                                <label for="selectStatus">${LabelStatus}</label>
-                                <select id="selectStatus" data-mini="true"></select>
-                            </div>
-                            <div data-role="fieldcontain" id="fldArtist" style="display: none;">
-                                <label for="txtArtist">${LabelArtists}</label>
-                                <input type="text" id="txtArtist" placeholder="${LabelArtistsHelp}" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldAlbumArtist" style="display: none;">
-                                <label for="txtAlbumArtist">${LabelAlbumArtists}</label>
-                                <input type="text" id="txtAlbumArtist" placeholder="${LabelArtistsHelp}" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldAlbum" style="display: none;">
-                                <label for="txtAlbum">${LabelAlbum}</label>
-                                <input type="text" id="txtAlbum" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldParentIndexNumber" style="display: none;">
-                                <label id="lblParentIndexNumber" for="txtParentIndexNumber"></label>
-                                <input type="number" id="txtParentIndexNumber" pattern="[0-9]*" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldIndexNumber" style="display: none;">
-                                <label id="lblIndexNumber" for="txtIndexNumber"></label>
-                                <input type="number" id="txtIndexNumber" pattern="[0-9]*" />
-                            </div>
-                            <div id="fldCommunityRating" style="display: none;" data-role="fieldcontain">
-                                <label for="txtCommunityRating">${LabelCommunityRating}</label>
-                                <input type="number" id="txtCommunityRating" step=".1" min="0" max="10" />
-                            </div>
-                            <div id="fldCommunityVoteCount" style="display: none;" data-role="fieldcontain">
-                                <label for="txtCommunityVoteCount">${LabelVoteCount}</label>
-                                <input type="number" id="txtCommunityVoteCount" />
-                            </div>
-                            <div id="fldMetascore" style="display: none;" data-role="fieldcontain">
-                                <label for="txtMetascore">${LabelMetascore}</label>
-                                <input type="number" id="txtMetascore" step="1" min="0" max="100" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldCriticRating" style="display: none;">
-                                <label for="txtCriticRating">${LabelCriticRating}</label>
-                                <input type="number" id="txtCriticRating" step=".1" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldCriticRatingSummary" style="display: none;">
-                                <label for="txtCriticRatingSummary">${LabelCriticRatingSummary}</label>
-                                <input type="text" id="txtCriticRatingSummary" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldAwardSummary" style="display: none;">
-                                <label for="txtAwardSummary">${LabelAwardSummary}</label>
-                                <input type="text" id="txtAwardSummary" />
-                            </div>
-                            <div data-role="fieldcontain">
-                                <label for="txtHomePageUrl">${LabelWebsite}</label>
-                                <input type="url" id="txtHomePageUrl" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldTagline" style="display: none;">
-                                <label for="txtTagline">${LabelTagline}</label>
-                                <input type="text" id="txtTagline" />
-                            </div>
-                            <div data-role="fieldcontain">
-                                <label for="txtOverview">${LabelOverview}</label>
-                                <textarea id="txtOverview"></textarea>
-                            </div>
-                            <div data-role="fieldcontain" id="fldShortOverview" style="display: none;">
-                                <label for="txtShortOverview">${LabelShortOverview}</label>
-                                <textarea id="txtShortOverview"></textarea>
-                            </div>
-                            <div data-role="fieldcontain" id="fldPremiereDate" style="display: none;">
-                                <label id="lblPremiereDate" for="txtPremiereDate">${LabelReleaseDate}</label>
-                                <input type="date" id="txtPremiereDate" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldYear" style="display: none;">
-                                <label id="lblYear" for="txtProductionYear">${LabelYear}</label>
-                                <input type="number" id="txtProductionYear" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldPlaceOfBirth" style="display: none;">
-                                <label for="txtPlaceOfBirth">${LabelPlaceOfBirth}</label>
-                                <input type="text" id="txtPlaceOfBirth" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldEndDate" style="display: none;">
-                                <label id="lblEndDate" for="txtEndDate">${LabelEndDate}</label>
-                                <input type="date" id="txtEndDate" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldAirDays" style="display: none;">
-                                <label for="selectAirDays">${LabelAirDays}</label>
+                                    <div style="text-align: center;margin:2em 0 .5em;">
 
-                                <div data-role="controlgroup" data-mini="true">
-                                    <input type="checkbox" class="chkAirDay" id="chkSunday" data-day="Sunday">
-                                    <label for="chkSunday">${OptionSunday}</label>
-                                    <input type="checkbox" class="chkAirDay" id="chkMonday" data-day="Monday">
-                                    <label for="chkMonday">${OptionMonday}</label>
-                                    <input type="checkbox" class="chkAirDay" id="chkTuesday" data-day="Tuesday">
-                                    <label for="chkTuesday">${OptionTuesday}</label>
-                                    <input type="checkbox" class="chkAirDay" id="chkWednesday" data-day="Wednesday">
-                                    <label for="chkWednesday">${OptionWednesday}</label>
-                                    <input type="checkbox" class="chkAirDay" id="chkThursday" data-day="Thursday">
-                                    <label for="chkThursday">${OptionThursday}</label>
-                                    <input type="checkbox" class="chkAirDay" id="chkFriday" data-day="Friday">
-                                    <label for="chkFriday">${OptionFriday}</label>
-                                    <input type="checkbox" class="chkAirDay" id="chkSaturday" data-day="Saturday">
-                                    <label for="chkSaturday">${OptionSaturday}</label>
-                                </div>
+                                        <paper-button raised class="submit">
+                                            <button class="btnSave clearButton" type="submit" data-role="none" style="display:inline-block;">
+                                                <iron-icon icon="check"></iron-icon><span>${ButtonSave}</span>
+                                            </button>
+                                        </paper-button>
 
-                            </div>
-                            <div data-role="fieldcontain" id="fldAirTime" style="display: none;">
-                                <label for="txtAirTime">${LabelAirTime}</label>
-                                <input type="time" id="txtAirTime" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldSeriesRuntime" style="display: none;">
-                                <label for="txtSeriesRuntime">${LabelRuntimeMinutes}</label>
-                                <input type="number" id="txtSeriesRuntime" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldOfficialRating" style="display: none;">
-                                <label for="selectOfficialRating">${LabelParentalRating}</label>
-                                <select id="selectOfficialRating" data-mini="true"></select>
-                            </div>
-                            <div data-role="fieldcontain" id="fldCustomRating" style="display: none;">
-                                <label for="selectCustomRating">${LabelCustomRating}</label>
-                                <select id="selectCustomRating" data-mini="true"></select>
-                            </div>
-                            <div data-role="fieldcontain" id="fldBudget" style="display: none;">
-                                <label for="txtBudget">${LabelBudget}</label>
-                                <input type="number" id="txtBudget" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldRevenue" style="display: none;">
-                                <label for="txtRevenue">${LabelRevenue}</label>
-                                <input type="number" id="txtRevenue" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldOriginalAspectRatio" style="display: none;">
-                                <label for="txtOriginalAspectRatio">${LabelOriginalAspectRatio}</label>
-                                <input type="text" id="txtOriginalAspectRatio" />
-                            </div>
-                            <div data-role="fieldcontain" id="fldPlayers" style="display: none;">
-                                <label for="txtPlayers">${LabelPlayers}</label>
-                                <input type="number" id="txtPlayers" pattern="[0-9]*" />
-                            </div>
-                            <div data-role="fieldcontain" id="fld3dFormat" style="display: none;">
-                                <label for="select3dFormat">${Label3DFormat}</label>
-                                <select id="select3dFormat" data-mini="true">
-                                    <option value=""></option>
-                                    <option value="HalfSideBySide">HSBS</option>
-                                    <option value="HalfTopAndBottom">HTAB</option>
-                                    <option value="FullSideBySide">FSBS</option>
-                                    <option value="FullTopAndBottom">FTAB</option>
-                                </select>
-                            </div>
-                        </div>
-                        <br />
-
-                        <div class="detailSection" id="collapsibleDvdEpisodeInfo" style="display: none;">
-                            <div class="detailSectionHeader">
-                                ${HeaderAlternateEpisodeNumbers}
-                            </div>
-                            <div class="detailSectionContent" style="padding: 0 .5em;">
-                                <br />
-                                <div>
-                                    <label for="txtDvdSeasonNumber">${LabelDvdSeasonNumber}</label>
-                                    <input type="number" id="txtDvdSeasonNumber" pattern="[0-9]*" />
-                                </div>
-                                <div>
-                                    <label for="txtDvdEpisodeNumber">${LabelDvdEpisodeNumber}</label>
-                                    <input type="number" id="txtDvdEpisodeNumber" pattern="[0-9]*" />
-                                </div>
-                                <div>
-                                    <label for="txtAbsoluteEpisodeNumber">${LabelAbsoluteEpisodeNumber}</label>
-                                    <input type="number" id="txtAbsoluteEpisodeNumber" pattern="[0-9]*" />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="detailSection" id="collapsibleSpecialEpisodeInfo" style="display: none;">
-                            <div class="detailSectionHeader">
-                                ${HeaderSpecialEpisodeInfo}
-                            </div>
-                            <div class="detailSectionContent" style="padding: 0 .5em;">
-                                <br />
-                                <div>
-                                    <label for="txtAirsBeforeSeason">${LabelAirsBeforeSeason}</label>
-                                    <input type="number" id="txtAirsBeforeSeason" pattern="[0-9]*" />
-                                </div>
-                                <div>
-                                    <label for="txtAirsAfterSeason">${LabelAirsAfterSeason}</label>
-                                    <input type="number" id="txtAirsAfterSeason" pattern="[0-9]*" />
-                                </div>
-                                <div>
-                                    <label for="txtAirsBeforeEpisode">${LabelAirsBeforeEpisode}</label>
-                                    <input type="number" id="txtAirsBeforeEpisode" pattern="[0-9]*" />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="detailSection">
-                            <div class="detailSectionHeader">
-                                ${HeaderExternalIds}
-                            </div>
-                            <div class="detailSectionContent" style="padding: 0 .5em;">
-                                <div class="externalIds editorFieldset">
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="detailSection" id="collapsibleDisplaySettings" style="display:none;">
-                            <div class="detailSectionHeader">
-                                ${HeaderDisplaySettings}
-                            </div>
-                            <div class="detailSectionContent" style="padding: 0 .5em;">
-                                <br />
-                                <div id="fldSourceType" style="display: none;" class="fldDisplaySetting">
-                                    <label for="txtDisplayMediaType">${LabelTreatImageAs}</label>
-                                    <input type="text" id="txtDisplayMediaType" />
-                                </div>
-                                <div id="fldDisplaySpecialsInline" class="fldDisplaySetting">
-                                    <label for="chkDisplaySpecialsInline">${LabelDisplaySpecialsWithinSeasons}</label>
-                                    <input data-mini="true" type="checkbox" id="chkDisplaySpecialsInline" />
-                                </div>
-                                <div id="fldDisplayOrder" class="fldDisplaySetting">
-                                    <label for="selectDisplayOrder" id="labelDisplayOrder">${LabelDisplayOrder}</label>
-                                    <select id="selectDisplayOrder" data-mini="true"></select>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div data-role="collapsible" data-mini="true" id="countriesCollapsible" style="display: none; margin-top: 1em;">
-                            <h3>${HeaderCountries}</h3>
-                            <div data-role="editableListviewContainer">
-                                <div>
-                                    <div style="display: inline-block; width: 80%;">
-                                        <input type="text" class="txtEditableListview" />
+                                        <paper-button raised class="subdued btnRefresh btnRefreshAdvanced"><iron-icon icon="refresh"></iron-icon><span>${ButtonRefresh}</span></paper-button>
+                                        <paper-button id="btnIdentify" raised class="subdued"><iron-icon icon="info"></iron-icon><span>${ButtonIdentify}</span></paper-button>
                                     </div>
-                                    <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
-                                </div>
-                                <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listCountries"></ul>
-                            </div>
-                        </div>
-                        <div data-role="collapsible" data-mini="true" id="genresCollapsible" style="display: none; margin-top: 1em;">
-                            <h3>${HeaderGenres}</h3>
-                            <div data-role="editableListviewContainer">
-                                <div>
-                                    <div style="display: inline-block; width: 80%;">
-                                        <input type="text" class="txtEditableListview" />
-                                    </div>
-                                    <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
-                                </div>
-                                <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listGenres"></ul>
-                            </div>
-                        </div>
-                        <div data-mini="true" data-role="collapsible" id="peopleCollapsible" style="display: none; margin-top: 1em;">
-                            <h3>${HeaderPeople}</h3>
-                            <div>
-                                <br />
-                                <button type="button" id="btnAddPerson" data-icon="plus" data-mini="true" data-theme="a">${ButtonAdd}</button>
-                                <br />
-                                <ul data-role="listview" data-inset="true" data-split-icon="delete" id="peopleList"></ul>
-                            </div>
-                        </div>
-                        <div data-mini="true" data-role="collapsible" id="keywordsCollapsible" style="display: none; margin-top: 1em;">
-                            <h3>${HeaderPlotKeywords}</h3>
-                            <div data-role="editableListviewContainer">
-                                <div>
-                                    <div style="display: inline-block; width: 80%;">
-                                        <input type="text" class="txtEditableListview" />
-                                    </div>
-                                    <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
-                                </div>
-                                <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listKeywords"></ul>
-                            </div>
-                        </div>
-                        <div data-role="collapsible" data-mini="true" id="studiosCollapsible" style="display: none; margin-top: 1em;">
-                            <h3>${HeaderStudios}</h3>
-                            <div data-role="editableListviewContainer">
-                                <div>
-                                    <div style="display: inline-block; width: 80%;">
-                                        <input type="text" class="txtEditableListview" />
-                                    </div>
-                                    <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
-                                </div>
-                                <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listStudios"></ul>
-                            </div>
-                        </div>
-                        <div data-mini="true" data-role="collapsible" id="tagsCollapsible" style="display: none; margin-top: 1em;">
-                            <h3>${HeaderTags}</h3>
-                            <div data-role="editableListviewContainer">
-                                <div>
-                                    <div style="display: inline-block; width: 80%;">
-                                        <input type="text" class="txtEditableListview" />
-                                    </div>
-                                    <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
-                                </div>
-                                <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
-                            </div>
-                        </div>
-                        <div data-role="collapsible" data-mini="true" id="metadataSettingsCollapsible" style="display: none; margin-top: 1em;">
-                            <h3>${HeaderMetadataSettings}</h3>
-                            <div>
-                                <br />
-                                <div>
-                                    <label for="selectLanguage">${LabelMetadataDownloadLanguage}</label>
-                                    <select id="selectLanguage" data-mini="true"></select>
-                                </div>
-                                <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
-                                <br />
-                                <div>
-                                    <label for="selectCountry">${LabelCountry}</label>
-                                    <select id="selectCountry" data-mini="true"></select>
-                                </div>
-                                <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
 
-                                <p>
+                                    <div style="padding: 10px 0;">
+                                        <div data-role="fieldcontain" id="fldContentType" style="display:none;">
+                                            <label for="selectContentType">${LabelContentType}</label>
+                                            <select id="selectContentType" data-mini="true"></select>
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldPath">
+                                            <label for="txtPath">${LabelPath}</label>
+                                            <input type="text" id="txtPath" readonly="readonly" />
+                                        </div>
+                                        <div data-role="fieldcontain">
+                                            <label for="txtName">${LabelName}</label>
+                                            <input type="text" id="txtName" required="required" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldSortName" style="display: none;">
+                                            <label for="txtSortName">${LabelSortName}</label>
+                                            <input type="text" id="txtSortName" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldDateAdded" style="display: none;">
+                                            <label for="txtDateAdded">${LabelDateAdded}</label>
+                                            <input type="date" id="txtDateAdded" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldStatus" style="display: none;">
+                                            <label for="selectStatus">${LabelStatus}</label>
+                                            <select id="selectStatus" data-mini="true"></select>
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldArtist" style="display: none;">
+                                            <label for="txtArtist">${LabelArtists}</label>
+                                            <input type="text" id="txtArtist" placeholder="${LabelArtistsHelp}" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldAlbumArtist" style="display: none;">
+                                            <label for="txtAlbumArtist">${LabelAlbumArtists}</label>
+                                            <input type="text" id="txtAlbumArtist" placeholder="${LabelArtistsHelp}" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldAlbum" style="display: none;">
+                                            <label for="txtAlbum">${LabelAlbum}</label>
+                                            <input type="text" id="txtAlbum" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldParentIndexNumber" style="display: none;">
+                                            <label id="lblParentIndexNumber" for="txtParentIndexNumber"></label>
+                                            <input type="number" id="txtParentIndexNumber" pattern="[0-9]*" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldIndexNumber" style="display: none;">
+                                            <label id="lblIndexNumber" for="txtIndexNumber"></label>
+                                            <input type="number" id="txtIndexNumber" pattern="[0-9]*" />
+                                        </div>
+                                        <div id="fldCommunityRating" style="display: none;" data-role="fieldcontain">
+                                            <label for="txtCommunityRating">${LabelCommunityRating}</label>
+                                            <input type="number" id="txtCommunityRating" step=".1" min="0" max="10" />
+                                        </div>
+                                        <div id="fldCommunityVoteCount" style="display: none;" data-role="fieldcontain">
+                                            <label for="txtCommunityVoteCount">${LabelVoteCount}</label>
+                                            <input type="number" id="txtCommunityVoteCount" />
+                                        </div>
+                                        <div id="fldMetascore" style="display: none;" data-role="fieldcontain">
+                                            <label for="txtMetascore">${LabelMetascore}</label>
+                                            <input type="number" id="txtMetascore" step="1" min="0" max="100" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldCriticRating" style="display: none;">
+                                            <label for="txtCriticRating">${LabelCriticRating}</label>
+                                            <input type="number" id="txtCriticRating" step=".1" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldCriticRatingSummary" style="display: none;">
+                                            <label for="txtCriticRatingSummary">${LabelCriticRatingSummary}</label>
+                                            <input type="text" id="txtCriticRatingSummary" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldAwardSummary" style="display: none;">
+                                            <label for="txtAwardSummary">${LabelAwardSummary}</label>
+                                            <input type="text" id="txtAwardSummary" />
+                                        </div>
+                                        <div data-role="fieldcontain">
+                                            <label for="txtHomePageUrl">${LabelWebsite}</label>
+                                            <input type="url" id="txtHomePageUrl" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldTagline" style="display: none;">
+                                            <label for="txtTagline">${LabelTagline}</label>
+                                            <input type="text" id="txtTagline" />
+                                        </div>
+                                        <div data-role="fieldcontain">
+                                            <label for="txtOverview">${LabelOverview}</label>
+                                            <textarea id="txtOverview"></textarea>
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldShortOverview" style="display: none;">
+                                            <label for="txtShortOverview">${LabelShortOverview}</label>
+                                            <textarea id="txtShortOverview"></textarea>
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldPremiereDate" style="display: none;">
+                                            <label id="lblPremiereDate" for="txtPremiereDate">${LabelReleaseDate}</label>
+                                            <input type="date" id="txtPremiereDate" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldYear" style="display: none;">
+                                            <label id="lblYear" for="txtProductionYear">${LabelYear}</label>
+                                            <input type="number" id="txtProductionYear" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldPlaceOfBirth" style="display: none;">
+                                            <label for="txtPlaceOfBirth">${LabelPlaceOfBirth}</label>
+                                            <input type="text" id="txtPlaceOfBirth" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldEndDate" style="display: none;">
+                                            <label id="lblEndDate" for="txtEndDate">${LabelEndDate}</label>
+                                            <input type="date" id="txtEndDate" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldAirDays" style="display: none;">
+                                            <label for="selectAirDays">${LabelAirDays}</label>
+
+                                            <div data-role="controlgroup" data-mini="true">
+                                                <input type="checkbox" class="chkAirDay" id="chkSunday" data-day="Sunday">
+                                                <label for="chkSunday">${OptionSunday}</label>
+                                                <input type="checkbox" class="chkAirDay" id="chkMonday" data-day="Monday">
+                                                <label for="chkMonday">${OptionMonday}</label>
+                                                <input type="checkbox" class="chkAirDay" id="chkTuesday" data-day="Tuesday">
+                                                <label for="chkTuesday">${OptionTuesday}</label>
+                                                <input type="checkbox" class="chkAirDay" id="chkWednesday" data-day="Wednesday">
+                                                <label for="chkWednesday">${OptionWednesday}</label>
+                                                <input type="checkbox" class="chkAirDay" id="chkThursday" data-day="Thursday">
+                                                <label for="chkThursday">${OptionThursday}</label>
+                                                <input type="checkbox" class="chkAirDay" id="chkFriday" data-day="Friday">
+                                                <label for="chkFriday">${OptionFriday}</label>
+                                                <input type="checkbox" class="chkAirDay" id="chkSaturday" data-day="Saturday">
+                                                <label for="chkSaturday">${OptionSaturday}</label>
+                                            </div>
+
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldAirTime" style="display: none;">
+                                            <label for="txtAirTime">${LabelAirTime}</label>
+                                            <input type="time" id="txtAirTime" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldSeriesRuntime" style="display: none;">
+                                            <label for="txtSeriesRuntime">${LabelRuntimeMinutes}</label>
+                                            <input type="number" id="txtSeriesRuntime" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldOfficialRating" style="display: none;">
+                                            <label for="selectOfficialRating">${LabelParentalRating}</label>
+                                            <select id="selectOfficialRating" data-mini="true"></select>
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldCustomRating" style="display: none;">
+                                            <label for="selectCustomRating">${LabelCustomRating}</label>
+                                            <select id="selectCustomRating" data-mini="true"></select>
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldBudget" style="display: none;">
+                                            <label for="txtBudget">${LabelBudget}</label>
+                                            <input type="number" id="txtBudget" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldRevenue" style="display: none;">
+                                            <label for="txtRevenue">${LabelRevenue}</label>
+                                            <input type="number" id="txtRevenue" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldOriginalAspectRatio" style="display: none;">
+                                            <label for="txtOriginalAspectRatio">${LabelOriginalAspectRatio}</label>
+                                            <input type="text" id="txtOriginalAspectRatio" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fldPlayers" style="display: none;">
+                                            <label for="txtPlayers">${LabelPlayers}</label>
+                                            <input type="number" id="txtPlayers" pattern="[0-9]*" />
+                                        </div>
+                                        <div data-role="fieldcontain" id="fld3dFormat" style="display: none;">
+                                            <label for="select3dFormat">${Label3DFormat}</label>
+                                            <select id="select3dFormat" data-mini="true">
+                                                <option value=""></option>
+                                                <option value="HalfSideBySide">HSBS</option>
+                                                <option value="HalfTopAndBottom">HTAB</option>
+                                                <option value="FullSideBySide">FSBS</option>
+                                                <option value="FullTopAndBottom">FTAB</option>
+                                            </select>
+                                        </div>
+                                    </div>
                                     <br />
-                                    <label for="chkLockData">${LabelLockItemToPreventChanges}</label>
-                                    <input data-mini="true" type="checkbox" id="chkLockData" onchange="EditItemMetadataPage.setProviderSettingsContainerVisibility(this)" />
-                                </p>
-                                <br />
-                                <div id="providerSettingsContainer" style="display: none">
+
+                                    <div class="detailSection" id="collapsibleDvdEpisodeInfo" style="display: none;">
+                                        <div class="detailSectionHeader">
+                                            ${HeaderAlternateEpisodeNumbers}
+                                        </div>
+                                        <div class="detailSectionContent" style="padding: 0 .5em;">
+                                            <br />
+                                            <div>
+                                                <label for="txtDvdSeasonNumber">${LabelDvdSeasonNumber}</label>
+                                                <input type="number" id="txtDvdSeasonNumber" pattern="[0-9]*" />
+                                            </div>
+                                            <div>
+                                                <label for="txtDvdEpisodeNumber">${LabelDvdEpisodeNumber}</label>
+                                                <input type="number" id="txtDvdEpisodeNumber" pattern="[0-9]*" />
+                                            </div>
+                                            <div>
+                                                <label for="txtAbsoluteEpisodeNumber">${LabelAbsoluteEpisodeNumber}</label>
+                                                <input type="number" id="txtAbsoluteEpisodeNumber" pattern="[0-9]*" />
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="detailSection" id="collapsibleSpecialEpisodeInfo" style="display: none;">
+                                        <div class="detailSectionHeader">
+                                            ${HeaderSpecialEpisodeInfo}
+                                        </div>
+                                        <div class="detailSectionContent" style="padding: 0 .5em;">
+                                            <br />
+                                            <div>
+                                                <label for="txtAirsBeforeSeason">${LabelAirsBeforeSeason}</label>
+                                                <input type="number" id="txtAirsBeforeSeason" pattern="[0-9]*" />
+                                            </div>
+                                            <div>
+                                                <label for="txtAirsAfterSeason">${LabelAirsAfterSeason}</label>
+                                                <input type="number" id="txtAirsAfterSeason" pattern="[0-9]*" />
+                                            </div>
+                                            <div>
+                                                <label for="txtAirsBeforeEpisode">${LabelAirsBeforeEpisode}</label>
+                                                <input type="number" id="txtAirsBeforeEpisode" pattern="[0-9]*" />
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="detailSection">
+                                        <div class="detailSectionHeader">
+                                            ${HeaderExternalIds}
+                                        </div>
+                                        <div class="detailSectionContent" style="padding: 0 .5em;">
+                                            <div class="externalIds editorFieldset">
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="detailSection" id="collapsibleDisplaySettings" style="display:none;">
+                                        <div class="detailSectionHeader">
+                                            ${HeaderDisplaySettings}
+                                        </div>
+                                        <div class="detailSectionContent" style="padding: 0 .5em;">
+                                            <br />
+                                            <div id="fldSourceType" style="display: none;" class="fldDisplaySetting">
+                                                <label for="txtDisplayMediaType">${LabelTreatImageAs}</label>
+                                                <input type="text" id="txtDisplayMediaType" />
+                                            </div>
+                                            <div id="fldDisplaySpecialsInline" class="fldDisplaySetting">
+                                                <label for="chkDisplaySpecialsInline">${LabelDisplaySpecialsWithinSeasons}</label>
+                                                <input data-mini="true" type="checkbox" id="chkDisplaySpecialsInline" />
+                                            </div>
+                                            <div id="fldDisplayOrder" class="fldDisplaySetting">
+                                                <label for="selectDisplayOrder" id="labelDisplayOrder">${LabelDisplayOrder}</label>
+                                                <select id="selectDisplayOrder" data-mini="true"></select>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div data-role="collapsible" data-mini="true" id="countriesCollapsible" style="display: none; margin-top: 1em;">
+                                        <h3>${HeaderCountries}</h3>
+                                        <div data-role="editableListviewContainer">
+                                            <div>
+                                                <div style="display: inline-block; width: 80%;">
+                                                    <input type="text" class="txtEditableListview" />
+                                                </div>
+                                                <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
+                                            </div>
+                                            <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listCountries"></ul>
+                                        </div>
+                                    </div>
+                                    <div data-role="collapsible" data-mini="true" id="genresCollapsible" style="display: none; margin-top: 1em;">
+                                        <h3>${HeaderGenres}</h3>
+                                        <div data-role="editableListviewContainer">
+                                            <div>
+                                                <div style="display: inline-block; width: 80%;">
+                                                    <input type="text" class="txtEditableListview" />
+                                                </div>
+                                                <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
+                                            </div>
+                                            <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listGenres"></ul>
+                                        </div>
+                                    </div>
+                                    <div data-mini="true" data-role="collapsible" id="peopleCollapsible" style="display: none; margin-top: 1em;">
+                                        <h3>${HeaderPeople}</h3>
+                                        <div>
+                                            <br />
+                                            <button type="button" id="btnAddPerson" data-icon="plus" data-mini="true" data-theme="a">${ButtonAdd}</button>
+                                            <br />
+                                            <ul data-role="listview" data-inset="true" data-split-icon="delete" id="peopleList"></ul>
+                                        </div>
+                                    </div>
+                                    <div data-mini="true" data-role="collapsible" id="keywordsCollapsible" style="display: none; margin-top: 1em;">
+                                        <h3>${HeaderPlotKeywords}</h3>
+                                        <div data-role="editableListviewContainer">
+                                            <div>
+                                                <div style="display: inline-block; width: 80%;">
+                                                    <input type="text" class="txtEditableListview" />
+                                                </div>
+                                                <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
+                                            </div>
+                                            <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listKeywords"></ul>
+                                        </div>
+                                    </div>
+                                    <div data-role="collapsible" data-mini="true" id="studiosCollapsible" style="display: none; margin-top: 1em;">
+                                        <h3>${HeaderStudios}</h3>
+                                        <div data-role="editableListviewContainer">
+                                            <div>
+                                                <div style="display: inline-block; width: 80%;">
+                                                    <input type="text" class="txtEditableListview" />
+                                                </div>
+                                                <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
+                                            </div>
+                                            <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listStudios"></ul>
+                                        </div>
+                                    </div>
+                                    <div data-mini="true" data-role="collapsible" id="tagsCollapsible" style="display: none; margin-top: 1em;">
+                                        <h3>${HeaderTags}</h3>
+                                        <div data-role="editableListviewContainer">
+                                            <div>
+                                                <div style="display: inline-block; width: 80%;">
+                                                    <input type="text" class="txtEditableListview" />
+                                                </div>
+                                                <a data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-iconpos="notext" onclick="EditItemMetadataPage.addElementToEditableListview(this)" style="vertical-align: top;">${ButtonAdd}</a>
+                                            </div>
+                                            <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
+                                        </div>
+                                    </div>
+                                    <div data-role="collapsible" data-mini="true" id="metadataSettingsCollapsible" style="display: none; margin-top: 1em;">
+                                        <h3>${HeaderMetadataSettings}</h3>
+                                        <div>
+                                            <br />
+                                            <div>
+                                                <label for="selectLanguage">${LabelMetadataDownloadLanguage}</label>
+                                                <select id="selectLanguage" data-mini="true"></select>
+                                            </div>
+                                            <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
+                                            <br />
+                                            <div>
+                                                <label for="selectCountry">${LabelCountry}</label>
+                                                <select id="selectCountry" data-mini="true"></select>
+                                            </div>
+                                            <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
+
+                                            <p>
+                                                <br />
+                                                <label for="chkLockData">${LabelLockItemToPreventChanges}</label>
+                                                <input data-mini="true" type="checkbox" id="chkLockData" onchange="EditItemMetadataPage.setProviderSettingsContainerVisibility(this)" />
+                                            </p>
+                                            <br />
+                                            <div id="providerSettingsContainer" style="display: none">
+                                            </div>
+                                            <br />
+                                        </div>
+                                    </div>
+                                    <br />
+                                    <button type="submit" data-role="none" class="clearButton btnSave">
+                                        <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
+                                    </button>
+                                </div>
+
+                            </form>
+                        </div>
+                    </neon-animatable>
+                    <neon-animatable>
+                        <div class="editorTab subtitleTabContent">
+                            <br />
+                            <div class="readOnlyContent" style="max-width: 700px;">
+                                <div class="subtitleList"></div>
+                            </div>
+                            <h1>${HeaderSearchForSubtitles}</h1>
+
+                            <form class="subtitleSearchForm">
+                                <div style="display: inline-block; width: 85%;">
+                                    <label for="selectLanguage">${LabelLanguage}</label>
+                                    <select id="selectLanguage" required="required" data-mini="true"></select>
+                                </div>
+                                <button type="submit" data-icon="search" class="btnSearchSubtitles" data-inline="true" data-iconpos="notext" data-mini="true" style="vertical-align: bottom;">${ButtonSearch}</button>
+                            </form>
+                            <br />
+                            <div class="readOnlyContent" style="max-width: 700px;">
+                                <div class="subtitleResults"></div>
+                                <div class="noSearchResults" style="display: none;">
+                                    ${MessageNoSubtitleSearchResultsFound}
+                                </div>
+                            </div>
+                        </div>
+                    </neon-animatable>
+                    <neon-animatable>
+                        <div class="editorTab collectionItemsTabContent">
+                            <p style="margin:1.5em 0;">
+                                ${EditCollectionItemsHelp}
+                            </p>
+
+                            <div>
+                                <button type="button" id="btnAddItem" data-icon="plus" data-inline="true" data-mini="true">${ButtonAdd}</button>
+                                <button type="button" id="btnRemoveItems" data-icon="delete" data-inline="true" data-mini="true" disabled="disabled">${ButtonRemove}</button>
+                            </div>
+                            <br />
+                            <div class="collectionItems"></div>
+                        </div>
+                    </neon-animatable>
+                    <neon-animatable>
+                        <div class="editorTab imageEditorTab">
+                            <div style="text-align: center;margin:2em 0 .5em;">
+
+                                <paper-button raised class="subdued btnBrowseAllImages"><iron-icon icon="cloud"></iron-icon><span>${ButtonBrowseImages}</span></paper-button>
+                                <paper-button raised class="subdued btnOpenUploadMenu"><iron-icon icon="add"></iron-icon><span>${ButtonUpload}</span></paper-button>
+                            </div>
+
+                            <div id="imagesContainer" style="display: none;">
+                                <h1>${HeaderImages}</h1>
+                                <div id="images">
                                 </div>
                                 <br />
                             </div>
-                        </div>
-                        <br />
-                        <button class="btnSave" type="submit" data-theme="a" data-icon="check">
-                            ${ButtonSave}
-                        </button>
-                    </div>
 
-                </form>
+                            <div id="backdropsContainer" style="display: none;">
+                                <h1>${HeaderBackdrops}</h1>
+                                <div id="backdrops">
+                                </div>
+                                <br />
+                            </div>
+
+                            <div id="screenshotsContainer" style="display: none;">
+                                <h1>${Screenshots}</h1>
+                                <div id="screenshots">
+                                </div>
+                            </div>
+                        </div>
+                    </neon-animatable>
+                </neon-animated-pages>
             </div>
         </div>
+        <div data-role="content">
+        </div>
         <div data-role="popup" class="popupIdentify popup" data-theme="a">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
@@ -534,6 +608,135 @@
             </div>
 
         </div>
-    </div>
+
+        <div data-role="popup" class="ui-content popupSubtitleViewer">
+            <a href="#" data-rel="back" data-role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
+            <div class="subtitleViewerContent">
+                <pre class="subtitleContent" style="margin: 0; border-radius: 0;"></pre>
+            </div>
+        </div>
+
+        <div data-role="popup" class="popupIdentifyCollection popup" data-theme="a">
+
+            <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
+                <h3>
+                    ${HeaderAddTitles}
+                </h3>
+            </div>
+
+            <div data-role="content">
+
+                <form class="collectionItemSearchForm" style="max-width: initial;">
+
+                    <div>
+                        <label for="txtLookupName">${LabelName}</label>
+
+                        <div style="display: inline-block; width: 75%;">
+                            <input type="text" id="txtLookupName" required="required" />
+                        </div>
+
+                        <button type="submit" data-icon="search" data-mini="true" data-inline="true" data-iconpos="notext">
+                            ${ButtonSearch}
+                        </button>
+                    </div>
+
+                    <div class="collectionItemSearchResults">
+                    </div>
+
+                    <button id="btnAddItems" type="button" data-icon="plus" data-mini="true">
+                        ${ButtonAdd}
+                    </button>
+                </form>
+            </div>
+
+        </div>
+
+        <div data-role="popup" id="popupUpload" data-theme="a">
+            <form class="uploadItemImageForm" style="max-width: 100%; margin: 0 1.5em 1.5em;">
+                <h2>${HeaderAddUpdateImage}</h2>
+                <div>
+                    <p>${LabelJpgPngOnly}</p>
+                    <input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
+
+                    <div id="imageDropZone" class="imageDropZone">
+                        <h3>${LabelDropImageHere}</h3>
+                        <output id="imageOutput"></output>
+                    </div>
+                    <div id="fldUpload" style="display: none;">
+                        <p data-role="fieldcontain">
+                            <label for="selectImageType">${LabelImageType}</label>
+                            <select id="selectImageType" name="selectImageType">
+                                <option value="Primary">${OptionPrimary}</option>
+                                <option value="Art">${OptionArt}</option>
+                                <option value="Backdrop">${OptionBackdrop}</option>
+                                <option value="Banner">${OptionBanner}</option>
+                                <option value="Box">${OptionBox}</option>
+                                <option value="BoxRear">${OptionBoxRear}</option>
+                                <option value="Disc">${OptionDisc}</option>
+                                <option value="Icon">${OptionIcon}</option>
+                                <option value="Logo">${OptionLogo}</option>
+                                <option value="Menu">${OptionMenu}</option>
+                                <option value="Screenshot">${OptionScreenshot}</option>
+                                <option value="Thumb">${OptionThumb}</option>
+                            </select>
+                        </p>
+                        <button type="submit" data-icon="check" data-theme="b">${ButtonUpload}</button>
+                    </div>
+                    <a data-role="button" data-rel="back" data-icon="delete" onclick="Events.trigger($('#uploadImage').val('')[0], 'change');">${ButtonCancel}</a>
+                </div>
+            </form>
+        </div>
+
+        <div data-role="popup" class="popup popupDownload" data-theme="a">
+
+            <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">${ButtonClose}</a>
+            <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
+                <h3>${HeaderBrowseOnlineImages}</h3>
+            </div>
+
+            <div data-role="content">
+
+                <div style="text-align: center;">
+                    <div style="margin: 0; display: inline-block;">
+                        <label for="selectImageProvider">${LabelSource}</label>
+                    </div>
+                    <div style="margin: 0; display: inline-block;">
+                        <select id="selectImageProvider" name="selectImageProvider" data-mini="true" data-inline="true">
+                            <option value="">${OptionAll}</option>
+                        </select>
+                    </div>
+                    <div style="margin: 0; display: inline-block;">
+                        <label for="selectBrowsableImageType">${LabelImage}</label>
+                    </div>
+                    <div style="margin: 0; display: inline-block;">
+                        <select id="selectBrowsableImageType" name="selectBrowsableImageType" data-mini="true" data-inline="true">
+                            <option value="Primary">${OptionPrimary}</option>
+                            <option value="Art">${OptionArt}</option>
+                            <option value="Backdrop">${OptionBackdrop}</option>
+                            <option value="Banner">${OptionBanner}</option>
+                            <option value="Box">${OptionBox}</option>
+                            <option value="BoxRear">${OptionBoxRear}</option>
+                            <option value="Disc">${OptionDisc}</option>
+                            <option value="Icon">${OptionIcon}</option>
+                            <option value="Logo">${OptionLogo}</option>
+                            <option value="Menu">${OptionMenu}</option>
+                            <option value="Screenshot">${OptionScreenshot}</option>
+                            <option value="Thumb">${OptionThumb}</option>
+                        </select>
+                    </div>
+                    <div class="availableImagesPaging" style="margin: 0; display: inline-block;"></div>
+                    <div style="margin: 0; display: inline-block; vertical-align: middle; margin-left: 10px;">
+                        <label for="chkAllLanguages">${LabelAllLanguages}</label>
+                        <input type="checkbox" id="chkAllLanguages" data-mini="true" />
+                    </div>
+                </div>
+
+                <div class="availableImagesList"></div>
+                <div style="text-align: center;">
+                    <a href="#" data-rel="back" data-role="button" data-mini="true" data-inline="true" data-icon="delete">${ButtonClose}</a>
+                </div>
+            </div>
+        </div>
+        </div>
 </body>
 </html>
diff --git a/dashboard-ui/edititemsubtitles.html b/dashboard-ui/edititemsubtitles.html
deleted file mode 100644
index b476ac445e..0000000000
--- a/dashboard-ui/edititemsubtitles.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="editItemSubtitlesPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-contextname="${HeaderMetadataManager}" data-require="scripts/editorsidebar,scripts/edititemsubtitles,jqmicons">
-        <div data-role="content editPageContent">
-            <div class="editPageSidebar smoothScrollY">
-                <div class="libraryTree">
-                    <ul></ul>
-                </div>
-            </div>
-            <div class="editPageInnerContent">
-                <h1 class="itemName editPageName">&nbsp;</h1>
-                <br />
-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a id="btnEditMetadata" href="#" data-role="button">${TabMetadata}</a>
-                    <a href="#" data-role="button" class="ui-btn-active">${TabSubtitles}</a>
-                    <a id="btnEditImages" href="#" data-role="button">${TabImages}</a>
-                </div>
-
-                <div class="readOnlyContent" style="max-width: 700px;">
-                    <div class="subtitleList"></div>
-                </div>
-                <h1>${HeaderSearchForSubtitles}</h1>
-
-                <form class="subtitleSearchForm">
-                    <div style="display: inline-block; width: 85%;">
-                        <label for="selectLanguage">${LabelLanguage}</label>
-                        <select id="selectLanguage" required="required" data-mini="true"></select>
-                    </div>
-                    <button type="submit" data-icon="search" class="btnSearchSubtitles" data-inline="true" data-iconpos="notext" data-mini="true" style="vertical-align: bottom;">${ButtonSearch}</button>
-                </form>
-                <br />
-                <div class="readOnlyContent" style="max-width: 700px;">
-                    <div class="subtitleResults"></div>
-                    <div class="noSearchResults" style="display: none;">
-                        ${MessageNoSubtitleSearchResultsFound}
-                    </div>
-                </div>
-
-            </div>
-        </div>
-
-        <div data-role="popup" class="ui-content popupSubtitleViewer">
-            <a href="#" data-rel="back" data-role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
-            <div class="subtitleViewerContent">
-                <pre class="subtitleContent" style="margin: 0; border-radius: 0;"></pre>
-            </div>
-        </div>
-    </div>
-</body>
-</html>
diff --git a/dashboard-ui/scripts/editcollectionitems.js b/dashboard-ui/scripts/editcollectionitems.js
index 5ec7b5c38e..bb7facd2d8 100644
--- a/dashboard-ui/scripts/editcollectionitems.js
+++ b/dashboard-ui/scripts/editcollectionitems.js
@@ -2,14 +2,6 @@
 
     var currentItem;
 
-    function updateTabs(page, item) {
-
-        var query = MetadataEditor.getEditQueryString(item);
-
-        $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
-        $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
-    }
-
     function reload(page) {
 
         Dashboard.showLoadingMsg();
@@ -22,8 +14,6 @@
 
             LibraryBrowser.renderName(item, $('.itemName', page), true);
 
-            updateTabs(page, item);
-
             reloadTitles(page, item);
         });
     }
@@ -192,7 +182,7 @@
 
             Dashboard.hideLoadingMsg();
 
-            $('.popupIdentify', page).popup('close');
+            $('.popupIdentifyCollection', page).popup('close');
 
             reload(page);
 
@@ -237,29 +227,14 @@
         return false;
     }
 
-    $(document).on('pageinitdepends', "#editCollectionTitlesPage", function () {
+    $(document).on('pageinitdepends', "#editItemMetadataPage", function () {
 
         var page = this;
 
-        $('.libraryTree', page).on('itemclicked', function (event, data) {
-
-            if (data.id != currentItem.Id) {
-
-                MetadataEditor.currentItemId = data.id;
-                MetadataEditor.currentItemType = data.itemType;
-                //Dashboard.navigate('edititemmetadata.html?id=' + data.id);
-
-                //$.mobile.urlHistory.ignoreNextHashChange = true;
-                window.location.hash = 'editItemImagesPage?id=' + data.id;
-
-                reload(page);
-            }
-        });
-
         $('#btnAddItem', page).on('click', function () {
 
 
-            var popup = $('.popupIdentify', page).popup('open');
+            var popup = $('.popupIdentifyCollection', page).popup('open');
 
             $('#txtLookupName', popup).val('');
             $('.collectionItemSearchResults', popup).empty();
@@ -279,17 +254,14 @@
 
         $('.collectionItemSearchForm').off('submit', onSearchFormSubmit).on('submit', onSearchFormSubmit);
 
-    }).on('pagebeforeshowready', "#editCollectionTitlesPage", function () {
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
 
-        var page = this;
+            if (parseInt(this.selected) == 2) {
+                var tabContent = page.querySelector('.collectionItemsTabContent');
 
-        reload(page);
-
-    }).on('pagebeforehide', "#editCollectionTitlesPage", function () {
-
-        var page = this;
-
-        currentItem = null;
+                reload(tabContent);
+            }
+        });
     });
 
 })(jQuery, document, window, window.FileReader, escape);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/edititemimages.js b/dashboard-ui/scripts/edititemimages.js
index 8196532c88..47a96bcb45 100644
--- a/dashboard-ui/scripts/edititemimages.js
+++ b/dashboard-ui/scripts/edititemimages.js
@@ -8,15 +8,6 @@
     var browsableImageType = 'Primary';
     var selectedProvider;
 
-    function updateTabs(page, item) {
-
-        var query = MetadataEditor.getEditQueryString(item);
-
-        $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
-        $('#btnEditSubtitles', page).attr('href', 'edititemsubtitles.html?' + query);
-        $('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
-    }
-
     function getBaseRemoteOptions() {
 
         var options = {};
@@ -245,20 +236,6 @@
 
             LibraryBrowser.renderName(item, $('.itemName', page), true);
 
-            updateTabs(page, item);
-
-            if (item.Type == "BoxSet") {
-                $('#btnEditCollectionTitles', page).show();
-            } else {
-                $('#btnEditCollectionTitles', page).hide();
-            }
-
-            if (item.MediaType == "Video" && item.LocationType == "FileSystem" && item.Type !== 'TvChannel') {
-                $('#btnEditSubtitles', page).show();
-            } else {
-                $('#btnEditSubtitles', page).hide();
-            }
-
             ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
 
                 if (providers.length) {
@@ -520,25 +497,10 @@
 
     window.EditItemImagesPage = new editItemImages();
 
-    $(document).on('pageinitdepends', "#editItemImagesPage", function () {
+    $(document).on('pageinitdepends', "#editItemMetadataPage", function () {
 
         var page = this;
 
-        $('.libraryTree', page).on('itemclicked', function (event, data) {
-
-            if (data.id != currentItem.Id) {
-
-                MetadataEditor.currentItemId = data.id;
-                MetadataEditor.currentItemType = data.itemType;
-                //Dashboard.navigate('edititemmetadata.html?id=' + data.id);
-
-                //$.mobile.urlHistory.ignoreNextHashChange = true;
-                window.location.hash = 'editItemImagesPage?id=' + data.id;
-
-                reload(page);
-            }
-        });
-
         $('#selectBrowsableImageType', page).on('change', function () {
 
             browsableImageType = this.value;
@@ -578,12 +540,6 @@
             reloadBrowsableImages(page);
         });
 
-    }).on('pageshowready', "#editItemImagesPage", function () {
-
-        var page = this;
-
-        reload(page);
-
         $('#uploadImage', page).on("change", function () {
             setFiles(page, this.files);
         });
@@ -605,15 +561,14 @@
             return false;
         });
 
-    }).on('pagebeforehide', "#editItemImagesPage", function () {
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
 
-        var page = this;
+            if (parseInt(this.selected) == 3) {
+                var tabContent = page.querySelector('.imageEditorTab');
 
-        currentItem = null;
-
-        $('#uploadImage', page).off("change");
-
-        $("#imageDropZone", page).off('dragover').off('drop');
+                reload(tabContent);
+            }
+        });
     });
 
 })(jQuery, document, window, window.FileReader, escape);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js
index aa9110adf2..b4dc52410e 100644
--- a/dashboard-ui/scripts/edititemmetadata.js
+++ b/dashboard-ui/scripts/edititemmetadata.js
@@ -4,15 +4,6 @@
     var currentSearchResult;
     var metadataEditorInfo;
 
-    function updateTabs(page, item) {
-
-        var query = MetadataEditor.getEditQueryString(item);
-
-        $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
-        $('#btnEditSubtitles', page).attr('href', 'edititemsubtitles.html?' + query);
-        $('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
-    }
-
     function reload(page) {
 
         unbindItemChanged(page);
@@ -50,21 +41,19 @@
 
             LibraryBrowser.renderName(item, $('.itemName', page), true);
 
-            updateTabs(page, item);
-
             setFieldVisibilities(page, item);
             fillItemInfo(page, item, metadataEditorInfo.ParentalRatingOptions);
 
             if (item.Type == "BoxSet") {
-                $('#btnEditCollectionTitles', page).show();
+                $('.collectionItemsTabButton', page).show();
             } else {
-                $('#btnEditCollectionTitles', page).hide();
+                $('.collectionItemsTabButton', page).hide();
             }
 
             if (item.MediaType == "Video" && item.LocationType == "FileSystem" && item.Type !== 'TvChannel') {
-                $('#btnEditSubtitles', page).show();
+                $('.subtitleTabButton', page).show();
             } else {
-                $('#btnEditSubtitles', page).hide();
+                $('.subtitleTabButton', page).hide();
             }
 
             if (item.MediaType == 'Photo') {
@@ -85,20 +74,8 @@
                 $('#fldTagline', page).hide();
             }
 
-            Dashboard.getCurrentUser().done(function (user) {
-
-                var moreCommands = LibraryBrowser.getMoreCommands(item, user);
-
-                if (moreCommands.indexOf('delete') != -1) {
-                    $('#fldDelete', page).show();
-                } else {
-                    $('#fldDelete', page).hide();
-                }
-
-                Dashboard.hideLoadingMsg();
-                bindItemChanged(page);
-            });
-
+            Dashboard.hideLoadingMsg();
+            bindItemChanged(page);
         });
     }
 
@@ -1447,7 +1424,7 @@
 
                 //$.mobile.urlHistory.ignoreNextHashChange = true;
                 window.location.hash = 'editItemMetadataPage?id=' + data.id;
-                reload(page);
+                $(page.querySelector('neon-animated-pages')).trigger('tabchange');
             }
         });
 
@@ -1462,14 +1439,34 @@
         $('.popupAdvancedRefreshForm').off('submit', EditItemMetadataPage.onRefreshFormSubmit).on('submit', EditItemMetadataPage.onRefreshFormSubmit);
         $('.identifyOptionsForm').off('submit', EditItemMetadataPage.onIdentificationOptionsSubmit).on('submit', EditItemMetadataPage.onIdentificationOptionsSubmit);
 
+        $(page.querySelector('paper-tabs')).on('iron-select', function () {
+            page.querySelector('neon-animated-pages').selected = this.selected;
+        });
+
+        var tabs = page.querySelector('paper-tabs');
+        var pages = page.querySelector('neon-animated-pages');
+
+        configurePaperLibraryTabs(page, tabs, pages);
+
+        $(tabs).on('iron-select', function () {
+            var selected = this.selected;
+
+            page.querySelector('neon-animated-pages').selected = selected;
+        });
+
+        $(pages).on('tabchange', function () {
+            loadTab(page, parseInt(this.selected));
+        });
+
     }).on('pageshowready', "#editItemMetadataPage", function () {
 
         var page = this;
 
-        reload(page);
-
         $(LibraryBrowser).on('itemdeleting', onItemDeleted);
 
+        page.querySelector('paper-tabs').selected = parseInt(getParameterByName('tab') || '0');
+        page.querySelector('paper-tabs').selected = 0;
+
     }).on('pagebeforehide', "#editItemMetadataPage", function () {
 
         var page = this;
@@ -1479,5 +1476,35 @@
 
     });
 
+    function configurePaperLibraryTabs(ownerpage, tabs, pages) {
+
+        tabs.hideScrollButtons = true;
+
+        $(ownerpage).on('pagebeforeshowready', LibraryBrowser.onTabbedPageBeforeShowReady);
+
+        $(pages).on('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 delay = 500;
+            var pgs = this;
+            setTimeout(function () {
+                $(pgs).trigger('tabchange');
+            }, delay);
+        });
+    }
+
+    function loadTab(page, index) {
+
+        switch (index) {
+
+            case 0:
+                reload(page);
+                break;
+            default:
+                break;
+        }
+    }
+
 })(jQuery, document, window);
 
diff --git a/dashboard-ui/scripts/edititemsubtitles.js b/dashboard-ui/scripts/edititemsubtitles.js
index 2877f4a3ff..8610ece6bf 100644
--- a/dashboard-ui/scripts/edititemsubtitles.js
+++ b/dashboard-ui/scripts/edititemsubtitles.js
@@ -2,14 +2,6 @@
 
     var currentItem;
 
-    function updateTabs(page, item) {
-
-        var query = MetadataEditor.getEditQueryString(item);
-
-        $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
-        $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
-    }
-
     function showLocalSubtitles(page, index) {
 
         Dashboard.showLoadingMsg();
@@ -273,28 +265,12 @@
 
             LibraryBrowser.renderName(item, $('.itemName', page), true);
 
-            updateTabs(page, item);
-
             fillSubtitleList(page, item);
 
             Dashboard.hideLoadingMsg();
         });
     }
 
-    function onWebSocketMessageReceived(e, data) {
-
-        var msg = data;
-
-        if (msg.MessageType === "LibraryChanged") {
-
-            if (msg.Data.ItemsUpdated.indexOf(currentItem.Id) != -1) {
-
-                Logger.log('Item updated - reloading subtitles');
-                reload($.mobile.activePage);
-            }
-        }
-    }
-
     function onSearchSubmit() {
         var form = this;
 
@@ -305,51 +281,30 @@
         return false;
     }
 
-    $(document).on('pageinitdepends', "#editItemSubtitlesPage", function () {
+    $(document).on('pageinitdepends', "#editItemMetadataPage", function () {
 
         var page = this;
 
-        $('.libraryTree', page).on('itemclicked', function (event, data) {
-
-            if (data.id != currentItem.Id) {
-
-                MetadataEditor.currentItemId = data.id;
-                MetadataEditor.currentItemType = data.itemType;
-                //Dashboard.navigate('edititemmetadata.html?id=' + data.id);
-
-                //$.mobile.urlHistory.ignoreNextHashChange = true;
-                window.location.hash = 'editItemSubtitlesPage?id=' + data.id;
-
-                reload(page);
-            }
-        });
-
         $('.subtitleSearchForm').off('submit', onSearchSubmit).on('submit', onSearchSubmit);
 
-    }).on('pageshowready', "#editItemSubtitlesPage", function () {
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
 
-        var page = this;
+            if (parseInt(this.selected) == 1) {
+                var tabContent = page.querySelector('.subtitleTabContent');
 
-        $('.subtitleResults', page).empty();
+                $('.subtitleResults', tabContent).empty();
 
-        Dashboard.showLoadingMsg();
+                Dashboard.showLoadingMsg();
 
-        reload(page);
+                reload(tabContent);
 
-        ApiClient.getCultures().done(function (languages) {
+                ApiClient.getCultures().done(function (languages) {
 
-            fillLanguages(page, languages);
+                    fillLanguages(tabContent, languages);
+                });
+            }
         });
 
-        $(ApiClient).on("websocketmessage", onWebSocketMessageReceived);
-
-    }).on('pagebeforehide', "#editItemSubtitlesPage", function () {
-
-        var page = this;
-
-        currentItem = null;
-
-        $(ApiClient).off("websocketmessage", onWebSocketMessageReceived);
     });
 
 })(jQuery, window, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/homeupcoming.js b/dashboard-ui/scripts/homeupcoming.js
index a709ee6503..7f4971a59e 100644
--- a/dashboard-ui/scripts/homeupcoming.js
+++ b/dashboard-ui/scripts/homeupcoming.js
@@ -132,11 +132,12 @@
     $(document).on('pageinitdepends', "#indexPage", function () {
 
         var page = this;
-        var tabContent = page.querySelector('.homeUpcomingTabContent');
 
         $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
 
             if (parseInt(this.selected) == 3) {
+                var tabContent = page.querySelector('.homeUpcomingTabContent');
+
                 if (LibraryBrowser.needsRefresh(tabContent)) {
                     loadUpcoming(tabContent);
                 }
diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js
index 60489bfc83..a3baa9a75d 100644
--- a/dashboard-ui/scripts/indexpage.js
+++ b/dashboard-ui/scripts/indexpage.js
@@ -211,7 +211,9 @@
         var page = this;
 
         var tabs = page.querySelector('paper-tabs');
-        LibraryBrowser.configurePaperLibraryTabs(page, tabs, page.querySelector('neon-animated-pages'));
+        var pages = page.querySelector('neon-animated-pages');
+
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages);
 
         $(tabs).on('iron-select', function () {
             var selected = this.selected;
@@ -229,7 +231,7 @@
             }
         });
 
-        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
+        $(pages).on('tabchange', function () {
             loadTab(page, parseInt(this.selected));
         });
 
diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js
index 616fdd3c8d..36548f63e1 100644
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@@ -88,7 +88,7 @@
                     $('.btnSync', page).addClass('hide');
                 }
 
-                var editImagesHref = user.Policy.IsAdministrator ? 'edititemimages.html' + editQuery : null;
+                var editImagesHref = user.Policy.IsAdministrator ? 'edititemmetadata.html' + (editQuery + "&tab=3") : null;
 
                 $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, editImagesHref, true));
 
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 90f638c575..b4dc8393d2 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -133,7 +133,7 @@
 
     function renderImage(page, item, user) {
 
-        var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : "";
+        var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemmetadata.html?tab=3&id=" + item.Id : "";
 
         LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, imageHref);
     }
@@ -959,7 +959,7 @@
         html += '<span>' + type.name + '</span>';
 
         if (user.Policy.IsAdministrator) {
-            html += '<a class="detailSectionHeaderButton" href="editcollectionitems.html?id=' + currentItem.Id + '" data-role="button" data-icon="edit" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonEdit') + '</a>';
+            html += '<a class="detailSectionHeaderButton" href="edititemmetadata.html?tab=2&id=' + currentItem.Id + '" data-role="button" data-icon="edit" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonEdit') + '</a>';
         }
 
         html += '</div>';
diff --git a/dashboard-ui/scripts/reports.js b/dashboard-ui/scripts/reports.js
index 25ceeb85f4..05915b6e82 100644
--- a/dashboard-ui/scripts/reports.js
+++ b/dashboard-ui/scripts/reports.js
@@ -138,18 +138,18 @@
                 }
 
                 if (!rRow.HasImageTagsPrimary) {
-                    html += '<a href="edititemimages.html?id=' + rRow.Id + '"><img src="css/images/editor/missingprimaryimage.png" title="Missing primary image." style="height:16px;" /></a>';
+                    html += '<a href="edititemmetadata.html?tab=3&id=' + rRow.Id + '"><img src="css/images/editor/missingprimaryimage.png" title="Missing primary image." style="height:16px;" /></a>';
                 }
 
                 if (!rRow.HasImageTagsBackdrop) {
                     if (rRow.RowType !== "Episode" && rRow.RowType !== "Season" && rRow.MediaType !== "Audio" && rRow.RowType !== "TvChannel" && rRow.RowType !== "MusicAlbum") {
-                        html += '<a href="edititemimages.html?id=' + rRow.Id + '"><img src="css/images/editor/missingbackdrop.png" title="Missing backdrop image." style="height:16px;" /></a>';
+                        html += '<a href="edititemmetadata.html?tab=3&id=' + rRow.Id + '"><img src="css/images/editor/missingbackdrop.png" title="Missing backdrop image." style="height:16px;" /></a>';
                     }
                 }
 
                 if (!rRow.HasImageTagsLogo) {
                     if (rRow.RowType === "Movie" || rRow.RowType === "Trailer" || rRow.RowType === "Series" || rRow.RowType === "MusicArtist" || rRow.RowType === "BoxSet") {
-                        html += '<a href="edititemimages.html?id=' + rRow.Id + '"><img src="css/images/editor/missinglogo.png" title="Missing logo image." style="height:16px;" /></a>';
+                        html += '<a href="edititemmetadata.html?tab=3&id=' + rRow.Id + '"><img src="css/images/editor/missinglogo.png" title="Missing logo image." style="height:16px;" /></a>';
                     }
                 }
                 break;
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index 9539cff612..85e3a19923 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -6735,7 +6735,6 @@ this._removeChildren();
 </script>
 
 
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
 <style is="custom-style">