From 324c2b464e2a8c9f28a9e92bca949e6fdf14cb5c Mon Sep 17 00:00:00 2001
From: Vince <grosbouddha@gmail.com>
Date: Sun, 16 Sep 2012 16:16:09 +0200
Subject: [PATCH 1/2] Fix broken palette when swithcing tiles

---
 js/Events.js                       | 2 ++
 js/controller/PaletteController.js | 2 +-
 js/model/FrameSheet.js             | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/js/Events.js b/js/Events.js
index 7afb8486..add57b82 100644
--- a/js/Events.js
+++ b/js/Events.js
@@ -29,6 +29,8 @@ Events = {
 
     GRID_DISPLAY_STATE_CHANGED: "GRID_DISPLAY_STATE_CHANGED",
 
+    FRAMESHEET_RELOADED: "FRAMESHEET_RELOADED",
+    
     /**
      * The framesheet was reseted and is now probably drastically different.
      * Number of frames, content of frames, color used for the palette may have changed.
diff --git a/js/controller/PaletteController.js b/js/controller/PaletteController.js
index 816f25d5..13302b02 100644
--- a/js/controller/PaletteController.js
+++ b/js/controller/PaletteController.js
@@ -88,7 +88,7 @@
     // Initialize palette:
     this.createPalette_(this.framesheet.getUsedColors());
 
-    $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
+    $.subscribe(Events.FRAMESHEET_RELOADED, $.proxy(function(evt) {
       this.createPalette_(this.framesheet.getUsedColors());
     }, this));
 
diff --git a/js/model/FrameSheet.js b/js/model/FrameSheet.js
index 721c63b0..691870a1 100644
--- a/js/model/FrameSheet.js
+++ b/js/model/FrameSheet.js
@@ -68,6 +68,7 @@
 		 		var frameCfg = frameConfigurations[i];
 		 		this.addFrame(new ns.Frame(frameCfg));
 		 	}
+		 	$.publish(Events.FRAMESHEET_RELOADED);
 		 	$.publish(Events.FRAMESHEET_RESET);
 		} catch (e) {
 	 		throw "Could not load serialized framesheet : " + e.message

From a4036e0f65ed07cb04d61620ce20573272ca52c7 Mon Sep 17 00:00:00 2001
From: Vince <grosbouddha@gmail.com>
Date: Sun, 16 Sep 2012 17:25:51 +0200
Subject: [PATCH 2/2] fix for real palette bug

---
 js/Events.js                       |  2 --
 js/controller/PaletteController.js | 39 ++++++++++++++++++++----------
 js/model/FrameSheet.js             |  1 -
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/js/Events.js b/js/Events.js
index add57b82..1f6a897a 100644
--- a/js/Events.js
+++ b/js/Events.js
@@ -28,8 +28,6 @@ Events = {
     REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
 
     GRID_DISPLAY_STATE_CHANGED: "GRID_DISPLAY_STATE_CHANGED",
-
-    FRAMESHEET_RELOADED: "FRAMESHEET_RELOADED",
     
     /**
      * The framesheet was reseted and is now probably drastically different.
diff --git a/js/controller/PaletteController.js b/js/controller/PaletteController.js
index 13302b02..bca36b94 100644
--- a/js/controller/PaletteController.js
+++ b/js/controller/PaletteController.js
@@ -14,15 +14,22 @@
     $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
   };
 
-   /**
+  /**
    * @private
    */
-  ns.PaletteController.prototype.createPalette_ = function (colors) {
+  ns.PaletteController.prototype.createPaletteMarkup_ = function (colors) {
     // Always adding transparent color
     this.paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
-    for(var color in colors) {
+    
+    for(var i=0, l=this.paletteColors.length; i<l; i++) {
       if(color != Constants.TRANSPARENT_COLOR) {
-        this.addColorToPalette_(color);
+        var color = this.paletteColors[i];
+        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);
       }
     }
   };
@@ -32,16 +39,19 @@
    */
   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
+   */
+  ns.PaletteController.prototype.addColorsToPalette_ = function (colors) {
+    for(var color in colors) {
+      this.addColorToPalette_(color);
+    }
+  };
+
   /**
    * @private
    */
@@ -86,16 +96,19 @@
     this.framesheet = framesheet;
 
     // Initialize palette:
-    this.createPalette_(this.framesheet.getUsedColors());
+    this.addColorsToPalette_(this.framesheet.getUsedColors());
+    this.createPaletteMarkup_();
 
-    $.subscribe(Events.FRAMESHEET_RELOADED, $.proxy(function(evt) {
-      this.createPalette_(this.framesheet.getUsedColors());
+    $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
+      this.addColorsToPalette_(this.framesheet.getUsedColors());
+      this.createPaletteMarkup_();
     }, this));
 
     this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
     
     $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) {
       this.addColorToPalette_(color);
+      this.createPaletteMarkup_();
     }, this));
 
     // Initialize colorpickers:
diff --git a/js/model/FrameSheet.js b/js/model/FrameSheet.js
index 691870a1..721c63b0 100644
--- a/js/model/FrameSheet.js
+++ b/js/model/FrameSheet.js
@@ -68,7 +68,6 @@
 		 		var frameCfg = frameConfigurations[i];
 		 		this.addFrame(new ns.Frame(frameCfg));
 		 	}
-		 	$.publish(Events.FRAMESHEET_RELOADED);
 		 	$.publish(Events.FRAMESHEET_RESET);
 		} catch (e) {
 	 		throw "Could not load serialized framesheet : " + e.message