From edc7f33329b92e29605f31b8be07d4b01fb161f1 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 7 Mar 2014 10:53:23 -0500
Subject: [PATCH] #715 - Support creating/editing collections (boxsets) in web
 client

---
 dashboard-ui/advancedserversettings.html      |   5 +
 dashboard-ui/autoorganizetv.html              |   4 +-
 .../{boxsets.html => collections.html}        |  16 +-
 dashboard-ui/css/metadataeditor.css           |  17 +
 dashboard-ui/css/posteritem.css               |   6 +-
 dashboard-ui/dashboard.html                   |   1 +
 dashboard-ui/editcollectionitems.html         |  74 +++++
 dashboard-ui/edititemimages.html              |   1 +
 dashboard-ui/edititemmetadata.html            |   1 +
 dashboard-ui/edititempeople.html              |   1 +
 dashboard-ui/itembynamedetails.html           |   3 -
 dashboard-ui/itemdetails.html                 |  17 +-
 dashboard-ui/moviegenres.html                 |   1 -
 dashboard-ui/moviepeople.html                 |   1 -
 dashboard-ui/movies.html                      |   1 -
 dashboard-ui/moviesrecommended.html           |   1 -
 dashboard-ui/moviestudios.html                |   1 -
 dashboard-ui/movietrailers.html               |   1 -
 .../scripts/advancedserversettings.js         |   2 +
 dashboard-ui/scripts/editcollectionitems.js   | 296 ++++++++++++++++++
 dashboard-ui/scripts/edititemimages.js        |   9 +-
 dashboard-ui/scripts/edititemmetadata.js      |   9 +-
 dashboard-ui/scripts/edititempeople.js        |   1 +
 dashboard-ui/scripts/itemdetailpage.js        |  13 +-
 dashboard-ui/scripts/librarymenu.js           |   4 +-
 dashboard-ui/scripts/moviecollections.js      |  44 ++-
 dashboard-ui/scripts/site.js                  |  14 +-
 27 files changed, 486 insertions(+), 58 deletions(-)
 rename dashboard-ui/{boxsets.html => collections.html} (87%)
 create mode 100644 dashboard-ui/editcollectionitems.html
 create mode 100644 dashboard-ui/scripts/editcollectionitems.js

diff --git a/dashboard-ui/advancedserversettings.html b/dashboard-ui/advancedserversettings.html
index 092ac77c4..56562269a 100644
--- a/dashboard-ui/advancedserversettings.html
+++ b/dashboard-ui/advancedserversettings.html
@@ -17,6 +17,11 @@
                 <form class="advancedServerSettingsForm">
 
                     <ul data-role="listview" class="ulForm">
+                        <li>
+                            <label for="txtServerName">Friendly server name:</label>
+                            <input id="txtServerName" data-mini="true" />
+                            <div class="fieldDescription">This name will be used to identify this server. If left blank, the computer name will be used.</div>
+                        </li>
                         <li>
                             <label for="txtPortNumber">Http server port number: </label>
                             <input type="number" id="txtPortNumber" name="txtPortNumber" pattern="[0-9]*" required="required" min="1" data-mini="true" />
diff --git a/dashboard-ui/autoorganizetv.html b/dashboard-ui/autoorganizetv.html
index 01ce6a9c1..0a3c04d39 100644
--- a/dashboard-ui/autoorganizetv.html
+++ b/dashboard-ui/autoorganizetv.html
@@ -144,8 +144,8 @@
                     <br />
                     <ul data-role="listview" class="ulForm">
                         <li>
-                            <label for="txtDeleteLeftOverFiles">Transfer Method</label>
-                            <select name="copyOrMoveFile" id="copyOrMoveFile" data-mini="true">
+                            <label for="copyOrMoveFile">Transfer Method</label>
+                            <select id="copyOrMoveFile" data-mini="true">
                                 <option value="true">Copy</option>
                                 <option value="false">Move</option>
                             </select>
