shared toolbar radio button style is working. just need to store state.

UI/Shared/Toolbar/ButtonCollection.js

@@ -0,0 +1,7 @@
+"use strict";
+define(['app', 'Shared/Toolbar/ButtonModel'], function () {
+    NzbDrone.Shared.Toolbar.ButtonCollection = Backbone.Collection.extend({
+        model: NzbDrone.Shared.Toolbar.ButtonModel
+    });
+});
+

UI/Shared/Toolbar/ButtonGroupView.js

@@ -1,11 +0,0 @@
-"use strict";
-define(['app', 'Shared/Toolbar/CommandView'], function () {
-    NzbDrone.Shared.Toolbar.ButtonGroupView = Backbone.Marionette.CollectionView.extend({
-        className: 'btn-group',
-        itemView : NzbDrone.Shared.Toolbar.CommandView
-    });
-});
-
-
-
-

UI/Shared/Toolbar/ButtonModel.js

@@ -0,0 +1,17 @@
+"use strict";
+define(['app'], function () {
+
+    NzbDrone.Shared.Toolbar.ActionTypes =
+    {
+        RouteTrigger: 'RouteTrigger',
+        CallBack    : 'CallBack'
+    };
+
+    NzbDrone.Shared.Toolbar.ButtonModel = Backbone.Model.extend({
+        defaults: {
+            'target' : '/nzbdrone/route',
+            'title'  : '',
+            'active' : false,
+            'tooltip': undefined        }
+    });
+});

UI/Shared/Toolbar/CommandCollection.js

@@ -1,7 +0,0 @@
-"use strict";
-define(['app', 'Shared/Toolbar/CommandModel'], function () {
-    NzbDrone.Shared.Toolbar.CommandCollection = Backbone.Collection.extend({
-        model: NzbDrone.Shared.Toolbar.CommandModel
-    });
-});
-

UI/Shared/Toolbar/CommandModel.js

@@ -1,17 +0,0 @@
-"use strict";
-define(['app'], function () {
-
-    NzbDrone.Shared.Toolbar.CommandTypes =
-    {
-        RouteTrigger: 'RouteTrigger'
-    };
-
-    NzbDrone.Shared.Toolbar.CommandModel = Backbone.Model.extend({
-        defaults: {
-            'target'   : '/nzbdrone/route',
-            'title'    : 'Title Goes Here',
-            'alignment': 'left',
-            'tooltip'  : undefined
-        }
-    });
-});

UI/Shared/Toolbar/CommandView.js

@@ -1,21 +0,0 @@
-"use strict";
-define(['app'], function () {
-
-    NzbDrone.Shared.Toolbar.CommandView = Backbone.Marionette.ItemView.extend({
-        template : 'Shared/Toolbar/CommandTemplate',
-        className: 'btn',
-
-        events: {
-            'click': 'onClick'
-        },
-
-        onClick: function () {
-            window.alert('click');
-        }
-
-    });
-});
-
-
-
-

UI/Shared/Toolbar/Radio/RadioButtonCollectionView.js

@@ -0,0 +1,34 @@
+"use strict";
+define(['app', 'Shared/Toolbar/Radio/RadioButtonView', 'Config'], function () {
+    NzbDrone.Shared.Toolbar.RadioButtonCollectionView = Backbone.Marionette.CollectionView.extend({
+        className: 'btn-group',
+        itemView : NzbDrone.Shared.Toolbar.RadioButtonView,
+
+        attributes: {
+            'data-toggle': 'buttons-radio'
+        },
+
+        initialize: function (options) {
+            this.menu = options.menu;
+
+            if (this.menu.storeState) {
+                this.setActive();
+            }
+        },
+
+        setActive: function () {
+            var storedKey = NzbDrone.Config.GetValue(this.menu.menuKey, this.menu.defaultAction);
+
+            this.collection.each(function (model) {
+                if (model.get('key').toLocaleLowerCase() === storedKey.toLowerCase()) {
+                    model.set('active', true);
+                }
+                else {
+                    model.set('active, false');
+                }
+            });
+        }
+    });
+});
+
+

UI/Shared/Toolbar/Radio/RadioButtonView.js

