/* <copyright>
Copyright (c) 2012, Motorola Mobility LLC.
All Rights Reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice,
  this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice,
  this list of conditions and the following disclaimer in the documentation
  and/or other materials provided with the distribution.

* Neither the name of Motorola Mobility LLC nor the names of its
  contributors may be used to endorse or promote products derived from this
  software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
</copyright> */

///////////////////////////////////////////////////////////////////////
// Class DrawUtils
//      Overlay drawing utility functions
///////////////////////////////////////////////////////////////////////
var Montage = require("montage/core/core").Montage,
    Component = require("montage/ui/component").Component;

var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
var Rectangle = require("js/helper-classes/3D/rectangle").Rectangle;
var StageLine = require("js/helper-classes/3D/StageLine").StageLine;


var DrawUtils = exports.DrawUtils = Montage.create(Component, {

    ///////////////////////////////////////////////////////////////////////
    // Instance variables
    ///////////////////////////////////////////////////////////////////////
    viewUtils: { value: null, writable: true },
    snapManager: { value: null },
    ElementPlanes : { value: null, writable: true },

    // the drawing surface (a canvas)
    _drawingSurfaceElt : { value: null, writable: true },
    _drawingContext : { value: null, writable: true },

    // color to draw the lines
    _lineColor : { value: "black", writable: true},

    // define a stack for quickly setting graphics states and restoring them
    _stateArray : { value: [], writable: true },

    // save references to the grid lines for quick redraw
    _gridLineArray : {value: [], writable: true },

    // state for moveTo, lineTo
    _curPt : { value: null, writable: true },
    _curVis : { value: null, writable: true },

    // the element that defines the coordinate system for the displayed lines
    _sourceSpaceElt  : { value: null, writable: true },

    // maintain a list of objects to hide against
    _eltArray : {value: [], writable: true },

    // maintain a list of the planes to test against
    _planesArray : {value: [], writable: true },

    // the working plane.
    // a grid may be drawn aligned with this working plane
    _workingPlane : { value: null, writable: true },

    // save some parameters about the grid.
    // these parameters are set when the grid is drawn
    _gridHorizontalSpacing : {value: 50, writable: true },
    _gridVerticalSpacing : {value: 50, writable: true },
    _gridHorizontalLineCount : {value:10, writable: true },
    _gridVerticalLineCount : {value:0, writable: true },
    _gridOrigin : {value: null, writable: true },

    drawXY : {value: false, writable: true },
    drawXZ : {value: false, writable: true },
    drawYZ : {value: false, writable: true },

    drawElementN : {value: false, writable: true },

    _selectionCtr : {value: null, writable: true },

    // Properties that require element planes to be updated
    _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false },
    _recalculateScrollOffsets : { value: false },

    ///////////////////////////////////////////////////////////////////////
    // Property accessors
    ///////////////////////////////////////////////////////////////////////
    setDrawingSurfaceElement : { value: function( s ) {  this._drawingSurfaceElt = s;  if (s)  this._drawingContext = s.getContext("2d");     }},
    getDrawingSurfaceElement : { value: function()          {  return this._drawingSurfaceElt;      }},

    getDrawingContext : { value: function()         {  return this._drawingContext;         }},

    setSourceSpaceElement : { value: function(ss)          {  this._sourceSpaceElt = ss;           }},
    getSourceSpaceElement : { value: function()            {  return this._sourceSpaceElt;         }},

    getWorkingPlane : { value: function()            {  return this._workingPlane;           }},
    setWorkingPlane : { value: function (wp)            { this._workingPlane = wp;              }},

    getGridHorizontalSpacing : { value: function()  {  return this._gridHorizontalSpacing;      }},
    getGridVerticalSpacing : { value: function()    {  return this._gridVerticalSpacing;        }},
    getGridHorizontalLineCount : { value: function()    {  return this._gridHorizontalLineCount;    }},
    getGridVerticalLineCount : { value: function()  {  return this._gridVerticalLineCount;  }},
    getGridOrigin : { value: function() {  return this._gridOrigin.slice(0);            }},

    isDrawingGrid : { value: function()         {  return this.drawXY || this.drawYZ || this.drawXZ;    }},
    isDrawingElementNormal : { value: function()            {  return this.drawElementN }},

    getLineColor : { value: function()          {  return this._lineColor;                  }},
    setLineColor : { value: function( color )       {  this._lineColor = color;                 }},

    getLineWidth : { value: function()          {  return this._drawingContext.lineWidth;   }},
    setLineWidth : { value: function( w )           {  this._drawingContext.lineWidth = w;      }},


    initialize: {
        value: function() {
            this._gridOrigin = [0,0];   // 2D plane space point

            this.eventManager.addEventListener("elementAdded", this, false);
            this.eventManager.addEventListener("elementsRemoved", this, false);
            this.eventManager.addEventListener("elementChange", this, false);
            this.eventManager.addEventListener("elementChanging", this, false);
            this.eventManager.addEventListener("elementReplaced", this, false);
        }
    },

    initializeFromDocument:{
        value:function(adjustScrollOffsets, useStageValues){
            var i,
                documentRootChildren = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true),
                stage = this.application.ninja.stage,
                len = documentRootChildren.length;
            //initialize with current document
            this._eltArray = [];
            this._planesArray = [];
            this.setDrawingSurfaceElement(stage.gridCanvas);
            this.setSourceSpaceElement( this.application.ninja.currentDocument.model.documentRoot);
            this.setWorkingPlane( [0,0,1,0] );

            //Loop through all the top-level children of the current document and call drawUtils.addElement on them
            if(len > 0) {
                var initL = 0,
                    initT = 0,
                    minLeft = 0,
                    minTop = 0,
                    docLeft = stage.documentOffsetLeft,
                    docTop = stage.documentOffsetTop,
                    l,
                    t,
                    plane,
                    elt;
                if(useStageValues) {
                    initL = stage.userPaddingLeft;
                    initT = stage.userPaddingTop;
                    minLeft = stage.templateLeft;
                    minTop = stage.templateTop;
                    this._recalculateScrollOffsets = false;
                }
                for(i=0; i<len; i++) {
                    elt = documentRootChildren[i];
                    plane = this.addElement(elt);
                    if(adjustScrollOffsets) {
                        l = plane._rect.m_left - docLeft;
                        t = plane._rect.m_top - docTop;
                        if(l < minLeft) {
                            minLeft = l;
                            stage.minLeftElement = elt;
                        }
                        if(t < minTop) {
                            minTop = t;
                            stage.minTopElement = elt;
                        }
                    }
                }
                if(minLeft !== initL) {
                    stage.userPaddingLeft = (minLeft < 0) ? minLeft : 0;
                }
                if(minTop !== initT) {
                    stage.userPaddingTop = (minTop < 0) ? minTop : 0;
                }
            }
        }
    },

    handleElementAdded: {
        value: function(event) {
            var elements = event.detail;

            if(Array.isArray(elements)) {
                elements.forEach(function(element) {
                    this.addElement(element);
                }, this);
            } else {
                this.addElement(elements);
            }

            this.drawWorkingPlane();
        }
    },

    handleElementsRemoved: {
        value: function(event) {
            var elements = event.detail;

            if(Array.isArray(elements)) {
                elements = Array.prototype.slice.call(elements, 0);
                elements.forEach(function(element) {
                    this.removeElement(element);
                }, this);
            } else {
                this.removeElement(elements);
            }

            this.drawWorkingPlane();
        }
    },

    handleElementReplaced: {
        value: function(event) {
            var oldElement = event.detail.data.oldChild;
            var newElement = event.detail.data.newChild;

            // check if we already know about this object
            var n = this._eltArray.length,
                plane;
            for (var i=0;  i<n;  i++) {
                if (oldElement === this._eltArray[i]) {
                    this._eltArray[i] = newElement;
                    plane = this._planesArray[i];
                    break;
                }
            }

            if(!plane) {
                this._eltArray.push( newElement );
                plane = Object.create(this.ElementPlanes, {});
                this._planesArray.push( plane );
            }

            plane.setElement( newElement );
            plane.init();
            newElement.elementModel.props3D.elementPlane = plane;
        }
    },

    _shouldUpdatePlanes: {
        value: function(props) {
            if(!props) {
                return false;
            } else if (typeof props === "string") {
                return (this._updatePlaneProps.indexOf(props) !== -1);
            }

            for (var p in props) {
                if(this._updatePlaneProps.indexOf(p) !== -1) {
                    return true;
                }
            }

            return false;
        }
    },

    // TODO - Check why handleElementChange is being fired before handleAddElement
    handleElementChange: {
        value: function(event) {
            this._elementChangeHelper(event, false);
        }
    },

    handleElementChanging: {
        value: function(event) {
            this._elementChangeHelper(event, true);
        }
    },

    _elementChangeHelper: {
        value: function(event, isChanging) {
            if(!event.detail || !event.detail.data) {
                return;
            }
            var els = event.detail.data.els;
            if(els && this._shouldUpdatePlanes(event.detail.data.prop)) {
                var len = els.length,
                    stage = this.application.ninja.stage,
                    minLeft = stage.userPaddingLeft,
                    minTop = stage.userPaddingTop,
                    docLeft = stage.userContentLeft,
                    docTop = stage.userContentTop,
                    l,
                    t,
                    plane,
                    changed = false,
                    elt,
                    adjustStagePadding = !isChanging || (event.detail.data.prop !== "matrix");
                for(var i=0; i < len; i++) {
                    elt = els[i];
                    plane = elt.elementModel.props3D.elementPlane;
                    if(plane) {
                        plane.init();
                        if(adjustStagePadding) {
                            l = plane._rect.m_left - docLeft;
                            t = plane._rect.m_top - docTop;
                            if(l < minLeft) {
                                minLeft = l;
                                stage.minLeftElement = elt;
                            } else if((elt === stage.minLeftElement) && (l > minLeft)) {
                                this._recalculateScrollOffsets = true;
                            }

                            if(t < minTop) {
                                minTop = t;
                                stage.minTopElement = elt;
                            } else if((elt === stage.minTopElement) && (t > minTop)) {
                                this._recalculateScrollOffsets = true;
                            }
                        }
                    }
                }

                if(adjustStagePadding) {
                    if(this._recalculateScrollOffsets && !isChanging) {
                        this.initializeFromDocument(true, true);
                        changed = true;
                    } else {
                        if(minLeft !== stage.userPaddingLeft) {
                            stage.userPaddingLeft = minLeft;
                            changed = true;
                        }
                        if(minTop !== stage.userPaddingTop) {
                            stage.userPaddingTop = minTop;
                            changed = true;
                        }
                    }
                }

                if(!changed) {
                    this.drawWorkingPlane();
                    this.draw3DCompass();
                }

                // TODO - Remove this once all stage drawing is consolidated into a single draw cycle
                if(!isChanging && this.application.ninja.toolsData.selectedToolInstance.captureSelectionDrawn) {
                    this.application.ninja.toolsData.selectedToolInstance.captureSelectionDrawn(null);
                }
            }
        }
    },

    ///////////////////////////////////////////////////////////////////////
    // Methods
    ///////////////////////////////////////////////////////////////////////

    addElement: {
        value: function( elt ) {
            // check if we already know about this object
            var n = this._eltArray.length;
            for (var i=0;  i<n;  i++) {
                if (elt == this._eltArray[i]) {
                    return;
                }
            }

            this._eltArray.push( elt );

            // create the planes for this element
            var plane = Object.create(this.ElementPlanes, {});
            plane.setElement( elt );
            plane.init();
            this._planesArray.push( plane );
            elt.elementModel.props3D.elementPlane = plane;
            return plane;
        }
    },

    removeElement: {
        value: function(element) {
            // check if object exists
            var _elements = this._eltArray.length;
            for (var i=0;  i < _elements;  i++) {
                if (element === this._eltArray[i]) {
                    // First remove the planes for this element
                    this._planesArray.splice(i, 1);
                    // Then remove the element
                    this._eltArray.splice(i, 1);

                    // TODO - May need to delete props3D and elementPlane as well
                    return;
                }
            }
        }
    },

    clear : {
        value: function() {
            if (this._drawingContext)
                this._drawingContext.clearRect( 0, 0, this._drawingSurfaceElt.width,  this._drawingSurfaceElt.height );
        }
    },

    updatePlanes : {
        value: function() {
            var n = this._planesArray.length;

            for (var i=0;  i<n;  i++)
            {
                var plane = this._planesArray[i];
                plane.init();
            }
        }
    },

    getVisibilityAtPoint:
    {
        value: function( targetPt )
        {
            // duplicate the point and make sure it has the correct dimension (2)
            var pt = targetPt.slice(0);
            while (pt.length > 3)  pt.pop();

            var z = pt[2];
            var n = this._planesArray.length;
            var vis = 0;
            for (var i=0;  i<n;  i++)
            {
                var plane = this._planesArray[i];

                // ignore if the point is in front of the polygon
                if (z > plane.getZMax())  continue;

                // test for containment in the polygon bounds
                var contain = MathUtils.boundaryContainsPoint( plane.getBoundaryPoints(),  pt,  plane.isBackFacing() );
                if (contain == MathUtils.OUTSIDE)  continue;
                if (contain == MathUtils.ON)       continue;

                // shoot a ray from the point in the +Z direction to get the z value of the plane
                var vec = [0,0,1];
                var planeEq = plane.getPlaneEq();
                var ptOnPlane = MathUtils.vecIntersectPlane( pt, vec, planeEq );
                if (ptOnPlane)
                {
                    // in keeping with the convention that a point "on" a face is outside the element,
                    // check that case.
                    //if (MathUtils.fpCmp(pt[2], ptOnPlane[2]) == 0)  continue;

                    // if the point is behind the plane, increase the visibility
                    if (MathUtils.fpCmp(pt[2],ptOnPlane[2]) <= 0)  vis++;
                }
            }

            return vis;
        }
    },

    moveTo : {
        value: function( pt ) {
            if (this._sourceSpaceElt)
                pt = this.viewUtils.localToGlobal( pt, this._sourceSpaceElt );

            this._curPt = pt.slice(0);
            this._curVis = this.getVisibilityAtPoint( pt );
        }
    },

    lineTo :
    {
        value: function( pt )
        {
            if (this._sourceSpaceElt)
                pt = this.viewUtils.localToGlobal( pt, this._sourceSpaceElt );

            var line = Object.create(StageLine, {});
            line.setPoints( this._curPt, pt );
            line.setVisibility( this._curVis );

            // find all the plane intersections
            this.getLineIntersections( line );

            // draw the line
            this._curVis = this.drawIntersectedLine( line, this._drawingContext );
            this._curPt = pt.slice(0);
        }
    },


    drawLine :
    {
        value: function( pt0, pt1 )
        {
            if (this._drawingContext)
            {
                // transform the points from local object space to world space
                if (this._sourceSpaceElt)
                {
                    pt0 = this.viewUtils.localToGlobal( pt0, this._sourceSpaceElt );
                    pt1 = this.viewUtils.localToGlobal( pt1, this._sourceSpaceElt );
                }

                // create the line structure
                var line = Object.create(StageLine, {});
                line.setPoints( pt0, pt1 );

                // find all the plane intersections
                this.getLineIntersections( line );

                // get the starting visibility
                var vis = this.getVisibilityAtPoint( pt0 );
                line.setVisibility( vis );

                // draw the line
                this._curVis = this.drawIntersectedLine( line, this._drawingContext );
            }
        }
    },

    drawIntersectedLine :
    {
        value: function( line )
        {
            this._drawingContext.strokeStyle = this._lineColor;
            this._drawingContext.beginPath();

            //  get the 2 enpoints of the line
            var pt0 = line.getPoint0(),
                pt1 = line.getPoint1();

            // find the visibility at the start point
            var vis = line.getVisibility();
            if (vis == 0)
            {
                this._drawingContext.strokeStyle = this._lineColor;
                this._drawingContext.beginPath();
                this._drawingContext.moveTo( pt0[0], pt0[1] );
            }

            // go through each intersection
            var n = line.getIntersectionCount();
            var t = 0.0;
            var iRec = line.getIntersectionList();
            for (var i=0;  i<n;  i++)
            {
                var tNext = iRec.getT();
                var dv = iRec.getDeltaVis();

                var tPt = MathUtils.interpolateLine3D( pt0, pt1, tNext );

                if (vis == 0)
                {
                    this._drawingContext.lineTo( tPt[0], tPt[1] );
                    this._drawingContext.closePath();
                    this._drawingContext.stroke();
                }
                else
                {
                    this._drawingContext.beginPath();
                    this._drawingContext.moveTo( tPt[0], tPt[1] );
                }

                vis += dv;
                iRec = iRec.getNext();
            }

            // handle the end of the line
            if (vis == 0)
            {
                this._drawingContext.lineTo( pt1[0], pt1[1] );

                // draw the line
                this._drawingContext.closePath();
                this._drawingContext.stroke();
            }

            return vis;
        }
    },

    getLineIntersections:
    {
        value: function( line )
        {
            // clip the line against all polygons in the scene
            var n = this._planesArray.length;
            for (var i=0;  i<n;  i++)
            {
                var plane = this._planesArray[i];
                line.intersectWithPlane( plane );
            }
        }
    },

    getPlaneToWorldMatrix:
    {
        value: function (normal, ptOnPlane)
        {
            // 3 coordinate axes for the plane
            var zAxis = normal.slice(0);
            MathUtils.makeDimension3(zAxis);
            zAxis = vecUtils.vecNormalize(3, zAxis);

            // special case the coordinate axes followed by general case
            var tmp;
            var xAxis, yAxis;
            if (MathUtils.fpCmp(Math.abs(zAxis[0]), 1.0) == 0) {
                yAxis = [0, 1, 0];
                xAxis = vecUtils.vecCross(3, yAxis, zAxis);
            }
            else if (MathUtils.fpCmp(Math.abs(zAxis[1]), 1.0) == 0) {
                yAxis = [0, 0, 1];
                //xAxis = yAxis.cross(zAxis);
                xAxis = vecUtils.vecCross(3, yAxis, zAxis );
            }
            else if (MathUtils.fpCmp(Math.abs(zAxis[2]), 1.0) == 0) {
                yAxis = [0, 1, 0];
                //xAxis = yAxis.cross(zAxis);
                xAxis = vecUtils.vecCross(3, yAxis, zAxis );
            }
            else
            {
                if (Math.abs(zAxis[0]) < Math.abs(zAxis[1]))
                {
                    if (Math.abs(zAxis[0]) < Math.abs(zAxis[2]))
                        tmp = [1, 0, 0];
                    else
                        tmp = [0, 0, 1];
                }
                else
                {
                    if (Math.abs(zAxis[1]) < Math.abs(zAxis[2]))
                        tmp = [0, 1, 0];
                    else
                        tmp = [0, 0, 1];
                }
                //xAxis = tmp.cross(zAxis);
                xAxis = vecUtils.vecCross(3, tmp, zAxis);
                //yAxis = zAxis.cross(xAxis);
                yAxis = vecUtils.vecCross(3, zAxis, xAxis);
            }

            // create the matrix
            var mat = Matrix.create(
                [
                    [xAxis[0], yAxis[0], zAxis[0], ptOnPlane[0]],
                    [xAxis[1], yAxis[1], zAxis[1], ptOnPlane[1]],
                    [xAxis[2], yAxis[2], zAxis[2], ptOnPlane[2]],
                    [0, 0, 0, 1]
                ]
            );

            return mat;
        }
    },

    clearDefaultGridOffset : {
        value: function() {
            this.setDefaultGridOffset( [0,0,0] );
        }
    },

    drawWorkingPlane:
    {
        value: function ()
        {
            this.application.ninja.stage.clearGridCanvas();
            this.drawStageOutline();
            if (!this.isDrawingGrid()) return;

            var saveContext = this.getDrawingSurfaceElement();
            this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);

            // 3 coordinate axes for the plane
            var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]];

            // get a point that lies on the plane
            var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane);

            // define the grid parameters
            var width = this.snapManager.getStageWidth(),
                height = this.snapManager.getStageHeight(),
                nLines = 10;

            // get a matrix from working plane space to the world
            var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane);
            var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] );
            //mat = tMat.multiply(mat);
            glmat4.multiply( tMat, mat, mat);

            // the positioning of the grid may depend on the view direction.
            var stage = this.snapManager.getStage();
            var viewMat = this.viewUtils.getMatrixFromElement(stage);
            var viewDir = [viewMat[8], viewMat[9], viewMat[10]];

            var dx, dy, delta, pt0, pt1;
            dx = this._gridVerticalSpacing;
            dy = this._gridHorizontalSpacing;
            nLines = Math.floor(width / dx) + 1;
            if (MathUtils.fpCmp(dx*nLines,width) == 0)  nLines--;

            var saveColor = this._lineColor;
            var saveLineWidth = this._drawingContext.lineWidth;

            // reset the line cache
            this._gridLineArray = new Array();

            if (this.drawXY) this._lineColor = "red";
            if (this.drawYZ) this._lineColor = "green";
            if (this.drawXZ) this._lineColor = "blue";
            this._drawingContext.lineWidth = 0.25;

            // get the two endpoints of the first line with constant X
            pt0 = [-width / 2.0, height / 2.0, 0];
            pt1 = [-width / 2.0, -height / 2.0, 0];
            delta = [dx, 0, 0];

            this._gridVerticalLineCount = nLines;
            this._gridOrigin = pt1.slice(0);

            // draw the lines with constant X
            this.drawGridLines(pt0, pt1, delta, mat, nLines);

            // get the two endpoints of the first line with constant Y
            pt0 = [-width / 2.0, -height / 2.0, 0];
            pt1 = [width / 2.0, -height / 2.0, 0];

            delta = [0, dy, 0];
            nLines = Math.floor(height / dy) + 1;
            if (MathUtils.fpCmp(dy*nLines,height) == 0)  nLines--;

            this._gridHorizontalLineCount = nLines;

            // draw the lines with constant Y
            this.drawGridLines(pt0, pt1, delta, mat, nLines);

            this._lineColor = saveColor;
            this._drawingContext.lineWidth = saveLineWidth;

            // draw the lines
            this.redrawGridLines();

            this.setDrawingSurfaceElement(saveContext);
        }
    },

    drawGridLines : {
        value: function (pt0, pt1, delta, mat, nLines) {
            // get the drawing context
            if (this._drawingContext) {
                var p0 = pt0.slice(0), p1 = pt1.slice(0); // duplicate so we don't change the input.
                p0[3] = 1; p1[3] = 1;
                var d = delta.slice(0); d[3] = 1;

                //var lineArray = new Array;
                var offset = this.viewUtils.getElementOffset(this._sourceSpaceElt);
                offset[2] = 0;
                this.viewUtils.setViewportObj(this._sourceSpaceElt);
                var sourceSpaceMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );
                for (var i = 0; i < nLines; i++) {
                    // transform the points from working plane space to world space
                    var t0 = glmat4.multiplyVec3( mat, p0, [] ),
                        t1 = glmat4.multiplyVec3( mat, p1, [] );

                    // transform from world space to global screen space
                    if (this._sourceSpaceElt) {
                        t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat);
                        t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat);
                    }

                    // create a line from the endpoints
                    var line = Object.create(StageLine, {});
                    line.setPoints(t0, t1);
                    this._gridLineArray.push(line);

                    // find all the intersections
                    this.getLineIntersections(line);

                    // get the visibility at the start point
                    var vis = this.getVisibilityAtPoint(line.getPoint0());
                    line.setVisibility(vis);

                    // increment the points to the next position
                    p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0;
                    p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0;
                }
            }
        }
    },

    refreshDisplay : {
        value: function() {
            this.redrawGridLines();
            this.snapManager.drawLastHit();
        }
    },

    pushState : {
        value: function() {
            var obj = new Object();
            obj._lineColor = this._lineColor;
            obj._lineWidth = this._drawingContext.lineWidth;

            this._stateArray.push( obj );
        }
    },

    popState  : {
        value: function() {
            if (this._stateArray.length <= 0)
            {
                throw new Error( "state stack underflow" );
                return;
            }

            var obj = this._stateArray.pop();
            this._lineColor = obj._lineColor;
            this._drawingContext.lineWidth = obj._lineWidth;
			this._drawingContext.strokeStyle = obj._lineColor;
        }
    },


    redrawGridLines : {
        value: function() {
            if (!this.isDrawingGrid()) return;

            this.pushState();

            if (this.drawXY) this._lineColor = "red";
            if (this.drawYZ) this._lineColor = "green";
            if (this.drawXZ) this._lineColor = "blue";
            this._drawingContext.lineWidth = 0.25;

            // draw the lines
            var line,
                nLines = this._gridLineArray.length;

            for (var i = 0; i < nLines; i++) {
                line = this._gridLineArray[i];
                this.drawIntersectedLine(line, this._drawingContext);
            }

            this.popState();
        }
    },

    drawSelectionBounds : {
        value: function( eltArray ) {
            this._selectionCtr = null;
            var len = eltArray.length,
                i,
                j,
                bounds,
                bounds3D,
                pt,
                tmpPt,
                ssMat,
                elt;

            if (len === 0)  return;
            var context = this._drawingContext;
            if (!context)  return;

            // TODO - Get values from app settings
            context.strokeStyle = "#46a1ff";
            context.lineWidth = 2;

            // handle the single element case
            // TODO - Currently, the stage draws its own selection bounds for single selection case
            if (len === 1)
            {
                // single selection case
                //console.log( "single selection" );

                elt = eltArray[0];

                this.viewUtils.pushViewportObj( elt );

                // get the element bounds in world space
                bounds3D = this.viewUtils.getElementViewBounds3D( elt );
                for (j=0;  j<4;  j++) {
                    bounds3D[j] = this.viewUtils.localToGlobal( bounds3D[j],  elt );
                }

                // draw it
                context.beginPath();
                //VV
                context.strokeStyle = "#46a1ff";
                context.lineWidth = 2.0;

                context.moveTo( bounds3D[3][0] ,  bounds3D[3][1] );
                for (var v=0;  v<4;  v++) {
                    context.lineTo( bounds3D[v][0] ,  bounds3D[v][1] );
                }
                context.closePath();
                context.stroke();

                this._selectionCtr = MathUtils.getCenterFromBounds(3, bounds3D);
//              console.log("selection center, single elt case - ", this._selectionCtr);

                this.viewUtils.popViewportObj();
            }
            else
            {
                // get the plane from the first element to compare against the other elements
                var dot;
                var flat = true;
                var plane = this.viewUtils.getUnprojectedElementPlane( eltArray[0] );
                for (i=1;  i<len;  i++)
                {
                    elt = eltArray[i];
                    var plane2 = this.viewUtils.getUnprojectedElementPlane( elt );
                    dot = Math.abs( MathUtils.dot3(plane,plane2) );
                    if (MathUtils.fpCmp(dot, 1) != 0)
                    {
                        flat = false;
                        break;
                    }

                    // check the offset
                    var d = plane[3],  d2 = plane2[3];
                    if (MathUtils.fpCmp(d,d2) != 0)
                    {
                        flat = false;
                        break;
                    }
                }

                // if all of the planes are aligned, check if they are aligned with the view direction
                if (flat)
                {
                    var stage = this.application.ninja.currentDocument.model.documentRoot;
                    var stageMat = this.viewUtils.getMatrixFromElement(stage);
                    var viewDir = [ stageMat[8], stageMat[9], stageMat[10] ];
                    viewDir = vecUtils.vecNormalize( 3, viewDir );
                    dot = Math.abs( MathUtils.dot3(plane,viewDir) );
                    if (MathUtils.fpCmp(dot, 1) != 0)
                        flat = false;
                }
//              console.log( "drawSelectionBounds, flat: " + flat );

                // if all the elements share the same plane, draw the 2D rectangle
                if (flat)
                {
                    // make a 2D rectangle on the plane
                    var rect;
                    for (i=0;  i<len;  i++)
                    {
                        elt = eltArray[i];

                        // get the element bounds in 'plane' space
                        bounds = this.viewUtils.getElementViewBounds3D( elt );
                        ssMat = this.viewUtils.getLocalToGlobalMatrix( elt );
                        for (j=0;  j<4;  j++)
                        {
                            var localPt = bounds[j];
                            tmpPt = this.viewUtils.localToGlobal2(localPt, ssMat);
                            pt = tmpPt;

                            if (!rect)
                            {
                                rect = Object.create(Rectangle, {});
                                rect.setToPoint( pt )
                            }
                            else
                            {
                                rect.unionPoint( pt );
                            }
                        }
                    }

                    // draw the rectangle
                    context.beginPath();

                    pt = MathUtils.makeDimension3(rect.getPoint(3));

                    bounds3D = [[0,0], [0,0], [0,0], [0,0]];
                    this._selectionCtr = pt.slice(0);

                    context.moveTo( pt[0],  pt[1] );
                    for (i=0;  i<4;  i++)
                    {
                        pt = rect.getPoint(i);
                        context.lineTo( pt[0],  pt[1] );
                        bounds3D[i] = pt.slice(0);
                    }
                    context.closePath();
                    context.stroke();

                    var dir = vecUtils.vecSubtract(2, bounds3D[1], bounds3D[3]);
                    var ctr = vecUtils.vecNormalize(2, dir, vecUtils.vecDist(2, bounds3D[1], bounds3D[3])/2);

                    this._selectionCtr[0] += ctr[0] - this.application.ninja.stage.userContentLeft;
                    this._selectionCtr[1] += ctr[1] - this.application.ninja.stage.userContentTop;
                }
                else
                {
                    var minPt,  maxPt;

                    // we set the root to "the world".
                    var saveRoot = this.viewUtils.getRootElement();
                    this.viewUtils.setRootElement( this.viewUtils.getStageElement() );
                    ssMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );

                    for (i=0;  i<len;  i++)
                    {
                        elt = eltArray[i];
                        bounds = this.viewUtils.getElementViewBounds3D( elt );
                        var eltMat = this.viewUtils.getLocalToGlobalMatrix( elt );
                        for (j=0;  j<4;  j++)
                        {
                            pt = this.viewUtils.localToGlobal2( bounds[j],  eltMat );
                            var tmpPt = this.viewUtils.localToStageWorld(bounds[j], elt);
                            tmpPt = this.viewUtils.screenToView( tmpPt[0], tmpPt[1], tmpPt[2] );
                            if (!minPt)
                            {
                                minPt = pt.slice(0);
                                maxPt = pt.slice(0);
                            }
                            else
                            {
                                var x = pt[0],  y = pt[1], z = pt[2];

                                if (x < minPt[0])    minPt[0] = x;
                                if (x > maxPt[0])    maxPt[0] = x;

                                if (y < minPt[1])    minPt[1] = y;
                                if (y > maxPt[1])    maxPt[1] = y;

                                if (z < minPt[2])    minPt[2] = z;
                                if (z > maxPt[2])    maxPt[2] = z;
                            }
                        }
                    }

                    // restore the root ID
                    this.viewUtils.setRootElement (saveRoot );

                    context.beginPath();

                    var x0 = minPt[0],  y0 = minPt[1],  z0 = minPt[2],
                        x1 = maxPt[0],  y1 = maxPt[1],  z1 = maxPt[2];

                    this._selectionCtr = [x0, y0, z0];
                    this._selectionCtr[0] += (x1-x0)/2;
                    this._selectionCtr[1] += (y1-y0)/2;
                    this._selectionCtr[2] += (z1-z0)/2;

                    // get the 8 corners of the parallelpiped in world space
                    var wc = new Array();   // wc == world cube
                    wc.push(  this.viewUtils.localToGlobal2( [x0,y0,z1], ssMat ) );
                    wc.push(  this.viewUtils.localToGlobal2( [x0,y1,z1], ssMat ) );
                    wc.push(  this.viewUtils.localToGlobal2( [x1,y1,z1], ssMat ) );
                    wc.push(  this.viewUtils.localToGlobal2( [x1,y0,z1], ssMat ) );
                    wc.push(  this.viewUtils.localToGlobal2( [x0,y0,z0], ssMat ) );
                    wc.push(  this.viewUtils.localToGlobal2( [x0,y1,z0], ssMat ) );
                    wc.push(  this.viewUtils.localToGlobal2( [x1,y1,z0], ssMat ) );
                    wc.push(  this.viewUtils.localToGlobal2( [x1,y0,z0], ssMat ) );

                    // determine the signs of the normals of the faces relative to the view direction.
                    var front   = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[2],wc[1]), vecUtils.vecSubtract(3,wc[0],wc[1]))[2] ),
                        right   = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[6],wc[2]), vecUtils.vecSubtract(3,wc[3],wc[2]))[2] ),
                        back    = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[5],wc[6]), vecUtils.vecSubtract(3,wc[7],wc[6]))[2] ),
                        left    = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[1],wc[5]), vecUtils.vecSubtract(3,wc[4],wc[5]))[2] ),
                        top     = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[3],wc[0]), vecUtils.vecSubtract(3,wc[4],wc[0]))[2] ),
                        bottom  = -MathUtils.fpSign( vecUtils.vecCross(3, vecUtils.vecSubtract(3,wc[5],wc[1]), vecUtils.vecSubtract(3,wc[2],wc[1]))[2] );

                    // draw the side faces
                    var p;

                    //context.strokeStyle = ((front > 0) || (right > 0)) ? dark : light;  context.beginPath();
                    if ((front > 0) || (right > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x1, y0, z1], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x1, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((right > 0) || (back > 0)) ? dark : light;  context.beginPath();
                    if ((right > 0) || (back > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x1, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x1, y1, z0], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((back > 0) || (left > 0)) ? dark : light;  context.beginPath();
                    if ((back > 0) || (left > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x0, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x0, y1, z0], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((left > 0) || (front > 0)) ? dark : light;  context.beginPath();
                    if ((left > 0) || (front > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x0, y0, z1], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x0, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    // draw the top and bottom faces
                    //context.strokeStyle = ((front > 0) || (top > 0)) ? dark : light;  context.beginPath();
                    if ((front > 0) || (top > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x0, y0, z1], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x1, y0, z1], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((top > 0) || (back > 0)) ? dark : light;  context.beginPath();
                    if ((top > 0) || (back > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x0, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x1, y0, z0], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((back > 0) || (bottom > 0)) ? dark : light;  context.beginPath();
                    if ((back > 0) || (bottom > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x0, y1, z0], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x1, y1, z0], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((bottom > 0) || (front > 0)) ? dark : light;  context.beginPath();
                    if ((bottom > 0) || (front > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x0, y1, z1], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x1, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    // and the remaining lines - varying Z
                    if ((top > 0) || (right > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x1, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x1, y0, z1], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((right > 0) || (bottom > 0)) ? dark : light;  context.beginPath();
                    if ((right > 0) || (bottom > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x1, y1, z0], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x1, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((bottom > 0) || (left > 0)) ? dark : light;  context.beginPath();
                    if ((bottom > 0) || (left > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x0, y1, z0], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x0, y1, z1], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }

                    //context.strokeStyle = ((left > 0) || (top > 0)) ? dark : light;  context.beginPath();
                    if ((left > 0) || (top > 0)) {
                        context.beginPath();
                        p = this.viewUtils.localToGlobal2( [x0, y0, z0], ssMat );  context.moveTo( p[0], p[1] );
                        p = this.viewUtils.localToGlobal2( [x0, y0, z1], ssMat );  context.lineTo( p[0], p[1] );
                        context.closePath();  context.stroke();
                    }
                }
            }
        }
    },


    drawElementNormal:
    {
        value: function( elt )
        {
            if (!this.isDrawingElementNormal()) return;

            // set the element to be the viewport object - temporarily
            this.viewUtils.pushViewportObj( elt );

            // save the source space object and set to the target object
            var saveSource = this._sourceSpaceElt;
            this._sourceSpaceElt = elt;

            // temporarily set the line color
            var saveColor = this._lineColor;
            this._lineColor = "blue";

            var base = this.viewUtils.getCenterOfProjection();
            base[2] = 1;   // Z - make it just off the plane to avoid numerical issues
            var zAxis = base.slice(0);
            zAxis[2] += 50;
            this.moveTo( base );
            this.lineTo( zAxis );

            // draw the arrowhead
            var headWidth = 6;
            var head = MathUtils.interpolateLine3D( base, zAxis, 0.7 );
            var p0 = head.slice(0);  p0[1] += headWidth;  this.drawLine( zAxis, p0 );
            var p1 = head.slice(0);  p1[0] += headWidth;  this.drawLine( zAxis, p1 );
            var p2 = head.slice(0);  p2[1] -= headWidth;  this.drawLine( zAxis, p2 );
            var p3 = head.slice(0);  p3[0] -= headWidth;  this.drawLine( zAxis, p3 );

            this.moveTo( p0 );
            this.lineTo( p1 );
            this.lineTo( p2 );
            this.lineTo( p3 );
            this.lineTo( p0 );

            // restore the state
            this.viewUtils.popViewportObj();
            this._lineColor = saveColor;
            this._sourceSpaceElt = saveSource;
        }
    },

    drawStageOutline : {
        value: function() {
            var context = this.application.ninja.stage.gridContext;
            var stage = this.application.ninja.stage;
            var stageRoot = this.application.ninja.currentDocument.model.documentRoot;

            // draw an outline around the template body if stage has any transforms
            if(stage.currentDocument.model.views.design._template && !MathUtils.isIdentityMatrix(this.viewUtils.getMatrixFromElement(stageRoot))) {
                var saveContext = this.getDrawingSurfaceElement();
                this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);

                var stagePt = MathUtils.getPointOnPlane([0,0,1,0]);
                var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt);
                var width = this.snapManager.getStageWidth(),
                    height = this.snapManager.getStageHeight(),
                    pt0 = [0, 0, 0],
                    pt1 = [0, height, 0],
                    delta = [width, 0, 0];

                this._gridLineArray.length = 0;
                this.drawGridLines(pt0, pt1, delta, stageMat, 2);

                pt0 = [0, 0, 0];
                pt1 = [width, 0, 0];
                delta = [0, height, 0];
                this.drawGridLines(pt0, pt1, delta, stageMat, 2);

                this._lineColor = "red";
                for (var i = 0; i < 4; i++) {
                    this.drawIntersectedLine(this._gridLineArray[i], this._drawingContext);
                }

                this.setDrawingSurfaceElement(saveContext);
            }

            // draw reference lines across origin
            var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot);
            var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1);
            if(!l) return;
            var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1);
            if(!r) return;

            var t = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, 0, 0], [stage.canvas.width, 0, 0], 0.1);
            if(!t) return;
            var b = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, stage.canvas.height, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1);
            if(!b) return;

            context.save();
            context.strokeStyle = "#333";
            context.lineWidth = 0.5;

            context.beginPath();

            context.moveTo(l[0], l[1]);
            context.lineTo(r[0], r[1]);

            context.moveTo(t[0], t[1]);
            context.lineTo(b[0], b[1]);

            context.closePath();
            context.stroke();

            context.fillText("(0, 0)", bounds3D[0][0] + 4, bounds3D[0][1] - 6);
            context.restore();
        }
    },

    draw3DCompass : {
        value: function() {
            // set the element to be the viewport object - temporarily
            var tmpCanvas = this.application.ninja.stage.canvas;
            var tmpStage = this.application.ninja.currentDocument.model.documentRoot;
//          this.viewUtils.pushViewportObj( tmpCanvas );

            // save the source space object and set to the target object
            var saveSource = this._sourceSpaceElt;
            this._sourceSpaceElt = tmpStage;

            // temporarily set the line color
            var saveColor = this._lineColor;
            var saveLineWidth = this._lineWidth;

            var origLeft = 60;
            var origTop = tmpCanvas.height - 60;

            var mat = this.viewUtils.getMatrixFromElement( this._sourceSpaceElt );
            var tMat = Matrix.Translation([origLeft,origTop,0]);

            mat[12] = 0;
            mat[13] = 0;
            mat[14] = 0;

            //var resMat = tMat.multiply(mat);
            var resMat = glmat4.multiply( tMat, mat, [] );
            var origin = [0,0,0,1];

            var zoomFactor = this.application.ninja.documentBar.zoomFactor/100.0;
            var arrowSize = 50 / zoomFactor;
            var xAxis = [arrowSize,0,0,1];
            //var rO = resMat.multiply(origin);
            var rO = glmat4.multiplyVec3( resMat, origin, []);
            //var xO = resMat.multiply(xAxis);
            var xO = glmat4.multiplyVec3( resMat, xAxis, []);

            var yAxis = [0,arrowSize,0,1];
            var yO = glmat4.multiplyVec3( resMat, yAxis, []);

            var zAxis = [0,0,arrowSize,1];
            var zO = glmat4.multiplyVec3( resMat, zAxis, []);

            var saveContext = this.getDrawingSurfaceElement();
            //this.setDrawingSurfaceElement(window.stageManager.layoutCanvas);
            this.setDrawingSurfaceElement(this.application.ninja.stage.layoutCanvas);
            // clear just the 3d compass area
            this._drawingContext.save();
            this._drawingContext.rect(10, origTop-60, 100, 110);
            this._drawingContext.clip();

            this._drawingContext.lineWidth = 2.0;

            this._drawingContext.beginPath();
            this._drawingContext.strokeStyle = "red";
            this._drawingContext.moveTo(rO[0], rO[1]);
            this._drawingContext.lineTo(xO[0], xO[1]);
            this._drawingContext.closePath();
            this._drawingContext.stroke();
            this.drawArrowHead(rO, xO);

            this._drawingContext.beginPath();
            this._drawingContext.strokeStyle = "green";
            this._drawingContext.moveTo(rO[0], rO[1]);
            this._drawingContext.lineTo(yO[0], yO[1]);
            this._drawingContext.closePath();
            this._drawingContext.stroke();
            this.drawArrowHead(rO, yO);

            this._drawingContext.beginPath();
            this._drawingContext.strokeStyle = "blue";
            this._drawingContext.moveTo(rO[0], rO[1]);
            this._drawingContext.lineTo(zO[0], zO[1]);
            this._drawingContext.closePath();
            this._drawingContext.stroke();
            this.drawArrowHead(rO, zO);

            // restore the state
//          this.viewUtils.popViewportObj();
            this._drawingContext.restore();
            this.setDrawingSurfaceElement(saveContext);
            this._lineColor = saveColor;
            this._lineWidth = saveLineWidth;
            this._sourceSpaceElt = saveSource;
        }
    },

    drawArrowHead : {
        value: function(base, onAxis) {
            var headWidth = 6;

            // draw the arrowhead
            var head = MathUtils.interpolateLine3D( base, onAxis, 0.7 );
            p0 = head.slice(0);  p0[1] += headWidth;
            p1 = head.slice(0);  p1[0] += headWidth;
            p2 = head.slice(0);  p2[1] -= headWidth;
            p3 = head.slice(0);  p3[0] -= headWidth;

            this._drawingContext.beginPath();

            this._drawingContext.moveTo(base[0], base[1]);
            this._drawingContext.lineTo(onAxis[0], onAxis[1]);

            this._drawingContext.moveTo(onAxis[0], onAxis[1]);
            this._drawingContext.lineTo(p0[0], p0[1]);
            this._drawingContext.moveTo(onAxis[0], onAxis[1]);
            this._drawingContext.lineTo(p1[0], p1[1]);
            this._drawingContext.moveTo(onAxis[0], onAxis[1]);
            this._drawingContext.lineTo(p2[0], p2[1]);
            this._drawingContext.moveTo(onAxis[0], onAxis[1]);
            this._drawingContext.lineTo(p3[0], p3[1]);

            this._drawingContext.moveTo( p0[0], p0[1] );
            this._drawingContext.lineTo( p1[0], p1[1] );
            this._drawingContext.lineTo( p2[0], p2[1] );
            this._drawingContext.lineTo( p3[0], p3[1] );
            this._drawingContext.lineTo( p0[0], p0[1] );

            this._drawingContext.closePath();

            this._drawingContext.stroke();
        }
    },

    drawGridAxes : {
        value: function (ctr, width, height, headSize) {
            this._drawingContext.lineWidth = 2.0;

            this._lineColor = "red";
            var pt0 = ctr.slice(0), pt1 = pt0.slice(0);
            pt1[0] += width;
            this.moveTo(pt0);
            this.lineTo(pt1);
            var pt2 = pt1.slice(0);
            pt2[0] -= headSize;
            pt2[1] += headSize;
            this.lineTo(pt2);
            //this.moveTo(pt1);
            pt2[1] -= 2 * headSize;
            this.lineTo(pt2);
            this.lineTo(pt1);

            this._lineColor = "green";
            pt1 = pt0.slice(0);
            pt1[1] += height;
            this.moveTo(pt0);
            this.lineTo(pt1);
            pt2 = pt1.slice(0);
            pt2[1] -= headSize;
            pt2[0] += headSize;
            this.lineTo(pt2);
            //this.moveTo(pt1);
            pt2[0] -= 2 * headSize;
            this.lineTo(pt2);
            this.lineTo(pt1);

            this._lineColor = "blue";
            pt1 = pt0.slice(0);
            pt1[2] += height < width ? height : width;
            this.moveTo(pt0);
            this.lineTo(pt1);
            pt2 = pt1.slice(0);
            pt2[2] -= headSize;
            pt2[1] += headSize;
            this.lineTo(pt2);
            //this.moveTo(pt1);
            pt2[1] -= 2 * headSize;
            this.lineTo(pt2);
            this.lineTo(pt1);
        }
    }
});