diff --git a/dashboard-ui/boxsets.html b/dashboard-ui/collections.html
similarity index 87%
rename from dashboard-ui/boxsets.html
rename to dashboard-ui/collections.html
index bf940b5c5..53c097ea4 100644
--- a/dashboard-ui/boxsets.html
+++ b/dashboard-ui/collections.html
@@ -4,29 +4,19 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="boxsetsPage" data-role="page" class="page libraryPage" data-theme="b" data-view="movies">
-
-        <div class="libraryViewNav">
-            <a href="moviesrecommended.html">Suggested</a>
-            <a href="movies.html">Movies</a>
-            <a href="boxsets.html" class="ui-btn-active">Collections</a>
-            <a href="movietrailers.html">Trailers</a>
-            <a href="moviegenres.html">Genres</a>
-            <a href="moviepeople.html">People</a>
-            <a href="moviestudios.html">Studios</a>
-        </div>
+    <div id="boxsetsPage" data-role="page" class="page libraryPage" data-theme="b" data-view="boxsets">
 
         <div class="alphabetPicker">
         </div>
         <div data-role="content">
             <div class="viewSettings">
                 <div class="viewControls">
-                    <button data-mini="true" data-icon="plus" data-inline="true" onclick="$('#newCollectionPanel', $(this).parents('.page')).panel( 'toggle' );">New</button>
                     <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
                     <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <button id="btnNewCollection" data-mini="true" data-icon="plus" data-inline="true">New</button>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
@@ -48,7 +38,7 @@
                 </div>
                 <br />
                 <p>
-                    <button type="submit" data-icon="plus" data-mini="true" data-theme="b">Create</button>
+                    <button id="btnSubmitNewCollection" type="submit" data-icon="plus" data-mini="true" data-theme="b">Create</button>
                 </p>
             </form>
         </div>
diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css
index 2896e6fd6..50b1713fc 100644
--- a/dashboard-ui/css/metadataeditor.css
+++ b/dashboard-ui/css/metadataeditor.css
@@ -333,6 +333,11 @@
     overflow-y: auto;
 }
 