@@ -0,0 +1,38 @@
+"use strict";
+define(['app'], function () {
+
+    NzbDrone.Shared.Toolbar.RadioButtonView = Backbone.Marionette.ItemView.extend({
+        template : 'Shared/Toolbar/ButtonTemplate',
+        className: 'btn',
+
+        events: {
+            'click': 'invokeCallback'
+        },
+
+
+        onRender: function () {
+            if (this.model.get('active')) {
+                this.$el.addClass('active');
+                this.invokeCallback();
+            }
+        },
+
+        invokeCallback: function () {
+
+            if (!this.model.ownerContext) {
+                throw 'ownerContext must be set.';
+            }
+
+
+            var callback = this.model.get('callback');
+            if (callback) {
+                callback.call(this.model.ownerContext);
+            }
+        }
+
+    });
+});
+
+
+
+

UI/Shared/Toolbar/ToolbarLayout.js

@@ -1,5 +1,5 @@
 "use strict";
-define(['app', 'Shared/Toolbar/ButtonGroupView','Shared/Toolbar/CommandCollection'], function () {
+define(['app', 'Shared/Toolbar/Radio/RadioButtonCollectionView', 'Shared/Toolbar/ButtonCollection'], function () {
     NzbDrone.Shared.Toolbar.ToolbarLayout = Backbone.Marionette.Layout.extend({
         template: 'Shared/Toolbar/ToolbarLayoutTemplate',
 
@@ -11,10 +11,22 @@ define(['app', 'Shared/Toolbar/ButtonGroupView','Shared/Toolbar/CommandCollectio
         },
 
         initialize: function (options) {
+
+            if (!options) {
+                throw 'options needs to be passed';
+            }
+
+            if (!options.context) {
+                throw 'context needs to be passed';
+            }
+
             this.left = options.left;
             this.right = options.right;
+            this.toolbarContext = options.context;
+
         },
 
+
         onShow: function () {
             if (this.left) {
                 _.each(this.left, this._showToolbarLeft, this);
@@ -25,11 +37,42 @@ define(['app', 'Shared/Toolbar/ButtonGroupView','Shared/Toolbar/CommandCollectio
         },
 
         _showToolbarLeft: function (element, index) {
-            this['left_' + (index + 1).toString()].show(new NzbDrone.Shared.Toolbar.ButtonGroupView({collection: element}));
+            this._showToolbar(element, index, 'left');
         },
 
         _showToolbarRight: function (element, index) {
-            this['right_' + (index + 1).toString()].show(new NzbDrone.Shared.Toolbar.ButtonGroupView({collection: element}));
+            this._showToolbar(element, index, 'right');
+        },
+
+
+        _showToolbar: function (buttonGroup, index, position) {
+
+            var groupCollection = new NzbDrone.Shared.Toolbar.ButtonCollection();
+
+            _.each(buttonGroup.items, function (button) {
+
+                if (buttonGroup.storeState && !button.key) {
+                    throw 'must provide key for all buttons when storSstate is enabled';
+                }
+
+                var model = new NzbDrone.Shared.Toolbar.ButtonModel(button);
+                model.set('menuKey', buttonGroup.menuKey);
+                model.ownerContext = this.toolbarContext;
+                groupCollection.add(model);
+
+            }, this);
+
+            var buttonGroupView;
+
+            if (buttonGroup.type === 'radio') {
+                buttonGroupView = new NzbDrone.Shared.Toolbar.RadioButtonCollectionView(
+                    {
+                        collection: groupCollection,
+                        menu      : buttonGroup
+                    });
+            }
+
+            this[position + '_' + (index + 1).toString()].show(buttonGroupView);
         }
     });
 

UI/Shared/Toolbar/ToolbarLayoutTemplate.html

@@ -1,8 +1,8 @@
 <div class="pull-left page-toolbar">
-    <div class="x-toolbar-left-1 btn-group"/>
-    <div class="x-toolbar-left-2 btn-group"/>
+    <div class="x-toolbar-left-1"/>
+    <div class="x-toolbar-left-2"/>
 </div>
 <div class="pull-right page-toolbar">
-    <div class="x-toolbar-right-1 btn-group"/>
-    <div class="x-toolbar-right-2 btn-group"/>
+    <div class="x-toolbar-right-1"/>
+    <div class="x-toolbar-right-2"/>
 </div>