define better color palette

customize.dist/application_config.js

@@ -12,5 +12,22 @@ define(function() {
      */
     config.notificationTimeout = 5000;
 
+    config.whiteboardPalette = [
+        '#000000', // black
+        '#FFFFFF', // white
+        '#848484', // grey
+        '#FF0000', // red
+        '#FF8080', // peach?
+        '#FF8000', // orange
+        '#FFFF00', // yellow
+        '#80FF80', // light green
+        '#00FF00', // green
+        '#00FFFF', // cyan
+        '#008B8B', // dark cyan
+        '#0000FF', // blue
+        '#FF00FF', // fuschia
+        '#800080', // purple
+    ];
+
     return config;
 });

www/whiteboard/main.js

@@ -13,10 +13,11 @@ define([
     '/common/cryptpad-common.js',
     '/common/visible.js',
     '/common/notify.js',
+    '/customize/application_config.js',
     '/bower_components/secure-fabric.js/dist/fabric.min.js',
     '/bower_components/jquery/dist/jquery.min.js',
     '/bower_components/file-saver/FileSaver.min.js',
-], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Visible, Notify) {
+], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Visible, Notify, AppConfig) {
     var saveAs = window.saveAs;
     var Messages = Cryptpad.Messages;
 
@@ -96,16 +97,12 @@ define([
         $width.on('change', updateBrushWidth);
 
         var pickColor = function (current, cb) {
-            // TODO find out why initial color is not being set
-            // http://jsfiddle.net/j3hZB/
-            console.log(current);
             var $picker = $('<input>', {
                 type: 'color',
                 value: '#FFFFFF',
             })
             .css({
                 visibility: 'hidden'
-                //display: 'none',
             })
             .on('change', function () {
                 var color = this.value;
@@ -134,9 +131,10 @@ define([
             return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
         };
 
-        // TODO add a better color palette
-        var palette = ['red', 'blue', 'green', 'white', 'black', 'purple',
-            'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'];
+        var palette = AppConfig.whiteboardPalette || [
+            'red', 'blue', 'green', 'white', 'black', 'purple',
+            'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'
+        ];
 
         $('.palette-color').on('click', function () {
             var color = $(this).css('background-color');