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

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 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 OWNER 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;
		}
	},


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