+.collectionItemSearchResults {
+    max-height: 65%;
+    overflow-y: auto;
+}
+
 
 @media all and (min-height: 500px) {
 
@@ -346,6 +351,10 @@
     .popupIdentifyForm, .identificationSearchResults {
         height: 450px;
     }
+
+    .collectionItemSearchResults {
+        max-height: 70%;
+    }
 }
 
 @media all and (min-height: 700px) {
@@ -353,6 +362,10 @@
     .popupIdentifyForm, .identificationSearchResults {
         height: 550px;
     }
+
+    .collectionItemSearchResults {
+        max-height: 75%;
+    }
 }
 
 @media all and (min-height: 800px) {
@@ -364,6 +377,10 @@
     .popupIdentifyForm, .identificationSearchResults {
         height: 600px;
     }
+
+    .collectionItemSearchResults {
+        max-height: 80%;
+    }
 }
 
 @media all and (min-height: 900px) {
diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css
index deb0ac01b..9cfc0ad1c 100644
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@@ -1,5 +1,5 @@
 .posterItem {
-    margin: 8px;
+    margin: 5px;
     text-shadow: none;
     font-weight: normal!important;
     display: inline-block;
@@ -35,10 +35,6 @@
     padding: 11px 12px 10px;
 }
 
-.smallBackdropPosterItem, .smallPosterItem {
-    margin: 5px;
-}
-
 .posterItemImage {
     background-size: contain;
     background-repeat: no-repeat;
diff --git a/dashboard-ui/dashboard.html b/dashboard-ui/dashboard.html
index 9264c2952..2f4e89c23 100644
--- a/dashboard-ui/dashboard.html
+++ b/dashboard-ui/dashboard.html
@@ -8,6 +8,7 @@
 
         <div data-role="content">
             <div class="content-primary">
+
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">Home</a>
                     <a href="dashboardinfopage.html" data-role="button">Info</a>
diff --git a/dashboard-ui/editcollectionitems.html b/dashboard-ui/editcollectionitems.html
new file mode 100644
index 000000000..76f90cfd9
--- /dev/null
+++ b/dashboard-ui/editcollectionitems.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Media Browser</title>
+</head>
+<body>
+    <div id="editCollectionTitlesPage" data-role="page" data-theme="b" class="page libraryPage metadataEditorPage">
+        <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">Metadata</a>
+                    <a id="btnEditPeople" style="display: none;" href="#" data-role="button">People</a>
+                    <a href="#" data-role="button" class="ui-btn-active">Titles</a>
+                    <a id="btnEditImages" href="#" data-role="button">Images</a>
+                </div>
+
+                <div style="margin-top: -20px;">
+                    <button type="button" id="btnAddItem" data-icon="plus" data-inline="true" data-mini="true">Add</button>
+                    <button type="button" id="btnRemoveItems" data-icon="delete" data-inline="true" data-mini="true" disabled="disabled">Remove</button>
+                </div>
+                <br />
+                <div class="collectionItems"></div>
+            </div>
+        </div>
+
+        <div data-role="popup" data-transition="slidefade" class="popupIdentify popup" data-theme="a">
+
+            <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
+                <h3>Add Titles
+                </h3>
+            </div>
+
+            <div data-role="content">
+
+                <form class="popupIdentifyForm" style="max-width: initial;">
+
+                    <div>
+                        <label for="txtLookupName">Name:</label>
+
+                        <div style="display: inline-block; width: 75%;">
+                            <input type="text" id="txtLookupName" data-mini="true" required="required" />
+                        </div>
+
+                        <button type="submit" data-theme="b" data-icon="search" data-mini="true" data-inline="true" data-iconpos="notext">
+                            Search
+                        </button>
+                    </div>
+
+                    <div class="collectionItemSearchResults">
+                    </div>
+
+                    <button id="btnAddItems" type="button" data-icon="plus" data-mini="true">
+                        Add
+                    </button>
+                </form>
+            </div>
+
+        </div>
+
+        <script type="text/javascript">
+            $('.popupIdentifyForm').off('submit', EditCollectionItemsPage.onSearchFormSubmit).on('submit', EditCollectionItemsPage.onSearchFormSubmit);
+        </script>
+    </div>
+</body>
+</html>
diff --git a/dashboard-ui/edititemimages.html b/dashboard-ui/edititemimages.html
index 815788cda..e8df1eb08 100644
--- a/dashboard-ui/edititemimages.html
+++ b/dashboard-ui/edititemimages.html
@@ -19,6 +19,7 @@
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" id="btnEditMetadata">Metadata</a>
                     <a href="#" data-role="button" id="btnEditPeople" style="display: none;">People</a>
+                    <a id="btnEditCollectionTitles" style="display: none;" href="#" data-role="button">Titles</a>
                     <a href="#" data-role="button" class="ui-btn-active">Images</a>
                 </div>
 
diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html
index 1c8dccac1..f62b359db 100644
--- a/dashboard-ui/edititemmetadata.html
+++ b/dashboard-ui/edititemmetadata.html
@@ -18,6 +18,7 @@
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">Metadata</a>
                     <a id="btnEditPeople" style="display: none;" href="#" data-role="button">People</a>
+                    <a id="btnEditCollectionTitles" style="display: none;" href="editcollectionitems.html" data-role="button">Titles</a>
                     <a href="#" data-role="button" id="btnEditImages">Images</a>
                 </div>
 
diff --git a/dashboard-ui/edititempeople.html b/dashboard-ui/edititempeople.html
index 231e2c4c0..9a6b1299e 100644
--- a/dashboard-ui/edititempeople.html
+++ b/dashboard-ui/edititempeople.html
@@ -18,6 +18,7 @@
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" id="btnEditMetadata">Metadata</a>
                     <a href="#" data-role="button" class="ui-btn-active">People</a>
+                    <a id="btnEditCollectionTitles" style="display: none;" href="#" data-role="button">Titles</a>
                     <a href="#" data-role="button" id="btnEditImages">Images</a>
                 </div>
                 <div id="divAddPerson" style="display: none;">
diff --git a/dashboard-ui/itembynamedetails.html b/dashboard-ui/itembynamedetails.html
index 22d9cf675..0f0eca14e 100644
--- a/dashboard-ui/itembynamedetails.html
+++ b/dashboard-ui/itembynamedetails.html
@@ -9,7 +9,6 @@
             <div class="libraryViewNav">
                 <a href="moviesrecommended.html">Suggested</a>
                 <a href="movies.html">Movies</a>
-                <a href="boxsets.html">Box Sets</a>
                 <a href="movietrailers.html">Trailers</a>
                 <a href="moviegenres.html" class="ui-btn-active">Genres</a>
                 <a href="moviepeople.html">People</a>
@@ -20,7 +19,6 @@
             <div class="libraryViewNav">
                 <a href="moviesrecommended.html">Suggested</a>
                 <a href="movies.html">Movies</a>
-                <a href="boxsets.html">Box Sets</a>
                 <a href="movietrailers.html">Trailers</a>
                 <a href="moviegenres.html">Genres</a>
                 <a href="moviepeople.html" class="ui-btn-active">People</a>
@@ -31,7 +29,6 @@
             <div class="libraryViewNav">
                 <a href="moviesrecommended.html">Suggested</a>
                 <a href="movies.html">Movies</a>
-                <a href="boxsets.html">Box Sets</a>
                 <a href="movietrailers.html">Trailers</a>
                 <a href="moviegenres.html">Genres</a>
                 <a href="moviepeople.html">People</a>
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index db588fe32..44771f648 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -9,7 +9,6 @@
             <div class="libraryViewNav">
                 <a href="moviesrecommended.html">Suggested</a>
                 <a href="movies.html" class="ui-btn-active">Movies</a>
-                <a href="boxsets.html">Collections</a>
                 <a href="movietrailers.html">Trailers</a>
                 <a href="moviegenres.html">Genres</a>
                 <a href="moviepeople.html">People</a>
@@ -17,21 +16,12 @@
             </div>
         </div>
         <div id="boxsetTabs" class="itemTabs" style="display: none;">
-            <div class="libraryViewNav">
-                <a href="moviesrecommended.html">Suggested</a>
-                <a href="movies.html">Movies</a>
-                <a href="boxsets.html" class="ui-btn-active">Collections</a>
-                <a href="movietrailers.html">Trailers</a>
-                <a href="moviegenres.html">Genres</a>
-                <a href="moviepeople.html">People</a>
-                <a href="moviestudios.html">Studios</a>
-            </div>
+            <br />
         </div>
         <div id="trailerTabs" class="itemTabs" style="display: none;">
             <div class="libraryViewNav">
                 <a href="moviesrecommended.html">Suggested</a>
                 <a href="movies.html">Movies</a>
-                <a href="boxsets.html">Collections</a>
                 <a href="movietrailers.html" class="ui-btn-active">Trailers</a>
                 <a href="moviegenres.html">Genres</a>
                 <a href="moviepeople.html">People</a>
@@ -174,7 +164,10 @@
                     </div>
                 </div>
                 <div id="childrenCollapsible" class="hide detailSection">
-                    <div class="detailSectionHeader"><span id="childrenTitle"></span></div>
+                    <div class="detailSectionHeader" style="position: relative;">
+                        <span id="childrenTitle"></span>
+                        <a id="btnEditCollectionTitles" href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-inline="true" style="display: none; position: absolute; right: 0; top: 6px; margin-top: 0; margin-bottom: 0;">Edit</a>
+                    </div>
                     <div id="childrenContent" class="detailSectionContent"></div>
                 </div>
                 <div id="trailersCollapsible" class="detailSection hide">
diff --git a/dashboard-ui/moviegenres.html b/dashboard-ui/moviegenres.html
index a77ee4fe3..b0ce3ae33 100644
--- a/dashboard-ui/moviegenres.html
+++ b/dashboard-ui/moviegenres.html
@@ -9,7 +9,6 @@
         <div class="libraryViewNav">
             <a href="moviesrecommended.html">Suggested</a>
             <a href="movies.html">Movies</a>
-            <a href="boxsets.html">Collections</a>
             <a href="movietrailers.html">Trailers</a>
             <a href="moviegenres.html" class="ui-btn-active">Genres</a>
             <a href="moviepeople.html">People</a>
diff --git a/dashboard-ui/moviepeople.html b/dashboard-ui/moviepeople.html
index 66df12d0b..7e9d99866 100644
--- a/dashboard-ui/moviepeople.html
+++ b/dashboard-ui/moviepeople.html
@@ -9,7 +9,6 @@
         <div class="libraryViewNav">
             <a href="moviesrecommended.html">Suggested</a>
             <a href="movies.html">Movies</a>
-            <a href="boxsets.html">Collections</a>
             <a href="movietrailers.html">Trailers</a>
             <a href="moviegenres.html">Genres</a>
             <a href="moviepeople.html" class="ui-btn-active">People</a>
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index 47326226e..c47fb3ca3 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -9,7 +9,6 @@
         <div class="libraryViewNav">
             <a href="moviesrecommended.html">Suggested</a>
             <a href="movies.html" class="ui-btn-active">Movies</a>
-            <a href="boxsets.html">Collections</a>
             <a href="movietrailers.html">Trailers</a>
             <a href="moviegenres.html">Genres</a>
             <a href="moviepeople.html">People</a>
diff --git a/dashboard-ui/moviesrecommended.html b/dashboard-ui/moviesrecommended.html
index c242832b5..600556bb1 100644
--- a/dashboard-ui/moviesrecommended.html
+++ b/dashboard-ui/moviesrecommended.html
@@ -9,7 +9,6 @@
         <div class="libraryViewNav">
             <a href="moviesrecommended.html" class="ui-btn-active">Suggested</a>
             <a href="movies.html">Movies</a>
-            <a href="boxsets.html">Collections</a>
             <a href="movietrailers.html">Trailers</a>
             <a href="moviegenres.html">Genres</a>
             <a href="moviepeople.html">People</a>
diff --git a/dashboard-ui/moviestudios.html b/dashboard-ui/moviestudios.html
index 608a42011..ab901634a 100644
--- a/dashboard-ui/moviestudios.html
+++ b/dashboard-ui/moviestudios.html
@@ -9,7 +9,6 @@
         <div class="libraryViewNav">
             <a href="moviesrecommended.html">Suggested</a>
             <a href="movies.html">Movies</a>
-            <a href="boxsets.html">Collections</a>
             <a href="movietrailers.html">Trailers</a>
             <a href="moviegenres.html">Genres</a>
             <a href="moviepeople.html">People</a>
diff --git a/dashboard-ui/movietrailers.html b/dashboard-ui/movietrailers.html
index 2585cb5be..513915836 100644
--- a/dashboard-ui/movietrailers.html
+++ b/dashboard-ui/movietrailers.html
@@ -9,7 +9,6 @@
         <div class="libraryViewNav">
             <a href="moviesrecommended.html">Suggested</a>
             <a href="movies.html">Movies</a>
-            <a href="boxsets.html">Collections</a>
             <a href="movietrailers.html" class="ui-btn-active">Trailers</a>
             <a href="moviegenres.html">Genres</a>
             <a href="moviepeople.html">People</a>
diff --git a/dashboard-ui/scripts/advancedserversettings.js b/dashboard-ui/scripts/advancedserversettings.js
index 0cccc9ecc..a73b124f5 100644
--- a/dashboard-ui/scripts/advancedserversettings.js
+++ b/dashboard-ui/scripts/advancedserversettings.js
@@ -14,6 +14,7 @@
         $('#txtPortNumber', page).val(config.HttpServerPortNumber);
 
         $('#txtDdns', page).val(config.WanDdns || '');
+        $('#txtServerName', page).val(config.ServerName || '');
 
         $('#chkEnableUpnp', page).checked(config.EnableUPnP).checkboxradio('refresh');
 
@@ -52,6 +53,7 @@
                 config.EnableUPnP = $('#chkEnableUpnp', form).checked();
 
                 config.WanDdns = $('#txtDdns', form).val();
+                config.ServerName = $('#txtServerName', form).val();
 
                 ApiClient.updateServerConfiguration(config).done(Dashboard.processServerConfigurationUpdateResult);
             });
