Merge branch 'overview-grid'

NzbDrone.Core/Model/UpcomingEpisodesModel.cs

@@ -1,12 +0,0 @@
-using System.Collections.Generic;
-using NzbDrone.Core.Repository;
-
-namespace NzbDrone.Core.Model
-{
-    public class UpcomingEpisodesModel
-    {
-        public List<Episode> Yesterday { get; set; }
-        public List<Episode> Today { get; set; }
-        public List<Episode> Week { get; set; }
-    }
-}

NzbDrone.Core/NzbDrone.Core.csproj

@@ -325,7 +325,6 @@
     <Compile Include="Model\EpisodeStatusType.cs" />
     <Compile Include="Model\Sabnzbd\SabPriorityType.cs" />
     <Compile Include="Model\SeasonParseResult.cs" />
-    <Compile Include="Model\UpcomingEpisodesModel.cs" />
     <Compile Include="Providers\Indexer\IndexerBase.cs" />
     <Compile Include="Providers\ExternalNotificationProvider.cs" />
     <Compile Include="Providers\Indexer\NzbsOrg.cs" />

NzbDrone.Core/Providers/UpcomingEpisodesProvider.cs

@@ -18,20 +18,6 @@ namespace NzbDrone.Core.Providers
             _database = database;
         }
 
