episodes for series are now fetched using a single call and broken into seasons.

UI/Series/Details/SeasonCollectionView.js

@@ -0,0 +1,24 @@
+"use strict";
+define(['app',  'Series/Details/SeasonLayout', 'Series/SeasonCollection', 'Series/EpisodeCollection'], function () {
+    NzbDrone.Series.Details.SeasonCollectionView = Backbone.Marionette.CollectionView.extend({
+
+        itemView         : NzbDrone.Series.Details.SeasonLayout,
+
+        initialize: function (options) {
+
+            if (!options.episodeCollection) {
+                throw 'episodeCollection is needed';
+            }
+
+            this.episodeCollection = options.episodeCollection;
+
+        },
+
+        itemViewOptions: function () {
+            return {
+                episodeCollection: this.episodeCollection
+            };
+        }
+
+    });
+});

UI/Series/Details/SeasonLayout.js

@@ -36,23 +36,22 @@ define(['app', 'Series/Details/EpisodeStatusCell', 'Series/Details/EpisodeTitleC
             }
         ],
 
-        initialize: function () {
-            this.episodeCollection = new NzbDrone.Series.EpisodeCollection();
-            this.episodeCollection.fetch({data: {
-                seriesId    : this.model.get('seriesId'),
-                seasonNumber: this.model.get('seasonNumber')
-            }});
+        initialize: function (options) {
+
+            if (!options.episodeCollection) {
+                throw 'episodeCollection is needed';
+            }
+
+            this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
         },
 
         onShow: function () {
-
             this.episodeGrid.show(new Backgrid.Grid(
                 {
                     columns   : this.columns,
                     collection: this.episodeCollection,
                     className : 'table table-hover'
                 }));
-
         }
     });
 });

UI/Series/Details/SeriesDetailsLayout.js

@@ -0,0 +1,36 @@
+"use strict";
+define(['app', 'Series/Details/SeasonCollectionView','Shared/LoadingView'], function () {
+        NzbDrone.Series.Details.SeriesDetailsLayout = Backbone.Marionette.Layout.extend({
+
+            itemViewContainer: '.x-series-seasons',
+            template         : 'Series/Details/SeriesDetailsTemplate',
+
+            regions: {
+                seasons: '#seasons'
+            },
+
+            onShow: function () {
+
+                var self = this;
+
+                this.seasons.show(new NzbDrone.Shared.LoadingView());
+
+                this.seasonCollection = new NzbDrone.Series.SeasonCollection();
+                this.episodeCollection = new NzbDrone.Series.EpisodeCollection();
+
+                $.when(this.episodeCollection.fetch({data: { seriesId: this.model.id }}), this.seasonCollection.fetch({data: { seriesId: this.model.id }}))
+                    .done(function () {
+                        self.seasons.show(new NzbDrone.Series.Details.SeasonCollectionView({
+                            collection       : self.seasonCollection,
+                            episodeCollection: self.episodeCollection
+                        }));
+                    }
+                );
+            },
+
+            onClose: function () {
+                $('.backstretch').remove();
+            }
+        });
+    }
+);

UI/Series/Details/SeriesDetailsTemplate.html

@@ -1,4 +1,4 @@
-<div class="row series-page-header">
+<div class="row series-page-header series-detail-summary">
     <div class="span2">
         <a href="{{traktUrl}}" target="_blank">
             <img class="series-poster img-polaroid" src="{{poster}}">
@@ -18,5 +18,4 @@
         </div>
     </div>
 </div>
-
-<div class="x-series-seasons"></div>
+<div id="seasons"></div>

UI/Series/Details/SeriesDetailsView.js

@@ -1,20 +0,0 @@
-"use strict";
-define(['app', 'Quality/QualityProfileCollection', 'Series/Details/SeasonLayout', 'Series/SeasonCollection'], function () {
-    NzbDrone.Series.Details.SeriesDetailsView = Backbone.Marionette.CompositeView.extend({
-
-        itemView         : NzbDrone.Series.Details.SeasonLayout,
-        itemViewContainer: '.x-series-seasons',
-        template         : 'Series/Details/SeriesDetailsTemplate',
-
-        initialize: function () {
-            this.collection = new NzbDrone.Series.SeasonCollection();
-            this.collection.fetch({data: { seriesId: this.model.get('id') }});
-
-            //$.backstretch(this.model.get('fanArt'));
-        },
-
-        onClose: function(){
-            $('.backstretch').remove();
-        }
-    });
-});

UI/Series/EpisodeCollection.js

@@ -2,6 +2,14 @@
 define(['app', 'Series/EpisodeModel'], function () {
     NzbDrone.Series.EpisodeCollection = Backbone.Collection.extend({
         url  : NzbDrone.Constants.ApiRoot + '/episodes',
-        model: NzbDrone.Series.EpisodeModel
+        model: NzbDrone.Series.EpisodeModel,
+
+        bySeason: function (season) {
+            var filtered = this.filter(function (episode) {
+                return episode.get("seasonNumber") === season;
+            });
+
+            return new NzbDrone.Series.EpisodeCollection(filtered);
+        }
     });
 });

UI/Series/series.less

@@ -111,4 +111,9 @@
       display: none;
     }
   }
-}
+
+}
+
+.series-detail-summary {
+  margin-bottom: 50px;
+}