Added color settings, need to send colored ink

css/main.css

@@ -1,8 +1,3 @@
-
-* {
-  cursor: url(images/blank_google_chrome.cur), url(images/blank.cur), none !important;
-}
-
 body {
   background: #333;
   overflow: hidden;
@@ -17,14 +12,18 @@ body.brushy {
   cursor: url(images/chrome_cursor.png), url(images/blank.cur), none !important;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 #wrap {
   position: absolute;
-  width: 850px;
+  width: 950px;
   height: 500px;
   top: 50%;
   left: 50%;
   margin-top: -250px;
-  margin-left: -425px;
+  margin-left: -475px;
 }
 
 #drawing {
@@ -58,13 +57,24 @@ body.brushy {
   cursor: url(images/blank_google_chrome.cur), url(images/blank.cur), none;
 }
 
+/* Sidebar controls */
+
+#sidebar {
+  position: absolute;
+  top: 0;
+  left: -9820px;
+  width: 10000px;
+  height: 500px;
+  z-index: 10000;
+  cursor: default !important;
+}
+
+/* Drawing tools */
+
 #toolbox {
-  width: 95px;
   position: absolute;
   top: 0;
-  left: 0;
-  bottom: 0;
-  /* background-color: rgba(0, 0, 0, .1); */
+  right: 0px;
 }
 #toolbox ul {
   list-style: none;
@@ -83,7 +93,7 @@ body.brushy {
   -webkit-border-radius: 5px;
 }
 #toolbox, #toolbox ul, #toolbox li {
-  z-index: 10000;
+
 }
 #toolbox li {
   cursor: pointer !important;
@@ -93,20 +103,26 @@ body.brushy {
 
 #palette {
   position: absolute;
-  left: -30px;
-  bottom: -40px;
+  right: 80px;
+  top: 0;
+  z-index: 10000;
 }
 
 #palette ul {
   list-style: none;
 }
 
 .colors li {
-  width: 64px;
-  height: 63px;
+  position: relative;
+  width: 50px;
+  height: 49px;
   cursor: pointer !important;
 }
 
+.colors li.active {
+  left: -10px;
+}
+
 #red {
   background: transparent url(images/red.png) center no-repeat;
 }
@@ -119,8 +135,20 @@ body.brushy {
   background: transparent url(images/blue.png) center no-repeat;
 }
 
+#black {
+  background: transparent url(images/black.png) center no-repeat;
+}
+
+#white {
+  background: transparent url(images/white.png) center no-repeat;
+}
+
 /* Brushes */
 
+.brush {
+  cursor: url(images/chrome_cursor.png), url(images/blank.cur), none !important;
+}
+
 /* Pen */
 
 #pen {

js/main.js

@@ -11,6 +11,7 @@
       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),
+      palette       = new Palette(),
       canvas        = new Canvas('artboard');
 
   // Create Renderers
@@ -40,6 +41,7 @@
     waterbrush: waterbrush,
     mouse: mouse,
     activebrush: activebrush,
+    palette: palette,
     canvas: canvas
   };
 
@@ -49,10 +51,20 @@
 
   // Non-standard bindings
 
