/* <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", "border", "border-width", "border-style", "-webkit-transform"], 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);
            }

            // Redraw stage only once after all addition is completed
            var stage = this.application.ninja.stage;
            stage.drawLayout = true;
            stage.updatePlanes = true;
            stage.draw3DInfo = true;
            stage.needsDrawSelection = true;
        }
    },

    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);
            }

            // Redraw stage only once after all deletion is completed
            var stage = this.application.ninja.stage;
            stage.drawLayout = true;
            stage.updatePlanes = true;
            stage.draw3DInfo = true;
            stage.needsDrawSelection = true;
        }
    },

    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,
                    eltModel,
                    adjustStagePadding = !isChanging || (event.detail.data.prop !== "matrix");
                for(var i=0; i < len; i++) {
                    elt = els[i];
                    eltModel = elt.elementModel;
                    eltModel.setProperty("offsetCache", false);

                    if(eltModel.selection !== "body") {
                        if(isChanging) {
                            eltModel.props3D.matrix3d = null;
                        } else {
                            eltModel.props3D.init(elt, false);
                        }
                    }
                    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) {
                    // If we didn't already set userPaddingTop or userPaddingLeft, force stage to redraw
                    //this.snapManager._isCacheInvalid = true;
//                    stage.draw3DInfo = true;
                    stage.needsDraw = true;
                }

                // 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()) {
                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);
            }
            this.draw3DCompass();
        }
    },

    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();
        }
    },

    /**
     * Draws selection highlight and reg. point for a given element
     */
    drawElementBoundingBox: {
        value: function(elt, context, stageInfo) {
            this.viewUtils.pushViewportObj( elt );
            var bounds3D = this.viewUtils.getElementViewBounds3D( elt );

            var tmpMat = this.viewUtils.getLocalToGlobalMatrix( elt );
            for (var j=0;  j<4;  j++) {
                var localPt = bounds3D[j];
                var tmpPt = this.viewUtils.localToGlobal2(localPt, tmpMat);

                if(stageInfo) {
                    tmpPt = vecUtils.vecScale(3, tmpPt, stageInfo.zoomFactor);
                    tmpPt[0] += stageInfo.scrollLeft;
                    tmpPt[1] += stageInfo.scrollTop;
                }
                bounds3D[j] = tmpPt;
            }
            this.viewUtils.popViewportObj();

            // draw it
            context.beginPath();
            context.moveTo( bounds3D[3][0] + 0.5 ,  bounds3D[3][1] - 0.5 );

            // This more granular approach lets us specify different gaps for the selection around the element
            context.lineTo( bounds3D[0][0] - 0.5 ,  bounds3D[0][1] - 0.5 );
            context.lineTo( bounds3D[1][0] - 0.5 ,  bounds3D[1][1] + 0.5 );
            context.lineTo( bounds3D[2][0] + 0.5  ,  bounds3D[2][1] + 0.5 );
            context.lineTo( bounds3D[3][0] + 0.5  ,  bounds3D[3][1] + 0.5 );

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

            return bounds3D;
        }
    },

    drawSelectionBounds : {
        value: function(eltArray, drawSelectionCube) {
            this._selectionCtr = null;
            var len = eltArray.length,
                i,
                j,
                bounds,
                bounds3D,
                pt,
                tmpPt,
                ssMat,
                ssMatInv,
                elt,
                dir,
                ctr,
                stageInfo,
                stageComponent = this.application.ninja.stage,
                context;
            
            if (len === 0)  return;
            context = stageComponent.context;
            if(!context) return;
            // TODO - Get values from app settings
            context.strokeStyle = "#46a1ff";
            context.lineWidth = 1;

            // for drawing, we need scrollLeft, scrollTop, and zoom factor from the stage
            var zoomFactor = stageComponent.zoomFactor;
            if(zoomFactor !== 1) {
                stageInfo = {zoomFactor: zoomFactor, scrollLeft: stageComponent._scrollLeft*(zoomFactor - 1), scrollTop: stageComponent._scrollTop*(zoomFactor - 1)};
            }

            // handle the single element case
            // TODO - Currently, the stage draws its own selection bounds for single selection case
            if (len === 1)
            {
//                console.log( "single selection" );
                elt = eltArray[0];
                bounds3D = this.drawElementBoundingBox(elt, context, stageInfo);
                this._selectionCtr = [0,0,0];
                dir = vecUtils.vecSubtract(2, bounds3D[1], bounds3D[3]);
                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
            {
                // 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];

                        bounds = this.drawElementBoundingBox(elt, context, stageInfo);

                        if(drawSelectionCube) {
                            for (j=0;  j<4;  j++)
                            {
                                pt = bounds[j];
                                if (!rect)
                                {
                                    rect = Object.create(Rectangle, {});
                                    rect.setToPoint( pt )
                                }
                                else
                                {
                                    rect.unionPoint( pt );
                                }
                            }
                        }
                    }

                    if(rect) {
                        context.lineWidth = 2;
                        // draw the multi-selection 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();

                        dir = vecUtils.vecSubtract(2, bounds3D[1], bounds3D[3]);
                        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
                {
                    if(drawSelectionCube) {
                        var minPt, maxPt, x, y, z,
                            saveRoot = this.viewUtils.getRootElement();

                        // we set the root to "the world".
                        this.viewUtils.setRootElement( this.viewUtils.getStageElement() );
                        ssMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );  // stageToGlobal
                        ssMatInv = glmat4.inverse(ssMat, []);   // globalToStageWorld
                        this.viewUtils.setRootElement( saveRoot );

                        for (i=0;  i<len;  i++) {
                            elt = eltArray[i];
                            bounds = this.drawElementBoundingBox(elt, context, stageInfo);
                            for (j=0;  j<4;  j++) {
                                pt = MathUtils.transformAndDivideHomogeneousPoint( bounds[j], ssMatInv );

                                if (!minPt) {
                                    minPt = pt.slice(0);
                                    maxPt = pt.slice(0);
                                } else {
                                    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;
                                }
                            }
                        }

                        context.beginPath();
                        var x0 = minPt[0],  y0 = minPt[1],  z0 = minPt[2],
                            x1 = maxPt[0],  y1 = maxPt[1],  z1 = maxPt[2];

                        var stageWorldCtr = [ 0.5*(x0 + x1),  0.5*(y0 + y1), 0.5*(z0 + z1) ];
                        this._selectionCtr = MathUtils.transformAndDivideHomogeneousPoint( stageWorldCtr, ssMat );

                        // 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();
                        }
                    } else {
                        for (i=0;  i<len;  i++) {
                            elt = eltArray[i];
                            bounds = this.drawElementBoundingBox(elt, context, stageInfo);
                        }
                    }
                }
            }
        }
    },

    /* Currently, we are not drawing the element normal indicator. */
    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() {
//            console.log("drawStageOutline");
            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() {
//            console.log("draw3DCompass");
            var tmpCanvas = this.application.ninja.stage.layoutCanvas;
            var tmpStage = this.application.ninja.currentDocument.model.documentRoot;

            // 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(this.application.ninja.stage.gridCanvas);
            // 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._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);
        }
    }
});