diff --git a/css/images/blue.png b/css/images/blue.png
new file mode 100644
index 0000000..9aa3e91
Binary files /dev/null and b/css/images/blue.png differ
diff --git a/css/images/green.png b/css/images/green.png
new file mode 100644
index 0000000..e1431e3
Binary files /dev/null and b/css/images/green.png differ
diff --git a/css/images/red.png b/css/images/red.png
new file mode 100644
index 0000000..0074890
Binary files /dev/null and b/css/images/red.png differ
diff --git a/css/main.css b/css/main.css
index bcf791a..4d46f6c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -89,6 +89,36 @@ body.brushy {
   cursor: pointer !important;
 }
 
+/* Palette */
+
+#palette {
+  position: absolute;
+  left: -30px;
+  bottom: -40px;
+}
+
+#palette ul {
+  list-style: none;
+}
+
+.colors li {
+  width: 64px;
+  height: 63px;
+  cursor: pointer !important;
+}
+
+#red {
+  background: transparent url(images/red.png) center no-repeat;
+}
+
+#green {
+  background: transparent url(images/green.png) center no-repeat;
+}
+
+#blue {
+  background: transparent url(images/blue.png) center no-repeat;
+}
+
 /* Brushes */
 
 /* Pen */
diff --git a/js/drawing.js b/js/drawing.js
new file mode 100644
index 0000000..b6bdeb8
--- /dev/null
+++ b/js/drawing.js
@@ -0,0 +1,13 @@
+(function($, ko) {
+
+  function Drawing() {}
+  
+  Drawing.prototype = {
+    event: function(name, args) {
+      $(document).trigger(name, args);
+    }
+  };
+  
+  window.Drawing = Drawing;
+
+})(jQuery, ko);
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 2dceb60..ab8c07b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,12 +1,16 @@
 (function() {
 
+  // Create Drawing instance
+  
+  var drawing = new Drawing();
+  
   // Create VM instances
   
   var mouse         = new Mouse(),
       activebrush   = ko.observable(null),
-      pen           = new Brush(mouse, 'pen_holder', activebrush, 'drawing', 'inkRenderer')
-      inkbrush      = new Brush(mouse, 'inkbrush_holder', activebrush, 'drawing', 'inkRenderer'),
-      waterbrush    = new Brush(mouse, 'waterbrush_holder', activebrush, 'drawing', 'waterRenderer'),
+      pen           = new Brush(mouse, 'pen_holder', activebrush, 'drawing', 'inkRenderer', drawing)
+      inkbrush      = new Brush(mouse, 'inkbrush_holder', activebrush, 'drawing', 'inkRenderer', drawing),
+      waterbrush    = new Brush(mouse, 'waterbrush_holder', activebrush, 'drawing', 'waterRenderer', drawing),
       canvas        = new Canvas('artboard');
   
   // Create Renderers
@@ -42,6 +46,15 @@
   // Bind Views to ViewModel
   
   ko.applyBindings(ViewModel);
+  
+  // Non-standard bindings
+  
+  $('#palette').bind('mouseover',
+    function(event) {
+      ViewModel.activebrush.visible(false);
+      alert('ok');
+    }
+  );
 
   // Disable text selection
   
diff --git a/js/viewmodels/brush.js b/js/viewmodels/brush.js
index 3d87071..ba9191f 100644
--- a/js/viewmodels/brush.js
+++ b/js/viewmodels/brush.js
@@ -1,6 +1,6 @@
 (function($, ko) {
   
-  function Brush(mouse, holder, activebrush, container, renderer) {
+  function Brush(mouse, holder, activebrush, container, renderer, broadcaster) {
   
     var self = this;
     
@@ -8,12 +8,15 @@
     this.holder = holder;
     this.container = container;
     this.renderer = renderer;
+    this.broadcaster = broadcaster;
     
     this.width = 284;
     this.height = 890;
     this.shadowWidth = 160;
     this.shadowHeight = 266;
     
+    this.visible = ko.observable(true);
+    
     this.active = ko.dependentObservable(function() {
       return (activebrush() === this);
     }, this);
@@ -76,15 +79,16 @@
     
     this.down.subscribe(function(down) {
       if (down) {
-        $(document).trigger(self.renderer + '.down', [self.pos()]);
+        broadcaster.event(self.renderer + '.down', [self.pos()]);
       }
       else {
-        $(document).trigger(self.renderer + '.up', [self.pos()]);
+        broadcaster.event(self.renderer + '.up', [self.pos()]);
       }
     });
+    
     this.pos.subscribe(function(pos) {
       if (self.down()) {
-        $(document).trigger(self.renderer + '.move', pos);
+        broadcaster.event(self.renderer + '.move', pos);
       }
     });
     
diff --git a/scene1.html b/scene1.html
index 81d04b5..5765204 100644
--- a/scene1.html
+++ b/scene1.html
@@ -10,17 +10,17 @@
   <div id="wrap">
     <div id="drawing">
       <canvas id="artboard" width="750" height="500"></canvas>
-      <div id="pen" data-bind="css: {down: pen.down}, style: {left: pen.left, top: pen.top, zIndex: pen.zIndex}">
+      <div id="pen" data-bind="visible: pen.visible, css: {down: pen.down}, style: {left: pen.left, top: pen.top, zIndex: pen.zIndex}">
         <div class="shadow" data-bind="style: {webkitTransform: pen.shadowTransform, MozTransform: pen.shadowTransform, msTransform: pen.shadowTransform, transform: pen.shadowTransform}"></div>
         <div class="brush" data-bind="style: {webkitTransform: pen.transform, MozTransform: pen.transform, msTransform: pen.transform, transform: pen.transform}"></div>
       </div>
       
-      <div id="brush" data-bind="css: {down: inkbrush.down}, style: {left: inkbrush.left, top: inkbrush.top, zIndex: inkbrush.zIndex}">
+      <div id="brush" data-bind="visible: inkbrush.visible, css: {down: inkbrush.down}, style: {left: inkbrush.left, top: inkbrush.top, zIndex: inkbrush.zIndex}">
         <div class="shadow" data-bind="style: {webkitTransform: inkbrush.shadowTransform, MozTransform: inkbrush.shadowTransform, msTransform: inkbrush.shadowTransform, transform: inkbrush.shadowTransform}"></div>
         <div class="brush" data-bind="style: {webkitTransform: inkbrush.transform, MozTransform: inkbrush.transform, msTransform: inkbrush.transform, transform: inkbrush.transform}"></div>
       </div>
       
-      <div id="waterbrush" data-bind="css: {down: waterbrush.down}, style: {left: waterbrush.left, top: waterbrush.top, zIndex: waterbrush.zIndex}">
+      <div id="waterbrush" data-bind="visible: waterbrush.visible, css: {down: waterbrush.down}, style: {left: waterbrush.left, top: waterbrush.top, zIndex: waterbrush.zIndex}">
         <div class="shadow" data-bind="style: {webkitTransform: waterbrush.shadowTransform, MozTransform: waterbrush.shadowTransform, msTransform: waterbrush.shadowTransform, transform: waterbrush.shadowTransform}"></div>
         <div class="brush" data-bind="style: {webkitTransform: waterbrush.transform, MozTransform: waterbrush.transform, msTransform: waterbrush.transform, transform: waterbrush.transform}"></div>
       </div>
@@ -35,6 +35,14 @@
         <li id="waterbrush_holder" data-bind="click: function() { ViewModel.activebrush(ViewModel.waterbrush); }"></li>
       </ul>
     </div>
+    
+    <div id="palette">
+      <ul class="colors">
+        <li id="red"></li>
+        <li id="green"></li>
+        <li id="blue"></li>
+      </ul>
+    </div>
   </div>
   
   
@@ -54,6 +62,7 @@
   
   <!-- Main -->
   
+  <script src="js/drawing.js"></script>
   <script src="js/main.js"></script>
   
 </body>