diff --git a/js/controller/PaletteController.js b/js/controller/PaletteController.js
index 8460e398..816f25d5 100644
--- a/js/controller/PaletteController.js
+++ b/js/controller/PaletteController.js
@@ -1,112 +1,113 @@
-/*
- * @provide pskl.Palette
- *
- * @require Constants
- * @require Events
- */
-$.namespace("pskl");
+(function () {
+  var ns = $.namespace("pskl.controller");
 
-pskl.Palette = (function() {
-  
-  var paletteRoot,
-    paletteColors = [];
+  ns.PaletteController = function () {
+    this.paletteRoot = null;
+    this.paletteColors = [];
+  };
 
   /**
    * @private
    */
-   var onPickerChange_ = function(evt, isPrimary) {
-        var inputPicker = $(evt.target);
-        $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
-   };
+  ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
+    var inputPicker = $(evt.target);
+    $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
+  };
 
    /**
-    * @private
-    */
-   var createPalette_ = function (colors) {
+   * @private
+   */
+  ns.PaletteController.prototype.createPalette_ = function (colors) {
     // Always adding transparent color
-    paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
+    this.paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
     for(var color in colors) {
       if(color != Constants.TRANSPARENT_COLOR) {
-        addColorToPalette_(color);
+        this.addColorToPalette_(color);
       }
     }
-   };
+  };
 
-   /**
-    * @private
-    */
-   var addColorToPalette_ = function (color) {
-      if (paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
-        var colorEl = document.createElement("li");    
-        colorEl.className = "palette-color";
-        colorEl.setAttribute("data-color", color);
-        colorEl.setAttribute("title", color);
-        colorEl.style.background = color;
-        paletteRoot[0].appendChild(colorEl);
-        paletteColors.push(color);
-      }
-    };
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.addColorToPalette_ = function (color) {
+    if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
+      var colorEl = document.createElement("li");    
+      colorEl.className = "palette-color";
+      colorEl.setAttribute("data-color", color);
+      colorEl.setAttribute("title", color);
+      colorEl.style.background = color;
+      this.paletteRoot.append(colorEl);
+      this.paletteColors.push(color);
+    }
+  };
 
-    /**
-     * @private
-     */
-    var onPaletteColorClick_ = function (event) {
-      var selectedColor = $(event.target).data("color");
-      if (event.which == 1) { // left button 
-        updateColorPicker(selectedColor, $('#color-picker'));
-        $.publish(Events.COLOR_SELECTED, [selectedColor, true]);
-      } else if (event.which == 3) { // right button
-        updateColorPicker(selectedColor, $('#secondary-color-picker'));
-        $.publish(Events.COLOR_SELECTED, [selectedColor, false]);
-      }
-    };
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
+    var selectedColor = $(event.target).data("color");
+    if (event.which == 1) { // left button 
+      this.updateColorPicker_(selectedColor, $('#color-picker'));
+      $.publish(Events.COLOR_SELECTED, [selectedColor, true]);
+    } else if (event.which == 3) { // right button
+      this.updateColorPicker_(selectedColor, $('#secondary-color-picker'));
+      $.publish(Events.COLOR_SELECTED, [selectedColor, false]);
+    }
+  };
 
-    var updateColorPicker = function (color, colorPicker) {
-      if (color == Constants.TRANSPARENT_COLOR) {
-        // We can set the current palette color to transparent.
-        // You can then combine this transparent color with an advanced
-        // tool for customized deletions. 
-        // Eg: bucket + transparent: Delete a colored area
-        //     Stroke + transparent: hollow out the equivalent of a stroke
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
+    if (color == Constants.TRANSPARENT_COLOR) {
+      // We can set the current palette color to transparent.
+      // You can then combine this transparent color with an advanced
+      // tool for customized deletions. 
+      // Eg: bucket + transparent: Delete a colored area
+      //     Stroke + transparent: hollow out the equivalent of a stroke
 
-        // The colorpicker can't be set to a transparent state.
-        // We set its background to white and insert the
-        // string "TRANSPARENT" to mimic this state:
-        colorPicker[0].color.fromString("#fff");
-        colorPicker.val(Constants.TRANSPARENT_COLOR);
-      } else {
-        colorPicker[0].color.fromString(color);
-      }
-    };
+      // The colorpicker can't be set to a transparent state.
+      // We set its background to white and insert the
+      // string "TRANSPARENT" to mimic this state:
+      colorPicker[0].color.fromString("#fff");
+      colorPicker.val(Constants.TRANSPARENT_COLOR);
+    } else {
+      colorPicker[0].color.fromString(color);
+    }
+  };
 
-  return {
-    init: function(framesheet) {
+  /**
+   * @public
+   */
+  ns.PaletteController.prototype.init = function(framesheet) {
       
-      paletteRoot = $("#palette");
+    this.paletteRoot = $("#palette");
+    this.framesheet = framesheet;
 
-      // Initialize palette:
-      createPalette_(framesheet.getUsedColors());
+    // Initialize palette:
+    this.createPalette_(this.framesheet.getUsedColors());
 
-          $.subscribe(Events.FRAMESHEET_RESET, function(evt) {
-            createPalette_(framesheet.getUsedColors());
-          });
+    $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
+      this.createPalette_(this.framesheet.getUsedColors());
+    }, this));
 
-          paletteRoot.mouseup(onPaletteColorClick_);
-          $.subscribe(Events.COLOR_SELECTED, function(evt, color) {
-            addColorToPalette_(color);
-          });
+    this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
+    
+    $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) {
+      this.addColorToPalette_(color);
+    }, this));
 
-          // Initialize colorpicker:
-          var colorPicker = $('#color-picker');
-          colorPicker.val(Constants.DEFAULT_PEN_COLOR);
-          colorPicker.change({isPrimary : true}, onPickerChange_);
+    // Initialize colorpickers:
+    var colorPicker = $('#color-picker');
+    colorPicker.val(Constants.DEFAULT_PEN_COLOR);
+    colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
 
 
-          var secondaryColorPicker = $('#secondary-color-picker');
-          secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
-          secondaryColorPicker.change({isPrimary : false}, onPickerChange_);
+    var secondaryColorPicker = $('#secondary-color-picker');
+    secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
+    secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
 
-    }
   };
 })();
 
diff --git a/js/piskel.js b/js/piskel.js
index e98b80c7..968fd41a 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -71,7 +71,7 @@ $.namespace("pskl");
 
       this.KeyboardEventService = new pskl.service.KeyboardEventService();
       this.KeyboardEventService.init();
-      
+
       pskl.NotificationService.init();
       this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
       this.localStorageService.init();
@@ -149,7 +149,8 @@ $.namespace("pskl");
       var toolController = new pskl.controller.ToolController();
       toolController.init();
       
-      pskl.Palette.init(frameSheet);
+      var paletteController = new pskl.controller.PaletteController();
+      paletteController.init(frameSheet);
     },
 
     getFramesheetIdFromUrl : function() {