26 files changed, 333 insertions, 67 deletions

diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 97df84a0..9a0ad583 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -208,7 +208,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
                 var top = Math.round(midPt[1] - 0.5 * h);
 
                 if (!canvas) {
-                    var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", null, true);
+                var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
                     var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas);
                     ElementMediator.addElement(newCanvas, elementModel.data, true);
 
diff --git a/js/tools/EraserTool.js b/js/tools/EraserTool.js
index c12a14b1..c12a14b1 100644..100755
--- a/js/tools/EraserTool.js
+++ b/js/tools/EraserTool.js
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 795753d2..d007da39 100644..100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -6,7 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage,
     ElementsMediator = require("js/mediators/element-mediator").ElementMediator,
-
+    drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
+    vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils,
     toolBase = require("js/tools/ToolBase").toolBase;
 
 exports.EyedropperTool = Montage.create(toolBase, {
@@ -14,6 +15,9 @@ exports.EyedropperTool = Montage.create(toolBase, {
     _isMouseDown: { value: false },
     _previousColor: { value: null},
     _color: { value: null},
+    _elementUnderMouse: { value: null },
+    _imageDataCanvas: { value: null },
+    _imageDataContext: { value: null },
 
     Configure: {
         value: function ( doActivate )
@@ -46,6 +50,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
             {
                 this._isMouseDown = false;
                 this._escape = false;
+                this._elementUnderMouse = null;
+                this._deleteImageDataCanvas();
             }
             if(this._isMouseDown)
             {
@@ -67,6 +73,9 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 this._updateColor(this._color);
 
                 this._color = null;
+
+                this._elementUnderMouse = null;
+                this._deleteImageDataCanvas();
             }
         }
     },
@@ -95,27 +104,70 @@ exports.EyedropperTool = Montage.create(toolBase, {
 
     _updateColorFromPoint: {
         value : function (event) {
-            var obj = this.application.ninja.stage.GetElement(event);
+            var c,
+                color,
+                obj = this.application.ninja.stage.GetElement(event);
             if (obj)
             {
-                // TODO - figure out if user clicked on a border - for now, just get fill
-                var c = ElementsMediator.getColor(obj, true);
-                if(c)
+                if(this.application.ninja.currentDocument.inExclusion(obj) !== -1)
                 {
-                    var color = this.application.ninja.colorController.getColorObjFromCss(c);
-                    if (color && color.value) {
-                        color.value.wasSetByCode = true;
-                        color.value.type = 'changing';
-                        if (color.value.a) {
-                            this.application.ninja.colorController.colorModel.alpha = {value: color.value.a,
-                                                                                        wasSetByCode: true,
-                                                                                        type: 'changing'};
-                        }
-                        this.application.ninja.colorController.colorModel[color.mode] = color.value;
-                        this._color = color;
+                    this._elementUnderMouse = null;
+                    this._deleteImageDataCanvas();
+                    return;
+                }
+                this._elementUnderMouse = obj;
+                // Depending on the object type, we need to get different colors
+                if(obj.elementModel.selection === "image")
+                {
+                    c = this._getColorAtPoint(obj, event);
+                    if(c)
+                    {
+                        color = this.application.ninja.colorController.getColorObjFromCss(c);
+                    }
+                }
+                else if (obj.elementModel.selection === "canvas")
+                {
+                    this._deleteImageDataCanvas();
+
+                    var pt = webkitConvertPointFromPageToNode(obj,
+                                                                new WebKitPoint(event.pageX, event.pageY)),
+                        ctx = obj.getContext("2d");
+
+                    c = this._getColorFromCanvas(ctx, pt);
+                    if(c)
+                    {
+                        color = this.application.ninja.colorController.getColorObjFromCss(c);
+                    }
+                }
+                else
+                {
+                    this._deleteImageDataCanvas();
+
+                    c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event));
+                    if(c)
+                    {
+                        color = this.application.ninja.colorController.getColorObjFromCss(c.color.css);
+                    }
+                }
+
+                if (color && color.value) {
+                    color.value.wasSetByCode = true;
+                    color.value.type = 'changing';
+                    if (color.value.a) {
+                        this.application.ninja.colorController.colorModel.alpha = {value: color.value.a,
+                                                                                    wasSetByCode: true,
+                                                                                    type: 'changing'};
                     }
+                    this.application.ninja.colorController.colorModel[color.mode] = color.value;
+                    this._color = color;
                 }
             }
+            else
+            {
+                this._elementUnderMouse = null;
+                this._deleteImageDataCanvas();
+            }
+
         }
     },
 
@@ -147,6 +199,128 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 this._previousColor = color.value.css;
             }
         }
+    },
+
+    // TODO - We don't want to calculate this repeatedly
+    _isOverBackground: {
+        value: function(elt, event)
+        {
+            var border = ElementsMediator.getProperty(elt, "border", parseFloat);
+
+            if(border)
+            {
+                var bounds3D,
+                    innerBounds = [],
+                    pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)),
+                    bt = ElementsMediator.getProperty(elt, "border-top", parseFloat),
+                    br = ElementsMediator.getProperty(elt, "border-right", parseFloat),
+                    bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat),
+                    bl = ElementsMediator.getProperty(elt, "border-left", parseFloat);
+
+//                this.application.ninja.stage.viewUtils.setViewportObj( elt );
+                bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt );
+//                console.log("bounds");
+//                console.dir(bounds3D);
+
+                var xAdj = bl || border,
+                    yAdj = bt || border;
+                innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]);
+
+                yAdj += bb || border;
+                innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]);
+
+                xAdj += br || border;
+                innerBounds.push([bounds3D[2][0] - xAdj, bounds3D[2][1] - yAdj, 0]);
+
+                yAdj = bt || border;
+                innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]);
+//                console.log("innerBounds");
+//                console.dir(innerBounds);
+
+                var tmpPt = this.application.ninja.stage.viewUtil