7 files changed, 34 insertions, 9 deletions

diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js
index 748e26dd..11372d12 100644
--- a/js/lib/rdge/materials/cloud-material.js
+++ b/js/lib/rdge/materials/cloud-material.js
@@ -34,7 +34,6 @@ var Material            = require("js/lib/rdge/materials/material").Material;
 var GLWorld             = require("js/lib/drawing/world").World;
 var Texture             = require("js/lib/rdge/texture").Texture;
 var ElementMediator     = require("js/mediators/element-mediator").ElementMediator;
-var TagTool             = require("js/tools/TagTool").TagTool;
 
 ///////////////////////////////////////////////////////////////////////
 // Class GLMaterial
@@ -152,8 +151,7 @@ var CloudMaterial = function CloudMaterial()
 
         //////////////////////////////////////////////////////////////////////////////////
         // IS THIS NECESSARY??
-//        var elementModel = TagTool.makeElement(~~srcCanvas.width, ~~srcCanvas.height,
-//                                                                        Matrix.I(4), [0,0,0], srcCanvas);
+//        var elementModel = TagTool.makeElement(~~srcCanvas.width, ~~srcCanvas.height, Matrix.I(4), [0,0,0], srcCanvas);
 //        ElementMediator.addElement(srcCanvas, elementModel.data, true);
         //////////////////////////////////////////////////////////////////////////////////
 
diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css
index d6ca76d1..928c2a33 100644
--- a/js/panels/css-panel/css-style.reel/css-style.css
+++ b/js/panels/css-panel/css-style.reel/css-style.css
@@ -138,6 +138,15 @@ POSSIBILITY OF SUCH DAMAGE.
 .style-item .hintable-hint {
     color: #bdbdbd;
 }
+.edit-value {
+    white-space: normal;
+}
+.edit-value dt {
+    margin-right: -7px;
+}
+.edit-value dd {
+    margin-left: 7px;
+}
 
 /* ------------------------
   Empty Style (Add Style)
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index dee94e75..e0055dc6 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -57,6 +57,7 @@ exports.CssStyle = Montage.create(Component, {
     delegate          : { value: null },
     disabledClass     : { value: 'style-item-disabled' },
     editingStyleClass : { value: 'edit-style-item' },
+    editingValueClass : { value: 'edit-value' },
     editNewEmptyClass : { value: 'edit-empty-style' },
     invalidStyleClass : { value: "style-item-invalid" },
     emptyStyleClass   : { value: "empty-css-style" },
@@ -181,6 +182,18 @@ exports.CssStyle = Montage.create(Component, {
         }
     },
 
+    _editingValue : { value: null },
+    editingValue : {
+        get : function() { return this._editingValue; },
+        set : function(value) {
+            if(value === this._editingValue) { return; }
+
+            this._editingValue = value;
+
+            this.needsDraw = true;
+        }
+    },
+
     remove : {
         value: function() {
             var branchController = this.parentComponent.parentComponent.contentController;
@@ -257,6 +270,9 @@ exports.CssStyle = Montage.create(Component, {
             if(this.empty) {
                 this.editingNewStyle = true;
             }
+
+            this.editingValue = (this.valueField.element === e._currentTarget.element);
+
         }
     },
 
@@ -300,7 +316,7 @@ exports.CssStyle = Montage.create(Component, {
                 return false;
             }
 
-            this.editing = false;
+            this.editing = this.editingValue = false;
 
             if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) {
                 ///// Show add button
@@ -457,6 +473,12 @@ exports.CssStyle = Montage.create(Component, {
             } else {
                 this._element.classList.remove(this.editingStyleClass);
             }
+
+            if(this.editingValue) {
+                this._element.classList.add(this.editingValueClass);
+            } else {
+                this._element.classList.remove(this.editingValueClass);
+            }
         }
     }
 });
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 17a99697..f9706277 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -36,7 +36,6 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve
 var Montage = require("montage/core/core").Montage;
 var NJUtils = require("js/lib/NJUtils").NJUtils;
 var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
-var TagTool = require("js/tools/TagTool").TagTool;
 var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
 var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
 var BrushStroke = require("js/lib/geom/brush-stroke").BrushStroke;
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 4ec327b5..26222bc7 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -33,7 +33,6 @@ var Montage =   require("montage/core/core").Montage,
     ShapeTool = require("js/tools/ShapeTool").ShapeTool,
     DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase,
     NJUtils = require("js/lib/NJUtils").NJUtils,
-    TagTool = require("js/tools/TagTool").TagTool,
     ShapesController =  require("js/controllers/elements/shapes-controller").ShapesController,
     ShapeModel = require("js/models/shape-model").ShapeModel;
 
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index a44438ac..1ebc7e83 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -36,7 +36,6 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve
 var Montage = require("montage/core/core").Montage;
 var NJUtils = require("js/lib/NJUtils").NJUtils;
 var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
-var TagTool = require("js/tools/TagTool").TagTool;
 var ElementController = require("js/controllers/elements/element-controller").ElementController;
 var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
 var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js
index e1ca31e6..a4fd98e6 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -33,8 +33,7 @@ var Montage = require("montage/core/core").Montage,
     DrawingTool = require("js/tools/drawing-tool").DrawingTool,
     NJUtils = require("js/lib/NJUtils").NJUtils,
     ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
-    ShapeModel    = require("js/models/shape-model").ShapeModel,
-    TagTool = require("js/tools/TagTool").TagTool;
+    ShapeModel    = require("js/models/shape-model").ShapeModel;
 
 var World = require("js/lib/drawing/world").World;