Added 'drawing' adapter for future recording and playback, created rg…

…b images and dom objects, having issues with mouseover because of z-index

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 */

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);

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
 

js/viewmodels/brush.js

@@ -1,19 +1,22 @@
 (function($, ko) {
 
-  function Brush(mouse, holder, activebrush, container, renderer) {
+  function Brush(mouse, holder, activebrush, container, renderer, broadcaster) {
 
     var self = this;
 
     this.mouse = mouse;
     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);
       }
     });
 

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>