diff --git a/src/ui/Component.js b/src/ui/Component.js
index e021e9b1..a33bff71 100644
--- a/src/ui/Component.js
+++ b/src/ui/Component.js
@@ -85,11 +85,12 @@ var Component = Base.extend(Callback, /** @lends Component# */{
     _visible: true,
     _enabled: true,
 
-    initialize: function Component(parent, name, props, values, row) {
+    initialize: function Component(palette, parent, name, props, values, row) {
         if (!name)
             name = 'component-' + this._id;
         var value = Base.pick(values[name], props.value);
         this._id = Component._id = (Component._id || 0) + 1;
+        this._palette = palette;
         this._parent = parent;
         this._name = name;
         // The row within which this component is contained. This can be a
@@ -135,8 +136,8 @@ var Component = Base.extend(Callback, /** @lends Component# */{
                         if (columns)
                             this._row = currentRow;
                     }
-                    components[key] = new Component(this, key, component,
-                            values, currentRow);
+                    components[key] = new Component(palette, this, key,
+                            component, values, currentRow);
                     // Keep track of the maximum amount of cells per row, so we
                     // can adjust colspan after.
                     numCells = Math.max(numCells, this._numCells);
@@ -214,10 +215,10 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         }
         this._className = className;
 
-        // Attach default 'change' even that delegates to parent component.
+        // Attach default 'change' even that delegates to the palette.
         this.attach('change', function(value) {
-            if (!this._dontFire && parent)
-                parent.fire('change', this, this._name, value);
+            if (!this._dontFire)
+                palette.fire('change', this, this._name, value);
         });
         this._dontFire = true;
         // Now that everything is set up, copy over values fro, props.
@@ -241,6 +242,14 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         return this._name;
     },
 
+    getPalette: function() {
+        return this._palette;
+    },
+
+    getParent: function() {
+        return this._parent;
+    },
+
     _setLabel: function(label, nodeName, parent) {
         if (parent) {
             this[nodeName] = DomElement.set(this[nodeName]
diff --git a/src/ui/Palette.js b/src/ui/Palette.js
index 32cbf996..ef078a5d 100644
--- a/src/ui/Palette.js
+++ b/src/ui/Palette.js
@@ -14,8 +14,9 @@
   * @name Palette
   * @class
   */
-/* var Palette = */ Base.extend(/** @lends Palette# */{
+/* var Palette = */ Base.extend(Callback, /** @lends Palette# */{
     _class: 'Palette',
+    _events: [ 'onChange' ],
 
     // DOCS: Palette#initialize(props)
     // DOCS: Palette#initialize(title, components, values)
@@ -36,11 +37,8 @@
         this._components = components;
         // Create one root component that handles the layout and contains all
         // the components.
-        var root = this._root = new Component(null, 'root', components, values),
-            that = this;
-        root.attach('change', function(value) {
-            that.fire('change', this, this._name, value);
-        });
+        var root = this._root = new Component(this, null, 'root', components,
+                values);
         // Write the created components back into the passed components object,
         // so they are exposed and can easily be accessed from the outside.
         Base.set(components, root._components);