From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:52:06 -0700
Subject: Expand tabs

---
 assets/canvas-runtime.js                | 4052 +++++++++++++++----------------
 assets/shaders/Basic.vert.glsl          |    6 +-
 assets/shaders/BasicTex.frag.glsl       |    2 +-
 assets/shaders/Cloud.frag.glsl          |    6 +-
 assets/shaders/Cloud.vert.glsl          |   28 +-
 assets/shaders/Flag.vert.glsl           |   22 +-
 assets/shaders/Taper.vert.glsl          |  152 +-
 assets/shaders/TwistVert.frag.glsl      |    8 +-
 assets/shaders/TwistVert.vert.glsl      |   84 +-
 assets/shaders/linearGradient.frag.glsl |   68 +-
 assets/shaders/linearGradient.vert.glsl |   30 +-
 assets/shaders/radialGradient.frag.glsl |   70 +-
 assets/shaders/radialGradient.vert.glsl |    8 +-
 assets/shaders/test_fshader.glsl        |   18 +-
 assets/shaders/test_fshader_full.glsl   |    8 +-
 assets/shaders/test_vshader.glsl        |   60 +-
 assets/shaders/ub_fshader.glsl          |  414 ++--
 assets/shaders/ub_vshader.glsl          |  232 +-
 18 files changed, 2634 insertions(+), 2634 deletions(-)

(limited to 'assets')

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index ce392f34..42d90333 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -36,42 +36,42 @@ var NinjaCvsRt =  NinjaCvsRt || {};
 window.addEventListener('load', loadCanvasData, false);
 //Load data function (on document loaded)
 function loadCanvasData (e) {
-	//Cleaning up events
-	window.removeEventListener('load', loadCanvasData, false);
+    //Cleaning up events
+    window.removeEventListener('load', loadCanvasData, false);
     //Getting tag with data, MUST contain attribute
     var xhr, tag = document.querySelectorAll(['script[data-ninja-canvas-lib]'])[0];
-   	//Checking for data to be external file
-   	if (tag.getAttribute('data-ninja-canvas-json') !== null) {
-   		//Loading JSON data
-   		xhr = new XMLHttpRequest();
+    //Checking for data to be external file
+    if (tag.getAttribute('data-ninja-canvas-json') !== null) {
+        //Loading JSON data
+        xhr = new XMLHttpRequest();
         xhr.open("GET", tag.getAttribute('data-ninja-canvas-json'), false);
         xhr.send();
-		//Checking for data
-       	if (xhr.readyState === 4) {
-       		//Calling method to initialize all webGL/canvas(es)
-   			NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), xhr.response);
-       	} else {
-       		//TODO: Add error for users
-       	}
-   	} else {//Data in document itself
-   		//Calling method to initialize all webGL/canvas(es)
-   		NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), document.querySelectorAll(['script[data-ninja-canvas]'])[0].innerHTML);
-   	}
+        //Checking for data
+        if (xhr.readyState === 4) {
+            //Calling method to initialize all webGL/canvas(es)
+            NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), xhr.response);
+        } else {
+            //TODO: Add error for users
+        }
+    } else {//Data in document itself
+        //Calling method to initialize all webGL/canvas(es)
+        NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), document.querySelectorAll(['script[data-ninja-canvas]'])[0].innerHTML);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////
 //Loading webGL/canvas data
 NinjaCvsRt.initWebGl = function (rootElement, directory, data) {
-	var cvsDataMngr, ninjaWebGlData = JSON.parse((data.replace('(', '')).replace(')', ''));
-	if (ninjaWebGlData && ninjaWebGlData.data) {
-		for (var n=0; ninjaWebGlData.data[n]; n++) {
-			ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]);
-		}
-	}
-	//Creating data manager
-	cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {});
-	//Loading data to canvas(es)
-	cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory);
+    var cvsDataMngr, ninjaWebGlData = JSON.parse((data.replace('(', '')).replace(')', ''));
+    if (ninjaWebGlData && ninjaWebGlData.data) {
+        for (var n=0; ninjaWebGlData.data[n]; n++) {
+            ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]);
+        }
+    }
+    //Creating data manager
+    cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {});
+    //Loading data to canvas(es)
+    cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory);
 };
 
 ///////////////////////////////////////////////////////////////////////
