4 files changed, 314 insertions, 67 deletions

diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 83450d0f..260ee8a0 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -11,6 +11,8 @@ exports.ComponentController = Montage.create(ElementController, {
 
     getProperty: {
         value: function(el, prop) {
+            var component = el.controller || this.application.ninja.currentDocument.getComponentFromElement(el);
+
             switch(prop) {
                 case "id":
                 case "class":
@@ -19,18 +21,20 @@ exports.ComponentController = Montage.create(ElementController, {
                 case "width":
                 case "height":
                     if(el.nodeName === "IMG" && (prop === "width" || prop === "height")) {
-                        return this.application.ninja.currentDocument.getComponentFromElement(el)[prop];
+                        return component[prop];
                     } else {
                         return ElementController.getProperty(el, prop, true);
                     }
                 default:
-                    return this.application.ninja.currentDocument.getComponentFromElement(el)[prop];
+                    return component[prop];
             }
         }
     },
 
     setProperty: {
         value: function(el, p, value) {
+            var component = el.controller || this.application.ninja.currentDocument.getComponentFromElement(el);
+
             switch(p) {
                 case "id":
                 case "class":
@@ -39,15 +43,14 @@ exports.ComponentController = Montage.create(ElementController, {
                 case "width":
                 case "height":
                     if(el.nodeName === "IMG" && (p === "width" || p === "height")) {
-                        this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value;
+                        component[p] = value;
                     } else {
                         ElementController.setProperty(el, p, value);
                     }
                     break;
                 default:
                     if(p === "min" || p === "max") value = parseFloat(value);
-
-                    this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value;
+                    component[p] = value;
                     break;
 
             }
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index ec0335b4..b35251ad 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -51,31 +51,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
 
     setAttribute: {
         value: function(el, att, value) {
-            if(att === "id") {
-                if(value === "") {
-                    el.setAttribute(att, value);
-                    return;
-                }
-
-                // Then check if this is a valid id by the following spec: http://www.w3.org/TR/REC-html40/types.html#h-6.2
-                var regexID = /^([a-zA-Z])+([a-zA-Z0-9_\.\:\-])+/;
-                if(!regexID.test(value)) {
-                    alert("Invalid ID");
-                    return;
-                } else if (this.application.ninja.currentDocument._document.getElementById(value) !== null) {
-                    alert("The following ID: " + value + " is already in Use");
-                }
-
-            }
-
             el.setAttribute(att, value);
         }
     },
 
     //--------------------------------------------------------------------------------------------------------
     // Routines to get/set color properties
+    // borderSide : "top", "right", "bottom", or "left"
     getColor: {
-        value: function(el, isFill) {
+        value: function(el, isFill, borderSide) {
             var colorObj,
                 color,
                 image;
@@ -87,22 +71,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                 {
                     return el.elementModel.fill;
                 }
-//                return this.application.ninja.stylesController.getElementStyle(el, "background-color");
                 //TODO: Once logic for color and gradient is established, this needs to be revised
                 color = this.getProperty(el, "background-color");
                 image = this.getProperty(el, "background-image");
             }
             else
             {
-                // TODO - Need to figure out which border side user wants
-                if(el.elementModel.stroke)
+                // Try getting border color from specific side first
+                if(borderSide)
                 {
-                    return el.elementModel.stroke;
+                    color = this.getProperty(el, "border-" + borderSide + "-color");
+                    image = this.getProperty(el, "border-" + borderSide + "-image");
+                }
+
+                // If no color was found, look up the shared border color
+                if(!color && !image)
+                {
+                    if(el.elementModel.stroke)
+                    {
+                        return el.elementModel.stroke;
+                    }
+                    color = this.getProperty(el, "border-color");
+                    image = this.getProperty(el, "border-image");
                 }
-                // TODO - Need to figure out which border side user wants
-//                return this.application.ninja.stylesController.getElementStyle(el, "border-color");
-                color = this.getProperty(el, "border-color");
-                image = this.getProperty(el, "border-image");
             }
 
             if(color || image) {
@@ -120,11 +111,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
             {
                 el.elementModel.fill = colorObj;
             }
-            else
+            else if(!borderSide)
             {
                 // TODO - Need to update border style and width also
                 el.elementModel.stroke = colorObj;
             }
+            else
+            {
+                // TODO - Should update specific border sides too
+            }
 
             return colorObj;
         }
@@ -233,22 +228,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                         mat = this.transformStringToMat( xformStr );
                     if (!mat)
                         mat = Matrix.I(4);
-
-                    var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom");
-                    if (zoom)
-                    {
-                        zoom = Number(zoom);
-                        if (zoom != 1)
-                        {
-                            var zoomMat = Matrix.create(  [
-                                [ zoom,    0,    0, 0],
-                                [    0, zoom,    0, 0],
-                                [    0,    0, zoom, 0],
-                                [    0,    0,    0, 1]
-                            ] );
-                            glmat4.multiply( zoomMat, mat, mat );
-                        }
-                    }
                 }
 
                 el.elementModel.props3D.matrix3d = mat;
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 3423a5a7..ef453bea 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -6,10 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage =                   require("montage/core/core").Montage,
     CanvasController = require("js/controllers/elements/canvas-controller").CanvasController,
-    njModule = require("js/lib/NJUtils");
-
+    njModule = require("js/lib/NJUtils"),
+    World = require("js/lib/drawing/world").World,