Added cheap lazy templates + logic to switch between setting controllers

js/controller/settings/ApplicationSettingsController.js

@@ -0,0 +1,38 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+  
+  ns.ApplicationSettingsController = function () {};
+
+  /**
+   * @public
+   */
+  ns.ApplicationSettingsController.prototype.init = function() {
+    // Highlight selected background picker:
+    var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+    $('#background-picker-wrapper')
+      .find('.background-picker[data-background-class=' + backgroundClass + ']')
+      .addClass('selected');
+
+    // Initial state for grid display:
+    var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
+    $('#show-grid').prop('checked', show_grid);
+
+    // Handle grid display changes:
+    $('#show-grid').change($.proxy(function(evt) {
+      var checked = $('#show-grid').prop('checked');
+      pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
+    }, this));
+
+    // Handle canvas background changes:
+    $('#background-picker-wrapper').click(function(evt) {
+      var target = $(evt.target).closest('.background-picker');
+      if (target.length) {
+        var backgroundClass = target.data('background-class');
+        pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
+
+        $('.background-picker').removeClass('selected');
+        target.addClass('selected');
+      }
+    });
+  };
+})();