12 files changed, 2553 insertions, 2312 deletions

diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index 5aaeb5f2..7dd4c9e8 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -18,16 +18,18 @@ exports.NJUtils = Montage.create(Component, {
     
     ///// Quick "getElementById"
     $ : {
-        value: function(id) {
-            return document.getElementById(id);            
+        value: function(id, doc) {
+            doc = doc || document;
+            return doc.getElementById(id);
         }
     },
     
     ///// Quick "getElementsByClassName" which also returns as an Array
     ///// Can return as NodeList by passing true as second argument
     $$ : {
-        value: function(className, asNodeList) {
-            var list = document.getElementsByClassName(className);
+        value: function(className, asNodeList, doc) {
+            doc = doc || document;
+            var list = doc.getElementsByClassName(className);
             return (asNodeList) ? list : this.toArray(list);
         }
     },
@@ -62,7 +64,7 @@ exports.NJUtils = Montage.create(Component, {
         value: function(tag, attr, doc) {
             var _doc, el;
 
-            _doc = doc ? doc._document : document;
+            _doc = doc ? doc.model.views.design.document : document;
             el = _doc.createElement(tag);
             this.decor(el, attr);
 
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index 7ce23921..0dde9af4 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -874,17 +874,17 @@ World.prototype.importObjectJSON = function( jObj, parentGeomObj )
         switch (type)
         {
                 case 1:
-                        obj = new Rectangle();
+                        obj = Object.create(Rectangle, {});
                         obj.importJSON( jObj );
                         break;
 
                 case 2:         // circle
-                        obj = new Circle();
+                        obj = Object.create(Circle, {});
                         obj.importJSON( jObj );
                         break;
 
                 case 3:         // line
-            obj = new Line();
+            obj = Object.create(Line, {});
             obj.importJSON( jObj );
             break;
 
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 1fae0c1d..6facdd5d 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -768,7 +768,7 @@ var BrushStroke = function GLBrushStroke() {
 
 }; //function BrushStroke ...class definition
 
-BrushStroke.prototype = new GeomObj();
+BrushStroke.prototype = Object.create(GeomObj, {});
 
 BrushStroke.prototype._CatmullRomSplineInterpolate = function(ctrlPts, t)
 {
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 0f1f49a9..4a369844 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -4,9 +4,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var GeomObj                     = require("js/lib/geom/geom-obj").GeomObj;
-var ShapePrimitive      = require("js/lib/geom/shape-primitive").ShapePrimitive;
-var MaterialsModel      = require("js/models/materials-model").MaterialsModel;
+var GeomObj =           require("js/lib/geom/geom-obj").GeomObj;
+var ShapePrimitive =    require("js/lib/geom/shape-primitive").ShapePrimitive;
+var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 var drawUtils           = require("js/helper-classes/3D/draw-utils").DrawUtils;
 var vecUtils            = require("js/helper-classes/3D/vec-utils").VecUtils;
 
@@ -16,823 +16,832 @@ var vecUtils		= require("js/helper-classes/3D/vec-utils").VecUtils;
 //      Derived from class GLGeomObj
 //              The position and dimensions of the stroke, fill, and inner Radius should be in pixels
 ///////////////////////////////////////////////////////////////////////
-var Circle = function GLCircle() {
-
-        this.init = function( world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) {
-                ///////////////////////////////////////////////////////////////////////
-                // Instance variables
-                ///////////////////////////////////////////////////////////////////////
-                this._width = 2.0;
-                this._height = 2.0;
-                this._xOffset = 0;
-                this._yOffset = 0;
-
-                this._radius = 2.0;
-                this._strokeWidth = 0.25;
-                this._innerRadius = 0;
-
-                this._ovalHeight = this._ovalHeight = 2.0 * this._radius;
-
-                this._strokeStyle = "Solid";
-
-                this._aspectRatio = 1.0;
-
-                if (arguments.length > 0) {
-                        this._width = width;
-                        this._height = height;
-                        this._xOffset = xOffset;
-                        this._yOffset = yOffset;
-        
-                        this._strokeWidth = strokeSize;
-                        this._innerRadius = innerRadius;
-                        this._strokeColor = strokeColor;
-                        this._fillColor = fillColor;
-
-                        this._strokeStyle = strokeStyle;
-
-                        this._matrix = Matrix.I(4);
-                        //this._matrix[12] = xOffset;
-                        //this._matrix[13] = yOffset;
-                }
+exports.Circle = Object.create(GeomObj, {
 
-                this.m_world = world;
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////
+    _width: { value : 2.0, writable: true },
+    _height: { value : 2.0, writable: true },
+    _xOffset: { value : 0, writable: true },
+    _yOffset: { value : 0, writable: true },
+
+    _radius: { value : 2.0, writable: true },
+    _strokeWidth: { value : 0.25, writable: true },
+    _innerRadius: { value : 0, writable: true },
+    _ovalHeight: { value : 4.0, writable: true },
+    _strokeStyle: { value : "Solid", writable: true },
+    _aspectRatio: { value : 1.0, writable: true },
+
+        init: {
+        value: function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) {
+            if(arguments.length > 0) {
+                this._width = width;
+                this._height = height;
+                this._xOffset = xOffset;
+                this._yOffset = yOffset;
+                this._ovalHeight = 2.0 * this._radius;
+
+                this._strokeWidth = strokeSize;
+                this._innerRadius = innerRadius;
+                this._strokeColor = strokeColor;
+                this._fillColor = fillColor;
+
+                this._strokeStyle = strokeStyle;
+
+                this._matrix = Matrix.I(4);
+                //this._matrix[12] = xOffset;
+                //this._matrix[13] = yOffset;
+            }
 
-                if(strokeMaterial){
-                        this._strokeMaterial = strokeMaterial;
-        } else {
-                        this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
-        }
+            this.m_world = world;
 
-                if(fillMaterial) {
-                        this._fillMaterial = fillMaterial;
-        } else {
-                        this._fillMaterial = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+            if(strokeMaterial) {
+                this._strokeMaterial = strokeMaterial;
+            } else {
+                this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
+            }
+
+            if(fillMaterial) {
+                this._fillMaterial = fillMaterial;
+            } else {
+                this._fillMaterial = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+            }
         }
-        };
+    },
 
     ///////////////////////////////////////////////////////////////////////
     // Property Accessors
     ///////////////////////////////////////////////////////////////////////
-        this.getStrokeWidth = function() {
-        return this._strokeWidth;
-    };
-
-        this.setStrokeWidth = function(w) {
-        this._strokeWidth = w;
-    };
+    // TODO - Use getters/setters in the future
+    getStrokeWidth: {
+        value: function() {
+            return this._strokeWidth;
+        }
+    },
 
-        this.getStrokeMaterial = function() {
-        return this._strokeMaterial;
+    setStrokeWidth: {
+        value: function(w) {