-  $('#palette').bind('mouseover',
+  $('#wrap').bind('click', function(event) {
+    //console.dir(event);
+  });
+
+  $('#sidebar').mouseenter(
+    function(event) {
+      ViewModel.activebrush().tracking(false);
+      return false;
+    });
+  $('#sidebar').mouseleave(
     function(event) {
-      ViewModel.activebrush.visible(false);
-      alert('ok');
+      ViewModel.activebrush().tracking(true);
+      console.dir(event);
+      return false;
     }
   );
 

js/viewmodels/brush.js

@@ -15,29 +15,39 @@
     this.shadowWidth = 160;
     this.shadowHeight = 266;
 
+    this.lastPos = {x: 0, y: 0};
+
     this.visible = ko.observable(true);
+    this.tracking = ko.observable(true);
 
     this.active = ko.dependentObservable(function() {
       return (activebrush() === this);
     }, this);
 
+    this.available = ko.dependentObservable(function() {
+      return !this.active();
+    }, this);
+
     this.pos = ko.dependentObservable(function() {
       if (this.active()) {
-        var container = $('#' + this.container).offset(),
-            mouse = this.mouse.pos();
-        return {x: (mouse.x - container.left), y: (mouse.y - container.top)};
+        if (this.tracking()) {
+          var container = $('#' + this.container).offset(),
+              mouse = this.mouse.pos();
+          this.lastPos = {x: (mouse.x - container.left), y: (mouse.y - container.top)};
+        }
       }
       else {
         var holder = $('#' + this.holder).offset(),
             container = $('#' + this.container).offset();
-        return {x: holder.left - container.left + 25, y: holder.top - container.top + 25};
+        this.lastPos = {x: holder.left - container.left + 25, y: holder.top - container.top + 25};
       }
+      return this.lastPos;
     }, this);
 
     this.wx = ko.observable(this.pos().x);
 
     this.down = ko.dependentObservable(function() {
-      if (this.active()) {
+      if (this.active() && this.tracking()) {
         return this.mouse.down();
       }
       else {
@@ -46,10 +56,10 @@
     }, this);
 
     this.left = ko.dependentObservable(function() {
-      return (this.pos().x - this.width * .5 - 4) + 'px';
+      return (this.pos().x - this.width * .5 - 5) + 'px';
     }, this);
     this.top = ko.dependentObservable(function() {
-      return (this.pos().y - this.height * .5 + 6) + 'px';
+      return (this.pos().y - this.height * .5 + 1) + 'px';
     }, this);
     this.zIndex = ko.dependentObservable(function() {
       return ~~this.pos().y;

js/viewmodels/palette.js

@@ -0,0 +1,16 @@
+(function($, ko) {
+
+  function Palette() {
+    this.colors = {
+      red: [255, 0, 0],
+      green: [0, 255, 0],
+      blue: [0, 0, 255],
+      black: [0, 0, 0],
+      white: [255, 255, 255]
+    };
+    this.active = ko.observable(this.colors.black);
+  }
+
+  window.Palette = Palette;
+
+})(jQuery, ko);

scene1.html

@@ -28,20 +28,24 @@
 
     <canvas id="debugboard" width="750" height="500"></canvas>
 
-    <div id="toolbox">
-      <ul>
-        <li id="pen_holder" data-bind="click: function() { ViewModel.activebrush(ViewModel.pen); }"></li>
-        <li id="inkbrush_holder" data-bind="click: function() { ViewModel.activebrush(ViewModel.inkbrush); }"></li>
-        <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 id="sidebar">
+      <div id="toolbox">
+        <ul>
+          <li id="inkbrush_holder" data-bind="css: {invisible: ViewModel.inkbrush.active}, click: function() { ViewModel.activebrush(ViewModel.inkbrush); }"></li>
+          <li id="waterbrush_holder" data-bind="css: {invisible: ViewModel.waterbrush.active}, click: function() { ViewModel.activebrush(ViewModel.waterbrush); }"></li>
+          <li id="pen_holder" data-bind="css: {invisible: ViewModel.pen.active}, click: function() { ViewModel.activebrush(ViewModel.pen); }"></li>
+        </ul>
+      </div>
+
+      <div id="palette">
+        <ul class="colors">
+          <li id="red" data-bind="click: function() { ViewModel.palette.active(ViewModel.palette.colors.red); }, css: {active: ViewModel.palette.active() === ViewModel.palette.colors.red }"></li>
+          <li id="green" data-bind="click: function() { ViewModel.palette.active(ViewModel.palette.colors.green); }, css: {active: ViewModel.palette.active() === ViewModel.palette.colors.green }"></li>
+          <li id="blue" data-bind="click: function() { ViewModel.palette.active(ViewModel.palette.colors.blue); }, css: {active: ViewModel.palette.active() === ViewModel.palette.colors.blue }"></li>
+          <li id="black" data-bind="click: function() { ViewModel.palette.active(ViewModel.palette.colors.black); }, css: {active: ViewModel.palette.active() === ViewModel.palette.colors.black }"></li>
+          <li id="white" data-bind="click: function() { ViewModel.palette.active(ViewModel.palette.colors.white); }, css: {active: ViewModel.palette.active() === ViewModel.palette.colors.white }"></li>
+        </ul>
+      </div>
     </div>
   </div>
 
@@ -54,6 +58,7 @@
   <script src="js/viewmodels/mouse.js"></script>
   <script src="js/viewmodels/brush.js"></script>
   <script src="js/viewmodels/canvas.js"></script>
+  <script src="js/viewmodels/palette.js"></script>
 
   <!-- Brush Renderers -->