-        public virtual UpcomingEpisodesModel Upcoming()
-        {
-            var allEps = _database.Fetch<Episode, Series>(@"SELECT * FROM Episodes 
-                                                        INNER JOIN Series ON Episodes.SeriesId = Series.SeriesId
-                                                        WHERE Ignored = 0 AND AirDate BETWEEN @0 AND @1",
-                                                        DateTime.Today.AddDays(-1), DateTime.Today.AddDays(8));
-
-            var yesterday = allEps.Where(e => e.AirDate == DateTime.Today.AddDays(-1)).ToList();
-            var today = allEps.Where(e => e.AirDate == DateTime.Today).ToList();
-            var week = allEps.Where(e => e.AirDate > DateTime.Today).ToList();
-
-            return new UpcomingEpisodesModel { Yesterday = yesterday, Today = today, Week = week };
-        }
-
         public virtual List<Episode> Yesterday()
         {
             return _database.Fetch<Episode, Series>(@"SELECT * FROM Episodes 

NzbDrone.Web/Content/Grid.css

@@ -2,15 +2,83 @@
 {
     width: 18px;
     height: 18px;
-    padding: 1px;
-    margin: 2px;
+    padding: 3px 1px;
+    margin: 0px;
+    vertical-align: middle;
 }
     
 .searchImage:hover, .renameImage:hover, .ignoreEpisode:hover, .ignoreEpisodesMaster:hover
 {
     background-color: #065EFE;
 }
+
+/* Custom Grid */
+.seriesTable
+{
+    width: 100%;
+    border-width: 1px;
+    border-spacing: 2px;
+    border-style: none;
+    border-color: white;
+    border-collapse: collapse;
+}
+    
+.seriesTable th
+{
+    font-family: "Segoe UI Light" , "Open Sans" , "Segoe UI" , sans-serif;
+    border-width: 300;
+    font-size: 17px;
+    padding: 2px;
+    border-style: none;
+    border-color: #EEEEEE;
+    padding-left: 7px;
+    text-align: left;
+    background-color: white;
+    font-weight: lighter;
+}
+    
+.seriesTable td
+{
+    border-width: 1px;
+    padding: 0px 8px 0px 8px;
+    border-style: inset;
+    border-color: #EEEEEE;
+}
+
+.title-row
+{
+    font-family: "Segoe UI Light" , "Open Sans" , "Segoe UI" , sans-serif;
+    font-size: 17px;
+    background-color: grey;
+    font-weight: lighter;
+    color: white;
+}
+    
+.detail-row
+{
+    display: none;
+}
     
+/* Colour alternating rows */
+.seriesTable .alt-row
+{
+    background: #f0f5ff;
+}
+
+/* Episode Grid Row Colouring */
+.episodeIgnored
+{
+    background-color: #F2F5A9;
+}
+    
+.episodeMissing
+{
+    background-color: #F5A9A9;
+}
+
+
+
+/* Telerik Grid */
 .t-grid td
 {
     line-height: 0.6em;

NzbDrone.Web/Content/NzbDrone.css

@@ -267,15 +267,4 @@ button span, input[type="button"] span, input[type="submit"] span, input[type="r
     background: rgb(40, 40, 40);
     color: rgb(169, 169, 169);
     padding: 4px;
-}
-
-/* Episode Grid Row Colouring */
-.episodeIgnored
-{
-    background-color: #F2F5A9;
-}
-    
-.episodeMissing
-{
-    background-color: #F5A9A9;
 }

NzbDrone.Web/Content/Overrides.css

@@ -26,6 +26,11 @@
     color: #065EFE;
 }
 
+.ui-progressbar-value
+{
+    background: #065EFE url(./jQueryUI/images/ui-bg_flat_30_065efe_40x100.png) 50% 50% repeat-x;
+}
+
 .jquery-tabs
 {
     margin-top: 10px;

NzbDrone.Web/Controllers/SeriesController.cs

@@ -37,6 +37,12 @@ namespace NzbDrone.Web.Controllers
         }
 
         public ActionResult Index()
+        {
+            var series = GetSeriesModels(_seriesProvider.GetAllSeriesWithEpisodeCount()).OrderBy(o => SortHelper.SkipArticles(o.Title)).ToList();
+            return View(series);
+        }
+
+        public ActionResult SeriesEditor(int seriesId)
         {
             var profiles = _qualityProvider.All();
             ViewData["SelectList"] = new SelectList(profiles, "QualityProfileId", "Name");
@@ -50,47 +56,31 @@ namespace NzbDrone.Web.Controllers
 
             ViewData["BacklogSettingSelectList"] = new SelectList(backlogStatusTypes, "Key", "Value");
 
-            return View();
-        }
-
-        [GridAction]
-        public ActionResult _AjaxSeriesGrid()
-        {
-            var series = GetSeriesModels(_seriesProvider.GetAllSeriesWithEpisodeCount()).OrderBy(o => SortHelper.SkipArticles(o.Title));
-            return View(new GridModel(series));
+            var series = GetSeriesModels(new List<Series>{_seriesProvider.GetSeries(seriesId)}).Single();
+            return View(series);
         }
 
-        [AcceptVerbs(HttpVerbs.Post)]
-        [GridAction]
-        public ActionResult _SaveAjaxSeriesEditing(int id, string path, bool monitored, bool seasonFolder, int qualityProfileId, int backlogSetting)
+        [HttpPost]
+        public EmptyResult SaveSeriesEditor(SeriesModel seriesModel)
         {
-            var oldSeries = _seriesProvider.GetSeries(id);
-            oldSeries.Monitored = monitored;
-            oldSeries.SeasonFolder = seasonFolder;
-            oldSeries.QualityProfileId = qualityProfileId;
-            oldSeries.Path = path;
-            oldSeries.BacklogSetting = (BacklogSettingType)backlogSetting;
+            var series = _seriesProvider.GetSeries(seriesModel.SeriesId);
+            series.Monitored = seriesModel.Monitored;
+            series.SeasonFolder = seriesModel.SeasonFolder;
+            series.QualityProfileId = seriesModel.QualityProfileId;
+            series.Path = seriesModel.Path;
+            series.BacklogSetting = (BacklogSettingType)seriesModel.BacklogSetting;
 
-            _seriesProvider.UpdateSeries(oldSeries);
+            _seriesProvider.UpdateSeries(series);
 
-            var series = GetSeriesModels(_seriesProvider.GetAllSeriesWithEpisodeCount()).OrderBy(o => SortHelper.SkipArticles(o.Title));
-            return View(new GridModel(series));
+            return new EmptyResult();
         }
 
-        [GridAction]
-        public ActionResult _DeleteAjaxSeriesEditing(int id)
+        [HttpPost]
+        public EmptyResult DeleteSeries(int seriesId)
         {
-            //Grab the series from the DB so we can remove it from the list we return to the client
-            var seriesInDb = _seriesProvider.GetAllSeriesWithEpisodeCount().ToList();
-
-            //Remove this so we don't send it back to the client (since it hasn't really been deleted yet)
-            seriesInDb.RemoveAll(s => s.SeriesId == id);
-
-            //Start removing this series
-            _jobProvider.QueueJob(typeof(DeleteSeriesJob), id);
+            _jobProvider.QueueJob(typeof(DeleteSeriesJob), seriesId);
 
-            var series = GetSeriesModels(seriesInDb).OrderBy(o => SortHelper.SkipArticles(o.Title));
-            return View(new GridModel(series));
+            return new EmptyResult();
         }
 
         public JsonResult LocalSearch(string term)

NzbDrone.Web/Controllers/UpcomingController.cs

@@ -4,6 +4,7 @@ using System.Linq;
 using System.Web.Mvc;
 using NzbDrone.Core;
 using NzbDrone.Core.Providers;
+using NzbDrone.Core.Repository;
 using NzbDrone.Web.Models;
 using Telerik.Web.Mvc;
 
@@ -23,13 +24,20 @@ namespace NzbDrone.Web.Controllers
 
         public ActionResult Index()
         {
-            return View();
+            var upcoming = new UpcomingEpisodesModel
+                               {
+                                       Yesterday = GetUpcomingEpisodeModels(_upcomingEpisodesProvider.Yesterday()),
+                                       Today = GetUpcomingEpisodeModels(_upcomingEpisodesProvider.Today()),
+                                       Tomorrow = GetUpcomingEpisodeModels(_upcomingEpisodesProvider.Tomorrow()),
+                                       Week = GetUpcomingEpisodeModels(_upcomingEpisodesProvider.Week())
+                               };
+            
+            return View(upcoming);
         }
 
-        [GridAction]
-        public ActionResult _AjaxBindingYesterday()
+        private List<UpcomingEpisodeModel> GetUpcomingEpisodeModels(List<Episode> episodes)
         {
-            var upcoming = _upcomingEpisodesProvider.Yesterday().Select(u => new UpcomingEpisodeModel
+            return episodes.Select(u => new UpcomingEpisodeModel
             {
                 SeriesId = u.Series.SeriesId,
                 EpisodeId = u.EpisodeId,
@@ -42,72 +50,7 @@ namespace NzbDrone.Web.Controllers
                 AirDate = u.AirDate.Value.ToBestDateString(),
                 AirTime = String.IsNullOrEmpty(u.Series.AirTimes) ? "?" : Convert.ToDateTime(u.Series.AirTimes).ToShortTimeString(),
                 Status = u.Status.ToString()
-            });
-
-            return View(new GridModel(upcoming));
-        }
-
-        [GridAction]
-        public ActionResult _AjaxBindingToday()
-        {
-            var upcoming = _upcomingEpisodesProvider.Today().Select(u => new UpcomingEpisodeModel
-            {
-                SeriesId = u.Series.SeriesId,
-                EpisodeId = u.EpisodeId,
-                SeriesTitle = u.Series.Title,
-                SeasonNumber = u.SeasonNumber,
-                EpisodeNumber = u.EpisodeNumber,
-                Title = u.Title,
-                Overview = u.Overview,
-                AirDateTime = GetDateTime(u.AirDate.Value, u.Series.AirTimes),
-                AirDate = u.AirDate.Value.ToBestDateString(),
-                AirTime = String.IsNullOrEmpty(u.Series.AirTimes) ? "?" : Convert.ToDateTime(u.Series.AirTimes).ToShortTimeString(),
-                Status = u.Status.ToString()
-            });
-
-            return View(new GridModel(upcoming));
-        }
-
-        [GridAction]
-        public ActionResult _AjaxBindingTomorrow()
-        {
-            var upcoming = _upcomingEpisodesProvider.Tomorrow().Select(u => new UpcomingEpisodeModel
-            {
-                SeriesId = u.Series.SeriesId,
-                EpisodeId = u.EpisodeId,
-                SeriesTitle = u.Series.Title,
-                SeasonNumber = u.SeasonNumber,
-                EpisodeNumber = u.EpisodeNumber,
-                Title = u.Title,
-                Overview = u.Overview,
-                AirDateTime = GetDateTime(u.AirDate.Value, u.Series.AirTimes),
-                AirDate = u.AirDate.Value.ToBestDateString(),
-                AirTime = String.IsNullOrEmpty(u.Series.AirTimes) ? "?" : Convert.ToDateTime(u.Series.AirTimes).ToShortTimeString(),
-                Status = u.Status.ToString()
-            });
-
-            return View(new GridModel(upcoming));
-        }
-
-        [GridAction]
-        public ActionResult _AjaxBindingWeek()
-        {
-            var upcoming = _upcomingEpisodesProvider.Week().Select(u => new UpcomingEpisodeModel
-            {
-                SeriesId = u.Series.SeriesId,
-                EpisodeId = u.EpisodeId,
-                SeriesTitle = u.Series.Title,
-                SeasonNumber = u.SeasonNumber,
-                EpisodeNumber = u.EpisodeNumber,
-                Title = u.Title,
-                Overview = u.Overview,
-                AirDateTime = GetDateTime(u.AirDate.Value, u.Series.AirTimes),
-                AirDate = u.AirDate.Value.ToBestDateString(),
-                AirTime = String.IsNullOrEmpty(u.Series.AirTimes) ? "?" : Convert.ToDateTime(u.Series.AirTimes).ToShortTimeString(),
-                Status = u.Status.ToString()
-            });
-
-            return View(new GridModel(upcoming));
+            }).OrderBy(e => e.AirDateTime).ToList();
         }
 
         private DateTime GetDateTime(DateTime airDate, string airTime)

NzbDrone.Web/Models/UpcomingEpisodesModel.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using NzbDrone.Core.Model;
+using NzbDrone.Core.Repository;
+
+namespace NzbDrone.Web.Models
+{
+    public class UpcomingEpisodesModel
+    {
+        public List<UpcomingEpisodeModel> Yesterday { get; set; }
+        public List<UpcomingEpisodeModel> Today { get; set; }
+        public List<UpcomingEpisodeModel> Tomorrow { get; set; }
+        public List<UpcomingEpisodeModel> Week { get; set; }
+    }
+}

NzbDrone.Web/NzbDrone.Web.csproj

@@ -142,6 +142,7 @@
     <Content Include="Content\2011.3.1115\telerik.sitefinity.min.css" />
     <Content Include="Content\Images\background.jpg" />
     <Content Include="Content\Images\blue.png" />
+    <Content Include="Content\Images\Delete.png" />
     <Content Include="Content\Images\Gear.png" />
     <Content Include="Content\Images\green.png" />
     <Content Include="Content\Images\header.jpg" />
@@ -227,6 +228,7 @@
     <Compile Include="Helpers\DescriptionExtension.cs" />
     <Compile Include="Helpers\HtmlPrefixScopeExtensions.cs" />
     <Compile Include="Helpers\IsCurrentActionHelper.cs" />
+    <Compile Include="Models\UpcomingEpisodesModel.cs" />
     <Compile Include="Models\SeasonModel.cs" />
     <Compile Include="Models\SeriesDetailsModel.cs" />
     <Compile Include="Models\MiscSettingsModel.cs" />
@@ -455,9 +457,6 @@
   <ItemGroup>
     <Content Include="Views\Missing\Index.cshtml" />
   </ItemGroup>
-  <ItemGroup>
-    <Content Include="Views\Series\EditorTemplates\SeriesModel.cshtml" />
-  </ItemGroup>
   <ItemGroup>
     <Content Include="Views\AddSeries\ExistingSeries.cshtml" />
   </ItemGroup>
@@ -510,12 +509,14 @@
     <Content Include="App_GlobalResources\GridLocalization.en-US.resx">
       <Generator>GlobalResourceProxyGenerator</Generator>
       <LastGenOutput>GridLocalization.en-US.designer.cs</LastGenOutput>
+      <SubType>Designer</SubType>
     </Content>
   </ItemGroup>
   <ItemGroup>
     <Content Include="App_GlobalResources\EditorLocalization.en-US.resx">
       <Generator>GlobalResourceProxyGenerator</Generator>
       <LastGenOutput>EditorLocalization.en-US.designer.cs</LastGenOutput>
+      <SubType>Designer</SubType>
     </Content>
   </ItemGroup>
   <ItemGroup>
@@ -548,6 +549,15 @@
   <ItemGroup>
     <Content Include="Views\Series\Details.cshtml" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Series\Series.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Series\SeriesEditor.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Upcoming\UpcomingEpisode.cshtml" />
+  </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 

NzbDrone.Web/Scripts/NzbDrone/grid.js

@@ -1,4 +1,16 @@
-function grid_onError(e) {
+/* Click on row, show details */
+$('.seriesTable a').live('click', function (event) {
+    event.preventDefault();
+    var link = $(this).attr('href');
+    window.location = link;
+    event.stopPropegation();
+});
+
+$('.seriesTable .data-row td:not(:last-child)').live('click', function () {
+    $(this).parent('tr').next('.detail-row').toggle();
+});
+
+function grid_onError(e) {
     //Suppress the alert
     e.preventDefault();
 }

NzbDrone.Web/Scripts/NzbDrone/seriesDetails.js

@@ -143,9 +143,4 @@ function saveEpisodeIgnore(episodeId, ignored) {
             alert("Sorry! We could save the ignore settings for Episode: " + episodeId + " at this time. " + error);
         }
     });
