Toggle episode monitored status from episode details

UI/Episode/Layout.js

@@ -18,19 +18,22 @@ define(
             ui: {
                 summary  : '.x-episode-summary',
                 activity : '.x-episode-activity',
-                search  : '.x-episode-search'
+                search   : '.x-episode-search',
+                monitored: '.x-episode-monitored'
             },
 
             events: {
 
                 'click .x-episode-summary'  : '_showSummary',
                 'click .x-episode-activity' : '_showActivity',
-                'click .x-episode-search'  : '_showSearch'
+                'click .x-episode-search'   : '_showSearch',
+                'click .x-episode-monitored': '_toggleMonitored'
             },
 
             onShow: function () {
                 this._showSummary();
                 this.searchLayout = new SearchLayout({ model: this.model });
+                this._setMonitoredState();
             },
 
 
@@ -59,6 +62,35 @@ define(
 
                 this.ui.search.tab('show');
                 this.search.show(this.searchLayout);
+            },
+
+            _toggleMonitored: function () {
+                var self = this;
+                var name = 'monitored';
+                this.model.set(name, !this.model.get(name), { silent: true });
+
+                this.ui.monitored.addClass('icon-spinner icon-spin');
+
+                var promise = this.model.save();
+
+                promise.always(function () {
+                    self._setMonitoredState();
+                });
+            },
+
+            _setMonitoredState: function () {
+                var monitored = this.model.get('monitored');
+
+                this.ui.monitored.removeClass('icon-spin icon-spinner');
+
+                if (this.model.get('monitored')) {
+                    this.ui.monitored.addClass('icon-bookmark');
+                    this.ui.monitored.removeClass('icon-bookmark-empty');
+                }
+                else {
+                    this.ui.monitored.addClass('icon-bookmark-empty');
+                    this.ui.monitored.removeClass('icon-bookmark');
+                }
             }
 
         });

UI/Episode/LayoutTemplate.html

@@ -2,11 +2,16 @@
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
+        <h3>
+            <i class="icon-bookmark x-episode-monitored" title="Toggle monitored status" />
             {{#if episodeTitle}}
-            <h3>{{episodeTitle}} - {{EpisodeNumber}}</h3>
+                {{episodeTitle}}
             {{else}}
-            <h3>{{title}} - {{EpisodeNumber}}</h3>
+                {{title}}
             {{/if}}
+            -  {{EpisodeNumber}}
+        </h3>
+
     </div>
     <div class="modal-body">
         <ul class="nav nav-tabs" id="myTab">

UI/Series/Details/SeasonLayout.js

@@ -72,6 +72,10 @@ define(
                 _.each(this.episodeCollection.models, function (episode) {
                     episode.set({ hideSeriesLink: true, series: options.series });
                 });
+
+                this.episodeCollection.on('sync', function () {
+                    this.render();
+                }, this);
             },
 
             onRender: function () {
@@ -137,8 +141,6 @@ define(
             },
 
             _setSeasonMonitoredState: function () {
-                var monitored = this.model.get('monitored');
-
                 this.ui.seasonMonitored.removeClass('icon-spinner icon-spin');
 
                 if (this.model.get('monitored')) {

UI/Series/Details/SeriesDetailsLayout.js

@@ -103,7 +103,7 @@ define(
             _setMonitoredState: function () {
                 var monitored = this.model.get('monitored');
 
-                this.ui.monitored.removeClass('icon-spin');
+                this.ui.monitored.removeClass('icon-spin icon-spinner');
 
                 if (this.model.get('monitored')) {
                     this.ui.monitored.addClass('icon-bookmark');