@@ -80,64 +80,64 @@ NinjaCvsRt.initWebGl = function (rootElement, directory, data) {
 ///////////////////////////////////////////////////////////////////////
 NinjaCvsRt.CanvasDataManager = Object.create(Object.prototype, {
 
-	loadGLData: {
-		value: function(root, valueArray, assetPath) {
-			if (assetPath)
-				this._assetPath = assetPath.slice();
-
-			var value = valueArray;
-			var nWorlds = value.length;
-			for (var i=0;  i<nWorlds;  i++)
-			{
-				var importStr = value[i];
-
-				// there should be some version information in
-				// the form of 'v0.0;'  Pull that off.  (the trailing ';' should
-				// be in the first 24 characters).
-				var index = importStr.indexOf( ';' );
-				if ((importStr[0] === 'v') && (index < 24))
-				{
-					// JSON format.  pull off the version info
-					importStr = importStr.substr( index+1 );
-
-					var jObj = JSON.parse( importStr );
-					var id = jObj.id;
-					if (id)
-					{
-						var canvas = this.findCanvasWithID( id, root );
-						if (canvas)
-						{
+    loadGLData: {
+        value: function(root, valueArray, assetPath) {
+            if (assetPath)
+                this._assetPath = assetPath.slice();
+
+            var value = valueArray;
+            var nWorlds = value.length;
+            for (var i=0;  i<nWorlds;  i++)
+            {
+                var importStr = value[i];
+
+                // there should be some version information in
+                // the form of 'v0.0;'  Pull that off.  (the trailing ';' should
+                // be in the first 24 characters).
+                var index = importStr.indexOf( ';' );
+                if ((importStr[0] === 'v') && (index < 24))
+                {
+                    // JSON format.  pull off the version info
+                    importStr = importStr.substr( index+1 );
+
+                    var jObj = JSON.parse( importStr );
+                    var id = jObj.id;
+                    if (id)
+                    {
+                        var canvas = this.findCanvasWithID( id, root );
+                        if (canvas)
+                        {
 //                            new NinjaCvsRt.GLRuntime( canvas, jObj,  assetPath );
-							var glRt = Object.create(NinjaCvsRt.GLRuntime, {});
-							glRt.renderWorld(canvas, jObj, this._assetPath);
-						}
-						else
-						{
-							console.log( "***** COULD NOT FIND CANVAS WITH ID " + id + " *****" );
-						}
-					}
-				}
-			}
-		}
-	},
-
-	findCanvasWithID: {
-		value: function(id, elt) {
-			var cid = elt.getAttribute( "data-RDGE-id" );
-			if (cid == id)  return elt;
-
-			if (elt.children)
-			{
-				var nKids = elt.children.length;
-				for (var i=0;  i<nKids;  i++)
-				{
-					var child = elt.children[i];
-					var foundElt = this.findCanvasWithID( id, child );
-					if (foundElt)  return foundElt;
-				}
-			}
-		}
-	}
+                            var glRt = Object.create(NinjaCvsRt.GLRuntime, {});
+                            glRt.renderWorld(canvas, jObj, this._assetPath);
+                        }
+                        else
+                        {
+                            console.log( "***** COULD NOT FIND CANVAS WITH ID " + id + " *****" );
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    findCanvasWithID: {
+        value: function(id, elt) {
+            var cid = elt.getAttribute( "data-RDGE-id" );
+            if (cid == id)  return elt;
+
+            if (elt.children)
+            {
+                var nKids = elt.children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = elt.children[i];
+                    var foundElt = this.findCanvasWithID( id, child );
+                    if (foundElt)  return foundElt;
+                }
+            }
+        }
+    }
 });
 
 ///////////////////////////////////////////////////////////////////////
@@ -145,267 +145,267 @@ NinjaCvsRt.CanvasDataManager = Object.create(Object.prototype, {
 //      Manages runtime fora WebGL canvas
 ///////////////////////////////////////////////////////////////////////
 NinjaCvsRt.GLRuntime = Object.create(Object.prototype, {
-	///////////////////////////////////////////////////////////////////////
-	// Instance variables
-	///////////////////////////////////////////////////////////////////////
-	_canvas: { value: null, writable: true },
-	_context : { value: null, writable: true },
-	//this._importStr		= importStr;
-	_jObj: { value: null, writable: true },
-
-	_renderer: { value: null, writable: true },
-	myScene: { value: null, writable: true },
-	light: { value: null, writable: true },
-	light2: { value: null, writable: true },
-	_rootNode: { value: null, writable: true },
-
-	_firstRender: { value: true, writable: true },
-	_renderCount: { value: -1, writable: true },
-	_initialized: { value: false, writable: true },
-
-	_useWebGL: { value: false, writable: true },
-	_assetPath: { value: undefined, writable: true },
-
-	// view parameters
-	_fov: { value: 45.0, writable: true },
-	_zNear: { value: 0.1, writable: true },
-	_zFar: { value: 100.0, writable: true },
-	_viewDist: { value: 5.0, writable: true },
-
-	elapsed: { value: 0, writable: true },
-
-	_aspect: { value: 1, writable: true },
-
-	//this._geomRoot = null;
-	_rootChildren: { value: [], writable: true },
-
-	// all "live" materials
-	_materials: { value: [], writable: true },
-
-	renderWorld: {
-		value: function(canvas, jObj, assetPath) {
-			this._materials = [];
-			this._rootChildren = [];
-			this._canvas = canvas;
-			this._aspect = this._canvas.width/this._canvas.height;
-
-			this._jObj= jObj;
-
-			// provide the mapping for the asset directory
-			if (assetPath) {
-				this._assetPath = assetPath.slice();
-				if (this._assetPath[this._assetPath.length - 1] != '/')
-					this._assetPath += '/';
-			}
-
-			if(this._assetPath !== undefined) {
-				RDGE.globals.engine.setAssetPath(this._assetPath);
-			}
-
-			// start RDGE or load Canvas 2D objects
-			if (jObj.scenedata)  this._useWebGL = true;
-			if (this._useWebGL)
-			{
-				var id = this._canvas.getAttribute( "data-RDGE-id" );
-				this._canvas.rdgeid = id;
-				RDGE.globals.engine.registerCanvas(this._canvas, this);
-				RDGE.RDGEStart( this._canvas );
-				this._canvas.task.start();
-			}
-			else
-			{
-				this.loadScene();
-			}
-		}
-	},
-
-	///////////////////////////////////////////////////////////////////////
-	// accessors
-	///////////////////////////////////////////////////////////////////////
-	getZNear: { value: function() { return this._zNear; }},
-	getZFar: { value: function() { return this._zFar; }},
-	getFOV: { value: function() { return this._fov; }},
-	getAspect: { value: function() { return this._aspect; }},
-	getViewDistance: { value: function() { return this._viewDist; }},
-
-	get2DContext: { value: function() { return this._context; }},
-
-	getViewportWidth: { value: function() { return this._canvas.width; }},
-	getViewportHeight: { value: function() { return this._canvas.height; }},
-
-	loadScene: {
-		value: function() {
-			var jObj = this._jObj;
-			if (!jObj.children)	// || (jObj.children.length != 1))
-				throw new Error( "ill-formed JSON for runtime load: " + jObj );
-			var nChildren = jObj.children.length;
-
-			// parse the data
-			var child;
-			if (jObj.scenedata)
-			{
-				this._useWebGL = true;
-
-				var rdgeStr = jObj.scenedata;
-				this.myScene.importJSON( rdgeStr );
-				for (var i=0;  i<nChildren;  i++)
-				{
-					child = jObj.children[i];
-					this.importObjects( child );
-				}
-				//this.linkMaterials( this._geomRoot );
-				this.linkMaterials( this._rootChildren );
-				this.initMaterials();
-				this.linkLights();
-			}
-			else
-			{
-				this._context = this._canvas.getContext( "2d" );
-				for (var i=0;  i<nChildren;  i++)
-				{
-					child = jObj.children[i];
-					this.importObjects( child );
-				}
-				this.render();
-			}
-		}
-	},
-
-	init: {
-		value: function() {
-			var ctx1 = RDGE.globals.engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle),
-				ctx2 = RDGE.globals.engine.getContext();
-			if (ctx1 != ctx2)  console.log( "***** different contexts *****" );
-			this.renderer = ctx1.renderer;
-
-			// create a camera, set its perspective, and then point it at the origin
-			var cam = new RDGE.camera();
-			this._camera = cam;
-			cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar());
-			cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], RDGE.vec3.up());
-
-			// make this camera the active camera
-			this.renderer.cameraManager().setActiveCamera(cam);
-
-			// change clear color
-			this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]);
-
-			// create an empty scene graph
-			this.myScene = new RDGE.SceneGraph();
-
-			// load the scene graph data
-			this.loadScene();
-
-			// Add the scene to the engine - necessary if you want the engine to draw for you
-			var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" );
-			RDGE.globals.engine.AddScene(name, this.myScene);
-
-			this._initialized = true;
-		}
-	},
-
-	// main code for handling user interaction and updating the scene
-	update: {
-		value: function(dt) {
-			if (this._initialized)
-			{
-				if (!dt)  dt = 0.2;
-
-				dt = 0.01;	// use our own internal throttle
-				this.elapsed += dt;
-
-				// changed the global position uniform of light 0, another way to change behavior of a light
-				RDGE.rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
-
-				// orbit the light nodes around the boxes
-				if (this.light )  this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]);
-				if (this.light2)  this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]);
-
-				this.updateMaterials();
-
-				// now update all the nodes in the scene
-				this.myScene.update(dt);
-			}
-		}
-	},
-
-	updateMaterials: {
-		value: function() {
-			var nMats = this._materials.length;
-			for (var i=0;  i<nMats;  i++)
-			{
-				var mat = this._materials[i];
-				mat.update();
-			}
-		}
-	},
-
-	// defining the draw function to control how the scene is rendered
-	draw: {
-		value: function() {
-			if (this._initialized)
-			{
-				RDGE.globals.engine.setContext( this._canvas.rdgeid );
-
-				var ctx = RDGE.globals.engine.getContext();
-				var renderer = ctx.renderer;
-				if (renderer.unloadedTextureCount <= 0)
-				{
-					renderer.disableCulling();
-					renderer._clear();
-					this.myScene.render();
-
-					if (this._firstRender)
-					{
-						if (this._canvas.task)
-						{
-							this._firstRender = false;
-							//this._canvas.task.stop();
-						}
-					}
-				}
-			}
-		}
-	},
-
-	importObjects: {
-		value: function(jObj, parent) {
-			// read the next object
-			var gObj = this.importObject( jObj, parent );
-
-			// load the children
-			if (jObj.children)
-			{
-				var nKids = jObj.children.length;
-				for (var i=0;  i<nKids;  i++)
-				{
-					var child = jObj.children[i];
-					this.importObjects( child, gObj );
-				}
-			}
-		}
-	},
-
-	importObject: {
-		value: function(jObj, parent) {
-			var type = jObj.type;
-			var obj;
-			switch (type)
-			{
-				case 1:
-					obj = Object.create(NinjaCvsRt.RuntimeRectangle, {_materials: { value:[], writable:true}});
-					obj.importJSON( jObj );
-					break;
-
-				case 2:		// circle
-					obj = Object.create(NinjaCvsRt.RuntimeOval, {_materials: { value:[], writable:true}});
-					obj.importJSON( jObj );
-					break;
-
-				case 3:		// line
-					obj = Object.create(NinjaCvsRt.RuntimeLine, {_materials: { value:[], writable:true}});
-					obj.importJSON( jObj );
-					break;
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////
+    _canvas: { value: null, writable: true },
+    _context : { value: null, writable: true },
+    //this._importStr       = importStr;
+    _jObj: { value: null, writable: true },
+
+    _renderer: { value: null, writable: true },
+    myScene: { value: null, writable: true },
+    light: { value: null, writable: true },
+    light2: { value: null, writable: true },
+    _rootNode: { value: null, writable: true },
+
+    _firstRender: { value: true, writable: true },
+    _renderCount: { value: -1, writable: true },
+    _initialized: { value: false, writable: true },
+
+    _useWebGL: { value: false, writable: true },
+    _assetPath: { value: undefined, writable: true },
+
+    // view parameters
+    _fov: { value: 45.0, writable: true },
+    _zNear: { value: 0.1, writable: true },
+    _zFar: { value: 100.0, writable: true },
+    _viewDist: { value: 5.0, writable: true },
+
+    elapsed: { value: 0, writable: true },
+
+    _aspect: { value: 1, writable: true },
+
+    //this._geomRoot = null;
+    _rootChildren: { value: [], writable: true },
+
+    // all "live" materials
+    _materials: { value: [], writable: true },
+
+    renderWorld: {
+        value: function(canvas, jObj, assetPath) {
+            this._materials = [];
+            this._rootChildren = [];
+            this._canvas = canvas;
+            this._aspect = this._canvas.width/this._canvas.height;
+
+            this._jObj= jObj;
+
+            // provide the mapping for the asset directory
+            if (assetPath) {
+                this._assetPath = assetPath.slice();
+                if (this._assetPath[this._assetPath.length - 1] != '/')
+                    this._assetPath += '/';
+            }
+
+            if(this._assetPath !== undefined) {
+                RDGE.globals.engine.setAssetPath(this._assetPath);
+            }
+
+            // start RDGE or load Canvas 2D objects
+            if (jObj.scenedata)  this._useWebGL = true;
+            if (this._useWebGL)
+            {
+                var id = this._canvas.getAttribute( "data-RDGE-id" );
+                this._canvas.rdgeid = id;
+                RDGE.globals.engine.registerCanvas(this._canvas, this);
+                RDGE.RDGEStart( this._canvas );
+                this._canvas.task.start();
+            }
+            else
+            {
+                this.loadScene();
+            }
+        }
+    },
+
+    ///////////////////////////////////////////////////////////////////////
+    // accessors
+    ///////////////////////////////////////////////////////////////////////
+    getZNear: { value: function() { return this._zNear; }},
+    getZFar: { value: function() { return this._zFar; }},
+    getFOV: { value: function() { return this._fov; }},
+    getAspect: { value: function() { return this._aspect; }},
+    getViewDistance: { value: function() { return this._viewDist; }},
+
+    get2DContext: { value: function() { return this._context; }},
+
+    getViewportWidth: { value: function() { return this._canvas.width; }},
+    getViewportHeight: { value: function() { return this._canvas.height; }},
+
+    loadScene: {
+        value: function() {
+            var jObj = this._jObj;
+            if (!jObj.children) // || (jObj.children.length != 1))
+                throw new Error( "ill-formed JSON for runtime load: " + jObj );
+            var nChildren = jObj.children.length;
+
+            // parse the data
+            var child;
+            if (jObj.scenedata)
+            {
+                this._useWebGL = true;
+
+                var rdgeStr = jObj.scenedata;
+                this.myScene.importJSON( rdgeStr );
+                for (var i=0;  i<nChildren;  i++)
+                {
+                    child = jObj.children[i];
+                    this.importObjects( child );
+                }
+                //this.linkMaterials( this._geomRoot );
+                this.linkMaterials( this._rootChildren );
+                this.initMaterials();
+                this.linkLights();
+            }
+            else
+            {
+                this._context = this._canvas.getContext( "2d" );
+                for (var i=0;  i<nChildren;  i++)
+                {
+                    child = jObj.children[i];
+                    this.importObjects( child );
+                }
+                this.render();
+            }
+        }
+    },
+
+    init: {
+        value: function() {
+            var ctx1 = RDGE.globals.engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle),
+                ctx2 = RDGE.globals.engine.getContext();
+            if (ctx1 != ctx2)  console.log( "***** different contexts *****" );
+            this.renderer = ctx1.renderer;
+
+            // create a camera, set its perspective, and then point it at the origin
+            var cam = new RDGE.camera();
+            this._camera = cam;
+            cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar());
+            cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], RDGE.vec3.up());
+
+            // make this camera the active camera
+            this.renderer.cameraManager().setActiveCamera(cam);
+
+            // change clear color
+            this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]);
+
+            // create an empty scene graph
+            this.myScene = new RDGE.SceneGraph();
+
+            // load the scene graph data
+            this.loadScene();
+
+            // Add the scene to the engine - necessary if you want the engine to draw for you
+            var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" );
+            RDGE.globals.engine.AddScene(name, this.myScene);
+
+            this._initialized = true;
+        }
+    },
+
+    // main code for handling user interaction and updating the scene
+    update: {
+        value: function(dt) {
+            if (this._initialized)
+            {
+                if (!dt)  dt = 0.2;
+
+                dt = 0.01;  // use our own internal throttle
+                this.elapsed += dt;
+
+                // changed the global position uniform of light 0, another way to change behavior of a light
+                RDGE.rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
+
+                // orbit the light nodes around the boxes
+                if (this.light )  this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]);
+                if (this.light2)  this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]);
+
+                this.updateMaterials();
+
+                // now update all the nodes in the scene
+                this.myScene.update(dt);
+            }
+        }
+    },
+
+    updateMaterials: {
+        value: function() {
+            var nMats = this._materials.length;
+            for (var i=0;  i<nMats;  i++)
+            {
+                var mat = this._materials[i];
+                mat.update();
+            }
+        }
+    },
+
+    // defining the draw function to control how the scene is rendered
+    draw: {
+        value: function() {
+            if (this._initialized)
+            {
+                RDGE.globals.engine.setContext( this._canvas.rdgeid );
+
+                var ctx = RDGE.globals.engine.getContext();
+                var renderer = ctx.renderer;
+                if (renderer.unloadedTextureCount <= 0)
+                {
+                    renderer.disableCulling();
+                    renderer._clear();
+                    this.myScene.render();
+
+                    if (this._firstRender)
+                    {
+                        if (this._canvas.task)
+                        {
+                            this._firstRender = false;
+                            //this._canvas.task.stop();
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    importObjects: {
+        value: function(jObj, parent) {
+            // read the next object
+            var gObj = this.importObject( jObj, parent );
+
+            // load the children
+            if (jObj.children)
+            {
+                var nKids = jObj.children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = jObj.children[i];
+                    this.importObjects( child, gObj );
+                }
+            }
+        }
+    },
+
+    importObject: {
+        value: function(jObj, parent) {
+            var type = jObj.type;
+            var obj;
+            switch (type)
+            {
+                case 1:
+                    obj = Object.create(NinjaCvsRt.RuntimeRectangle, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
+
+                case 2:     // circle
+                    obj = Object.create(NinjaCvsRt.RuntimeOval, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
+
+                case 3:     // line
+                    obj = Object.create(NinjaCvsRt.RuntimeLine, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
 
                 case 5:     //subpath (created by pen tool)
                     obj = Object.create(NinjaCvsRt.RuntimeSubPath, {_materials: { value:[], writable:true}});
@@ -417,133 +417,133 @@ NinjaCvsRt.GLRuntime = Object.create(Object.prototype, {
                     obj.importJSON (jObj );
                     break;
 
-				default:
-					throw new Error( "Attempting to load unrecognized object type: " + type );
-					break;
-			}
-
-			if (obj)
-				this.addObject( obj, parent );
-
-			return obj;
-		}
-	},
-
-	addObject: {
-		value: function(obj, parent) {
-			if (!obj)  return;
-			obj.setWorld( this );
-
-			if (parent == null)
-			{
-				//this._geomRoot = obj;
-				this._rootChildren.push( obj );
-			}
-			else
-				parent.addChild( obj );
-		}
-	},
-
-	linkLights: {
-		value: function() {
-			var matNode = this.findMaterialNode( "lights", this.myScene.scene );
-			if (matNode)
-			{
-				this.light = matNode.lightChannel[1];
-				this.light2 = matNode.lightChannel[2];
-			}
-		}
-	},
-
-	linkMaterials: {
-		value: function(objArray) {
-			if (!objArray)  return;
-
-			for (var i=0;  i<objArray.length;  i++)
-			{
-				var obj = objArray[i];
-
-				// get the array of materials from the object
-				var matArray = obj._materials;
-				var nMats = matArray.length;
-				for (var j=0;  j<nMats;  j++)
-				{
-					var mat = matArray[j];
-					var nodeName = mat._materialNodeName;
-					var matNode = this.findMaterialNode( nodeName, this.myScene.scene );
-					if (matNode)
-					{
-						mat._materialNode = matNode;
-						mat._shader = matNode.shaderProgram;
-						this._materials.push( mat );
-					}
-				}
-
-				this.linkMaterials( obj.children );
-			}
-		}
-	},
-
-	initMaterials: {
-		value: function() {
-			var nMats = this._materials.length;
-			for (var i=0;  i<nMats;  i++)
-			{
-				var mat = this._materials[i];
-				mat.init( this );
-			}
-		}
-	},
-
-	findMaterialNode: {
-		value: function(nodeName, node) {
-			if (node.transformNode)
-				node = node.transformNode;
-
-			if (node.materialNode)
-			{
-				if (nodeName === node.materialNode.name)  return node.materialNode;
-			}
-
-			if (node.children)
-			{
-				var nKids = node.children.length;
-				for (var i=0;  i<nKids;  i++)
-				{
-					var child = node.children[i];
-					var rtnNode = this.findMaterialNode( nodeName, child );
-					if (rtnNode)  return rtnNode;
-				}
-			}
-		}
-	},
-
-	render: {
-		value: function(obj) {
-			//if (!obj)  obj = this._geomRoot;
-			//obj.render();
-
-			var children;
-			if (obj)
-			{
-				obj.render();
-				children = obj.children;
-			}
-			else
-				children = this._rootChildren;
-
-			if (children)
-			{
-				var nKids = children.length;
-				for (var i=0;  i<nKids;  i++)
-				{
-					var child = children[i];
-					if (child)
-						this.render( child );
-				}
-			}
-		}
-	}
+                default:
+                    throw new Error( "Attempting to load unrecognized object type: " + type );
+                    break;
+            }
+
+            if (obj)
+                this.addObject( obj, parent );
+
+            return obj;
+        }
+    },
+
+    addObject: {
+        value: function(obj, parent) {
+            if (!obj)  return;
+            obj.setWorld( this );
+
+            if (parent == null)
+            {
+                //this._geomRoot = obj;
+                this._rootChildren.push( obj );
+            }
+            else
+                parent.addChild( obj );
+        }
+    },
+
+    linkLights: {
+        value: function() {
+            var matNode = this.findMaterialNode( "lights", this.myScene.scene );
+            if (matNode)
+            {
+                this.light = matNode.lightChannel[1];
+                this.light2 = matNode.lightChannel[2];
+            }
+        }
+    },
+
+    linkMaterials: {
+        value: function(objArray) {
+            if (!objArray)  return;
+
+            for (var i=0;  i<objArray.length;  i++)
+            {
+                var obj = objArray[i];
+
+                // get the array of materials from the object
+                var matArray = obj._materials;
+                var nMats = matArray.length;
+                for (var j=0;  j<nMats;  j++)
+                {
+                    var mat = matArray[j];
+                    var nodeName = mat._materialNodeName;
+                    var matNode = this.findMaterialNode( nodeName, this.myScene.scene );
+                    if (matNode)
+                    {
+                        mat._materialNode = matNode;
+                        mat._shader = matNode.shaderProgram;
+                        this._materials.push( mat );
+                    }
+                }
+
+                this.linkMaterials( obj.children );
+            }
+        }
+    },
+
+    initMaterials: {
+        value: function() {
+            var nMats = this._materials.length;
+            for (var i=0;  i<nMats;  i++)
+            {
+                var mat = this._materials[i];
+                mat.init( this );
+            }
+        }
+    },
+
+    findMaterialNode: {
+        value: function(nodeName, node) {
+            if (node.transformNode)
+                node = node.transformNode;
+
+            if (node.materialNode)
+            {
+                if (nodeName === node.materialNode.name)  return node.materialNode;
+            }
+
+            if (node.children)
+            {
+                var nKids = node.children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = node.children[i];
+                    var rtnNode = this.findMaterialNode( nodeName, child );
+                    if (rtnNode)  return rtnNode;
+                }
+            }
+        }
+    },
+
+    render: {
+        value: function(obj) {
+            //if (!obj)  obj = this._geomRoot;
+            //obj.render();
+
+            var children;
+            if (obj)
+            {
+                obj.render();
+                children = obj.children;
+            }
+            else
+                children = this._rootChildren;
+
+            if (children)
+            {
+                var nKids = children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = children[i];
+                    if (child)
+                        this.render( child );
+                }
+            }
+        }
+    }
 });
 
 ///////////////////////////////////////////////////////////////////////
@@ -551,263 +551,263 @@ NinjaCvsRt.GLRuntime = Object.create(Object.prototype, {
 //      Super class for all geometry classes
 ///////////////////////////////////////////////////////////////////////
 NinjaCvsRt.RuntimeGeomObj = Object.create(Object.prototype, {
-	///////////////////////////////////////////////////////////////////////
-	// Constants
-	///////////////////////////////////////////////////////////////////////
-	GEOM_TYPE_RECTANGLE: { value: 1, writable: false },
-	GEOM_TYPE_CIRCLE: { value: 2, writable: false },
-	GEOM_TYPE_LINE: { value: 3, writable: false },
-	GEOM_TYPE_PATH: { value: 4, writable: false },
-	GEOM_TYPE_CUBIC_BEZIER: { value: 5, writable: false },
+    ///////////////////////////////////////////////////////////////////////
+    // Constants
+    ///////////////////////////////////////////////////////////////////////
+    GEOM_TYPE_RECTANGLE: { value: 1, writable: false },
+    GEOM_TYPE_CIRCLE: { value: 2, writable: false },
+    GEOM_TYPE_LINE: { value: 3, writable: false },
+    GEOM_TYPE_PATH: { value: 4, writable: false },
+    GEOM_TYPE_CUBIC_BEZIER: { value: 5, writable: false },
     GEOM_TYPE_BRUSH_STROKE: { value: 6, writable: false },
-	GEOM_TYPE_UNDEFINED: { value: -1, writable: false },
-
-	///////////////////////////////////////////////////////////////////////
-	// Instance variables
-	///////////////////////////////////////////////////////////////////////
-	_world: { value: null, writable: true },
-	_children: { value: null, writable: true },
-
-	// stroke and fill colors
-	_strokeColor: { value: [0,0,0,0], writable: true },
-	_fillColor: { value: [0,0,0,0], writable: true },
-
-	// array of materials
-	_materials : { value: null, writable: true },
-
-	///////////////////////////////////////////////////////////////////////
-	// Property accessors
-	///////////////////////////////////////////////////////////////////////
-	geomType: {
-		value: function() {
-			return this.GEOM_TYPE_UNDEFINED;
-		}
-	},
-
-	setWorld: {
-		value: function(w) {
-			this._world = w;
-		}
-	},
-
-	getWorld: {
-		value: function() {
-			return this._world;
-		}
-	},
-
-	///////////////////////////////////////////////////////////////////////
-	// Methods
-	///////////////////////////////////////////////////////////////////////
-	addChild: {
-		value: function(child) {
-			if (!this._children)  this._children = [];
-
-			this._children.push( child );
-		}
-	},
-
-	importJSON: {
-		value: function() {
-		}
-	},
-
-	importMaterials: {
-		value: function(jObj) {
-			if (!jObj || !jObj.materials)  return;
-
-			var nMaterials = jObj.nMaterials;
-			var matArray = jObj.materials;
-			for (var i=0;  i<nMaterials;  i++)
-			{
-				var mat;
-				var matObj = matArray[i].material;
-				var matNodeName = matArray[i].materialNodeName;
-				var shaderName = matObj.material;
-				switch (shaderName)
-				{
-					case "flat":			mat = Object.create(NinjaCvsRt.RuntimeFlatMaterial, {});			break;
-					case "radialGradient":  mat = Object.create(NinjaCvsRt.RuntimeRadialGradientMaterial, {});	break;
-					case "linearGradient":  mat = Object.create(NinjaCvsRt.RuntimeLinearGradientMaterial, {});  break;
-					case "bumpMetal":		mat = Object.create(NinjaCvsRt.RuntimeBumpMetalMaterial, {});		break;
-					case "uber":			mat = Object.create(NinjaCvsRt.RuntimeUberMaterial, {});			break;
-					case "plasma":			mat = Object.create(NinjaCvsRt.RuntimePlasmaMaterial, {});			break;
-					case "taper":			mat = Object.create(NinjaCvsRt.RuntimeTaperMaterial, {});			break;
-
-					case "paris":
-					case "water":			mat = Object.create(NinjaCvsRt.RuntimeWaterMaterial, {});			break;
-
-					case "deform":
-					case "raiders":
-					case "tunnel":
-					case "reliefTunnel":
-					case "squareTunnel":
-					case "twist":
-					case "fly":
-					case "julia":
-					case "mandel":
-					case "star":
-					case "zinvert":
-					case "keleidoscope":
-					case "radialBlur":
-					case "pulse":
-						mat = Object.create(NinjaCvsRt.RuntimePulseMaterial, {});
-						break;
-
-					case "twistVert":
-						mat = Object.create(NinjaCvsRt.RuntimeTwistVertMaterial, {});
-						break;
-
-					case "flag":
-						mat = Object.create(NinjaCvsRt.RuntimeFlagMaterial, {});
-						break;
-
-					default:
-						console.log( "material type: " + shaderName + " is not supported" );
-						break;
-				}
-
-				if (mat)
-				{
-					mat.importJSON( matObj );
-					mat._materialNodeName = matNodeName;
-					this._materials.push( mat );
-				}
-			}
-		}
-	},
-
-
-	////////////////////////////////////////////////////////////////////
-	// TODO - vector functions should be moved to their own class
-	vecAdd: {
-		value: function(dimen, a, b) {
-			var rtnVec;
-			if ((a.length < dimen) || (b.length < dimen))
-			{
-				throw new Error( "dimension error in vecAdd" );
-			}
-
-			rtnVec = [];
-			for (var i=0;  i<dimen;  i++)
-				rtnVec[i] = a[i] + b[i];
-
-			return rtnVec;
-		}
-	},
-
-	vecSubtract: {
-		value: function(dimen, a, b) {
-			var rtnVec;
-			if ((a.length < dimen) || (b.length < dimen))
-			{
-				throw new Error( "dimension error in vecSubtract" );
-			}
-
-			rtnVec = [];
-			for (var i=0;  i<dimen;  i++)
-				rtnVec[i] = a[i] - b[i];
-
-			return rtnVec;
-		}
-	},
-
-	vecDot: {
-		value: function(dimen, v0, v1) {
-			if ((v0.length < dimen) || (v1.length < dimen))
-			{
-				throw new Error( "dimension error in vecDot" );
-			}
-
-			var sum = 0.0;
-			for (var i=0;  i<dimen;  i++)
-				sum += v0[i] * v1[i];
-
-			return sum;
-		}
-	},
-
-	vecMag: {
-			value: function(dimen, vec) {
-			var sum = 0.0;
-			for (var i=0;  i<dimen;  i++)
-				sum += vec[i]*vec[i];
-			return Math.sqrt( sum );
-		}
-	},
-
-	vecScale: {
-		value: function(dimen, vec, scale) {
-			for (var i=0;  i<dimen;  i++)
-				vec[i] *= scale;
-
-			return vec;
-		}
-	},
-
-	vecNormalize: {
-		value: function(dimen, vec, len) {
-			var rtnVec;
-			if (!len)  len = 1.0;
-
-			var sum = 0.0, i = 0;
-			for (i = 0;  i<dimen;  i++)
-				sum += vec[i]*vec[i];
-			sum = Math.sqrt( sum );
-
-			if (Math.abs(sum) >= 0.001)
-			{
-				var scale = len/sum;
-				rtnVec = [];
-				for (i = 0;  i<dimen;  i++)
-					rtnVec[i] = vec[i]*scale;
-			}
-
-			return rtnVec;
-		}
-	},
-
-	transformPoint: {
-		value: function(srcPt, mat) {
-			var pt = srcPt.slice(0);
-			var	x = this.vecDot(3,  pt, [mat[0], mat[4], mat[ 8]] ) + mat[12],
-				y = this.vecDot(3,  pt, [mat[1], mat[5], mat[ 9]] ) + mat[13],
-				z = this.vecDot(3,  pt, [mat[2], mat[6], mat[10]] ) + mat[14];
-
-			return [x, y, z];
-		}
-	},
-
-	MatrixIdentity: {
-		value: function(dimen) {
-			var mat = [];
-
-			for (var i = 0; i<dimen*dimen; i++)  {
-				mat.push(0);
-			}
-
-			var index = 0;
-			for (var j = 0; j<dimen; j++) {
-				mat[index] = 1.0;
-				index += dimen + 1;
-			}
-
-			return mat;
-		}
-	},
-
-	MatrixRotationZ: {
-		value: function(angle) {
-			var mat = this.MatrixIdentity(4);
-			//glmat4.rotateZ(mat, angle);
-			var sn = Math.sin(angle),
-				cs = Math.cos(angle);
-			mat[0] = cs;	mat[4] = -sn;
-			mat[1] = sn;	mat[5] =  cs;
-
-			return mat;
-		}
-	}
+    GEOM_TYPE_UNDEFINED: { value: -1, writable: false },
+
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////
+    _world: { value: null, writable: true },
+    _children: { value: null, writable: true },
+
+    // stroke and fill colors
+    _strokeColor: { value: [0,0,0,0], writable: true },
+    _fillColor: { value: [0,0,0,0], writable: true },
+
+    // array of materials
+    _materials : { value: null, writable: true },
+
+    ///////////////////////////////////////////////////////////////////////
+    // Property accessors
+    ///////////////////////////////////////////////////////////////////////
+    geomType: {
+        value: function() {
+            return this.GEOM_TYPE_UNDEFINED;
+        }
+    },
+
+    setWorld: {
+        value: function(w) {
+            this._world = w;
+        }
+    },
+
+    getWorld: {
+        value: function() {
+            return this._world;
+        }
+    },
+
+    ///////////////////////////////////////////////////////////////////////
+    // Methods
+    ///////////////////////////////////////////////////////////////////////
+    addChild: {
+        value: function(child) {
+            if (!this._children)  this._children = [];
+
+            this._children.push( child );
+        }
+    },
+
+    importJSON: {
+        value: function() {
+        }
+    },
+
+    importMaterials: {
+        value: function(jObj) {
+            if (!jObj || !jObj.materials)  return;
+
+            var nMaterials = jObj.nMaterials;
+            var matArray = jObj.materials;
+            for (var i=0;  i<nMaterials;  i++)
+            {
+                var mat;
+                var matObj = matArray[i].material;
+                var matNodeName = matArray[i].materialNodeName;
+                var shaderName = matObj.material;
+                switch (shaderName)
+                {
+                    case "flat":            mat = Object.create(NinjaCvsRt.RuntimeFlatMaterial, {});            break;
+                    case "radialGradient":  mat = Object.create(NinjaCvsRt.RuntimeRadialGradientMaterial, {});  break;
+                    case "linearGradient":  mat = Object.create(NinjaCvsRt.RuntimeLinearGradientMaterial, {});  break;
+                    case "bumpMetal":       mat = Object.create(NinjaCvsRt.RuntimeBumpMetalMaterial, {});       break;
+                    case "uber":            mat = Object.create(NinjaCvsRt.RuntimeUberMaterial, {});            break;
+                    case "plasma":          mat = Object.create(NinjaCvsRt.RuntimePlasmaMaterial, {});          break;
+                    case "taper":           mat = Object.create(NinjaCvsRt.RuntimeTaperMaterial, {});           break;
+
+                    case "paris":
+                    case "water":           mat = Object.create(NinjaCvsRt.RuntimeWaterMaterial, {});           break;
+
+                    case "deform":
+                    case "raiders":
+                    case "tunnel":
+                    case "reliefTunnel":
+                    case "squareTunnel":
+                    case "twist":
+                    case "fly":
+                    case "julia":
+                    case "mandel":
+                    case "star":
+                    case "zinvert":
+                    case "keleidoscope":
+                    case "radialBlur":
+                    case "pulse":
+                        mat = Object.create(NinjaCvsRt.RuntimePulseMaterial, {});
+                        break;
+
+                    case "twistVert":
+                        mat = Object.create(NinjaCvsRt.RuntimeTwistVertMaterial, {});
+                        break;
+
+                    case "flag":
+                        mat = Object.create(NinjaCvsRt.RuntimeFlagMaterial, {});
+                        break;
+
+                    default:
+                        console.log( "material type: " + shaderName + " is not supported" );
+                        break;
+                }
+
+                if (mat)
+                {
+                    mat.importJSON( matObj );
+                    mat._materialNodeName = matNodeName;
+                    this._materials.push( mat );
+                }
+            }
+        }
+    },
+
+
+    ////////////////////////////////////////////////////////////////////
+    // TODO - vector functions should be moved to their own class
+    vecAdd: {
+        value: function(dimen, a, b) {
+            var rtnVec;
+            if ((a.length < dimen) || (b.length < dimen))
+            {
+                throw new Error( "dimension error in vecAdd" );
+            }
+
+            rtnVec = [];
+            for (var i=0;  i<dimen;  i++)
+                rtnVec[i] = a[i] + b[i];
+
+            return rtnVec;
+        }
+    },
+
+    vecSubtract: {
+        value: function(dimen, a, b) {
+            var rtnVec;
+            if ((a.length < dimen) || (b.length < dimen))
+            {
+                throw new Error( "dimension error in vecSubtract" );
+            }
+
+            rtnVec = [];
+            for (var i=0;  i<dimen;  i++)
+                rtnVec[i] = a[i] - b[i];
+
+            return rtnVec;
+        }
+    },
+
+    vecDot: {
+        value: function(dimen, v0, v1) {
+            if ((v0.length < dimen) || (v1.length < dimen))
+            {
+                throw new Error( "dimension error in vecDot" );
+            }
+
+            var sum = 0.0;
+            for (var i=0;  i<dimen;  i++)
+                sum += v0[i] * v1[i];
+
+            return sum;
+        }
+    },
+
+    vecMag: {
+            value: function(dimen, vec) {
+            var sum = 0.0;
+            for (var i=0;  i<dimen;  i++)
+                sum += vec[i]*vec[i];
+            return Math.sqrt( sum );
+        }
+    },
+
+    vecScale: {
+        value: function(dimen, vec, scale) {
+            for (var i=0;  i<dimen;  i++)
+                vec[i] *= scale;
+
+            return vec;
+        }
+    },
+
+    vecNormalize: {
+        value: function(dimen, vec, len) {
+            var rtnVec;
+            if (!len)  len = 1.0;
+
+            var sum = 0.0, i = 0;
+            for (i = 0;  i<dimen;  i++)
+                sum += vec[i]*vec[i];
+            sum = Math.sqrt( sum );
+
+            if (Math.abs(sum) >= 0.001)
+            {
+                var scale = len/sum;
+                rtnVec = [];
+                for (i = 0;  i<dimen;  i++)
+                    rtnVec[i] = vec[i]*scale;
+            }
+
+            return rtnVec;
+        }
+    },
+
+    transformPoint: {
+        value: function(srcPt, mat) {
+            var pt = srcPt.slice(0);
+            var x = this.vecDot(3,  pt, [mat[0], mat[4], mat[ 8]] ) + mat[12],
+                y = this.vecDot(3,  pt, [mat[1], mat[5], mat[ 9]] ) + mat[13],
+                z = this.vecDot(3,  pt, [mat[2], mat[6], mat[10]] ) + mat[14];
+
+            return [x, y, z];
+        }
+    },
+
+    MatrixIdentity: {
+        value: function(dimen) {
+            var mat = [];
+
+            for (var i = 0; i<dimen*dimen; i++)  {
+                mat.push(0);
+            }
+
+            var index = 0;
+            for (var j = 0; j<dimen; j++) {
+                mat[index] = 1.0;
+                index += dimen + 1;
+            }
+
+            return mat;
+        }
+    },
+
+    MatrixRotationZ: {
+        value: function(angle) {
+            var mat = this.MatrixIdentity(4);
+            //glmat4.rotateZ(mat, angle);
+            var sn = Math.sin(angle),
+                cs = Math.cos(angle);
+            mat[0] = cs;    mat[4] = -sn;
+            mat[1] = sn;    mat[5] =  cs;
+
+            return mat;
+        }
+    }
 });
 
 
@@ -816,211 +816,211 @@ NinjaCvsRt.RuntimeGeomObj = Object.create(Object.prototype, {
 ///////////////////////////////////////////////////////////////////////
 NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, {
 
-	importJSON: {
-		value: function(jObj) {
-			this._xOffset			= jObj.xoff;
-			this._yOffset			= jObj.yoff;
-			this._width				= jObj.width;
-			this._height			= jObj.height;
-			this._strokeWidth		= jObj.strokeWidth;
-			this._strokeColor		= jObj.strokeColor;
-			this._fillColor			= jObj.fillColor;
-			this._tlRadius			= jObj.tlRadius;
-			this._trRadius			= jObj.trRadius;
-			this._blRadius			= jObj.blRadius;
-			this._brRadius			= jObj.brRadius;
-			this._innerRadius		= jObj.innerRadius;
-			this._strokeStyle		= jObj.strokeStyle;
-			var strokeMaterialName	= jObj.strokeMat;
-			var fillMaterialName	= jObj.fillMat;
-			this.importMaterials( jObj.materials );
-		}
-	},
-
-	renderPath: {
-		value: function(inset, ctx) {
-			// various declarations
-			var pt,  rad,  ctr,  startPt, bPts;
-			var width  = Math.round(this._width),
-				height = Math.round(this._height),
-				hw = 0.5*width,
-				hh = 0.5*height;
-
-			pt = [inset, inset];	// top left corner
-
-			var tlRad = this._tlRadius; //top-left radius
-			var trRad = this._trRadius;
-			var blRad = this._blRadius;
-			var brRad = this._brRadius;
-			// limit the radii to half the rectangle dimension
-			var minDimen = hw < hh ? hw : hh;
-			if (tlRad > minDimen)  tlRad = minDimen;
-			if (blRad > minDimen)  blRad = minDimen;
-			if (brRad > minDimen)  brRad = minDimen;
-			if (trRad > minDimen)  trRad = minDimen;
-
-			var world = this.getWorld();
-			var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
-			var cop = [0.5*vpw, 0.5*vph, 0.0];
-			var xCtr = cop[0] + this._xOffset,					yCtr = cop[1] - this._yOffset;
-			var xLeft = xCtr - 0.5*this._width,					yTop = yCtr - 0.5*this._height;
-			var xDist = cop[0] - xLeft,							yDist = cop[1] - yTop;
-			var xOff = 0.5*vpw - xDist,							yOff  = 0.5*vph - yDist;
-
-			if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
-			{
-				ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
-			}
-			else
-			{
-				// get the top left point
-				rad = tlRad - inset;
-				if (rad < 0)  rad = 0;
-				pt[1] += rad;
-				if (Math.abs(rad) < 0.001)  pt[1] = inset;
-				ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
-
-				// get the bottom left point
-				pt = [inset, height - inset];
-				rad = blRad - inset;
-				if (rad < 0)  rad = 0;
-				pt[1] -= rad;
-				ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
-
-				// get the bottom left curve
-				if (rad > 0.001)
-					ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
-
-				// do the bottom of the rectangle
-				pt = [width - inset,  height - inset];
-				rad = brRad - inset;
-				if (rad < 0)  rad = 0;
-				pt[0] -= rad;
-				ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
-
-				// get the bottom right arc
-				if (rad > 0.001)
-					ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
-
-				// get the right of the rectangle
-				pt = [width - inset,  inset];
-				rad = trRad - inset;
-				if (rad < 0)  rad = 0;
-				pt[1] += rad;
-				ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
-
-				// do the top right corner
-				if (rad > 0.001)
-					ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
-
-				// do the top of the rectangle
-				pt = [inset, inset];
-				rad = tlRad - inset;
-				if (rad < 0)  rad = 0;
-				pt[0] += rad;
-				ctx.lineTo( pt[0]+xOff, pt[1]+yOff);
-
-				// do the top left corner
-				if (rad > 0.001)
-					ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
-				else
-					ctx.lineTo( inset+xOff, 2*inset+yOff );
-			}
-		}
-	},
-
-	render: {
-		value: function() {
-			// get the world
-			var world = this.getWorld();
-			if (!world)  throw( "null world in rectangle render" );
-
-			 // get the context
-			var ctx = world.get2DContext();
-			if (!ctx)  return;
-
-			// get some dimensions
-			var lw = this._strokeWidth;
-			var	w = world.getViewportWidth(),
-				h = world.getViewportHeight();
-
-			var c,
-				inset,
-				gradient,
-				colors,
-				len,
-				n,
-				position,
-				cs;
-			// render the fill
-			ctx.beginPath();
-			if (this._fillColor) {
-				inset = Math.ceil( lw ) - 0.5;
-
-				if(this._fillColor.gradientMode) {
-					if(this._fillColor.gradientMode === "radial") {
-						var ww = w - 2*lw,  hh = h - 2*lw;
-						gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
-					} else {
-						gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
-					}
-					colors = this._fillColor.color;
-
-					len = colors.length;
-
-					for(n=0; n<len; n++) {
-						position = colors[n].position/100;
-						cs = colors[n].value;
-						gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-					}
-
-					ctx.fillStyle = gradient;
-
-				} else {
-					c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
-					ctx.fillStyle = c;
-				}
-
-				ctx.lineWidth	= lw;
-				this.renderPath( inset, ctx );
-				ctx.fill();
-				ctx.closePath();
-			}
-
-			// render the stroke
-			ctx.beginPath();
-			if (this._strokeColor) {
-				inset = Math.ceil( 0.5*lw ) - 0.5;
-
-				if(this._strokeColor.gradientMode) {
-					if(this._strokeColor.gradientMode === "radial")
-						gradient = ctx.createRadialGradient(w/2, h/2, 0,  w/2, h/2, Math.max(h, w)/2);
-					else
-						gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-					colors = this._strokeColor.color;
-
-					len = colors.length;
-
-					for(n=0; n<len; n++) {
-						position = colors[n].position/100;
-						cs = colors[n].value;
-						gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-					}
-
-					ctx.strokeStyle = gradient;
-
-				} else {
-					c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-					ctx.strokeStyle = c;
-				}
-
-				ctx.lineWidth	= lw;
-				this.renderPath( inset, ctx );
-				ctx.stroke();
-				ctx.closePath();
-			}
-		}
-	}
+    importJSON: {
+        value: function(jObj) {
+            this._xOffset           = jObj.xoff;
+            this._yOffset           = jObj.yoff;
+            this._width             = jObj.width;
+            this._height            = jObj.height;
+            this._strokeWidth       = jObj.strokeWidth;
+            this._strokeColor       = jObj.strokeColor;
+            this._fillColor         = jObj.fillColor;
+            this._tlRadius          = jObj.tlRadius;
+            this._trRadius          = jObj.trRadius;
+            this._blRadius          = jObj.blRadius;
+            this._brRadius          = jObj.brRadius;
+            this._innerRadius       = jObj.innerRadius;
+            this._strokeStyle       = jObj.strokeStyle;
+            var strokeMaterialName  = jObj.strokeMat;
+            var fillMaterialName    = jObj.fillMat;
+            this.importMaterials( jObj.materials );
+        }
+    },
+
+    renderPath: {
+        value: function(inset, ctx) {
+            // various declarations
+            var pt,  rad,  ctr,  startPt, bPts;
+            var width  = Math.round(this._width),
+                height = Math.round(this._height),
+                hw = 0.5*width,
+                hh = 0.5*height;
+
+            pt = [inset, inset];    // top left corner
+
+            var tlRad = this._tlRadius; //top-left radius
+            var trRad = this._trRadius;
+            var blRad = this._blRadius;
+            var brRad = this._brRadius;
+            // limit the radii to half the rectangle dimension
+            var minDimen = hw < hh ? hw : hh;
+            if (tlRad > minDimen)  tlRad = minDimen;
+            if (blRad > minDimen)  blRad = minDimen;
+            if (brRad > minDimen)  brRad = minDimen;
+            if (trRad > minDimen)  trRad = minDimen;
+
+            var world = this.getWorld();
+            var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
+            var cop = [0.5*vpw, 0.5*vph, 0.0];
+            var xCtr = cop[0] + this._xOffset,                  yCtr = cop[1] - this._yOffset;
+            var xLeft = xCtr - 0.5*this._width,                 yTop = yCtr - 0.5*this._height;
+            var xDist = cop[0] - xLeft,                         yDist = cop[1] - yTop;
+            var xOff = 0.5*vpw - xDist,                         yOff  = 0.5*vph - yDist;
+
+            if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
+            {
+                ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
+            }
+            else
+            {
+                // get the top left point
+                rad = tlRad - inset;
+                if (rad < 0)  rad = 0;
+                pt[1] += rad;
+                if (Math.abs(rad) < 0.001)  pt[1] = inset;
+                ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
+
+                // get the bottom left point
+                pt = [inset, height - inset];
+                rad = blRad - inset;
+                if (rad < 0)  rad = 0;
+                pt[1] -= rad;
+                ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
+
+                // get the bottom left curve
+                if (rad > 0.001)
+                    ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
+
+                // do the bottom of the rectangle
+                pt = [width - inset,  height - inset];
+                rad = brRad - inset;
+                if (rad < 0)  rad = 0;
+                pt[0] -= rad;
+                ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
+
+                // get the bottom right arc
+                if (rad > 0.001)
+                    ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
+
+                // get the right of the rectangle
+                pt = [width - inset,  inset];
+                rad = trRad - inset;
+                if (rad < 0)  rad = 0;
+                pt[1] += rad;
+                ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
+
+                // do the top right corner
+                if (rad > 0.001)
+                    ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
+
+                // do the top of the rectangle
+                pt = [inset, inset];
+                rad = tlRad - inset;
+                if (rad < 0)  rad = 0;
+                pt[0] += rad;
+                ctx.lineTo( pt[0]+xOff, pt[1]+yOff);
+
+                // do the top left corner
+                if (rad > 0.001)
+                    ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
+                else
+                    ctx.lineTo( inset+xOff, 2*inset+yOff );
+            }
+        }
+    },
+
+    render: {
+        value: function() {
+            // get the world
+            var world = this.getWorld();
+            if (!world)  throw( "null world in rectangle render" );
+
+             // get the context
+            var ctx = world.get2DContext();
+            if (!ctx)  return;
+
+            // get some dimensions
+            var lw = this._strokeWidth;
+            var w = world.getViewportWidth(),
+                h = world.getViewportHeight();
+
+            var c,
+                inset,
+                gradient,
+                colors,
+                len,
+                n,
+                position,
+                cs;
+            // render the fill
+            ctx.beginPath();
+            if (this._fillColor) {
+                inset = Math.ceil( lw ) - 0.5;
+
+                if(this._fillColor.gradientMode) {
+                    if(this._fillColor.gradientMode === "radial") {
+                        var ww = w - 2*lw,  hh = h - 2*lw;
+                        gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
+                    } else {
+                        gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
+                    }
+                    colors = this._fillColor.color;
+
+                    len = colors.length;
+
+                    for(n=0; n<len; n++) {
+                        position = colors[n].position/100;
+                        cs = colors[n].value;
+                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                    }
+
+                    ctx.fillStyle = gradient;
+
+                } else {
+                    c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+                    ctx.fillStyle = c;
+                }
+
+                ctx.lineWidth   = lw;
+                this.renderPath( inset, ctx );
+                ctx.fill();
+                ctx.closePath();
+            }
+
+            // render the stroke
+            ctx.beginPath();
+            if (this._strokeColor) {
+                inset = Math.ceil( 0.5*lw ) - 0.5;
+
+                if(this._strokeColor.gradientMode) {
+                    if(this._strokeColor.gradientMode === "radial")
+                        gradient = ctx.createRadialGradient(w/2, h/2, 0,  w/2, h/2, Math.max(h, w)/2);
+                    else
+                        gradient = ctx.createLinearGradient(0, h/2, w, h/2);
+                    colors = this._strokeColor.color;
+
+                    len = colors.length;
+
+                    for(n=0; n<len; n++) {
+                        position = colors[n].position/100;
+                        cs = colors[n].value;
+                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                    }
+
+                    ctx.strokeStyle = gradient;
+
+                } else {
+                    c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+                    ctx.strokeStyle = c;
+                }
+
+                ctx.lineWidth   = lw;
+                this.renderPath( inset, ctx );
+                ctx.stroke();
+                ctx.closePath();
+            }
+        }
+    }
 });
 
 ///////////////////////////////////////////////////////////////////////
@@ -1028,95 +1028,95 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, {
 ///////////////////////////////////////////////////////////////////////
 NinjaCvsRt.RuntimeLine = Object.create(NinjaCvsRt.RuntimeGeomObj, {
 
-	importJSON: {
-		value: function(jObj) {
-			this._xOffset			= jObj.xoff;
-			this._yOffset			= jObj.yoff;
-			this._width				= jObj.width;
-			this._height			= jObj.height;
-			this._xAdj			    = jObj.xAdj;
-			this._yAdj			    = jObj.yAdj;
-			this._strokeWidth		= jObj.strokeWidth;
-			this._slope 		    = jObj.slope;
-			this._strokeStyle		= jObj.strokeStyle;
-			this._strokeColor		= jObj.strokeColor;
-			var strokeMaterialName	= jObj.strokeMat;
-			this.importMaterials( jObj.materials );
-		}
-	},
-
-	render: {
-		value: function() {
-			// get the world
-			var world = this.getWorld();
-			if (!world)  throw( "null world in buildBuffers" );
-
-			 // get the context
-			var ctx = world.get2DContext();
-			if (!ctx)  return;
-
-			// set up the stroke style
-			var lineWidth = this._strokeWidth,
-				w = this._width,
-				h = this._height;
-
-			var c,
-				gradient,
-				colors,
-				len,
-				n,
-				position,
-				cs;
-
-			ctx.beginPath();
-			ctx.lineWidth	= lineWidth;
-			if (this._strokeColor) {
-				if(this._strokeColor.gradientMode) {
-					if(this._strokeColor.gradientMode === "radial") {
-						gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2));
-					} else {
-						gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-					}
-					colors = this._strokeColor.color;
-
-					len = colors.length;
-
-					for(n=0; n<len; n++) {
-						position = colors[n].position/100;
-						cs = colors[n].value;
-						gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-					}
-
-					ctx.strokeStyle = gradient;
-
-				} else {
-					c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-					ctx.strokeStyle = c;
-				}
-
-				// get the points
-				var p0,  p1;
-				if(this._slope === "vertical") {
-					p0 = [0.5*w, 0];
-					p1 = [0.5*w, h];
-				} else if(this._slope === "horizontal") {
-					p0 = [0, 0.5*h];
-					p1 = [w, 0.5*h];
-				} else if(this._slope > 0) {
-					p0 = [this._xAdj, this._yAdj];
-					p1 = [w - this._xAdj,  h - this._yAdj];
-				} else {
-					p0 = [this._xAdj, h - this._yAdj];
-					p1 = [w - this._xAdj,  this._yAdj];
-				}
-
-				// draw the line
-				ctx.moveTo( p0[0],  p0[1] );
-				ctx.lineTo( p1[0],  p1[1] );
-				ctx.stroke();
-			}
-		}
-	}
+    importJSON: {
+        value: function(jObj) {
+            this._xOffset           = jObj.xoff;
+            this._yOffset           = jObj.yoff;
+            this._width             = jObj.width;
+            this._height            = jObj.height;
+            this._xAdj              = jObj.xAdj;
+            this._yAdj              = jObj.yAdj;
+            this._strokeWidth       = jObj.strokeWidth;
+            this._slope             = jObj.slope;
+            this._strokeStyle       = jObj.strokeStyle;
+            this._strokeColor       = jObj.strokeColor;