-}
-
-/* Click on row, show details */
-$('.seriesTable tr td:not(:last-child)').live('click', function () {
-    $(this).parent('tr').next('.detail-view').toggle();
-});
+}

NzbDrone.Web/Views/Series/Details.cshtml

@@ -39,20 +39,6 @@
         border-style: none;
     }
     
-    .statusImage, .searchImage, .renameImage, .ignoreEpisode, .ignoreEpisodesMaster
-    {
-        width: 18px;
-        height: 18px;
-        padding: 3px 1px;
-        margin: 0px;
-        vertical-align: middle;
-    }
-    
-    .searchImage:hover, .renameImage:hover, .ignoreEpisode:hover, .ignoreEpisodesMaster:hover
-    {
-        background-color: #065EFE;
-    }
-    
     #banner-container
     {
         width: 758px;
@@ -63,58 +49,11 @@
         margin-left: auto;
         margin-right: auto;
     }
-    
-    .seriesTable
-    {
-        width: 100%;
-        border-width: 1px;
-        border-spacing: 2px;
-        border-style: none;
-        border-color: white;
-        border-collapse: collapse;
-    }
-    
-    .seriesTable th
-    {
-        font-family: "Segoe UI Light" , "Open Sans" , "Segoe UI" , sans-serif;
-        border-width: 300;
-        font-size: 17px;
-        padding: 2px;
-        border-style: inset;
-        border-color: #EEEEEE;
-        padding-left: 7px;
-        text-align: left;
-        background-color: white;
-        font-weight: lighter;
-    }
-    
-    .seriesTable td
-    {
-        border-width: 1px;
-        padding: 0px 8px 0px 8px;
-        border-style: inset;
-        border-color: #EEEEEE;
-    }
-    
-    .detail-view
-    {
-        display: none;
-    }
-    
+   
     .seasonSection
     {
         margin-top: 50px;
     }