diff --git a/dashboard-ui/scripts/editcollectionitems.js b/dashboard-ui/scripts/editcollectionitems.js
new file mode 100644
index 000000000..a02db1ce5
--- /dev/null
+++ b/dashboard-ui/scripts/editcollectionitems.js
@@ -0,0 +1,296 @@
+(function ($, document, window, FileReader, escape) {
+
+    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();
+
+        $('#btnRemoveItems', page).buttonEnabled(false);
+
+        MetadataEditor.getItemPromise().done(function (item) {
+
+            currentItem = item;
+
+            LibraryBrowser.renderName(item, $('.itemName', page), true);
+
+            updateTabs(page, item);
+
+            reloadTitles(page, item);
+        });
+    }
+
+    function getTitleHtml(item) {
+
+        var html = '<div style="display:inline-block;margin:5px;vertical-align:top;">';
+
+        html += '<div style="width:120px;height:180px;">';
+        if (item.ImageTags.Primary) {
+
+            var imgUrl = ApiClient.getImageUrl(item.Id, {
+                type: "Primary",
+                width: 300,
+                tag: item.ImageTags.Primary
+            });
+
+            html += '<img src="' + imgUrl + '" style="max-width:120px;max-height:180px;" />';
+
+        } 
+        html += '</div>';
+
+        html += '<div style="text-align:center;margin-top:4px;max-width:100px;overflow:hidden;height: 32px;">' + item.Name + '</div>';
+
+        html += '<label for="chkRemove' + item.Id + '">Remove</label><input id="chkRemove' + item.Id + '" class="chkRemoveItem" type="checkbox" data-itemid="' + item.Id + '" data-mini="true" />';
+
+        html += '</div>';
+
+        return html;
+    }
+
+    function getSearchResultHtml(item) {
+
+        var html = '<div style="display:inline-block;margin:3px;vertical-align:top;">';
+
+        html += '<div style="width:100px;height:150px;">';
+
+        if (item.PrimaryImageTag) {
+
+            var imgUrl = ApiClient.getImageUrl(item.ItemId, {
+                type: "Primary",
+                width: 200,
+                tag: item.PrimaryImageTag
+            });
+
+            html += '<img src="' + imgUrl + '" style="max-width:100px;max-height:150px;" />';
+
+        }
+        html += '</div>';
+
+        html += '<div style="text-align:center;margin-top:4px;max-width:100px;overflow:hidden;height: 32px;">' + item.Name + '</div>';
+
+        html += '<label for="chkAdd' + item.ItemId + '">Add</label><input id="chkAdd' + item.ItemId + '" class="chkAddItem" type="checkbox" data-itemid="' + item.ItemId + '" data-mini="true" />';
+
+        html += '</div>';
+
+        return html;
+    }
+
+    function reloadTitles(page, item) {
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), {
+
+            ParentId: item.Id
+
+        }).done(function (result) {
+
+            // Scroll back up so they can see the results from the beginning
+            $(document).scrollTop(0);
+
+            var html = result.Items.map(getTitleHtml).join('');
+
+            var elem = $('.collectionItems', page).html(html).trigger('create');
+
+            $('.chkRemoveItem', elem).on('change', function () {
+
+                if ($('.chkRemoveItem:checked', elem).length) {
+                    $('#btnRemoveItems', page).buttonEnabled(true);
+                } else {
+                    $('#btnRemoveItems', page).buttonEnabled(false);
+                }
+
+            });
+
+            Dashboard.hideLoadingMsg();
+        });
+
+    }
+
+    function showSearchResults(page, searchTerm) {
+
+        ApiClient.getSearchHints({
+
+            userId: Dashboard.getCurrentUserId(),
+            searchTerm: searchTerm,
+            limit: 50,
+
+            includePeople: false,
+            includeGenres: false,
+            includeStudios: false,
+            includeArtists: false,
+
+            IncludeItemTypes: "Movie,Series,Game,MusicAlbum"
+
+        }).done(function (result) {
+
+            renderSearchResults(page, result.SearchHints);
+
+        });
+
+    }
+
+    function renderSearchResults(page, items) {
+
+        var html = items.map(getSearchResultHtml).join('');
+
+        var elem = $('.collectionItemSearchResults', page).html(html).trigger('create');
+
+        $('.chkAddItem', elem).on('change', function () {
+
+            if ($('.chkAddItem:checked', elem).length) {
+                $('#btnAddItems', page).buttonEnabled(true);
+            } else {
+                $('#btnAddItems', page).buttonEnabled(false);
+            }
+
+        });
+    }
+
+    function addItemsToCollection(page) {
+
+        var items = $('.chkAddItem:checked', page).get().map(function (c) {
+
+            return c.getAttribute('data-itemid');
+
+        });
+
+        if (!items.length) {
+            Dashboard.alert('Please select at least one item.');
+            return;
+        }
+
+        var url = ApiClient.getUrl("Collections/" + currentItem.Id + "/Items", {
+
+            Ids: items.join(',')
+
+        });
+
+        $.ajax({
+            type: "POST",
+            url: url
+
+        }).done(function () {
+
+            Dashboard.hideLoadingMsg();
+
+            $('.popupIdentify', page).popup('close');
+
+            reload(page);
+
+        });
+    }
+    
+    function removeItemsFromCollection(page) {
+        var items = $('.chkRemoveItem:checked', page).get().map(function (c) {
+
+            return c.getAttribute('data-itemid');
+
+        });
+
+        if (!items.length) {
+            Dashboard.alert('Please select at least one item.');
+            return;
+        }
+
+        var url = ApiClient.getUrl("Collections/" + currentItem.Id + "/Items", {
+
+            Ids: items.join(',')
+
+        });
+
+        $.ajax({
+            type: "DELETE",
+            url: url
+
+        }).done(function () {
+
+            Dashboard.hideLoadingMsg();
+
+            reload(page);
+
+        });
+    }
+
+    $(document).on('pageinit', "#editCollectionTitlesPage", function () {
+
+        var page = this;
+
+        $('.libraryTree', page).on('itemclicked', function (event, data) {
+
+            if (data.itemType == "libraryreport") {
+                Dashboard.navigate('libraryreport.html');
+                return;
+            }
+
+            if (data.itemType == "livetvservice") {
+                return;
+            }
+
+            if (data.id != currentItem.Id) {
+
+                MetadataEditor.currentItemId = data.id;
+                MetadataEditor.currentItemName = data.itemName;
+                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');
+
+            $('#txtLookupName', popup).val('');
+            $('.collectionItemSearchResults', popup).empty();
+            $('#btnAddItems', popup).buttonEnabled(false);
+        });
+
+        $('#btnAddItems', page).on('click', function () {
+
+            addItemsToCollection(page);
+        });
+
+        $('#btnRemoveItems', page).on('click', function () {
+
+
+            removeItemsFromCollection(page);
+        });
+
+    }).on('pagebeforeshow', "#editCollectionTitlesPage", function () {
+
+        var page = this;
+
+        reload(page);
+
+    }).on('pagehide', "#editCollectionTitlesPage", function () {
+
+        var page = this;
+
+        currentItem = null;
+
+    });
+
+    window.EditCollectionItemsPage = {
+
+        onSearchFormSubmit: function () {
+
+            var page = $(this).parents('.page');
+
+            showSearchResults(page, $('#txtLookupName', page).val());
+            return false;
+        }
+    };
+
+})(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 4accdb59c..04b00269a 100644
--- a/dashboard-ui/scripts/edititemimages.js
+++ b/dashboard-ui/scripts/edititemimages.js
@@ -14,6 +14,7 @@
 
         $('#btnEditPeople', page).attr('href', 'edititempeople.html?' + query);
         $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
+        $('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
     }
 
     function getBaseRemoteOptions() {
@@ -268,12 +269,18 @@
 
             updateTabs(page, item);
 
-            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel") {
+            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel" || item.Type == "BoxSet") {
                 $('#btnEditPeople', page).hide();
             } else {
                 $('#btnEditPeople', page).show();
             }
 
+            if (item.Type == "BoxSet") {
+                $('#btnEditCollectionTitles', page).show();
+            } else {
+                $('#btnEditCollectionTitles', page).hide();
+            }
+
             ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
 
                 if (providers.length) {
diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js
index 55cce057e..be2c17f00 100644
--- a/dashboard-ui/scripts/edititemmetadata.js
+++ b/dashboard-ui/scripts/edititemmetadata.js
@@ -16,6 +16,7 @@
 
         $('#btnEditPeople', page).attr('href', 'edititempeople.html?' + query);
         $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
+        $('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
     }
 
     function reload(page) {
@@ -82,12 +83,18 @@
             setFieldVisibilities(page, item);
             fillItemInfo(page, item);
 
-            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel") {
+            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel" || item.Type == "BoxSet") {
                 $('#btnEditPeople', page).hide();
             } else {
                 $('#btnEditPeople', page).show();
             }
 
+            if (item.Type == "BoxSet") {
+                $('#btnEditCollectionTitles', page).show();
+            } else {
+                $('#btnEditCollectionTitles', page).hide();
+            }
+
             Dashboard.hideLoadingMsg();
         });
     }
