diff --git a/README.md b/README.md
index e29f350..0a57e51 100644
--- a/README.md
+++ b/README.md
@@ -14,10 +14,10 @@ not conflict with other ChiliPeppr widgets.
 | ID                    | com-chilipeppr-widget-3dviewer |
 | Name                  | Widget / 3D GCode Viewer |
 | Description           | Visualize your GCode in 3D by simulating your GCode run or seeing where your run is at in 3D while your CNC operation is in action. |
-| chilipeppr.load() URL | http://raw.githubusercontent.com/chilipeppr/widget-3dviewer/master/auto-generated-widget.html |
-| Edit URL              | http://ide.c9.io/chilipeppr/widget-3dviewer |
-| Github URL            | http://github.com/chilipeppr/widget-3dviewer |
-| Test URL              | https://preview.c9users.io/chilipeppr/widget-3dviewer/widget.html |
+| chilipeppr.load() URL | http://raw.githubusercontent.com/dchote/widget-3dviewer/master/auto-generated-widget.html |
+| Edit URL              | http://ide.c9.io/undefined/undefined |
+| Github URL            | http://github.com/dchote/widget-3dviewer |
+| Test URL              | https://preview.c9users.io/undefined/undefined/widget.html |
 
 ## Example Code for chilipeppr.load() Statement
 
@@ -33,7 +33,7 @@ $("body").append('<' + 'div id="myDivWidget3dviewer"><' + '/div>');
 
 chilipeppr.load(
   "#myDivWidget3dviewer",
-  "http://raw.githubusercontent.com/chilipeppr/widget-3dviewer/master/auto-generated-widget.html",
+  "http://raw.githubusercontent.com/dchote/widget-3dviewer/master/auto-generated-widget.html",
   function() {
     // Callback after widget loaded into #myDivWidget3dviewer
     // Now use require.js to get reference to instantiated widget
@@ -132,9 +132,9 @@ The table below shows, in order, the methods and properties inside the widget/el
           </tr>
       </thead>
       <tbody>
-      <tr valign="top"><td>id</td><td>string</td><td>"com-chilipeppr-widget-3dviewer"</td></tr><tr valign="top"><td>name</td><td>string</td><td>"Widget / 3D GCode Viewer"</td></tr><tr valign="top"><td>desc</td><td>string</td><td>"Visualize your GCode in 3D by simulating your GCode run or seeing where your run is at in 3D while your CNC operation is in action."</td></tr><tr valign="top"><td>url</td><td>string</td><td>"http://raw.githubusercontent.com/chilipeppr/widget-3dviewer/master/auto-generated-widget.html"</td></tr><tr valign="top"><td>fiddleurl</td><td>string</td><td>"http://ide.c9.io/chilipeppr/widget-3dviewer"</td></tr><tr valign="top"><td>githuburl</td><td>string</td><td>"http://github.com/chilipeppr/widget-3dviewer"</td></tr><tr valign="top"><td>testurl</td><td>string</td><td>"http://widget-3dviewer-chilipeppr.c9users.io/widget.html"</td></tr><tr valign="top"><td>publish</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>subscribe</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>foreignSubscribe</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>foreignPublish</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>scene</td><td>object</td><td></td></tr><tr valign="top"><td>object</td><td>object</td><td></td></tr><tr valign="top"><td>camera</td><td>object</td><td></td></tr><tr valign="top"><td>controls</td><td>object</td><td></td></tr><tr valign="top"><td>toolhead</td><td>object</td><td></td></tr><tr valign="top"><td>tween</td><td>object</td><td></td></tr><tr valign="top"><td>tweenHighlight</td><td>object</td><td></td></tr><tr valign="top"><td>tweenIndex</td><td>object</td><td></td></tr><tr valign="top"><td>tweenSpeed</td><td>number</td><td></td></tr><tr valign="top"><td>tweenPaused</td><td>boolean</td><td></td></tr><tr valign="top"><td>tweenIsPlaying</td><td>boolean</td><td></td></tr><tr valign="top"><td>wantAnimate</td><td>boolean</td><td></td></tr><tr valign="top"><td>initOptions</td><td>object</td><td></td></tr><tr valign="top"><td>init</td><td>function</td><td>function (initOptions) </td></tr><tr valign="top"><td>setupScenePubSub</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onSignalSceneReloadedFailAttempts</td><td>number</td><td></td></tr><tr valign="top"><td>onSignalSceneReloaded</td><td>function</td><td>function () </td></tr><tr valign="top"><td>isInspectSelect</td><td>boolean</td><td></td></tr><tr valign="top"><td>initInspect</td><td>function</td><td>function () </td></tr><tr valign="top"><td>setupInspect</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>unsetupInspect</td><td>function</td><td>function () </td></tr><tr valign="top"><td>toggleInspect</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>inspectKeyDown</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>inspectKeyUp</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>inspectMouseClick</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>onInspectGoto</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>inspectArrowGrp</td><td>object</td><td></td></tr><tr valign="top"><td>createInspectArrow</td><td>function</td><td>function () </td></tr><tr valign="top"><td>inspectCurPos</td><td>object</td><td></td></tr><tr valign="top"><td>inspectLastObj</td><td>object</td><td></td></tr><tr valign="top"><td>inspectLastDecorateGroup</td><td>object</td><td></td></tr><tr valign="top"><td>inspectDlgEl</td><td>object</td><td></td></tr><tr valign="top"><td>inspectMouseMove</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>createGlow</td><td>function</td><td>function (threeObj) </td></tr><tr valign="top"><td>createGlowCubeCaps</td><td>function</td><td>function (threeObj) </td></tr><tr valign="top"><td>isJogBtnAttached</td><td>boolean</td><td></td></tr><tr valign="top"><td>isJogSelect</td><td>boolean</td><td></td></tr><tr valign="top"><td>initJog</td><td>function</td><td>function () </td></tr><tr valign="top"><td>setupJog</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>unsetupJog</td><td>function</td><td>function () </td></tr><tr valign="top"><td>toggleJog</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>jogKeyDown</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>jogKeyUp</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>arrowHelper</td><td>object</td><td></td></tr><tr valign="top"><td>jogPlane</td><td>object</td><td></td></tr><tr valign="top"><td>isJogRaycaster</td><td>boolean</td><td></td></tr><tr valign="top"><td>jogArrow</td><td>object</td><td></td></tr><tr valign="top"><td>jogArrowCyl</td><td>object</td><td></td></tr><tr valign="top"><td>jogArrowLine</td><td>object</td><td></td></tr><tr valign="top"><td>jogArrowShadow</td><td>object</td><td></td></tr><tr valign="top"><td>unsetupJogRaycaster</td><td>function</td><td>function () </td></tr><tr valign="top"><td>setupJogRaycaster</td><td>function</td><td>function () </td></tr><tr valign="top"><td>jogMouseClick</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>jogCurPos</td><td>object</td><td></td></tr><tr valign="top"><td>jogMouseMove</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>showShadow</td><td>boolean</td><td></td></tr><tr valign="top"><td>setupCogMenu</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onToggleShadowClick</td><td>function</td><td>function (evt, param) </td></tr><tr valign="top"><td>setupFpsMenu</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onFpsClick</td><td>function</td><td>function (evt, param) </td></tr><tr valign="top"><td>gridSize</td><td>number</td><td></td></tr><tr valign="top"><td>setupGridSizeMenu</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onGridSizeClick</td><td>function</td><td>function (evt, param) </td></tr><tr valign="top"><td>setUnits</td><td>function</td><td>function (units) </td></tr><tr valign="top"><td>requestUnits</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onUnitsChanged</td><td>function</td><td>function () </td></tr><tr valign="top"><td>request3dObject</td><td>function</td><td>function () </td></tr><tr valign="top"><td>sceneAdd</td><td>function</td><td>function (obj) </td></tr><tr valign="top"><td>sceneRemove</td><td>function</td><td>function (obj) </td></tr><tr valign="top"><td>sceneClear</td><td>function</td><td>function () </td></tr><tr valign="top"><td>btnSetup</td><td>function</td><td>function () </td></tr><tr valign="top"><td>forkSetup</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onPubSubFileLoaded</td><td>function</td><td>function (txt) </td></tr><tr valign="top"><td>error</td><td>function</td><td>function (msg) </td></tr><tr valign="top"><td>loadFile</td><td>function</td><td>function (path, callback /* function(contents) */ ) </td></tr><tr valign="top"><td>setDetails</td><td>function</td><td>function (txt) </td></tr><tr valign="top"><td>speedUp</td><td>function</td><td>function () </td></tr><tr valign="top"><td>openGCodeFromPath</td><td>function</td><td>function (path) </td></tr><tr valign="top"><td>openGCodeFromText</td><td>function</td><td>function (gcode) </td></tr><tr valign="top"><td>lookAtCenter</td><td>function</td><td>function () </td></tr><tr valign="top"><td>isLookAtToolHeadMode</td><td>boolean</td><td></td></tr><tr valign="top"><td>lookAtToolHead</td><td>function</td><td>function () </td></tr><tr valign="top"><td>toCameraCoords</td><td>function</td><td>function (position) </td></tr><tr valign="top"><td>scaleInView</td><td>function</td><td>function () </td></tr><tr valign="top"><td>viewExtents</td><td>function</td><td>function () </td></tr><tr valign="top"><td>stopSampleRun</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>pauseSampleRun</td><td>function</td><td>function () </td></tr><tr valign="top"><td>gotoXyz</td><td>function</td><td>function (data) </td></tr><tr valign="top"><td>gotoLine</td><td>function</td><td>function (data) </td></tr><tr valign="top"><td>playNextTween</td><td>function</td><td>function (isGotoLine) </td></tr><tr valign="top"><td>zheighttest</td><td>number</td><td></td></tr><tr valign="top"><td>playSampleRun</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>makeText</td><td>function</td><td>function (vals) </td></tr><tr valign="top"><td>decorate</td><td>object</td><td></td></tr><tr valign="top"><td>decorateExtents</td><td>function</td><td>function () </td></tr><tr valign="top"><td>convertMinsToPrettyDuration</td><td>function</td><td>function (mins) </td></tr><tr valign="top"><td>makeSprite</td><td>function</td><td>function (scene, rendererType, vals) </td></tr><tr valign="top"><td>element</td><td>object</td><td></td></tr><tr valign="top"><td>isUnitsMm</td><td>boolean</td><td></td></tr><tr valign="top"><td>getInchesFromMm</td><td>function</td><td>function (mm) </td></tr><tr valign="top"><td>getUnitVal</td><td>function</td><td>function (val) </td></tr><tr valign="top"><td>drawAxesToolAndExtents</td><td>function</td><td>function () </td></tr><tr valign="top"><td>shadowplane</td><td>object</td><td></td></tr><tr valign="top"><td>drawToolhead</td><td>function</td><td>function () </td></tr><tr valign="top"><td>grid</td><td>object</td><td></td></tr><tr valign="top"><td>gridTurnOff</td><td>function</td><td>function () </td></tr><tr valign="top"><td>gridTurnOn</td><td>function</td><td>function () </td></tr><tr valign="top"><td>drawGrid</td><td>function</td><td>function () </td></tr><tr valign="top"><td>drawExtentsLabels</td><td>function</td><td>function () </td></tr><tr valign="top"><td>axes</td><td>object</td><td></td></tr><tr valign="top"><td>drawAxes</td><td>function</td><td>function () </td></tr><tr valign="top"><td>colorBackground</td><td>number</td><td></td></tr><tr valign="top"><td>createScene</td><td>function</td><td>function (element) </td></tr><tr valign="top"><td>resize</td><td>function</td><td>function () </td></tr><tr valign="top"><td>mytimeout</td><td>object</td><td></td></tr><tr valign="top"><td>renderFrameCtr</td><td>number</td><td></td></tr><tr valign="top"><td>fpsCounterInterval</td><td>object</td><td></td></tr><tr valign="top"><td>fpsEl</td><td>object</td><td></td></tr><tr valign="top"><td>fpsCounterStart</td><td>function</td><td>function () </td></tr><tr valign="top"><td>fpsCounterOnInterval</td><td>function</td><td>function () </td></tr><tr valign="top"><td>fpsCounterEnd</td><td>function</td><td>function () </td></tr><tr valign="top"><td>setFrameRate</td><td>function</td><td>function (rate) </td></tr><tr valign="top"><td>animEnable</td><td>boolean</td><td></td></tr><tr valign="top"><td>animateDisabled</td><td>function</td><td>function () </td></tr><tr valign="top"><td>animateEnabled</td><td>function</td><td>function () </td></tr><tr valign="top"><td>frameRateDelayMs</td><td>number</td><td></td></tr><tr valign="top"><td>animate</td><td>function</td><td>function () </td></tr><tr valign="top"><td>wakeAnimate</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>sleepAnimate</td><td>function</td><td>function () </td></tr><tr valign="top"><td>cancelSleep</td><td>function</td><td>function () </td></tr><tr valign="top"><td>isNoSleepMode</td><td>boolean</td><td></td></tr><tr valign="top"><td>animNoSleep</td><td>function</td><td>function () </td></tr><tr valign="top"><td>animAllowSleep</td><td>function</td><td>function () </td></tr><tr valign="top"><td>GCodeParser</td><td>function</td><td>function (handlers) <br><br>Parses a string of gcode instructions, and invokes handlers for
+      <tr valign="top"><td>id</td><td>string</td><td>"com-chilipeppr-widget-3dviewer"</td></tr><tr valign="top"><td>name</td><td>string</td><td>"Widget / 3D GCode Viewer"</td></tr><tr valign="top"><td>desc</td><td>string</td><td>"Visualize your GCode in 3D by simulating your GCode run or seeing where your run is at in 3D while your CNC operation is in action."</td></tr><tr valign="top"><td>url</td><td>string</td><td>"http://raw.githubusercontent.com/dchote/widget-3dviewer/master/auto-generated-widget.html"</td></tr><tr valign="top"><td>fiddleurl</td><td>string</td><td>"http://ide.c9.io/undefined/undefined"</td></tr><tr valign="top"><td>githuburl</td><td>string</td><td>"http://github.com/dchote/widget-3dviewer"</td></tr><tr valign="top"><td>testurl</td><td>string</td><td>"http://undefined-undefined.c9users.io/widget.html"</td></tr><tr valign="top"><td>publish</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>subscribe</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>foreignSubscribe</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>foreignPublish</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>initOptions</td><td>object</td><td></td></tr><tr valign="top"><td>onSignalSceneReloadedFailAttempts</td><td>number</td><td></td></tr><tr valign="top"><td>domElement</td><td>object</td><td></td></tr><tr valign="top"><td>scene</td><td>object</td><td></td></tr><tr valign="top"><td>object</td><td>object</td><td></td></tr><tr valign="top"><td>camera</td><td>object</td><td></td></tr><tr valign="top"><td>controls</td><td>object</td><td></td></tr><tr valign="top"><td>toolhead</td><td>object</td><td></td></tr><tr valign="top"><td>decorate</td><td>object</td><td></td></tr><tr valign="top"><td>shadowplane</td><td>object</td><td></td></tr><tr valign="top"><td>grid</td><td>object</td><td></td></tr><tr valign="top"><td>axes</td><td>object</td><td></td></tr><tr valign="top"><td>element</td><td>object</td><td></td></tr><tr valign="top"><td>parsedLines</td><td>object</td><td></td></tr><tr valign="top"><td>lineObjects</td><td>object</td><td></td></tr><tr valign="top"><td>sceneCenter</td><td>object</td><td></td></tr><tr valign="top"><td>sceneBoundaries</td><td>object</td><td></td></tr><tr valign="top"><td>isUnitsMm</td><td>boolean</td><td></td></tr><tr valign="top"><td>animationLatencyTimer</td><td>object</td><td></td></tr><tr valign="top"><td>animationLatencyDelay</td><td>number</td><td></td></tr><tr valign="top"><td>animationLatencyDelayDefault</td><td>number</td><td></td></tr><tr valign="top"><td>inspectLatencyTimer</td><td>object</td><td></td></tr><tr valign="top"><td>inspectLatencyDelay</td><td>number</td><td></td></tr><tr valign="top"><td>jogLatencyTimer</td><td>object</td><td></td></tr><tr valign="top"><td>jogLatencyDelay</td><td>number</td><td></td></tr><tr valign="top"><td>moveAnimate</td><td>boolean</td><td></td></tr><tr valign="top"><td>gotoAnimate</td><td>boolean</td><td></td></tr><tr valign="top"><td>tweenAnimate</td><td>boolean</td><td></td></tr><tr valign="top"><td>inspectAnimate</td><td>boolean</td><td></td></tr><tr valign="top"><td>fpsCalculationTimer</td><td>object</td><td></td></tr><tr valign="top"><td>renderFrameCount</td><td>number</td><td></td></tr><tr valign="top"><td>tween</td><td>object</td><td></td></tr><tr valign="top"><td>tweenHighlight</td><td>object</td><td></td></tr><tr valign="top"><td>tweenIndex</td><td>object</td><td></td></tr><tr valign="top"><td>tweenSpeed</td><td>number</td><td></td></tr><tr valign="top"><td>tweenPaused</td><td>boolean</td><td></td></tr><tr valign="top"><td>tweenIsPlaying</td><td>boolean</td><td></td></tr><tr valign="top"><td>zheighttest</td><td>number</td><td></td></tr><tr valign="top"><td>textFont</td><td>boolean</td><td></td></tr><tr valign="top"><td>isInspectSelect</td><td>boolean</td><td></td></tr><tr valign="top"><td>inspectArrowGrp</td><td>object</td><td></td></tr><tr valign="top"><td>inspectCurPos</td><td>object</td><td></td></tr><tr valign="top"><td>inspectLastObj</td><td>object</td><td></td></tr><tr valign="top"><td>inspectLastDecorateGroup</td><td>object</td><td></td></tr><tr valign="top"><td>inspectDlgEl</td><td>object</td><td></td></tr><tr valign="top"><td>isJogBtnAttached</td><td>boolean</td><td></td></tr><tr valign="top"><td>isJogSelect</td><td>boolean</td><td></td></tr><tr valign="top"><td>arrowHelper</td><td>object</td><td></td></tr><tr valign="top"><td>jogPlane</td><td>object</td><td></td></tr><tr valign="top"><td>isJogRaycaster</td><td>boolean</td><td></td></tr><tr valign="top"><td>jogArrow</td><td>object</td><td></td></tr><tr valign="top"><td>jogArrowCyl</td><td>object</td><td></td></tr><tr valign="top"><td>jogArrowLine</td><td>object</td><td></td></tr><tr valign="top"><td>jogArrowShadow</td><td>object</td><td></td></tr><tr valign="top"><td>jogCurPos</td><td>object</td><td></td></tr><tr valign="top"><td>colorBackground</td><td>number</td><td></td></tr><tr valign="top"><td>colorG0</td><td>number</td><td></td></tr><tr valign="top"><td>colorG1</td><td>number</td><td></td></tr><tr valign="top"><td>colorG2</td><td>number</td><td></td></tr><tr valign="top"><td>colorArc</td><td>number</td><td></td></tr><tr valign="top"><td>colorActive</td><td>number</td><td></td></tr><tr valign="top"><td>colorCompleted</td><td>number</td><td></td></tr><tr valign="top"><td>colorGhosted</td><td>number</td><td></td></tr><tr valign="top"><td>lineWidth</td><td>number</td><td></td></tr><tr valign="top"><td>disableAnimation</td><td>boolean</td><td></td></tr><tr valign="top"><td>disableAA</td><td>boolean</td><td></td></tr><tr valign="top"><td>showShadow</td><td>boolean</td><td></td></tr><tr valign="top"><td>gridSize</td><td>number</td><td></td></tr><tr valign="top"><td>isLookAtToolHeadMode</td><td>boolean</td><td></td></tr><tr valign="top"><td>init</td><td>function</td><td>function (initOptions) </td></tr><tr valign="top"><td>setupScenePubSub</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onSignalSceneReloaded</td><td>function</td><td>function () </td></tr><tr valign="top"><td>initInspect</td><td>function</td><td>function () </td></tr><tr valign="top"><td>setupInspect</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>unsetupInspect</td><td>function</td><td>function () </td></tr><tr valign="top"><td>toggleInspect</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>inspectKeyDown</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>inspectKeyUp</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>inspectMouseClick</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>onInspectGoto</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>createInspectArrow</td><td>function</td><td>function () </td></tr><tr valign="top"><td>inspectMouseMove</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>createGlow</td><td>function</td><td>function (threeObj) </td></tr><tr valign="top"><td>createGlowCubeCaps</td><td>function</td><td>function (threeObj) </td></tr><tr valign="top"><td>initJog</td><td>function</td><td>function () </td></tr><tr valign="top"><td>setupJog</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>unsetupJog</td><td>function</td><td>function () </td></tr><tr valign="top"><td>toggleJog</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>jogKeyDown</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>jogKeyUp</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>unsetupJogRaycaster</td><td>function</td><td>function () </td></tr><tr valign="top"><td>setupJogRaycaster</td><td>function</td><td>function () </td></tr><tr valign="top"><td>jogMouseClick</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>jogMouseMove</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>setupCogMenu</td><td>function</td><td>function () </td></tr><tr valign="top"><td>setCogMenuState</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onToggleAAClick</td><td>function</td><td>function (evt, param) </td></tr><tr valign="top"><td>onToggleShadowClick</td><td>function</td><td>function (evt, param) </td></tr><tr valign="top"><td>onToggleAnimationClick</td><td>function</td><td>function (evt, param) </td></tr><tr valign="top"><td>setupGridSizeMenu</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onGridSizeClick</td><td>function</td><td>function (evt, param) </td></tr><tr valign="top"><td>setUnits</td><td>function</td><td>function (units) </td></tr><tr valign="top"><td>requestUnits</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onUnitsChanged</td><td>function</td><td>function () </td></tr><tr valign="top"><td>request3dObject</td><td>function</td><td>function () </td></tr><tr valign="top"><td>sceneAdd</td><td>function</td><td>function (obj) </td></tr><tr valign="top"><td>sceneRemove</td><td>function</td><td>function (obj) </td></tr><tr valign="top"><td>sceneClear</td><td>function</td><td>function () </td></tr><tr valign="top"><td>btnSetup</td><td>function</td><td>function () </td></tr><tr valign="top"><td>forkSetup</td><td>function</td><td>function () </td></tr><tr valign="top"><td>onPubSubFileLoaded</td><td>function</td><td>function (txt) </td></tr><tr valign="top"><td>error</td><td>function</td><td>function (msg) </td></tr><tr valign="top"><td>loadFile</td><td>function</td><td>function (path, callback /* function(contents) */ ) </td></tr><tr valign="top"><td>setDetails</td><td>function</td><td>function (txt) </td></tr><tr valign="top"><td>speedUp</td><td>function</td><td>function () </td></tr><tr valign="top"><td>openGCodeFromPath</td><td>function</td><td>function (path) </td></tr><tr valign="top"><td>openGCodeFromText</td><td>function</td><td>function (gcode) </td></tr><tr valign="top"><td>lookAtCenter</td><td>function</td><td>function () </td></tr><tr valign="top"><td>lookAtToolHead</td><td>function</td><td>function () </td></tr><tr valign="top"><td>toCameraCoords</td><td>function</td><td>function (position) </td></tr><tr valign="top"><td>scaleInView</td><td>function</td><td>function () </td></tr><tr valign="top"><td>viewExtents</td><td>function</td><td>function () </td></tr><tr valign="top"><td>stopSampleRun</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>pauseSampleRun</td><td>function</td><td>function () </td></tr><tr valign="top"><td>gotoXyz</td><td>function</td><td>function (data) </td></tr><tr valign="top"><td>gotoLine</td><td>function</td><td>function (data) </td></tr><tr valign="top"><td>playNextTween</td><td>function</td><td>function (isGotoLine) </td></tr><tr valign="top"><td>playSampleRun</td><td>function</td><td>function (evt) </td></tr><tr valign="top"><td>downloadFont</td><td>function</td><td>function () </td></tr><tr valign="top"><td>makeText</td><td>function</td><td>function (vals) </td></tr><tr valign="top"><td>decorateExtents</td><td>function</td><td>function () </td></tr><tr valign="top"><td>convertMinsToPrettyDuration</td><td>function</td><td>function (mins) </td></tr><tr valign="top"><td>makeSprite</td><td>function</td><td>function (scene, rendererType, vals) </td></tr><tr valign="top"><td>getInchesFromMm</td><td>function</td><td>function (mm) </td></tr><tr valign="top"><td>getUnitVal</td><td>function</td><td>function (val) </td></tr><tr valign="top"><td>drawAxesToolAndExtents</td><td>function</td><td>function () </td></tr><tr valign="top"><td>drawToolhead</td><td>function</td><td>function () </td></tr><tr valign="top"><td>gridTurnOff</td><td>function</td><td>function () </td></tr><tr valign="top"><td>gridTurnOn</td><td>function</td><td>function () </td></tr><tr valign="top"><td>drawGrid</td><td>function</td><td>function () </td></tr><tr valign="top"><td>drawExtentsLabels</td><td>function</td><td>function () </td></tr><tr valign="top"><td>drawAxes</td><td>function</td><td>function () </td></tr><tr valign="top"><td>createScene</td><td>function</td><td>function (element) </td></tr><tr valign="top"><td>resize</td><td>function</td><td>function () </td></tr><tr valign="top"><td>wakeAnimate</td><td>function</td><td>function () </td></tr><tr valign="top"><td>animate</td><td>function</td><td>function () </td></tr><tr valign="top"><td>GCodeParser</td><td>function</td><td>function (handlers, modecmdhandlers) <br><br>Parses a string of gcode instructions, and invokes handlers for
 each type of command.<br><br>Special handler:
-'default': Called if no other handler matches.</td></tr><tr valign="top"><td>colorG0</td><td>number</td><td></td></tr><tr valign="top"><td>colorG1</td><td>number</td><td></td></tr><tr valign="top"><td>colorG2</td><td>number</td><td></td></tr><tr valign="top"><td>createObjectFromGCode</td><td>function</td><td>function (gcode, indxMax) </td></tr><tr valign="top"><td>convertLineGeometryToBufferGeometry</td><td>function</td><td>function (lineGeometry, color) </td></tr>
+'default': Called if no other handler matches.</td></tr><tr valign="top"><td>createObjectFromGCode</td><td>function</td><td>function (gcode, indxMax) </td></tr><tr valign="top"><td>convertLineGeometryToBufferGeometry</td><td>function</td><td>function (lineGeometry, color) </td></tr>
       </tbody>
   </table>
 
diff --git a/auto-generated-widget.html b/auto-generated-widget.html
index 8788638..f14b873 100644
--- a/auto-generated-widget.html
+++ b/auto-generated-widget.html
@@ -10,11 +10,15 @@
     <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 
     <!-- Customized version of require.js for ChiliPeppr. Please see require.js docs for how
-    ChiliPeppr's dependency system works as it's based on require.js. -->
+    ChiliPeppr's dependency system works as it's based on require.js. -->        
     <script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
 
     <style type='text/css'>
 /* CSS for ChiliPeppr Widget */
+#com-chilipeppr-widget-3dviewer {
+    width: 100%;
+}
+
 #com-chilipeppr-widget-3dviewer .panel-heading {
     z-index:1;
     position:relative;
@@ -31,20 +35,18 @@
 }
 
 #com-chilipeppr-widget-3dviewer-body {
-    /* height: 350px; */
+    height:85vh;
     padding:0;
-    margin:0;
+    margin: auto;
     position: relative;
     border:0px solid red;
-    background-color: blue;
 }
 #com-chilipeppr-widget-3dviewer-renderArea {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    background-color: #000000;
+    position: relative;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+    background-color: #eeeeee;
     /* z-index:0; */
 }
 #com-chilipeppr-widget-3dviewer .disabled .glyphicon {
@@ -106,43 +108,28 @@
 // Defining the globals above helps Cloud9 not show warnings for those variables
 
 // ChiliPeppr Widget/Element Javascript
-
 requirejs.config({
     paths: {
-        //Three: '//i2dcui.appspot.com/geturl?url=http://threejs.org/build/three.min.js',
-        // Keep in mind that the /slingshot url does the same as /geturl but it is not cached
-        // Three: '//i2dcui.appspot.com/slingshot?url=http://threejs.org/build/three.min.js',
-        // Three: '//i2dcui.appspot.com/geturl?url=http://threejs.org/build/three.js',
-        Three: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three',
-        ThreeTextGeometry: '//i2dcui.appspot.com/js/three/TextGeometry',
-        ThreeFontUtils: '//i2dcui.appspot.com/js/three/FontUtils',
-        ThreeDetector: '//i2dcui.appspot.com/geturl?url=http://threejs.org/examples/js/Detector.js',
-        //ThreeTrackballControls: '//i2dcui.appspot.com/geturl?url=http://threejs.org/examples/js/controls/TrackballControls.js',
-        // Latest release
-        // ThreeTrackballControls: '//i2dcui.appspot.com/slingshot?url=http://threejs.org/examples/js/controls/TrackballControls.js',
-        // r79 (to solve that mousewheel zoom started not working in r80, so had to force to older version. eventually they'll fix the bug cuz i filed it)
-        // ThreeTrackballControls: '//i2dcui.appspot.com/slingshot?url=http://rawgit.com/mrdoob/three.js/r79/examples/js/controls/TrackballControls.js',
-        ThreeTrackballControls: '//i2dcui.appspot.com/geturl?url=http://rawgit.com/mrdoob/three.js/r79/examples/js/controls/TrackballControls.js',
-        ThreeOrbitControls: '//threejs.org/examples/js/controls/OrbitControls',
-        ThreeHelvetiker: '//i2dcui.appspot.com/js/three/threehelvetiker',
-        ThreeTypeface: 'https://superi.googlecode.com/svn-history/r1953/trunk/MBrand/MBrand/Scripts/typeface-0.15',
-        ThreeTween: '//i2dcui.appspot.com/js/three/tween.min',
-        ThreeBufferGeometryUtils: '//i2dcui.appspot.com/js/three/BufferGeometryUtils',
-        ThreeCanvasRenderer: '//i2dcui.appspot.com/geturl?url=http://threejs.org/examples/js/renderers/CanvasRenderer.js',
-        ThreeProjector: '//i2dcui.appspot.com/geturl?url=http://threejs.org/examples/js/renderers/Projector.js',
+        Three: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three',
+        
+        ThreeTrackballControls: 'https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls',
+        ThreeTween: 'https://cdn.rawgit.com/tweenjs/tween.js/master/src/Tween',
+        
+        ThreeProjector: 'https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/renderers/Projector',
     },
     shim: {
-        ThreeTextGeometry: ['Three'],
-        ThreeFontUtils: ['Three', 'ThreeTextGeometry'],
-        ThreeHelvetiker: ['Three', 'ThreeTextGeometry', 'ThreeFontUtils'],
-        //ThreeHelvetiker: ['Three', 'ThreeTextGeometry'],
-        ThreeTrackballControls: ['Three'],
-        ThreeTween: ['Three'],
-        ThreeSparks: ['Three'],
-        ThreeParticle: ['Three'],
-        ThreeBufferGeometryUtils: ['Three'],
-        ThreeCanvasRenderer: ['Three', 'ThreeProjector'],
-        ThreeProjector: ['Three']
+        Three: {
+            exports: 'THREE'
+        },
+        ThreeTrackballControls: {
+            deps: ['Three'],
+        },
+        ThreeTween: {
+            deps: ['Three'],
+        },
+        ThreeProjector: {
+            deps: ['Three'],
+        },
     }
 });
 
@@ -187,7 +174,6 @@
     function () {
         console.log("mycallback got called after loading flash msg module");
         cprequire(["inline:com-chilipeppr-elem-flashmsg"], function (fm) {
-            //console.log("inside require of " + fm.id);
             fm.init();
         });
     });
@@ -245,17 +231,25 @@
     console.log("3d viewer initted");
 } /*end_test*/ );
 
-cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three', 'ThreeDetector', 'ThreeTrackballControls', 'ThreeTween', 'ThreeHelvetiker', 'ThreeBufferGeometryUtils'], function () {
+// Bring THREE in to global scope
+cpdefine('Three', ['https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js'], function ( THREE ) {
+    if (typeof window !== 'undefined') {
+        window.THREE = THREE;
+        return THREE;
+    }
+});
+
+cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three', 'ThreeTrackballControls', 'ThreeTween', 'ThreeProjector'], function () {
 
     return {
 
         id: 'com-chilipeppr-widget-3dviewer',
         name: "Widget / 3D GCode Viewer",
         desc: "Visualize your GCode in 3D by simulating your GCode run or seeing where your run is at in 3D while your CNC operation is in action.",
-        url: "http://raw.githubusercontent.com/chilipeppr/widget-3dviewer/master/auto-generated-widget.html",       // The final URL of the working widget as a single HTML file with CSS and Javascript inlined. You can let runme.js auto fill this if you are using Cloud9.
-        fiddleurl: "http://ide.c9.io/chilipeppr/widget-3dviewer", // The edit URL. This can be auto-filled by runme.js in Cloud9 if you'd like, or just define it on your own to help people know where they can edit/fork your widget
-        githuburl: "http://github.com/chilipeppr/widget-3dviewer", // The backing github repo
-        testurl: "http://widget-3dviewer-chilipeppr.c9users.io/widget.html",   // The standalone working widget so can view it working by itself
+        url: "http://raw.githubusercontent.com/dchote/widget-3dviewer/master/auto-generated-widget.html",       // The final URL of the working widget as a single HTML file with CSS and Javascript inlined. You can let runme.js auto fill this if you are using Cloud9.
+        fiddleurl: "http://ide.c9.io/undefined/undefined", // The edit URL. This can be auto-filled by runme.js in Cloud9 if you'd like, or just define it on your own to help people know where they can edit/fork your widget
+        githuburl: "http://github.com/dchote/widget-3dviewer", // The backing github repo
+        testurl: "http://undefined-undefined.c9users.io/widget.html",   // The standalone working widget so can view it working by itself
         publish: {
             '/recv3dObject' : "When you send a /request3dObject you will receive a signal back of /recv3dObject. This signal has a payload of the THREE.js user object being shown in the 3D viewer.",
             '/recvUnits' : 'When you send a /requestUnits you will receive back this signal with a payload of "mm" or "inch" as a string. Please also see /unitsChanged in case you want to know whenever units are changed from a file open event. You can request what units the Gcode are in from the 3D Viewer. Since the 3D Viewer parses Gcode, it can determine the units. The 3D Viewer is mostly unit agnostic, however to draw the toolhead, grid, and extents labels it does need to know the units to draw the decorations in a somewhat appropriate size.',
@@ -282,47 +276,117 @@
         },
         foreignPublish: {
         },
+        
+        // Variables and states
+        initOptions: {},
+        
+        onSignalSceneReloadedFailAttempts: 0, // track failed nulls
+        
+        domElement: null,
         scene: null,
         object: null,
         camera: null,
         controls: null,
         toolhead: null,
+        decorate: null, // stores the decoration 3d objects
+        shadowplane: null, // where the toolhead shadow is rendered
+        grid: null, // stores grid
+        axes: null, // global property to store axes that we drew
+        element: null, // scene element
+        
+        parsedLines: [],
+        lineObjects: [],
+        
+        sceneCenter: null,
+        sceneBoundaries: null,
+        
+        isUnitsMm: true, // true for mm, false for inches
+        
+        
+        // animation state
+        animationLatencyTimer: null,
+        animationLatencyDelay: 32,
+        animationLatencyDelayDefault: 32,
+        
+        inspectLatencyTimer: null,
+        inspectLatencyDelay: 200,
+        
+        jogLatencyTimer: null,
+        jogLatencyDelay: 200,
+        
+        moveAnimate: false,
+        gotoAnimate: false,
+        tweenAnimate: false,
+        inspectAnimate: false,
+        
+        // render state & fps tracking
+        fpsCalculationTimer: null,
+        renderFrameCount: 0, // keep track of fps
+        
         tween: null,
         tweenHighlight: null,
         tweenIndex: null,
         tweenSpeed: 1,
         tweenPaused: false,
         tweenIsPlaying: false,
-        wantAnimate: true, // we automatically timeout rendering to save on cpu
-        initOptions: {},
+        
+        
+        zheighttest: 0, // test toolhead going up in z
+        textFont: false, // three.js font object
+        
+        isInspectSelect: false,
+        inspectArrowGrp: null,
+        inspectCurPos: null,
+        inspectLastObj: {uuid:""},
+        inspectLastDecorateGroup: null,
+        inspectDlgEl: null,
+        
+        isJogBtnAttached: false, // is the jog btn setup?
+        isJogSelect: false, // indicates we're in 3d jog mode
+        arrowHelper: null,
+        jogPlane: null,
+        isJogRaycaster: false,
+        jogArrow: null,
+        jogArrowCyl: null,
+        jogArrowLine: null,
+        jogArrowShadow: null,
+        jogCurPos: null,
+        
+        // basic properties
+        colorBackground: 0xeeeeee, // this is the background color of the 3d viewer
+        colorG0: 0x00ff00,
+        colorG1: 0x0000ff,
+        colorG2: 0x999900,
+        colorArc: 0x0099ff,
+        colorActive: 0xff00ff,
+        colorCompleted: 0x000000,
+        colorGhosted: 0x000000,
+        lineWidth: 1,
+        
+        // options
+        disableAnimation: false, // boolean tracking whether we allow animation
+        
+        disableAA: false,
+        showShadow: true,
+        
+        gridSize: 1, // global property for size of grid. default to 1 (shapeoko rough size)
+        isLookAtToolHeadMode: false,
+        
+        
         init: function (initOptions) {
             this.initOptions = initOptions;
+            
             var that = this;
-            /*
-            if (!Modernizr.webgl) {
-                alert('Sorry, you need a WebGL capable browser to use this.\n\nGet the latest Chrome or FireFox.');
-                return;
-            }
-
-            if (!Modernizr.localstorage) {
-                alert("Man, your browser is ancient. I can't work with this. Please upgrade.");
-                return;
-            }
-            */
-
-            // Show 'About' dialog for first time visits.
-            /*
-            if (!localStorage.getItem("not-first-visit")) {
-                localStorage.setItem("not-first-visit", true);
-                setTimeout(about, 500);
-            }
-            */
-
+            
+            // download the font we'll use to render text
+            this.downloadFont();
+            
             // Drop files from desktop onto main page to import them.
             // We also can subscribe to the main chilipeppr drag/drop
             // pubsub to get drop events from a parent, rather than doing
             // this on our own
             
+            
             // subscribe to file load events
             chilipeppr.subscribe("/com-chilipeppr-elem-dragdrop/ondropped", this, this.onPubSubFileLoaded);
             
@@ -339,45 +403,55 @@
                     var files = event.originalEvent.dataTransfer.files;
                     if (files.length > 0) {
                         var reader = new FileReader();
+                        
                         reader.onload = function () {
                             console.log("opening file. reader:", reader);
-                            console.log ("stringify", JSON.stringify(reader.result, null, 2) );
+                            console.log ("stringify", JSON.stringify(reader.result, null, 2));
                             that.openGCodeFromText(reader.result);
                         };
+                        
                         reader.readAsText(files[0]);
-                        // reader.readAsArrayBuffer(files[0]);
                     }
                 });
             }
             
-            that.scene = that.createScene($('#com-chilipeppr-widget-3dviewer-renderArea'));
+            
+            // Load existing state/options from localStorage
+            this.disableAA = (localStorage.getItem('disable-aa') == 'true') ? true : false;
+            this.showShadow = (localStorage.getItem('toolhead-shadow') == 'true' ? true : false);
+            this.disableAnimation = (localStorage.getItem('disable-animation') == 'true' ? true : false);
+                        
+            // setup the scene and attempt to load the last object
+            
+            this.domElement = $('#com-chilipeppr-widget-3dviewer-renderArea');
+            this.scene = this.createScene(this.domElement);
+            
+            // TODO: maybe we dont do this, instead have the gcode widget tell us what we should do, maybe we just show the chilipeppr logo regardless.
             var lastImported = localStorage.getItem('last-imported');
             var lastLoaded = localStorage.getItem('last-loaded');
             if (lastImported) {
-                that.openGCodeFromText(lastImported);
+                this.openGCodeFromText(lastImported);
             } else {
-                //console.log("would have opened octocat");
-                //that.openGCodeFromPath(lastLoaded || 'examples/octocat.gcode');
-                console.log("loading chilipeppr logo");
-                that.openGCodeFromPath(lastLoaded || 'http://www.chilipeppr.com/3d/chilipepprlogo.nc');
+                this.openGCodeFromPath(lastLoaded || 'http://www.chilipeppr.com/3d/chilipepprlogo.nc');
             }
             
-            var lastFpsRate = localStorage.getItem ('fpsRate');
-            if (lastFpsRate) {
-                console.log("got prior FPS Rate, setting it now:  ", lastFpsRate, "//rk");
-                //this.setFrameRate(parseInt(lastFpsRate) );
-                var fr = parseInt(lastFpsRate);
-                this.setFrameRate(fr);
-                // set css to show selected
-                $('.com-chilipeppr-widget-3dviewer-settings-fr').removeClass('alert-info');
-                $('.com-chilipeppr-widget-3dviewer-settings-fr-' + fr).addClass('alert-info');
-            }
-
-            // setup toolbar buttons
+            
+            // setup toolbar buttons and menu state
             this.btnSetup();
+            this.setupCogMenu();
+            this.setCogMenuState();
+            this.setupGridSizeMenu();
+            
+            this.initJog();
+            this.initInspect();
+            
             
+            // Download and attach the Fork Widget elements in the dropdown
             this.forkSetup();
-            //this.setDetails("blah");
+            
+            // draw our workspace            
+            this.drawAxesToolAndExtents()
+            
             
             // subscribe to gotoline signal so we can move toolhead to correct location
             // to sync with the gcode sender
@@ -396,13 +470,6 @@
             // setup more pubsub to allow other widgets to inject objects to our scene
             this.setupScenePubSub();
             
-            this.setupGridSizeMenu();
-            
-            this.setupCogMenu();
-            this.setupFpsMenu();
-            this.initJog(); //this.setupJog();
-            this.initInspect();
-            
             // hide the pan/zoom/orbit msg after 1 minute
             setTimeout(function() {
                 console.log("hiding pan/zoom/orbit msg");
@@ -412,7 +479,8 @@
         },
         setupScenePubSub: function() {
             // these pubsubs let others add objects to our 3d scene
-            chilipeppr.subscribe("/" + this.id + "/wakeanimate", this, this.wakeAnimate);
+            // TODO: wakeAnimate change
+            chilipeppr.subscribe("/" + this.id + "/wakeanimate", this, this.animate);
             chilipeppr.subscribe("/" + this.id + "/sceneadd", this, this.sceneAdd);
             chilipeppr.subscribe("/" + this.id + "/sceneremove", this, this.sceneRemove);
             chilipeppr.subscribe("/" + this.id + "/sceneclear", this, this.sceneClear);
@@ -422,13 +490,11 @@
             
             chilipeppr.subscribe("/" + this.id + "/request3dObject", this, this.request3dObject);
         },
-        onSignalSceneReloadedFailAttempts: 0, // track failed nulls
+
         onSignalSceneReloaded: function () {
-            // this can get called before there is userData, so check for that
-            // and if so, wait to publish until there is
-            if (this.object && this.object.userData && this.object.userData.bbbox2) {
+            if (this.object && this.sceneBoundaries != null) {
                 console.log("publishing /sceneReloaded. It took us X attempts:", this.onSignalSceneReloadedFailAttempts);
-                chilipeppr.publish("/" + this.id + "/sceneReloaded", this.object.userData.bbbox2);
+                chilipeppr.publish("/" + this.id + "/sceneReloaded", this.sceneBoundaries);
                 this.onSignalSceneReloadedFailAttempts = 0;
             } else {
                 // call ourselves again in 2 seconds
@@ -442,16 +508,16 @@
                 }
             }
         },
-        // INSPECT CODE REGION
-        isInspectSelect: false,
+
         initInspect: function() {
             // attach click event
             console.log("doing one time run of initial inspect setup. this should not run more than once!!!");
             $('.com-chilipeppr-widget-3d-menu-inspect').click(this.toggleInspect.bind(this));
                 
             // attach shortcut key
-            var el = $('#com-chilipeppr-widget-3dviewer-renderArea');
+            var el = this.domElement;
             el.focus();
+            
             $(document).keydown(this.inspectKeyDown.bind(this));
             $(document).keyup(this.inspectKeyUp.bind(this));
             
@@ -472,24 +538,22 @@
             
         },
         setupInspect: function(evt) {
-            
             console.log("setupInspect.");
+            
             if (this.isInspectSelect) {
                 console.log("we are already in inspect mode. being asked to setup, but returning cuz u can't setup more than once.");
                 return;
             }
             
             // start watching mouse
-            var el = $(this.renderer.domElement);
+            var el = this.domElement;
             el.mousemove(this.inspectMouseMove.bind(this));
             el.click(this.inspectMouseClick.bind(this));
             $('.com-chilipeppr-widget-3d-menu-inspect').addClass("active");
             $('.com-chilipeppr-widget-3d-menu-inspect').addClass("btn-primary");
-            // make sure animation stays on
-            //this.gotoXyz({x:0,y:0,z:3});
+            
             if (this.inspectArrowGrp != null) {
                 this.sceneAdd(this.inspectArrowGrp);
-                //this.inspectArrowGrp.visible = true;
             }
             
             this.sceneAdd(this.inspectPreviewGroup);
@@ -498,21 +562,27 @@
         },
         unsetupInspect: function() {
             console.log("unsetupInspect");
+            
             if (!this.isInspectSelect) {
                 console.log("we are being asked to unsetup inspect, but it is not running so why are we getting called?");
                 return;
             }
             
-            var el = $(this.renderer.domElement);
+            var el = this.domElement;
             el.unbind("mousemove");
             el.unbind("click");
+            
             $('.com-chilipeppr-widget-3d-menu-inspect').removeClass("active");
             $('.com-chilipeppr-widget-3d-menu-inspect').removeClass("btn-primary");
             //this.unsetupJogRaycaster();
+            
             if (this.inspectArrowGrp != null) {
                 this.sceneRemove(this.inspectArrowGrp);
                 //this.inspectArrowGrp.visible = false;
             }
+            
+            //this.inspectDlgEl.addClass("hidden");
+            
             this.sceneRemove(this.inspectPreviewGroup);
             this.isInspectSelect = false;
         },
@@ -526,7 +596,8 @@
         },
         inspectKeyDown: function(evt) {
             if ((evt.shiftKey)  && !this.isInspectSelect) {
-                this.wakeAnimate();
+                // TODO: wakeAnimate change
+                this.animate();
                 this.setupInspect(evt);
             }
         },
@@ -555,310 +626,272 @@
                 chilipeppr.publish("/com-chilipeppr-widget-gcode/jumpToLine", lineNum);
             }
         },
-        inspectArrowGrp: null,
         createInspectArrow: function() {
-            
             if (this.inspectArrowGrp != null) return;
             
             // build pointer line
             this.inspectArrowGrp = new THREE.Group();
             
-            // draw dotted lines from jog tip and shadow
-            var lineMat = new THREE.LineDashedMaterial( { color: 0xff0000, dashSize: this.getUnitVal(1),  gapSize: this.getUnitVal(1), transparent: true, opacity: 0.5 } );
-            var lineGeo = new THREE.Geometry();
-            lineGeo.vertices.push(new THREE.Vector3( 0, 0, this.getUnitVal(-100) ));
-            lineGeo.vertices.push(new THREE.Vector3( 0, 0, this.getUnitVal(100) ));
-            var line = new THREE.Line(lineGeo, lineMat); //, THREE.LineStrip);
-            this.inspectArrowLine = line;
-            this.inspectArrowGrp.add(line);
+            // Looks better without the line
 
             this.sceneAdd(this.inspectArrowGrp);
             console.log("just added inspectArrowGrp:", this.inspectArrowGrp);
 
         },
-        inspectCurPos: null,
-        inspectLastObj: {uuid:""},
-        inspectLastDecorateGroup: null,
-        inspectDlgEl: null,
         inspectMouseMove: function(evt) {
-            
-            //event.preventDefault();
-            if (!this.isInspectSelect) {
+            if (!this.isInspectSelect || this.inspectLatencyTimer) {
                 return;
             }
             
-            this.createInspectArrow();
-            
-            this.wakeAnimate();
-            
-            console.log("inspectMouseMove. evt:", evt);
-            
             var mouse = {};
-            mouse.x = ( evt.clientX / window.innerWidth ) * 2 - 1;
-            mouse.y = - ( evt.clientY / window.innerHeight ) * 2 + 1;
+            mouse.x = ( ( event.clientX - this.domElement.offset().left ) / this.domElement.width() ) * 2 - 1;
+            mouse.y = - ( ( event.clientY - this.domElement.offset().top ) / this.domElement.height() ) * 2 + 1;
             
-            var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( this.camera );
+            // dialog position
+            var x = event.clientX - this.domElement.offset().left;
+            var y = event.clientY - this.domElement.offset().top;
             
-            var origin = this.camera.position.clone();
-            var dir = vector.sub( this.camera.position ).normalize();
+            x += 50; // slide right to clear mouse
+            y += -100;
             
-            // set where arrow is pointing
-            //this.inspectArrowGrp.position.set(origin.x, origin.y, 0);
+            var that = this;
+            
+            this.inspectLatencyTimer = setTimeout(function() {
+                that.createInspectArrow();
             
-            var raycaster = new THREE.Raycaster( origin, dir );
-            raycaster.linePrecision = 0.2;
-            //console.log("mouse:", mouse, "raycaster:", raycaster);
-            //console.log("inspecting object.children", this.object.children);
-            //var io = raycaster.intersectObjects(this.object.children, true);
-            var io = raycaster.intersectObjects(this.object.userData.threeObjs.children, true);
-            //console.log("io:", io);
+                var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( that.camera );
+        
+                var origin = that.camera.position.clone();
+                var dir = vector.sub( that.camera.position ).normalize();
+        
+                var raycaster = new THREE.Raycaster( origin, dir );
+                raycaster.linePrecision = 0.5;
+        
+                var io = raycaster.intersectObjects(that.lineObjects, true);
             
-            if (io.length > 0) {
-                // we hit some objects
-                var obj = io[0];
-                //console.log("obj:", obj);
+                if (io.length > 0) {
+                    // we hit some objects
+                    var obj = io[0];
                 
-                // see if this is a new object we haven't hit yet
-                if (this.inspectLastObj.uuid != obj.object.uuid) {
-                    
-                    var o = obj.object;
-                    var ud = o.userData;
-                    
-                    console.log("hit new object:", o);
-
-                    //this.inspectLastOpacity = o.material.opacity;
+                    // see if this is a new object we haven't hit yet
+                    if (that.inspectLastObj.uuid != obj.object.uuid) {
                     
-                    // reset last object
-                    //console.log("testing for reset last object. this.inspectLastObj:", this.inspectLastObj);
+                        var o = obj.object;
+                        var ud = o.userData;
                     
-                    // remove all previous preview items
-                    this.inspectPreviewGroup.children.forEach(function(threeObj) {
-                        this.inspectPreviewGroup.remove(threeObj);
-                    }, this);
+                        console.log("hit new object:", o, ud);
                     
-                    if (this.inspectLastObj.uuid != "") {
-                        //this.inspectPreviewGroup(
-                        //this.sceneRemove(this.inspectLastObj);
-                        //this.inspectLastObj.material.opacity = this.inspectLastOpacity;
-                        //this.inspectLastObj.material.color = 0x0000ff;
-                    }
-                    
-                    // set the current object to new opacity
-                    //o.material.opacity = 1.0;
-                    //o.material.color = 0xff0000;
-                    //this.sceneAdd(o);
-                    // create glow
-                    var glow = this.createGlow(o);
-                    this.inspectPreviewGroup.add(glow);
+                        // remove all previous preview items
+                        that.inspectPreviewGroup.children.forEach(function(threeObj) {
+                            that.inspectPreviewGroup.remove(threeObj);
+                        }, that);
                     
-                    // show dialog
-                    var x = event.clientX;
-                    var y = event.clientY;
-                    x += 30; // slide right to clear mouse
-                    y += -140;
-                    this.inspectDlgEl.css('left', x + "px").css('top', y + "px");
-                    this.inspectDlgEl.find('.inspect-line').text(ud.args.indx + 1);
-                    this.inspectDlgEl.find('.inspect-gcode').text(ud.args.origtext);
-                    this.inspectDlgEl.find('.inspect-end').text("X:" + ud.p2.x + ", Y:" + ud.p2.y + ", Z:" + ud.p2.z);
-                    this.inspectDlgEl.find('.inspect-feedrate').text(ud.p2.feedrate);
-                    this.inspectDlgEl.find('.inspect-distance').text(ud.p2.dist.toFixed(3));
-                    this.inspectDlgEl.find('.inspect-time').text((ud.p2.timeMins * 60).toFixed(2) + "s");
-                    var pretty = this.convertMinsToPrettyDuration(ud.p2.timeMinsSum);
-                    this.inspectDlgEl.find('.inspect-timeSum').text(pretty);
-                    this.inspectDlgEl.removeClass("hidden");
+                        // create glow
+                        var glow = that.createGlow(o);
+                        that.inspectPreviewGroup.add(glow);
                     
-                    // set the last object to this one
-                    this.inspectLastObj = o;
+                        that.inspectDlgEl.css('left', x + "px").css('top', y + "px");
+                        that.inspectDlgEl.find('.inspect-line').text(ud.args.indx + 1);
+                        that.inspectDlgEl.find('.inspect-gcode').text(ud.args.origtext);
+                        that.inspectDlgEl.find('.inspect-end').text("X:" + ud.p2.x + ", Y:" + ud.p2.y + ", Z:" + ud.p2.z);
+                        that.inspectDlgEl.find('.inspect-feedrate').text(ud.p2.feedrate);
+                        that.inspectDlgEl.find('.inspect-distance').text(ud.p2.dist.toFixed(3));
+                        that.inspectDlgEl.find('.inspect-time').text((ud.p2.timeMins * 60).toFixed(2) + "s");
                     
-                    // remove any previous
-                    /*
-                    var that = this;
-                    this.inspectLastDecorateGroup.traverse(function(o) {
-                        that.inspectLastDecorateGroup.remove(o);
-                    });
+                        var pretty = that.convertMinsToPrettyDuration(ud.p2.timeMinsSum);
+                        that.inspectDlgEl.find('.inspect-timeSum').text(pretty);
+                        that.inspectDlgEl.removeClass("hidden");
                     
+                        // set the last object to this one
+                        that.inspectLastObj = o;
+                    }
                 
+                    var pt = io[0].point;
+                    // move arrow
+                    that.inspectArrowGrp.position.set(pt.x, pt.y, 0);
+                    that.inspectCurPos = pt.clone();
+                
+                
+                } else if (false) {
+                    console.log("nothing hit. resetting inspectLastObj:", that.inspectLastObj);
+                    if (that.inspectLastObj.uuid != "") {
                     
-                    // draw a bounding box
-                    var bbox = new THREE.BoundingBoxHelper( o, 0xff0000 );
-                    bbox.update();
-                    bbox.object.material.opacity = 0.1;
-                    bbox.object.material.transparent = true;
-                    bbox.material.opacity = 0.1;
-                    bbox.material.transparent = true;
-                    console.log("bbox:", bbox);
-                    //this.sceneAdd( bbox );
-                    this.inspectLastDecorateGroup.add(bbox);
-                    */
+                        // remove everything from this.inspectPreviewGroup
+                        that.inspectPreviewGroup.children.forEach(function(threeObj) {
+                            that.inspectPreviewGroup.remove(threeObj);
+                        }, that);
+                        
+                        //that.sceneRemove(this.inspectLastObj);
+                        that.inspectLastObj.material.color = 0x0000ff;
+                        that.inspectLastObj.material.opacity = this.inspectLastOpacity;
+                        that.inspectLastObj = {uuid:""};
+                        
+                        // hide dialog
+                        that.inspectDlgEl.addClass("hidden");
+                    }
+                }
+            
+                that.inspectAnimate = true;
+                that.animate();
+                that.inspectAnimate = false;
+                
+                that.inspectLatencyTimer = null;
+            }, this.inspectLatencyDelay);
+            
+        },
+        
+        createGlow: function(threeObj) {
+            console.log("createGlow. threeObj:", threeObj);
+            
+            var obj = new THREE.Group();
+            if (threeObj instanceof THREE.Line) {
+                if (!(threeObj.geometry instanceof THREE.BufferGeometry)) {
+                    console.log('nope');
+                    return;
+                }
+                
+                try {
+                    console.log('createGlow geometry:', threeObj.geometry);
                     
-                    // clone it, make it pretty
-                    /*
-                    var newObj = obj.object.clone();
-                    newObj.material.opacity = 1.0;
+                    var objGeometry = new THREE.Geometry().fromBufferGeometry(threeObj.geometry);              
                     
-                    this.inspectLastDecorateGroup.add(newObj);
-                    */
+                    // draw a cube at each end point
+                    var v1 = objGeometry.vertices[0];
+                    var v2 = objGeometry.vertices[objGeometry.vertices.length - 1];
                     
-                }
+                    var length = v1.distanceTo(v2);
+                    var dir = v2.clone().sub(v1).normalize();
+                    var ray = new THREE.Ray(v1, dir);
                 
+                    var geometry = new THREE.CylinderGeometry( 1, 1, length );
+                    var material = new THREE.MeshNormalMaterial( {
+                        //color: 0x00ff00,
+                        transparent: true,
+                        opacity: 0.1
+                    } );
                 
-                //io[0].object.material.opacity = 1.0;
-                
-                var pt = io[0].point;
-                // move arrow
-                this.inspectArrowGrp.position.set(pt.x, pt.y, 0);
-                this.inspectCurPos = pt.clone();
+                    var cylinder = new THREE.Mesh( geometry, material );
                 
+                    // figure out rotation
+                    var arrow = new THREE.ArrowHelper( dir, v1, length, 0xff0000 );
+                    obj.add(arrow);
                 
-            } else if (false) {
+                    var rot = arrow.rotation.clone()
+                    cylinder.rotation.set(rot.x, rot.y, rot.z);
                 
-                // nothing was hit, reset last obj
-                // reset last object
-                console.log("nothing hit. resetting inspectLastObj:", this.inspectLastObj);
-                if (this.inspectLastObj.uuid != "") {
+                    var cpos = ray.at(length/2);
+                    cylinder.position.set(cpos.x, cpos.y, cpos.z);
+
+                    console.log("adding cylinder:", cylinder);
+                    obj.add(cylinder);
                     
-                    // remove everything from this.inspectPreviewGroup
-                    this.inspectPreviewGroup.children.forEach(function(threeObj) {
-                        this.inspectPreviewGroup.remove(threeObj);
-                    }, this);
-                    //this.sceneRemove(this.inspectLastObj);
-                    this.inspectLastObj.material.color = 0x0000ff;
-                    this.inspectLastObj.material.opacity = this.inspectLastOpacity;
-                    this.inspectLastObj = {uuid:""};
-                    // hide dialog
-                    this.inspectDlgEl.addClass("hidden");
+                } catch(err) {
+                    // this is because threejs has a bug, or sloppy code in regards to fromBufferGeometry
+                    console.log('createGlow error', err, threeObj.geometry);
                 }
-            }
-        },
-        createGlow: function(threeObj) {
-            console.log("createGlow. threeObj:", threeObj);
-            var obj = new THREE.Group();
-            if (threeObj instanceof THREE.Line) {
-                console.log("threeObj is Line");
-                // draw a cube at each end point
-                var v1 = threeObj.geometry.vertices[0];
-                var v2 = threeObj.geometry.vertices[threeObj.geometry.vertices.length - 1];
-                var uv1 = v1.clone();
-                var uv2 = v2.clone();
-                var length = v1.distanceTo(v2);
-                var dir = v2.clone().sub(v1).normalize();
-                var ray = new THREE.Ray(v1, dir);
-                var geometry = new THREE.CylinderGeometry( 1, 1, length );
-                var material = new THREE.MeshNormalMaterial( {
-                    //color: 0x00ff00,
-                    transparent: true,
-                    opacity: 0.1
-                } );
-                var cylinder = new THREE.Mesh( geometry, material );
-                // figure out rotation
-                var arrow = new THREE.ArrowHelper( dir, v1, length, 0xff0000 );
-                obj.add(arrow);
-                //uv2.sub(uv1);
-                /*uv1.normalize();
-                uv2.normalize();
-                var quaternion = new THREE.Quaternion().setFromUnitVectors( uv1, uv2 );
-                var matrix = new THREE.Matrix4().makeRotationFromQuaternion( quaternion );
-                cylinder.applyMatrix( matrix );*/
-                var rot = arrow.rotation.clone()
-                cylinder.rotation.set(rot.x, rot.y, rot.z);
-                var cpos = ray.at(length/2);
-                cylinder.position.set(cpos.x, cpos.y, cpos.z);
-
-                console.log("adding cylinder:", cylinder);
-                obj.add(cylinder);
+                
             } else {
                 console.log("threeObj not Line");
-                //return 
             }
+            
             return obj;
         },
         createGlowCubeCaps: function(threeObj) {
             console.log("createGlow. threeObj:", threeObj);
+            
             var obj = new THREE.Group();
             if (threeObj instanceof THREE.Line) {
+                if (!(threeObj.geometry instanceof THREE.BufferGeometry)) {
+                    return;
+                }
+                
                 console.log("threeObj is Line");
-                // draw a cube at each end point
-                var v1 = threeObj.geometry.vertices[0];
-                var v2 = threeObj.geometry.vertices[threeObj.geometry.vertices.length - 1];
-                var geometry = new THREE.BoxGeometry( 1, 1, 1 );
-                var material = new THREE.MeshNormalMaterial( {
-                    //color: 0x00ff00,
-                    transparent: true,
-                    opacity: 0.1
-                } );
-                var cube = new THREE.Mesh( geometry, material );
-                cube.position.set(v1.x, v1.y, v1.z);
-                var cube2 = cube.clone();
-                cube2.position.set(v2.x, v2.y, v2.z);
-                //this.sceneAdd( cube );
-                console.log("adding cube:", cube, "cube2:", cube2);
-                obj.add(cube);
-                obj.add(cube2);
-                //return cube;
+                try {
+                    var objGeometry = new THREE.Geometry().fromBufferGeometry(threeObj.geometry);
+                          
+                    // draw a cube at each end point
+                    var v1 = objGeometry.vertices[0];
+                    var v2 = objGeometry.vertices[geometry.vertices.length - 1];
+                
+                    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
+                    var material = new THREE.MeshNormalMaterial( {
+                        //color: 0x00ff00,
+                        transparent: true,
+                        opacity: 0.1
+                    } );
+                
+                    var cube = new THREE.Mesh( geometry, material );
+                    cube.position.set(v1.x, v1.y, v1.z);
+                
+                    var cube2 = cube.clone();
+                    cube2.position.set(v2.x, v2.y, v2.z);
+                
+                    console.log("adding cube:", cube, "cube2:", cube2);
+                
+                    obj.add(cube);
+                    obj.add(cube2);
+                } catch(err) {
+                    // this is because threejs has a bug, or sloppy code in regards to fromBufferGeometry
+                    console.log('createGlowCubeCaps error', err, threeObj.geometry);
+                }
             } else {
                 console.log("threeObj not Line");
-                //return 
             }
+            
             return obj;
         },
         
 
         // JOG CODE REGION
-        isJogBtnAttached: false, // is the jog btn setup?
-        isJogSelect: false, // indicates we're in 3d jog mode
         initJog: function() {
             if (!this.isJogBtnAttached) {
                 // attach click event
                 console.log("doing one time run of initial jog setup. this should not run more than once!!!");
+                
                 $('.com-chilipeppr-widget-3d-menu-jog').click(this.toggleJog.bind(this));
                 
-                // attach shortcut key
-                //$(document).keydown(this.jogKeyDown.bind(this));
-                //$(document).keydown(this.jogKeyUp.bind(this));
-                var el = $('#com-chilipeppr-widget-3dviewer-renderArea');
+                var el = this.domElement;
                 el.focus();
+                
                 $(document).keydown(this.jogKeyDown.bind(this));
                 $(document).keyup(this.jogKeyUp.bind(this));
+                
                 this.isJogBtnAttached = true;
             }
         },
         setupJog: function(evt) {
-            
             console.log("setupJog.");
+            
             if (this.isJogSelect) {
                 console.log("we are already in jogging mode. being asked to setup, but returning cuz u can't setup more than once.");
                 return;
             }
-            //  var el = $(this.renderer.domElement);
-            //var el = $('#com-chilipeppr-widget-3dviewer-renderArea');
-            //el.focus();
-            //console.log("setupJog. el:", el);
-            //el.keydown(this.jogKeyDown.bind(this));
-            //el.keyup(this.jogKeyUp.bind(this));
-            //this.renderer.domElement.addEventListener( 'keydown', this.jogKeyDown.bind(this), false );
             
             // start watching mouse
-            var el = $(this.renderer.domElement);
+            var el = this.domElement;
             el.mousemove(this.jogMouseMove.bind(this));
             el.click(this.jogMouseClick.bind(this));
+            
             $('.com-chilipeppr-widget-3d-menu-jog').addClass("active");
             $('.com-chilipeppr-widget-3d-menu-jog').addClass("btn-primary");
+            
             // make sure animation stays on
             //this.gotoXyz({x:0,y:0,z:3});
             this.isJogSelect = true;
         },
         unsetupJog: function() {
-            
             if (!this.isJogSelect) {
                 console.log("we are being asked to unsetup jog, but it is not running so why are we getting called?");
                 return;
             }
             
-            var el = $(this.renderer.domElement);
+            var el = this.domElement;
             el.unbind("mousemove"); //this.jogMouseMove.bind(this));
             el.unbind("click");
+            
             $('.com-chilipeppr-widget-3d-menu-jog').removeClass("active");
             $('.com-chilipeppr-widget-3d-menu-jog').removeClass("btn-primary");
+            
             this.unsetupJogRaycaster();
             this.isJogSelect = false;
         },
@@ -871,72 +904,45 @@
             }
         },
         jogKeyDown: function(evt) {
-            //console.log("jogKeyDown. evt:", evt);
-            //if ((evt.cltrKey || evt.altKey) && !this.isJogSelect) {
-            //if ((evt.ctrlKey || evt.altKey)  && !this.isJogSelect) {
             if ((evt.ctrlKey)  && !this.isJogSelect) {
-                //evt.preventDefault();
-                //this.isJogSelect = true;
-                this.wakeAnimate();
+                // TODO: wakeAnimate change
                 this.setupJog(evt);
             } else {
                 //console.log("we are already jogging. ignoring keydown.");
             }
         },
         jogKeyUp: function(evt) {
-            //console.log("jogKeyUp. evt:", evt);
-            //if ((evt.keyCode == 17 || evt.keyCode == 18) && this.isJogSelect) {
             if ((evt.keyCode == 17) && this.isJogSelect) {
-                //this.isJogSelect = false;
                 this.unsetupJog(evt);
             }
         },
-        arrowHelper: null,
-        jogPlane: null,
-        isJogRaycaster: false,
-        jogArrow: null,
-        jogArrowCyl: null,
-        jogArrowLine: null,
-        jogArrowShadow: null,
         unsetupJogRaycaster: function() {
             this.sceneRemove(this.jogPlane);
             this.sceneRemove(this.jogArrow);
+            
             this.isJogRaycaster = false;
+            
+            this.inspectAnimate = true;
+            this.animate();
+            this.inspectAnimate = false;
         },
         setupJogRaycaster: function() {
-            
             console.log("doing setupJogRaycaster"); 
             console.log("mimic grid size:", this.grid);
-            var helper = new THREE.BoundingBoxHelper(this.grid, 0xff0000);
-            helper.update();
-            // If you want a visible bounding box
-            //scene.add(helper);
-            // If you just want the numbers
-            console.log(helper.box.min);
-            console.log(helper.box.max);
             
-            console.log("boundingbox:", helper.box);
-            var w = helper.box.max.x - helper.box.min.x;
-            var h = helper.box.max.y - helper.box.min.y;
+            var helper = new THREE.BoxHelper(this.grid, 0xff0000);
+            
+            var box = new THREE.Box3();
+            box.setFromObject(helper);
+            
+            console.log("boundingbox:", box);
+            var w = box.max.x - box.min.x;
+            var h = box.max.y - box.min.y;
             
             // create plane at z 0 to project onto
             var geometry = new THREE.PlaneBufferGeometry( w, h );
             var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
             this.jogPlane = new THREE.Mesh( geometry, material );
-            //this.scene.add( this.jogPlane );
-            
-            // setup arrow helper
-            /*
-            var length = 50;
-            var hex = 0xffff00;
-            
-            var origin = new THREE.Vector3(0,0,50);
-            var dir = new THREE.Vector3(0,0,-1);
-            //if (this.arrowHelper != null) this.scene.remove(this.arrowHelper);
-            this.arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
-            //this.arrowHelper.material.visibility = false;
-            this.scene.add( this.arrowHelper );
-            */
             
             console.group("draw jogArrow");
             
@@ -958,11 +964,9 @@
             cylinder.overdraw = true;
             cylinder.rotation.x = -90 * Math.PI / 180;
             cylinder.position.z = 20;
-            //cylinder.position.z = 40;
             cylinder.material.opacity = 0.3;
             cylinder.material.transparent = true;
-            cylinder.castShadow = false;
-            console.log("jogArrow cone:", cylinder);
+            cylinder.castShadow = true;
             
             // move the cylinder up in the group to account for z pos of toolhead
             // acct for scale
@@ -975,38 +979,15 @@
             var scale = this.getUnitVal(1);
             jogArrowGrp.scale.set(scale / 3, scale / 3, scale / 3);
 
-            // add fake shadow
-            var triangleShape = new THREE.Shape();
-            triangleShape.moveTo(  0, 0 );
-            triangleShape.lineTo(  -8, 3 );
-            triangleShape.lineTo( -8.5, 2 );
-            triangleShape.lineTo(  -8.7, 1 ); 
-            triangleShape.lineTo(  -8.72, 0 ); 
-            triangleShape.lineTo(  -8.7, -1 ); 
-            triangleShape.lineTo( -8.5, -2 );
-            triangleShape.lineTo(  -8, -3 );
-            triangleShape.lineTo(  0, 0 ); // close path
-            var geometry = new THREE.ShapeGeometry( triangleShape );
-            
-            //var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: 0x000000, transparent: true, opacity:0.05 } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );
-            var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: 0x000000, transparent: true, opacity:0.05 } ) ] );
-            //mesh.position.set( x, y, z - 125 );
-            //mesh.rotation.set( rx, ry, rz );
-            //mesh.scale.set( s, s, s );
-            
-            // figure out z position
-            //mesh.position.setZ(this.toolhead.position.z);
-            // move shadow left by the amount by amount of z height
-            mesh.position.setX(posZ * -1);
-            this.jogArrowShadow = mesh;
-            jogArrowGrp.add( mesh );
-            
             // draw dotted lines from jog tip and shadow
-            var lineMat = new THREE.LineDashedMaterial( { color: 0x000000, xdashSize: 45, xgapSize: 45 } );
+            var lineMat = new THREE.LineDashedMaterial( { color: 0x000000, dashSize: 45, gapSize: 45 } );
             var lineGeo = new THREE.Geometry();
+            
             lineGeo.vertices.push(new THREE.Vector3( 0, 0, 0 ));
             lineGeo.vertices.push(new THREE.Vector3( 0, 0, posZ ));
-            var line = new THREE.Line(lineGeo, lineMat, THREE.LineStrip);
+            
+            var line = new THREE.Line(lineGeo, lineMat);
+            
             this.jogArrowLine = line;
             jogArrowGrp.add(line);
             
@@ -1021,10 +1002,10 @@
                 opacity: 0.2,
                 size: 7 //this.getUnitVal(7)
             });
+            
             jogArrowGrp.add( txtObj );
             
             this.jogArrow = jogArrowGrp;
-            
             this.sceneAdd(this.jogArrow);
             
             console.groupEnd();
@@ -1044,72 +1025,118 @@
                 }
             }
         },
-        jogCurPos: null,
         jogMouseMove: function(evt) {
-            
-            //event.preventDefault();
-            if (!this.isJogSelect) {
+            if (!this.isJogSelect || this.jogLatencyTimer) {
                 return;
             }
             
-            this.wakeAnimate();
-            
-            //console.log("jogMouseMove. evt:", evt);
-
             var mouse = {};
-            mouse.x = ( evt.clientX / window.innerWidth ) * 2 - 1;
-            mouse.y = - ( evt.clientY / window.innerHeight ) * 2 + 1;
+            mouse.x = ( ( event.clientX - this.domElement.offset().left ) / this.domElement.width() ) * 2 - 1;
+            mouse.y = - ( ( event.clientY - this.domElement.offset().top ) / this.domElement.height() ) * 2 + 1;
+            
+            var that = this;
+            this.jogLatencyTimer = setTimeout(function() {
+                var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( that.camera );
+            
+                var origin = that.camera.position.clone();
+                var dir = vector.sub( that.camera.position ).normalize();
+            
+                if (!that.isJogRaycaster && that.isJogSelect) {
+                    that.setupJogRaycaster();
+                }
             
-            var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( this.camera );
+                var raycaster = new THREE.Raycaster( origin, dir );
+
+                var io = raycaster.intersectObject(that.jogPlane, false);
+                //console.log("io:", io);
             
-            var origin = this.camera.position.clone();
-            var dir = vector.sub( this.camera.position ).normalize();
+                if (io.length > 0) {
+                    // we hit the jog plane
+                    var pt = io[0].point;
+                    // move arrow
+                    that.jogArrow.position.set(pt.x, pt.y, 0);
+                    that.jogCurPos = pt.clone();
+                }
+                
+                that.inspectAnimate = true;
+                that.animate();
+                that.inspectAnimate = false;
+                
+                that.jogLatencyTimer = null;
+            }, this.jogLatencyDelay);
+        },
+
+        setupCogMenu: function() {
+            $('.com-chilipeppr-widget-3dviewer-settings-aa').click(this.onToggleAAClick.bind(this));
+            $('.com-chilipeppr-widget-3dviewer-settings-shadows').click(this.onToggleShadowClick.bind(this));
+            $('.com-chilipeppr-widget-3dviewer-settings-animation').click(this.onToggleAnimationClick.bind(this));
+        },
+        
+        setCogMenuState: function() {
+            var toggleShadowItem = $('.com-chilipeppr-widget-3dviewer-settings-shadows');
+            if (this.showShadow && !toggleShadowItem.hasClass('alert-info')) {
+                toggleShadowItem.addClass('alert-info');
+            } else if (!this.showShadow) {
+                toggleShadowItem.removeClass('alert-info');
+            }
             
-            if (!this.isJogRaycaster) {
-                this.setupJogRaycaster();
+            var toggleAAItem = $('.com-chilipeppr-widget-3dviewer-settings-aa');
+            if (!this.disableAA && !toggleAAItem.hasClass('alert-info')) {
+                toggleAAItem.addClass('alert-info');
+            } else if (this.disableAA) {
+                toggleAAItem.removeClass('alert-info');
             }
             
-            var raycaster = new THREE.Raycaster( origin, dir );
-            //console.log("mouse:", mouse, "raycaster:", raycaster);
-            var io = raycaster.intersectObject(this.jogPlane, false);
-            //console.log("io:", io);
-            
-            if (io.length > 0) {
-                // we hit the jog plane
-                var pt = io[0].point;
-                // move arrow
-                this.jogArrow.position.set(pt.x, pt.y, 0);
-                this.jogCurPos = pt.clone();
+            var enableAnimationItem = $('.com-chilipeppr-widget-3dviewer-settings-animation');
+            if (!this.disableAnimation && !enableAnimationItem.hasClass('alert-info')) {
+                enableAnimationItem.addClass('alert-info');
+            } else if (this.disableAnimation) {
+                enableAnimationItem.removeClass('alert-info');
             }
         },
-        showShadow: false,
-        setupCogMenu: function() {
-            $('.com-chilipeppr-widget-3dviewer-settings-shadows').click( this.onToggleShadowClick.bind(this));
+        
+        onToggleAAClick: function(evt, param) {
+            console.log("got onToggleAAClick. evt:", evt, "param:", param);
+            this.disableAA = !this.disableAA; // toggle
+            
+            localStorage.setItem('disable-aa', (this.disableAA) ? 'true' : 'false');
+            console.log ("Set disable-aa in storage:  ", (this.disableAA) ? 'true' : 'false');
+            
+            this.setCogMenuState();
+            
+            // you cant dynamically change the state of AA
+            //this.renderer.antialias = !this.disableAA;
+            
+            $('#com-chilipeppr-widget-3dviewer-aa-notice').modal();
         },
+        
         onToggleShadowClick: function(evt, param) {
             console.log("got onToggleShadowClick. evt:", evt, "param:", param);
             this.showShadow = !this.showShadow; // toggle
-            this.drawToolhead();
-        },
-        setupFpsMenu: function() {
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-5').click(5, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-10').click(10, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-15').click(15, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-30').click(30, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-60').click(60, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-0').click(0, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr--5').click(-5, this.onFpsClick.bind(this));
-        },
-        onFpsClick: function(evt, param) {
-            console.log("got onFpsClick. evt:", evt, "param:", param);
-            var fr = evt.data;
-            this.setFrameRate(fr);
-            // set css to show selected
-            $('.com-chilipeppr-widget-3dviewer-settings-fr').removeClass('alert-info');
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-' + fr).addClass('alert-info');
-            this.wakeAnimate();
+            
+            localStorage.setItem('toolhead-shadow', (this.showShadow) ? 'true' : 'false');
+            console.log ("Set toolhead-shadow in storage:  ", (this.showShadow) ? 'true' : 'false');
+            
+            this.renderer.shadowMap.enabled = this.showShadow;
+            
+            this.setCogMenuState();
+            
+            this.drawToolhead();
+            
+            this.animate();
         },
-        gridSize: 1, // global property for size of grid. default to 1 (shapeoko rough size)
+        
+        onToggleAnimationClick: function(evt, param) {
+            console.log("got onToggleAnimationClick. evt:", evt, "param:", param);
+            this.disableAnimation = !this.disableAnimation; // toggle
+            
+            localStorage.setItem('disable-animation', (this.disableAnimation) ? 'true' : 'false');
+            console.log ("Set disable-animation in storage:  ", (this.disableAnimation) ? 'true' : 'false');
+            
+            this.setCogMenuState();
+        },
+        
+        
         setupGridSizeMenu: function() {
             $('.com-chilipeppr-widget-3dviewer-gridsizing-1x').click(1, this.onGridSizeClick.bind(this));
             $('.com-chilipeppr-widget-3dviewer-gridsizing-2x').click(2, this.onGridSizeClick.bind(this));
@@ -1129,7 +1156,10 @@
             
             $('.com-chilipeppr-widget-3dviewer-gridsizing-' + this.gridSize + 'x').addClass("alert-info");
             
+            this.animate();
         },
+        
+        
         setUnits: function(units) {
             if (units == "mm")
                 this.isUnitsMm = true;
@@ -1145,26 +1175,38 @@
             chilipeppr.publish("/" + this.id + "/recvUnits", units);
         },
         onUnitsChanged: function() {
-            //console.log("onUnitsChanged");
             // we need to publish back the units
             var units = "mm";
             if (!this.isUnitsMm) units = "inch";
             chilipeppr.publish("/" + this.id + "/unitsChanged", units);
             $('.com-chilipeppr-widget-3dviewer-units-indicator').text(units);
         },
+        
         request3dObject: function() {
             console.log("request3dObject");
+            
+            // backwards compat HAX
+            if (this.object && this.object.userData) {
+                this.object.userData.lines = this.parsedLines;
+            }
+            
             // we need to publish back the object
             chilipeppr.publish("/" + this.id + "/recv3dObject", this.object, {'scene': this.scene, 'camera': this.camera, 'toolhead': this.toolhead, 'widget': this });
         },
+        
         sceneAdd: function(obj) {
             console.log("sceneAdd. obj:", obj);
-            this.wakeAnimate();
+            
+            // TODO: wakeAnimate change
+            this.animate();
             this.scene.add(obj);
         },
         sceneRemove: function(obj) {
             console.log("sceneRemove. obj:", obj);
-            this.wakeAnimate();
+            
+            // TODO: wakeAnimate change
+            this.animate();
+            
             if (obj && 'traverse' in obj) {
                 this.scene.remove(obj);
                 obj.traverse( function ( child ) {
@@ -1176,14 +1218,18 @@
             }
         },
         sceneClear: function() {
+            console.log('scene clear');
+            
             this.stopSampleRun();
-            this.wakeAnimate();
-            //this.scene.remove(this.object);
+
             this.object.children = [];
             this.sceneRemove(this.decorate);
+            
+            this.animate();
         },
+        
+        
         btnSetup: function() {
-            
             // attach button bar features
             var that = this;
             this.isLookAtToolHeadMode = true;
@@ -1222,10 +1268,6 @@
             });
         },
         forkSetup: function () {
-            //$('#com-chilipeppr-widget-3dviewer .fork').prop('href', this.fiddleurl);
-            //$('#com-chilipeppr-widget-3dviewer .standalone').prop('href', this.url);
-            //var t = $('#com-chilipeppr-widget-3dviewer .fork-name');
-            //t.html(this.id);
             $('#com-chilipeppr-widget-3dviewer .panel-title').popover({
                 title: this.name,
                 content: this.desc,
@@ -1242,8 +1284,6 @@
                     pubsubviewer.attachTo($('#com-chilipeppr-widget-3dviewer-dropdown'), that);
                 });
             });
-
-            //console.log("title in menu", t);
         },
         onPubSubFileLoaded: function(txt) {
             this.openGCodeFromText(txt);
@@ -1253,12 +1293,12 @@
         },
         loadFile: function (path, callback /* function(contents) */ ) {
             var that = this;
-            
-          // rewrite www.chilipeppr.com url's to i2dcui.appspot.com so we support SSL
-          path = path.replace(/http\:\/\/www.chilipeppr.com/i, "//i2dcui.appspot.com");
-          path = path.replace(/http\:\/\/chilipeppr.com/i, "//i2dcui.appspot.com");
-          path = path.replace(/\/\/www.chilipeppr.com/i, "//i2dcui.appspot.com");
-          path = path.replace(/\/\/chilipeppr.com/i, "//i2dcui.appspot.com");
+
+            // rewrite www.chilipeppr.com url's to i2dcui.appspot.com so we support SSL
+            path = path.replace(/http\:\/\/www.chilipeppr.com/i, "//i2dcui.appspot.com");
+            path = path.replace(/http\:\/\/chilipeppr.com/i, "//i2dcui.appspot.com");
+            path = path.replace(/\/\/www.chilipeppr.com/i, "//i2dcui.appspot.com");
+            path = path.replace(/\/\/chilipeppr.com/i, "//i2dcui.appspot.com");
 
             $.get(path, null, callback, 'text')
                 .error(function () {
@@ -1279,47 +1319,45 @@
         },
         openGCodeFromPath: function (path) {
             var that = this;
-            //$('#openModal').modal('hide');
+            
             if (that.object) {
-                //TWEEN.removeAll();
                 this.stopSampleRun();
                 that.scene.remove(that.object);
-                //that.scene.remove(that.decorate);
             }
             that.loadFile(path, function (gcode) {
                 that.object = that.createObjectFromGCode(gcode);
                 that.scene.add(that.object);
                 that.viewExtents();
-                //that.decorateExtents();
                 that.drawAxesToolAndExtents();
                 that.onUnitsChanged();
                 localStorage.setItem('last-loaded', path);
                 localStorage.removeItem('last-imported');
             });
+            
             // fire off Dat Chu's scene reload signal
             that.onSignalSceneReloaded();
         },
         openGCodeFromText: function (gcode) {
             console.log("openGcodeFromText");
-            this.wakeAnimate();
-            //$('#openModal').modal('hide');
+
             if (this.object) {
-                //TWEEN.removeAll();
                 this.stopSampleRun();
                 this.scene.remove(this.object);
-                //this.scene.remove(this.decorate);
             }
+            
             this.object = this.createObjectFromGCode(gcode);
             console.log("done creating object:", this.object);
             this.scene.add(this.object);
-            //this.lookAtCenter();
+            
             this.viewExtents();
-            //this.decorateExtents();
             this.drawAxesToolAndExtents();
             this.onUnitsChanged();
-            this.setDetails(this.object.userData.lines.length + " GCode Lines");
-            this.wakeAnimate();
+            this.setDetails(this.parsedLines.length + " GCode Lines");
+            
+            // TODO: wakeAnimate change
+            this.animate();
             
+            // TODO: maybe we remove this logic all-together
             // we can get a QuotaExceededError here, so catch it
             try {
                 // remove old 1st to perhaps make more room for quota check
@@ -1328,8 +1366,6 @@
                 localStorage.setItem('last-imported', gcode);
             } catch(e) {
                 if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name == "QuotaExceededError" || e.code == 22 || e.name == "NS_ERROR_DOM_QUOTA_REACHED" || e.code == 1014) {
-                    //this.sceneRemove(this.object);
-                    // show err dialog
                     console.error("3D Viewer Widget. out of local storage space, but letting user proceed. err:", e);
                     $('#com-chilipeppr-widget-3dviewer-outofspace').modal();
                 } else {
@@ -1340,22 +1376,19 @@
             
             // fire off Dat Chu's scene reload signal
             this.onSignalSceneReloaded();
-
         },
         lookAtCenter: function () {
             // this method makes the trackball controls look at center of gcode object
-            this.controls.target.x = this.object.userData.center2.x;
-            this.controls.target.y = this.object.userData.center2.y;
-            this.controls.target.z = this.object.userData.center2.z;
+            this.controls.target.x = this.sceneCenter.x;
+            this.controls.target.y = this.sceneCenter.y;
+            this.controls.target.z = this.sceneCenter.z;
         },
-        isLookAtToolHeadMode: false,
+
         lookAtToolHead: function () {
             // this method makes the trackball controls look at the tool head
-            //console.log("lookAtToolHead. controls:", this.controls, "toolhead:", this.toolhead);
             if (this.isLookAtToolHeadMode) {
                 this.controls.target.x = this.toolhead.position.x;
                 this.controls.target.y = this.toolhead.position.y;
-                //this.controls.target.z = this.toolhead.position.z - 20;
                 this.controls.target.z = this.toolhead.position.z;
             }
         },
@@ -1379,47 +1412,40 @@
             this.camera.updateProjectionMatrix();
         },
         viewExtents: function () {
-            console.log("viewExtents. object.userData:", this.object.userData);
             console.log("controls:", this.controls);
-            this.wakeAnimate();
+            
+            // TODO: wakeAnimate change
+            this.moveAnimate = true;
+            this.animate();
+            this.moveAnimate = false;
             
             // lets override the bounding box with a newly
             // generated one
             // get its bounding box
-            var helper = new THREE.BoundingBoxHelper(this.object, 0xff0000);
-            helper.update();
-            //if (this.bboxHelper)
-            //    this.scene.remove(this.bboxHelper);
+            var helper = new THREE.BoxHelper(this.object, 0xff0000);
+                        
+            var box = new THREE.Box3();
+            box.setFromObject(helper);
+            
             this.bboxHelper = helper;
+            
             // If you want a visible bounding box
-            //this.scene.add(this.bboxHelper);
-            console.log("helper bbox:", helper);
-            
-            var minx = helper.box.min.x;
-            var miny = helper.box.min.y;
-            var maxx = helper.box.max.x;
-            var maxy = helper.box.max.y;
-            var minz = helper.box.min.z;
-            var maxz = helper.box.max.z;
-            
-            var ud = this.object.userData;
-            ud.bbox2 = helper.box;
-            ud.center2.x = minx + ((maxx - minx) / 2);
-            ud.center2.y = miny + ((maxy - miny) / 2);
-            ud.center2.z = minz + ((maxz - minz) / 2);
-            
-            //this.controls.enabled = false;
+            console.log("helper bbox:", box);
+            
+            var minx = box.min.x;
+            var miny = box.min.y;
+            var maxx = box.max.x;
+            var maxy = box.max.y;
+            var minz = box.min.z;
+            var maxz = box.max.z;
+            
+            var center = this.sceneCenter;
+            center.x = minx + ((maxx - minx) / 2);
+            center.y = miny + ((maxy - miny) / 2);
+            center.z = minz + ((maxz - minz) / 2);
+            
             this.controls.reset();
-            //this.controls.object.rotation._x = 0.5;
-            //this.controls.object.rotation._y = 0.5;
-            //this.controls.object.rotation._z = 0.5;
-            //this.controls.object.rotation = THREE.Euler(0.5, 0.5, 0.5);
-            //this.controls.object.setRotationFromEuler(THREE.Euler(0.5,0.5,0.5));
-
-            // get max of any of the 3 axes to use as max extent
-            //var lenx = Math.abs(ud.bbbox2.min.x) + ud.bbbox2.max.x;
-            //var leny = Math.abs(ud.bbbox2.min.y) + ud.bbbox2.max.y;
-            //var lenz = Math.abs(ud.bbbox2.min.z) + ud.bbbox2.max.z;
+            
             var lenx = maxx - minx;
             var leny = maxy - miny;
             var lenz = maxz - minz;
@@ -1437,13 +1463,14 @@
             
             var maxlen = Math.max(lenx, leny, lenz);
             var dist = 2 * maxlen;
+            
             // center camera on gcode objects center pos, but twice the maxlen
-            this.controls.object.position.x = ud.center2.x;
-            this.controls.object.position.y = ud.center2.y;
-            this.controls.object.position.z = ud.center2.z + dist;
-            this.controls.target.x = ud.center2.x;
-            this.controls.target.y = ud.center2.y;
-            this.controls.target.z = ud.center2.z;
+            this.controls.object.position.x = center.x;
+            this.controls.object.position.y = center.y;
+            this.controls.object.position.z = center.z + dist;
+            this.controls.target.x = center.x;
+            this.controls.target.y = center.y;
+            this.controls.target.z = center.z;
             console.log("maxlen:", maxlen, "dist:", dist);
             var fov = 2.2 * Math.atan(maxlen / (2 * dist)) * (180 / Math.PI);
             console.log("new fov:", fov, " old fov:", this.controls.object.fov);
@@ -1452,10 +1479,6 @@
                 return;
             }
             this.controls.object.fov = fov;
-            //this.controls.object.setRotationFromEuler(THREE.Euler(0.5,0.5,0.5));
-            //this.controls.object.rotation.set(0.5,0.5,0.5,"XYZ");
-            //this.controls.object.rotateX(2);
-            //this.controls.object.rotateY(0.5);
             
             var L = dist;
             var camera = this.controls.object;
@@ -1465,76 +1488,90 @@
             var quaternion = new THREE.Quaternion();
             
             // Zoom correction
+            // TODO: explore why this is setting setFromAxisAngle 3 times
             camera.translateZ(L - l);
             console.log("up:", up);
             up.y = 1; up.x = 0; up.z = 0;
             quaternion.setFromAxisAngle(up, 0.5);
-            //camera.position.applyQuaternion(quaternion);
+
             up.y = 0; up.x = 1; up.z = 0;
             quaternion.setFromAxisAngle(up, 0.5);
             camera.position.applyQuaternion(quaternion);
+            
             up.y = 0; up.x = 0; up.z = 1;
             quaternion.setFromAxisAngle(up, 0.5);
-            //camera.position.applyQuaternion(quaternion);
-            
+                
             camera.lookAt(vector);
                         
-            //this.camera.rotateX(90);
-            
             this.controls.object.updateProjectionMatrix();
-            //this.controls.enabled = true;
-            //this.scaleInView();
-            //this.controls.rotateCamera(0.5);
-            //this.controls.noRoll = true;
-            //this.controls.noRotate = true;
         },
         stopSampleRun: function (evt) {
             console.log("stopSampleRun. tween:", this.tween);
+            this.tweenAnimate = false;
+            
             this.tweenIsPlaying = false;
-            //this.tween.stopChainedTweens();
-            //console.log("_onCompleteCallback:", this.tween._onCompleteCallback);
-            //this.tween._onCompleteCallback.apply(this.tween, null);
+
             if (this.tweenHighlight) this.scene.remove(this.tweenHighlight);
             if (this.tween) this.tween.stop();
-            //TWEEN.stopChainedTweens();
-            //TWEEN.removeAll();
-            //TWEEN.stop();
+
             $('.com-chilipeppr-widget-3d-menu-samplerun').prop('disabled', false);
             $('.com-chilipeppr-widget-3d-menu-samplerunstop').prop('disabled', true);
             $('.com-chilipeppr-widget-3d-menu-samplerunstop').popover('hide');
-            this.animAllowSleep();
+            
+            // TODO: animAllowSleep
+            //this.animAllowSleep();
         },
         pauseSampleRun: function () {
             console.log("pauseSampleRun");
             if (this.tweenPaused) {
-                // the tween was paused, it's being non-paused
                 console.log("unpausing tween");
-                this.animNoSleep();
+                
+                // TODO: fix
+                //this.animNoSleep();
+                this.tweenAnimate = true;
+                
                 this.tweenIsPlaying = true;
                 this.tweenPaused = false;
                 this.playNextTween();
+                
+                this.animate();
             } else {
                 console.log("pausing tween on next playNextTween()");
+                this.tweenAnimate = false;
+                
                 this.tweenIsPlaying = false;
                 this.tweenPaused = true;
-                this.animAllowSleep();
+                
+                // TODO: animAllowSleep
+                //this.animAllowSleep();
+                this.animate();
             }
         },
+        
         gotoXyz: function(data) {
             // we are sent this command by the CNC controller generic interface
             console.log("gotoXyz. data:", data);
-            this.animNoSleep();
+            
+            if (this.animationLatencyTimer) {
+                console.log("gotoXyz. skipping logic, animation already in progress");
+                return;
+            }
+            
+            // TODO: fix
+            //this.animNoSleep();
+            this.tweenAnimate = false;
             this.tweenIsPlaying = false;
             this.tweenPaused = true;
             
             if ('x' in data && data.x != null) this.toolhead.position.x = data.x;
             if ('y' in data && data.y != null) this.toolhead.position.y = data.y;
-            //if ('z' in data && data.z != null) this.toolhead.position.z = data.z + 20;
             if ('z' in data && data.z != null) this.toolhead.position.z = data.z;
+            
             if (this.showShadow) {
                 this.toolhead.children[0].target.position.set(this.toolhead.position.x, this.toolhead.position.y, this.toolhead.position.z);
                 this.toolhead.children[1].target.position.set(this.toolhead.position.x, this.toolhead.position.y, this.toolhead.position.z);
             }
+            
             this.lookAtToolHead();
             
             // see if jogging, if so rework the jog tool
@@ -1544,11 +1581,13 @@
             if (this.isJogSelect && this.jogArrowCyl) {
                 if ('z' in data && data.z != null) {
                     console.log("adjusting jog tool:", this.jogArrow);
+                    
                     var cyl = this.jogArrowCyl; //.children[0];
                     var line = this.jogArrowLine; //.children[2];
                     var shadow = this.jogArrowShadow; //.children[3];
                     var posZ = data.z * 3; // acct for scale
                     cyl.position.setZ(posZ + 20);
+                    
                     console.log("line:", line.geometry.vertices);
                     line.geometry.vertices[1].z = posZ; // 2nd top vertex
                     line.geometry.verticesNeedUpdate = true;
@@ -1556,57 +1595,76 @@
                 }
             }
             
-            this.animAllowSleep();
+            this.gotoAnimate = true;
+            this.animate();
+            this.gotoAnimate = false;
         },
         gotoLine: function(data) {
             // this method is sort of like playNextTween, but we are jumping to a specific
             // line based on the gcode sender
             console.log("got gotoLine. data:", data);
-            //this.stopSampleRun();
-            //this.tweenPaused = false;
-            //this.pauseSampleRun();
-            this.animNoSleep();
+            
+            // TODO: fix
+            //this.animNoSleep();
+            this.tweenAnimate = true;
+            
             this.tweenIsPlaying = false;
             this.tweenPaused = true;
             
-            var lines = this.object.userData.lines;
-            console.log("userData.lines:", lines[data.line]);
+            var lines = this.parsedLines;
+            console.log("parsedLines:", lines[data.line]);
+            
             var curLine = lines[data.line];
+            
+            if (!curLine.p2) {
+                console.log('no p2 defined for current line:', curLine);
+                return;
+            }
+            
             var curPt = curLine.p2;
-            //if (false && lines[data.line].p2) curPt = lines[data.line].p2;
-            //else curPt = {x:0,y:0,z:0};
+            
             console.log("p2 for toolhead move. curPt:", curPt);
             this.toolhead.position.x = curPt.x;
             this.toolhead.position.y = curPt.y;
-            //this.toolhead.position.z = curPt.z + 20;
             this.toolhead.position.z = curPt.z;
+            
             if (this.showShadow) {
                 this.toolhead.children[0].target.position.set(this.toolhead.position.x, this.toolhead.position.y, this.toolhead.position.z);
                 this.toolhead.children[1].target.position.set(this.toolhead.position.x, this.toolhead.position.y, this.toolhead.position.z);
             }
+            
             this.lookAtToolHead();
-            this.animAllowSleep();
+            
+            // TODO: animAllowSleep
+            //this.animAllowSleep();
             
             /* GOOD STUFF BUT IF DON'T WANT ANIM*/
             if (this.tweenHighlight) this.scene.remove(this.tweenHighlight);
             if (this.tween) this.tween.stop();
+            
             if (data.anim && data.anim == "anim") {
                 console.log("being asking to animate gotoline");
-                this.animNoSleep();
+                // TODO: fix
+                //this.animNoSleep();
+                this.tweenAnimate = true;
+                
                 this.tweenPaused = false;
                 this.tweenIsPlaying = true;
                 this.tweenIndex = data.line;
+                
                 this.playNextTween(true);
             }
+            
+            this.animate();
         },
         playNextTween: function (isGotoLine) {
 
             if (this.tweenPaused) return;
-            
-            //this.wakeAnimate();
 
             var that = this;
-            var lines = this.object.userData.lines;
+            
+            var lines = this.parsedLines;
+            
             if (this.tweenIndex + 1 > lines.length - 1) {
                 // done tweening
                 console.log("Done with tween");
@@ -1616,7 +1674,6 @@
 
             var lineMat = new THREE.LineBasicMaterial({
                 color: 0xff0000,
-                lineWidth: 1,
                 transparent: true,
                 opacity: 1,
             });
@@ -1624,8 +1681,8 @@
             // find next correct tween, i.e. ignore fake commands
             var isLooking = true;
             var indxStart = this.tweenIndex + 1;
-            //console.log("starting while loop");
-            while(isLooking) {
+            
+            while (isLooking) {
                 if (indxStart > lines.length - 1) {
                     console.log("we are out of lines to look at");
                     that.stopSampleRun();
@@ -1633,20 +1690,23 @@
                 }
                 if (lines[indxStart].args.isFake) {
                     // this is fake, skip it
-                    //console.log("found fake line at indx:", indxStart);
+                    console.log("found fake line at indx:", indxStart);
                 } else {
-                    // we found a good one. use it
-                    //console.log("found one at indx:", indxStart);
                     isLooking = false;
                     break;
                 }
+                
                 indxStart++;
             }
+            
             var ll;
-            if (lines[this.tweenIndex].p2) ll = lines[this.tweenIndex].p2;
-            else ll = {x:0,y:0,z:0};
-            console.log("start line:", lines[this.tweenIndex], "ll:", ll);
+            if (lines[this.tweenIndex].p2) {
+                ll = lines[this.tweenIndex].p2;
+            } else {
+                ll = {x:0, y:0, z:0};
+            }
             
+            console.log("start line:", lines[this.tweenIndex], "ll:", ll);
             this.tweenIndex = indxStart;
             var cl = lines[this.tweenIndex].p2;
             console.log("end line:", lines[this.tweenIndex], " el:", cl);
@@ -1656,25 +1716,27 @@
                 y: ll.y,
                 z: ll.z
             })
-                .to({
+            .to({
                 x: cl.x,
                 y: cl.y,
                 z: cl.z
             }, 1000 / that.tweenSpeed)
             .onStart(function () {
                 that.tween = curTween;
-                //console.log("onStart");
+                console.log("onStart");
                 // create a new line to show path
+                
                 var lineGeo = new THREE.Geometry();
                 lineGeo.vertices.push(new THREE.Vector3(ll.x, ll.y, ll.z), new THREE.Vector3(cl.x, cl.y, cl.z));
                 var line = new THREE.Line(lineGeo, lineMat);
                 line.type = THREE.Lines;
+                
                 that.tweenHighlight = line;
                 that.scene.add(line);
 
             })
             .onComplete(function () {
-                //console.log("onComplete");
+                console.log("onComplete");
                 that.scene.remove(that.tweenHighlight);
                 //setTimeout(function() {that.playNextTween();}, 0);
                 if (isGotoLine) {
@@ -1685,168 +1747,134 @@
                 }
             })
             .onUpdate(function () {
-                that.toolhead.position.x = this.x;
-                that.toolhead.position.y = this.y;
-                that.toolhead.position.z = this.z;
-                //that.zheighttest -= 0.1;
-                //that.toolhead.position.z = this.z + that.zheighttest;
-                //that.toolhead.position.z = this.z + 20;
-                // update where shadow casting light is looking
-                if (this.showShadow) {
-                    that.toolhead.children[0].target.position.set(this.x, this.y, that.toolhead.position.z);
-                    that.toolhead.children[1].target.position.set(this.x, this.y, that.toolhead.position.z);
+                console.log(this._object);
+                if (this._object) {
+                    that.toolhead.position.x = this._object.x;
+                    that.toolhead.position.y = this._object.y;
+                    that.toolhead.position.z = this._object.z;
+
+                    if (this.showShadow) {
+                        that.toolhead.children[0].target.position.set(this._object.x, this._object.y, that.toolhead.position.z);
+                        that.toolhead.children[1].target.position.set(this._object.x, this._object.y, that.toolhead.position.z);
+                    }
+                
+                    that.lookAtToolHead();
+                } else {
+                    //console.log('WTF', this);
                 }
-                //that.toolhead.children[0].target.matrixWorldNeedsUpdate = true;
-                //console.log("onUpdate2. toolhead:", that.toolhead);
-                that.lookAtToolHead();
             });
-            //lastTween.chain(curTween);
-            //lastTween = curTween;
+            
             this.tween = curTween;
-            //this.tweenIndex++;
             this.tween.start();
         },
-        zheighttest: 0, // test toolhead going up in z
+
         playSampleRun: function (evt) {
-            console.log("controls:", this.controls);
-            //this.wakeAnimate();
-            this.animNoSleep();
             $('.com-chilipeppr-widget-3d-menu-samplerun').prop('disabled', true);
             $('.com-chilipeppr-widget-3d-menu-samplerun').popover('hide');
             $('.com-chilipeppr-widget-3d-menu-samplerunstop').prop('disabled', false);
             $('.com-chilipeppr-widget-3d-menu-samplerunpause').prop('disabled', false);
 
+            this.tweenAnimate = true;
+            
             this.tweenPaused = false;
             this.tweenIsPlaying = true;
             this.tweenIndex = 0;
 
             var that = this;
             console.log("playSampleRun");
-            //console.log("playSampleRun click:", evt, that);
 
             // cleanup previous run
             TWEEN.removeAll();
 
             // we will tween all gcode locs in order
-            //var lines = this.object.userData.lines;
-            //var pstart = this.object.userData.lines[0];
             var tween = new TWEEN.Tween({
                 x: 0,
                 y: 0,
                 z: 0
             })
-                .to({
+            .to({
                 x: 0,
                 y: 0,
                 z: 0
             }, 20)
             .easing(TWEEN.Easing.Quadratic.InOut)
             .onComplete(function () {
-                //console.log("onComplete");
+                console.log('next tween');
                 that.playNextTween();
             })
             .onUpdate(function () {
-                that.toolhead.position.x = this.x;
-                that.toolhead.position.y = this.y;
-                //that.toolhead.position.z = this.z + 20;
-                that.toolhead.position.z = this.z;
-                // update where shadow casting light is looking
-                if (this.showShadow) {
-                    that.toolhead.children[0].target.position.set(this.x, this.y, that.toolhead.position.z);
-                    that.toolhead.children[1].target.position.set(this.x, this.y, that.toolhead.position.z);
-                }
+                if (this._object) {
+                    that.toolhead.position.x = this._object.x;
+                    that.toolhead.position.y = this._object.y;
+                    that.toolhead.position.z = this._object.z;
                 
-                //that.toolhead.children[0].target.position.set(this.x, this.y, this.z);
-                //that.toolhead.children[0].target.matrixWorldNeedsUpdate = true;
-                //console.log("onUpdate. toolhead:", that.toolhead);
+                    // update where shadow casting light is looking
+                    if (this.showShadow) {
+                        that.toolhead.children[0].target.position.set(this._object.x, this._object.y, that.toolhead.position.z);
+                        that.toolhead.children[1].target.position.set(this._object.x, this._object.y, that.toolhead.position.z);
+                    } 
+                }
             });
 
             this.tween = tween;
             this.tweenIndex = 0;
+            
             this.tween.start();
+            
+            this.animate();
+        },
+        
 
-            /*
-            //var mylines = this.object.userData.lines.slice
-            lastTween = tween;
-            var lineMat = new THREE.LineBasicMaterial({
-                        color: 0xFF0000,
-                        lineWidth: 1,
-                        blending: THREE.AdditiveBlending,
-                        transparent: true,
-                        opacity: 1,
-                    });
-            $.each(this.object.userData.lines.slice(1), function(val, item) {
-                //console.log(val,item); 
-                var ll = lines[val].p2;
-                var cl = item.p2;
-                //console.log(ll, cl);
-                //var lineHighlight;
-                var curTween = new TWEEN.Tween( { x: ll.x, y: ll.y, z: ll.z} )
-                .to( {x: cl.x, y: cl.y, z: cl.z}, 1000 / that.tweenSpeed)
-                //.easing( TWEEN.Easing.Quadratic.InOut )
-                .onStart( function() {
-                    that.tween = curTween;
-                    //console.log("onStart");
-                    // create a new line to show path
-                    var lineGeo = new THREE.Geometry();
-                    lineGeo.vertices.push(new THREE.Vector3(ll.x, ll.y, ll.z), new THREE.Vector3(cl.x, cl.y, cl.z));
-                    var line = new THREE.Line(lineGeo, lineMat);
-                    line.type = THREE.Lines;
-                    that.tweenHighlight = line;
-                    that.scene.add(line);
-                })
-                .onComplete( function() {
-                    //console.log("onComplete");
-                    that.scene.remove(that.tweenHighlight);
-                })
-                .onUpdate( function () {
-                    that.toolhead.position.x = this.x;
-                    that.toolhead.position.y = this.y;
-                    that.toolhead.position.z = this.z + 20;
-                    that.lookAtToolHead();
-                } );
-                lastTween.chain(curTween);
-                lastTween = curTween;
-            });
+        downloadFont: function() {
+            console.log('downloading font');
             
-            tween.start();
-            */
+            var that = this;
+            $.ajax({
+                url: 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.json',
+                async: false,
+                dataType: 'json',
+                success: function(response) {
+                    that.textFont = new THREE.Font(response);
+                    if (that.textFont) {
+                        console.log('font download success');
+                    }
+                }
+            });
         },
         makeText: function(vals) {
-            var shapes, geom, mat, mesh;
-            
-            console.log("Do we have the global ThreeHelvetiker font:", ThreeHelvetiker);
-            console.log("THREE.FontUtils:", THREE.FontUtils);
-            
-            if (!THREE.FontUtils) {
-                console.error("THREE.FontUtils not defined per bug in r73 of three.js. So not making text.");
+            if (!this.textFont) {
+                console.log('no font defined');
                 return;
             }
             
-            THREE.FontUtils.loadFace(ThreeHelvetiker);
-            shapes = THREE.FontUtils.generateShapes( vals.text, {
-                font: "helvetiker",
-                //weight: "normal",
-                size: vals.size ? vals.size : 10
-            } );
-            geom = new THREE.ShapeGeometry( shapes );
-            mat = new THREE.MeshBasicMaterial({
+            var shapes, geom, mat, mesh;
+            console.log('about to make text: ', vals.text);
+            
+            var textGeometry = new THREE.TextGeometry(vals.text, {
+                font: this.textFont,
+                size: vals.size ? vals.size : 10,
+                height: 0.1,
+                curveSegments: 12,
+            });
+            
+            textMaterial = new THREE.MeshBasicMaterial({
                 color: vals.color,
                 transparent: true,
                 opacity: vals.opacity ? vals.opacity : 0.5,
             });
-            mesh = new THREE.Mesh( geom, mat );
             
+            mesh = new THREE.Mesh(textGeometry, textMaterial);
+        
             mesh.position.x = vals.x;
             mesh.position.y = vals.y;
             mesh.position.z = vals.z;
+        
+            mesh.castShadow = false;
             
             return mesh;
-            
         },
-        decorate: null, // stores the decoration 3d objects
+
         decorateExtents: function() {
-            
             // remove grid if drawn previously
             if (this.decorate != null) {
                 console.log("there was a previous extent decoration. remove it. grid:", this.decorate);
@@ -1855,35 +1883,49 @@
                 console.log("no previous decorate extents.");
             }
             
+            if (!this.textFont) {
+                console.log('unable to render extents without a font');
+                return;
+            }
+            
+            if (!this.object) {
+                return;
+            }
+            
             // get its bounding box
-            console.log("about to do THREE.BoundingBoxHelper on this.object:", this.object);
-            var helper = new THREE.BoundingBoxHelper(this.object, 0xff0000);
-            helper.update();
+            console.log("about to do THREE.BoxHelper on this.object:", this.object);
+            var helper = new THREE.BoxHelper(this.object, 0xff0000);
+            
+            var box = new THREE.Box3();            
+            box.setFromObject(helper);
+            
+            //helper.update();
             this.bboxHelper = helper;
-            // If you want a visible bounding box
-            //this.scene.add(helper);
-            console.log("helper bbox:", helper);
             
-            var color = '#0d0d0d';
-            //var color = '#ff0000';
+            console.log("helper bbox:", box);
             
+            var color = '#0d0d0d';            
             var material = new THREE.LineDashedMaterial({ 
-                vertexColors: false, color: color,
-                dashSize: this.getUnitVal(1), gapSize: this.getUnitVal(1), linewidth: 1,
+                vertexColors: false, 
+                color: color,
+                dashSize: this.getUnitVal(1), gapSize: this.getUnitVal(1), linewidth: this.lineWidth,
                 transparent: true,
                 opacity: 0.3,
             });
 
             // Create X axis extents sprite
             var z = 0;
+            
             var offsetFromY = this.getUnitVal(-4); // this means we'll be below the object by this padding
+            
             var lenOfLine = this.getUnitVal(5);
-            var minx = helper.box.min.x;
-            var miny = helper.box.min.y;
-            var maxx = helper.box.max.x;
-            var maxy = helper.box.max.y;
-            var minz = helper.box.min.z;
-            var maxz = helper.box.max.z;
+            
+            var minx = box.min.x;
+            var miny = box.min.y;
+            var maxx = box.max.x;
+            var maxy = box.max.y;
+            var minz = box.min.z;
+            var maxz = box.max.z;
             
             var lineGeo = new THREE.Geometry();
             lineGeo.vertices.push(
@@ -1895,8 +1937,9 @@
                 new THREE.Vector3(maxx, miny+offsetFromY, z)
                 
             );
+            
             lineGeo.computeLineDistances();
-            var line = new THREE.Line(lineGeo, material, THREE.LinePieces);
+            var line = new THREE.LineSegments(lineGeo, material);
             line.type = THREE.Lines;
             
             // Draw text label of length
@@ -1924,8 +1967,9 @@
                 new THREE.Vector3(minx + offsetFromX - lenOfLine, maxy, z),
                 new THREE.Vector3(minx + offsetFromX, maxy, z)
             );
+            
             lineGeo2.computeLineDistances();
-            var line2 = new THREE.Line(lineGeo2, material, THREE.LinePieces);
+            var line2 = new THREE.LineSegments(lineGeo2, material);
             line2.type = THREE.Lines;
             
             // Draw text label of length
@@ -1950,18 +1994,10 @@
                 new THREE.Vector3(maxx + lenOfLine, miny, maxz),
                 new THREE.Vector3(maxx + lenOfLine, miny, maxz),
                 new THREE.Vector3(maxx, miny, maxz) 
-
-                /*
-                new THREE.Vector3(maxx + offsetFromX, miny+offsetFromY-lenOfLine, z),
-                new THREE.Vector3(minx, miny+offsetFromY-lenOfLine, z),
-                new THREE.Vector3(maxx, miny+offsetFromY-lenOfLine, z),
-                new THREE.Vector3(maxx, miny+offsetFromY-lenOfLine, z),
-                new THREE.Vector3(maxx, miny+offsetFromY, z)
-                */
-                
             );
+            
             zlineGeo.computeLineDistances();
-            var zline = new THREE.Line(zlineGeo, material, THREE.LinePieces);
+            var zline = new THREE.LineSegments(zlineGeo, material);
             zline.type = THREE.Lines;
             
             // Draw text label of z height
@@ -1991,36 +2027,34 @@
             this.decorate.add(txtZ);
             
             // Add estimated time and distance
-            var ud = this.object.userData.lines;
-            var udLastLine = ud[ud.length-1].p2;
-            //console.log("lastLine:", udLastLine, "userData:", ud, "this.object:", this.object);
-            // use last array value of userData cuz it keeps a running total of time
-            // and distance
+            var ud = this.parsedLines;
+            var udLastLine = ud[ud.length - 1].p2;
             
             // get pretty print of time
             var ret = this.convertMinsToPrettyDuration(udLastLine.timeMinsSum);
             
+            if (udLastLine.distSum) {
+                var txt = "Estimated Time: " + ret + "," + " Total Distance: " + (udLastLine.distSum).toFixed(2);
+                txt = (this.isUnitsMm) ? txt + " mm" : txt + " in";
+                
+                var txtTimeDist = this.makeText({
+                    x: minx + this.getUnitVal(1),
+                    y: miny + offsetFromY - lenOfLine - this.getUnitVal(6),
+                    z: z,
+                    text: txt,
+                    color: color,
+                    opacity: 0.3,
+                    size: this.getUnitVal(2)
+                });
             
-            var txt = "Estimated Time: " + ret + ","
-            + " Total Distance: " + (udLastLine.distSum).toFixed(2);
-            txt = (this.isUnitsMm) ? txt + " mm" : txt + " in";
-            //console.log("txt:", txt);
-            //console.log("blah", blah);
-            var txtTimeDist = this.makeText({
-                x: minx + this.getUnitVal(1),
-                y: miny + offsetFromY - lenOfLine - this.getUnitVal(6),
-                z: z,
-                text: txt,
-                color: color,
-                opacity: 0.3,
-                size: this.getUnitVal(2)
-            });
-            this.decorate.add(txtTimeDist);
+                this.decorate.add(txtTimeDist);
+            }
             
             this.sceneAdd(this.decorate);
             console.log("just added decoration:", this.decorate);
 
         },
+        
         convertMinsToPrettyDuration: function(mins) {
             // Minutes and seconds
             var time = mins * 60;
@@ -2042,6 +2076,8 @@
             ret += "" + secs.toFixed(0) + "s";
             return ret;
         },
+        
+        // TODO: review makeSprite code
         makeSprite: function (scene, rendererType, vals) {
             var canvas = document.createElement('canvas'),
                 context = canvas.getContext('2d'),
@@ -2049,6 +2085,7 @@
                 textHeight = 100,
                 textWidth = 0,
                 actualFontSize = this.getUnitVal(10);
+                
             var txt = vals.text;
             if (vals.size) actualFontSize = vals.size;
 
@@ -2061,7 +2098,6 @@
             context.font = "normal " + textHeight + "px Arial";
             context.textAlign = "center";
             context.textBaseline = "middle";
-            //context.fillStyle = "#ff0000";
             context.fillStyle = vals.color;
 
             context.fillText(txt, textWidth / 2, textHeight / 2);
@@ -2071,11 +2107,13 @@
 
             var material = new THREE.SpriteMaterial({
                 map: texture,
-                useScreenCoordinates: false,
                 transparent: true,
-                opacity: 0.6
+                opacity: 0.5
             });
+            
             material.transparent = true;
+            
+            
             //var textObject = new THREE.Sprite(material);
             var textObject = new THREE.Object3D();
             textObject.position.x = vals.x;
@@ -2092,11 +2130,9 @@
 
             textObject.add(sprite);
 
-            //scene.add(textObject);
             return textObject;
         },
-        element: null,
-        isUnitsMm: true, // true for mm, false for inches
+
         getInchesFromMm: function(mm) {
             return mm * 0.0393701;
         },
@@ -2106,9 +2142,8 @@
             // if drawing is in inches convert
             return this.getInchesFromMm(val);
         },
+        
         drawAxesToolAndExtents: function() {
-            
-            //return;
             // these are drawn after the gcode is rendered now
             // so we can see if in inch or mm mode
             // these items scale based on that mode
@@ -2117,9 +2152,8 @@
             this.drawExtentsLabels();
             this.drawAxes();
         },
-        shadowplane: null,
+
         drawToolhead: function() {
-            
             console.group("drawToolhead");
             
             // remove grid if drawn previously
@@ -2135,132 +2169,73 @@
                 console.log("no previous toolhead or shadowplane.");
             }
             
+            var scale = this.getUnitVal(1);
+            
             // TOOLHEAD WITH SHADOW
             var toolheadgrp = new THREE.Object3D();
-            
-            // SHADOWS
-            if (this.showShadow) {
-                var light = new THREE.DirectionalLight(0xffffff);
-                //var light = new THREE.SpotLight(0xffffff);
-                light.position.set(0, 60, 60);
-                //light.rotation.x = 90 * Math.PI / 180;
-                //light.lookat(
-                //light.target.position.set(0, 0, 0);
-                light.castShadow = true;
-                light.onlyShadow = true;
-                light.shadowDarkness = 0.05;
-                //light.shadowCameraVisible = true; // only for debugging
-                // these six values define the boundaries of the yellow box seen above
-                light.shadowCameraNear = 0;
-                light.shadowCameraFar = this.getUnitVal(1000);
-                light.shadowCameraLeft = this.getUnitVal(-5);
-                light.shadowCameraRight = this.getUnitVal(5);
-                light.shadowCameraTop = 0;
-                light.shadowCameraBottom = this.getUnitVal(-35);
-                //scene.add(light);
-                toolheadgrp.add(light);
-                
-                var light2 = light.clone();
-                light2.position.set(60, 0, 60);
-                light2.shadowCameraLeft = 0; //-5;
-                light2.shadowCameraRight = this.getUnitVal(-35); //5;
-                light2.shadowCameraTop = this.getUnitVal(-5); //0;
-                light2.shadowCameraBottom = this.getUnitVal(5); //-35;
-                light2.shadowDarkness = 0.03;
-                //light2.rotation.z = 90 * Math.PI / 180;
-                toolheadgrp.add(light2);
-            }
-            
+            toolheadgrp.scale.set(scale, scale, scale);
+
             // ToolHead Cylinder
             // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
             var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(0, 5, 40, 15, 1, false), new THREE.MeshNormalMaterial());
             cylinder.overdraw = true;
             cylinder.rotation.x = -90 * Math.PI / 180;
             cylinder.position.z = 20;
-            //cylinder.position.z = 40;
             cylinder.material.opacity = 0.3;
             cylinder.material.transparent = true;
             cylinder.castShadow = true;
-            //cylinder.receiveShadow = true;
-            console.log("toolhead cone:", cylinder);
-            //scene.add(cylinder);
             
-            //light.shadowCamera.lookAt(cylinder);
+            console.log("toolhead cone:", cylinder);
             toolheadgrp.add(cylinder);
             
             if (this.showShadow) {
-                // mesh plane to receive shadows
-                var planeFragmentShader = [
-                    
-                    "uniform vec3 diffuse;",
-                    "uniform float opacity;",
-                    
-                    //THREE.ShaderChunk[ "color_pars_fragment" ],
-                    //THREE.ShaderChunk[ "map_pars_fragment" ],
-                    //THREE.ShaderChunk[ "lightmap_pars_fragment" ],
-                    //THREE.ShaderChunk[ "envmap_pars_fragment" ],
-                    //THREE.ShaderChunk[ "fog_pars_fragment" ],
-                    THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
-                    //THREE.ShaderChunk[ "specularmap_pars_fragment" ],
-                    
-                    "void main() {",
-                    
-                    "gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );",
-                    
-                    //THREE.ShaderChunk[ "map_fragment" ],
-                    //THREE.ShaderChunk[ "alphatest_fragment" ],
-                    //THREE.ShaderChunk[ "specularmap_fragment" ],
-                    //THREE.ShaderChunk[ "lightmap_fragment" ],
-                    //THREE.ShaderChunk[ "color_fragment" ],
-                    //THREE.ShaderChunk[ "envmap_fragment" ],
-                    THREE.ShaderChunk[ "shadowmap_fragment" ],
-                    //THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
-                    //THREE.ShaderChunk[ "fog_fragment" ],
-                    
-                    "gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 - shadowColor.x );",
-                    
-                    "}"
-                    
-                ].join("\n");
+                var light = new THREE.DirectionalLight(0xffffff);
+                light.position.set(0, 100, 100);
                 
-                var planeMaterial = new THREE.ShaderMaterial({
-                    uniforms: THREE.ShaderLib['basic'].uniforms,
-                    vertexShader: THREE.ShaderLib['basic'].vertexShader,
-                    fragmentShader: planeFragmentShader,
-                    color: 0x0000FF, transparent: true
-                });
+                light.shadow.camera.near = 0;
+                light.shadow.camera.far = this.getUnitVal(1000);
+                light.shadow.camera.left = this.getUnitVal(-100);
+                light.shadow.camera.right = this.getUnitVal(100);
+                light.shadow.camera.top = this.getUnitVal(100);
+                light.shadow.camera.bottom = this.getUnitVal(-100);
+                
+                light.castShadow = true;
+                
+                light.shadow.mapSize.width = 2048;
+                light.shadow.mapSize.height = 2048;
+                
+                toolheadgrp.add(light);
+                
+                
+                // shadow plane
+                var planeGeometry = new THREE.PlaneGeometry(10000, 10000);
+                
+                var planeMaterial = new THREE.ShadowMaterial();
+                planeMaterial.opacity = 0.1;
+                planeMaterial.transparent = true;
+                planeMaterial.depthWrite = false;
+                planeMaterial.depthTest = false;
+                
+                var plane = new THREE.Mesh(planeGeometry, planeMaterial);
+                plane.scale.set(scale, scale, scale);
                 
-                var planeW = 50; // pixels
-                var planeH = 50; // pixels 
-                var numW = 50; // how many wide (50*50 = 2500 pixels wide)
-                var numH = 50; // how many tall (50*50 = 2500 pixels tall)
-                var plane = new THREE.Mesh( new THREE.PlaneGeometry( planeW*50, planeH*50, planeW, planeH ), new   THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: false, transparent: true, opacity: 0.5 } ) );
-                var plane = new THREE.Mesh( new THREE.PlaneGeometry( planeW*50, planeH*50, planeW, planeH ), planeMaterial );
-                //plane.castShadow = false;
                 plane.position.z = 0;
+                
+                plane.castShadow = false;
                 plane.receiveShadow = true;
                 
-                console.log("toolhead plane:", plane);
-                //scene.add(plane);
-                //toolheadgrp.add(plane);
+                this.shadowplane = plane;
+                this.sceneAdd(this.shadowplane);
             }
             
-            // scale the whole thing to correctly match mm vs inches
-            var scale = this.getUnitVal(1);
-            if (this.showShadow) plane.scale.set(scale, scale, scale);
-            toolheadgrp.scale.set(scale, scale, scale);
             
             this.toolhead = toolheadgrp;
-            if (this.showShadow) {
-                this.shadowplane = plane;
-                this.sceneAdd(this.shadowplane);
-            }
             this.sceneAdd(this.toolhead);
             
             console.groupEnd();
             
         },
-        grid: null, // stores grid
+
         gridTurnOff: function() {
             if (this.grid != null) {
                 console.log("there was a previous grid. remove it. grid:", this.grid);
@@ -2278,7 +2253,6 @@
             }
         },
         drawGrid: function() {
-            
             // remove grid if drawn previously
             if (this.grid != null) {
                 console.log("there was a previous grid. remove it. grid:", this.grid);
@@ -2290,6 +2264,7 @@
             // will get mm or inches for grid
             var widthHeightOfGrid; //= this.getUnitVal(200);
             var subSectionsOfGrid; //= this.getUnitVal(10);
+            
             if (this.isUnitsMm) {
                 widthHeightOfGrid = 200; // 200 mm grid should be reasonable
                 subSectionsOfGrid = 10; // 10mm (1 cm) is good for mm work
@@ -2312,18 +2287,16 @@
             helper.material.opacity = 0.15;
             helper.material.transparent = true;
             helper.receiveShadow = false;
+            
             console.log("helper grid:", helper);
             this.grid = helper;
             this.sceneAdd(this.grid);
-            //this.scene.add(helper);
-
         },
         drawExtentsLabels: function() {
             this.decorateExtents();
         },
-        axes: null, // global property to store axes that we drew
+
         drawAxes: function() {
-            
             // remove axes if they were drawn previously
             if (this.axes != null) {
                 console.log("there was a previous axes. remove it. axes:", this.axes);
@@ -2335,12 +2308,11 @@
             // axes
             var axesgrp = new THREE.Object3D();
             
-            axes = new THREE.AxisHelper(this.getUnitVal(100));
+            axes = new THREE.AxisHelper(this.getUnitVal(105));
             axes.material.transparent = true;
-            axes.material.opacity = 0.8;
+            axes.material.opacity = 0.35;
             axes.material.depthWrite = false;
             axes.position.set(0,0,-0.0001);
-            //this.scene.add(axes);
             axesgrp.add(axes);
 
             // add axes labels
@@ -2351,6 +2323,7 @@
                 text: "X",
                 color: "#ff0000"
             });
+            
             var ylbl = this.makeSprite(this.scene, "webgl", {
                 x: 0,
                 y: this.getUnitVal(110),
@@ -2358,6 +2331,7 @@
                 text: "Y",
                 color: "#00ff00"
             });
+            
             var zlbl = this.makeSprite(this.scene, "webgl", {
                 x: 0,
                 y: 0,
@@ -2369,15 +2343,13 @@
             axesgrp.add(xlbl);
             axesgrp.add(ylbl);
             axesgrp.add(zlbl);
+            
             this.axes = axesgrp;
             this.sceneAdd(this.axes);
-
         },
-        colorBackground: 0xeeeeee, // this is the background color of the 3d viewer
-        createScene: function (element) {
 
+        createScene: function (element) {
             console.log("inside createScene: element:", element);
-            if (!Detector.webgl) Detector.addGetWebGLMessage();
 
             // store element on this object
             this.element = element;
@@ -2398,15 +2370,6 @@
             ].forEach(function (position) {
                 var light = new THREE.DirectionalLight(position[3]);
                 light.position.set(position[0], position[1], position[2]).normalize();
-                /*if (ctr == 0) {
-                    light.castShadow = true;
-                    light.shadowDarkness = 0.95;
-                    light.shadowCameraRight     =  5;
-                    light.shadowCameraLeft     = -5;
-                    light.shadowCameraTop      =  5;
-                    light.shadowCameraBottom   = -5;
-                    light.shadowCameraVisible = true;
-                }*/
                 scene.add(light);
                 ctr++;
             });
@@ -2414,504 +2377,175 @@
             // Camera...
             // If you make the near and far too much you get
             // a fail on the intersectObjects()
-            var fov = 70,
-                aspect = element.width() / element.height(),
-                near = 0.01, //01, // 1e-6, //
-                far = 10000,
-                camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-            this.camera = camera;
+            var fov = 65;
+            var aspect = element.width() / element.height();
+            var near = 1; //01, // 1e-6, //
+            var far = 1000;
+            var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+            
             camera.rotationAutoUpdate = true;
             camera.position.x = 10;
             camera.position.y = -100;
             camera.position.z = 200;
+            this.camera = camera;
+            
             scene.add(camera);
 
             // Controls
-            //var mouseEvtContainer = $('#com-chilipeppr-widget-3dviewer-renderArea');
-            //console.log(mouseEvtContainer);
-            //controls = new THREE.TrackballControls(camera, mouseEvtContainer[0]);
-            controls = new THREE.TrackballControls(camera, element[0]);
-            this.controls = controls; // set property for later use
-            //controls = new THREE.OrbitControls(camera);
+            controls = new THREE.TrackballControls(camera, element[0]);            
             controls.noPan = false;
             controls.dynamicDampingFactor = 0.99; //0.15;
             controls.rotateSpeed = 2.0;
-            //controls.staticMoving = true;
-            //controls.target.x = 50;
-            //controls.target.y = 100;
-            //controls.autoRotate = true;
-            console.log("controls:", controls);
-            //controls.target.z = 100;
-            //controls.addEventListener( 'change', render );
+            
+            this.controls = controls; // set property for later use
+            
+            console.log("controls:", controls);
+            
+            
             document.addEventListener( 'mousemove', controls.update.bind( controls ), false );
             document.addEventListener( 'touchmove', controls.update.bind( controls ), false );
-
+            
             // Renderer
+            // TODO: review renderer setup, see if we can open up any other options or optimizations
             var renderer;
-            /*
-            var renderer = new THREE.WebGLRenderer({
-                clearColor: 0x000000,
-                clearAlpha: 1
-            });
-            */
-            // var renderer = new THREE.WebGLRenderer({
-            //     antialias: true,
-            //     preserveDrawingBuffer: false,
-            //     alpha: false,
-            //     logarithmicDepthBuffer: false
-            // });
-            
             var webgl = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )();
 
-            if (webgl) {
-                console.log('WebGL Support found!  Success: CP will work optimally on this device!');
-    
-                renderer = new THREE.WebGLRenderer({
-                    antialias: true,
-                    preserveDrawingBuffer: false,
-                    alpha: false,
-                    logarithmicDepthBuffer: false
-                });
-            } else {
+            if (!webgl) {
                 console.error('No WebGL Support found! CRITICAL ERROR!');
+                
                 chilipeppr.publish("/com-chilipeppr-elem-flashmsg/flashmsg", "No WebGL Found!", "This device/browser does not support WebGL or WebGL has crashed. Chilipeppr needs WebGL to render the 3D View.", 10 * 1000);
+               
                 $('#' + this.id + ' .youhavenowebgl').removeClass("hidden");
                 return;
-            };
+            }
+            
+            console.log('WebGL Support found!  Success: CP will work optimally on this device!');
 
+            renderer = new THREE.WebGLRenderer({
+                antialias: !this.disableAA,
+                preserveDrawingBuffer: false,
+                alpha: true,
+                logarithmicDepthBuffer: false
+            });
             
-            this.renderer = renderer;
-            //renderer.setClearColor( scene.fog.color, 1 );
-            //renderer.setClearColor(0xeeeeee, 1);
+            // base properties
             renderer.setClearColor(this.colorBackground, 1);
             renderer.setSize(element.width(), element.height());
             renderer.setPixelRatio( window.devicePixelRatio );
-            element.append(renderer.domElement);
-            //renderer.autoClear = true;
-            //renderer.clear();
             
             // cast shadows
-            renderer.shadowMapEnabled = true;
-            // to antialias the shadow
-            renderer.shadowMapSoft = true;
-            /*
-            renderer.shadowCameraNear = 3;
-            renderer.shadowCameraFar = camera.far;
-            renderer.shadowCameraFov = 50;
-            */
-            /*
-            renderer.shadowMapBias = 0.0039;
-            renderer.shadowMapDarkness = 1.0;
-            renderer.shadowMapWidth = 1024;
-            renderer.shadowMapHeight = 1024;
-            */
-
-            // Arrow Helper
-            /*
-            var dir = new THREE.Vector3( 1, 0, 0 );
-            var origin = new THREE.Vector3( 0, 0, 0 );
-            var length = 100;
-            var hex = 0xffff00;
+            renderer.shadowMap.enabled = this.showShadow;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             
-            var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
-            scene.add( arrowHelper );
-            */
+            this.renderer = renderer;
+            element.append(renderer.domElement);
 
-            //scene.add( new THREE.PointLightHelper( light, 5 ) );
-            // Show grid
 
-            /* MOVED TO METHOD
-            var helper = new THREE.GridHelper(200, 10);
-            helper.setColors(0x0000ff, 0x808080);
-            helper.position.y = 0;
-            helper.position.x = 0;
-            helper.position.z = 0;
-            helper.rotation.x = 90 * Math.PI / 180;
-            helper.material.opacity = 0.2;
-            helper.material.transparent = true;
-            helper.receiveShadow = true;
-            console.log("helper:", helper);
-            scene.add(helper);
-            */
-            //this.drawGrid();
+            // Action!
+            var mouseEvtContainer = $('#com-chilipeppr-widget-3dviewer-renderArea');
+            console.log(mouseEvtContainer);
             
-            /* MOVED TO METHOD
-            // TOOLHEAD WITH SHADOW
-            var toolheadgrp = new THREE.Object3D();
+            // TODO: wakeAnimate change
+            /*
             
-            // SHADOWS
-            var light = new THREE.DirectionalLight(0xffffff);
-            //var light = new THREE.SpotLight(0xffffff);
-            light.position.set(0, 60, 60);
-            //light.rotation.x = 90 * Math.PI / 180;
-            //light.lookat(
-            //light.target.position.set(0, 0, 0);
-            light.castShadow = true;
-            light.onlyShadow = true;
-            light.shadowDarkness = 0.05;
-            //light.shadowCameraVisible = true; // only for debugging
-            // these six values define the boundaries of the yellow box seen above
-            light.shadowCameraNear = 0;
-            light.shadowCameraFar = 1000;
-            light.shadowCameraLeft = -5;
-            light.shadowCameraRight = 5;
-            light.shadowCameraTop = 0;
-            light.shadowCameraBottom = -35;
-            //scene.add(light);
-            toolheadgrp.add(light);
-            
-            var light2 = light.clone();
-            light2.position.set(60, 0, 60);
-            light2.shadowCameraLeft = 0; //-5;
-            light2.shadowCameraRight = -35; //5;
-            light2.shadowCameraTop = -5; //0;
-            light2.shadowCameraBottom = 5; //-35;
-            light2.shadowDarkness = 0.03;
-            //light2.rotation.z = 90 * Math.PI / 180;
-            toolheadgrp.add(light2);
-
-            // ToolHead Cylinder
-            // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
-            var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(0, 5, 40, 15, 1, false), new THREE.MeshNormalMaterial());
-            cylinder.overdraw = true;
-            cylinder.rotation.x = -90 * Math.PI / 180;
-            cylinder.position.z = 20;
-            //cylinder.position.z = 40;
-            cylinder.material.opacity = 0.5;
-            cylinder.material.transparent = true;
-            cylinder.castShadow = true;
-            //cylinder.receiveShadow = true;
-            console.log("toolhead cone:", cylinder);
-            //scene.add(cylinder);
             
-            //light.shadowCamera.lookAt(cylinder);
-
-            toolheadgrp.add(cylinder);
+            console.log("this wantAnimate:", this);
             
-            this.toolhead = toolheadgrp;
-            scene.add(toolheadgrp);
+            this.wakeAnimate();
             */
-            //this.drawToolhead();
             
-
-            /*
-            // sparks
-            var particleGroup = new SPE.Group({
-                texture: '', 
-                maxAge: 1,
-                colorize: 1,
-                transparent: 1,
-                alphaTest: 0.5,
-                depthWrite: false,
-                depthTest: true,
-                blending: THREE.NormalBlending
-            });
-
-            var emitter = new SPE.Emitter({
-                position: new THREE.Vector3(0, 0, 0),
-                positionSpread: new THREE.Vector3( 0, 0, 1 ),
-
-                acceleration: new THREE.Vector3(0, -1, 0),
-                accelerationSpread: new THREE.Vector3( 1, 0, 1 ),
-
-                velocity: new THREE.Vector3(0, 0, 1),
-                velocitySpread: new THREE.Vector3(1, 1, 1),
-
-                colorStart: new THREE.Color('red'),
-                colorEnd: new THREE.Color('blue'),
-                opacityStart: 0,
-                opacityStartSpread: 0,
-                opacityMiddle: 0.5,
-                opacityMiddleSpread: 0,
-                opacityEnd: 1,
-                opacityEndSpread: 1,
-                
-                sizeStart: 0.01,
-                sizeEnd: 0.5,
-
-                particleCount: 5
-            });
-
-            particleGroup.addEmitter( emitter );
-            var clock = new THREE.Clock();
-            scene.add( particleGroup.mesh );
-            */
-
-            /* MOVED TO METHOD
-            // axes
-            axes = new THREE.AxisHelper(100);
-            scene.add(axes);
-
-            // add axes labels
-            this.makeSprite(scene, "webgl", {
-                x: 110,
-                y: 0,
-                z: 0,
-                text: "X",
-                color: "#ff0000"
-            });
-            this.makeSprite(scene, "webgl", {
-                x: 0,
-                y: 110,
-                z: 0,
-                text: "Y",
-                color: "#00ff00"
+            var that = this;
+            
+            
+            controls.addEventListener('start', function() {
+                that.moveAnimate = true;
+                that.animate();
             });
-            this.makeSprite(scene, "webgl", {
-                x: 0,
-                y: 0,
-                z: 110,
-                text: "Z",
-                color: "#0000ff"
+            
+            controls.addEventListener('end', function() {
+                that.animate();
+                that.moveAnimate = false;
             });
-            */
-            //this.drawAxes();
-
-            // Action!
-            //controls.addEventListener( 'change', test );
-            //element.on('change', test);
-            var mouseEvtContainer = $('#com-chilipeppr-widget-3dviewer-renderArea');
-            console.log(mouseEvtContainer);
-            //mouseEvtContainer.on('mousemove mousedown mousewheel hover click dblclick scroll touchstart touchmove touchenter focus resize', this.wakeAnimate.bind(this));
-            //controls.addEventListener( 'change', this.wakeAnimate.bind(this));
-            controls.addEventListener( 'start', this.animNoSleep.bind(this));
-            controls.addEventListener( 'end', this.animAllowSleep.bind(this));
-            //mouseEvtContainer.on('', wakeAnimate);
-            /*
-            function test(evt) {
-                console.log("got event listener", evt);
-            }
-            function slowDown() {
-                requestAnimationFrame(animate); // And repeat...
-            }
-            */
-            console.log("this wantAnimate:", this);
-            this.wantAnimate = true;
-            //this.camera = camera; 
-            //var that = this;
-            /*
-            function animate() {
-                TWEEN.update();
-                //setTimeout(slowDown, 100);
-                if (that.wantAnimate) requestAnimationFrame(animate); // And repeat...
-                controls.update();
-                // Use a fixed time-step here to avoid gaps
-                //render( clock.getDelta() );
-                //render();
-                renderer.render(scene, camera);
-            }
-            */
             
-            //setTimeout(this.sleepAnimate, 5000);
-
-            /*
-            function render2(dt) {
-                //controls.update();
-                //particleGroup.tick( dt );
-                renderer.render(scene, camera);
-                //console.log(camera);
-                //TWEEN.update();
-                requestAnimationFrame(render); // And repeat...
-                //stats.update();
-            }
-            */
-            //render( clock.getDelta() );
-            //setTimeout(animate, 0);
-            //render();
-            //animate();
-            //this.animate();
-            this.wakeAnimate();
-
+            // our very first animate call
+            this.animate();
+            
             // Fix coordinates up if window is resized.
-            var that = this;
             $(window).on('resize', function () {
-                //console.log("got resize event. resetting aspect ratio.");
-                renderer.setSize(element.width(), element.height());
-                camera.aspect = element.width() / element.height();
-                camera.updateProjectionMatrix();
-                controls.screen.width = window.innerWidth;
-                controls.screen.height = window.innerHeight;
-                that.wakeAnimate();
-                //render();
+                // TODO: explore a way to correctly callback, rather than duplicate code.
+                that.renderer.setSize(element.width(), element.height());
+            
+                that.camera.aspect = element.width() / element.height();
+                that.camera.updateProjectionMatrix();
+            
+                that.controls.screen.width = that.domElement.width();
+                that.controls.screen.height = that.domElement.height();
+                
+                // TODO: wakeAnimate change
+                that.animate();
             });
 
             return scene;
         },
         resize: function() {
-            //console.log("got resize event. resetting aspect ratio.");
             this.renderer.setSize(this.element.width(), this.element.height());
+            
             this.camera.aspect = this.element.width() / this.element.height();
             this.camera.updateProjectionMatrix();
-            this.controls.screen.width = window.innerWidth;
-            this.controls.screen.height = window.innerHeight;
-            this.wakeAnimate();
-        },
-        mytimeout: null,
-        renderFrameCtr: 0, // keep track of fps
-        fpsCounterInterval: null,
-        fpsEl: null,
-        fpsCounterStart: function() {
-            
-            if (this.fpsEl == null) {
-                // pull dom el and cache so the dom updates are efficient
-                this.fpsEl = $('#com-chilipeppr-widget-3dviewer .frames-per-sec');
-            }
-
-            // if 3d viewer disabled, exit
-            if (this.animEnable == false) {
-                this.fpsEl.html('<span class="alert-danger" style="font-size:12px;">Manually Disabled. Go to cog wheel icon to choose a frame rate to re-enable.</span>');
-                return;
-            }
             
-            // update fps each second
-            if (this.fpsCounterInterval == null) {
-                // start fps counting
-                this.renderFrameCtr = 0;
-                console.log("starting fps counting");
-                this.fpsCounterInterval = setInterval(this.fpsCounterOnInterval.bind(this), 1000);
-            }
-        },
-        fpsCounterOnInterval: function() {
-            this.fpsEl.html(this.renderFrameCtr + "&nbsp;fps");
-            this.renderFrameCtr = 0;
-        },
-        fpsCounterEnd: function() {
-            console.log("stopping fps counting");
-            clearInterval(this.fpsCounterInterval);
-            this.fpsCounterInterval = null;
-            console.log("checking if anim is disabled. this.animEnable:", this.animEnable);
-            if (this.animEnable == false) {
-                this.fpsEl.html('<div class="alert-danger" style="font-size:12px;line-height: 12px;padding: 6px;">Manually Disabled. Go to cog wheel icon to choose a frame rate to re-enable.</div>');
-            } else {
-                // set fps to just a dash
-                this.fpsEl.html("-&nbsp;fps");
-            }
-        },
-        setFrameRate: function(rate) {
+            this.controls.screen.width = this.domElement.width();
+            this.controls.screen.height = this.domElement.height();
             
-            localStorage.setItem ('fpsRate', rate);
-            console.log ("Set fpsRate in storage:  ", rate);
-            
-            // see if disabled
-            if (rate == 0) {
-                this.animateDisabled();
-            } else {
-                this.animateEnabled();
-            }
-            
-            // rate is frames per second
-            if (rate == 5) this.frameRateDelayMs = 200;
-            if (rate == 10) this.frameRateDelayMs = 100;
-            if (rate == 15) this.frameRateDelayMs = 70;
-            if (rate == 30) this.frameRateDelayMs = 32;
-            if (rate == 60) this.frameRateDelayMs = 0;
+            // TODO: wakeAnimate change
+            this.animate();
         },
-        animEnable: true, // boolean tracking whether we allow animation
-        animateDisabled: function() {
-            console.log("disabling animation");
-            this.animEnable = false;
-            this.fpsEl.html('<span class="alert-danger">Disabled</span>');
-        },
-        animateEnabled: function() {
-            console.log("enabling animation");
-            this.animEnable = true;
+        
+        wakeAnimate: function() {
+            // Backwards compat
+            this.animate();
         },
-        // reduce rate by 2, 3, 4, etc. 60fps becomes 30fps
-        //frameRateSkipEvery: [false, true, true, true, true], 
-        //frameRateSkipEvery: [false], 
-        //frameRateCtr: 0, // counts to skip animate
         
-        // 200 = 5fps, 100 = 10fps, 70=15fps, 50=20fps, 40=25fps, 30=30fps
-        frameRateDelayMs: 32, 
         animate: function() {
+            var that = this;
             
-            // if 3d viewer disabled, exit
-            if (this.animEnable == false) {
-                console.log("animate(). this.animEnable false, so exiting.");
-                return;
-            }
+            // TODO: Implement dynamic scaling for animationLatencyDelay based on assessed load 
             
-            // see if we should exit to reduce frame count
-            /*
-            if (this.frameRateSkipEvery[this.frameRateCtr]) {
-                if (this.frameRateCtr == this.frameRateSkipEvery.length - 1)
-                    this.frameRateCtr = 0;
-                else
-                    this.frameRateCtr++;
-                requestAnimationFrame(this.animate.bind(this));
-                return;
+            if (this.fpsCalculationTimer == null) {
+                // calculate the actual fps every 2 seconds
+                this.fpsCalculationTimer = setInterval(function() {
+                    var fps = (that.renderFrameCount / 2);
+                    that.renderFrameCount = 0;
+                    $('.frames-per-sec').html(fps + "&nbsp;fps");
+                    
+                    // scale our animation delay based on actual fps achieved
+                    if (fps > 30) {
+                        this.animationLatencyDelay = this.animationLatencyDelayDefault;
+                    } else if (fps > 20) {
+                        this.animationLatencyDelay = 70;
+                    } else if (fps > 10) {
+                        this.animationLatencyDelay = 150;
+                    } else {
+                        this.animationLatencyDelay = 300;
+                    }
+                }, 2000);
             }
-            this.frameRateCtr++;
-            if (this.frameRateCtr > 200) this.frameRateCtr = 0; // prevent overruns
-            */
             
-            TWEEN.update();
-            if (this.wantAnimate) {
+            if ((this.moveAnimate || this.gotoAnimate || this.tweenAnimate || this.inspectAnimate) && this.animationLatencyTimer == null) {
+                var animationDelay = (!this.moveAnimate && this.disableAnimation) ? 2000 : this.animationLatencyDelay;
                 
-                // see if we're adding delay to slow frame rate
-                if (this.frameRateDelayMs > 0) {
-                    var that = this;
-                    setTimeout(function() {
-                        requestAnimationFrame(that.animate.bind(that));
-                    }, this.frameRateDelayMs);
-                } else {
-                    requestAnimationFrame(this.animate.bind(this));
-                }
+                this.animationLatencyTimer = setTimeout(function() {
+                    TWEEN.update();
+                    requestAnimationFrame(that.animate.bind(that));
+                    that.animationLatencyTimer = null;
+                }, animationDelay);
             }
+        
             this.controls.update();
             this.renderer.render(this.scene, this.camera);
-            this.renderFrameCtr++;
-        },
-        wakeAnimate: function(evt) {
-            
-            // if 3d viewer disabled, exit
-            if (this.animEnable == false) {
-                return;
-            }
-            
-            //console.log("wakeAnimate:", evt);
-            this.wantAnimate = true;
-            this.fpsCounterStart();
-            //controls.update();
-            //clearTimeout(this.mytimeout);
-            if (!this.mytimeout) {
-                this.mytimeout = setTimeout(this.sleepAnimate.bind(this), 10000);
-                //console.log("wakeAnimate");
-                requestAnimationFrame(this.animate.bind(this));
-            }
-        },
-        sleepAnimate: function() {
-            this.mytimeout = null;
-            if (this.isNoSleepMode) {
-                // skip sleeping the anim
-                console.log("Being asked to sleep anim, but in NoSleepMode");
-            } else {
-                this.wantAnimate = false;
-                this.fpsCounterEnd();
-                console.log("slept animate");
-            }
-        },
-        cancelSleep: function() {
-            clearTimeout(this.mytimeout);
-        },
-        isNoSleepMode: false,
-        animNoSleep: function() {
-            //console.log("anim no sleep");
-            this.isNoSleepMode = true;
-            //this.cancelSleep();
-            this.wakeAnimate();
-        },
-        animAllowSleep: function() {
-            //console.log("anim allow sleep");
-            
-            // even if we're being asked to allow sleep
-            // but the tween is playing, don't allow it
-            if (this.tweenIsPlaying) return;
-            
-            // if we get here, then allow sleep
-            this.isNoSleepMode = false;
-            if (!this.mytimeout) this.mytimeout = setTimeout(this.sleepAnimate.bind(this), 5000);
+            this.renderFrameCount++;
         },
+        
+        
         /**
          * Parses a string of gcode instructions, and invokes handlers for
          * each type of command.
@@ -2919,18 +2553,15 @@
          * Special handler:
          *   'default': Called if no other handler matches.
          */
-        GCodeParser: function (handlers) {
+        GCodeParser: function (handlers, modecmdhandlers) {
             this.handlers = handlers || {};
+            this.modecmdhandlers = modecmdhandlers || {};
             
             this.lastArgs = {cmd: null};
             this.lastFeedrate = null;
             this.isUnitsMm = true;
             
             this.parseLine = function (text, info) {
-                //text = text.replace(/;.*$/, '').trim(); // Remove comments
-                //text = text.replace(/\(.*$/, '').trim(); // Remove comments
-                //text = text.replace(/<!--.*?-->/, '').trim(); // Remove comments
-                
                 var origtext = text;
                 // remove line numbers if exist
                 if (text.match(/^N/i)) {
@@ -2957,22 +2588,29 @@
                     // make sure to remove inline comments
                     text = text.replace(/\(.*?\)/g, "");
                 }
-                //console.log("gcode txt:", text);
                 
                 if (text && !isComment) {
-                    //console.log("there is txt and it's not a comment");
-                    //console.log("");
-                    // preprocess XYZIJ params to make sure there's a space
-                    //text = text.replace(/(X|Y|Z|I|J|K)/ig, "$1 ");
-                    //console.log("gcode txt:", text);
-                    
                     // strip off end of line comment
                     text = text.replace(/(;|\().*$/, ""); // ; or () trailing
                     //text = text.replace(/\(.*$/, ""); // () trailing
                     
-                    var tokens = text.split(/\s+/);
-                    //console.log("tokens:", tokens);
-                    if (tokens) {
+                    var tokens = [];
+                    
+                    // Execute any non-motion commands on the line immediately
+                    // Add other commands to the tokens list for later handling
+                    // Segments are not created for non-motion commands;
+                    // the segment for this line is created later
+                    
+                    text.split(/\s+/).forEach(function (token) {
+                        var modehandler = modecmdhandlers[token.toUpperCase()];
+                        if (modehandler) {
+                            modehandler();
+                        } else {
+                            tokens.push(token);
+                        }
+                    });
+                    
+                    if (tokens.length) {
                         var cmd = tokens[0];
                         cmd = cmd.toUpperCase();
                         // check if a g or m cmd was included in gcode line
@@ -2981,23 +2619,8 @@
                         // cmd is what's assumed
                         isComment = false;
                         if (!cmd.match(/^(G|M|T)/i)) {
-                            // if comment, drop it
-                            /*
-                            if (cmd.match(/(;|\(|<)/)) {
-                                // is comment. do nothing.
-                                isComment = true;
-                                text = origtext;
-                                //console.log("got comment:", cmd);
-                            } else {
-                            */
-
-                                //console.log("no cmd so using last one. lastArgs:", this.lastArgs);
-                                // we need to use the last gcode cmd
-                                cmd = this.lastArgs.cmd;
-                                //console.log("using last cmd:", cmd);
-                                tokens.unshift(cmd); // put at spot 0 in array
-                                //console.log("tokens:", tokens);
-                            //}
+                            cmd = this.lastArgs.cmd;
+                            tokens.unshift(cmd);
                         } else {
                             
                             // we have a normal cmd as opposed to just an xyz pos where
@@ -3005,6 +2628,7 @@
                             // however, need to remove inline comments (TODO. it seems parser works fine for now)
                             
                         }
+                        
                         var args = {
                             'cmd': cmd,
                             'text': text,
@@ -3022,17 +2646,16 @@
                                 if (token && token.length > 0) {
                                     var key = token[0].toLowerCase();
                                     var value = parseFloat(token.substring(1));
-                                    //console.log("value:", value, "key:", key);
-                                    //if (isNaN(value))
-                                    //    console.error("got NaN. val:", value, "key:", key, "tokens:", tokens);
+                                    
                                     args[key] = value;
                                 } else {
                                     //console.log("couldn't parse token in foreach. weird:", token);
                                 }
                             });
                         }
+                        
                         var handler = this.handlers[cmd] || this.handlers['default'];
-
+                        
                         // don't save if saw a comment
                         if (!args.isComment) {
                             this.lastArgs = args;
@@ -3040,9 +2663,8 @@
                         } else {
                             //console.log("this was a comment, so didn't save lastArgs");
                         }
-                        //console.log("calling handler: cmd:", cmd, "args:", args, "info:", info);
+                        
                         if (handler) {
-                            
                             // do extra check here for units. units are
                             // specified via G20 or G21. We need to scan
                             // each line to see if it's inside the line because
@@ -3066,11 +2688,8 @@
                             } else {
                                 // use feedrate from prior lines
                                 args.feedrate = this.lastFeedrate;
-                                //if (args.feedrate 
                             }
-                            
-                            //console.log("about to call handler. args:", args, "info:", info, "this:", this);
-                            
+                                                        
                             return handler(args, info, this);
                         } else {
                             console.error("No handler for gcode command!!!");
@@ -3104,9 +2723,7 @@
                 }
             }
         },
-        colorG0: 0x00ff00,
-        colorG1: 0x0000ff,
-        colorG2: 0x999900,
+        
         createObjectFromGCode: function (gcode, indxMax) {
             //debugger;
             // Credit goes to https://github.com/joewalnes/gcode-viewer
@@ -3116,13 +2733,13 @@
             //    http://reprap.org/wiki/G-code
             //    http://en.wikipedia.org/wiki/G-code
             //    SprintRun source code
-
-            // these are extra Object3D elements added during
-            // the gcode rendering to attach to scene
-            this.extraObjects = [];
-            this.extraObjects["G17"] = [];
-            this.extraObjects["G18"] = [];
-            this.extraObjects["G19"] = [];
+            
+            var object = new THREE.Object3D();
+            
+            // reset our arrays
+            this.parsedLines = [];
+            this.lineObjects = [];
+            
             this.offsetG92 = {x:0, y:0, z:0, e:0};
 
             var lastLine = {
@@ -3142,11 +2759,10 @@
             // its own userData info
             // G2/G3 moves are their own child of lots of lines so
             // that even the simulator can follow along better
-            var new3dObj = new THREE.Group();
             var plane = "G17"; //set default plane to G17 - Assume G17 if no plane specified in gcode.
             var layers = [];
             var layer = undefined;
-            var lines = [];
+            // TODO: lines tear out
             var totalDist = 0;
             var bbbox = {
                 min: {
@@ -3160,7 +2776,8 @@
                     z: -100000
                 }
             };
-            var bbbox2 = {
+            
+            this.sceneBoundaries = {
                 min: {
                     x: 100000,
                     y: 100000,
@@ -3174,7 +2791,6 @@
             };
 
             this.newLayer = function (line) {
-                //console.log("layers:", layers, "layers.length", layers.length);
                 layer = {
                     type: {},
                     layer: layers.length,
@@ -3184,32 +2800,31 @@
             };
 
             this.getLineGroup = function (line, args) {
-                //console.log("getLineGroup:", line);
                 if (layer == undefined) this.newLayer(line);
+                
                 var speed = Math.round(line.e / 1000);
                 var grouptype = (line.extruding ? 10000 : 0) + speed;
-                //var color = new THREE.Color(line.extruding ? 0xff00ff : 0x0000ff);
-                var color = new THREE.Color(line.extruding ? 0xff00ff : this.colorG1);
+                
+                var color = new THREE.Color(line.extruding ? this.colorActive : this.colorG1);
+                
                 if (line.g0) {
                     grouptype =  "g0";
-                    //color = new THREE.Color(0x00ff00);
                     color = new THREE.Color(this.colorG0);
                 } else if (line.g2) {
                     grouptype = "g2";
-                    //color = new THREE.Color(0x999900);
                     color = new THREE.Color(this.colorG2);
                 } else if (line.arc) {
                     grouptype = "arc";
-                    color = new THREE.Color(0x0099ff);
+                    color = new THREE.Color(this.colorArc);
                 }
+                
                 // see if we have reached indxMax, if so draw, but 
                 // make it ghosted
                 if (args.indx > indxMax) {
                     grouptype = "ghost";
-                    //console.log("args.indx > indxMax", args, indxMax);
-                    color = new THREE.Color(0x000000);
+                    color = new THREE.Color(this.colorGhosted);
                 }
-                //if (line.color) color = new THREE.Color(line.color);
+
                 if (layer.type[grouptype] == undefined) {
                     layer.type[grouptype] = {
                         type: grouptype,
@@ -3220,7 +2835,7 @@
                         material: new THREE.LineBasicMaterial({
                             opacity: line.extruding ? 0.3 : line.g2 ? 0.2 : 0.5,
                             transparent: true,
-                            linewidth: 1,
+                            linewidth: this.lineWidth,
                             vertexColors: THREE.FaceColors
                         }),
                         geometry: new THREE.Geometry(),
@@ -3229,40 +2844,35 @@
                         layer.type[grouptype].material.opacity = 0.05;
                     }
                 }
+                
                 return layer.type[grouptype];
             };
 
             this.drawArc = function(aX, aY, aZ, endaZ, aRadius, aStartAngle, aEndAngle, aClockwise, plane) {
-                //console.log("drawArc:", aX, aY, aZ, aRadius, aStartAngle, aEndAngle, aClockwise);
                 var ac = new THREE.ArcCurve(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise);
-                //console.log("ac:", ac);
+
                 var acmat = new THREE.LineBasicMaterial({
-                    color: 0x00aaff,
-                    opacity: 0.5,
+                    color: this.colorArc,
+                    opacity: 0.9,
                     transparent: true
                 });
-                var acgeo = new THREE.Geometry();
+                
+                var geometry = new THREE.Geometry();
                 var ctr = 0;
                 var z = aZ;
+                
                 ac.getPoints(20).forEach(function (v) {
-                    //console.log(v);
                     z = (((endaZ - aZ) / 20) * ctr) + aZ;
-                    acgeo.vertices.push(new THREE.Vector3(v.x, v.y, z));
+                    geometry.vertices.push(new THREE.Vector3(v.x, v.y, z));
                     ctr++;
                 });
-                var aco = new THREE.Line(acgeo, acmat);
-                //aco.position.set(pArc.x, pArc.y, pArc.z);
-                //console.log("aco:", aco);
-                this.extraObjects[plane].push(aco);
+                
+                var aco = new THREE.Line( this.convertLineGeometryToBufferGeometry(geometry, new THREE.Color(this.colorArc)), acmat );
+                
                 return aco;
             };
             
             this.drawArcFrom2PtsAndCenter = function(vp1, vp2, vpArc, args) {
-                //console.log("drawArcFrom2PtsAndCenter. vp1:", vp1, "vp2:", vp2, "vpArc:", vpArc, "args:", args);
-                
-                //var radius = vp1.distanceTo(vpArc);
-                //console.log("radius:", radius);
-                
                 // Find angle
                 var p1deltaX = vpArc.x - vp1.x;
                 var p1deltaY = vpArc.y - vp1.y; 
@@ -3272,7 +2882,7 @@
                 var p2deltaY = vpArc.y - vp2.y; 
                 var p2deltaZ = vpArc.z - vp2.z;
 
-                switch(args.plane){
+                switch (args.plane){
                     case "G18":
                         var anglepArcp1 = Math.atan(p1deltaZ / p1deltaX);
                         var anglepArcp2 = Math.atan(p2deltaZ / p2deltaX);
@@ -3289,16 +2899,19 @@
                 // Draw arc from arc center
                 var radius = vpArc.distanceTo(vp1);
                 var radius2 = vpArc.distanceTo(vp2);
+                
                 //console.log("radius:", radius);
                 
-                if (Number((radius).toFixed(2)) != Number((radius2).toFixed(2))) console.log("Radiuses not equal. r1:", radius, ", r2:", radius2, " with args:", args, " rounded vals r1:", Number((radius).toFixed(2)), ", r2:", Number((radius2).toFixed(2)));
+                if (Number((radius).toFixed(2)) != Number((radius2).toFixed(2))) {
+                    console.log("Radiuses not equal. r1:", radius, ", r2:", radius2, " with args:", args, " rounded vals r1:", Number((radius).toFixed(2)), ", r2:", Number((radius2).toFixed(2)));
+                }
                 
                 // arccurve
                 var clwise = true;
                 if (args.clockwise === false) clwise = false;
-                //if (anglepArcp1 < 0) clockwise = false;
-
-                switch(args.plane){
+                
+                
+                switch (args.plane) {
                     case "G19":
                         if (p1deltaY >= 0) anglepArcp1 += Math.PI;
                         if (p2deltaY >= 0) anglepArcp2 += Math.PI;
@@ -3307,11 +2920,11 @@
                         if (p1deltaX >= 0) anglepArcp1 += Math.PI;
                         if (p2deltaX >= 0) anglepArcp2 += Math.PI;
                 }
-
-                if (anglepArcp1 === anglepArcp2 && clwise === false)
+                
+                if (anglepArcp1 === anglepArcp2 && clwise === false) {
                     // Draw full circle if angles are both zero, 
                     // start & end points are same point... I think
-                    switch(args.plane){
+                    switch (args.plane) {
                         case "G18":
                             var threeObj = this.drawArc(vpArc.x, vpArc.z, (-1*vp1.y), (-1*vp2.y), radius, anglepArcp1, (anglepArcp2 + (2*Math.PI)), clwise, "G18");
                             break;
@@ -3321,8 +2934,8 @@
                         default:
                             var threeObj = this.drawArc(vpArc.x, vpArc.y, vp1.z, vp2.z, radius, anglepArcp1, (anglepArcp2 + (2*Math.PI)), clwise, "G17");
                     }
-                else
-                    switch(args.plane){
+                } else {
+                    switch (args.plane) {
                         case "G18":
                             var threeObj = this.drawArc(vpArc.x, vpArc.z, (-1*vp1.y), (-1*vp2.y), radius, anglepArcp1, anglepArcp2, clwise, "G18");
                             break;
@@ -3332,39 +2945,22 @@
                         default:
                             var threeObj = this.drawArc(vpArc.x, vpArc.y, vp1.z, vp2.z, radius, anglepArcp1, anglepArcp2, clwise, "G17");
                     }
+                }
+                
                 return threeObj;
             };
             
-            this.addSegment = function (p1, p2, args) {
-                //console.log("");
-                //console.log("addSegment p2:", p2);
-                // add segment to array for later use
-                lines.push({
-                    p2: p2,
-                    'args': args
-                });
-
+            this.addSegment = function(p1, p2, args) {
+                
                 var group = this.getLineGroup(p2, args);
                 var geometry = group.geometry;
 
                 group.segmentCount++;
                 // see if we need to draw an arc
                 if (p2.arc) {
-                    //console.log("");
-                    //console.log("drawing arc. p1:", p1, ", p2:", p2);
+                    var vp1 = new THREE.Vector3(p1.x, p1.y, p1.z);
+                    var vp2 = new THREE.Vector3(p2.x, p2.y, p2.z);
                     
-                    //var segmentCount = 12;
-                    // figure out the 3 pts we are dealing with
-                    // the start, the end, and the center of the arc circle
-                    // radius is dist from p1 x/y/z to pArc x/y/z
-                    //if(args.clockwise === false || args.cmd === "G3"){
-                    //    var vp2 = new THREE.Vector3(p1.x, p1.y, p1.z);
-                    //    var vp1 = new THREE.Vector3(p2.x, p2.y, p2.z);
-                    //}
-                    //else {
-                        var vp1 = new THREE.Vector3(p1.x, p1.y, p1.z);
-                        var vp2 = new THREE.Vector3(p2.x, p2.y, p2.z);
-                    //}   
                     var vpArc;
                     
                     // if this is an R arc gcode command, we're given the radius, so we
@@ -3397,10 +2993,18 @@
                         // y = y3 - sqrt(r^2-(q/2)^2)*(x2-x1)/q  
                         var pArc_1 = undefined;
                         var pArc_2 = undefined;
+                        
                         var calc = Math.sqrt((radius * radius) - Math.pow(q / 2, 2));
+                        
+                        // calc can be NaN if q/2 is epsilon larger than radius due to finite precision
+                        // When that happens, the calculated center is incorrect
+                        if (isNaN(calc)) {
+                            calc = 0.0;
+                        }
+                        
                         var angle_point = undefined;
                         
-                        switch(args.plane){
+                        switch (args.plane) {
                             case "G18":
                                 pArc_1 = {
                                     x: x3 + calc * (p1.z - p2.z) / q,
@@ -3411,12 +3015,11 @@
                                     y: y3 - calc * (p2.y - p1.y) / q, 
                                     z: z3 - calc * (p2.x - p1.x) / q };
                                 angle_point = Math.atan2(p1.z, p1.x) - Math.atan2(p2.z, p2.x);
-                                if(((p1.x-pArc_1.x)*(p1.z+pArc_1.z))+((pArc_1.x-p2.x)*(pArc_1.z+p2.z)) >= 
+                                if (((p1.x-pArc_1.x)*(p1.z+pArc_1.z))+((pArc_1.x-p2.x)*(pArc_1.z+p2.z)) >= 
                                    ((p1.x-pArc_2.x)*(p1.z+pArc_2.z))+((pArc_2.x-p2.x)*(pArc_2.z+p2.z))){
                                     var cw = pArc_1;
                                     var ccw = pArc_2;
-                                }
-                                else{
+                                } else {
                                     var cw = pArc_2;
                                     var ccw = pArc_1;
                                 }
@@ -3431,12 +3034,11 @@
                                     y: y3 - calc * (p1.z - p2.z) / q, 
                                     z: z3 - calc * (p2.y - p1.y) / q };
                                 
-                                if(((p1.y-pArc_1.y)*(p1.z+pArc_1.z))+((pArc_1.y-p2.y)*(pArc_1.z+p2.z)) >= 
+                                if (((p1.y-pArc_1.y)*(p1.z+pArc_1.z))+((pArc_1.y-p2.y)*(pArc_1.z+p2.z)) >= 
                                    ((p1.y-pArc_2.y)*(p1.z+pArc_2.z))+((pArc_2.y-p2.y)*(pArc_2.z+p2.z))){
                                     var cw = pArc_1;
                                     var ccw = pArc_2;
-                                }
-                                else{
+                                } else {
                                     var cw = pArc_2;
                                     var ccw = pArc_1;
                                 }
@@ -3450,37 +3052,30 @@
                                     x: x3 - calc * (p1.y - p2.y) / q,
                                     y: y3 - calc * (p2.x - p1.x) / q, 
                                     z: z3 - calc * (p2.z - p1.z) / q };
-                                if(((p1.x-pArc_1.x)*(p1.y+pArc_1.y))+((pArc_1.x-p2.x)*(pArc_1.y+p2.y)) >= 
+                                if (((p1.x-pArc_1.x)*(p1.y+pArc_1.y))+((pArc_1.x-p2.x)*(pArc_1.y+p2.y)) >= 
                                    ((p1.x-pArc_2.x)*(p1.y+pArc_2.y))+((pArc_2.x-p2.x)*(pArc_2.y+p2.y))){
                                     var cw = pArc_1;
                                     var ccw = pArc_2;
-                                }
-                                else{
+                                } else {
                                     var cw = pArc_2;
                                     var ccw = pArc_1;
                                 }
                         }
                         
-                        if((p2.clockwise === true && radius >= 0) || (p2.clockwise === false && radius < 0)) vpArc = new THREE.Vector3(cw.x, cw.y, cw.z);
-                        else vpArc = new THREE.Vector3(ccw.x, ccw.y, ccw.z);
+                        if ((p2.clockwise === true && radius >= 0) || (p2.clockwise === false && radius < 0)) {
+                            vpArc = new THREE.Vector3(cw.x, cw.y, cw.z);
+                        } else {
+                            vpArc = new THREE.Vector3(ccw.x, ccw.y, ccw.z);
+                        } 
                         
                     } else {
-                        // this code deals with IJK gcode commands
-                        /*if(args.clockwise === false || args.cmd === "G3")
-                            var pArc = {
-                                x: p2.arci ? p1.x + p2.arci : p1.x,
-                                y: p2.arcj ? p1.y + p2.arcj : p1.y,
-                                z: p2.arck ? p1.z + p2.arck : p1.z,
-                            };
-                        else*/
                         var pArc = {
-                            x: p2.arci ? p1.x + p2.arci : p1.x,
-                            y: p2.arcj ? p1.y + p2.arcj : p1.y,
-                            z: p2.arck ? p1.z + p2.arck : p1.z,
+                            x: p2.arci,
+                            y: p2.arcj,
+                            z: p2.arck
                         };
-                        //console.log("new pArc:", pArc);
+
                         vpArc = new THREE.Vector3(pArc.x, pArc.y, pArc.z);
-                        //console.log("vpArc:", vpArc);
                     }
                     
                     var threeObjArc = this.drawArcFrom2PtsAndCenter(vp1, vp2, vpArc, args);
@@ -3488,23 +3083,12 @@
                     // still push the normal p1/p2 point for debug
                     p2.g2 = true;
                     p2.threeObjArc = threeObjArc;
+                    
                     group = this.getLineGroup(p2, args);
-                    // these golden lines showing start/end of a g2 or g3 arc were confusing people
-                    // so hiding them for now. jlauer 8/15/15
-                    /*
-                    geometry = group.geometry;
-                    geometry.vertices.push(
-                        new THREE.Vector3(p1.x, p1.y, p1.z));
-                    geometry.vertices.push(
-                        new THREE.Vector3(p2.x, p2.y, p2.z));
-                    geometry.colors.push(group.color);
-                    geometry.colors.push(group.color);
-                    */
                 } else {
-                    geometry.vertices.push(
-                        new THREE.Vector3(p1.x, p1.y, p1.z));
-                    geometry.vertices.push(
-                        new THREE.Vector3(p2.x, p2.y, p2.z));
+                    geometry.vertices.push(new THREE.Vector3(p1.x, p1.y, p1.z));
+                    geometry.vertices.push(new THREE.Vector3(p2.x, p2.y, p2.z));
+                    
                     geometry.colors.push(group.color);
                     geometry.colors.push(group.color);
                 }
@@ -3517,28 +3101,14 @@
                     bbbox.max.y = Math.max(bbbox.max.y, p2.y);
                     bbbox.max.z = Math.max(bbbox.max.z, p2.z);
                 }
-                if (p2.g0) {
-                    // we're in a toolhead move, label moves
-                    /*
-                    if (group.segmentCount < 2) {
-                    this.makeSprite(this.scene, "webgl", {
-                        x: p2.x,
-                        y: p2.y,
-                        z: p2.z + 0,
-                        text: group.segmentCount,
-                        color: "#ff00ff",
-                        size: 3,
-                    });
-                    }
-                    */
-                }
+                
                 // global bounding box calc
-                bbbox2.min.x = Math.min(bbbox2.min.x, p2.x);
-                bbbox2.min.y = Math.min(bbbox2.min.y, p2.y);
-                bbbox2.min.z = Math.min(bbbox2.min.z, p2.z);
-                bbbox2.max.x = Math.max(bbbox2.max.x, p2.x);
-                bbbox2.max.y = Math.max(bbbox2.max.y, p2.y);
-                bbbox2.max.z = Math.max(bbbox2.max.z, p2.z);
+                this.sceneBoundaries.min.x = Math.min(this.sceneBoundaries.min.x, p2.x);
+                this.sceneBoundaries.min.y = Math.min(this.sceneBoundaries.min.y, p2.y);
+                this.sceneBoundaries.min.z = Math.min(this.sceneBoundaries.min.z, p2.z);
+                this.sceneBoundaries.max.x = Math.max(this.sceneBoundaries.max.x, p2.x);
+                this.sceneBoundaries.max.y = Math.max(this.sceneBoundaries.max.y, p2.y);
+                this.sceneBoundaries.max.z = Math.max(this.sceneBoundaries.max.z, p2.z);
                 
                 // NEW METHOD OF CREATING THREE.JS OBJECTS
                 // create new approach for three.js objects which is
@@ -3551,36 +3121,40 @@
                     gcodeObj = p2.threeObjArc;
                 } else {
                     // make a line
-                    var color = 0X0000ff;
+                    var color = this.colorArc;
+                    var opacity = 0.5;
                     
                     if (p2.extruding) {
-                        color = 0xff00ff;
+                        color = this.colorActive;
+                        opacity = 1;
                     } else if (p2.g0) {
-                        color = 0x00ff00;
+                        color = this.colorG0;
+                        opacity = 0.9
                     } else if (p2.g2) {
-                        //color = 0x999900;
+                        color = this.colorG2;
                     } else if (p2.arc) {
-                        color = 0x0033ff;
+                        color = this.colorArc;
+                        opacity = 0.7;
                     }
                     
                     var material = new THREE.LineBasicMaterial({
                         color: color,
-                        opacity: 0.5,
+                        opacity: opacity,
                         transparent: true
                     });
                     
                     var geometry = new THREE.Geometry();
                     geometry.vertices.push(
                         new THREE.Vector3( p1.x, p1.y, p1.z ),
-                        new THREE.Vector3( p2.x, p2.y, p2.z )
+                        new THREE.Vector3( p2.x, p2.y, p2.z ),
+                        new THREE.Vector3( p2.x, p2.y, p2.z ) // HAX, to fix createGlow error with straight lines
                     );
                     
-                    var line = new THREE.Line( geometry, material );
-                    gcodeObj = line;
+                    gcodeObj = new THREE.Line( this.convertLineGeometryToBufferGeometry(geometry, new THREE.Color(color)), material );
                 }
+                
                 gcodeObj.userData.p2 = p2;
                 gcodeObj.userData.args = args;
-                new3dObj.add(gcodeObj);
                 
                 // DISTANCE CALC
                 // add distance so we can calc estimated time to run
@@ -3588,24 +3162,19 @@
                 var dist = 0;
                 if (p2.arc) {
                     // calc dist of all lines
-                    //console.log("this is an arc to calc dist for. p2.threeObjArc:", p2.threeObjArc, "p2:", p2);
-                    var arcGeo = p2.threeObjArc.geometry;
+                    var arcGeo = new THREE.Geometry().fromBufferGeometry(p2.threeObjArc.geometry);
                     //console.log("arcGeo:", arcGeo);
                                         
                     var tad2 = 0;
                     for (var arcLineCtr = 0; arcLineCtr < arcGeo.vertices.length - 1; arcLineCtr++) {
                         tad2 += arcGeo.vertices[arcLineCtr].distanceTo(arcGeo.vertices[arcLineCtr+1]);
-                    }
-                    //console.log("tad2:", tad2);
-                    
+                    }                    
                     
                     // just do straight line calc
                     var a = new THREE.Vector3( p1.x, p1.y, p1.z );
                     var b = new THREE.Vector3( p2.x, p2.y, p2.z );
                     var straightDist = a.distanceTo(b);
                     
-                    //console.log("diff of straight line calc vs arc sum. straightDist:", straightDist);
-                    
                     dist = tad2;
                     
                 } else {
@@ -3646,9 +3215,18 @@
                 p2.timeMins = timeMinutes;
                 p2.timeMinsSum = this.totalTime;
                 
-                //console.log("calculating distance. dist:", dist, "totalDist:", this.totalDist, "feedrate:", args.feedrate, "timeMinsToExecute:", timeMinutes, "totalTime:", this.totalTime, "p1:", p1, "p2:", p2, "args:", args);
+                object.add(gcodeObj);
                 
+                // add segment to array for later use
+                this.parsedLines.push({
+                    'p2': p2,
+                    'args': args,
+                    'renderObject': gcodeObj
+                });
+                
+                this.lineObjects.push(gcodeObj);
             }
+            
             this.totalDist = 0;
             this.totalTime = 0;
             
@@ -3661,21 +3239,31 @@
             this.absolute = function (v1, v2) {
                 return relative ? v1 + v2 : v2;
             }
-
+            
+            var ijkrelative = true;  // For Mach3 Arc IJK Absolute mode
+            this.ijkabsolute = function (v1, v2) {
+                return ijkrelative ? v1 + v2 : v2;
+            }
+            
             this.addFakeSegment = function(args) {
+                console.log('Fake segment', args);
+                
                 //line.args = args;
                 var arg2 = {
                     isFake : true,
                     text : args.text,
                     indx : args.indx
                 };
+                
                 if (arg2.text.match(/^(;|\(|<)/)) arg2.isComment = true;
-                lines.push({
-                    p2: lastLine,    // since this is fake, just use lastLine as xyz
-                    'args': arg2
+
+                this.parsedLines.push({
+                    'p2': lastLine,    // since this is fake, just use lastLine as xyz
+                    'args': arg2,
+                    'renderObject': null
                 });
             }
-
+            
             var cofg = this;
             var parser = new this.GCodeParser({
                 //set the g92 offsets for the parser - defaults to no offset
@@ -3696,6 +3284,7 @@
                     //cofg.newLayer(newLine);
                     
                     cofg.addSegment(lastLine, newLine, args);
+                    
                     //console.log("G0", lastLine, newLine, args, cofg.offsetG92);
                     lastLine = newLine;
                 },  
@@ -3707,23 +3296,22 @@
                     // to the point (90.6, 13.8), extruding material as the move
                     // happens from the current extruded length to a length of
                     // 22.4 mm.
-
                     var newLine = {
                         x: args.x !== undefined ? cofg.absolute(lastLine.x, args.x) + cofg.offsetG92.x : lastLine.x,
                         y: args.y !== undefined ? cofg.absolute(lastLine.y, args.y) + cofg.offsetG92.y : lastLine.y,
                         z: args.z !== undefined ? cofg.absolute(lastLine.z, args.z) + cofg.offsetG92.z : lastLine.z,
                         e: args.e !== undefined ? cofg.absolute(lastLine.e, args.e) + cofg.offsetG92.e : lastLine.e,
                         f: args.f !== undefined ? cofg.absolute(lastLine.f, args.f) : lastLine.f,
-
                     };
-                    /* layer change detection is or made by watching Z, it's made by
-         watching when we extrude at a new Z position */
+                    
+                    /* layer change detection is or made by watching Z, it's made by watching when we extrude at a new Z position */
                     if (cofg.delta(lastLine.e, newLine.e) > 0) {
                         newLine.extruding = cofg.delta(lastLine.e, newLine.e) > 0;
                         if (layer == undefined || newLine.z != layer.z) cofg.newLayer(newLine);
                     }
+                    
                     cofg.addSegment(lastLine, newLine, args);
-                    //console.log("G1", lastLine, newLine, args, cofg.offsetG92);
+                    
                     lastLine = newLine;
                 },
                 G2: function (args, indx, gcp) {
@@ -3731,7 +3319,7 @@
                     show it as a light gray line, but we'll also sub-render the
                     arc itself by figuring out the sub-segments . */
                     
-                    args.plane = plane; //set the plane for this command to whatever the current plane is
+                    //args.plane = plane; //set the plane for this command to whatever the current plane is
                     
                     var newLine = {
                         x: args.x !== undefined ? cofg.absolute(lastLine.x, args.x) + cofg.offsetG92.x : lastLine.x,
@@ -3739,21 +3327,22 @@
                         z: args.z !== undefined ? cofg.absolute(lastLine.z, args.z) + cofg.offsetG92.z : lastLine.z,
                         e: args.e !== undefined ? cofg.absolute(lastLine.e, args.e) + cofg.offsetG92.e : lastLine.e,
                         f: args.f !== undefined ? cofg.absolute(lastLine.f, args.f) : lastLine.f,
-                        arci: args.i ? args.i : null,
-                        arcj: args.j ? args.j : null,
-                        arck: args.k ? args.k : null,
+                        arci: args.i !== undefined ? cofg.ijkabsolute(lastLine.x, args.i) : lastLine.x,
+                        arcj: args.j !== undefined ? cofg.ijkabsolute(lastLine.y, args.j) : lastLine.y,
+                        arck: args.k !== undefined ? cofg.ijkabsolute(lastLine.z, args.k) : lastLine.z,
                         arcr: args.r ? args.r : null,
                     };
                    
-                    //console.log("G2 newLine:", newLine);
-                    //newLine.g2 = true;
                     newLine.arc = true;
                     newLine.clockwise = true;
-                    if (args.clockwise === false) newLine.clockwise = args.clockwise;
+                    
+                    if (args.clockwise === false) {
+                        newLine.clockwise = args.clockwise;
+                    }
+                    
                     cofg.addSegment(lastLine, newLine, args);
-                    //console.log("G2", lastLine, newLine, args, cofg.offsetG92);
+                    
                     lastLine = newLine;
-                    //console.log("G2. args:", args);
                 },
                 G3: function (args, indx, gcp) {
                     /* this is an arc move from lastLine's xy to the new xy. same
@@ -3763,25 +3352,67 @@
                     gcp.handlers.G2(args, indx, gcp);
                 },
 
-                G17: function (args){
+                G73: function(args, indx, gcp) {
+                    // peck drilling. just treat as g1
+                    console.log("G73 gcp:", gcp);
+                    gcp.handlers.G1(args);
+                },
+
+                G92: function (args) { // E0
+                    // G92: Set Position
+                    // Example: G92 E0
+                    // Allows programming of absolute zero point, by reseting the
+                    // current position to the values specified. This would set the
+                    // machine's X coordinate to 10, and the extrude coordinate to 90.
+                    // No physical motion will occur.
+
+                    // TODO: Only support E0
+                    var newLine = lastLine;
+                    
+                    cofg.offsetG92.x = (args.x !== undefined ? (args.x === 0 ? newLine.x : newLine.x - args.x) : 0);
+                    cofg.offsetG92.y = (args.y !== undefined ? (args.y === 0 ? newLine.y : newLine.y - args.y) : 0);
+                    cofg.offsetG92.z = (args.z !== undefined ? (args.z === 0 ? newLine.z : newLine.z - args.z) : 0);
+                    cofg.offsetG92.e = (args.e !== undefined ? (args.e === 0 ? newLine.e : newLine.e - args.e) : 0);
+
+                    //newLine.x = args.x !== undefined ? args.x + newLine.x : newLine.x;
+                    //newLine.y = args.y !== undefined ? args.y + newLine.y : newLine.y;
+                    //newLine.z = args.z !== undefined ? args.z + newLine.z : newLine.z;
+                    //newLine.e = args.e !== undefined ? args.e + newLine.e : newLine.e;
+                    
+                    //console.log("G92", lastLine, newLine, args, cofg.offsetG92);
+                    
+                    //lastLine = newLine;
+                    cofg.addFakeSegment(args);
+                },
+                M30: function (args) {
+                    cofg.addFakeSegment(args);
+                },
+
+                'default': function (args, info) {
+                    //if (!args.isComment)
+                    //    console.log('Unknown command:', args.cmd, args, info);
+                    cofg.addFakeSegment(args);
+                },
+            },
+            // Mode-setting non-motion commands, of which many may appear on one line
+            // These take no arguments
+            {
+                G17: function () {
                     console.log("SETTING XY PLANE");
                     plane = "G17";
-                    cofg.addFakeSegment(args);
                 },
 
-                G18: function (args){
+                G18: function () {
                     console.log("SETTING XZ PLANE");
                     plane = "G18";
-                    cofg.addFakeSegment(args);
                 },
 
-                G19: function (args){
+                G19: function () {
                     console.log("SETTING YZ PLANE");
                     plane = "G19";
-                    cofg.addFakeSegment(args);
                 },
 
-                G20: function (args) {
+                G20: function () {
                     // G21: Set Units to Inches
                     // We don't really have to do anything since 3d viewer is unit agnostic
                     // However, we need to set a global property so the trinket decorations
@@ -3789,83 +3420,96 @@
                     // later on when they are drawn after the gcode is rendered
                     console.log("SETTING UNITS TO INCHES!!!");
                     cofg.isUnitsMm = false; // false means inches cuz default is mm
-                    cofg.addFakeSegment(args);
-
                 },
 
-                G21: function (args) {
+                G21: function () {
                     // G21: Set Units to Millimeters
                     // Example: G21
                     // Units from now on are in millimeters. (This is the RepRap default.)
                     console.log("SETTING UNITS TO MM!!!");
                     cofg.isUnitsMm = true; // true means mm
-                    cofg.addFakeSegment(args);
-
                 },
 
-                G73: function(args, indx, gcp) {
-                    // peck drilling. just treat as g1
-                    console.log("G73 gcp:", gcp);
-                    gcp.handlers.G1(args);
-                },
-                G90: function (args) {
+                // A bunch of no-op modes that do not affect the viewer
+                G40: function () {}, // Tool radius compensation off
+                G41: function () {}, // Tool radius compensation left
+                G42: function () {}, // Tool radius compensation right
+                G45: function () {}, // Axis offset single increase
+                G46: function () {}, // Axis offset single decrease
+                G47: function () {}, // Axis offset double increase
+                G48: function () {}, // Axis offset double decrease
+                G49: function () {}, // Tool length offset compensation cancle
+                G54: function () {}, // Select work coordinate system 1
+                G55: function () {}, // Select work coordinate system 2
+                G56: function () {}, // Select work coordinate system 3
+                G57: function () {}, // Select work coordinate system 4
+                G58: function () {}, // Select work coordinate system 5
+                G59: function () {}, // Select work coordinate system 6
+                G61: function () {}, // Exact stop check mode
+                G64: function () {}, // Cancel G61
+                G69: function () {}, // Cancel G68
+
+                G90: function () {
                     // G90: Set to Absolute Positioning
                     // Example: G90
                     // All coordinates from now on are absolute relative to the
                     // origin of the machine. (This is the RepRap default.)
-
                     relative = false;
-                    cofg.addFakeSegment(args);
                 },
 
-                G91: function (args) {
+                'G90.1': function () {
+                    // G90.1: Set to Arc Absolute IJK Positioning
+                    // Example: G90.1
+                    // From now on, arc centers are specified directly by
+                    // the IJK parameters, e.g. center_x = I_value
+                    // This is Mach3-specific
+                    ijkrelative = false;
+                },
+
+                G91: function () {
                     // G91: Set to Relative Positioning
                     // Example: G91
                     // All coordinates from now on are relative to the last position.
-
-                    // TODO!
                     relative = true;
-                    cofg.addFakeSegment(args);
                 },
 
-                G92: function (args) { // E0
-                    // G92: Set Position
-                    // Example: G92 E0
-                    // Allows programming of absolute zero point, by reseting the
-                    // current position to the values specified. This would set the
-                    // machine's X coordinate to 10, and the extrude coordinate to 90.
-                    // No physical motion will occur.
-
-                    // TODO: Only support E0
-                    var newLine = lastLine;
-                    
-                    cofg.offsetG92.x = (args.x !== undefined ? (args.x === 0 ? newLine.x : newLine.x - args.x) : 0);
-                    cofg.offsetG92.y = (args.y !== undefined ? (args.y === 0 ? newLine.y : newLine.y - args.y) : 0);
-                    cofg.offsetG92.z = (args.z !== undefined ? (args.z === 0 ? newLine.z : newLine.z - args.z) : 0);
-                    cofg.offsetG92.e = (args.e !== undefined ? (args.e === 0 ? newLine.e : newLine.e - args.e) : 0);
-
-                    //newLine.x = args.x !== undefined ? args.x + newLine.x : newLine.x;
-                    //newLine.y = args.y !== undefined ? args.y + newLine.y : newLine.y;
-                    //newLine.z = args.z !== undefined ? args.z + newLine.z : newLine.z;
-                    //newLine.e = args.e !== undefined ? args.e + newLine.e : newLine.e;
-                    
-                    //console.log("G92", lastLine, newLine, args, cofg.offsetG92);
-                    
-                    //lastLine = newLine;
-                    cofg.addFakeSegment(args);
-                },
-                M30: function (args) {
-                    cofg.addFakeSegment(args);
+                'G91.1': function () {
+                    // G91.1: Set to Arc Relative IJK Positioning
+                    // Example: G91.1
+                    // From now on, arc centers are relative to the starting
+                    // coordinate, e.g. center_x = this_x + I_value
+                    // This is the default, and the only possibility for most
+                    // controllers other than Mach3
+                    ijkrelative = true;
                 },
-                M82: function (args) {
+
+                // No-op modal macros that do not affect the viewer
+                M07: function () {}, // Coolant on (mist)
+                M08: function () {}, // Coolant on (flood)
+                M09: function () {}, // Coolant off
+                M10: function () {}, // Pallet clamp on
+                M11: function () {}, // Pallet clamp off
+                M21: function () {}, // Mirror X axis
+                M22: function () {}, // Mirror Y axis
+                M23: function () {}, // Mirror off
+                M24: function () {}, // Thread pullout gradual off
+                M41: function () {}, // Select gear 1
+                M42: function () {}, // Select gear 2
+                M43: function () {}, // Select gear 3
+                M44: function () {}, // Select gear 4
+                M48: function () {}, // Allow feedrate override
+                M49: function () {}, // Disallow feedrate override
+                M52: function () {}, // Empty spindle
+                M60: function () {}, // Automatic pallet change
+
+                M82: function () {
                     // M82: Set E codes absolute (default)
                     // Descriped in Sprintrun source code.
 
                     // No-op, so long as M83 is not supported.
-                    cofg.addFakeSegment(args);
                 },
 
-                M84: function (args) {
+                M84: function () {
                     // M84: Stop idle hold
                     // Example: M84
                     // Stop the idle hold on all axis and extruder. In some cases the
@@ -3875,13 +3519,6 @@
                     // in between or after printjobs.
 
                     // No-op
-                    cofg.addFakeSegment(args);
-                },
-
-                'default': function (args, info) {
-                    //if (!args.isComment)
-                    //    console.log('Unknown command:', args.cmd, args, info);
-                    cofg.addFakeSegment(args);
                 },
             });
 
@@ -3892,103 +3529,32 @@
             this.isUnitsMm = parser.isUnitsMm;
             
             console.log("inside creatGcodeFromObject. this:", this);
-
             console.log("Layer Count ", layers.length);
-
             
-            var object = new THREE.Object3D();
-            
-            
-            // old approach of monolithic line segment
-            for (var lid in layers) {
-                var layer = layers[lid];
-                //      console.log("Layer ", layer.layer);
-                for (var tid in layer.type) {
-                    var type = layer.type[tid];
-                    //console.log("Layer:", layer.layer, "type:", type, "segCnt:", type.segmentCount);
-                    // normal geometry (not buffered)
-                    //object.add(new THREE.Line(type.geometry, type.material, THREE.LinePieces));
-                    // using buffer geometry
-                    var bufferGeo = this.convertLineGeometryToBufferGeometry( type.geometry, type.color );
-                    object.add(new THREE.Line(bufferGeo, type.material, THREE.LinePieces));
-                }
-            }
-            //XY PLANE
-            this.extraObjects["G17"].forEach(function(obj) {
-                // non-buffered approach
-                //object.add(obj);
-                
-                // buffered approach
-                // convert g2/g3's to buffer geo as well
-                //console.log("extra object:", obj);
-                var bufferGeo = this.convertLineGeometryToBufferGeometry( obj.geometry, obj.material.color );
-                object.add(new THREE.Line(bufferGeo, obj.material));
-            }, this);
-            //XZ PLANE
-            this.extraObjects["G18"].forEach(function(obj) {
-                // buffered approach
-                var bufferGeo = this.convertLineGeometryToBufferGeometry( obj.geometry, obj.material.color );
-                var tmp = new THREE.Line(bufferGeo, obj.material)
-                tmp.rotateOnAxis(new THREE.Vector3(1,0,0),Math.PI/2);
-                object.add(tmp);
-            }, this);
-            //YZ PLANE
-            this.extraObjects["G19"].forEach(function(obj) {
-                // buffered approach
-                var bufferGeo = this.convertLineGeometryToBufferGeometry( obj.geometry, obj.material.color );
-                var tmp = new THREE.Line(bufferGeo, obj.material)
-                tmp.rotateOnAxis(new THREE.Vector3(1,0,0),Math.PI/2);
-                tmp.rotateOnAxis(new THREE.Vector3(0,1,0),Math.PI/2);
-                object.add(tmp);
-            }, this);
-            
-            // use new approach of building 3d object where each
-            // gcode line is its own segment with its own userData
-            //object = new3dObj;
-
-
-            console.log("bbox ", bbbox);
-
             // Center
             var scale = 1; // TODO: Auto size
 
             var center = new THREE.Vector3(
-            bbbox.min.x + ((bbbox.max.x - bbbox.min.x) / 2),
-            bbbox.min.y + ((bbbox.max.y - bbbox.min.y) / 2),
-            bbbox.min.z + ((bbbox.max.z - bbbox.min.z) / 2));
+                bbbox.min.x + ((bbbox.max.x - bbbox.min.x) / 2),
+                bbbox.min.y + ((bbbox.max.y - bbbox.min.y) / 2),
+                bbbox.min.z + ((bbbox.max.z - bbbox.min.z) / 2)
+            );
+            
             console.log("center ", center);
 
-            var center2 = new THREE.Vector3(
-            bbbox2.min.x + ((bbbox2.max.x - bbbox2.min.x) / 2),
-            bbbox2.min.y + ((bbbox2.max.y - bbbox2.min.y) / 2),
-            bbbox2.min.z + ((bbbox2.max.z - bbbox2.min.z) / 2));
-            console.log("center2 of all gcode ", center2);
-
-            // store meta data in userData of object3d for later use like in animation
-            // of toolhead
-            object.userData.bbbox2 = bbbox2;
-            object.userData.lines = lines;
-            object.userData.layers = layers;
-            object.userData.center2 = center2;
-            object.userData.extraObjects = this.extraObjects;
-            object.userData.threeObjs = new3dObj;
-            
-            console.log("userData for this object3d:", object.userData);
-            /*
-            this.camera.target.x = center2.x;
-            this.camera.target.y = center2.y;
-            this.camera.target.z = center2.z;
-            */
-
-            //object.position = center.multiplyScalar(-scale);
-
-            //object.scale.multiplyScalar(scale);
+            this.sceneCenter = new THREE.Vector3(
+                this.sceneBoundaries.min.x + ((this.sceneBoundaries.max.x - this.sceneBoundaries.min.x) / 2),
+                this.sceneBoundaries.min.y + ((this.sceneBoundaries.max.y - this.sceneBoundaries.min.y) / 2),
+                this.sceneBoundaries.min.z + ((this.sceneBoundaries.max.z - this.sceneBoundaries.min.z) / 2)
+            );
+            
             console.log("final object:", object);
 
             return object;
         },
+        
+        
         convertLineGeometryToBufferGeometry: function(lineGeometry, color) {
-            
             var positions = new Float32Array( lineGeometry.vertices.length * 3 );
             var colors = new Float32Array( lineGeometry.vertices.length * 3 );
             
@@ -3997,16 +3563,15 @@
             var geometry = new THREE.BufferGeometry();
             
             for (var i = 0; i < lineGeometry.vertices.length; i++) {
-                
                 var x = lineGeometry.vertices[i].x;
                 var y = lineGeometry.vertices[i].y;
                 var z = lineGeometry.vertices[i].z;
-                
+
                 // positions
                 positions[ i * 3 ] = x;
                 positions[ i * 3 + 1 ] = y;
                 positions[ i * 3 + 2 ] = z;
-                
+
                 // colors
                 colors[ i * 3 ] = color.r;
                 colors[ i * 3 + 1 ] = color.g;
@@ -4020,232 +3585,6 @@
             
             return geometry;
         },
-        
-        /*
-        // marquee selection code
-        // Huge credit to Josh Staples for this code
-        // https://gist.github.com/cubicleDowns/7666452
-        marquee: {
-            
-            listeners: function() {
-                demo.jqContainer.mousedown(mouseDown);
-                demo.jqContainer.mouseup(mouseUp);
-                demo.jqContainer.mousemove(marqueeSelect);
-                $(document).mousemove(resetMarquee);
-            },
-        
-            resetMarquee: function() {
-                mouseup = true;
-                mousedown = false;
-                marquee.fadeOut();
-                marquee.css({width: 0, height: 0});
-                mousedowncoords = {};
-            },
-         
-            mouseDown: function (event) {
-    
-                event.preventDefault();
-                
-                var pos = {};
-                
-                mousedown = true;
-                mousedowncoords = {};
-                
-                mousedowncoords.x = event.clientX;
-                mousedowncoords.y = event.clientY;
-                
-                // adjust the mouse select
-                pos.x = ((event.clientX - offset.x) / demo.jqContainer.width()) * 2 -1;
-                pos.y = -((event.clientY - offset.y) / demo.jqContainer.height()) * 2 + 1;
-    
-                var vector = new THREE.Vector3(pos.x, pos.y, 1);
-                
-                demo.projector.unprojectVector(vector, demo.cameras.liveCam);
-    
-                // removing previous click marker.
-                $(".clickMarkers").remove();
-    
-                // appending a click marker.
-                demo.jqContainer.append('<div class="clickMarkers" style="pointer-events:none; position: absolute; z-index: 100; left: ' + event.offsetX + 'px; top: ' + event.offsetY +'px">D</div>' );
-    
-            },
-
-            mouseUp: function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-                
-                // reset the marquee selection
-                resetMarquee();
-    
-                // appending a click marker.
-                demo.jqContainer.append('<div class="clickMarkers" style="left: ' + event.offsetX + 'px; top: ' + event.offsetY +'px">U</div>' );
-            },
-
-            marqueeSelect: function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-    
-                // make sure we are in a select mode.
-                if(mousedown){
-        
-                    marquee.fadeIn();
-        
-                    var pos = {};
-                    pos.x = event.clientX - mousedowncoords.x;
-                    pos.y = event.clientY - mousedowncoords.y;
-                    
-                    // square variations
-                    // (0,0) origin is the TOP LEFT pixel of the canvas.
-                    //
-                    //  1 | 2
-                    // ---.---
-                    //  4 | 3
-                    // there are 4 ways a square can be gestured onto the screen.  the following detects these four variations
-                    // and creates/updates the CSS to draw the square on the screen
-                    if (pos.x < 0 && pos.y < 0) {
-                        marquee.css({left: event.clientX + 'px', width: -pos.x + 'px', top: event.clientY + 'px', height: -pos.y + 'px'});
-                    } else if ( pos.x >= 0 && pos.y <= 0) {
-                        marquee.css({left: mousedowncoords.x + 'px',width: pos.x + 'px', top: event.clientY, height: -pos.y + 'px'});
-                    } else if (pos.x >= 0 && pos.y >= 0) {
-                        marquee.css({left: mousedowncoords.x + 'px', width: pos.x + 'px', height: pos.y + 'px', top: mousedowncoords.y + 'px'});
-                    } else if (pos.x < 0 && pos.y >= 0) {
-                        marquee.css({left: event.clientX + 'px', width: -pos.x + 'px', height: pos.y + 'px', top: mousedowncoords.y + 'px'});
-                    }
-                    
-                    var selectedCubes = findCubesByVertices({x: event.clientX, y: event.clientY});
-                    
-                    demo.setup.highlight(selectedCubes);
-        
-                }
-            },
-
-            findCubesByVertices: function(location){
-                var currentMouse = {},
-                    mouseInitialDown = {},
-                    units,
-                    bounds,
-                    inside = false,
-                    selectedUnits = [],
-                    dupeCheck = {};
-                
-                currentMouse.x = location.x;
-                currentMouse.y = location.y;
-                
-                mouseInitialDown.x = (mousedowncoords.x - offset.x);
-                mouseInitialDown.y = (mousedowncoords.y - offset.y);
-                
-                units = getUnitVertCoordinates();
-                bounds = findBounds(currentMouse, mousedowncoords);
-                
-                for(var i = 0; i < units.length; i++) {
-                    inside = withinBounds(units[i].pos, bounds);
-                    if(inside && (dupeCheck[units[i].id] === undefined)){
-                        selectedUnits.push(units[i]);
-                        dupeCheck[units[i].name] = true;
-                    }
-                }
-                
-                return selectedUnits;
-            },
-
-            // takes the mouse up and mouse down positions and calculates an origin
-            // and delta for the square.
-            // this is compared to the unprojected XY centroids of the cubes.
-            findBounds: function(pos1, pos2) {
-                
-                // calculating the origin and vector.
-                var origin = {},
-                    delta = {};
-                
-                if (pos1.y < pos2.y) {
-                    origin.y = pos1.y;
-                    delta.y = pos2.y - pos1.y;
-                } else {
-                    origin.y = pos2.y;
-                    delta.y = pos1.y - pos2.y;
-                }
-                
-                if(pos1.x < pos2.x) {
-                    origin.x = pos1.x;
-                    delta.x = pos2.x - pos1.x;
-                } else {
-                    origin.x = pos2.x;
-                    delta.x = pos1.x - pos2.x;
-                }
-                return ({origin: origin, delta: delta});
-            },
-
-
-            // Takes a position and detect if it is within delta of the origin defined by findBounds ({origin, delta})
-            withinBounds: function(pos, bounds) {
-                
-                var ox = bounds.origin.x,
-                    dx = bounds.origin.x + bounds.delta.x,
-                    oy = bounds.origin.y,
-                    dy = bounds.origin.y + bounds.delta.y;
-                
-                if((pos.x >= ox) && (pos.x <= dx)) {
-                    if((pos.y >= oy) && (pos.y <= dy)) {
-                        return true;
-                    }
-                }
-                
-                return false;
-            },
-
-            getUnitVertCoordinates: function(threeJsContext) {
-                
-                var units = [],
-                    verts = [],
-                    child,
-                    prevChild,
-                    unit,
-                    vector,
-                    pos,
-                    temp,
-                    i, q;
-                
-                for(i = 0; i < demo.collisions.length; i++) {
-                    child = demo.collisions[i];
-                    child.updateMatrixWorld();
-                    
-                    verts = [
-                        child.geometry.vertices[0],
-                        child.geometry.vertices[1],
-                        child.geometry.vertices[2],
-                        child.geometry.vertices[3],
-                        child.geometry.vertices[4],
-                        child.geometry.vertices[5],
-                        child.geometry.vertices[6],
-                        child.geometry.vertices[7]
-                    ];
-                    
-                    for(q = 0; q < verts.length; q++) {
-                        vector = verts[q].clone();
-                        vector.applyMatrix4(child.matrixWorld);
-                        unit = {};
-                        unit.id = child.id;
-                        unit.mesh = child;
-                        unit.pos = toScreenXY(vector);;
-                        units.push(unit);
-                    }
-                }
-                return units;
-            },
-
-            toScreenXY: function(position) {
-                
-                var pos = position.clone();
-                var projScreenMat = new THREE.Matrix4();
-                projScreenMat.multiplyMatrices( demo.cameras.liveCam.projectionMatrix, demo.cameras.liveCam.matrixWorldInverse );
-                pos.applyProjection(projScreenMat);
-                
-                return { x: ( pos.x + 1 ) * demo.jqContainer.width() / 2 + demo.jqContainer.offset().left,
-                        y: ( - pos.y + 1) * demo.jqContainer.height() / 2 + demo.jqContainer.offset().top };
-            }
-        }
-        // end marquee object
-        */
     }
         
 });
@@ -4258,8 +3597,8 @@
 <body>
 
     <div id="com-chilipeppr-widget-3dviewer" class="panel panel-default" style="float:left;">
-        <div class="panel-heading well">
-            <div class="btn-toolbar pull-right" role="toolbar">
+        <div class="panel-heading">
+            <div class="btn-toolbar" role="toolbar">                
                 <div class="btn-group" data-style="padding-right:6px;">
                     <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-viewextents" data-container="body" data-toggle="popover" data-placement="auto" data-content="View extents of GCode object" data-trigger="hover" data-delay="800"> <span class="glyphicon glyphicon-eye-open"></span>
                     </button>
@@ -4285,18 +3624,9 @@
                         <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> <span class="caret" style="font-size:10px;margin-left: -2px;xmargin-right: -4px"></span></button>
                         <ul id="com-chilipeppr-widget-3dviewer-settings" class="dropdown-menu xdropdown-menu-right" role="menu">
                             <li role="presentation" class="dropdown-header">Options</li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-shadows" href="javascript:">Toggle Toolhead Shadow On/Off</a></li>
-                            <li role="presentation" class="divider"></li>
-                            <li role="presentation" class="dropdown-header">Frame Rate of Rendering</li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-5" href="javascript:">5 fps (Least CPU Usage)</a></li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-10" href="javascript:">10 fps</a></li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-15" href="javascript:">15 fps</a></li>
-                            <li><a class="alert-info com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-30" href="javascript:">30 fps (Default)</a></li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-60" href="javascript:">60 fps (Most CPU Usage)</a></li>
-                            <li role="presentation" class="divider"></li>
-                            <li role="presentation" class="dropdown-header">For Super Slow Machines</li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-0" href="javascript:">Disable 3D Viewer (No CPU Usage)</a></li>
-
+                            <li><a class="com-chilipeppr-widget-3dviewer-settings-aa" href="javascript:">Anti Aliasing</a></li>
+                            <li><a class="com-chilipeppr-widget-3dviewer-settings-shadows" href="javascript:">Toolhead Shadow</a></li>
+                            <li><a class="com-chilipeppr-widget-3dviewer-settings-animation" href="javascript:">Smooth Animation</a></li>                            
                         </ul>
                     </div>
                 </div>
@@ -4317,12 +3647,11 @@
                         <li><a class="com-chilipeppr-widget-3d-menu-samplerun" href="javascript:">Play Sample Run</a></li>
                     </ul>
                 </div>
-                <div class="btn-group" style="position:relative;font-size:9px;line-height:22px;">
-                    <div style="position:absolute;top:-1px;left:28px;border:0px solid red;line-height:10px;" class="com-chilipeppr-widget-3dviewer-units-indicator">-</div>
-                    <div style="position:absolute;top:5px;left:28px;border:0px solid red;" class="frames-per-sec">32&nbsp;fps</div>
+                <div class="btn-group" style="position:relative;font-size:9px;line-height:16px;margin-top:-5px;margin-left:30px">
+                    <div class="com-chilipeppr-widget-3dviewer-units-indicator">-</div>
+                    <div class="frames-per-sec"></div>
                 </div>
             </div>
-            <span class="panel-title" style="padding-right:10px;" data-toggle="popover" data-trigger="hover" data-placement="auto" data-content="">3D&nbsp;Viewer</span>
             <div style="xposition:absolute;bottom:-18px;left:0px;border:0px solid red;line-height:10px;" class="com-chilipeppr-widget-3dviewer-panzoom-indicator">Pan: Right-Click Drag, Zoom: Mousewheel/Touchpad Scroll, Orbit: Mouse/Touch Drag</div>
         </div>
         <div id="com-chilipeppr-widget-3dviewer-body" class="panel-body">
@@ -4352,9 +3681,9 @@
                             <td class="inspect-gcode"></td>
                         </tr>
                         <!-- <tr class="">
-                        <td class="">Start</td>
-                        <td class="inspect-start"></td>
-                    </tr> -->
+                            <td class="">Start</td>
+                            <td class="inspect-start"></td>
+                        </tr> -->
                         <tr class="">
                             <td class="">End Pos</td>
                             <td class="inspect-end"></td>
@@ -4377,16 +3706,32 @@
                         </tr>
                     </tbody>
                 </table>
-
             </div>
             <div id="warningArea">
                 <div class="alert alert-warning alert-dismissable hidden">
-                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>G2/G3 arcs only rendered as straight lines. They are yellow to show where actual positioning in your CNC will differ from 3D rendering. If anyone wants to fork and fix arcs, feel free.</div>
-
+                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>G2/G3 arcs only rendered as straight lines. They are yellow to show where actual positioning in your CNC will differ from 3D rendering. If anyone wants to fork and fix arcs, feel free.
+                </div>
             </div>
         </div>
     </div>
-
+    
+    <!-- Modal for Out of Local Storage -->
+    <div id="com-chilipeppr-widget-3dviewer-aa-notice" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="aa-notice-modal" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                    <h4 class="modal-title" id="myModalLabel">Page Reload Required</h4>
+                </div>
+                <div class="modal-body">
+                    <p>You need to reload the page for the anti-alias change to take effect.</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    
     <!-- Modal for Out of Local Storage -->
     <div id="com-chilipeppr-widget-3dviewer-outofspace" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
@@ -4407,15 +3752,7 @@ <h4 class="modal-title" id="myModalLabel">3D Viewer Out of Local Storage Space</
                 </div>
             </div>
         </div>
-        <script id="vertexShader" type="x-shader/x-vertex">
-            uniform vec3 viewVector; uniform float c; uniform float p; varying float intensity; void main() { vec3 vNormal = normalize( normalMatrix * normal ); vec3 vNormel = normalize( normalMatrix * viewVector ); intensity = pow( c - dot(vNormal, vNormel), p );
-            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
-        </script>
-
-        <!-- fragment shader a.k.a. pixel shader -->
-        <script id="fragmentShader" type="x-shader/x-vertex">
-            uniform vec3 glowColor; varying float intensity; void main() { vec3 glow = glowColor * intensity; gl_FragColor = vec4( glow, 1.0 ); }
-        </script>
+
     </div>
 
 </body>
diff --git a/widget.css b/widget.css
index beca450..c280fde 100644
--- a/widget.css
+++ b/widget.css
@@ -1,4 +1,8 @@
 /* CSS for ChiliPeppr Widget */
+#com-chilipeppr-widget-3dviewer {
+    width: 100%;
+}
+
 #com-chilipeppr-widget-3dviewer .panel-heading {
     z-index:1;
     position:relative;
@@ -15,20 +19,18 @@
 }
 
 #com-chilipeppr-widget-3dviewer-body {
-    /* height: 350px; */
+    height:85vh;
     padding:0;
-    margin:0;
+    margin: auto;
     position: relative;
     border:0px solid red;
-    background-color: blue;
 }
 #com-chilipeppr-widget-3dviewer-renderArea {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    background-color: #000000;
+    position: relative;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+    background-color: #eeeeee;
     /* z-index:0; */
 }
 #com-chilipeppr-widget-3dviewer .disabled .glyphicon {
diff --git a/widget.html b/widget.html
index db81643..3b1cefc 100644
--- a/widget.html
+++ b/widget.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 
     <!-- Customized version of require.js for ChiliPeppr. Please see require.js docs for how
-    ChiliPeppr's dependency system works as it's based on require.js. -->
+    ChiliPeppr's dependency system works as it's based on require.js. -->        
     <script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
 
     <!-- widget.css DON'T REMOVE -->
@@ -36,8 +36,8 @@
 <body>
 
     <div id="com-chilipeppr-widget-3dviewer" class="panel panel-default" style="float:left;">
-        <div class="panel-heading well">
-            <div class="btn-toolbar pull-right" role="toolbar">
+        <div class="panel-heading">
+            <div class="btn-toolbar" role="toolbar">                
                 <div class="btn-group" data-style="padding-right:6px;">
                     <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-viewextents" data-container="body" data-toggle="popover" data-placement="auto" data-content="View extents of GCode object" data-trigger="hover" data-delay="800"> <span class="glyphicon glyphicon-eye-open"></span>
                     </button>
@@ -63,18 +63,9 @@
                         <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> <span class="caret" style="font-size:10px;margin-left: -2px;xmargin-right: -4px"></span></button>
                         <ul id="com-chilipeppr-widget-3dviewer-settings" class="dropdown-menu xdropdown-menu-right" role="menu">
                             <li role="presentation" class="dropdown-header">Options</li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-shadows" href="javascript:">Toggle Toolhead Shadow On/Off</a></li>
-                            <li role="presentation" class="divider"></li>
-                            <li role="presentation" class="dropdown-header">Frame Rate of Rendering</li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-5" href="javascript:">5 fps (Least CPU Usage)</a></li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-10" href="javascript:">10 fps</a></li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-15" href="javascript:">15 fps</a></li>
-                            <li><a class="alert-info com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-30" href="javascript:">30 fps (Default)</a></li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-60" href="javascript:">60 fps (Most CPU Usage)</a></li>
-                            <li role="presentation" class="divider"></li>
-                            <li role="presentation" class="dropdown-header">For Super Slow Machines</li>
-                            <li><a class="com-chilipeppr-widget-3dviewer-settings-fr com-chilipeppr-widget-3dviewer-settings-fr-0" href="javascript:">Disable 3D Viewer (No CPU Usage)</a></li>
-
+                            <li><a class="com-chilipeppr-widget-3dviewer-settings-aa" href="javascript:">Anti Aliasing</a></li>
+                            <li><a class="com-chilipeppr-widget-3dviewer-settings-shadows" href="javascript:">Toolhead Shadow</a></li>
+                            <li><a class="com-chilipeppr-widget-3dviewer-settings-animation" href="javascript:">Smooth Animation</a></li>                            
                         </ul>
                     </div>
                 </div>
@@ -95,12 +86,11 @@
                         <li><a class="com-chilipeppr-widget-3d-menu-samplerun" href="javascript:">Play Sample Run</a></li>
                     </ul>
                 </div>
-                <div class="btn-group" style="position:relative;font-size:9px;line-height:22px;">
-                    <div style="position:absolute;top:-1px;left:28px;border:0px solid red;line-height:10px;" class="com-chilipeppr-widget-3dviewer-units-indicator">-</div>
-                    <div style="position:absolute;top:5px;left:28px;border:0px solid red;" class="frames-per-sec">32&nbsp;fps</div>
+                <div class="btn-group" style="position:relative;font-size:9px;line-height:16px;margin-top:-5px;margin-left:30px">
+                    <div class="com-chilipeppr-widget-3dviewer-units-indicator">-</div>
+                    <div class="frames-per-sec"></div>
                 </div>
             </div>
-            <span class="panel-title" style="padding-right:10px;" data-toggle="popover" data-trigger="hover" data-placement="auto" data-content="">3D&nbsp;Viewer</span>
             <div style="xposition:absolute;bottom:-18px;left:0px;border:0px solid red;line-height:10px;" class="com-chilipeppr-widget-3dviewer-panzoom-indicator">Pan: Right-Click Drag, Zoom: Mousewheel/Touchpad Scroll, Orbit: Mouse/Touch Drag</div>
         </div>
         <div id="com-chilipeppr-widget-3dviewer-body" class="panel-body">
@@ -130,9 +120,9 @@
                             <td class="inspect-gcode"></td>
                         </tr>
                         <!-- <tr class="">
-                        <td class="">Start</td>
-                        <td class="inspect-start"></td>
-                    </tr> -->
+                            <td class="">Start</td>
+                            <td class="inspect-start"></td>
+                        </tr> -->
                         <tr class="">
                             <td class="">End Pos</td>
                             <td class="inspect-end"></td>
@@ -155,16 +145,32 @@
                         </tr>
                     </tbody>
                 </table>
-
             </div>
             <div id="warningArea">
                 <div class="alert alert-warning alert-dismissable hidden">
-                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>G2/G3 arcs only rendered as straight lines. They are yellow to show where actual positioning in your CNC will differ from 3D rendering. If anyone wants to fork and fix arcs, feel free.</div>
-
+                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>G2/G3 arcs only rendered as straight lines. They are yellow to show where actual positioning in your CNC will differ from 3D rendering. If anyone wants to fork and fix arcs, feel free.
+                </div>
             </div>
         </div>
     </div>
-
+    
+    <!-- Modal for Out of Local Storage -->
+    <div id="com-chilipeppr-widget-3dviewer-aa-notice" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="aa-notice-modal" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                    <h4 class="modal-title" id="myModalLabel">Page Reload Required</h4>
+                </div>
+                <div class="modal-body">
+                    <p>You need to reload the page for the anti-alias change to take effect.</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    
     <!-- Modal for Out of Local Storage -->
     <div id="com-chilipeppr-widget-3dviewer-outofspace" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
@@ -185,15 +191,7 @@ <h4 class="modal-title" id="myModalLabel">3D Viewer Out of Local Storage Space</
                 </div>
             </div>
         </div>
-        <script id="vertexShader" type="x-shader/x-vertex">
-            uniform vec3 viewVector; uniform float c; uniform float p; varying float intensity; void main() { vec3 vNormal = normalize( normalMatrix * normal ); vec3 vNormel = normalize( normalMatrix * viewVector ); intensity = pow( c - dot(vNormal, vNormel), p );
-            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
-        </script>
 
-        <!-- fragment shader a.k.a. pixel shader -->
-        <script id="fragmentShader" type="x-shader/x-vertex">
-            uniform vec3 glowColor; varying float intensity; void main() { vec3 glow = glowColor * intensity; gl_FragColor = vec4( glow, 1.0 ); }
-        </script>
     </div>
 
 </body>
diff --git a/widget.js b/widget.js
index 5a450a5..1a13975 100644
--- a/widget.js
+++ b/widget.js
@@ -2,43 +2,28 @@
 // Defining the globals above helps Cloud9 not show warnings for those variables
 
 // ChiliPeppr Widget/Element Javascript
-
 requirejs.config({
     paths: {
-        //Three: '//i2dcui.appspot.com/geturl?url=http://threejs.org/build/three.min.js',
-        // Keep in mind that the /slingshot url does the same as /geturl but it is not cached
-        // Three: '//i2dcui.appspot.com/slingshot?url=http://threejs.org/build/three.min.js',
-        // Three: '//i2dcui.appspot.com/geturl?url=http://threejs.org/build/three.js',
-        Three: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three',
-        ThreeTextGeometry: '//i2dcui.appspot.com/js/three/TextGeometry',
-        ThreeFontUtils: '//i2dcui.appspot.com/js/three/FontUtils',
-        ThreeDetector: '//i2dcui.appspot.com/geturl?url=http://threejs.org/examples/js/Detector.js',
-        //ThreeTrackballControls: '//i2dcui.appspot.com/geturl?url=http://threejs.org/examples/js/controls/TrackballControls.js',
-        // Latest release
-        // ThreeTrackballControls: '//i2dcui.appspot.com/slingshot?url=http://threejs.org/examples/js/controls/TrackballControls.js',
-        // r79 (to solve that mousewheel zoom started not working in r80, so had to force to older version. eventually they'll fix the bug cuz i filed it)
-        // ThreeTrackballControls: '//i2dcui.appspot.com/slingshot?url=http://rawgit.com/mrdoob/three.js/r79/examples/js/controls/TrackballControls.js',
-        ThreeTrackballControls: '//i2dcui.appspot.com/geturl?url=http://rawgit.com/mrdoob/three.js/r79/examples/js/controls/TrackballControls.js',
-        ThreeOrbitControls: '//threejs.org/examples/js/controls/OrbitControls',
-        ThreeHelvetiker: '//i2dcui.appspot.com/js/three/threehelvetiker',
-        ThreeTypeface: 'https://superi.googlecode.com/svn-history/r1953/trunk/MBrand/MBrand/Scripts/typeface-0.15',
-        ThreeTween: '//i2dcui.appspot.com/js/three/tween.min',
-        ThreeBufferGeometryUtils: '//i2dcui.appspot.com/js/three/BufferGeometryUtils',
-        ThreeCanvasRenderer: '//i2dcui.appspot.com/geturl?url=http://threejs.org/examples/js/renderers/CanvasRenderer.js',
-        ThreeProjector: '//i2dcui.appspot.com/geturl?url=http://threejs.org/examples/js/renderers/Projector.js',
+        Three: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three',
+        
+        ThreeTrackballControls: 'https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls',
+        ThreeTween: 'https://cdn.rawgit.com/tweenjs/tween.js/master/src/Tween',
+        
+        ThreeProjector: 'https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/renderers/Projector',
     },
     shim: {
-        ThreeTextGeometry: ['Three'],
-        ThreeFontUtils: ['Three', 'ThreeTextGeometry'],
-        ThreeHelvetiker: ['Three', 'ThreeTextGeometry', 'ThreeFontUtils'],
-        //ThreeHelvetiker: ['Three', 'ThreeTextGeometry'],
-        ThreeTrackballControls: ['Three'],
-        ThreeTween: ['Three'],
-        ThreeSparks: ['Three'],
-        ThreeParticle: ['Three'],
-        ThreeBufferGeometryUtils: ['Three'],
-        ThreeCanvasRenderer: ['Three', 'ThreeProjector'],
-        ThreeProjector: ['Three']
+        Three: {
+            exports: 'THREE'
+        },
+        ThreeTrackballControls: {
+            deps: ['Three'],
+        },
+        ThreeTween: {
+            deps: ['Three'],
+        },
+        ThreeProjector: {
+            deps: ['Three'],
+        },
     }
 });
 
@@ -83,7 +68,6 @@ cprequire_test(['inline:com-chilipeppr-widget-3dviewer'], function (threed) {
     function () {
         console.log("mycallback got called after loading flash msg module");
         cprequire(["inline:com-chilipeppr-elem-flashmsg"], function (fm) {
-            //console.log("inside require of " + fm.id);
             fm.init();
         });
     });
@@ -141,7 +125,15 @@ cprequire_test(['inline:com-chilipeppr-widget-3dviewer'], function (threed) {
     console.log("3d viewer initted");
 } /*end_test*/ );
 
-cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three', 'ThreeDetector', 'ThreeTrackballControls', 'ThreeTween', 'ThreeHelvetiker', 'ThreeBufferGeometryUtils'], function () {
+// Bring THREE in to global scope
+cpdefine('Three', ['https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js'], function ( THREE ) {
+    if (typeof window !== 'undefined') {
+        window.THREE = THREE;
+        return THREE;
+    }
+});
+
+cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three', 'ThreeTrackballControls', 'ThreeTween', 'ThreeProjector'], function () {
 
     return {
 
@@ -178,47 +170,117 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
         },
         foreignPublish: {
         },
+        
+        // Variables and states
+        initOptions: {},
+        
+        onSignalSceneReloadedFailAttempts: 0, // track failed nulls
+        
+        domElement: null,
         scene: null,
         object: null,
         camera: null,
         controls: null,
         toolhead: null,
+        decorate: null, // stores the decoration 3d objects
+        shadowplane: null, // where the toolhead shadow is rendered
+        grid: null, // stores grid
+        axes: null, // global property to store axes that we drew
+        element: null, // scene element
+        
+        parsedLines: [],
+        lineObjects: [],
+        
+        sceneCenter: null,
+        sceneBoundaries: null,
+        
+        isUnitsMm: true, // true for mm, false for inches
+        
+        
+        // animation state
+        animationLatencyTimer: null,
+        animationLatencyDelay: 32,
+        animationLatencyDelayDefault: 32,
+        
+        inspectLatencyTimer: null,
+        inspectLatencyDelay: 200,
+        
+        jogLatencyTimer: null,
+        jogLatencyDelay: 200,
+        
+        moveAnimate: false,
+        gotoAnimate: false,
+        tweenAnimate: false,
+        inspectAnimate: false,
+        
+        // render state & fps tracking
+        fpsCalculationTimer: null,
+        renderFrameCount: 0, // keep track of fps
+        
         tween: null,
         tweenHighlight: null,
         tweenIndex: null,
         tweenSpeed: 1,
         tweenPaused: false,
         tweenIsPlaying: false,
-        wantAnimate: true, // we automatically timeout rendering to save on cpu
-        initOptions: {},
+        
+        
+        zheighttest: 0, // test toolhead going up in z
+        textFont: false, // three.js font object
+        
+        isInspectSelect: false,
+        inspectArrowGrp: null,
+        inspectCurPos: null,
+        inspectLastObj: {uuid:""},
+        inspectLastDecorateGroup: null,
+        inspectDlgEl: null,
+        
+        isJogBtnAttached: false, // is the jog btn setup?
+        isJogSelect: false, // indicates we're in 3d jog mode
+        arrowHelper: null,
+        jogPlane: null,
+        isJogRaycaster: false,
+        jogArrow: null,
+        jogArrowCyl: null,
+        jogArrowLine: null,
+        jogArrowShadow: null,
+        jogCurPos: null,
+        
+        // basic properties
+        colorBackground: 0xeeeeee, // this is the background color of the 3d viewer
+        colorG0: 0x00ff00,
+        colorG1: 0x0000ff,
+        colorG2: 0x999900,
+        colorArc: 0x0099ff,
+        colorActive: 0xff00ff,
+        colorCompleted: 0x000000,
+        colorGhosted: 0x000000,
+        lineWidth: 1,
+        
+        // options
+        disableAnimation: false, // boolean tracking whether we allow animation
+        
+        disableAA: false,
+        showShadow: true,
+        
+        gridSize: 1, // global property for size of grid. default to 1 (shapeoko rough size)
+        isLookAtToolHeadMode: false,
+        
+        
         init: function (initOptions) {
             this.initOptions = initOptions;
+            
             var that = this;
-            /*
-            if (!Modernizr.webgl) {
-                alert('Sorry, you need a WebGL capable browser to use this.\n\nGet the latest Chrome or FireFox.');
-                return;
-            }
-
-            if (!Modernizr.localstorage) {
-                alert("Man, your browser is ancient. I can't work with this. Please upgrade.");
-                return;
-            }
-            */
-
-            // Show 'About' dialog for first time visits.
-            /*
-            if (!localStorage.getItem("not-first-visit")) {
-                localStorage.setItem("not-first-visit", true);
-                setTimeout(about, 500);
-            }
-            */
-
+            
+            // download the font we'll use to render text
+            this.downloadFont();
+            
             // Drop files from desktop onto main page to import them.
             // We also can subscribe to the main chilipeppr drag/drop
             // pubsub to get drop events from a parent, rather than doing
             // this on our own
             
+            
             // subscribe to file load events
             chilipeppr.subscribe("/com-chilipeppr-elem-dragdrop/ondropped", this, this.onPubSubFileLoaded);
             
@@ -235,45 +297,55 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     var files = event.originalEvent.dataTransfer.files;
                     if (files.length > 0) {
                         var reader = new FileReader();
+                        
                         reader.onload = function () {
                             console.log("opening file. reader:", reader);
-                            console.log ("stringify", JSON.stringify(reader.result, null, 2) );
+                            console.log ("stringify", JSON.stringify(reader.result, null, 2));
                             that.openGCodeFromText(reader.result);
                         };
+                        
                         reader.readAsText(files[0]);
-                        // reader.readAsArrayBuffer(files[0]);
                     }
                 });
             }
             
-            that.scene = that.createScene($('#com-chilipeppr-widget-3dviewer-renderArea'));
+            
+            // Load existing state/options from localStorage
+            this.disableAA = (localStorage.getItem('disable-aa') == 'true') ? true : false;
+            this.showShadow = (localStorage.getItem('toolhead-shadow') == 'true' ? true : false);
+            this.disableAnimation = (localStorage.getItem('disable-animation') == 'true' ? true : false);
+                        
+            // setup the scene and attempt to load the last object
+            
+            this.domElement = $('#com-chilipeppr-widget-3dviewer-renderArea');
+            this.scene = this.createScene(this.domElement);
+            
+            // TODO: maybe we dont do this, instead have the gcode widget tell us what we should do, maybe we just show the chilipeppr logo regardless.
             var lastImported = localStorage.getItem('last-imported');
             var lastLoaded = localStorage.getItem('last-loaded');
             if (lastImported) {
-                that.openGCodeFromText(lastImported);
+                this.openGCodeFromText(lastImported);
             } else {
-                //console.log("would have opened octocat");
-                //that.openGCodeFromPath(lastLoaded || 'examples/octocat.gcode');
-                console.log("loading chilipeppr logo");
-                that.openGCodeFromPath(lastLoaded || 'http://www.chilipeppr.com/3d/chilipepprlogo.nc');
+                this.openGCodeFromPath(lastLoaded || 'http://www.chilipeppr.com/3d/chilipepprlogo.nc');
             }
             
-            var lastFpsRate = localStorage.getItem ('fpsRate');
-            if (lastFpsRate) {
-                console.log("got prior FPS Rate, setting it now:  ", lastFpsRate, "//rk");
-                //this.setFrameRate(parseInt(lastFpsRate) );
-                var fr = parseInt(lastFpsRate);
-                this.setFrameRate(fr);
-                // set css to show selected
-                $('.com-chilipeppr-widget-3dviewer-settings-fr').removeClass('alert-info');
-                $('.com-chilipeppr-widget-3dviewer-settings-fr-' + fr).addClass('alert-info');
-            }
-
-            // setup toolbar buttons
+            
+            // setup toolbar buttons and menu state
             this.btnSetup();
+            this.setupCogMenu();
+            this.setCogMenuState();
+            this.setupGridSizeMenu();
+            
+            this.initJog();
+            this.initInspect();
             
+            
+            // Download and attach the Fork Widget elements in the dropdown
             this.forkSetup();
-            //this.setDetails("blah");
+            
+            // draw our workspace            
+            this.drawAxesToolAndExtents()
+            
             
             // subscribe to gotoline signal so we can move toolhead to correct location
             // to sync with the gcode sender
@@ -292,13 +364,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             // setup more pubsub to allow other widgets to inject objects to our scene
             this.setupScenePubSub();
             
-            this.setupGridSizeMenu();
-            
-            this.setupCogMenu();
-            this.setupFpsMenu();
-            this.initJog(); //this.setupJog();
-            this.initInspect();
-            
             // hide the pan/zoom/orbit msg after 1 minute
             setTimeout(function() {
                 console.log("hiding pan/zoom/orbit msg");
@@ -308,7 +373,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
         },
         setupScenePubSub: function() {
             // these pubsubs let others add objects to our 3d scene
-            chilipeppr.subscribe("/" + this.id + "/wakeanimate", this, this.wakeAnimate);
+            // TODO: wakeAnimate change
+            chilipeppr.subscribe("/" + this.id + "/wakeanimate", this, this.animate);
             chilipeppr.subscribe("/" + this.id + "/sceneadd", this, this.sceneAdd);
             chilipeppr.subscribe("/" + this.id + "/sceneremove", this, this.sceneRemove);
             chilipeppr.subscribe("/" + this.id + "/sceneclear", this, this.sceneClear);
@@ -318,13 +384,11 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             
             chilipeppr.subscribe("/" + this.id + "/request3dObject", this, this.request3dObject);
         },
-        onSignalSceneReloadedFailAttempts: 0, // track failed nulls
+
         onSignalSceneReloaded: function () {
-            // this can get called before there is userData, so check for that
-            // and if so, wait to publish until there is
-            if (this.object && this.object.userData && this.object.userData.bbbox2) {
+            if (this.object && this.sceneBoundaries != null) {
                 console.log("publishing /sceneReloaded. It took us X attempts:", this.onSignalSceneReloadedFailAttempts);
-                chilipeppr.publish("/" + this.id + "/sceneReloaded", this.object.userData.bbbox2);
+                chilipeppr.publish("/" + this.id + "/sceneReloaded", this.sceneBoundaries);
                 this.onSignalSceneReloadedFailAttempts = 0;
             } else {
                 // call ourselves again in 2 seconds
@@ -338,16 +402,16 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 }
             }
         },
-        // INSPECT CODE REGION
-        isInspectSelect: false,
+
         initInspect: function() {
             // attach click event
             console.log("doing one time run of initial inspect setup. this should not run more than once!!!");
             $('.com-chilipeppr-widget-3d-menu-inspect').click(this.toggleInspect.bind(this));
                 
             // attach shortcut key
-            var el = $('#com-chilipeppr-widget-3dviewer-renderArea');
+            var el = this.domElement;
             el.focus();
+            
             $(document).keydown(this.inspectKeyDown.bind(this));
             $(document).keyup(this.inspectKeyUp.bind(this));
             
@@ -368,24 +432,22 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             
         },
         setupInspect: function(evt) {
-            
             console.log("setupInspect.");
+            
             if (this.isInspectSelect) {
                 console.log("we are already in inspect mode. being asked to setup, but returning cuz u can't setup more than once.");
                 return;
             }
             
             // start watching mouse
-            var el = $(this.renderer.domElement);
+            var el = this.domElement;
             el.mousemove(this.inspectMouseMove.bind(this));
             el.click(this.inspectMouseClick.bind(this));
             $('.com-chilipeppr-widget-3d-menu-inspect').addClass("active");
             $('.com-chilipeppr-widget-3d-menu-inspect').addClass("btn-primary");
-            // make sure animation stays on
-            //this.gotoXyz({x:0,y:0,z:3});
+            
             if (this.inspectArrowGrp != null) {
                 this.sceneAdd(this.inspectArrowGrp);
-                //this.inspectArrowGrp.visible = true;
             }
             
             this.sceneAdd(this.inspectPreviewGroup);
@@ -394,21 +456,27 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
         },
         unsetupInspect: function() {
             console.log("unsetupInspect");
+            
             if (!this.isInspectSelect) {
                 console.log("we are being asked to unsetup inspect, but it is not running so why are we getting called?");
                 return;
             }
             
-            var el = $(this.renderer.domElement);
+            var el = this.domElement;
             el.unbind("mousemove");
             el.unbind("click");
+            
             $('.com-chilipeppr-widget-3d-menu-inspect').removeClass("active");
             $('.com-chilipeppr-widget-3d-menu-inspect').removeClass("btn-primary");
             //this.unsetupJogRaycaster();
+            
             if (this.inspectArrowGrp != null) {
                 this.sceneRemove(this.inspectArrowGrp);
                 //this.inspectArrowGrp.visible = false;
             }
+            
+            //this.inspectDlgEl.addClass("hidden");
+            
             this.sceneRemove(this.inspectPreviewGroup);
             this.isInspectSelect = false;
         },
@@ -422,7 +490,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
         },
         inspectKeyDown: function(evt) {
             if ((evt.shiftKey)  && !this.isInspectSelect) {
-                this.wakeAnimate();
+                // TODO: wakeAnimate change
+                this.animate();
                 this.setupInspect(evt);
             }
         },
@@ -451,310 +520,272 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 chilipeppr.publish("/com-chilipeppr-widget-gcode/jumpToLine", lineNum);
             }
         },
-        inspectArrowGrp: null,
         createInspectArrow: function() {
-            
             if (this.inspectArrowGrp != null) return;
             
             // build pointer line
             this.inspectArrowGrp = new THREE.Group();
             
-            // draw dotted lines from jog tip and shadow
-            var lineMat = new THREE.LineDashedMaterial( { color: 0xff0000, dashSize: this.getUnitVal(1),  gapSize: this.getUnitVal(1), transparent: true, opacity: 0.5 } );
-            var lineGeo = new THREE.Geometry();
-            lineGeo.vertices.push(new THREE.Vector3( 0, 0, this.getUnitVal(-100) ));
-            lineGeo.vertices.push(new THREE.Vector3( 0, 0, this.getUnitVal(100) ));
-            var line = new THREE.Line(lineGeo, lineMat); //, THREE.LineStrip);
-            this.inspectArrowLine = line;
-            this.inspectArrowGrp.add(line);
+            // Looks better without the line
 
             this.sceneAdd(this.inspectArrowGrp);
             console.log("just added inspectArrowGrp:", this.inspectArrowGrp);
 
         },
-        inspectCurPos: null,
-        inspectLastObj: {uuid:""},
-        inspectLastDecorateGroup: null,
-        inspectDlgEl: null,
         inspectMouseMove: function(evt) {
-            
-            //event.preventDefault();
-            if (!this.isInspectSelect) {
+            if (!this.isInspectSelect || this.inspectLatencyTimer) {
                 return;
             }
             
-            this.createInspectArrow();
-            
-            this.wakeAnimate();
-            
-            console.log("inspectMouseMove. evt:", evt);
-            
             var mouse = {};
-            mouse.x = ( evt.clientX / window.innerWidth ) * 2 - 1;
-            mouse.y = - ( evt.clientY / window.innerHeight ) * 2 + 1;
+            mouse.x = ( ( event.clientX - this.domElement.offset().left ) / this.domElement.width() ) * 2 - 1;
+            mouse.y = - ( ( event.clientY - this.domElement.offset().top ) / this.domElement.height() ) * 2 + 1;
+            
+            // dialog position
+            var x = event.clientX - this.domElement.offset().left;
+            var y = event.clientY - this.domElement.offset().top;
             
-            var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( this.camera );
+            x += 50; // slide right to clear mouse
+            y += -100;
             
-            var origin = this.camera.position.clone();
-            var dir = vector.sub( this.camera.position ).normalize();
+            var that = this;
             
-            // set where arrow is pointing
-            //this.inspectArrowGrp.position.set(origin.x, origin.y, 0);
+            this.inspectLatencyTimer = setTimeout(function() {
+                that.createInspectArrow();
             
-            var raycaster = new THREE.Raycaster( origin, dir );
-            raycaster.linePrecision = 0.2;
-            //console.log("mouse:", mouse, "raycaster:", raycaster);
-            //console.log("inspecting object.children", this.object.children);
-            //var io = raycaster.intersectObjects(this.object.children, true);
-            var io = raycaster.intersectObjects(this.object.userData.threeObjs.children, true);
-            //console.log("io:", io);
+                var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( that.camera );
+        
+                var origin = that.camera.position.clone();
+                var dir = vector.sub( that.camera.position ).normalize();
+        
+                var raycaster = new THREE.Raycaster( origin, dir );
+                raycaster.linePrecision = 0.5;
+        
+                var io = raycaster.intersectObjects(that.lineObjects, true);
             
-            if (io.length > 0) {
-                // we hit some objects
-                var obj = io[0];
-                //console.log("obj:", obj);
+                if (io.length > 0) {
+                    // we hit some objects
+                    var obj = io[0];
                 
-                // see if this is a new object we haven't hit yet
-                if (this.inspectLastObj.uuid != obj.object.uuid) {
-                    
-                    var o = obj.object;
-                    var ud = o.userData;
-                    
-                    console.log("hit new object:", o);
-
-                    //this.inspectLastOpacity = o.material.opacity;
-                    
-                    // reset last object
-                    //console.log("testing for reset last object. this.inspectLastObj:", this.inspectLastObj);
+                    // see if this is a new object we haven't hit yet
+                    if (that.inspectLastObj.uuid != obj.object.uuid) {
                     
-                    // remove all previous preview items
-                    this.inspectPreviewGroup.children.forEach(function(threeObj) {
-                        this.inspectPreviewGroup.remove(threeObj);
-                    }, this);
+                        var o = obj.object;
+                        var ud = o.userData;
                     
-                    if (this.inspectLastObj.uuid != "") {
-                        //this.inspectPreviewGroup(
-                        //this.sceneRemove(this.inspectLastObj);
-                        //this.inspectLastObj.material.opacity = this.inspectLastOpacity;
-                        //this.inspectLastObj.material.color = 0x0000ff;
-                    }
+                        console.log("hit new object:", o, ud);
                     
-                    // set the current object to new opacity
-                    //o.material.opacity = 1.0;
-                    //o.material.color = 0xff0000;
-                    //this.sceneAdd(o);
-                    // create glow
-                    var glow = this.createGlow(o);
-                    this.inspectPreviewGroup.add(glow);
+                        // remove all previous preview items
+                        that.inspectPreviewGroup.children.forEach(function(threeObj) {
+                            that.inspectPreviewGroup.remove(threeObj);
+                        }, that);
                     
-                    // show dialog
-                    var x = event.clientX;
-                    var y = event.clientY;
-                    x += 30; // slide right to clear mouse
-                    y += -140;
-                    this.inspectDlgEl.css('left', x + "px").css('top', y + "px");
-                    this.inspectDlgEl.find('.inspect-line').text(ud.args.indx + 1);
-                    this.inspectDlgEl.find('.inspect-gcode').text(ud.args.origtext);
-                    this.inspectDlgEl.find('.inspect-end').text("X:" + ud.p2.x + ", Y:" + ud.p2.y + ", Z:" + ud.p2.z);
-                    this.inspectDlgEl.find('.inspect-feedrate').text(ud.p2.feedrate);
-                    this.inspectDlgEl.find('.inspect-distance').text(ud.p2.dist.toFixed(3));
-                    this.inspectDlgEl.find('.inspect-time').text((ud.p2.timeMins * 60).toFixed(2) + "s");
-                    var pretty = this.convertMinsToPrettyDuration(ud.p2.timeMinsSum);
-                    this.inspectDlgEl.find('.inspect-timeSum').text(pretty);
-                    this.inspectDlgEl.removeClass("hidden");
+                        // create glow
+                        var glow = that.createGlow(o);
+                        that.inspectPreviewGroup.add(glow);
                     
-                    // set the last object to this one
-                    this.inspectLastObj = o;
+                        that.inspectDlgEl.css('left', x + "px").css('top', y + "px");
+                        that.inspectDlgEl.find('.inspect-line').text(ud.args.indx + 1);
+                        that.inspectDlgEl.find('.inspect-gcode').text(ud.args.origtext);
+                        that.inspectDlgEl.find('.inspect-end').text("X:" + ud.p2.x + ", Y:" + ud.p2.y + ", Z:" + ud.p2.z);
+                        that.inspectDlgEl.find('.inspect-feedrate').text(ud.p2.feedrate);
+                        that.inspectDlgEl.find('.inspect-distance').text(ud.p2.dist.toFixed(3));
+                        that.inspectDlgEl.find('.inspect-time').text((ud.p2.timeMins * 60).toFixed(2) + "s");
                     
-                    // remove any previous
-                    /*
-                    var that = this;
-                    this.inspectLastDecorateGroup.traverse(function(o) {
-                        that.inspectLastDecorateGroup.remove(o);
-                    });
+                        var pretty = that.convertMinsToPrettyDuration(ud.p2.timeMinsSum);
+                        that.inspectDlgEl.find('.inspect-timeSum').text(pretty);
+                        that.inspectDlgEl.removeClass("hidden");
                     
+                        // set the last object to this one
+                        that.inspectLastObj = o;
+                    }
+                
+                    var pt = io[0].point;
+                    // move arrow
+                    that.inspectArrowGrp.position.set(pt.x, pt.y, 0);
+                    that.inspectCurPos = pt.clone();
                 
+                
+                } else if (false) {
+                    console.log("nothing hit. resetting inspectLastObj:", that.inspectLastObj);
+                    if (that.inspectLastObj.uuid != "") {
                     
-                    // draw a bounding box
-                    var bbox = new THREE.BoundingBoxHelper( o, 0xff0000 );
-                    bbox.update();
-                    bbox.object.material.opacity = 0.1;
-                    bbox.object.material.transparent = true;
-                    bbox.material.opacity = 0.1;
-                    bbox.material.transparent = true;
-                    console.log("bbox:", bbox);
-                    //this.sceneAdd( bbox );
-                    this.inspectLastDecorateGroup.add(bbox);
-                    */
+                        // remove everything from this.inspectPreviewGroup
+                        that.inspectPreviewGroup.children.forEach(function(threeObj) {
+                            that.inspectPreviewGroup.remove(threeObj);
+                        }, that);
+                        
+                        //that.sceneRemove(this.inspectLastObj);
+                        that.inspectLastObj.material.color = 0x0000ff;
+                        that.inspectLastObj.material.opacity = this.inspectLastOpacity;
+                        that.inspectLastObj = {uuid:""};
+                        
+                        // hide dialog
+                        that.inspectDlgEl.addClass("hidden");
+                    }
+                }
+            
+                that.inspectAnimate = true;
+                that.animate();
+                that.inspectAnimate = false;
+                
+                that.inspectLatencyTimer = null;
+            }, this.inspectLatencyDelay);
+            
+        },
+        
+        createGlow: function(threeObj) {
+            console.log("createGlow. threeObj:", threeObj);
+            
+            var obj = new THREE.Group();
+            if (threeObj instanceof THREE.Line) {
+                if (!(threeObj.geometry instanceof THREE.BufferGeometry)) {
+                    console.log('nope');
+                    return;
+                }
+                
+                try {
+                    console.log('createGlow geometry:', threeObj.geometry);
                     
-                    // clone it, make it pretty
-                    /*
-                    var newObj = obj.object.clone();
-                    newObj.material.opacity = 1.0;
+                    var objGeometry = new THREE.Geometry().fromBufferGeometry(threeObj.geometry);              
                     
-                    this.inspectLastDecorateGroup.add(newObj);
-                    */
+                    // draw a cube at each end point
+                    var v1 = objGeometry.vertices[0];
+                    var v2 = objGeometry.vertices[objGeometry.vertices.length - 1];
                     
-                }
-                
+                    var length = v1.distanceTo(v2);
+                    var dir = v2.clone().sub(v1).normalize();
+                    var ray = new THREE.Ray(v1, dir);
                 
-                //io[0].object.material.opacity = 1.0;
+                    var geometry = new THREE.CylinderGeometry( 1, 1, length );
+                    var material = new THREE.MeshNormalMaterial( {
+                        //color: 0x00ff00,
+                        transparent: true,
+                        opacity: 0.1
+                    } );
                 
-                var pt = io[0].point;
-                // move arrow
-                this.inspectArrowGrp.position.set(pt.x, pt.y, 0);
-                this.inspectCurPos = pt.clone();
+                    var cylinder = new THREE.Mesh( geometry, material );
                 
+                    // figure out rotation
+                    var arrow = new THREE.ArrowHelper( dir, v1, length, 0xff0000 );
+                    obj.add(arrow);
                 
-            } else if (false) {
+                    var rot = arrow.rotation.clone()
+                    cylinder.rotation.set(rot.x, rot.y, rot.z);
                 
-                // nothing was hit, reset last obj
-                // reset last object
-                console.log("nothing hit. resetting inspectLastObj:", this.inspectLastObj);
-                if (this.inspectLastObj.uuid != "") {
+                    var cpos = ray.at(length/2);
+                    cylinder.position.set(cpos.x, cpos.y, cpos.z);
+
+                    console.log("adding cylinder:", cylinder);
+                    obj.add(cylinder);
                     
-                    // remove everything from this.inspectPreviewGroup
-                    this.inspectPreviewGroup.children.forEach(function(threeObj) {
-                        this.inspectPreviewGroup.remove(threeObj);
-                    }, this);
-                    //this.sceneRemove(this.inspectLastObj);
-                    this.inspectLastObj.material.color = 0x0000ff;
-                    this.inspectLastObj.material.opacity = this.inspectLastOpacity;
-                    this.inspectLastObj = {uuid:""};
-                    // hide dialog
-                    this.inspectDlgEl.addClass("hidden");
+                } catch(err) {
+                    // this is because threejs has a bug, or sloppy code in regards to fromBufferGeometry
+                    console.log('createGlow error', err, threeObj.geometry);
                 }
-            }
-        },
-        createGlow: function(threeObj) {
-            console.log("createGlow. threeObj:", threeObj);
-            var obj = new THREE.Group();
-            if (threeObj instanceof THREE.Line) {
-                console.log("threeObj is Line");
-                // draw a cube at each end point
-                var v1 = threeObj.geometry.vertices[0];
-                var v2 = threeObj.geometry.vertices[threeObj.geometry.vertices.length - 1];
-                var uv1 = v1.clone();
-                var uv2 = v2.clone();
-                var length = v1.distanceTo(v2);
-                var dir = v2.clone().sub(v1).normalize();
-                var ray = new THREE.Ray(v1, dir);
-                var geometry = new THREE.CylinderGeometry( 1, 1, length );
-                var material = new THREE.MeshNormalMaterial( {
-                    //color: 0x00ff00,
-                    transparent: true,
-                    opacity: 0.1
-                } );
-                var cylinder = new THREE.Mesh( geometry, material );
-                // figure out rotation
-                var arrow = new THREE.ArrowHelper( dir, v1, length, 0xff0000 );
-                obj.add(arrow);
-                //uv2.sub(uv1);
-                /*uv1.normalize();
-                uv2.normalize();
-                var quaternion = new THREE.Quaternion().setFromUnitVectors( uv1, uv2 );
-                var matrix = new THREE.Matrix4().makeRotationFromQuaternion( quaternion );
-                cylinder.applyMatrix( matrix );*/
-                var rot = arrow.rotation.clone()
-                cylinder.rotation.set(rot.x, rot.y, rot.z);
-                var cpos = ray.at(length/2);
-                cylinder.position.set(cpos.x, cpos.y, cpos.z);
-
-                console.log("adding cylinder:", cylinder);
-                obj.add(cylinder);
+                
             } else {
                 console.log("threeObj not Line");
-                //return 
             }
+            
             return obj;
         },
         createGlowCubeCaps: function(threeObj) {
             console.log("createGlow. threeObj:", threeObj);
+            
             var obj = new THREE.Group();
             if (threeObj instanceof THREE.Line) {
+                if (!(threeObj.geometry instanceof THREE.BufferGeometry)) {
+                    return;
+                }
+                
                 console.log("threeObj is Line");
-                // draw a cube at each end point
-                var v1 = threeObj.geometry.vertices[0];
-                var v2 = threeObj.geometry.vertices[threeObj.geometry.vertices.length - 1];
-                var geometry = new THREE.BoxGeometry( 1, 1, 1 );
-                var material = new THREE.MeshNormalMaterial( {
-                    //color: 0x00ff00,
-                    transparent: true,
-                    opacity: 0.1
-                } );
-                var cube = new THREE.Mesh( geometry, material );
-                cube.position.set(v1.x, v1.y, v1.z);
-                var cube2 = cube.clone();
-                cube2.position.set(v2.x, v2.y, v2.z);
-                //this.sceneAdd( cube );
-                console.log("adding cube:", cube, "cube2:", cube2);
-                obj.add(cube);
-                obj.add(cube2);
-                //return cube;
+                try {
+                    var objGeometry = new THREE.Geometry().fromBufferGeometry(threeObj.geometry);
+                          
+                    // draw a cube at each end point
+                    var v1 = objGeometry.vertices[0];
+                    var v2 = objGeometry.vertices[geometry.vertices.length - 1];
+                
+                    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
+                    var material = new THREE.MeshNormalMaterial( {
+                        //color: 0x00ff00,
+                        transparent: true,
+                        opacity: 0.1
+                    } );
+                
+                    var cube = new THREE.Mesh( geometry, material );
+                    cube.position.set(v1.x, v1.y, v1.z);
+                
+                    var cube2 = cube.clone();
+                    cube2.position.set(v2.x, v2.y, v2.z);
+                
+                    console.log("adding cube:", cube, "cube2:", cube2);
+                
+                    obj.add(cube);
+                    obj.add(cube2);
+                } catch(err) {
+                    // this is because threejs has a bug, or sloppy code in regards to fromBufferGeometry
+                    console.log('createGlowCubeCaps error', err, threeObj.geometry);
+                }
             } else {
                 console.log("threeObj not Line");
-                //return 
             }
+            
             return obj;
         },
         
 
         // JOG CODE REGION
-        isJogBtnAttached: false, // is the jog btn setup?
-        isJogSelect: false, // indicates we're in 3d jog mode
         initJog: function() {
             if (!this.isJogBtnAttached) {
                 // attach click event
                 console.log("doing one time run of initial jog setup. this should not run more than once!!!");
+                
                 $('.com-chilipeppr-widget-3d-menu-jog').click(this.toggleJog.bind(this));
                 
-                // attach shortcut key
-                //$(document).keydown(this.jogKeyDown.bind(this));
-                //$(document).keydown(this.jogKeyUp.bind(this));
-                var el = $('#com-chilipeppr-widget-3dviewer-renderArea');
+                var el = this.domElement;
                 el.focus();
+                
                 $(document).keydown(this.jogKeyDown.bind(this));
                 $(document).keyup(this.jogKeyUp.bind(this));
+                
                 this.isJogBtnAttached = true;
             }
         },
         setupJog: function(evt) {
-            
             console.log("setupJog.");
+            
             if (this.isJogSelect) {
                 console.log("we are already in jogging mode. being asked to setup, but returning cuz u can't setup more than once.");
                 return;
             }
-            //  var el = $(this.renderer.domElement);
-            //var el = $('#com-chilipeppr-widget-3dviewer-renderArea');
-            //el.focus();
-            //console.log("setupJog. el:", el);
-            //el.keydown(this.jogKeyDown.bind(this));
-            //el.keyup(this.jogKeyUp.bind(this));
-            //this.renderer.domElement.addEventListener( 'keydown', this.jogKeyDown.bind(this), false );
             
             // start watching mouse
-            var el = $(this.renderer.domElement);
+            var el = this.domElement;
             el.mousemove(this.jogMouseMove.bind(this));
             el.click(this.jogMouseClick.bind(this));
+            
             $('.com-chilipeppr-widget-3d-menu-jog').addClass("active");
             $('.com-chilipeppr-widget-3d-menu-jog').addClass("btn-primary");
+            
             // make sure animation stays on
             //this.gotoXyz({x:0,y:0,z:3});
             this.isJogSelect = true;
         },
         unsetupJog: function() {
-            
             if (!this.isJogSelect) {
                 console.log("we are being asked to unsetup jog, but it is not running so why are we getting called?");
                 return;
             }
             
-            var el = $(this.renderer.domElement);
+            var el = this.domElement;
             el.unbind("mousemove"); //this.jogMouseMove.bind(this));
             el.unbind("click");
+            
             $('.com-chilipeppr-widget-3d-menu-jog').removeClass("active");
             $('.com-chilipeppr-widget-3d-menu-jog').removeClass("btn-primary");
+            
             this.unsetupJogRaycaster();
             this.isJogSelect = false;
         },
@@ -767,72 +798,45 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             }
         },
         jogKeyDown: function(evt) {
-            //console.log("jogKeyDown. evt:", evt);
-            //if ((evt.cltrKey || evt.altKey) && !this.isJogSelect) {
-            //if ((evt.ctrlKey || evt.altKey)  && !this.isJogSelect) {
             if ((evt.ctrlKey)  && !this.isJogSelect) {
-                //evt.preventDefault();
-                //this.isJogSelect = true;
-                this.wakeAnimate();
+                // TODO: wakeAnimate change
                 this.setupJog(evt);
             } else {
                 //console.log("we are already jogging. ignoring keydown.");
             }
         },
         jogKeyUp: function(evt) {
-            //console.log("jogKeyUp. evt:", evt);
-            //if ((evt.keyCode == 17 || evt.keyCode == 18) && this.isJogSelect) {
             if ((evt.keyCode == 17) && this.isJogSelect) {
-                //this.isJogSelect = false;
                 this.unsetupJog(evt);
             }
         },
-        arrowHelper: null,
-        jogPlane: null,
-        isJogRaycaster: false,
-        jogArrow: null,
-        jogArrowCyl: null,
-        jogArrowLine: null,
-        jogArrowShadow: null,
         unsetupJogRaycaster: function() {
             this.sceneRemove(this.jogPlane);
             this.sceneRemove(this.jogArrow);
+            
             this.isJogRaycaster = false;
+            
+            this.inspectAnimate = true;
+            this.animate();
+            this.inspectAnimate = false;
         },
         setupJogRaycaster: function() {
-            
             console.log("doing setupJogRaycaster"); 
             console.log("mimic grid size:", this.grid);
-            var helper = new THREE.BoundingBoxHelper(this.grid, 0xff0000);
-            helper.update();
-            // If you want a visible bounding box
-            //scene.add(helper);
-            // If you just want the numbers
-            console.log(helper.box.min);
-            console.log(helper.box.max);
             
-            console.log("boundingbox:", helper.box);
-            var w = helper.box.max.x - helper.box.min.x;
-            var h = helper.box.max.y - helper.box.min.y;
+            var helper = new THREE.BoxHelper(this.grid, 0xff0000);
+            
+            var box = new THREE.Box3();
+            box.setFromObject(helper);
+            
+            console.log("boundingbox:", box);
+            var w = box.max.x - box.min.x;
+            var h = box.max.y - box.min.y;
             
             // create plane at z 0 to project onto
             var geometry = new THREE.PlaneBufferGeometry( w, h );
             var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
             this.jogPlane = new THREE.Mesh( geometry, material );
-            //this.scene.add( this.jogPlane );
-            
-            // setup arrow helper
-            /*
-            var length = 50;
-            var hex = 0xffff00;
-            
-            var origin = new THREE.Vector3(0,0,50);
-            var dir = new THREE.Vector3(0,0,-1);
-            //if (this.arrowHelper != null) this.scene.remove(this.arrowHelper);
-            this.arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
-            //this.arrowHelper.material.visibility = false;
-            this.scene.add( this.arrowHelper );
-            */
             
             console.group("draw jogArrow");
             
@@ -854,11 +858,9 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             cylinder.overdraw = true;
             cylinder.rotation.x = -90 * Math.PI / 180;
             cylinder.position.z = 20;
-            //cylinder.position.z = 40;
             cylinder.material.opacity = 0.3;
             cylinder.material.transparent = true;
-            cylinder.castShadow = false;
-            console.log("jogArrow cone:", cylinder);
+            cylinder.castShadow = true;
             
             // move the cylinder up in the group to account for z pos of toolhead
             // acct for scale
@@ -871,38 +873,15 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             var scale = this.getUnitVal(1);
             jogArrowGrp.scale.set(scale / 3, scale / 3, scale / 3);
 
-            // add fake shadow
-            var triangleShape = new THREE.Shape();
-            triangleShape.moveTo(  0, 0 );
-            triangleShape.lineTo(  -8, 3 );
-            triangleShape.lineTo( -8.5, 2 );
-            triangleShape.lineTo(  -8.7, 1 ); 
-            triangleShape.lineTo(  -8.72, 0 ); 
-            triangleShape.lineTo(  -8.7, -1 ); 
-            triangleShape.lineTo( -8.5, -2 );
-            triangleShape.lineTo(  -8, -3 );
-            triangleShape.lineTo(  0, 0 ); // close path
-            var geometry = new THREE.ShapeGeometry( triangleShape );
-            
-            //var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: 0x000000, transparent: true, opacity:0.05 } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );
-            var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: 0x000000, transparent: true, opacity:0.05 } ) ] );
-            //mesh.position.set( x, y, z - 125 );
-            //mesh.rotation.set( rx, ry, rz );
-            //mesh.scale.set( s, s, s );
-            
-            // figure out z position
-            //mesh.position.setZ(this.toolhead.position.z);
-            // move shadow left by the amount by amount of z height
-            mesh.position.setX(posZ * -1);
-            this.jogArrowShadow = mesh;
-            jogArrowGrp.add( mesh );
-            
             // draw dotted lines from jog tip and shadow
-            var lineMat = new THREE.LineDashedMaterial( { color: 0x000000, xdashSize: 45, xgapSize: 45 } );
+            var lineMat = new THREE.LineDashedMaterial( { color: 0x000000, dashSize: 45, gapSize: 45 } );
             var lineGeo = new THREE.Geometry();
+            
             lineGeo.vertices.push(new THREE.Vector3( 0, 0, 0 ));
             lineGeo.vertices.push(new THREE.Vector3( 0, 0, posZ ));
-            var line = new THREE.Line(lineGeo, lineMat, THREE.LineStrip);
+            
+            var line = new THREE.Line(lineGeo, lineMat);
+            
             this.jogArrowLine = line;
             jogArrowGrp.add(line);
             
@@ -917,10 +896,10 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 opacity: 0.2,
                 size: 7 //this.getUnitVal(7)
             });
+            
             jogArrowGrp.add( txtObj );
             
             this.jogArrow = jogArrowGrp;
-            
             this.sceneAdd(this.jogArrow);
             
             console.groupEnd();
@@ -940,72 +919,118 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 }
             }
         },
-        jogCurPos: null,
         jogMouseMove: function(evt) {
-            
-            //event.preventDefault();
-            if (!this.isJogSelect) {
+            if (!this.isJogSelect || this.jogLatencyTimer) {
                 return;
             }
             
-            this.wakeAnimate();
-            
-            //console.log("jogMouseMove. evt:", evt);
-
             var mouse = {};
-            mouse.x = ( evt.clientX / window.innerWidth ) * 2 - 1;
-            mouse.y = - ( evt.clientY / window.innerHeight ) * 2 + 1;
+            mouse.x = ( ( event.clientX - this.domElement.offset().left ) / this.domElement.width() ) * 2 - 1;
+            mouse.y = - ( ( event.clientY - this.domElement.offset().top ) / this.domElement.height() ) * 2 + 1;
+            
+            var that = this;
+            this.jogLatencyTimer = setTimeout(function() {
+                var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( that.camera );
+            
+                var origin = that.camera.position.clone();
+                var dir = vector.sub( that.camera.position ).normalize();
             
-            var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( this.camera );
+                if (!that.isJogRaycaster && that.isJogSelect) {
+                    that.setupJogRaycaster();
+                }
+            
+                var raycaster = new THREE.Raycaster( origin, dir );
+
+                var io = raycaster.intersectObject(that.jogPlane, false);
+                //console.log("io:", io);
             
-            var origin = this.camera.position.clone();
-            var dir = vector.sub( this.camera.position ).normalize();
+                if (io.length > 0) {
+                    // we hit the jog plane
+                    var pt = io[0].point;
+                    // move arrow
+                    that.jogArrow.position.set(pt.x, pt.y, 0);
+                    that.jogCurPos = pt.clone();
+                }
+                
+                that.inspectAnimate = true;
+                that.animate();
+                that.inspectAnimate = false;
+                
+                that.jogLatencyTimer = null;
+            }, this.jogLatencyDelay);
+        },
+
+        setupCogMenu: function() {
+            $('.com-chilipeppr-widget-3dviewer-settings-aa').click(this.onToggleAAClick.bind(this));
+            $('.com-chilipeppr-widget-3dviewer-settings-shadows').click(this.onToggleShadowClick.bind(this));
+            $('.com-chilipeppr-widget-3dviewer-settings-animation').click(this.onToggleAnimationClick.bind(this));
+        },
+        
+        setCogMenuState: function() {
+            var toggleShadowItem = $('.com-chilipeppr-widget-3dviewer-settings-shadows');
+            if (this.showShadow && !toggleShadowItem.hasClass('alert-info')) {
+                toggleShadowItem.addClass('alert-info');
+            } else if (!this.showShadow) {
+                toggleShadowItem.removeClass('alert-info');
+            }
             
-            if (!this.isJogRaycaster) {
-                this.setupJogRaycaster();
+            var toggleAAItem = $('.com-chilipeppr-widget-3dviewer-settings-aa');
+            if (!this.disableAA && !toggleAAItem.hasClass('alert-info')) {
+                toggleAAItem.addClass('alert-info');
+            } else if (this.disableAA) {
+                toggleAAItem.removeClass('alert-info');
             }
             
-            var raycaster = new THREE.Raycaster( origin, dir );
-            //console.log("mouse:", mouse, "raycaster:", raycaster);
-            var io = raycaster.intersectObject(this.jogPlane, false);
-            //console.log("io:", io);
-            
-            if (io.length > 0) {
-                // we hit the jog plane
-                var pt = io[0].point;
-                // move arrow
-                this.jogArrow.position.set(pt.x, pt.y, 0);
-                this.jogCurPos = pt.clone();
+            var enableAnimationItem = $('.com-chilipeppr-widget-3dviewer-settings-animation');
+            if (!this.disableAnimation && !enableAnimationItem.hasClass('alert-info')) {
+                enableAnimationItem.addClass('alert-info');
+            } else if (this.disableAnimation) {
+                enableAnimationItem.removeClass('alert-info');
             }
         },
-        showShadow: false,
-        setupCogMenu: function() {
-            $('.com-chilipeppr-widget-3dviewer-settings-shadows').click( this.onToggleShadowClick.bind(this));
+        
+        onToggleAAClick: function(evt, param) {
+            console.log("got onToggleAAClick. evt:", evt, "param:", param);
+            this.disableAA = !this.disableAA; // toggle
+            
+            localStorage.setItem('disable-aa', (this.disableAA) ? 'true' : 'false');
+            console.log ("Set disable-aa in storage:  ", (this.disableAA) ? 'true' : 'false');
+            
+            this.setCogMenuState();
+            
+            // you cant dynamically change the state of AA
+            //this.renderer.antialias = !this.disableAA;
+            
+            $('#com-chilipeppr-widget-3dviewer-aa-notice').modal();
         },
+        
         onToggleShadowClick: function(evt, param) {
             console.log("got onToggleShadowClick. evt:", evt, "param:", param);
             this.showShadow = !this.showShadow; // toggle
+            
+            localStorage.setItem('toolhead-shadow', (this.showShadow) ? 'true' : 'false');
+            console.log ("Set toolhead-shadow in storage:  ", (this.showShadow) ? 'true' : 'false');
+            
+            this.renderer.shadowMap.enabled = this.showShadow;
+            
+            this.setCogMenuState();
+            
             this.drawToolhead();
+            
+            this.animate();
         },
-        setupFpsMenu: function() {
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-5').click(5, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-10').click(10, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-15').click(15, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-30').click(30, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-60').click(60, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-0').click(0, this.onFpsClick.bind(this));
-            $('.com-chilipeppr-widget-3dviewer-settings-fr--5').click(-5, this.onFpsClick.bind(this));
-        },
-        onFpsClick: function(evt, param) {
-            console.log("got onFpsClick. evt:", evt, "param:", param);
-            var fr = evt.data;
-            this.setFrameRate(fr);
-            // set css to show selected
-            $('.com-chilipeppr-widget-3dviewer-settings-fr').removeClass('alert-info');
-            $('.com-chilipeppr-widget-3dviewer-settings-fr-' + fr).addClass('alert-info');
-            this.wakeAnimate();
+        
+        onToggleAnimationClick: function(evt, param) {
+            console.log("got onToggleAnimationClick. evt:", evt, "param:", param);
+            this.disableAnimation = !this.disableAnimation; // toggle
+            
+            localStorage.setItem('disable-animation', (this.disableAnimation) ? 'true' : 'false');
+            console.log ("Set disable-animation in storage:  ", (this.disableAnimation) ? 'true' : 'false');
+            
+            this.setCogMenuState();
         },
-        gridSize: 1, // global property for size of grid. default to 1 (shapeoko rough size)
+        
+        
         setupGridSizeMenu: function() {
             $('.com-chilipeppr-widget-3dviewer-gridsizing-1x').click(1, this.onGridSizeClick.bind(this));
             $('.com-chilipeppr-widget-3dviewer-gridsizing-2x').click(2, this.onGridSizeClick.bind(this));
@@ -1025,7 +1050,10 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             
             $('.com-chilipeppr-widget-3dviewer-gridsizing-' + this.gridSize + 'x').addClass("alert-info");
             
+            this.animate();
         },
+        
+        
         setUnits: function(units) {
             if (units == "mm")
                 this.isUnitsMm = true;
@@ -1041,26 +1069,38 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             chilipeppr.publish("/" + this.id + "/recvUnits", units);
         },
         onUnitsChanged: function() {
-            //console.log("onUnitsChanged");
             // we need to publish back the units
             var units = "mm";
             if (!this.isUnitsMm) units = "inch";
             chilipeppr.publish("/" + this.id + "/unitsChanged", units);
             $('.com-chilipeppr-widget-3dviewer-units-indicator').text(units);
         },
+        
         request3dObject: function() {
             console.log("request3dObject");
+            
+            // backwards compat HAX
+            if (this.object && this.object.userData) {
+                this.object.userData.lines = this.parsedLines;
+            }
+            
             // we need to publish back the object
             chilipeppr.publish("/" + this.id + "/recv3dObject", this.object, {'scene': this.scene, 'camera': this.camera, 'toolhead': this.toolhead, 'widget': this });
         },
+        
         sceneAdd: function(obj) {
             console.log("sceneAdd. obj:", obj);
-            this.wakeAnimate();
+            
+            // TODO: wakeAnimate change
+            this.animate();
             this.scene.add(obj);
         },
         sceneRemove: function(obj) {
             console.log("sceneRemove. obj:", obj);
-            this.wakeAnimate();
+            
+            // TODO: wakeAnimate change
+            this.animate();
+            
             if (obj && 'traverse' in obj) {
                 this.scene.remove(obj);
                 obj.traverse( function ( child ) {
@@ -1072,14 +1112,18 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             }
         },
         sceneClear: function() {
+            console.log('scene clear');
+            
             this.stopSampleRun();
-            this.wakeAnimate();
-            //this.scene.remove(this.object);
+
             this.object.children = [];
             this.sceneRemove(this.decorate);
+            
+            this.animate();
         },
+        
+        
         btnSetup: function() {
-            
             // attach button bar features
             var that = this;
             this.isLookAtToolHeadMode = true;
@@ -1118,10 +1162,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             });
         },
         forkSetup: function () {
-            //$('#com-chilipeppr-widget-3dviewer .fork').prop('href', this.fiddleurl);
-            //$('#com-chilipeppr-widget-3dviewer .standalone').prop('href', this.url);
-            //var t = $('#com-chilipeppr-widget-3dviewer .fork-name');
-            //t.html(this.id);
             $('#com-chilipeppr-widget-3dviewer .panel-title').popover({
                 title: this.name,
                 content: this.desc,
@@ -1138,8 +1178,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     pubsubviewer.attachTo($('#com-chilipeppr-widget-3dviewer-dropdown'), that);
                 });
             });
-
-            //console.log("title in menu", t);
         },
         onPubSubFileLoaded: function(txt) {
             this.openGCodeFromText(txt);
@@ -1149,12 +1187,12 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
         },
         loadFile: function (path, callback /* function(contents) */ ) {
             var that = this;
-            
-          // rewrite www.chilipeppr.com url's to i2dcui.appspot.com so we support SSL
-          path = path.replace(/http\:\/\/www.chilipeppr.com/i, "//i2dcui.appspot.com");
-          path = path.replace(/http\:\/\/chilipeppr.com/i, "//i2dcui.appspot.com");
-          path = path.replace(/\/\/www.chilipeppr.com/i, "//i2dcui.appspot.com");
-          path = path.replace(/\/\/chilipeppr.com/i, "//i2dcui.appspot.com");
+
+            // rewrite www.chilipeppr.com url's to i2dcui.appspot.com so we support SSL
+            path = path.replace(/http\:\/\/www.chilipeppr.com/i, "//i2dcui.appspot.com");
+            path = path.replace(/http\:\/\/chilipeppr.com/i, "//i2dcui.appspot.com");
+            path = path.replace(/\/\/www.chilipeppr.com/i, "//i2dcui.appspot.com");
+            path = path.replace(/\/\/chilipeppr.com/i, "//i2dcui.appspot.com");
 
             $.get(path, null, callback, 'text')
                 .error(function () {
@@ -1175,47 +1213,45 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
         },
         openGCodeFromPath: function (path) {
             var that = this;
-            //$('#openModal').modal('hide');
+            
             if (that.object) {
-                //TWEEN.removeAll();
                 this.stopSampleRun();
                 that.scene.remove(that.object);
-                //that.scene.remove(that.decorate);
             }
             that.loadFile(path, function (gcode) {
                 that.object = that.createObjectFromGCode(gcode);
                 that.scene.add(that.object);
                 that.viewExtents();
-                //that.decorateExtents();
                 that.drawAxesToolAndExtents();
                 that.onUnitsChanged();
                 localStorage.setItem('last-loaded', path);
                 localStorage.removeItem('last-imported');
             });
+            
             // fire off Dat Chu's scene reload signal
             that.onSignalSceneReloaded();
         },
         openGCodeFromText: function (gcode) {
             console.log("openGcodeFromText");
-            this.wakeAnimate();
-            //$('#openModal').modal('hide');
+
             if (this.object) {
-                //TWEEN.removeAll();
                 this.stopSampleRun();
                 this.scene.remove(this.object);
-                //this.scene.remove(this.decorate);
             }
+            
             this.object = this.createObjectFromGCode(gcode);
             console.log("done creating object:", this.object);
             this.scene.add(this.object);
-            //this.lookAtCenter();
+            
             this.viewExtents();
-            //this.decorateExtents();
             this.drawAxesToolAndExtents();
             this.onUnitsChanged();
-            this.setDetails(this.object.userData.lines.length + " GCode Lines");
-            this.wakeAnimate();
+            this.setDetails(this.parsedLines.length + " GCode Lines");
+            
+            // TODO: wakeAnimate change
+            this.animate();
             
+            // TODO: maybe we remove this logic all-together
             // we can get a QuotaExceededError here, so catch it
             try {
                 // remove old 1st to perhaps make more room for quota check
@@ -1224,8 +1260,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 localStorage.setItem('last-imported', gcode);
             } catch(e) {
                 if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name == "QuotaExceededError" || e.code == 22 || e.name == "NS_ERROR_DOM_QUOTA_REACHED" || e.code == 1014) {
-                    //this.sceneRemove(this.object);
-                    // show err dialog
                     console.error("3D Viewer Widget. out of local storage space, but letting user proceed. err:", e);
                     $('#com-chilipeppr-widget-3dviewer-outofspace').modal();
                 } else {
@@ -1236,22 +1270,19 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             
             // fire off Dat Chu's scene reload signal
             this.onSignalSceneReloaded();
-
         },
         lookAtCenter: function () {
             // this method makes the trackball controls look at center of gcode object
-            this.controls.target.x = this.object.userData.center2.x;
-            this.controls.target.y = this.object.userData.center2.y;
-            this.controls.target.z = this.object.userData.center2.z;
+            this.controls.target.x = this.sceneCenter.x;
+            this.controls.target.y = this.sceneCenter.y;
+            this.controls.target.z = this.sceneCenter.z;
         },
-        isLookAtToolHeadMode: false,
+
         lookAtToolHead: function () {
             // this method makes the trackball controls look at the tool head
-            //console.log("lookAtToolHead. controls:", this.controls, "toolhead:", this.toolhead);
             if (this.isLookAtToolHeadMode) {
                 this.controls.target.x = this.toolhead.position.x;
                 this.controls.target.y = this.toolhead.position.y;
-                //this.controls.target.z = this.toolhead.position.z - 20;
                 this.controls.target.z = this.toolhead.position.z;
             }
         },
@@ -1275,47 +1306,40 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             this.camera.updateProjectionMatrix();
         },
         viewExtents: function () {
-            console.log("viewExtents. object.userData:", this.object.userData);
             console.log("controls:", this.controls);
-            this.wakeAnimate();
+            
+            // TODO: wakeAnimate change
+            this.moveAnimate = true;
+            this.animate();
+            this.moveAnimate = false;
             
             // lets override the bounding box with a newly
             // generated one
             // get its bounding box
-            var helper = new THREE.BoundingBoxHelper(this.object, 0xff0000);
-            helper.update();
-            //if (this.bboxHelper)
-            //    this.scene.remove(this.bboxHelper);
+            var helper = new THREE.BoxHelper(this.object, 0xff0000);
+                        
+            var box = new THREE.Box3();
+            box.setFromObject(helper);
+            
             this.bboxHelper = helper;
+            
             // If you want a visible bounding box
-            //this.scene.add(this.bboxHelper);
-            console.log("helper bbox:", helper);
-            
-            var minx = helper.box.min.x;
-            var miny = helper.box.min.y;
-            var maxx = helper.box.max.x;
-            var maxy = helper.box.max.y;
-            var minz = helper.box.min.z;
-            var maxz = helper.box.max.z;
-            
-            var ud = this.object.userData;
-            ud.bbox2 = helper.box;
-            ud.center2.x = minx + ((maxx - minx) / 2);
-            ud.center2.y = miny + ((maxy - miny) / 2);
-            ud.center2.z = minz + ((maxz - minz) / 2);
-            
-            //this.controls.enabled = false;
+            console.log("helper bbox:", box);
+            
+            var minx = box.min.x;
+            var miny = box.min.y;
+            var maxx = box.max.x;
+            var maxy = box.max.y;
+            var minz = box.min.z;
+            var maxz = box.max.z;
+            
+            var center = this.sceneCenter;
+            center.x = minx + ((maxx - minx) / 2);
+            center.y = miny + ((maxy - miny) / 2);
+            center.z = minz + ((maxz - minz) / 2);
+            
             this.controls.reset();
-            //this.controls.object.rotation._x = 0.5;
-            //this.controls.object.rotation._y = 0.5;
-            //this.controls.object.rotation._z = 0.5;
-            //this.controls.object.rotation = THREE.Euler(0.5, 0.5, 0.5);
-            //this.controls.object.setRotationFromEuler(THREE.Euler(0.5,0.5,0.5));
-
-            // get max of any of the 3 axes to use as max extent
-            //var lenx = Math.abs(ud.bbbox2.min.x) + ud.bbbox2.max.x;
-            //var leny = Math.abs(ud.bbbox2.min.y) + ud.bbbox2.max.y;
-            //var lenz = Math.abs(ud.bbbox2.min.z) + ud.bbbox2.max.z;
+            
             var lenx = maxx - minx;
             var leny = maxy - miny;
             var lenz = maxz - minz;
@@ -1333,13 +1357,14 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             
             var maxlen = Math.max(lenx, leny, lenz);
             var dist = 2 * maxlen;
+            
             // center camera on gcode objects center pos, but twice the maxlen
-            this.controls.object.position.x = ud.center2.x;
-            this.controls.object.position.y = ud.center2.y;
-            this.controls.object.position.z = ud.center2.z + dist;
-            this.controls.target.x = ud.center2.x;
-            this.controls.target.y = ud.center2.y;
-            this.controls.target.z = ud.center2.z;
+            this.controls.object.position.x = center.x;
+            this.controls.object.position.y = center.y;
+            this.controls.object.position.z = center.z + dist;
+            this.controls.target.x = center.x;
+            this.controls.target.y = center.y;
+            this.controls.target.z = center.z;
             console.log("maxlen:", maxlen, "dist:", dist);
             var fov = 2.2 * Math.atan(maxlen / (2 * dist)) * (180 / Math.PI);
             console.log("new fov:", fov, " old fov:", this.controls.object.fov);
@@ -1348,10 +1373,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 return;
             }
             this.controls.object.fov = fov;
-            //this.controls.object.setRotationFromEuler(THREE.Euler(0.5,0.5,0.5));
-            //this.controls.object.rotation.set(0.5,0.5,0.5,"XYZ");
-            //this.controls.object.rotateX(2);
-            //this.controls.object.rotateY(0.5);
             
             var L = dist;
             var camera = this.controls.object;
@@ -1361,76 +1382,90 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             var quaternion = new THREE.Quaternion();
             
             // Zoom correction
+            // TODO: explore why this is setting setFromAxisAngle 3 times
             camera.translateZ(L - l);
             console.log("up:", up);
             up.y = 1; up.x = 0; up.z = 0;
             quaternion.setFromAxisAngle(up, 0.5);
-            //camera.position.applyQuaternion(quaternion);
+
             up.y = 0; up.x = 1; up.z = 0;
             quaternion.setFromAxisAngle(up, 0.5);
             camera.position.applyQuaternion(quaternion);
+            
             up.y = 0; up.x = 0; up.z = 1;
             quaternion.setFromAxisAngle(up, 0.5);
-            //camera.position.applyQuaternion(quaternion);
-            
+                
             camera.lookAt(vector);
                         
-            //this.camera.rotateX(90);
-            
             this.controls.object.updateProjectionMatrix();
-            //this.controls.enabled = true;
-            //this.scaleInView();
-            //this.controls.rotateCamera(0.5);
-            //this.controls.noRoll = true;
-            //this.controls.noRotate = true;
         },
         stopSampleRun: function (evt) {
             console.log("stopSampleRun. tween:", this.tween);
+            this.tweenAnimate = false;
+            
             this.tweenIsPlaying = false;
-            //this.tween.stopChainedTweens();
-            //console.log("_onCompleteCallback:", this.tween._onCompleteCallback);
-            //this.tween._onCompleteCallback.apply(this.tween, null);
+
             if (this.tweenHighlight) this.scene.remove(this.tweenHighlight);
             if (this.tween) this.tween.stop();
-            //TWEEN.stopChainedTweens();
-            //TWEEN.removeAll();
-            //TWEEN.stop();
+
             $('.com-chilipeppr-widget-3d-menu-samplerun').prop('disabled', false);
             $('.com-chilipeppr-widget-3d-menu-samplerunstop').prop('disabled', true);
             $('.com-chilipeppr-widget-3d-menu-samplerunstop').popover('hide');
-            this.animAllowSleep();
+            
+            // TODO: animAllowSleep
+            //this.animAllowSleep();
         },
         pauseSampleRun: function () {
             console.log("pauseSampleRun");
             if (this.tweenPaused) {
-                // the tween was paused, it's being non-paused
                 console.log("unpausing tween");
-                this.animNoSleep();
+                
+                // TODO: fix
+                //this.animNoSleep();
+                this.tweenAnimate = true;
+                
                 this.tweenIsPlaying = true;
                 this.tweenPaused = false;
                 this.playNextTween();
+                
+                this.animate();
             } else {
                 console.log("pausing tween on next playNextTween()");
+                this.tweenAnimate = false;
+                
                 this.tweenIsPlaying = false;
                 this.tweenPaused = true;
-                this.animAllowSleep();
+                
+                // TODO: animAllowSleep
+                //this.animAllowSleep();
+                this.animate();
             }
         },
+        
         gotoXyz: function(data) {
             // we are sent this command by the CNC controller generic interface
             console.log("gotoXyz. data:", data);
-            this.animNoSleep();
+            
+            if (this.animationLatencyTimer) {
+                console.log("gotoXyz. skipping logic, animation already in progress");
+                return;
+            }
+            
+            // TODO: fix
+            //this.animNoSleep();
+            this.tweenAnimate = false;
             this.tweenIsPlaying = false;
             this.tweenPaused = true;
             
             if ('x' in data && data.x != null) this.toolhead.position.x = data.x;
             if ('y' in data && data.y != null) this.toolhead.position.y = data.y;
-            //if ('z' in data && data.z != null) this.toolhead.position.z = data.z + 20;
             if ('z' in data && data.z != null) this.toolhead.position.z = data.z;
+            
             if (this.showShadow) {
                 this.toolhead.children[0].target.position.set(this.toolhead.position.x, this.toolhead.position.y, this.toolhead.position.z);
                 this.toolhead.children[1].target.position.set(this.toolhead.position.x, this.toolhead.position.y, this.toolhead.position.z);
             }
+            
             this.lookAtToolHead();
             
             // see if jogging, if so rework the jog tool
@@ -1440,11 +1475,13 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             if (this.isJogSelect && this.jogArrowCyl) {
                 if ('z' in data && data.z != null) {
                     console.log("adjusting jog tool:", this.jogArrow);
+                    
                     var cyl = this.jogArrowCyl; //.children[0];
                     var line = this.jogArrowLine; //.children[2];
                     var shadow = this.jogArrowShadow; //.children[3];
                     var posZ = data.z * 3; // acct for scale
                     cyl.position.setZ(posZ + 20);
+                    
                     console.log("line:", line.geometry.vertices);
                     line.geometry.vertices[1].z = posZ; // 2nd top vertex
                     line.geometry.verticesNeedUpdate = true;
@@ -1452,57 +1489,76 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 }
             }
             
-            this.animAllowSleep();
+            this.gotoAnimate = true;
+            this.animate();
+            this.gotoAnimate = false;
         },
         gotoLine: function(data) {
             // this method is sort of like playNextTween, but we are jumping to a specific
             // line based on the gcode sender
             console.log("got gotoLine. data:", data);
-            //this.stopSampleRun();
-            //this.tweenPaused = false;
-            //this.pauseSampleRun();
-            this.animNoSleep();
+            
+            // TODO: fix
+            //this.animNoSleep();
+            this.tweenAnimate = true;
+            
             this.tweenIsPlaying = false;
             this.tweenPaused = true;
             
-            var lines = this.object.userData.lines;
-            console.log("userData.lines:", lines[data.line]);
+            var lines = this.parsedLines;
+            console.log("parsedLines:", lines[data.line]);
+            
             var curLine = lines[data.line];
+            
+            if (!curLine.p2) {
+                console.log('no p2 defined for current line:', curLine);
+                return;
+            }
+            
             var curPt = curLine.p2;
-            //if (false && lines[data.line].p2) curPt = lines[data.line].p2;
-            //else curPt = {x:0,y:0,z:0};
+            
             console.log("p2 for toolhead move. curPt:", curPt);
             this.toolhead.position.x = curPt.x;
             this.toolhead.position.y = curPt.y;
-            //this.toolhead.position.z = curPt.z + 20;
             this.toolhead.position.z = curPt.z;
+            
             if (this.showShadow) {
                 this.toolhead.children[0].target.position.set(this.toolhead.position.x, this.toolhead.position.y, this.toolhead.position.z);
                 this.toolhead.children[1].target.position.set(this.toolhead.position.x, this.toolhead.position.y, this.toolhead.position.z);
             }
+            
             this.lookAtToolHead();
-            this.animAllowSleep();
+            
+            // TODO: animAllowSleep
+            //this.animAllowSleep();
             
             /* GOOD STUFF BUT IF DON'T WANT ANIM*/
             if (this.tweenHighlight) this.scene.remove(this.tweenHighlight);
             if (this.tween) this.tween.stop();
+            
             if (data.anim && data.anim == "anim") {
                 console.log("being asking to animate gotoline");
-                this.animNoSleep();
+                // TODO: fix
+                //this.animNoSleep();
+                this.tweenAnimate = true;
+                
                 this.tweenPaused = false;
                 this.tweenIsPlaying = true;
                 this.tweenIndex = data.line;
+                
                 this.playNextTween(true);
             }
+            
+            this.animate();
         },
         playNextTween: function (isGotoLine) {
 
             if (this.tweenPaused) return;
-            
-            //this.wakeAnimate();
 
             var that = this;
-            var lines = this.object.userData.lines;
+            
+            var lines = this.parsedLines;
+            
             if (this.tweenIndex + 1 > lines.length - 1) {
                 // done tweening
                 console.log("Done with tween");
@@ -1512,7 +1568,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
 
             var lineMat = new THREE.LineBasicMaterial({
                 color: 0xff0000,
-                lineWidth: 1,
                 transparent: true,
                 opacity: 1,
             });
@@ -1520,8 +1575,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             // find next correct tween, i.e. ignore fake commands
             var isLooking = true;
             var indxStart = this.tweenIndex + 1;
-            //console.log("starting while loop");
-            while(isLooking) {
+            
+            while (isLooking) {
                 if (indxStart > lines.length - 1) {
                     console.log("we are out of lines to look at");
                     that.stopSampleRun();
@@ -1529,20 +1584,23 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 }
                 if (lines[indxStart].args.isFake) {
                     // this is fake, skip it
-                    //console.log("found fake line at indx:", indxStart);
+                    console.log("found fake line at indx:", indxStart);
                 } else {
-                    // we found a good one. use it
-                    //console.log("found one at indx:", indxStart);
                     isLooking = false;
                     break;
                 }
+                
                 indxStart++;
             }
+            
             var ll;
-            if (lines[this.tweenIndex].p2) ll = lines[this.tweenIndex].p2;
-            else ll = {x:0,y:0,z:0};
-            console.log("start line:", lines[this.tweenIndex], "ll:", ll);
+            if (lines[this.tweenIndex].p2) {
+                ll = lines[this.tweenIndex].p2;
+            } else {
+                ll = {x:0, y:0, z:0};
+            }
             
+            console.log("start line:", lines[this.tweenIndex], "ll:", ll);
             this.tweenIndex = indxStart;
             var cl = lines[this.tweenIndex].p2;
             console.log("end line:", lines[this.tweenIndex], " el:", cl);
@@ -1552,25 +1610,27 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 y: ll.y,
                 z: ll.z
             })
-                .to({
+            .to({
                 x: cl.x,
                 y: cl.y,
                 z: cl.z
             }, 1000 / that.tweenSpeed)
             .onStart(function () {
                 that.tween = curTween;
-                //console.log("onStart");
+                console.log("onStart");
                 // create a new line to show path
+                
                 var lineGeo = new THREE.Geometry();
                 lineGeo.vertices.push(new THREE.Vector3(ll.x, ll.y, ll.z), new THREE.Vector3(cl.x, cl.y, cl.z));
                 var line = new THREE.Line(lineGeo, lineMat);
                 line.type = THREE.Lines;
+                
                 that.tweenHighlight = line;
                 that.scene.add(line);
 
             })
             .onComplete(function () {
-                //console.log("onComplete");
+                console.log("onComplete");
                 that.scene.remove(that.tweenHighlight);
                 //setTimeout(function() {that.playNextTween();}, 0);
                 if (isGotoLine) {
@@ -1581,168 +1641,134 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 }
             })
             .onUpdate(function () {
-                that.toolhead.position.x = this.x;
-                that.toolhead.position.y = this.y;
-                that.toolhead.position.z = this.z;
-                //that.zheighttest -= 0.1;
-                //that.toolhead.position.z = this.z + that.zheighttest;
-                //that.toolhead.position.z = this.z + 20;
-                // update where shadow casting light is looking
-                if (this.showShadow) {
-                    that.toolhead.children[0].target.position.set(this.x, this.y, that.toolhead.position.z);
-                    that.toolhead.children[1].target.position.set(this.x, this.y, that.toolhead.position.z);
+                console.log(this._object);
+                if (this._object) {
+                    that.toolhead.position.x = this._object.x;
+                    that.toolhead.position.y = this._object.y;
+                    that.toolhead.position.z = this._object.z;
+
+                    if (this.showShadow) {
+                        that.toolhead.children[0].target.position.set(this._object.x, this._object.y, that.toolhead.position.z);
+                        that.toolhead.children[1].target.position.set(this._object.x, this._object.y, that.toolhead.position.z);
+                    }
+                
+                    that.lookAtToolHead();
+                } else {
+                    //console.log('WTF', this);
                 }
-                //that.toolhead.children[0].target.matrixWorldNeedsUpdate = true;
-                //console.log("onUpdate2. toolhead:", that.toolhead);
-                that.lookAtToolHead();
             });
-            //lastTween.chain(curTween);
-            //lastTween = curTween;
+            
             this.tween = curTween;
-            //this.tweenIndex++;
             this.tween.start();
         },
-        zheighttest: 0, // test toolhead going up in z
+
         playSampleRun: function (evt) {
-            console.log("controls:", this.controls);
-            //this.wakeAnimate();
-            this.animNoSleep();
             $('.com-chilipeppr-widget-3d-menu-samplerun').prop('disabled', true);
             $('.com-chilipeppr-widget-3d-menu-samplerun').popover('hide');
             $('.com-chilipeppr-widget-3d-menu-samplerunstop').prop('disabled', false);
             $('.com-chilipeppr-widget-3d-menu-samplerunpause').prop('disabled', false);
 
+            this.tweenAnimate = true;
+            
             this.tweenPaused = false;
             this.tweenIsPlaying = true;
             this.tweenIndex = 0;
 
             var that = this;
             console.log("playSampleRun");
-            //console.log("playSampleRun click:", evt, that);
 
             // cleanup previous run
             TWEEN.removeAll();
 
             // we will tween all gcode locs in order
-            //var lines = this.object.userData.lines;
-            //var pstart = this.object.userData.lines[0];
             var tween = new TWEEN.Tween({
                 x: 0,
                 y: 0,
                 z: 0
             })
-                .to({
+            .to({
                 x: 0,
                 y: 0,
                 z: 0
             }, 20)
             .easing(TWEEN.Easing.Quadratic.InOut)
             .onComplete(function () {
-                //console.log("onComplete");
+                console.log('next tween');
                 that.playNextTween();
             })
             .onUpdate(function () {
-                that.toolhead.position.x = this.x;
-                that.toolhead.position.y = this.y;
-                //that.toolhead.position.z = this.z + 20;
-                that.toolhead.position.z = this.z;
-                // update where shadow casting light is looking
-                if (this.showShadow) {
-                    that.toolhead.children[0].target.position.set(this.x, this.y, that.toolhead.position.z);
-                    that.toolhead.children[1].target.position.set(this.x, this.y, that.toolhead.position.z);
-                }
+                if (this._object) {
+                    that.toolhead.position.x = this._object.x;
+                    that.toolhead.position.y = this._object.y;
+                    that.toolhead.position.z = this._object.z;
                 
-                //that.toolhead.children[0].target.position.set(this.x, this.y, this.z);
-                //that.toolhead.children[0].target.matrixWorldNeedsUpdate = true;
-                //console.log("onUpdate. toolhead:", that.toolhead);
+                    // update where shadow casting light is looking
+                    if (this.showShadow) {
+                        that.toolhead.children[0].target.position.set(this._object.x, this._object.y, that.toolhead.position.z);
+                        that.toolhead.children[1].target.position.set(this._object.x, this._object.y, that.toolhead.position.z);
+                    } 
+                }
             });
 
             this.tween = tween;
             this.tweenIndex = 0;
+            
             this.tween.start();
+            
+            this.animate();
+        },
+        
 
-            /*
-            //var mylines = this.object.userData.lines.slice
-            lastTween = tween;
-            var lineMat = new THREE.LineBasicMaterial({
-                        color: 0xFF0000,
-                        lineWidth: 1,
-                        blending: THREE.AdditiveBlending,
-                        transparent: true,
-                        opacity: 1,
-                    });
-            $.each(this.object.userData.lines.slice(1), function(val, item) {
-                //console.log(val,item); 
-                var ll = lines[val].p2;
-                var cl = item.p2;
-                //console.log(ll, cl);
-                //var lineHighlight;
-                var curTween = new TWEEN.Tween( { x: ll.x, y: ll.y, z: ll.z} )
-                .to( {x: cl.x, y: cl.y, z: cl.z}, 1000 / that.tweenSpeed)
-                //.easing( TWEEN.Easing.Quadratic.InOut )
-                .onStart( function() {
-                    that.tween = curTween;
-                    //console.log("onStart");
-                    // create a new line to show path
-                    var lineGeo = new THREE.Geometry();
-                    lineGeo.vertices.push(new THREE.Vector3(ll.x, ll.y, ll.z), new THREE.Vector3(cl.x, cl.y, cl.z));
-                    var line = new THREE.Line(lineGeo, lineMat);
-                    line.type = THREE.Lines;
-                    that.tweenHighlight = line;
-                    that.scene.add(line);
-                })
-                .onComplete( function() {
-                    //console.log("onComplete");
-                    that.scene.remove(that.tweenHighlight);
-                })
-                .onUpdate( function () {
-                    that.toolhead.position.x = this.x;
-                    that.toolhead.position.y = this.y;
-                    that.toolhead.position.z = this.z + 20;
-                    that.lookAtToolHead();
-                } );
-                lastTween.chain(curTween);
-                lastTween = curTween;
-            });
+        downloadFont: function() {
+            console.log('downloading font');
             
-            tween.start();
-            */
+            var that = this;
+            $.ajax({
+                url: 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.json',
+                async: false,
+                dataType: 'json',
+                success: function(response) {
+                    that.textFont = new THREE.Font(response);
+                    if (that.textFont) {
+                        console.log('font download success');
+                    }
+                }
+            });
         },
         makeText: function(vals) {
-            var shapes, geom, mat, mesh;
-            
-            console.log("Do we have the global ThreeHelvetiker font:", ThreeHelvetiker);
-            console.log("THREE.FontUtils:", THREE.FontUtils);
-            
-            if (!THREE.FontUtils) {
-                console.error("THREE.FontUtils not defined per bug in r73 of three.js. So not making text.");
+            if (!this.textFont) {
+                console.log('no font defined');
                 return;
             }
             
-            THREE.FontUtils.loadFace(ThreeHelvetiker);
-            shapes = THREE.FontUtils.generateShapes( vals.text, {
-                font: "helvetiker",
-                //weight: "normal",
-                size: vals.size ? vals.size : 10
-            } );
-            geom = new THREE.ShapeGeometry( shapes );
-            mat = new THREE.MeshBasicMaterial({
+            var shapes, geom, mat, mesh;
+            console.log('about to make text: ', vals.text);
+            
+            var textGeometry = new THREE.TextGeometry(vals.text, {
+                font: this.textFont,
+                size: vals.size ? vals.size : 10,
+                height: 0.1,
+                curveSegments: 12,
+            });
+            
+            textMaterial = new THREE.MeshBasicMaterial({
                 color: vals.color,
                 transparent: true,
                 opacity: vals.opacity ? vals.opacity : 0.5,
             });
-            mesh = new THREE.Mesh( geom, mat );
             
+            mesh = new THREE.Mesh(textGeometry, textMaterial);
+        
             mesh.position.x = vals.x;
             mesh.position.y = vals.y;
             mesh.position.z = vals.z;
+        
+            mesh.castShadow = false;
             
             return mesh;
-            
         },
-        decorate: null, // stores the decoration 3d objects
+
         decorateExtents: function() {
-            
             // remove grid if drawn previously
             if (this.decorate != null) {
                 console.log("there was a previous extent decoration. remove it. grid:", this.decorate);
@@ -1751,35 +1777,49 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 console.log("no previous decorate extents.");
             }
             
+            if (!this.textFont) {
+                console.log('unable to render extents without a font');
+                return;
+            }
+            
+            if (!this.object) {
+                return;
+            }
+            
             // get its bounding box
-            console.log("about to do THREE.BoundingBoxHelper on this.object:", this.object);
-            var helper = new THREE.BoundingBoxHelper(this.object, 0xff0000);
-            helper.update();
+            console.log("about to do THREE.BoxHelper on this.object:", this.object);
+            var helper = new THREE.BoxHelper(this.object, 0xff0000);
+            
+            var box = new THREE.Box3();            
+            box.setFromObject(helper);
+            
+            //helper.update();
             this.bboxHelper = helper;
-            // If you want a visible bounding box
-            //this.scene.add(helper);
-            console.log("helper bbox:", helper);
             
-            var color = '#0d0d0d';
-            //var color = '#ff0000';
+            console.log("helper bbox:", box);
             
+            var color = '#0d0d0d';            
             var material = new THREE.LineDashedMaterial({ 
-                vertexColors: false, color: color,
-                dashSize: this.getUnitVal(1), gapSize: this.getUnitVal(1), linewidth: 1,
+                vertexColors: false, 
+                color: color,
+                dashSize: this.getUnitVal(1), gapSize: this.getUnitVal(1), linewidth: this.lineWidth,
                 transparent: true,
                 opacity: 0.3,
             });
 
             // Create X axis extents sprite
             var z = 0;
+            
             var offsetFromY = this.getUnitVal(-4); // this means we'll be below the object by this padding
+            
             var lenOfLine = this.getUnitVal(5);
-            var minx = helper.box.min.x;
-            var miny = helper.box.min.y;
-            var maxx = helper.box.max.x;
-            var maxy = helper.box.max.y;
-            var minz = helper.box.min.z;
-            var maxz = helper.box.max.z;
+            
+            var minx = box.min.x;
+            var miny = box.min.y;
+            var maxx = box.max.x;
+            var maxy = box.max.y;
+            var minz = box.min.z;
+            var maxz = box.max.z;
             
             var lineGeo = new THREE.Geometry();
             lineGeo.vertices.push(
@@ -1791,8 +1831,9 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 new THREE.Vector3(maxx, miny+offsetFromY, z)
                 
             );
+            
             lineGeo.computeLineDistances();
-            var line = new THREE.Line(lineGeo, material, THREE.LinePieces);
+            var line = new THREE.LineSegments(lineGeo, material);
             line.type = THREE.Lines;
             
             // Draw text label of length
@@ -1820,8 +1861,9 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 new THREE.Vector3(minx + offsetFromX - lenOfLine, maxy, z),
                 new THREE.Vector3(minx + offsetFromX, maxy, z)
             );
+            
             lineGeo2.computeLineDistances();
-            var line2 = new THREE.Line(lineGeo2, material, THREE.LinePieces);
+            var line2 = new THREE.LineSegments(lineGeo2, material);
             line2.type = THREE.Lines;
             
             // Draw text label of length
@@ -1846,18 +1888,10 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 new THREE.Vector3(maxx + lenOfLine, miny, maxz),
                 new THREE.Vector3(maxx + lenOfLine, miny, maxz),
                 new THREE.Vector3(maxx, miny, maxz) 
-
-                /*
-                new THREE.Vector3(maxx + offsetFromX, miny+offsetFromY-lenOfLine, z),
-                new THREE.Vector3(minx, miny+offsetFromY-lenOfLine, z),
-                new THREE.Vector3(maxx, miny+offsetFromY-lenOfLine, z),
-                new THREE.Vector3(maxx, miny+offsetFromY-lenOfLine, z),
-                new THREE.Vector3(maxx, miny+offsetFromY, z)
-                */
-                
             );
+            
             zlineGeo.computeLineDistances();
-            var zline = new THREE.Line(zlineGeo, material, THREE.LinePieces);
+            var zline = new THREE.LineSegments(zlineGeo, material);
             zline.type = THREE.Lines;
             
             // Draw text label of z height
@@ -1887,36 +1921,34 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             this.decorate.add(txtZ);
             
             // Add estimated time and distance
-            var ud = this.object.userData.lines;
-            var udLastLine = ud[ud.length-1].p2;
-            //console.log("lastLine:", udLastLine, "userData:", ud, "this.object:", this.object);
-            // use last array value of userData cuz it keeps a running total of time
-            // and distance
+            var ud = this.parsedLines;
+            var udLastLine = ud[ud.length - 1].p2;
             
             // get pretty print of time
             var ret = this.convertMinsToPrettyDuration(udLastLine.timeMinsSum);
             
+            if (udLastLine.distSum) {
+                var txt = "Estimated Time: " + ret + "," + " Total Distance: " + (udLastLine.distSum).toFixed(2);
+                txt = (this.isUnitsMm) ? txt + " mm" : txt + " in";
+                
+                var txtTimeDist = this.makeText({
+                    x: minx + this.getUnitVal(1),
+                    y: miny + offsetFromY - lenOfLine - this.getUnitVal(6),
+                    z: z,
+                    text: txt,
+                    color: color,
+                    opacity: 0.3,
+                    size: this.getUnitVal(2)
+                });
             
-            var txt = "Estimated Time: " + ret + ","
-            + " Total Distance: " + (udLastLine.distSum).toFixed(2);
-            txt = (this.isUnitsMm) ? txt + " mm" : txt + " in";
-            //console.log("txt:", txt);
-            //console.log("blah", blah);
-            var txtTimeDist = this.makeText({
-                x: minx + this.getUnitVal(1),
-                y: miny + offsetFromY - lenOfLine - this.getUnitVal(6),
-                z: z,
-                text: txt,
-                color: color,
-                opacity: 0.3,
-                size: this.getUnitVal(2)
-            });
-            this.decorate.add(txtTimeDist);
+                this.decorate.add(txtTimeDist);
+            }
             
             this.sceneAdd(this.decorate);
             console.log("just added decoration:", this.decorate);
 
         },
+        
         convertMinsToPrettyDuration: function(mins) {
             // Minutes and seconds
             var time = mins * 60;
@@ -1938,6 +1970,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             ret += "" + secs.toFixed(0) + "s";
             return ret;
         },
+        
+        // TODO: review makeSprite code
         makeSprite: function (scene, rendererType, vals) {
             var canvas = document.createElement('canvas'),
                 context = canvas.getContext('2d'),
@@ -1945,6 +1979,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 textHeight = 100,
                 textWidth = 0,
                 actualFontSize = this.getUnitVal(10);
+                
             var txt = vals.text;
             if (vals.size) actualFontSize = vals.size;
 
@@ -1957,7 +1992,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             context.font = "normal " + textHeight + "px Arial";
             context.textAlign = "center";
             context.textBaseline = "middle";
-            //context.fillStyle = "#ff0000";
             context.fillStyle = vals.color;
 
             context.fillText(txt, textWidth / 2, textHeight / 2);
@@ -1967,11 +2001,13 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
 
             var material = new THREE.SpriteMaterial({
                 map: texture,
-                useScreenCoordinates: false,
                 transparent: true,
-                opacity: 0.6
+                opacity: 0.5
             });
+            
             material.transparent = true;
+            
+            
             //var textObject = new THREE.Sprite(material);
             var textObject = new THREE.Object3D();
             textObject.position.x = vals.x;
@@ -1988,11 +2024,9 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
 
             textObject.add(sprite);
 
-            //scene.add(textObject);
             return textObject;
         },
-        element: null,
-        isUnitsMm: true, // true for mm, false for inches
+
         getInchesFromMm: function(mm) {
             return mm * 0.0393701;
         },
@@ -2002,9 +2036,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             // if drawing is in inches convert
             return this.getInchesFromMm(val);
         },
+        
         drawAxesToolAndExtents: function() {
-            
-            //return;
             // these are drawn after the gcode is rendered now
             // so we can see if in inch or mm mode
             // these items scale based on that mode
@@ -2013,9 +2046,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             this.drawExtentsLabels();
             this.drawAxes();
         },
-        shadowplane: null,
+
         drawToolhead: function() {
-            
             console.group("drawToolhead");
             
             // remove grid if drawn previously
@@ -2031,132 +2063,73 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 console.log("no previous toolhead or shadowplane.");
             }
             
+            var scale = this.getUnitVal(1);
+            
             // TOOLHEAD WITH SHADOW
             var toolheadgrp = new THREE.Object3D();
-            
-            // SHADOWS
-            if (this.showShadow) {
-                var light = new THREE.DirectionalLight(0xffffff);
-                //var light = new THREE.SpotLight(0xffffff);
-                light.position.set(0, 60, 60);
-                //light.rotation.x = 90 * Math.PI / 180;
-                //light.lookat(
-                //light.target.position.set(0, 0, 0);
-                light.castShadow = true;
-                light.onlyShadow = true;
-                light.shadowDarkness = 0.05;
-                //light.shadowCameraVisible = true; // only for debugging
-                // these six values define the boundaries of the yellow box seen above
-                light.shadowCameraNear = 0;
-                light.shadowCameraFar = this.getUnitVal(1000);
-                light.shadowCameraLeft = this.getUnitVal(-5);
-                light.shadowCameraRight = this.getUnitVal(5);
-                light.shadowCameraTop = 0;
-                light.shadowCameraBottom = this.getUnitVal(-35);
-                //scene.add(light);
-                toolheadgrp.add(light);
-                
-                var light2 = light.clone();
-                light2.position.set(60, 0, 60);
-                light2.shadowCameraLeft = 0; //-5;
-                light2.shadowCameraRight = this.getUnitVal(-35); //5;
-                light2.shadowCameraTop = this.getUnitVal(-5); //0;
-                light2.shadowCameraBottom = this.getUnitVal(5); //-35;
-                light2.shadowDarkness = 0.03;
-                //light2.rotation.z = 90 * Math.PI / 180;
-                toolheadgrp.add(light2);
-            }
-            
+            toolheadgrp.scale.set(scale, scale, scale);
+
             // ToolHead Cylinder
             // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
             var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(0, 5, 40, 15, 1, false), new THREE.MeshNormalMaterial());
             cylinder.overdraw = true;
             cylinder.rotation.x = -90 * Math.PI / 180;
             cylinder.position.z = 20;
-            //cylinder.position.z = 40;
             cylinder.material.opacity = 0.3;
             cylinder.material.transparent = true;
             cylinder.castShadow = true;
-            //cylinder.receiveShadow = true;
-            console.log("toolhead cone:", cylinder);
-            //scene.add(cylinder);
             
-            //light.shadowCamera.lookAt(cylinder);
+            console.log("toolhead cone:", cylinder);
             toolheadgrp.add(cylinder);
             
             if (this.showShadow) {
-                // mesh plane to receive shadows
-                var planeFragmentShader = [
-                    
-                    "uniform vec3 diffuse;",
-                    "uniform float opacity;",
-                    
-                    //THREE.ShaderChunk[ "color_pars_fragment" ],
-                    //THREE.ShaderChunk[ "map_pars_fragment" ],
-                    //THREE.ShaderChunk[ "lightmap_pars_fragment" ],
-                    //THREE.ShaderChunk[ "envmap_pars_fragment" ],
-                    //THREE.ShaderChunk[ "fog_pars_fragment" ],
-                    THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
-                    //THREE.ShaderChunk[ "specularmap_pars_fragment" ],
-                    
-                    "void main() {",
-                    
-                    "gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );",
-                    
-                    //THREE.ShaderChunk[ "map_fragment" ],
-                    //THREE.ShaderChunk[ "alphatest_fragment" ],
-                    //THREE.ShaderChunk[ "specularmap_fragment" ],
-                    //THREE.ShaderChunk[ "lightmap_fragment" ],
-                    //THREE.ShaderChunk[ "color_fragment" ],
-                    //THREE.ShaderChunk[ "envmap_fragment" ],
-                    THREE.ShaderChunk[ "shadowmap_fragment" ],
-                    //THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
-                    //THREE.ShaderChunk[ "fog_fragment" ],
-                    
-                    "gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 - shadowColor.x );",
-                    
-                    "}"
-                    
-                ].join("\n");
+                var light = new THREE.DirectionalLight(0xffffff);
+                light.position.set(0, 100, 100);
+                
+                light.shadow.camera.near = 0;
+                light.shadow.camera.far = this.getUnitVal(1000);
+                light.shadow.camera.left = this.getUnitVal(-100);
+                light.shadow.camera.right = this.getUnitVal(100);
+                light.shadow.camera.top = this.getUnitVal(100);
+                light.shadow.camera.bottom = this.getUnitVal(-100);
+                
+                light.castShadow = true;
+                
+                light.shadow.mapSize.width = 2048;
+                light.shadow.mapSize.height = 2048;
+                
+                toolheadgrp.add(light);
                 
-                var planeMaterial = new THREE.ShaderMaterial({
-                    uniforms: THREE.ShaderLib['basic'].uniforms,
-                    vertexShader: THREE.ShaderLib['basic'].vertexShader,
-                    fragmentShader: planeFragmentShader,
-                    color: 0x0000FF, transparent: true
-                });
                 
-                var planeW = 50; // pixels
-                var planeH = 50; // pixels 
-                var numW = 50; // how many wide (50*50 = 2500 pixels wide)
-                var numH = 50; // how many tall (50*50 = 2500 pixels tall)
-                var plane = new THREE.Mesh( new THREE.PlaneGeometry( planeW*50, planeH*50, planeW, planeH ), new   THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: false, transparent: true, opacity: 0.5 } ) );
-                var plane = new THREE.Mesh( new THREE.PlaneGeometry( planeW*50, planeH*50, planeW, planeH ), planeMaterial );
-                //plane.castShadow = false;
+                // shadow plane
+                var planeGeometry = new THREE.PlaneGeometry(10000, 10000);
+                
+                var planeMaterial = new THREE.ShadowMaterial();
+                planeMaterial.opacity = 0.1;
+                planeMaterial.transparent = true;
+                planeMaterial.depthWrite = false;
+                planeMaterial.depthTest = false;
+                
+                var plane = new THREE.Mesh(planeGeometry, planeMaterial);
+                plane.scale.set(scale, scale, scale);
+                
                 plane.position.z = 0;
+                
+                plane.castShadow = false;
                 plane.receiveShadow = true;
                 
-                console.log("toolhead plane:", plane);
-                //scene.add(plane);
-                //toolheadgrp.add(plane);
+                this.shadowplane = plane;
+                this.sceneAdd(this.shadowplane);
             }
             
-            // scale the whole thing to correctly match mm vs inches
-            var scale = this.getUnitVal(1);
-            if (this.showShadow) plane.scale.set(scale, scale, scale);
-            toolheadgrp.scale.set(scale, scale, scale);
             
             this.toolhead = toolheadgrp;
-            if (this.showShadow) {
-                this.shadowplane = plane;
-                this.sceneAdd(this.shadowplane);
-            }
             this.sceneAdd(this.toolhead);
             
             console.groupEnd();
             
         },
-        grid: null, // stores grid
+
         gridTurnOff: function() {
             if (this.grid != null) {
                 console.log("there was a previous grid. remove it. grid:", this.grid);
@@ -2174,7 +2147,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             }
         },
         drawGrid: function() {
-            
             // remove grid if drawn previously
             if (this.grid != null) {
                 console.log("there was a previous grid. remove it. grid:", this.grid);
@@ -2186,6 +2158,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             // will get mm or inches for grid
             var widthHeightOfGrid; //= this.getUnitVal(200);
             var subSectionsOfGrid; //= this.getUnitVal(10);
+            
             if (this.isUnitsMm) {
                 widthHeightOfGrid = 200; // 200 mm grid should be reasonable
                 subSectionsOfGrid = 10; // 10mm (1 cm) is good for mm work
@@ -2208,18 +2181,16 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             helper.material.opacity = 0.15;
             helper.material.transparent = true;
             helper.receiveShadow = false;
+            
             console.log("helper grid:", helper);
             this.grid = helper;
             this.sceneAdd(this.grid);
-            //this.scene.add(helper);
-
         },
         drawExtentsLabels: function() {
             this.decorateExtents();
         },
-        axes: null, // global property to store axes that we drew
+
         drawAxes: function() {
-            
             // remove axes if they were drawn previously
             if (this.axes != null) {
                 console.log("there was a previous axes. remove it. axes:", this.axes);
@@ -2231,12 +2202,11 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             // axes
             var axesgrp = new THREE.Object3D();
             
-            axes = new THREE.AxisHelper(this.getUnitVal(100));
+            axes = new THREE.AxisHelper(this.getUnitVal(105));
             axes.material.transparent = true;
-            axes.material.opacity = 0.8;
+            axes.material.opacity = 0.35;
             axes.material.depthWrite = false;
             axes.position.set(0,0,-0.0001);
-            //this.scene.add(axes);
             axesgrp.add(axes);
 
             // add axes labels
@@ -2247,6 +2217,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 text: "X",
                 color: "#ff0000"
             });
+            
             var ylbl = this.makeSprite(this.scene, "webgl", {
                 x: 0,
                 y: this.getUnitVal(110),
@@ -2254,6 +2225,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 text: "Y",
                 color: "#00ff00"
             });
+            
             var zlbl = this.makeSprite(this.scene, "webgl", {
                 x: 0,
                 y: 0,
@@ -2265,15 +2237,13 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             axesgrp.add(xlbl);
             axesgrp.add(ylbl);
             axesgrp.add(zlbl);
+            
             this.axes = axesgrp;
             this.sceneAdd(this.axes);
-
         },
-        colorBackground: 0xeeeeee, // this is the background color of the 3d viewer
-        createScene: function (element) {
 
+        createScene: function (element) {
             console.log("inside createScene: element:", element);
-            if (!Detector.webgl) Detector.addGetWebGLMessage();
 
             // store element on this object
             this.element = element;
@@ -2294,15 +2264,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             ].forEach(function (position) {
                 var light = new THREE.DirectionalLight(position[3]);
                 light.position.set(position[0], position[1], position[2]).normalize();
-                /*if (ctr == 0) {
-                    light.castShadow = true;
-                    light.shadowDarkness = 0.95;
-                    light.shadowCameraRight     =  5;
-                    light.shadowCameraLeft     = -5;
-                    light.shadowCameraTop      =  5;
-                    light.shadowCameraBottom   = -5;
-                    light.shadowCameraVisible = true;
-                }*/
                 scene.add(light);
                 ctr++;
             });
@@ -2310,504 +2271,175 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             // Camera...
             // If you make the near and far too much you get
             // a fail on the intersectObjects()
-            var fov = 70,
-                aspect = element.width() / element.height(),
-                near = 0.01, //01, // 1e-6, //
-                far = 10000,
-                camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-            this.camera = camera;
+            var fov = 65;
+            var aspect = element.width() / element.height();
+            var near = 1; //01, // 1e-6, //
+            var far = 1000;
+            var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+            
             camera.rotationAutoUpdate = true;
             camera.position.x = 10;
             camera.position.y = -100;
             camera.position.z = 200;
+            this.camera = camera;
+            
             scene.add(camera);
 
             // Controls
-            //var mouseEvtContainer = $('#com-chilipeppr-widget-3dviewer-renderArea');
-            //console.log(mouseEvtContainer);
-            //controls = new THREE.TrackballControls(camera, mouseEvtContainer[0]);
-            controls = new THREE.TrackballControls(camera, element[0]);
-            this.controls = controls; // set property for later use
-            //controls = new THREE.OrbitControls(camera);
+            controls = new THREE.TrackballControls(camera, element[0]);            
             controls.noPan = false;
             controls.dynamicDampingFactor = 0.99; //0.15;
             controls.rotateSpeed = 2.0;
-            //controls.staticMoving = true;
-            //controls.target.x = 50;
-            //controls.target.y = 100;
-            //controls.autoRotate = true;
+            
+            this.controls = controls; // set property for later use
+            
             console.log("controls:", controls);
-            //controls.target.z = 100;
-            //controls.addEventListener( 'change', render );
+            
+            
             document.addEventListener( 'mousemove', controls.update.bind( controls ), false );
             document.addEventListener( 'touchmove', controls.update.bind( controls ), false );
-
+            
             // Renderer
+            // TODO: review renderer setup, see if we can open up any other options or optimizations
             var renderer;
-            /*
-            var renderer = new THREE.WebGLRenderer({
-                clearColor: 0x000000,
-                clearAlpha: 1
-            });
-            */
-            // var renderer = new THREE.WebGLRenderer({
-            //     antialias: true,
-            //     preserveDrawingBuffer: false,
-            //     alpha: false,
-            //     logarithmicDepthBuffer: false
-            // });
-            
             var webgl = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )();
 
-            if (webgl) {
-                console.log('WebGL Support found!  Success: CP will work optimally on this device!');
-    
-                renderer = new THREE.WebGLRenderer({
-                    antialias: true,
-                    preserveDrawingBuffer: false,
-                    alpha: false,
-                    logarithmicDepthBuffer: false
-                });
-            } else {
+            if (!webgl) {
                 console.error('No WebGL Support found! CRITICAL ERROR!');
+                
                 chilipeppr.publish("/com-chilipeppr-elem-flashmsg/flashmsg", "No WebGL Found!", "This device/browser does not support WebGL or WebGL has crashed. Chilipeppr needs WebGL to render the 3D View.", 10 * 1000);
+               
                 $('#' + this.id + ' .youhavenowebgl').removeClass("hidden");
                 return;
-            };
+            }
+            
+            console.log('WebGL Support found!  Success: CP will work optimally on this device!');
 
+            renderer = new THREE.WebGLRenderer({
+                antialias: !this.disableAA,
+                preserveDrawingBuffer: false,
+                alpha: true,
+                logarithmicDepthBuffer: false
+            });
             
-            this.renderer = renderer;
-            //renderer.setClearColor( scene.fog.color, 1 );
-            //renderer.setClearColor(0xeeeeee, 1);
+            // base properties
             renderer.setClearColor(this.colorBackground, 1);
             renderer.setSize(element.width(), element.height());
             renderer.setPixelRatio( window.devicePixelRatio );
-            element.append(renderer.domElement);
-            //renderer.autoClear = true;
-            //renderer.clear();
             
             // cast shadows
-            renderer.shadowMapEnabled = true;
-            // to antialias the shadow
-            renderer.shadowMapSoft = true;
-            /*
-            renderer.shadowCameraNear = 3;
-            renderer.shadowCameraFar = camera.far;
-            renderer.shadowCameraFov = 50;
-            */
-            /*
-            renderer.shadowMapBias = 0.0039;
-            renderer.shadowMapDarkness = 1.0;
-            renderer.shadowMapWidth = 1024;
-            renderer.shadowMapHeight = 1024;
-            */
-
-            // Arrow Helper
-            /*
-            var dir = new THREE.Vector3( 1, 0, 0 );
-            var origin = new THREE.Vector3( 0, 0, 0 );
-            var length = 100;
-            var hex = 0xffff00;
+            renderer.shadowMap.enabled = this.showShadow;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             
-            var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
-            scene.add( arrowHelper );
-            */
+            this.renderer = renderer;
+            element.append(renderer.domElement);
 
-            //scene.add( new THREE.PointLightHelper( light, 5 ) );
-            // Show grid
 
-            /* MOVED TO METHOD
-            var helper = new THREE.GridHelper(200, 10);
-            helper.setColors(0x0000ff, 0x808080);
-            helper.position.y = 0;
-            helper.position.x = 0;
-            helper.position.z = 0;
-            helper.rotation.x = 90 * Math.PI / 180;
-            helper.material.opacity = 0.2;
-            helper.material.transparent = true;
-            helper.receiveShadow = true;
-            console.log("helper:", helper);
-            scene.add(helper);
-            */
-            //this.drawGrid();
+            // Action!
+            var mouseEvtContainer = $('#com-chilipeppr-widget-3dviewer-renderArea');
+            console.log(mouseEvtContainer);
             
-            /* MOVED TO METHOD
-            // TOOLHEAD WITH SHADOW
-            var toolheadgrp = new THREE.Object3D();
+            // TODO: wakeAnimate change
+            /*
             
-            // SHADOWS
-            var light = new THREE.DirectionalLight(0xffffff);
-            //var light = new THREE.SpotLight(0xffffff);
-            light.position.set(0, 60, 60);
-            //light.rotation.x = 90 * Math.PI / 180;
-            //light.lookat(
-            //light.target.position.set(0, 0, 0);
-            light.castShadow = true;
-            light.onlyShadow = true;
-            light.shadowDarkness = 0.05;
-            //light.shadowCameraVisible = true; // only for debugging
-            // these six values define the boundaries of the yellow box seen above
-            light.shadowCameraNear = 0;
-            light.shadowCameraFar = 1000;
-            light.shadowCameraLeft = -5;
-            light.shadowCameraRight = 5;
-            light.shadowCameraTop = 0;
-            light.shadowCameraBottom = -35;
-            //scene.add(light);
-            toolheadgrp.add(light);
-            
-            var light2 = light.clone();
-            light2.position.set(60, 0, 60);
-            light2.shadowCameraLeft = 0; //-5;
-            light2.shadowCameraRight = -35; //5;
-            light2.shadowCameraTop = -5; //0;
-            light2.shadowCameraBottom = 5; //-35;
-            light2.shadowDarkness = 0.03;
-            //light2.rotation.z = 90 * Math.PI / 180;
-            toolheadgrp.add(light2);
-
-            // ToolHead Cylinder
-            // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
-            var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(0, 5, 40, 15, 1, false), new THREE.MeshNormalMaterial());
-            cylinder.overdraw = true;
-            cylinder.rotation.x = -90 * Math.PI / 180;
-            cylinder.position.z = 20;
-            //cylinder.position.z = 40;
-            cylinder.material.opacity = 0.5;
-            cylinder.material.transparent = true;
-            cylinder.castShadow = true;
-            //cylinder.receiveShadow = true;
-            console.log("toolhead cone:", cylinder);
-            //scene.add(cylinder);
             
-            //light.shadowCamera.lookAt(cylinder);
-
-            toolheadgrp.add(cylinder);
+            console.log("this wantAnimate:", this);
             
-            this.toolhead = toolheadgrp;
-            scene.add(toolheadgrp);
+            this.wakeAnimate();
             */
-            //this.drawToolhead();
             
-
-            /*
-            // sparks
-            var particleGroup = new SPE.Group({
-                texture: '', 
-                maxAge: 1,
-                colorize: 1,
-                transparent: 1,
-                alphaTest: 0.5,
-                depthWrite: false,
-                depthTest: true,
-                blending: THREE.NormalBlending
-            });
-
-            var emitter = new SPE.Emitter({
-                position: new THREE.Vector3(0, 0, 0),
-                positionSpread: new THREE.Vector3( 0, 0, 1 ),
-
-                acceleration: new THREE.Vector3(0, -1, 0),
-                accelerationSpread: new THREE.Vector3( 1, 0, 1 ),
-
-                velocity: new THREE.Vector3(0, 0, 1),
-                velocitySpread: new THREE.Vector3(1, 1, 1),
-
-                colorStart: new THREE.Color('red'),
-                colorEnd: new THREE.Color('blue'),
-                opacityStart: 0,
-                opacityStartSpread: 0,
-                opacityMiddle: 0.5,
-                opacityMiddleSpread: 0,
-                opacityEnd: 1,
-                opacityEndSpread: 1,
-                
-                sizeStart: 0.01,
-                sizeEnd: 0.5,
-
-                particleCount: 5
-            });
-
-            particleGroup.addEmitter( emitter );
-            var clock = new THREE.Clock();
-            scene.add( particleGroup.mesh );
-            */
-
-            /* MOVED TO METHOD
-            // axes
-            axes = new THREE.AxisHelper(100);
-            scene.add(axes);
-
-            // add axes labels
-            this.makeSprite(scene, "webgl", {
-                x: 110,
-                y: 0,
-                z: 0,
-                text: "X",
-                color: "#ff0000"
-            });
-            this.makeSprite(scene, "webgl", {
-                x: 0,
-                y: 110,
-                z: 0,
-                text: "Y",
-                color: "#00ff00"
+            var that = this;
+            
+            
+            controls.addEventListener('start', function() {
+                that.moveAnimate = true;
+                that.animate();
             });
-            this.makeSprite(scene, "webgl", {
-                x: 0,
-                y: 0,
-                z: 110,
-                text: "Z",
-                color: "#0000ff"
+            
+            controls.addEventListener('end', function() {
+                that.animate();
+                that.moveAnimate = false;
             });
-            */
-            //this.drawAxes();
-
-            // Action!
-            //controls.addEventListener( 'change', test );
-            //element.on('change', test);
-            var mouseEvtContainer = $('#com-chilipeppr-widget-3dviewer-renderArea');
-            console.log(mouseEvtContainer);
-            //mouseEvtContainer.on('mousemove mousedown mousewheel hover click dblclick scroll touchstart touchmove touchenter focus resize', this.wakeAnimate.bind(this));
-            //controls.addEventListener( 'change', this.wakeAnimate.bind(this));
-            controls.addEventListener( 'start', this.animNoSleep.bind(this));
-            controls.addEventListener( 'end', this.animAllowSleep.bind(this));
-            //mouseEvtContainer.on('', wakeAnimate);
-            /*
-            function test(evt) {
-                console.log("got event listener", evt);
-            }
-            function slowDown() {
-                requestAnimationFrame(animate); // And repeat...
-            }
-            */
-            console.log("this wantAnimate:", this);
-            this.wantAnimate = true;
-            //this.camera = camera; 
-            //var that = this;
-            /*
-            function animate() {
-                TWEEN.update();
-                //setTimeout(slowDown, 100);
-                if (that.wantAnimate) requestAnimationFrame(animate); // And repeat...
-                controls.update();
-                // Use a fixed time-step here to avoid gaps
-                //render( clock.getDelta() );
-                //render();
-                renderer.render(scene, camera);
-            }
-            */
             
-            //setTimeout(this.sleepAnimate, 5000);
-
-            /*
-            function render2(dt) {
-                //controls.update();
-                //particleGroup.tick( dt );
-                renderer.render(scene, camera);
-                //console.log(camera);
-                //TWEEN.update();
-                requestAnimationFrame(render); // And repeat...
-                //stats.update();
-            }
-            */
-            //render( clock.getDelta() );
-            //setTimeout(animate, 0);
-            //render();
-            //animate();
-            //this.animate();
-            this.wakeAnimate();
-
+            // our very first animate call
+            this.animate();
+            
             // Fix coordinates up if window is resized.
-            var that = this;
             $(window).on('resize', function () {
-                //console.log("got resize event. resetting aspect ratio.");
-                renderer.setSize(element.width(), element.height());
-                camera.aspect = element.width() / element.height();
-                camera.updateProjectionMatrix();
-                controls.screen.width = window.innerWidth;
-                controls.screen.height = window.innerHeight;
-                that.wakeAnimate();
-                //render();
+                // TODO: explore a way to correctly callback, rather than duplicate code.
+                that.renderer.setSize(element.width(), element.height());
+            
+                that.camera.aspect = element.width() / element.height();
+                that.camera.updateProjectionMatrix();
+            
+                that.controls.screen.width = that.domElement.width();
+                that.controls.screen.height = that.domElement.height();
+                
+                // TODO: wakeAnimate change
+                that.animate();
             });
 
             return scene;
         },
         resize: function() {
-            //console.log("got resize event. resetting aspect ratio.");
             this.renderer.setSize(this.element.width(), this.element.height());
+            
             this.camera.aspect = this.element.width() / this.element.height();
             this.camera.updateProjectionMatrix();
-            this.controls.screen.width = window.innerWidth;
-            this.controls.screen.height = window.innerHeight;
-            this.wakeAnimate();
-        },
-        mytimeout: null,
-        renderFrameCtr: 0, // keep track of fps
-        fpsCounterInterval: null,
-        fpsEl: null,
-        fpsCounterStart: function() {
-            
-            if (this.fpsEl == null) {
-                // pull dom el and cache so the dom updates are efficient
-                this.fpsEl = $('#com-chilipeppr-widget-3dviewer .frames-per-sec');
-            }
-
-            // if 3d viewer disabled, exit
-            if (this.animEnable == false) {
-                this.fpsEl.html('<span class="alert-danger" style="font-size:12px;">Manually Disabled. Go to cog wheel icon to choose a frame rate to re-enable.</span>');
-                return;
-            }
-            
-            // update fps each second
-            if (this.fpsCounterInterval == null) {
-                // start fps counting
-                this.renderFrameCtr = 0;
-                console.log("starting fps counting");
-                this.fpsCounterInterval = setInterval(this.fpsCounterOnInterval.bind(this), 1000);
-            }
-        },
-        fpsCounterOnInterval: function() {
-            this.fpsEl.html(this.renderFrameCtr + "&nbsp;fps");
-            this.renderFrameCtr = 0;
-        },
-        fpsCounterEnd: function() {
-            console.log("stopping fps counting");
-            clearInterval(this.fpsCounterInterval);
-            this.fpsCounterInterval = null;
-            console.log("checking if anim is disabled. this.animEnable:", this.animEnable);
-            if (this.animEnable == false) {
-                this.fpsEl.html('<div class="alert-danger" style="font-size:12px;line-height: 12px;padding: 6px;">Manually Disabled. Go to cog wheel icon to choose a frame rate to re-enable.</div>');
-            } else {
-                // set fps to just a dash
-                this.fpsEl.html("-&nbsp;fps");
-            }
-        },
-        setFrameRate: function(rate) {
             
-            localStorage.setItem ('fpsRate', rate);
-            console.log ("Set fpsRate in storage:  ", rate);
+            this.controls.screen.width = this.domElement.width();
+            this.controls.screen.height = this.domElement.height();
             
-            // see if disabled
-            if (rate == 0) {
-                this.animateDisabled();
-            } else {
-                this.animateEnabled();
-            }
-            
-            // rate is frames per second
-            if (rate == 5) this.frameRateDelayMs = 200;
-            if (rate == 10) this.frameRateDelayMs = 100;
-            if (rate == 15) this.frameRateDelayMs = 70;
-            if (rate == 30) this.frameRateDelayMs = 32;
-            if (rate == 60) this.frameRateDelayMs = 0;
-        },
-        animEnable: true, // boolean tracking whether we allow animation
-        animateDisabled: function() {
-            console.log("disabling animation");
-            this.animEnable = false;
-            this.fpsEl.html('<span class="alert-danger">Disabled</span>');
+            // TODO: wakeAnimate change
+            this.animate();
         },
-        animateEnabled: function() {
-            console.log("enabling animation");
-            this.animEnable = true;
+        
+        wakeAnimate: function() {
+            // Backwards compat
+            this.animate();
         },
-        // reduce rate by 2, 3, 4, etc. 60fps becomes 30fps
-        //frameRateSkipEvery: [false, true, true, true, true], 
-        //frameRateSkipEvery: [false], 
-        //frameRateCtr: 0, // counts to skip animate
         
-        // 200 = 5fps, 100 = 10fps, 70=15fps, 50=20fps, 40=25fps, 30=30fps
-        frameRateDelayMs: 32, 
         animate: function() {
+            var that = this;
             
-            // if 3d viewer disabled, exit
-            if (this.animEnable == false) {
-                console.log("animate(). this.animEnable false, so exiting.");
-                return;
-            }
+            // TODO: Implement dynamic scaling for animationLatencyDelay based on assessed load 
             
-            // see if we should exit to reduce frame count
-            /*
-            if (this.frameRateSkipEvery[this.frameRateCtr]) {
-                if (this.frameRateCtr == this.frameRateSkipEvery.length - 1)
-                    this.frameRateCtr = 0;
-                else
-                    this.frameRateCtr++;
-                requestAnimationFrame(this.animate.bind(this));
-                return;
+            if (this.fpsCalculationTimer == null) {
+                // calculate the actual fps every 2 seconds
+                this.fpsCalculationTimer = setInterval(function() {
+                    var fps = (that.renderFrameCount / 2);
+                    that.renderFrameCount = 0;
+                    $('.frames-per-sec').html(fps + "&nbsp;fps");
+                    
+                    // scale our animation delay based on actual fps achieved
+                    if (fps > 30) {
+                        this.animationLatencyDelay = this.animationLatencyDelayDefault;
+                    } else if (fps > 20) {
+                        this.animationLatencyDelay = 70;
+                    } else if (fps > 10) {
+                        this.animationLatencyDelay = 150;
+                    } else {
+                        this.animationLatencyDelay = 300;
+                    }
+                }, 2000);
             }
-            this.frameRateCtr++;
-            if (this.frameRateCtr > 200) this.frameRateCtr = 0; // prevent overruns
-            */
             
-            TWEEN.update();
-            if (this.wantAnimate) {
+            if ((this.moveAnimate || this.gotoAnimate || this.tweenAnimate || this.inspectAnimate) && this.animationLatencyTimer == null) {
+                var animationDelay = (!this.moveAnimate && this.disableAnimation) ? 2000 : this.animationLatencyDelay;
                 
-                // see if we're adding delay to slow frame rate
-                if (this.frameRateDelayMs > 0) {
-                    var that = this;
-                    setTimeout(function() {
-                        requestAnimationFrame(that.animate.bind(that));
-                    }, this.frameRateDelayMs);
-                } else {
-                    requestAnimationFrame(this.animate.bind(this));
-                }
+                this.animationLatencyTimer = setTimeout(function() {
+                    TWEEN.update();
+                    requestAnimationFrame(that.animate.bind(that));
+                    that.animationLatencyTimer = null;
+                }, animationDelay);
             }
+        
             this.controls.update();
             this.renderer.render(this.scene, this.camera);
-            this.renderFrameCtr++;
-        },
-        wakeAnimate: function(evt) {
-            
-            // if 3d viewer disabled, exit
-            if (this.animEnable == false) {
-                return;
-            }
-            
-            //console.log("wakeAnimate:", evt);
-            this.wantAnimate = true;
-            this.fpsCounterStart();
-            //controls.update();
-            //clearTimeout(this.mytimeout);
-            if (!this.mytimeout) {
-                this.mytimeout = setTimeout(this.sleepAnimate.bind(this), 10000);
-                //console.log("wakeAnimate");
-                requestAnimationFrame(this.animate.bind(this));
-            }
-        },
-        sleepAnimate: function() {
-            this.mytimeout = null;
-            if (this.isNoSleepMode) {
-                // skip sleeping the anim
-                console.log("Being asked to sleep anim, but in NoSleepMode");
-            } else {
-                this.wantAnimate = false;
-                this.fpsCounterEnd();
-                console.log("slept animate");
-            }
-        },
-        cancelSleep: function() {
-            clearTimeout(this.mytimeout);
-        },
-        isNoSleepMode: false,
-        animNoSleep: function() {
-            //console.log("anim no sleep");
-            this.isNoSleepMode = true;
-            //this.cancelSleep();
-            this.wakeAnimate();
-        },
-        animAllowSleep: function() {
-            //console.log("anim allow sleep");
-            
-            // even if we're being asked to allow sleep
-            // but the tween is playing, don't allow it
-            if (this.tweenIsPlaying) return;
-            
-            // if we get here, then allow sleep
-            this.isNoSleepMode = false;
-            if (!this.mytimeout) this.mytimeout = setTimeout(this.sleepAnimate.bind(this), 5000);
+            this.renderFrameCount++;
         },
+        
+        
         /**
          * Parses a string of gcode instructions, and invokes handlers for
          * each type of command.
@@ -2815,18 +2447,15 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
          * Special handler:
          *   'default': Called if no other handler matches.
          */
-        GCodeParser: function (handlers) {
+        GCodeParser: function (handlers, modecmdhandlers) {
             this.handlers = handlers || {};
+            this.modecmdhandlers = modecmdhandlers || {};
             
             this.lastArgs = {cmd: null};
             this.lastFeedrate = null;
             this.isUnitsMm = true;
             
             this.parseLine = function (text, info) {
-                //text = text.replace(/;.*$/, '').trim(); // Remove comments
-                //text = text.replace(/\(.*$/, '').trim(); // Remove comments
-                //text = text.replace(/<!--.*?-->/, '').trim(); // Remove comments
-                
                 var origtext = text;
                 // remove line numbers if exist
                 if (text.match(/^N/i)) {
@@ -2853,22 +2482,29 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     // make sure to remove inline comments
                     text = text.replace(/\(.*?\)/g, "");
                 }
-                //console.log("gcode txt:", text);
                 
                 if (text && !isComment) {
-                    //console.log("there is txt and it's not a comment");
-                    //console.log("");
-                    // preprocess XYZIJ params to make sure there's a space
-                    //text = text.replace(/(X|Y|Z|I|J|K)/ig, "$1 ");
-                    //console.log("gcode txt:", text);
-                    
                     // strip off end of line comment
                     text = text.replace(/(;|\().*$/, ""); // ; or () trailing
                     //text = text.replace(/\(.*$/, ""); // () trailing
                     
-                    var tokens = text.split(/\s+/);
-                    //console.log("tokens:", tokens);
-                    if (tokens) {
+                    var tokens = [];
+                    
+                    // Execute any non-motion commands on the line immediately
+                    // Add other commands to the tokens list for later handling
+                    // Segments are not created for non-motion commands;
+                    // the segment for this line is created later
+                    
+                    text.split(/\s+/).forEach(function (token) {
+                        var modehandler = modecmdhandlers[token.toUpperCase()];
+                        if (modehandler) {
+                            modehandler();
+                        } else {
+                            tokens.push(token);
+                        }
+                    });
+                    
+                    if (tokens.length) {
                         var cmd = tokens[0];
                         cmd = cmd.toUpperCase();
                         // check if a g or m cmd was included in gcode line
@@ -2877,23 +2513,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         // cmd is what's assumed
                         isComment = false;
                         if (!cmd.match(/^(G|M|T)/i)) {
-                            // if comment, drop it
-                            /*
-                            if (cmd.match(/(;|\(|<)/)) {
-                                // is comment. do nothing.
-                                isComment = true;
-                                text = origtext;
-                                //console.log("got comment:", cmd);
-                            } else {
-                            */
-
-                                //console.log("no cmd so using last one. lastArgs:", this.lastArgs);
-                                // we need to use the last gcode cmd
-                                cmd = this.lastArgs.cmd;
-                                //console.log("using last cmd:", cmd);
-                                tokens.unshift(cmd); // put at spot 0 in array
-                                //console.log("tokens:", tokens);
-                            //}
+                            cmd = this.lastArgs.cmd;
+                            tokens.unshift(cmd);
                         } else {
                             
                             // we have a normal cmd as opposed to just an xyz pos where
@@ -2901,6 +2522,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                             // however, need to remove inline comments (TODO. it seems parser works fine for now)
                             
                         }
+                        
                         var args = {
                             'cmd': cmd,
                             'text': text,
@@ -2918,17 +2540,16 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                                 if (token && token.length > 0) {
                                     var key = token[0].toLowerCase();
                                     var value = parseFloat(token.substring(1));
-                                    //console.log("value:", value, "key:", key);
-                                    //if (isNaN(value))
-                                    //    console.error("got NaN. val:", value, "key:", key, "tokens:", tokens);
+                                    
                                     args[key] = value;
                                 } else {
                                     //console.log("couldn't parse token in foreach. weird:", token);
                                 }
                             });
                         }
+                        
                         var handler = this.handlers[cmd] || this.handlers['default'];
-
+                        
                         // don't save if saw a comment
                         if (!args.isComment) {
                             this.lastArgs = args;
@@ -2936,9 +2557,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         } else {
                             //console.log("this was a comment, so didn't save lastArgs");
                         }
-                        //console.log("calling handler: cmd:", cmd, "args:", args, "info:", info);
+                        
                         if (handler) {
-                            
                             // do extra check here for units. units are
                             // specified via G20 or G21. We need to scan
                             // each line to see if it's inside the line because
@@ -2962,11 +2582,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                             } else {
                                 // use feedrate from prior lines
                                 args.feedrate = this.lastFeedrate;
-                                //if (args.feedrate 
                             }
-                            
-                            //console.log("about to call handler. args:", args, "info:", info, "this:", this);
-                            
+                                                        
                             return handler(args, info, this);
                         } else {
                             console.error("No handler for gcode command!!!");
@@ -3000,9 +2617,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 }
             }
         },
-        colorG0: 0x00ff00,
-        colorG1: 0x0000ff,
-        colorG2: 0x999900,
+        
         createObjectFromGCode: function (gcode, indxMax) {
             //debugger;
             // Credit goes to https://github.com/joewalnes/gcode-viewer
@@ -3012,13 +2627,13 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             //    http://reprap.org/wiki/G-code
             //    http://en.wikipedia.org/wiki/G-code
             //    SprintRun source code
-
-            // these are extra Object3D elements added during
-            // the gcode rendering to attach to scene
-            this.extraObjects = [];
-            this.extraObjects["G17"] = [];
-            this.extraObjects["G18"] = [];
-            this.extraObjects["G19"] = [];
+            
+            var object = new THREE.Object3D();
+            
+            // reset our arrays
+            this.parsedLines = [];
+            this.lineObjects = [];
+            
             this.offsetG92 = {x:0, y:0, z:0, e:0};
 
             var lastLine = {
@@ -3038,11 +2653,10 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             // its own userData info
             // G2/G3 moves are their own child of lots of lines so
             // that even the simulator can follow along better
-            var new3dObj = new THREE.Group();
             var plane = "G17"; //set default plane to G17 - Assume G17 if no plane specified in gcode.
             var layers = [];
             var layer = undefined;
-            var lines = [];
+            // TODO: lines tear out
             var totalDist = 0;
             var bbbox = {
                 min: {
@@ -3056,7 +2670,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     z: -100000
                 }
             };
-            var bbbox2 = {
+            
+            this.sceneBoundaries = {
                 min: {
                     x: 100000,
                     y: 100000,
@@ -3070,7 +2685,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             };
 
             this.newLayer = function (line) {
-                //console.log("layers:", layers, "layers.length", layers.length);
                 layer = {
                     type: {},
                     layer: layers.length,
@@ -3080,32 +2694,31 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             };
 
             this.getLineGroup = function (line, args) {
-                //console.log("getLineGroup:", line);
                 if (layer == undefined) this.newLayer(line);
+                
                 var speed = Math.round(line.e / 1000);
                 var grouptype = (line.extruding ? 10000 : 0) + speed;
-                //var color = new THREE.Color(line.extruding ? 0xff00ff : 0x0000ff);
-                var color = new THREE.Color(line.extruding ? 0xff00ff : this.colorG1);
+                
+                var color = new THREE.Color(line.extruding ? this.colorActive : this.colorG1);
+                
                 if (line.g0) {
                     grouptype =  "g0";
-                    //color = new THREE.Color(0x00ff00);
                     color = new THREE.Color(this.colorG0);
                 } else if (line.g2) {
                     grouptype = "g2";
-                    //color = new THREE.Color(0x999900);
                     color = new THREE.Color(this.colorG2);
                 } else if (line.arc) {
                     grouptype = "arc";
-                    color = new THREE.Color(0x0099ff);
+                    color = new THREE.Color(this.colorArc);
                 }
+                
                 // see if we have reached indxMax, if so draw, but 
                 // make it ghosted
                 if (args.indx > indxMax) {
                     grouptype = "ghost";
-                    //console.log("args.indx > indxMax", args, indxMax);
-                    color = new THREE.Color(0x000000);
+                    color = new THREE.Color(this.colorGhosted);
                 }
-                //if (line.color) color = new THREE.Color(line.color);
+
                 if (layer.type[grouptype] == undefined) {
                     layer.type[grouptype] = {
                         type: grouptype,
@@ -3116,7 +2729,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         material: new THREE.LineBasicMaterial({
                             opacity: line.extruding ? 0.3 : line.g2 ? 0.2 : 0.5,
                             transparent: true,
-                            linewidth: 1,
+                            linewidth: this.lineWidth,
                             vertexColors: THREE.FaceColors
                         }),
                         geometry: new THREE.Geometry(),
@@ -3125,40 +2738,35 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         layer.type[grouptype].material.opacity = 0.05;
                     }
                 }
+                
                 return layer.type[grouptype];
             };
 
             this.drawArc = function(aX, aY, aZ, endaZ, aRadius, aStartAngle, aEndAngle, aClockwise, plane) {
-                //console.log("drawArc:", aX, aY, aZ, aRadius, aStartAngle, aEndAngle, aClockwise);
                 var ac = new THREE.ArcCurve(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise);
-                //console.log("ac:", ac);
+
                 var acmat = new THREE.LineBasicMaterial({
-                    color: 0x00aaff,
-                    opacity: 0.5,
+                    color: this.colorArc,
+                    opacity: 0.9,
                     transparent: true
                 });
-                var acgeo = new THREE.Geometry();
+                
+                var geometry = new THREE.Geometry();
                 var ctr = 0;
                 var z = aZ;
+                
                 ac.getPoints(20).forEach(function (v) {
-                    //console.log(v);
                     z = (((endaZ - aZ) / 20) * ctr) + aZ;
-                    acgeo.vertices.push(new THREE.Vector3(v.x, v.y, z));
+                    geometry.vertices.push(new THREE.Vector3(v.x, v.y, z));
                     ctr++;
                 });
-                var aco = new THREE.Line(acgeo, acmat);
-                //aco.position.set(pArc.x, pArc.y, pArc.z);
-                //console.log("aco:", aco);
-                this.extraObjects[plane].push(aco);
+                
+                var aco = new THREE.Line( this.convertLineGeometryToBufferGeometry(geometry, new THREE.Color(this.colorArc)), acmat );
+                
                 return aco;
             };
             
             this.drawArcFrom2PtsAndCenter = function(vp1, vp2, vpArc, args) {
-                //console.log("drawArcFrom2PtsAndCenter. vp1:", vp1, "vp2:", vp2, "vpArc:", vpArc, "args:", args);
-                
-                //var radius = vp1.distanceTo(vpArc);
-                //console.log("radius:", radius);
-                
                 // Find angle
                 var p1deltaX = vpArc.x - vp1.x;
                 var p1deltaY = vpArc.y - vp1.y; 
@@ -3168,7 +2776,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 var p2deltaY = vpArc.y - vp2.y; 
                 var p2deltaZ = vpArc.z - vp2.z;
 
-                switch(args.plane){
+                switch (args.plane){
                     case "G18":
                         var anglepArcp1 = Math.atan(p1deltaZ / p1deltaX);
                         var anglepArcp2 = Math.atan(p2deltaZ / p2deltaX);
@@ -3185,16 +2793,19 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 // Draw arc from arc center
                 var radius = vpArc.distanceTo(vp1);
                 var radius2 = vpArc.distanceTo(vp2);
+                
                 //console.log("radius:", radius);
                 
-                if (Number((radius).toFixed(2)) != Number((radius2).toFixed(2))) console.log("Radiuses not equal. r1:", radius, ", r2:", radius2, " with args:", args, " rounded vals r1:", Number((radius).toFixed(2)), ", r2:", Number((radius2).toFixed(2)));
+                if (Number((radius).toFixed(2)) != Number((radius2).toFixed(2))) {
+                    console.log("Radiuses not equal. r1:", radius, ", r2:", radius2, " with args:", args, " rounded vals r1:", Number((radius).toFixed(2)), ", r2:", Number((radius2).toFixed(2)));
+                }
                 
                 // arccurve
                 var clwise = true;
                 if (args.clockwise === false) clwise = false;
-                //if (anglepArcp1 < 0) clockwise = false;
-
-                switch(args.plane){
+                
+                
+                switch (args.plane) {
                     case "G19":
                         if (p1deltaY >= 0) anglepArcp1 += Math.PI;
                         if (p2deltaY >= 0) anglepArcp2 += Math.PI;
@@ -3203,11 +2814,11 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         if (p1deltaX >= 0) anglepArcp1 += Math.PI;
                         if (p2deltaX >= 0) anglepArcp2 += Math.PI;
                 }
-
-                if (anglepArcp1 === anglepArcp2 && clwise === false)
+                
+                if (anglepArcp1 === anglepArcp2 && clwise === false) {
                     // Draw full circle if angles are both zero, 
                     // start & end points are same point... I think
-                    switch(args.plane){
+                    switch (args.plane) {
                         case "G18":
                             var threeObj = this.drawArc(vpArc.x, vpArc.z, (-1*vp1.y), (-1*vp2.y), radius, anglepArcp1, (anglepArcp2 + (2*Math.PI)), clwise, "G18");
                             break;
@@ -3217,8 +2828,8 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         default:
                             var threeObj = this.drawArc(vpArc.x, vpArc.y, vp1.z, vp2.z, radius, anglepArcp1, (anglepArcp2 + (2*Math.PI)), clwise, "G17");
                     }
-                else
-                    switch(args.plane){
+                } else {
+                    switch (args.plane) {
                         case "G18":
                             var threeObj = this.drawArc(vpArc.x, vpArc.z, (-1*vp1.y), (-1*vp2.y), radius, anglepArcp1, anglepArcp2, clwise, "G18");
                             break;
@@ -3228,39 +2839,22 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         default:
                             var threeObj = this.drawArc(vpArc.x, vpArc.y, vp1.z, vp2.z, radius, anglepArcp1, anglepArcp2, clwise, "G17");
                     }
+                }
+                
                 return threeObj;
             };
             
-            this.addSegment = function (p1, p2, args) {
-                //console.log("");
-                //console.log("addSegment p2:", p2);
-                // add segment to array for later use
-                lines.push({
-                    p2: p2,
-                    'args': args
-                });
-
+            this.addSegment = function(p1, p2, args) {
+                
                 var group = this.getLineGroup(p2, args);
                 var geometry = group.geometry;
 
                 group.segmentCount++;
                 // see if we need to draw an arc
                 if (p2.arc) {
-                    //console.log("");
-                    //console.log("drawing arc. p1:", p1, ", p2:", p2);
+                    var vp1 = new THREE.Vector3(p1.x, p1.y, p1.z);
+                    var vp2 = new THREE.Vector3(p2.x, p2.y, p2.z);
                     
-                    //var segmentCount = 12;
-                    // figure out the 3 pts we are dealing with
-                    // the start, the end, and the center of the arc circle
-                    // radius is dist from p1 x/y/z to pArc x/y/z
-                    //if(args.clockwise === false || args.cmd === "G3"){
-                    //    var vp2 = new THREE.Vector3(p1.x, p1.y, p1.z);
-                    //    var vp1 = new THREE.Vector3(p2.x, p2.y, p2.z);
-                    //}
-                    //else {
-                        var vp1 = new THREE.Vector3(p1.x, p1.y, p1.z);
-                        var vp2 = new THREE.Vector3(p2.x, p2.y, p2.z);
-                    //}   
                     var vpArc;
                     
                     // if this is an R arc gcode command, we're given the radius, so we
@@ -3293,10 +2887,18 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         // y = y3 - sqrt(r^2-(q/2)^2)*(x2-x1)/q  
                         var pArc_1 = undefined;
                         var pArc_2 = undefined;
+                        
                         var calc = Math.sqrt((radius * radius) - Math.pow(q / 2, 2));
+                        
+                        // calc can be NaN if q/2 is epsilon larger than radius due to finite precision
+                        // When that happens, the calculated center is incorrect
+                        if (isNaN(calc)) {
+                            calc = 0.0;
+                        }
+                        
                         var angle_point = undefined;
                         
-                        switch(args.plane){
+                        switch (args.plane) {
                             case "G18":
                                 pArc_1 = {
                                     x: x3 + calc * (p1.z - p2.z) / q,
@@ -3307,12 +2909,11 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                                     y: y3 - calc * (p2.y - p1.y) / q, 
                                     z: z3 - calc * (p2.x - p1.x) / q };
                                 angle_point = Math.atan2(p1.z, p1.x) - Math.atan2(p2.z, p2.x);
-                                if(((p1.x-pArc_1.x)*(p1.z+pArc_1.z))+((pArc_1.x-p2.x)*(pArc_1.z+p2.z)) >= 
+                                if (((p1.x-pArc_1.x)*(p1.z+pArc_1.z))+((pArc_1.x-p2.x)*(pArc_1.z+p2.z)) >= 
                                    ((p1.x-pArc_2.x)*(p1.z+pArc_2.z))+((pArc_2.x-p2.x)*(pArc_2.z+p2.z))){
                                     var cw = pArc_1;
                                     var ccw = pArc_2;
-                                }
-                                else{
+                                } else {
                                     var cw = pArc_2;
                                     var ccw = pArc_1;
                                 }
@@ -3327,12 +2928,11 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                                     y: y3 - calc * (p1.z - p2.z) / q, 
                                     z: z3 - calc * (p2.y - p1.y) / q };
                                 
-                                if(((p1.y-pArc_1.y)*(p1.z+pArc_1.z))+((pArc_1.y-p2.y)*(pArc_1.z+p2.z)) >= 
+                                if (((p1.y-pArc_1.y)*(p1.z+pArc_1.z))+((pArc_1.y-p2.y)*(pArc_1.z+p2.z)) >= 
                                    ((p1.y-pArc_2.y)*(p1.z+pArc_2.z))+((pArc_2.y-p2.y)*(pArc_2.z+p2.z))){
                                     var cw = pArc_1;
                                     var ccw = pArc_2;
-                                }
-                                else{
+                                } else {
                                     var cw = pArc_2;
                                     var ccw = pArc_1;
                                 }
@@ -3346,37 +2946,30 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                                     x: x3 - calc * (p1.y - p2.y) / q,
                                     y: y3 - calc * (p2.x - p1.x) / q, 
                                     z: z3 - calc * (p2.z - p1.z) / q };
-                                if(((p1.x-pArc_1.x)*(p1.y+pArc_1.y))+((pArc_1.x-p2.x)*(pArc_1.y+p2.y)) >= 
+                                if (((p1.x-pArc_1.x)*(p1.y+pArc_1.y))+((pArc_1.x-p2.x)*(pArc_1.y+p2.y)) >= 
                                    ((p1.x-pArc_2.x)*(p1.y+pArc_2.y))+((pArc_2.x-p2.x)*(pArc_2.y+p2.y))){
                                     var cw = pArc_1;
                                     var ccw = pArc_2;
-                                }
-                                else{
+                                } else {
                                     var cw = pArc_2;
                                     var ccw = pArc_1;
                                 }
                         }
                         
-                        if((p2.clockwise === true && radius >= 0) || (p2.clockwise === false && radius < 0)) vpArc = new THREE.Vector3(cw.x, cw.y, cw.z);
-                        else vpArc = new THREE.Vector3(ccw.x, ccw.y, ccw.z);
+                        if ((p2.clockwise === true && radius >= 0) || (p2.clockwise === false && radius < 0)) {
+                            vpArc = new THREE.Vector3(cw.x, cw.y, cw.z);
+                        } else {
+                            vpArc = new THREE.Vector3(ccw.x, ccw.y, ccw.z);
+                        } 
                         
                     } else {
-                        // this code deals with IJK gcode commands
-                        /*if(args.clockwise === false || args.cmd === "G3")
-                            var pArc = {
-                                x: p2.arci ? p1.x + p2.arci : p1.x,
-                                y: p2.arcj ? p1.y + p2.arcj : p1.y,
-                                z: p2.arck ? p1.z + p2.arck : p1.z,
-                            };
-                        else*/
                         var pArc = {
-                            x: p2.arci ? p1.x + p2.arci : p1.x,
-                            y: p2.arcj ? p1.y + p2.arcj : p1.y,
-                            z: p2.arck ? p1.z + p2.arck : p1.z,
+                            x: p2.arci,
+                            y: p2.arcj,
+                            z: p2.arck
                         };
-                        //console.log("new pArc:", pArc);
+
                         vpArc = new THREE.Vector3(pArc.x, pArc.y, pArc.z);
-                        //console.log("vpArc:", vpArc);
                     }
                     
                     var threeObjArc = this.drawArcFrom2PtsAndCenter(vp1, vp2, vpArc, args);
@@ -3384,23 +2977,12 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     // still push the normal p1/p2 point for debug
                     p2.g2 = true;
                     p2.threeObjArc = threeObjArc;
+                    
                     group = this.getLineGroup(p2, args);
-                    // these golden lines showing start/end of a g2 or g3 arc were confusing people
-                    // so hiding them for now. jlauer 8/15/15
-                    /*
-                    geometry = group.geometry;
-                    geometry.vertices.push(
-                        new THREE.Vector3(p1.x, p1.y, p1.z));
-                    geometry.vertices.push(
-                        new THREE.Vector3(p2.x, p2.y, p2.z));
-                    geometry.colors.push(group.color);
-                    geometry.colors.push(group.color);
-                    */
                 } else {
-                    geometry.vertices.push(
-                        new THREE.Vector3(p1.x, p1.y, p1.z));
-                    geometry.vertices.push(
-                        new THREE.Vector3(p2.x, p2.y, p2.z));
+                    geometry.vertices.push(new THREE.Vector3(p1.x, p1.y, p1.z));
+                    geometry.vertices.push(new THREE.Vector3(p2.x, p2.y, p2.z));
+                    
                     geometry.colors.push(group.color);
                     geometry.colors.push(group.color);
                 }
@@ -3413,28 +2995,14 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     bbbox.max.y = Math.max(bbbox.max.y, p2.y);
                     bbbox.max.z = Math.max(bbbox.max.z, p2.z);
                 }
-                if (p2.g0) {
-                    // we're in a toolhead move, label moves
-                    /*
-                    if (group.segmentCount < 2) {
-                    this.makeSprite(this.scene, "webgl", {
-                        x: p2.x,
-                        y: p2.y,
-                        z: p2.z + 0,
-                        text: group.segmentCount,
-                        color: "#ff00ff",
-                        size: 3,
-                    });
-                    }
-                    */
-                }
+                
                 // global bounding box calc
-                bbbox2.min.x = Math.min(bbbox2.min.x, p2.x);
-                bbbox2.min.y = Math.min(bbbox2.min.y, p2.y);
-                bbbox2.min.z = Math.min(bbbox2.min.z, p2.z);
-                bbbox2.max.x = Math.max(bbbox2.max.x, p2.x);
-                bbbox2.max.y = Math.max(bbbox2.max.y, p2.y);
-                bbbox2.max.z = Math.max(bbbox2.max.z, p2.z);
+                this.sceneBoundaries.min.x = Math.min(this.sceneBoundaries.min.x, p2.x);
+                this.sceneBoundaries.min.y = Math.min(this.sceneBoundaries.min.y, p2.y);
+                this.sceneBoundaries.min.z = Math.min(this.sceneBoundaries.min.z, p2.z);
+                this.sceneBoundaries.max.x = Math.max(this.sceneBoundaries.max.x, p2.x);
+                this.sceneBoundaries.max.y = Math.max(this.sceneBoundaries.max.y, p2.y);
+                this.sceneBoundaries.max.z = Math.max(this.sceneBoundaries.max.z, p2.z);
                 
                 // NEW METHOD OF CREATING THREE.JS OBJECTS
                 // create new approach for three.js objects which is
@@ -3447,36 +3015,40 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     gcodeObj = p2.threeObjArc;
                 } else {
                     // make a line
-                    var color = 0X0000ff;
+                    var color = this.colorArc;
+                    var opacity = 0.5;
                     
                     if (p2.extruding) {
-                        color = 0xff00ff;
+                        color = this.colorActive;
+                        opacity = 1;
                     } else if (p2.g0) {
-                        color = 0x00ff00;
+                        color = this.colorG0;
+                        opacity = 0.9
                     } else if (p2.g2) {
-                        //color = 0x999900;
+                        color = this.colorG2;
                     } else if (p2.arc) {
-                        color = 0x0033ff;
+                        color = this.colorArc;
+                        opacity = 0.7;
                     }
                     
                     var material = new THREE.LineBasicMaterial({
                         color: color,
-                        opacity: 0.5,
+                        opacity: opacity,
                         transparent: true
                     });
                     
                     var geometry = new THREE.Geometry();
                     geometry.vertices.push(
                         new THREE.Vector3( p1.x, p1.y, p1.z ),
-                        new THREE.Vector3( p2.x, p2.y, p2.z )
+                        new THREE.Vector3( p2.x, p2.y, p2.z ),
+                        new THREE.Vector3( p2.x, p2.y, p2.z ) // HAX, to fix createGlow error with straight lines
                     );
                     
-                    var line = new THREE.Line( geometry, material );
-                    gcodeObj = line;
+                    gcodeObj = new THREE.Line( this.convertLineGeometryToBufferGeometry(geometry, new THREE.Color(color)), material );
                 }
+                
                 gcodeObj.userData.p2 = p2;
                 gcodeObj.userData.args = args;
-                new3dObj.add(gcodeObj);
                 
                 // DISTANCE CALC
                 // add distance so we can calc estimated time to run
@@ -3484,24 +3056,19 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 var dist = 0;
                 if (p2.arc) {
                     // calc dist of all lines
-                    //console.log("this is an arc to calc dist for. p2.threeObjArc:", p2.threeObjArc, "p2:", p2);
-                    var arcGeo = p2.threeObjArc.geometry;
+                    var arcGeo = new THREE.Geometry().fromBufferGeometry(p2.threeObjArc.geometry);
                     //console.log("arcGeo:", arcGeo);
                                         
                     var tad2 = 0;
                     for (var arcLineCtr = 0; arcLineCtr < arcGeo.vertices.length - 1; arcLineCtr++) {
                         tad2 += arcGeo.vertices[arcLineCtr].distanceTo(arcGeo.vertices[arcLineCtr+1]);
-                    }
-                    //console.log("tad2:", tad2);
-                    
+                    }                    
                     
                     // just do straight line calc
                     var a = new THREE.Vector3( p1.x, p1.y, p1.z );
                     var b = new THREE.Vector3( p2.x, p2.y, p2.z );
                     var straightDist = a.distanceTo(b);
                     
-                    //console.log("diff of straight line calc vs arc sum. straightDist:", straightDist);
-                    
                     dist = tad2;
                     
                 } else {
@@ -3542,9 +3109,18 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                 p2.timeMins = timeMinutes;
                 p2.timeMinsSum = this.totalTime;
                 
-                //console.log("calculating distance. dist:", dist, "totalDist:", this.totalDist, "feedrate:", args.feedrate, "timeMinsToExecute:", timeMinutes, "totalTime:", this.totalTime, "p1:", p1, "p2:", p2, "args:", args);
+                object.add(gcodeObj);
+                
+                // add segment to array for later use
+                this.parsedLines.push({
+                    'p2': p2,
+                    'args': args,
+                    'renderObject': gcodeObj
+                });
                 
+                this.lineObjects.push(gcodeObj);
             }
+            
             this.totalDist = 0;
             this.totalTime = 0;
             
@@ -3557,21 +3133,31 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             this.absolute = function (v1, v2) {
                 return relative ? v1 + v2 : v2;
             }
-
+            
+            var ijkrelative = true;  // For Mach3 Arc IJK Absolute mode
+            this.ijkabsolute = function (v1, v2) {
+                return ijkrelative ? v1 + v2 : v2;
+            }
+            
             this.addFakeSegment = function(args) {
+                console.log('Fake segment', args);
+                
                 //line.args = args;
                 var arg2 = {
                     isFake : true,
                     text : args.text,
                     indx : args.indx
                 };
+                
                 if (arg2.text.match(/^(;|\(|<)/)) arg2.isComment = true;
-                lines.push({
-                    p2: lastLine,    // since this is fake, just use lastLine as xyz
-                    'args': arg2
+
+                this.parsedLines.push({
+                    'p2': lastLine,    // since this is fake, just use lastLine as xyz
+                    'args': arg2,
+                    'renderObject': null
                 });
             }
-
+            
             var cofg = this;
             var parser = new this.GCodeParser({
                 //set the g92 offsets for the parser - defaults to no offset
@@ -3592,6 +3178,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     //cofg.newLayer(newLine);
                     
                     cofg.addSegment(lastLine, newLine, args);
+                    
                     //console.log("G0", lastLine, newLine, args, cofg.offsetG92);
                     lastLine = newLine;
                 },  
@@ -3603,23 +3190,22 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     // to the point (90.6, 13.8), extruding material as the move
                     // happens from the current extruded length to a length of
                     // 22.4 mm.
-
                     var newLine = {
                         x: args.x !== undefined ? cofg.absolute(lastLine.x, args.x) + cofg.offsetG92.x : lastLine.x,
                         y: args.y !== undefined ? cofg.absolute(lastLine.y, args.y) + cofg.offsetG92.y : lastLine.y,
                         z: args.z !== undefined ? cofg.absolute(lastLine.z, args.z) + cofg.offsetG92.z : lastLine.z,
                         e: args.e !== undefined ? cofg.absolute(lastLine.e, args.e) + cofg.offsetG92.e : lastLine.e,
                         f: args.f !== undefined ? cofg.absolute(lastLine.f, args.f) : lastLine.f,
-
                     };
-                    /* layer change detection is or made by watching Z, it's made by
-         watching when we extrude at a new Z position */
+                    
+                    /* layer change detection is or made by watching Z, it's made by watching when we extrude at a new Z position */
                     if (cofg.delta(lastLine.e, newLine.e) > 0) {
                         newLine.extruding = cofg.delta(lastLine.e, newLine.e) > 0;
                         if (layer == undefined || newLine.z != layer.z) cofg.newLayer(newLine);
                     }
+                    
                     cofg.addSegment(lastLine, newLine, args);
-                    //console.log("G1", lastLine, newLine, args, cofg.offsetG92);
+                    
                     lastLine = newLine;
                 },
                 G2: function (args, indx, gcp) {
@@ -3627,7 +3213,7 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     show it as a light gray line, but we'll also sub-render the
                     arc itself by figuring out the sub-segments . */
                     
-                    args.plane = plane; //set the plane for this command to whatever the current plane is
+                    //args.plane = plane; //set the plane for this command to whatever the current plane is
                     
                     var newLine = {
                         x: args.x !== undefined ? cofg.absolute(lastLine.x, args.x) + cofg.offsetG92.x : lastLine.x,
@@ -3635,21 +3221,22 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                         z: args.z !== undefined ? cofg.absolute(lastLine.z, args.z) + cofg.offsetG92.z : lastLine.z,
                         e: args.e !== undefined ? cofg.absolute(lastLine.e, args.e) + cofg.offsetG92.e : lastLine.e,
                         f: args.f !== undefined ? cofg.absolute(lastLine.f, args.f) : lastLine.f,
-                        arci: args.i ? args.i : null,
-                        arcj: args.j ? args.j : null,
-                        arck: args.k ? args.k : null,
+                        arci: args.i !== undefined ? cofg.ijkabsolute(lastLine.x, args.i) : lastLine.x,
+                        arcj: args.j !== undefined ? cofg.ijkabsolute(lastLine.y, args.j) : lastLine.y,
+                        arck: args.k !== undefined ? cofg.ijkabsolute(lastLine.z, args.k) : lastLine.z,
                         arcr: args.r ? args.r : null,
                     };
                    
-                    //console.log("G2 newLine:", newLine);
-                    //newLine.g2 = true;
                     newLine.arc = true;
                     newLine.clockwise = true;
-                    if (args.clockwise === false) newLine.clockwise = args.clockwise;
+                    
+                    if (args.clockwise === false) {
+                        newLine.clockwise = args.clockwise;
+                    }
+                    
                     cofg.addSegment(lastLine, newLine, args);
-                    //console.log("G2", lastLine, newLine, args, cofg.offsetG92);
+                    
                     lastLine = newLine;
-                    //console.log("G2. args:", args);
                 },
                 G3: function (args, indx, gcp) {
                     /* this is an arc move from lastLine's xy to the new xy. same
@@ -3659,25 +3246,67 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     gcp.handlers.G2(args, indx, gcp);
                 },
 
-                G17: function (args){
+                G73: function(args, indx, gcp) {
+                    // peck drilling. just treat as g1
+                    console.log("G73 gcp:", gcp);
+                    gcp.handlers.G1(args);
+                },
+
+                G92: function (args) { // E0
+                    // G92: Set Position
+                    // Example: G92 E0
+                    // Allows programming of absolute zero point, by reseting the
+                    // current position to the values specified. This would set the
+                    // machine's X coordinate to 10, and the extrude coordinate to 90.
+                    // No physical motion will occur.
+
+                    // TODO: Only support E0
+                    var newLine = lastLine;
+                    
+                    cofg.offsetG92.x = (args.x !== undefined ? (args.x === 0 ? newLine.x : newLine.x - args.x) : 0);
+                    cofg.offsetG92.y = (args.y !== undefined ? (args.y === 0 ? newLine.y : newLine.y - args.y) : 0);
+                    cofg.offsetG92.z = (args.z !== undefined ? (args.z === 0 ? newLine.z : newLine.z - args.z) : 0);
+                    cofg.offsetG92.e = (args.e !== undefined ? (args.e === 0 ? newLine.e : newLine.e - args.e) : 0);
+
+                    //newLine.x = args.x !== undefined ? args.x + newLine.x : newLine.x;
+                    //newLine.y = args.y !== undefined ? args.y + newLine.y : newLine.y;
+                    //newLine.z = args.z !== undefined ? args.z + newLine.z : newLine.z;
+                    //newLine.e = args.e !== undefined ? args.e + newLine.e : newLine.e;
+                    
+                    //console.log("G92", lastLine, newLine, args, cofg.offsetG92);
+                    
+                    //lastLine = newLine;
+                    cofg.addFakeSegment(args);
+                },
+                M30: function (args) {
+                    cofg.addFakeSegment(args);
+                },
+
+                'default': function (args, info) {
+                    //if (!args.isComment)
+                    //    console.log('Unknown command:', args.cmd, args, info);
+                    cofg.addFakeSegment(args);
+                },
+            },
+            // Mode-setting non-motion commands, of which many may appear on one line
+            // These take no arguments
+            {
+                G17: function () {
                     console.log("SETTING XY PLANE");
                     plane = "G17";
-                    cofg.addFakeSegment(args);
                 },
 
-                G18: function (args){
+                G18: function () {
                     console.log("SETTING XZ PLANE");
                     plane = "G18";
-                    cofg.addFakeSegment(args);
                 },
 
-                G19: function (args){
+                G19: function () {
                     console.log("SETTING YZ PLANE");
                     plane = "G19";
-                    cofg.addFakeSegment(args);
                 },
 
-                G20: function (args) {
+                G20: function () {
                     // G21: Set Units to Inches
                     // We don't really have to do anything since 3d viewer is unit agnostic
                     // However, we need to set a global property so the trinket decorations
@@ -3685,83 +3314,96 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     // later on when they are drawn after the gcode is rendered
                     console.log("SETTING UNITS TO INCHES!!!");
                     cofg.isUnitsMm = false; // false means inches cuz default is mm
-                    cofg.addFakeSegment(args);
-
                 },
 
-                G21: function (args) {
+                G21: function () {
                     // G21: Set Units to Millimeters
                     // Example: G21
                     // Units from now on are in millimeters. (This is the RepRap default.)
                     console.log("SETTING UNITS TO MM!!!");
                     cofg.isUnitsMm = true; // true means mm
-                    cofg.addFakeSegment(args);
-
                 },
 
-                G73: function(args, indx, gcp) {
-                    // peck drilling. just treat as g1
-                    console.log("G73 gcp:", gcp);
-                    gcp.handlers.G1(args);
-                },
-                G90: function (args) {
+                // A bunch of no-op modes that do not affect the viewer
+                G40: function () {}, // Tool radius compensation off
+                G41: function () {}, // Tool radius compensation left
+                G42: function () {}, // Tool radius compensation right
+                G45: function () {}, // Axis offset single increase
+                G46: function () {}, // Axis offset single decrease
+                G47: function () {}, // Axis offset double increase
+                G48: function () {}, // Axis offset double decrease
+                G49: function () {}, // Tool length offset compensation cancle
+                G54: function () {}, // Select work coordinate system 1
+                G55: function () {}, // Select work coordinate system 2
+                G56: function () {}, // Select work coordinate system 3
+                G57: function () {}, // Select work coordinate system 4
+                G58: function () {}, // Select work coordinate system 5
+                G59: function () {}, // Select work coordinate system 6
+                G61: function () {}, // Exact stop check mode
+                G64: function () {}, // Cancel G61
+                G69: function () {}, // Cancel G68
+
+                G90: function () {
                     // G90: Set to Absolute Positioning
                     // Example: G90
                     // All coordinates from now on are absolute relative to the
                     // origin of the machine. (This is the RepRap default.)
-
                     relative = false;
-                    cofg.addFakeSegment(args);
                 },
 
-                G91: function (args) {
+                'G90.1': function () {
+                    // G90.1: Set to Arc Absolute IJK Positioning
+                    // Example: G90.1
+                    // From now on, arc centers are specified directly by
+                    // the IJK parameters, e.g. center_x = I_value
+                    // This is Mach3-specific
+                    ijkrelative = false;
+                },
+
+                G91: function () {
                     // G91: Set to Relative Positioning
                     // Example: G91
                     // All coordinates from now on are relative to the last position.
-
-                    // TODO!
                     relative = true;
-                    cofg.addFakeSegment(args);
                 },
 
-                G92: function (args) { // E0
-                    // G92: Set Position
-                    // Example: G92 E0
-                    // Allows programming of absolute zero point, by reseting the
-                    // current position to the values specified. This would set the
-                    // machine's X coordinate to 10, and the extrude coordinate to 90.
-                    // No physical motion will occur.
-
-                    // TODO: Only support E0
-                    var newLine = lastLine;
-                    
-                    cofg.offsetG92.x = (args.x !== undefined ? (args.x === 0 ? newLine.x : newLine.x - args.x) : 0);
-                    cofg.offsetG92.y = (args.y !== undefined ? (args.y === 0 ? newLine.y : newLine.y - args.y) : 0);
-                    cofg.offsetG92.z = (args.z !== undefined ? (args.z === 0 ? newLine.z : newLine.z - args.z) : 0);
-                    cofg.offsetG92.e = (args.e !== undefined ? (args.e === 0 ? newLine.e : newLine.e - args.e) : 0);
-
-                    //newLine.x = args.x !== undefined ? args.x + newLine.x : newLine.x;
-                    //newLine.y = args.y !== undefined ? args.y + newLine.y : newLine.y;
-                    //newLine.z = args.z !== undefined ? args.z + newLine.z : newLine.z;
-                    //newLine.e = args.e !== undefined ? args.e + newLine.e : newLine.e;
-                    
-                    //console.log("G92", lastLine, newLine, args, cofg.offsetG92);
-                    
-                    //lastLine = newLine;
-                    cofg.addFakeSegment(args);
+                'G91.1': function () {
+                    // G91.1: Set to Arc Relative IJK Positioning
+                    // Example: G91.1
+                    // From now on, arc centers are relative to the starting
+                    // coordinate, e.g. center_x = this_x + I_value
+                    // This is the default, and the only possibility for most
+                    // controllers other than Mach3
+                    ijkrelative = true;
                 },
-                M30: function (args) {
-                    cofg.addFakeSegment(args);
-                },
-                M82: function (args) {
+
+                // No-op modal macros that do not affect the viewer
+                M07: function () {}, // Coolant on (mist)
+                M08: function () {}, // Coolant on (flood)
+                M09: function () {}, // Coolant off
+                M10: function () {}, // Pallet clamp on
+                M11: function () {}, // Pallet clamp off
+                M21: function () {}, // Mirror X axis
+                M22: function () {}, // Mirror Y axis
+                M23: function () {}, // Mirror off
+                M24: function () {}, // Thread pullout gradual off
+                M41: function () {}, // Select gear 1
+                M42: function () {}, // Select gear 2
+                M43: function () {}, // Select gear 3
+                M44: function () {}, // Select gear 4
+                M48: function () {}, // Allow feedrate override
+                M49: function () {}, // Disallow feedrate override
+                M52: function () {}, // Empty spindle
+                M60: function () {}, // Automatic pallet change
+
+                M82: function () {
                     // M82: Set E codes absolute (default)
                     // Descriped in Sprintrun source code.
 
                     // No-op, so long as M83 is not supported.
-                    cofg.addFakeSegment(args);
                 },
 
-                M84: function (args) {
+                M84: function () {
                     // M84: Stop idle hold
                     // Example: M84
                     // Stop the idle hold on all axis and extruder. In some cases the
@@ -3771,13 +3413,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
                     // in between or after printjobs.
 
                     // No-op
-                    cofg.addFakeSegment(args);
-                },
-
-                'default': function (args, info) {
-                    //if (!args.isComment)
-                    //    console.log('Unknown command:', args.cmd, args, info);
-                    cofg.addFakeSegment(args);
                 },
             });
 
@@ -3788,103 +3423,32 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             this.isUnitsMm = parser.isUnitsMm;
             
             console.log("inside creatGcodeFromObject. this:", this);
-
             console.log("Layer Count ", layers.length);
-
-            
-            var object = new THREE.Object3D();
             
-            
-            // old approach of monolithic line segment
-            for (var lid in layers) {
-                var layer = layers[lid];
-                //      console.log("Layer ", layer.layer);
-                for (var tid in layer.type) {
-                    var type = layer.type[tid];
-                    //console.log("Layer:", layer.layer, "type:", type, "segCnt:", type.segmentCount);
-                    // normal geometry (not buffered)
-                    //object.add(new THREE.Line(type.geometry, type.material, THREE.LinePieces));
-                    // using buffer geometry
-                    var bufferGeo = this.convertLineGeometryToBufferGeometry( type.geometry, type.color );
-                    object.add(new THREE.Line(bufferGeo, type.material, THREE.LinePieces));
-                }
-            }
-            //XY PLANE
-            this.extraObjects["G17"].forEach(function(obj) {
-                // non-buffered approach
-                //object.add(obj);
-                
-                // buffered approach
-                // convert g2/g3's to buffer geo as well
-                //console.log("extra object:", obj);
-                var bufferGeo = this.convertLineGeometryToBufferGeometry( obj.geometry, obj.material.color );
-                object.add(new THREE.Line(bufferGeo, obj.material));
-            }, this);
-            //XZ PLANE
-            this.extraObjects["G18"].forEach(function(obj) {
-                // buffered approach
-                var bufferGeo = this.convertLineGeometryToBufferGeometry( obj.geometry, obj.material.color );
-                var tmp = new THREE.Line(bufferGeo, obj.material)
-                tmp.rotateOnAxis(new THREE.Vector3(1,0,0),Math.PI/2);
-                object.add(tmp);
-            }, this);
-            //YZ PLANE
-            this.extraObjects["G19"].forEach(function(obj) {
-                // buffered approach
-                var bufferGeo = this.convertLineGeometryToBufferGeometry( obj.geometry, obj.material.color );
-                var tmp = new THREE.Line(bufferGeo, obj.material)
-                tmp.rotateOnAxis(new THREE.Vector3(1,0,0),Math.PI/2);
-                tmp.rotateOnAxis(new THREE.Vector3(0,1,0),Math.PI/2);
-                object.add(tmp);
-            }, this);
-            
-            // use new approach of building 3d object where each
-            // gcode line is its own segment with its own userData
-            //object = new3dObj;
-
-
-            console.log("bbox ", bbbox);
-
             // Center
             var scale = 1; // TODO: Auto size
 
             var center = new THREE.Vector3(
-            bbbox.min.x + ((bbbox.max.x - bbbox.min.x) / 2),
-            bbbox.min.y + ((bbbox.max.y - bbbox.min.y) / 2),
-            bbbox.min.z + ((bbbox.max.z - bbbox.min.z) / 2));
+                bbbox.min.x + ((bbbox.max.x - bbbox.min.x) / 2),
+                bbbox.min.y + ((bbbox.max.y - bbbox.min.y) / 2),
+                bbbox.min.z + ((bbbox.max.z - bbbox.min.z) / 2)
+            );
+            
             console.log("center ", center);
 
-            var center2 = new THREE.Vector3(
-            bbbox2.min.x + ((bbbox2.max.x - bbbox2.min.x) / 2),
-            bbbox2.min.y + ((bbbox2.max.y - bbbox2.min.y) / 2),
-            bbbox2.min.z + ((bbbox2.max.z - bbbox2.min.z) / 2));
-            console.log("center2 of all gcode ", center2);
-
-            // store meta data in userData of object3d for later use like in animation
-            // of toolhead
-            object.userData.bbbox2 = bbbox2;
-            object.userData.lines = lines;
-            object.userData.layers = layers;
-            object.userData.center2 = center2;
-            object.userData.extraObjects = this.extraObjects;
-            object.userData.threeObjs = new3dObj;
-            
-            console.log("userData for this object3d:", object.userData);
-            /*
-            this.camera.target.x = center2.x;
-            this.camera.target.y = center2.y;
-            this.camera.target.z = center2.z;
-            */
-
-            //object.position = center.multiplyScalar(-scale);
-
-            //object.scale.multiplyScalar(scale);
+            this.sceneCenter = new THREE.Vector3(
+                this.sceneBoundaries.min.x + ((this.sceneBoundaries.max.x - this.sceneBoundaries.min.x) / 2),
+                this.sceneBoundaries.min.y + ((this.sceneBoundaries.max.y - this.sceneBoundaries.min.y) / 2),
+                this.sceneBoundaries.min.z + ((this.sceneBoundaries.max.z - this.sceneBoundaries.min.z) / 2)
+            );
+            
             console.log("final object:", object);
 
             return object;
         },
+        
+        
         convertLineGeometryToBufferGeometry: function(lineGeometry, color) {
-            
             var positions = new Float32Array( lineGeometry.vertices.length * 3 );
             var colors = new Float32Array( lineGeometry.vertices.length * 3 );
             
@@ -3893,16 +3457,15 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             var geometry = new THREE.BufferGeometry();
             
             for (var i = 0; i < lineGeometry.vertices.length; i++) {
-                
                 var x = lineGeometry.vertices[i].x;
                 var y = lineGeometry.vertices[i].y;
                 var z = lineGeometry.vertices[i].z;
-                
+
                 // positions
                 positions[ i * 3 ] = x;
                 positions[ i * 3 + 1 ] = y;
                 positions[ i * 3 + 2 ] = z;
-                
+
                 // colors
                 colors[ i * 3 ] = color.r;
                 colors[ i * 3 + 1 ] = color.g;
@@ -3916,232 +3479,6 @@ cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three',
             
             return geometry;
         },
-        
-        /*
-        // marquee selection code
-        // Huge credit to Josh Staples for this code
-        // https://gist.github.com/cubicleDowns/7666452
-        marquee: {
-            
-            listeners: function() {
-                demo.jqContainer.mousedown(mouseDown);
-                demo.jqContainer.mouseup(mouseUp);
-                demo.jqContainer.mousemove(marqueeSelect);
-                $(document).mousemove(resetMarquee);
-            },
-        
-            resetMarquee: function() {
-                mouseup = true;
-                mousedown = false;
-                marquee.fadeOut();
-                marquee.css({width: 0, height: 0});
-                mousedowncoords = {};
-            },
-         
-            mouseDown: function (event) {
-    
-                event.preventDefault();
-                
-                var pos = {};
-                
-                mousedown = true;
-                mousedowncoords = {};
-                
-                mousedowncoords.x = event.clientX;
-                mousedowncoords.y = event.clientY;
-                
-                // adjust the mouse select
-                pos.x = ((event.clientX - offset.x) / demo.jqContainer.width()) * 2 -1;
-                pos.y = -((event.clientY - offset.y) / demo.jqContainer.height()) * 2 + 1;
-    
-                var vector = new THREE.Vector3(pos.x, pos.y, 1);
-                
-                demo.projector.unprojectVector(vector, demo.cameras.liveCam);
-    
-                // removing previous click marker.
-                $(".clickMarkers").remove();
-    
-                // appending a click marker.
-                demo.jqContainer.append('<div class="clickMarkers" style="pointer-events:none; position: absolute; z-index: 100; left: ' + event.offsetX + 'px; top: ' + event.offsetY +'px">D</div>' );
-    
-            },
-
-            mouseUp: function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-                
-                // reset the marquee selection
-                resetMarquee();
-    
-                // appending a click marker.
-                demo.jqContainer.append('<div class="clickMarkers" style="left: ' + event.offsetX + 'px; top: ' + event.offsetY +'px">U</div>' );
-            },
-
-            marqueeSelect: function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-    
-                // make sure we are in a select mode.
-                if(mousedown){
-        
-                    marquee.fadeIn();
-        
-                    var pos = {};
-                    pos.x = event.clientX - mousedowncoords.x;
-                    pos.y = event.clientY - mousedowncoords.y;
-                    
-                    // square variations
-                    // (0,0) origin is the TOP LEFT pixel of the canvas.
-                    //
-                    //  1 | 2
-                    // ---.---
-                    //  4 | 3
-                    // there are 4 ways a square can be gestured onto the screen.  the following detects these four variations
-                    // and creates/updates the CSS to draw the square on the screen
-                    if (pos.x < 0 && pos.y < 0) {
-                        marquee.css({left: event.clientX + 'px', width: -pos.x + 'px', top: event.clientY + 'px', height: -pos.y + 'px'});
-                    } else if ( pos.x >= 0 && pos.y <= 0) {
-                        marquee.css({left: mousedowncoords.x + 'px',width: pos.x + 'px', top: event.clientY, height: -pos.y + 'px'});
-                    } else if (pos.x >= 0 && pos.y >= 0) {
-                        marquee.css({left: mousedowncoords.x + 'px', width: pos.x + 'px', height: pos.y + 'px', top: mousedowncoords.y + 'px'});
-                    } else if (pos.x < 0 && pos.y >= 0) {
-                        marquee.css({left: event.clientX + 'px', width: -pos.x + 'px', height: pos.y + 'px', top: mousedowncoords.y + 'px'});
-                    }
-                    
-                    var selectedCubes = findCubesByVertices({x: event.clientX, y: event.clientY});
-                    
-                    demo.setup.highlight(selectedCubes);
-        
-                }
-            },
-
-            findCubesByVertices: function(location){
-                var currentMouse = {},
-                    mouseInitialDown = {},
-                    units,
-                    bounds,
-                    inside = false,
-                    selectedUnits = [],
-                    dupeCheck = {};
-                
-                currentMouse.x = location.x;
-                currentMouse.y = location.y;
-                
-                mouseInitialDown.x = (mousedowncoords.x - offset.x);
-                mouseInitialDown.y = (mousedowncoords.y - offset.y);
-                
-                units = getUnitVertCoordinates();
-                bounds = findBounds(currentMouse, mousedowncoords);
-                
-                for(var i = 0; i < units.length; i++) {
-                    inside = withinBounds(units[i].pos, bounds);
-                    if(inside && (dupeCheck[units[i].id] === undefined)){
-                        selectedUnits.push(units[i]);
-                        dupeCheck[units[i].name] = true;
-                    }
-                }
-                
-                return selectedUnits;
-            },
-
-            // takes the mouse up and mouse down positions and calculates an origin
-            // and delta for the square.
-            // this is compared to the unprojected XY centroids of the cubes.
-            findBounds: function(pos1, pos2) {
-                
-                // calculating the origin and vector.
-                var origin = {},
-                    delta = {};
-                
-                if (pos1.y < pos2.y) {
-                    origin.y = pos1.y;
-                    delta.y = pos2.y - pos1.y;
-                } else {
-                    origin.y = pos2.y;
-                    delta.y = pos1.y - pos2.y;
-                }
-                
-                if(pos1.x < pos2.x) {
-                    origin.x = pos1.x;
-                    delta.x = pos2.x - pos1.x;
-                } else {
-                    origin.x = pos2.x;
-                    delta.x = pos1.x - pos2.x;
-                }
-                return ({origin: origin, delta: delta});
-            },
-
-
-            // Takes a position and detect if it is within delta of the origin defined by findBounds ({origin, delta})
-            withinBounds: function(pos, bounds) {
-                
-                var ox = bounds.origin.x,
-                    dx = bounds.origin.x + bounds.delta.x,
-                    oy = bounds.origin.y,
-                    dy = bounds.origin.y + bounds.delta.y;
-                
-                if((pos.x >= ox) && (pos.x <= dx)) {
-                    if((pos.y >= oy) && (pos.y <= dy)) {
-                        return true;
-                    }
-                }
-                
-                return false;
-            },
-
-            getUnitVertCoordinates: function(threeJsContext) {
-                
-                var units = [],
-                    verts = [],
-                    child,
-                    prevChild,
-                    unit,
-                    vector,
-                    pos,
-                    temp,
-                    i, q;
-                
-                for(i = 0; i < demo.collisions.length; i++) {
-                    child = demo.collisions[i];
-                    child.updateMatrixWorld();
-                    
-                    verts = [
-                        child.geometry.vertices[0],
-                        child.geometry.vertices[1],
-                        child.geometry.vertices[2],
-                        child.geometry.vertices[3],
-                        child.geometry.vertices[4],
-                        child.geometry.vertices[5],
-                        child.geometry.vertices[6],
-                        child.geometry.vertices[7]
-                    ];
-                    
-                    for(q = 0; q < verts.length; q++) {
-                        vector = verts[q].clone();
-                        vector.applyMatrix4(child.matrixWorld);
-                        unit = {};
-                        unit.id = child.id;
-                        unit.mesh = child;
-                        unit.pos = toScreenXY(vector);;
-                        units.push(unit);
-                    }
-                }
-                return units;
-            },
-
-            toScreenXY: function(position) {
-                
-                var pos = position.clone();
-                var projScreenMat = new THREE.Matrix4();
-                projScreenMat.multiplyMatrices( demo.cameras.liveCam.projectionMatrix, demo.cameras.liveCam.matrixWorldInverse );
-                pos.applyProjection(projScreenMat);
-                
-                return { x: ( pos.x + 1 ) * demo.jqContainer.width() / 2 + demo.jqContainer.offset().left,
-                        y: ( - pos.y + 1) * demo.jqContainer.height() / 2 + demo.jqContainer.offset().top };
-            }
-        }
-        // end marquee object
-        */
     }
         
 });