-    
-    /* Colour alternating rows */
-    .seriesTable tr:nth-child(4n)
-    {
-        background: #f0f5ff;
-    }
-    .seriesTable tr:nth-child(4n+1)
-    {
-        background: #f0f5ff;
-    }
 </style>
 @section ActionMenu
 {
@@ -140,7 +79,7 @@
         var ignoreSeason = "ignoreSeason_" + season.SeasonNumber;
         <div class="seasonToggleTop">
             <img src='../../Content/Images/@(season.AnyWanted ? "notIgnored" : "ignored").png'
-                 class='ignoredEpisodesMaster ignoreEpisode @ignoreSeason @(season.AnyWanted ? "" : "ignored")'
+                 class='ignoredEpisodesMaster ignoreEpisode @ignoreSeason@(season.AnyWanted ? " " : " ignored")'
                  title='Click to toggle season ignore status' />
             <a href="@string.Format("#SeasonSection_{0}", season.SeasonNumber)" class="seasonToggleLabel">@(season.SeasonNumber == 0 ? "Specials" : "Season " + season.SeasonNumber)</a>
         </div>

NzbDrone.Web/Views/Series/Episode.cshtml

@@ -1,7 +1,7 @@
 @using NzbDrone.Web.Helpers
 @model NzbDrone.Web.Models.EpisodeModel
 
-<tr class="@Model.EpisodeId">
+<tr class="@Model.EpisodeId data-row@(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")">
     <td>@Model.EpisodeNumber</td>
     <td>@Model.Title</td>
     <td>@Model.AirDate</td>
@@ -23,13 +23,13 @@
 
     @*Commands Column*@
     <td class="@cellColourClass">
-        <img src='../../Content/Images/@(Model.Ignored ? "ignored" : "notIgnored").png' class='ignoreEpisode ignoreEpisode_@(Model.SeasonNumber) @(Model.Ignored ? "ignored" : "")' id='@Model.EpisodeId' title='Click to toggle episode ignore status' />
+        <img src='../../Content/Images/@(Model.Ignored ? "ignored" : "notIgnored").png' class='ignoreEpisode ignoreEpisode_@(Model.SeasonNumber)@(Model.Ignored ? " ignored" : " ")' id='@Model.EpisodeId' title='Click to toggle episode ignore status' />
         <img src='../../Content/Images/@(Model.Status).png' alt='@Model.Status' title='@Model.Status' class='statusImage status-@Model.Status' />
         @Ajax.ImageActionLink("../../Content/Images/Search.png", new { Alt = "Search", Title = "Search for episode", @class = "searchImage" }, "Search", "Episode", new { EpisodeId = Model.EpisodeId }, null, null)
         @Ajax.ImageActionLink("../../Content/Images/Rename.png", new { Alt = "Rename", Title = "Rename episode", @class = "renameImage" }, "Rename", "Episode", new { EpisodeFileId = Model.EpisodeFileId }, null, null)
     </td>
 </tr>
-<tr class="detail-view">
+<tr class="detail-row@(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")">
     <td colspan="5">
         @Model.Overview <br />
         <b>@Model.Path</b>

NzbDrone.Web/Views/Series/Index.cshtml

@@ -1,53 +1,90 @@
 @using NzbDrone.Common
 @using NzbDrone.Web.Helpers
 @using NzbDrone.Web.Models;
-@model IEnumerable<NzbDrone.Core.Repository.Series>
+@model List<NzbDrone.Web.Models.SeriesModel>
 @{ViewBag.Title = "NzbDrone";}
 
 @section HeaderContent
 {
     @Html.IncludeCss("Settings.css")
+    @Html.IncludeCss("Grid.css")
 }
-<style>
-    /* progress bar container */
-    .progressbar
+<style>  
+    .ui-progressbar
     {
-        border: 1px solid #065EFE;
-        width: 125px;
+        position:relative;
+        width: 125px; 
         height: 20px;
-        position: relative;
-        color: black;
+        background-color: transparent;
+        border: 1px solid #065EFE;
+        margin: 2px;
     }
     
-    
-    /* color bar */
-    .progressbar div.progress
+    .progressBarText 
     {
         position: absolute;
-        width: 0;
-        height: 100%;
+        display: block;
+        width: 100%;
+        text-align: center;
+    }
+
+    .ui-progressbar-value
+    {
         overflow: hidden;
-        background-color: #065EFE;
+        border: 1px solid #065EFE;
     }
-    /* text on bar */
-    .progressbar div.progress .progressText
+
+    .ui-progressbar-value .progressBarText
     {
-        position: absolute;
-        text-align: center;
+        position: relative;
+        font-weight: normal;
         color: white;
     }
-    /* text off bar */
-    .progressbar div.progressText
+    
+    /* Set the row height so it won't resize when the progress bar is created */
+    .seriesTable tr
+    {
+        height: 28px;
+    }
+    
+    .editButton, .deleteButton
+    {
+        width: 18px;
+        height: 18px;
+        padding: 3px 1px;
+        margin: 0px;
+        vertical-align: middle;
+    }
+    
+    .editButton:hover, .deleteButton:hover
+    {
+        background-color: #065EFE;
+    }
+    
+    .commandsColumn
     {
-        position: absolute;
-        width: 100%;
-        height: 100%;
         text-align: center;
     }
     
-    .t-grid .t-alt
+    .ui-dialog-buttonpane .ui-dialog-buttonset .ui-delete-button
+    {
+        margin-right: 445px;
+    }
+       
+    .ui-dialog-buttonset .ui-delete-button
     {
-        background: #E5ECF9;
+        background: url("images/ui-bg_flat_30_b40404_40x100.png") repeat-x scroll 50% 50% #B40404;
+        border: 1px solid #FFFFFF;
+        color: #FFFFFF;
+        font-weight: normal;
+    }
+    
+    .ui-dialog-buttonset .ui-delete-button:active
+    {
+        background: url("images/ui-bg_flat_30_616161_40x100.png") repeat-x scroll 50% 50% #616161;
+        border: 1px solid #FFFFFF;
+        color: #FFFFFF;
+        font-weight: normal;
     }
 </style>
 @section ActionMenu{
@@ -56,90 +93,180 @@
         <li>@Ajax.ActionLink("Start RSS Sync", "RssSync", "Command", null)</li>
     </ul>
 }