diff --git a/dashboard-ui/scripts/edititempeople.js b/dashboard-ui/scripts/edititempeople.js
index 897df48bc..6c026f483 100644
--- a/dashboard-ui/scripts/edititempeople.js
+++ b/dashboard-ui/scripts/edititempeople.js
@@ -8,6 +8,7 @@
 
         $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
         $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
+        $('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
     }
 
     function reload(page) {
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index fc4bd6c99..a1bef95b0 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -31,10 +31,18 @@
 
                 if (user.Configuration.IsAdministrator) {
                     $('#editButtonContainer', page).show();
+
                 } else {
                     $('#editButtonContainer', page).hide();
                 }
 
+                if (user.Configuration.IsAdministrator && item.Type == "BoxSet") {
+                    $('#btnEditCollectionTitles', page).show().attr('href', 'editcollectionitems.html?id=' + item.Id);
+
+                } else {
+                    $('#btnEditCollectionTitles', page).hide();
+                }
+
                 if (MediaPlayer.canPlay(item, user)) {
 
                     var url = MediaPlayer.getPlayUrl(item);
@@ -122,7 +130,7 @@
         if (item.Type == "Episode" || item.Type == "Series" || item.Type == "Season") {
             return "tv";
         }
-        if (item.Type == "Movie" || item.Type == "Trailer" || item.Type == "BoxSet") {
+        if (item.Type == "Movie" || item.Type == "Trailer") {
             return "movies";
         }
         if (item.Type == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "MusicVideo") {
@@ -131,6 +139,9 @@
         if (item.MediaType == "Game") {
             return "games";
         }
+        if (item.Type == "BoxSet") {
+            return "boxsets";
+        }
         return "";
     }
 
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index 8c963ba4a..006df2b03 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -92,6 +92,8 @@
             html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'games' ? selectedCssClass : '') + '" href="gamesrecommended.html">' + (view == 'games' ? selectedHtml : '') + '<span class="viewName">Games</span></a>';
         }
 
+        html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'boxsets' ? selectedCssClass : '') + '" href="collections.html">' + (view == 'boxsets' ? selectedHtml : '') + '<span class="viewName">Collections</span></a>';
+
         $('.viewMenuRemoteControlButton', page).before(html);
     }
 
