display rotten tomatoes icon

dashboard-ui/css/tileitem.css

@@ -15,8 +15,19 @@
     }
 
     .tileItem .starRating {
-        width: 15px;
+        width: 16px;
-        height: 13px;
+        height: 14px;
+    }
+
+    .tileItem .rottentomatoesicon {
+        height: 14px;
+        width: 14px;
+    }
+
+    .tileItem .criticRating {
+        position: relative;
+        top: -1px;
+        font-size: 13px;
     }
 
 .tileImage {

dashboard-ui/edititemmetadata.html

@@ -39,11 +39,11 @@
                         <input type="number" id="txtIndexNumber" name="txtIndexNumber" data-mini="true" pattern="[0-9]*" />
                     </div>
                     <div data-role="fieldcontain">
-                        <label for="txtCommunityRating">Community rating (0-10):</label>
+                        <label for="txtCommunityRating">Community rating:</label>
                         <input type="number" id="txtCommunityRating" name="txtCommunityRating" step=".1" data-mini="true" min="0" max="10" />
                     </div>
                     <div data-role="fieldcontain">
-                        <label for="txtCriticRating">Critic rating (0-10):</label>
+                        <label for="txtCriticRating">Critic rating:</label>
                         <input type="number" id="txtCriticRating" name="txtCriticRating" step=".1" data-mini="true" min="0" max="10" />
                     </div>
                     <div data-role="fieldcontain">

dashboard-ui/itemdetails.html

@@ -115,13 +115,15 @@
 
                         <h1 id="grandParentName" class="detailPageName hide"></h1>
                         <h1 id="parentName" class="detailPageName hide"></h1>
-                        <h1 id="itemName" class="detailPageName"></h1>
+                        <h1 class="detailPageName">
+                            <span id="itemName" style="display: inline;"></span>
+                            <span id="itemMiscInfo" class="itemMiscInfo" style="display: inline;"></span>
+                        </h1>
 
-                        <p id="itemMiscInfo" class="itemMiscInfo"></p>
+                        <p id="itemCommunityRating"></p>
                         <p id="itemTagline" style="font-style: italic;"></p>
                         <p id="itemOverview"></p>
                         <p id="itemRatings" class="userDataIcons"></p>
-                        <p id="itemCommunityRating"></p>
 
                         <p id="itemPremiereDate"></p>
                         <p id="itemBudget"></p>

dashboard-ui/scripts/Itemdetailpage.js

@@ -204,7 +204,7 @@
         LibraryBrowser.renderOverview($('#itemOverview', page), item);
 
         if (item.CommunityRating) {
-            $('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
+            $('#itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item)).show();
         } else {
             $('#itemCommunityRating', page).hide();
         }

dashboard-ui/scripts/librarybrowser.js

@@ -147,7 +147,7 @@
                 html += '<div class="tileName">' + name + '</div>';
 
                 if (item.CommunityRating) {
-                    html += '<p>' + LibraryBrowser.getFiveStarRatingHtml(item) + '</p>';
+                    html += '<p>' + LibraryBrowser.getRatingHtml(item) + '</p>';
                 }
 
                 var childText;
@@ -811,42 +811,35 @@
             return html;
         },
 
-        getStarRatingHtml: function (item) {
+        getRatingHtml: function (item) {
-            var rating = item.CommunityRating;
-
-            var html = "";
-            for (var i = 1; i <= 10; i++) {
-                if (rating < i - 1) {
-                    html += "<div class='starRating emptyStarRating'></div>";
-                }
-                else if (rating < i) {
-                    html += "<div class='starRating halfStarRating'></div>";
-                }
-                else {
-                    html += "<div class='starRating'></div>";
-                }
-            }
-
-            return html;
-        },
-
-        getFiveStarRatingHtml: function (item) {
 
             var rating = item.CommunityRating / 2;
 
             var html = "";
             for (var i = 1; i <= 5; i++) {
                 if (rating < i - 1) {
-                    html += "<div class='starRating emptyStarRating'></div>";
+                    html += "<div class='starRating emptyStarRating' title='" + item.CommunityRating + "'></div>";
                 }
                 else if (rating < i) {
-                    html += "<div class='starRating halfStarRating'></div>";
+                    html += "<div class='starRating halfStarRating' title='" + item.CommunityRating + "'></div>";
                 }
                 else {
-                    html += "<div class='starRating'></div>";
+                    html += "<div class='starRating' title='" + item.CommunityRating + "'></div>";
                 }
             }
 
+            if (item.Type == "Movie" && item.CriticRating != null) {
+
+                if (item.CriticRating >= 60) {
+                    html += '<div class="fresh rottentomatoesicon"></div>';
+                } else {
+                    html += '<div class="rotten rottentomatoesicon"></div>';
+                }
+
+                html += '<div class="criticRating">' + item.CriticRating + '%</div>';
+
+            }
+
             return html;
         },
 
@@ -1344,7 +1337,7 @@
                 miscInfo.push(item.VideoFormat);
             }
 
-            return miscInfo.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
+            return miscInfo.join('&nbsp;&nbsp;&nbsp;&nbsp;');
         },
 
         renderOverview: function (elem, item) {