-@{Html.Telerik().Grid<SeriesModel>().Name("Grid")
-               .DataKeys(keys => keys.Add(p => p.SeriesId))
-                .DataBinding(data => data.Ajax()
-                    .Select("_AjaxSeriesGrid", "Series")
-                    .Update("_SaveAjaxSeriesEditing", "Series")
-                    .Delete("_DeleteAjaxSeriesEditing", "Series"))
-                .Columns(columns =>
-                             {
-                                 columns.Bound(o => o.Title)
-                                     .ClientTemplate("<a href=" +
-                                                     Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                     "><#= Title #></a>");
-                                 columns.Bound(o => o.SeasonsCount).Title("Seasons");
-                                 columns.Bound(o => o.QualityProfileName).Title("Quality");
-                                 columns.Bound(o => o.Status);
-                                 //columns.Bound(o => o.AirsDayOfWeek);
-                                 columns.Bound(o => o.NextAiring);
-                                 columns.Bound(o => o.Episodes).Title("Episodes").Width(125)
-                                     .ClientTemplate("<div id=\"progressbar_<#= SeriesId #>\" class=\"progressbar\">" +
-                                                            "<div class=\"progressText\"></div>" +
-                                                            "<div class=\"progress\">" +
-                                                                "<span class=\"progressText\" style=\"width: 125px;\"></span>" +
-                                                            "</div>" +
-                                                     "</div>");
-                                 columns.Command(commands =>
-                                 {
-                                     commands.Edit().ButtonType(GridButtonType.Image);
-                                     commands.Delete().ButtonType(GridButtonType.Image);
-                                 }).Title("Actions").Width(90);
-
-                             })
-                .Editable(editor => editor.Mode(GridEditMode.PopUp))
-                .DetailView(detailView => detailView.ClientTemplate(
-                                                                        "<b>Airs Day of Week:</b> " + "<#= AirsDayOfWeek #>" +
-                                                                        "<br />" +
-                                                                        "<b>Overview:</b> " +
-                                                                        "<#= Overview #>"
-                                                                    ))
-                .ClientEvents(clientEvents =>
-                {
-                    clientEvents.OnEdit("grid_edit");
-                    clientEvents.OnSave("grid_save");
-                    clientEvents.OnRowDataBound("grid_rowBound");
-                    if(EnviromentProvider.IsProduction)
-                        clientEvents.OnError("grid_onError");
-                })
-                .Render();}
-@section Scripts{
-    <script type="text/javascript">
-        var windowElement;
 
-        function grid_edit(args) {
-            $(args.form)
-            .closest(".t-window")
-            .data("tWindow")
-            .center();
+<table class="seriesTable">
+    <colgroup>
+        <col/>
+        <col style="width:100px" />
+        <col style="width:100px" />
+        <col style="width:100px" />
+        <col style="width:100px" />
+        <col style="width:140px" />
+        <col style="width:70px" />
+    </colgroup>
+    <tr>
+        <th>Title</th>
+        <th>Seasons</th>
+        <th>Quality</th>
+        <th>Status</th>
+        <th>Next Airing</th>
+        <th>Episodes</th>
+        
+        @*Commands Column*@
+        <th>
+            
+        </th>
+    </tr>
+    
+    @for (int i = 0; i < Model.Count; i++)
+    {
+        var series = Model[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("Series", series);
         }
 
-        function grid_save(e) {
-            $('#ajaxSaveWheel').show();
+        else
+        {
+            Html.RenderPartial("Series", series, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
         }
+    }
+</table>
+
+<div id="seriesEditor" title="Edit Series"></div>
+<div id="seriesDelete" title="Delete Series">
+    <input class="seriesId" type="hidden" value="">
+    Are you sure you want to delete '<span class="seriesTitle"></span>'?
+</div>
+@section Scripts{
+    <script type="text/javascript">
+        var seriesEditorUrl = './Series/SeriesEditor';
+        var saveSeriesEditorUrl = './Series/SaveSeriesEditor';
+        var seriesDeleteUrl = './Series/DeleteSeries';
 
-        function grid_rowBound(e) {
-            var dataItem = e.dataItem;
-            var seriesId = dataItem.SeriesId;
-            var episodeCount = dataItem.EpisodeCount;
-            var episodeFileCount = dataItem.EpisodeFileCount;
+        $(document).ready(function () {
+            $(".progressBar").each(function () {
+                var element = this;
 
-            $("#progressbar_" + seriesId).episodeProgress(episodeFileCount, episodeCount);
-        }
+                var progressbar = $(element).progressbar({
+                    value: parseInt($(element).attr("value"))
+                });
+                var label = progressbar.find('.progressBarText').clone().width(progressbar.width());
+                progressbar.find('.ui-progressbar-value').append(label);
+            });
+        });
+
+        $("#seriesEditor").dialog({
+            autoOpen: false,
+            height: 350,
+            width: 670,
+            resizable: false,
+            modal: true,
+            buttons: {
+                "Delete": {
+                    text: "Delete",
+                    class: "ui-delete-button",
+                    click: function () {
+                        var answer = confirm("Are you sure you want to delete this series?");
+                        if (answer) {
+                            var seriesId = $('#SeriesId').val();
+
+                            $.ajax({
+                                type: "POST",
+                                url: seriesDeleteUrl,
+                                data: { seriesId: seriesId },
+                                success: function (data) {
+                                    //Remove the row from the grid... along with the details row
+                                    $('.' + seriesId).hide();
+                                    $('.details_' + seriesId).hide();
+                                }
+                            });
+                            $(this).dialog("close");
+                        }
+                    }
+                },
+                "Save": function () {
+                    //Save the form
+                    $('#SeriesEditorForm').submit();
+                    $(this).dialog("close");
+                },
+                Cancel: function () {
+                    $(this).dialog("close");
+                }
+            }
+        });
+
+        $("#seriesDelete").dialog({
+            autoOpen: false,
+            resizable: false,
+            height: 170,
+            width: 450,
+            modal: true,
+            buttons: {
+                "Delete": function () {
+                    var seriesId = $('.seriesId').val();
+
+                    $.ajax({
+                        type: "POST",
+                        url: seriesDeleteUrl,
+                        data: { seriesId: seriesId },
+                        success: function (data) {
+                            //Remove the row from the grid... along with the details row
+                            $('.' + seriesId).hide();
+                            $('.details_' + seriesId).hide();
+                        }
+                    });
+                    $(this).dialog("close");
+                },
+                Cancel: function () {
+                    $(this).dialog("close");
+                }
+            }
+        });
 
-        (function ($) {
-            $.fn.episodeProgress = function (episodes, totalEpisodes) {
-                return this.each(
-                function () {
-                    var div = $(this);
-                    var progressBar = div.find(".progress");
+        $(".editButton")
+            //.button()
+            .live('click', function () {
+                //Get the SeriesId and Title
+                var seriesId = parseInt($(this).attr("value"));
+                var title = $(this).attr("rel");
 
-                    var width = Math.round(episodes / totalEpisodes * 100);
+                //Set the title of the dialog
+                $("#seriesEditor").dialog("option", "title", "Edit Series: " + title);
 
-                    progressBar.css("width", width + "%");
-                    div.find(".progressText").html(episodes + " / " + totalEpisodes);
+                //Pre-populate the view with ajax
+                $('#seriesEditor').html('<div style="text-align: center; width: 100%; height: 100%;"><img src="../../Content/Images/ajax-loader.gif" style="padding-top: 120px;" /></div>');
+
+                //Get the view
+                $.ajax({
+                    url: seriesEditorUrl,
+                    data: { seriesId: seriesId },
+                    success: function (data) {
+                        $('#seriesEditor').html(data);
+                    }
                 });
-            };
-        })(jQuery);
+
+                //Open the dialog
+                $("#seriesEditor").dialog("open");
+            });
+
+            $(".deleteButton")
+            //.button()
+            .live('click', function () {
+                //Get the SeriesId and Title
+                var seriesId = parseInt($(this).attr("value"));
+                var title = $(this).attr("rel");
+
+                //Set the title of the dialog
+                //$("#seriesDelete").dialog("option", "title", "Delete Series: " + title);
+
+                //Fill in the view
+                $('#seriesDelete').children('.seriesId').val(seriesId);
+                $('#seriesDelete').children('.seriesTitle').html(title);
+
+                //Open the dialog
+                $("#seriesDelete").dialog("open");
+            });
     </script>
 }

NzbDrone.Web/Views/Series/Season.cshtml

@@ -27,8 +27,18 @@
             @Ajax.ImageActionLink("../../Content/Images/Rename.png", new { Alt = "Rename", Title = "Rename all episodes in this season", @class = "renameImage renameImageMaster" }, "RenameSeason", "Episode", new { SeriesId = Model.SeriesId, SeasonNumber = Model.SeasonNumber }, null, null)
         </th>
     </tr>
-    @foreach (var episode in Model.Episodes)
+    @for (int i = 0; i < Model.Episodes.Count; i++)
     {
-        Html.RenderPartial("Episode", episode);
+        var episode = Model.Episodes[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("Episode", episode);
+        }
+
+        else
+        {
+            Html.RenderPartial("Episode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
+        }
     }
 </table>

NzbDrone.Web/Views/Series/Series.cshtml

@@ -0,0 +1,28 @@
+@using NzbDrone.Web.Helpers
+@model NzbDrone.Web.Models.SeriesModel
+
+<tr class="@Model.SeriesId data-row @(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")">
+    <td>@Html.ActionLink(Model.Title, "Details", "Series", new { seriesId = Model.SeriesId }, null)</td>
+    <td>@Model.SeasonsCount</td>
+    <td>@Model.QualityProfileName</td>
+    <td>@Model.Status</td>
+    <td>@Model.NextAiring</td>
+    <td>
+        @{ double progress = (double)Model.EpisodeFileCount / (double)Model.EpisodeCount * 100; }
+        <div class='progressBar' rel='@progress.ToString("0")'>
+            <span class='progressBarText'>@Model.EpisodeFileCount / @Model.EpisodeCount</span>
+        </div>
+    </td>
+    
+    @*Commands Column*@
+    <td class="commandsColumn">
+        <img src="../../Content/Images/Rename.png" class="editButton" value="@Model.SeriesId" rel="@Model.Title" />
+        <img src="../../Content/Images/Delete.png" class="deleteButton" value="@Model.SeriesId" rel="@Model.Title" />
+    </td>
+</tr>
+<tr class="detail-row details_@(Model.SeriesId) @(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")">
+    <td colspan="7">
+        <b>Airs Day of Week:</b> @Model.AirsDayOfWeek <br/>
+        <b>Overview:</b> @Model.Overview
+    </td>
+</tr>

NzbDrone.Web/Views/Series/SeriesEditor.cshtml

@@ -12,7 +12,8 @@
 </style>
 
 <div id="stylized" style="border-color: transparent;">
-    <div class="settingsForm">
+    @using (Html.BeginForm("SaveSeriesEditor", "Series", FormMethod.Post, new { id = "SeriesEditorForm", name = "SeriesEditorForm", @class = "settingsForm" }))
+    {
         @Html.HiddenFor(m => m.SeriesId)
         <label class="labelClass">@Html.LabelFor(m => m.Monitored)
             <span class="small">@Html.DescriptionFor(m => m.Monitored)</span>
@@ -27,12 +28,12 @@
         </label>
         @Html.DropDownListFor(m => m.QualityProfileId, (SelectList)ViewData["SelectList"], new { @class = "inputClass" })
         <label class="labelClass">@Html.LabelFor(m => m.Path)
-        <span class="small">@Html.DescriptionFor(m => m.Path)</span>
+            <span class="small">@Html.DescriptionFor(m => m.Path)</span>
         </label>
         @Html.TextBoxFor(m => m.Path, new { @class = "inputClass" })
         <label class="labelClass">@Html.LabelFor(m => m.BacklogSetting)
-        <span class="small">@Html.DescriptionFor(m => m.BacklogSetting)</span>
+            <span class="small">@Html.DescriptionFor(m => m.BacklogSetting)</span>
         </label>
         @Html.DropDownListFor(m => m.BacklogSetting, (SelectList)ViewData["BacklogSettingSelectList"], new { @class = "inputClass" })
-    </div>
+    }
 </div>

NzbDrone.Web/Views/Upcoming/Index.cshtml

@@ -1,7 +1,6 @@
-@model List<UpcomingEpisodeModel>
-@using NzbDrone.Common
-@using NzbDrone.Web.Helpers
-@using NzbDrone.Web.Models
+@using NzbDrone.Web.Helpers
+@model NzbDrone.Web.Models.UpcomingEpisodesModel
+
 @{ViewBag.Title = "Upcoming";}
 @section HeaderContent
 {
@@ -12,178 +11,109 @@
         <li>@Ajax.ActionLink("Start RSS Sync", "RssSync", "Command", null, null)</li>
     </ul>
 }
-<div id="yesterday">
-    <h2>
-        Yesterday</h2>
-    <div class="grid-container">
-        @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Yesterday").NoRecordsTemplate(
-                    "No watched shows aired yesterday")
-                    .TableHtmlAttributes(new { @class = "Grid" })
-                    .Columns(columns =>
-                                    {
-                                        columns.Bound(c => c.SeriesTitle)
-                                            .ClientTemplate("<a href=" +
-                                                            Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                            "><#= SeriesTitle #></a>")
-                                            .Title("Series Title");
-                                        columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
-                                        columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
-                                        columns.Bound(c => c.Title).Title("Episode Title").Width(350);
-                                        columns.Bound(c => c.AirDateTime).Title("Air Time")
-                                         .ClientTemplate("<#= AirTime #>")
-                                         .Width(160);
-                                        columns.Bound(c => c.Status)
-                                            .ClientTemplate("<img src='../../Content/Images/<#= Status #>.png' alt='<#= Status #>' title='<#= Status #>' class='statusImage status-<#= Status #>' />" +
-                                                            Ajax.ImageActionLink("../../Content/Images/Search.png", new { Alt = "Search", Title = "Search for episode", @class = "searchImage" }, "Search", "Episode", new { EpisodeId = "<#= EpisodeId #>" }, null, null)
-                                                            ).Width(100);
-                                    })
-                    .DetailView(detailView => detailView.ClientTemplate(
-                        "<fieldset>" +
-                        "<div><b>Overview: </b><#= Overview #></div>" +
-                        "</fieldset>"
-                                                    ))
-                    .DataBinding(data => data.Ajax().Select("_AjaxBindingYesterday", "Upcoming"))
-                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDateTime).Ascending()).Enabled(true))
-                    .ClientEvents(clientEvents =>
-                    {
-                        clientEvents.OnRowDataBound("grid_rowBound");
-                        if (EnviromentProvider.IsProduction)
-                            clientEvents.OnError("grid_onError");
-                    })
-                    .Render();}
-    </div>
-</div>
-<br />
-<div id="today">
-    <h2>
-        Today</h2>
-    <div class="grid-container">
-        @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Today").NoRecordsTemplate("No watched shows airing today.")
-                    .TableHtmlAttributes(new { @class = "Grid" })
-                    .Columns(columns =>
-                                    {
-                                        columns.Bound(c => c.SeriesTitle)
-                                            .ClientTemplate("<a href=" +
-                                                            Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                            "><#= SeriesTitle #></a>")
-                                            .Title("Series Name");
-                                        columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
-                                        columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
-                                        columns.Bound(c => c.Title).Title("Episode Title").Width(350);
-                                        columns.Bound(c => c.AirDateTime).Title("Air Time")
-                                         .ClientTemplate("<#= AirTime #>")
-                                         .Width(160);
-                                        columns.Bound(c => c.Status)
-                                            .ClientTemplate("<img src='../../Content/Images/<#= Status #>.png' alt='<#= Status #>' title='<#= Status #>' class='statusImage status-<#= Status #>' />" +
-                                                            "<a href=\"../Episode/Season?episodeId=<#= EpisodeId #>\" onclick=\"searchForEpisode('<#= EpisodeId #>'); return false;\"><img src='../../Content/Images/Search.png' alt='Search' title='Search for episode' class='searchImage' /></a>"
-                                                            ).Width(100);
-                                    })
-                    .DetailView(detailView => detailView.ClientTemplate(
-                        "<fieldset>" +
-                        "<div><b>Overview: </b><#= Overview #></div>" +
-                        "</fieldset>"
-                                                    ))
-                    .DataBinding(data => data.Ajax().Select("_AjaxBindingToday", "Upcoming"))
-                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDateTime).Ascending()).Enabled(true))
-                    .ClientEvents(clientEvents =>
-                    {
-                        clientEvents.OnRowDataBound("grid_rowBound");
-                        if (EnviromentProvider.IsProduction)
-                            clientEvents.OnError("grid_onError");
-                    })
-                    .Render();}
-    </div>
-</div>
-<br />
-<div id="tomorrow">
-    <h2>
-        Tomorrow</h2>
-    <div class="grid-container">
-        @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Tomorrow").NoRecordsTemplate(
-                    "No watched shows airing tomorrow")
-                    .TableHtmlAttributes(new { @class = "Grid" })
-                    .Columns(columns =>
-                                 {
-                                     columns.Bound(c => c.SeriesTitle)
-                                         .ClientTemplate("<a href=" +
-                                                         Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                         "><#= SeriesTitle #></a>")
-                                         .Title("Series Name");
-                                     columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
-                                     columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
-                                     columns.Bound(c => c.Title).Title("Episode Title").Width(350);
-                                     columns.Bound(c => c.AirDateTime).Title("Air Time")
-                                         .ClientTemplate("<#= AirTime #>")
-                                         .Width(160);
-                                     columns.Bound(c => c.Status)
-                                            .ClientTemplate("<img src='../../Content/Images/<#= Status #>.png' alt='<#= Status #>' title='<#= Status #>' class='statusImage status-<#= Status #>' />" +
-                                                            "<a href=\"../Episode/Season?episodeId=<#= EpisodeId #>\" onclick=\"searchForEpisode('<#= EpisodeId #>'); return false;\"><img src='../../Content/Images/Search.png' alt='Search' title='Search for episode' class='searchImage' /></a>"
-                                                            ).Width(100);
-                                 })
-                    .DetailView(detailView => detailView.ClientTemplate(
-                        "<fieldset>" +
-                        "<div><b>Overview: </b><#= Overview #></div>" +
-                        "</fieldset>"
-                                                  ))
 