@@ -130,7 +132,7 @@
 
                     { text: 'Suggested', href: 'moviesrecommended.html' },
                     { text: 'Movies', href: 'movies.html' },
-                    { text: 'Collections', href: 'boxsets.html' },
+                    { text: 'Collections', href: 'collections.html' },
                     { text: 'Trailers', href: 'movietrailers.html' },
                     { text: 'Genres', href: 'moviegenres.html' },
                     { text: 'People', href: 'moviepeople.html' },
diff --git a/dashboard-ui/scripts/moviecollections.js b/dashboard-ui/scripts/moviecollections.js
index 50d3eb039..2690b7522 100644
--- a/dashboard-ui/scripts/moviecollections.js
+++ b/dashboard-ui/scripts/moviecollections.js
@@ -95,6 +95,13 @@
         $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
     }
 
+    function showNewCollectionPanel(page) {
+
+        $('#newCollectionPanel', page).panel('toggle');
+
+        $('#txtNewCollectionName', page).focus();
+    }
+
     $(document).on('pageinit', "#boxsetsPage", function () {
 
         var page = this;
@@ -164,6 +171,11 @@
             reloadItems(page);
         });
 
+        $('#btnNewCollection', page).on('click', function () {
+
+            showNewCollectionPanel(page);
+        });
+
     }).on('pagebeforeshow', "#boxsetsPage", function () {
 
         var limit = LibraryBrowser.getDefaultPageSize();
@@ -183,11 +195,35 @@
         updateFilterControls(this);
     });
 
