Add settings ui for theme

// FREEBIE

background.html

@@ -413,23 +413,37 @@
       <a class='x close' alt='close settings' href='#'></a>
       <h2>{{ settings }}</h2>
       <hr>
-      <h3>{{ notifications }}</h3>
-      <p>{{ notificationSettingsDialog }}</p>
-      <div>
-        <input type='radio' name='notifications' id='notification-setting-message' value='message'>
-        <label for='notification-setting-message'>{{ nameAndMessage }} </label>
-      </div>
-      <div>
-        <input type='radio' name='notifications' id='notification-setting-name'  value='name'/>
-        <label for='notification-setting-name'>{{ nameOnly }} </label>
-      </div>
-      <div>
-        <input type='radio' name='notifications' id='notification-setting-count' value='count'/>
-        <label for='notification-setting-count'>{{ noNameOrMessage }} </label>
+      <div class='theme-settings'>
+        <h3>Theme</h3>
+        <div>
+          <input type='radio' name='theme' id='theme-setting-android' value='android'>
+          <label for='theme-setting-android'>Android</label>
+        </div>
+        <div>
+          <input type='radio' name='theme' id='theme-setting-ios'  value='ios'/>
+          <label for='theme-setting-ios'>iOS</label>
+        </div>
       </div>
-      <div>
-        <input type='radio' name='notifications' id='notification-setting-off' value='off'/>
-        <label for='notification-setting-off'>{{ disableNotifications }} </label>
+      <hr>
+      <div class='notification-settings'>
+        <h3>{{ notifications }}</h3>
+        <p>{{ notificationSettingsDialog }}</p>
+        <div>
+          <input type='radio' name='notifications' id='notification-setting-message' value='message'>
+          <label for='notification-setting-message'>{{ nameAndMessage }} </label>
+        </div>
+        <div>
+          <input type='radio' name='notifications' id='notification-setting-name'  value='name'/>
+          <label for='notification-setting-name'>{{ nameOnly }} </label>
+        </div>
+        <div>
+          <input type='radio' name='notifications' id='notification-setting-count' value='count'/>
+          <label for='notification-setting-count'>{{ noNameOrMessage }} </label>
+        </div>
+        <div>
+          <input type='radio' name='notifications' id='notification-setting-off' value='off'/>
+          <label for='notification-setting-off'>{{ disableNotifications }} </label>
+        </div>
       </div>
     </div>
   </script>

js/views/inbox_view.js

@@ -89,9 +89,15 @@
     Whisper.InboxView = Whisper.View.extend({
         templateName: 'two-column',
         className: 'inbox',
+        applyTheme: function() {
+            var theme = storage.get('theme-setting') || 'android';
+            this.$el.removeClass('ios')
+                    .removeClass('android')
+                    .addClass(theme);
+        },
         initialize: function (options) {
             this.render();
-            this.$el.addClass('android'); // theme
+            this.applyTheme();
             new Whisper.FontSizeView({ el: this.el });
             this.conversation_stack = new Whisper.ConversationStack({
                 el: this.$('.conversation-stack'),
@@ -175,9 +181,9 @@
             chrome.runtime.reload();
         },
         showSettings: function() {
-            var view = new Whisper.SettingsView().render();
-            view.update();
+            var view = new Whisper.SettingsView();
             view.$el.appendTo(this.el);
+            view.$el.on('change-theme', this.applyTheme.bind(this));
         },
         filterContacts: function(e) {
             this.searchView.filterContacts(e);

js/views/settings_view.js

@@ -5,29 +5,49 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
-    Whisper.SettingsView = Whisper.View.extend({
-        className: 'settings modal',
-        templateName: 'settings',
+    var RadioButtonGroupView = Whisper.View.extend({
+        initialize: function(options) {
+            this.name = options.name;
+            this.defaultValue = options.defaultValue;
+            this.populate();
+        },
         events: {
-            'change': 'change',
-            'click .close': 'remove'
+            'change': 'change'
         },
         change: function(e) {
             var value = this.$(e.target).val();
-            storage.put('notification-setting', value);
-            console.log('notification setting changed to', value);
+            storage.put(this.name, value);
+            console.log(this.name, 'changed to', value);
+            this.$el.trigger('change-theme');
         },
-        update: function() {
-            var setting = storage.get('notification-setting');
-            if (!setting) {
-                setting = 'message';
-            }
-            this.$('#notification-setting-' + setting).attr('checked','checked');
+        populate: function() {
+            var value = storage.get(this.name, this.defaultValue);
+            this.$('#' + this.name + '-' + value).attr('checked', 'checked');
+        },
+    });
+    Whisper.SettingsView = Whisper.View.extend({
+        className: 'settings modal',
+        templateName: 'settings',
+        initialize: function() {
+            this.render();
+            new RadioButtonGroupView({
+                el: this.$('.notification-settings'),
+                defaultValue: 'message',
+                name: 'notification-setting'
+            });
+            new RadioButtonGroupView({
+                el: this.$('.theme-settings'),
+                defaultValue: 'message',
+                name: 'theme-setting'
+            });
             if (textsecure.storage.user.getDeviceId() != '1') {
                 var syncView = new SyncView().render();
                 this.$('.content').append(syncView.el);
             }
         },
+        events: {
+            'click .close': 'remove'
+        },
         render_attributes: function() {
             return {
               notifications: i18n('notifications'),