-                    .DataBinding(data => data.Ajax().Select("_AjaxBindingTomorrow", "Upcoming"))
-                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDateTime).Ascending()).Enabled(true))
-                    .ClientEvents(clientEvents =>
-                    {
-                        clientEvents.OnRowDataBound("grid_rowBound");
-                        if (EnviromentProvider.IsProduction)
-                            clientEvents.OnError("grid_onError");
-                    })
-                    .Render();}
-    </div>
-</div>
-<br />
-<div id="week">
-    <h2>
-        Future Forecast</h2>
-    <div class="grid-container">
-        @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Week").NoRecordsTemplate(
-                    "No watched shows airing in the next week...")
-                    .TableHtmlAttributes(new { @class = "Grid" })
-                    .Columns(columns =>
-                                 {
-                                     columns.Bound(c => c.SeriesTitle)
-                                         .ClientTemplate("<a href=" +
-                                                         Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                         "><#= SeriesTitle #></a>")
-                                         .Title("Series Name");
-                                     columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
-                                     columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
-                                     columns.Bound(c => c.Title).Title("Episode Title").Width(350);
-                                     columns.Bound(c => c.AirDateTime).Title("Air Date/Time")
-                                         .ClientTemplate("<#= AirDate #> at <#= AirTime #>")
-                                         .Width(160);
-                                     columns.Bound(c => c.Status)
-                                            .ClientTemplate("<img src='../../Content/Images/<#= Status #>.png' alt='<#= Status #>' title='<#= Status #>' class='statusImage status-<#= Status #>' />" +
-                                                            "<a href=\"../Episode/Season?episodeId=<#= EpisodeId #>\" onclick=\"searchForEpisode('<#= EpisodeId #>'); return false;\"><img src='../../Content/Images/Search.png' alt='Search' title='Search for episode' class='searchImage' /></a>"
-                                                            ).Width(100);
-                                 })
-                    .DetailView(detailView => detailView.ClientTemplate(
-                        "<fieldset>" +
-                        "<div><b>Overview: </b><#= Overview #></div>" +
-                        "</fieldset>"
-                                                  ))
-                    .DataBinding(data => data.Ajax().Select("_AjaxBindingWeek", "Upcoming"))
-                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDateTime).Ascending()).Enabled(true))
-                    .ClientEvents(clientEvents =>
-                    {
-                        clientEvents.OnRowDataBound("grid_rowBound");
-                        if (EnviromentProvider.IsProduction)
-                            clientEvents.OnError("grid_onError");
-                    })
-                    .Render();}
-    </div>
-</div>
+<table class="seriesTable">
+    <colgroup>
+        <col/>
+        <col style="width:90px" />
+        <col style="width:90px" />
+        <col style="width:300px" />
+        <col style="width:160px" />
+        <col style="width:100px" />
+    </colgroup>
+    <tr>
+        <th>Series Title</th>
+        <th>Season #</th>
+        <th>Episode #</th>
+        <th>Episode Title</th>
+        <th>Air Time</th>
+        
+        @*Commands/Status Column*@
+        <th>
+            Status
+        </th>
+    </tr>
+    <tr class="title-row">
+        <td colspan="6">
+            Yesterday
+        </td>
+    </tr>
+    
+    @for (int i = 0; i < Model.Yesterday.Count; i++)
+    {
+        var episode = Model.Yesterday[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("UpcomingEpisode", episode);
+        }
 
-@section Scripts{
-    <script type="text/javascript">
-        function grid_rowBound(e) {
-            highlightRow(e);
+        else
+        {
+            Html.RenderPartial("UpcomingEpisode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
+        }
+    }
+    <tr class="title-row">
+        <td colspan="6">
+            Today
+        </td>
+    </tr>
+    
+    @for (int i = 0; i < Model.Today.Count; i++)
+    {
+        var episode = Model.Today[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("UpcomingEpisode", episode);
         }
-    </script>
+
+        else
+        {
+            Html.RenderPartial("UpcomingEpisode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
+        }
+    }
+    <tr class="title-row">
+        <td colspan="6">
+            Tomorrow
+        </td>
+    
+    @for (int i = 0; i < Model.Tomorrow.Count; i++)
+    {
+        var episode = Model.Tomorrow[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("UpcomingEpisode", episode);
+        }
+
+        else
+        {
+            Html.RenderPartial("UpcomingEpisode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
+        }
+    }
+    <tr class="title-row">
+        <td colspan="6">
+            Future Forecast
+        </td>
+    </tr>
+    
+    @for (int i = 0; i < Model.Week.Count; i++)
+    {
+        var episode = Model.Week[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("UpcomingEpisode", episode);
+        }
+
+        else
+        {
+            Html.RenderPartial("UpcomingEpisode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
+        }
+    }
+</table>
+
+@section Scripts{
+
 }

NzbDrone.Web/Views/Upcoming/UpcomingEpisode.cshtml

@@ -0,0 +1,48 @@
+@using NzbDrone.Core.Model
+@using NzbDrone.Web.Helpers
+@using NzbDrone.Web.Models
+@model UpcomingEpisodeModel
+           
+@{
+    Layout = null;
+}
+
+<tr class='@Model.EpisodeId data-row@(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")'>
+    <td>@Html.ActionLink(Model.SeriesTitle, "Details", "Series", new { seriesId = Model.SeriesId }, null)</td>
+    <td>@Model.SeasonNumber</td>
+    <td>@Model.EpisodeNumber</td>
+    <td>@Model.Title</td>
+    
+    <td>
+        @{ if(Model.AirDateTime >= DateTime.Today.AddDays(-1) && Model.AirDateTime <= DateTime.Today.AddDays(2))
+           {
+               @(Model.AirTime)
+           }
+           else
+           {
+               @(Model.AirDate + " at " + Model.AirTime)
+           }
+        }
+    </td>
+    
+    @{
+        string cellColourClass = String.Empty;
+
+        if (Model.Status == "Missing")
+        {
+            cellColourClass = "episodeMissing";
+        }
+    }
+
+    @*Commands Column*@
+    <td class="@cellColourClass">
+        <img src='../../Content/Images/@(Model.Status).png' alt='@Model.Status' title='@Model.Status' class='statusImage status-@Model.Status' />
+        @Ajax.ImageActionLink("../../Content/Images/Search.png", new { Alt = "Search", Title = "Search for episode", @class = "searchImage" }, "Search", "Episode", new { episodeId = Model.EpisodeId }, null, null)
+    </td>
+</tr>
+
+<tr class='detail-row@(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")'>
+    <td colspan="6">
+        <b>Overview: </b>@Model.Overview
+    </td>
+</tr>