added episode detail modal

summary tab is working.

Gruntfile.js

@@ -91,8 +91,8 @@ module.exports = function (grunt) {
 
         copy: {
             index  : {
-                src : 'UI/index.html',
+                src : 'UI/**/index.html',
-                dest: '_output/UI/index.html'
+                dest: '_output/'
             },
             scripts: {
                 src : 'UI/**/*.js',
@@ -114,7 +114,7 @@ module.exports = function (grunt) {
 
         watch: {
             bootstrap  : {
-                files: ['<%= less.bootstrap.src %>', 'UI/**/FontAwesome/**'],
+                files: ['UI/**/Bootstrap/**', 'UI/**/FontAwesome/**'],
                 tasks: ['less:bootstrap']
             },
             generalLess: {

UI/Content/Bootstrap/modals.less

@@ -26,8 +26,8 @@
   top: 10%;
   left: 50%;
   z-index: @zindexModal;
-  width: 560px;
+  width: 750px;
-  margin-left: -280px;
+  margin-left: -375px;
   background-color: @white;
   border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);

UI/Episode/Layout.js

@@ -1,8 +1,60 @@
 "use strict";
-define(['app'], function () {
+define(['app', 'Episode/Summary/View'], function () {
 
-    NzbDrone.Episode.Layout = Backbone.Marionette.ItemView.extend({
+    NzbDrone.Episode.Layout = Backbone.Marionette.Layout.extend({
-        template: 'Episode/Search/LayoutTemplate'
+        template: 'Episode/LayoutTemplate',
+
+
+        regions: {
+            summary : '#episode-summary',
+            activity: '#episode-activity',
+            search  : '#episode-search'
+        },
+
+        ui: {
+            summary : '.x-episode-summary',
+            activity: '.x-episode-activity',
+            search  : '.x-episode-search'
+        },
+
+        events: {
+
+            'click .x-episode-summary' : 'showSummary',
+            'click .x-episode-activity': 'showActivity',
+            'click .x-episode-search'  : 'showSearch'
+        },
+
+
+        onShow: function () {
+            this.showSummary();
+        },
+
+
+        showSummary: function (e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            this.ui.summary.tab('show');
+            this.summary.show(new NzbDrone.Episode.Summary.View({model: this.model}));
+
+        },
+
+        showActivity: function (e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            this.ui.activity.tab('show');
+        },
+
+        showSearch: function (e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            this.ui.search.tab('show');
+        }
 
     });
 

UI/Episode/LayoutTemplate.html

@@ -0,0 +1,21 @@
+<div class="episode-detail-modal">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3>{{title}}</h3>
+    </div>
+    <div class="modal-body">
+        <ul class="nav nav-tabs" id="myTab">
+            <li><a href="#episode-summary" class="x-episode-summary">Summary</a></li>
+            <li><a href="#episode-activity" class="x-episode-activity">Activity</a></li>
+            <li><a href="#episode-search" class="x-episode-search">Search Indexers</a></li>
+        </ul>
+        <div class="tab-content">
+            <div class="tab-pane" id="episode-summary"/>
+            <div class="tab-pane" id="episode-activity"/>
+            <div class="tab-pane" id="episode-search"/>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="btn" data-dismiss="modal">close</button>
+    </div>
+</div>

UI/Episode/Search/LayoutTemplate.html

@@ -1,12 +1 @@
-<div class="modal-header">
+
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>Delete: {{title}}</h3>
-</div>
-<div class="modal-body">
-    <h1>Searching for episodes!!!</h1>
-</div>
-<div class="modal-footer">
-    <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-danger x-confirm-delete">delete</button>
-</div>
-

UI/Episode/Summary/View.js

@@ -0,0 +1,8 @@
+"use strict";
+define(['app'], function () {
+
+    NzbDrone.Episode.Summary.View = Backbone.Marionette.ItemView.extend({
+        template: 'Episode/Summary/ViewTemplate'
+    });
+
+});

UI/Episode/Summary/ViewTemplate.html

@@ -0,0 +1,29 @@
+<div class="episode-overview">
+    {{overview}}
+</div>
+<div class="episode-file-info">
+    {{#if episodeFile}}
+    {{#with episodeFile}}
+    <table class="table table-bordered">
+        <thead>
+        <tr>
+            <th>Path</th>
+            <th>Size</th>
+            <th>Quality</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>{{path}}</td>
+            <td>{{size}}</td>
+            <td>{{quality.quality.name}}</td>
+        </tr>
+        </tbody>
+    </table>
+    {{/with}}
+    {{else}}
+    <p class="text-warning">
+        No file available for this episode.
+    </p>
+    {{/if}}
+</div>

UI/Index.html

@@ -19,7 +19,7 @@
     <link href="/content/menu.css" rel='stylesheet' type='text/css'/>
     <link href="/content/form.css" rel='stylesheet' type='text/css'/>
     <link href="/series/series.css" rel='stylesheet' type='text/css'/>
-
+    <link href="/series/details.css" rel='stylesheet' type='text/css'/>
     <link href="/content/base.css" rel='stylesheet' type='text/css'/>
 </head>
 <body>

UI/Series/Details/EpisodeStatusCell.js

@@ -5,9 +5,6 @@ define(['app', 'Episode/Layout'], function () {
 
         className: 'episode-status-cell',
 
-        events: {
-            'click': 'showDetails'
-        },
         render: function () {
             this.$el.empty();
 
@@ -32,11 +29,6 @@ define(['app', 'Episode/Layout'], function () {
             }
 
             return this;
-        },
-
-        showDetails: function () {
-            var view = new NzbDrone.Episode.Layout({ model: this.model });
-            NzbDrone.modalRegion.show(view);
         }
     });
 });

UI/Series/Details/EpisodeTitleCell.js

@@ -0,0 +1,17 @@
+"use strict";
+
+define(['app', 'Episode/Layout'], function () {
+    NzbDrone.Series.Details.EpisodeTitleCell = Backgrid.StringCell.extend({
+
+        className: 'episode-title-cell',
+
+        events: {
+            'click': 'showDetails'
+        },
+
+        showDetails: function () {
+            var view = new NzbDrone.Episode.Layout({ model: this.model });
+            NzbDrone.modalRegion.show(view);
+        }
+    });
+});

UI/Series/Details/SeasonLayout.js

@@ -1,5 +1,5 @@
 'use strict';
-define(['app', 'Series/Details/EpisodeStatusCell'], function () {
+define(['app', 'Series/Details/EpisodeStatusCell', 'Series/Details/EpisodeTitleCell'], function () {
     NzbDrone.Series.Details.SeasonLayout = Backbone.Marionette.Layout.extend({
         template: 'Series/Details/SeasonLayoutTemplate',
 
@@ -20,7 +20,7 @@ define(['app', 'Series/Details/EpisodeStatusCell'], function () {
             {
                 name : 'title',
                 label: 'Title',
-                cell : 'string'
+                cell : NzbDrone.Series.Details.EpisodeTitleCell
             },
             {
                 name : 'airDate',

UI/Series/details.less

@@ -0,0 +1,30 @@
+.series-season {
+  .episode-number-cell {
+    width: 20px;
+  }
+  .episode-air-date-cell {
+    width: 150px;
+  }
+
+  .episode-status-cell {
+    width: 100px;
+  }
+
+  .episode-title-cell {
+    cursor: pointer;
+  }
+}
+
+.episode-detail-modal {
+
+  .episode-overview {
+
+    font-style: italic;
+  }
+
+  .episode-file-info {
+
+    margin-top: 30px;
+    font-size: 12px;
+  }
+}

UI/Series/series.less

@@ -107,16 +107,3 @@
     }
   }
 }
-
-.series-season {
-  .episode-number-cell {
-    width: 20px;
-  }
-  .episode-air-date-cell {
-    width: 150px;
-  }
-
-  .episode-status-cell {
-    width: 100px;
-  }
-}

UI/app.js

@@ -50,7 +50,9 @@ define('app', ['shared/modal/region'], function (ModalRegion) {
     };
 
     window.NzbDrone.Episode = {
-        Search: {}
+        Search  : {},
+        Summary : {},
+        Activity: {}
     };