-    window.BoxSetsPage = {        
-        
-        onNewCollectionSubmit: function() {
+    window.BoxSetsPage = {
+
+        onNewCollectionSubmit: function () {
+
+            Dashboard.showLoadingMsg();
+
+            var page = $(this).parents('.page');
+
+            var url = ApiClient.getUrl("Collections", {
+                
+                Name: $('#txtNewCollectionName', page).val(),
+                IsLocked: !$('#chkEnableInternetMetadata', page).checked()
+
+            });
+
+            $.ajax({
+                type: "POST",
+                url: url
+
+            }).done(function () {
+
+                Dashboard.hideLoadingMsg();
+
+                $('#newCollectionPanel', page).panel('toggle');
+
+                reloadItems(page);
+
+            });
 
-            Dashboard.alert('Coming soon');
             return false;
         }
     };
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 599603331..5967b5dbc 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -721,14 +721,14 @@ var Dashboard = {
             name: "Metadata",
             href: "metadata.html",
             selected: pageElem.id == "metadataConfigurationPage" || pageElem.id == "advancedMetadataConfigurationPage" || pageElem.id == "metadataImagesConfigurationPage"
-        }, {
-            name: "Auto-Organize",
-            href: "autoorganizelog.html",
-            selected: page.hasClass("organizePage")
         }, {
             name: "Plugins",
             href: "plugins.html",
             selected: page.hasClass("pluginConfigurationPage")
+        }, {
+            name: "Auto-Organize",
+            href: "autoorganizelog.html",
+            selected: page.hasClass("organizePage")
         }, {
             name: "Live TV",
             href: "livetvstatus.html",
@@ -1141,9 +1141,7 @@ var Dashboard = {
             return;
         }
 
-        var pageElem = page[0];
-
-        if (pageElem.hasPageTitle) {
+        if ($('.pageTitle', page).length) {
             return;
         }
 
@@ -1154,8 +1152,6 @@ var Dashboard = {
         }
 
         $(parent).prepend("<h2 class='pageTitle'>" + (document.title || "&nbsp;") + "</h2>");
-
-        pageElem.hasPageTitle = true;
     },
 
     setPageTitle: function (title) {