/*
zIndexes:
n = num of drawCanvases
drawCanvas[i] 10+2*i
path[i].mathsInputs 10+2*i+1
toolsCanvas 10+2*n
cursorCanvas 10+2*n+1
*/
var selImg = new Image();
selImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAqCAYAAACtMEtjAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAABDlJREFUWIW1l19IZHUUxz9nRx0GZ4fMUEZxBTFBwQiNacthUURLGf+gA4Im4YskEi1hURKGSEFRivUgZKbZsoVC6sPGsvRgYKAs0kP4MhAZQewYrdKqM+J4Tw/eO4ymzsyqX/hxufd3zv3c3/mdc/hdAZ4FAqq6yyXqCnAd+FhE5LJBj4Be4MPLBm0DIeAdEbl5mSAB9s37T0Tk1csCAeByuQBswOciUn8ZIAOQxsZGBgYGAK4C34jIcxcNawT+bW9vV1XVrq4uBRRYB0pUlYsYAD5gy+fzqarq7u6u1tTUWLBfgOyLAEX3SETY39/H4XAwNTVFWVkZHBbzdyLyxHnDduWkhzk5OczOzlJcXAxQCXwpIo7zghTQ2FgCFBQUMDU1RV5eHkArMHxekMFhLf1PHo+HyclJ0tPTAV4TkY/OAwI4sppYVVdXMz09TVpaGsDbIvLGuUBnqaWlheHhaOQ+FZGOx4G9BGzW19drOBzWszQ0NGSlfQjwJVtHtcDDurq6uCBV1b6+Pgv2F+BJBlQD/JMoKBKJaGdnpwX7AyhOqmCPp/dpstlsjI+P4/P5AK5xWNC58fys9E5KdrudiYkJvF4vwDPAVyLijAd6LGVlZXHr1i2KiorgcJ+/FhH7WSADszMkq/z8fObm5sjNzQVoAcZOO3tYLeixVVJSwu3bt8nMzAToAj44DQSAYRgJJcNJunHjBhMTE6SmpgK8KyKvnwRKOhlOUlNTEzMzM7jdbjjsHq/EzqcQ073jKRQKEQwGMQyDvb296AiFQoTDYdxuNx6Ph4WFhVTgCxF5qKo/WCAxYXFDt7Gxgd/vZ319HRHh4OAAwzCIRCIYhoHNZos1dwDfi4gfuJOCGbrTIGNjY7hcLjo6OsjPz8fr9bK6ugrwN3AfSDXfoebVGhHACXiBnwBeBIJVVVW6vb19pN2Mjo4qoOXl5bqzs6Oqqmtra5qRkaHAn8CTgB1IM4EpmGfFmE5jN+d4AQhWVlYeAfX391v9TEVE5+fno3M9PT3W17+VTFO9boFUVff29rS7u9uCLAEDQLi2tlYNw1BV1eXlZU1PT1cgAGQkA3rQ3NysW1tb2tbWZkF+BZ42l76ckpKii4uL0VX5/X7LritR0PNAsLS0VKurqy3n+8C1GKNuQFtbW6OgpaUltdlsCiwCzkRAHuCBtR/Ajxw7NJqpuuZ0OnVlZSUKa2hosHxqEgGVAxumwwLw1CmGbwLa29sbBd27d09FRIFvEwFVmJAZ4OoZhi7g9+zsbA0EAqqqGgqFrHBvAWXxQC8DnwH2BL7qJqCDg4PRVd29e9fKwNF4ICdwJiDGOAcIFBYW6ubmpobDYR0ZGVGHw6HALlB6qm8igGOw9wFtb2/XioqKaFEDvwFVFwkqAIIxgJ85/NnOO9MvWZAJew+4A7QBrkR8xNqoZGQeQtJU9VGiPv8B36EL9hS19McAAAAASUVORK5CYII=";
function makeFillCursor(canvas,color) {
	var ctx = canvas.getContext('2d');
	
	ctx.translate(26,25);
	ctx.rotate(-0.25*Math.PI);
	
	ctx.strokeStyle = '#000';
	ctx.fillStyle = '#FFF';	
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(-7,-8);
	ctx.lineTo(7,-8);
	ctx.scale(7/2,1);
	ctx.arc(0,-8,2,Math.PI,2*Math.PI);
	ctx.scale(2/7,1);
	ctx.lineTo(7,8);
	ctx.scale(7/2,1);
	ctx.arc(0,8,2,0,Math.PI);
	ctx.scale(2/7,1);	
	ctx.lineTo(-7,-8);
	ctx.stroke();
	ctx.fill();
	
	ctx.strokeStyle = '#000';
	ctx.fillStyle = color;
	ctx.lineWidth = 0.5;
	ctx.beginPath();
	ctx.moveTo(7,-8);
	ctx.scale(7/2,1);
	ctx.arc(0,-8,2,Math.PI,3*Math.PI);
	ctx.scale(2/7,1);
	ctx.fill();
	ctx.stroke();
	
	ctx.fillRect(-7,0,9,5);
	ctx.strokeRect(-7,0,9,5);	
	
	ctx.beginPath();
	ctx.moveTo(0,-4);
	ctx.arc(0,-4,1,0,2*Math.PI);
	ctx.fill();
	ctx.beginPath();
	ctx.moveTo(0,-4);	
	ctx.quadraticCurveTo(20,10,8,-2);
	ctx.stroke();
	
	ctx.strokeStyle = color;
	ctx.beginPath();
	ctx.moveTo(-3,-9);
	ctx.quadraticCurveTo(-6,-17,-15,-3);
	ctx.quadraticCurveTo(-9,-9,-7,-9);
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
	
	ctx.rotate(0.25*Math.PI);
	ctx.translate(-26,-25);
	
	return [canvas.toDataURL(), 26-15*Math.sqrt(2)/2-3*Math.sqrt(2)/2, 25+15*Math.sqrt(2)/2-3*Math.sqrt(2)/2];
	// [data image, hotspotX, hotspotY]
}

function boolean(testVar, def) {
	if (typeof testVar == 'boolean') {
		return testVar;
	} else {
		return def;
	}
}
if (un(draw)) var draw = {};
function addDrawTools(object) {
	var zIndex = object.zIndex || 10;
	if (typeof object.protractor !== 'undefined' || typeof object.compass !== 'undefined' || typeof object.ruler !== 'undefined') {
		var retainCursorCanvas = true;
	} else {
		var retainCursorCanvas = boolean(object.retainCursorCanvas,false); // if false, hides the cursorCanvas when mode is 'select'
	}
	var color = object.color || '#000';
	var thickness = object.thickness || 1;
	var fillColor = object.fillColor || 'none';
	var buttonSize = object.buttonSize || 55;
	var buttonColor = object.buttonColor || '#C9F';
	var buttonSelectedColor = object.buttonSelectedColor || '#FFC';
	var defaultMode = object.defaultMode || object.drawMode || 'none';
	var drawMode = object.drawMode || object.defaultMode;
	var drawArea = object.drawArea || [0,0,mainCanvasWidth,mainCanvasHeight];
	var drawRelPos = object.drawRelPos || [0,0];
	var snapLinesTogether = boolean(object.snapLinesTogether, false);
	var gridSnap = boolean(object.gridSnap, false);
	var gridSnapSize = object.gridSnapSize || 15;
	var gridSnapRect = object.gridSnapRect || [0,0,1200,700];
	var gridMargin = object.gridMargin || [0,0,0,0];
	var selectTolerance = object.selectTolerance || 20;
	var selectColor = object.selectColor || '#33F';
	var selectPadding = object.selectPadding || 30;	
	if (typeof object.maxLines == 'number') {
		var maxLines = object.maxLines;
	} else {
		var maxLines = 10000;
	}
	var snap = boolean(object.snap,true);
	var snapTolerance = object.snapTolerance || 25;	
	var path = object.path || [];	
	var drawCanvas = [createCanvas(drawArea[0]+drawRelPos[0],drawArea[1]+drawRelPos[1],drawArea[2],drawArea[3],true,false,false,zIndex),createCanvas(drawArea[0],drawArea[1],drawArea[2],drawArea[3],true,false,false,zIndex+2)];
	//var drawCanvas2 = [createCanvas(drawArea[0]+drawRelPos[0],drawArea[1]+drawRelPos[1],drawArea[2],drawArea[3],true,false,false,zIndex),createCanvas(drawArea[0],drawArea[1],drawArea[2],drawArea[3],true,false,false,zIndex+2)];		
	zIndex += 4;
	var toolsCanvas = createCanvas(drawArea[0]+drawRelPos[0],drawArea[1]+drawRelPos[1],drawArea[2],drawArea[3],true,false,false,zIndex);
	zIndex++;
	var cursorCanvas = createCanvas(drawArea[0]+drawRelPos[0],drawArea[1]+drawRelPos[1],drawArea[2],drawArea[3],true,false,true,zIndex);	
	zIndex++;
	var hiddenCanvas = createCanvas(0,0,50,50,false,false,false,0); // for drawing cursors on
	var flattenMode = boolean(object.flattenMode,false); // flatten everything as much as possible (good for scrolling)
	highlightCursorPositions = boolean(object.highlightCursorPositions,false);

	draw.scale = 1;
	draw.zIndex = zIndex;
	draw.drawButtonZIndex = zIndex+1000000;
	draw.drawCanvas = drawCanvas;// moves when things are dragged
	//draw.drawCanvas2 = drawCanvas2;// does not move
	draw.hiddenCanvas = hiddenCanvas;
	draw.toolsCanvas = toolsCanvas;
	draw.toolsctx = toolsCanvas.getContext('2d');
	draw.toolOrder = ['compass','protractor','ruler'];// first is front-most
	draw.buttons = [];
	draw.flattenMode = flattenMode;
	draw.drawMode = drawMode;
	draw.defaultMode = defaultMode;
	draw.startDrawMode = drawMode;
	draw.prevDrawMode = 'none';
	draw.drawing = false;
	draw.drawArea = drawArea;
	draw.drawRelPos = drawRelPos;
	draw.maxLines = maxLines;
	draw.snapPoints = [];
	draw.showSnapPoints = false;
	draw.snap = true;
	draw.snapTolerance = snapTolerance;
	draw.path = path.slice(0);
	draw.startPath = path.slice(0);
	draw.protractorVisible = false;
	draw.compassVisible = false;
	draw.rulerVisible = false;
	draw.compassHelpVisible = false;
	draw.color = color;
	draw.startColor = color;
	draw.thickness = thickness;
	draw.startThickness = thickness;
	draw.fillColor = fillColor;
	draw.startFillColor = fillColor;
	draw.buttonSize = buttonSize;
	draw.buttonColor = buttonColor;
	draw.buttonSelectedColor = buttonSelectedColor;
	draw.colorButtons = [];
	draw.colorSelectVisible = false;
	draw.lineWidthSelectVisible = false;
	draw.fillColorButtons = [];
	draw.fillColorSelectVisible = false;			
	draw.thicknessButtons = [];
	draw.thicknessSelectVisible = false;
	draw.lineEndStartButtons = [];
	draw.lineEndMidButtons = [];
	draw.lineEndFinButtons = [];
	draw.lineEndSizeButtons = [];
	draw.lineEndButtonsVisible = false;
	draw.lineEndsSize = 12;
	draw.selectButtons = [];
	draw.selectButtonsVisible = false;
	draw.cursorCanvas = cursorCanvas;
	draw.retainCursorCanvas = retainCursorCanvas;
	draw.highlightCursorPositions = highlightCursorPositions;
	draw.penCursor = null;
	draw.penCursorHotspot = [];
	draw.rulerEdgeCursor1 = null;
	draw.rulerEdgeCursorHotspot1 = [];
	draw.rulerEdgeCursor2 = null;
	draw.rulerEdgeCursorHotspot2 = [];						
	draw.ruler180 = null;						
	draw.ruler180Hotspot = [];						
	draw.lineCursor = null;
	draw.lineCursorHotspot = [];
	draw.fillCursor = null;
	draw.fillCursorHotspot = [];
	draw.prevX = null;
	draw.prevY = null;
	draw.startX = null;
	draw.startY = null;
	draw.snapLinesTogether = snapLinesTogether;
	draw.gridSnap = gridSnap;
	draw.gridSnapRect = gridSnapRect;
	draw.gridSnapSize = gridSnapSize;
	draw.gridVertMargins = object.gridVertMargins || [];
	draw.gridHorizMargins = object.gridHorizMargins || [];
	draw.gridMargin = gridMargin;
	draw.horizSnap = 'left';
	draw.vertSnap = 'top';			
	draw.selectTolerance = selectTolerance;
	draw.selectColor = selectColor;
	draw.selectPadding = selectPadding;
	draw.triggerEnabled = false;
	draw.triggerNum = 0;
	draw.triggerNumMax = 1;
	draw.stepNum = 0;
	draw.videoAdded = false;
	draw.tableSizeVisible = false;
	changeDrawMode(draw.drawMode);
	draw.cursors = {
		default:'default',
		move1:'url("/i2/cursors/openhand.cur"), auto',
		move2:'url("/i2/cursors/closedhand.cur"), auto',
		move3:'move',
		ew:'ew-resize',
		ns:'ns-resize',
		nw:'nw-resize',
		text:'text',
		pointer:'pointer',
		rotate:'url("/i2/cursors/rotate.cur"), auto',
		update:function() {
			var canvas = draw.hiddenCanvas;
			var ctx = draw.hiddenCanvas.ctx;

			ctx.clearRect(0,0,50,50);			
			ctx.lineCap = 'round';
			ctx.lineJoin = 'round';
			ctx.translate(25,25);
			ctx.rotate(Math.PI/4);
				ctx.fillStyle = draw.color;
				ctx.fillRect(-5,-11,10,20);
				ctx.fillRect(-5,-18,10,5);
				ctx.beginPath();
				ctx.moveTo(-5,11);
				ctx.lineTo(0,18);
				ctx.lineTo(5,11);
				ctx.lineTo(-5,11);
				ctx.fill();		
			ctx.rotate(-Math.PI/4);	
			ctx.translate(-25,-25);

			draw.penCursor = canvas.toDataURL();
			draw.penCursorHotspot = [25-18/Math.sqrt(2),25+18/Math.sqrt(2)];	
			
			ctx.clearRect(0,0,50,50);
			ctx.strokeStyle = draw.color;
			ctx.lineWidth = 2;
			ctx.beginPath();
			ctx.moveTo(2,2);
			ctx.lineTo(12,12);
			ctx.moveTo(2,12);
			ctx.lineTo(12,2);
			ctx.stroke();
			
			draw.lineCursor = canvas.toDataURL();
			draw.lineCursorHotspot = [7,7];
	
			if (typeof draw.ruler !== 'undefined') {
				ctx.clearRect(0,0,50,50);
				ctx.translate(25,25);
				ctx.rotate(draw.ruler.angle);
					ctx.fillStyle = draw.color;
					ctx.fillRect(-5,-11,10,20);
					ctx.fillRect(-5,-18,10,5);
					ctx.beginPath();
					ctx.moveTo(-5,11);
					ctx.lineTo(0,18);
					ctx.lineTo(5,11);
					ctx.lineTo(-5,11);
					ctx.fill();		
				ctx.rotate(-draw.ruler.angle);	
				ctx.translate(-25,-25);

				draw.rulerEdgeCursor1 = canvas.toDataURL();
				draw.rulerEdgeCursorHotspot1 = [25-18*Math.sin(draw.ruler.angle),25+18*Math.cos(draw.ruler.angle)];
				
				ctx.clearRect(0,0,50,50);
				ctx.translate(25,25);
				ctx.rotate(Math.PI+draw.ruler.angle);
					ctx.fillStyle = draw.color;
					ctx.fillRect(-5,-11,10,20);
					ctx.fillRect(-5,-18,10,5);
					ctx.beginPath();
					ctx.moveTo(-5,11);
					ctx.lineTo(0,18);
					ctx.lineTo(5,11);
					ctx.lineTo(-5,11);
					ctx.fill();		
				ctx.rotate(-Math.PI-draw.ruler.angle);	
				ctx.translate(-25,-25);

				draw.rulerEdgeCursor2 = canvas.toDataURL();
				draw.rulerEdgeCursorHotspot2 = [25-18*Math.sin(Math.PI+draw.ruler.angle),25+18*Math.cos(Math.PI+draw.ruler.angle)];
				
				ctx.clearRect(0,0,50,50);
				ctx.translate(25,25);
				ctx.rotate(Math.PI+draw.ruler.angle);
					ctx.fillStyle = draw.color;
					ctx.beginPath();
					ctx.moveTo(0,-7);
					ctx.lineTo(-8,3);
					ctx.lineTo(8,3);
					ctx.lineTo(0,-7);
					ctx.fill();
				ctx.rotate(-Math.PI-draw.ruler.angle);	
				ctx.translate(-25,-25);
				
				draw.ruler180 = canvas.toDataURL();
				draw.ruler180Hotspot = [25,25];
			}
			
			if (draw.drawMode == 'floodFill') {
				ctx.clearRect(0,0,50,50);
				
				ctx.translate(26,25);
				ctx.rotate(-0.25*Math.PI);
				
				ctx.strokeStyle = '#000';
				ctx.fillStyle = '#FFF';	
				ctx.lineWidth = 1;
				ctx.beginPath();
				ctx.moveTo(-7,-8);
				ctx.lineTo(7,-8);
				ctx.scale(7/2,1);
				ctx.arc(0,-8,2,Math.PI,2*Math.PI);
				ctx.scale(2/7,1);
				ctx.lineTo(7,8);
				ctx.scale(7/2,1);
				ctx.arc(0,8,2,0,Math.PI);
				ctx.scale(2/7,1);	
				ctx.lineTo(-7,-8);
				ctx.stroke();
				ctx.fill();
				
				var color = draw.fillColor !== 'none' ? draw.fillColor : '#00F';
				
				ctx.strokeStyle = '#000';
				ctx.fillStyle = color;
				ctx.lineWidth = 0.5;
				ctx.beginPath();
				ctx.moveTo(7,-8);
				ctx.scale(7/2,1);
				ctx.arc(0,-8,2,Math.PI,3*Math.PI);
				ctx.scale(2/7,1);
				ctx.fill();
				ctx.stroke();
				
				ctx.fillRect(-7,0,9,5);
				ctx.strokeRect(-7,0,9,5);	
				
				ctx.beginPath();
				ctx.moveTo(0,-4);
				ctx.arc(0,-4,1,0,2*Math.PI);
				ctx.fill();
				ctx.beginPath();
				ctx.moveTo(0,-4);	
				ctx.quadraticCurveTo(20,10,8,-2);
				ctx.stroke();
				
				ctx.strokeStyle = color;
				ctx.beginPath();
				ctx.moveTo(-3,-9);
				ctx.quadraticCurveTo(-6,-17,-15,-3);
				ctx.quadraticCurveTo(-9,-9,-7,-9);
				ctx.closePath();
				ctx.fill();
				ctx.stroke();
				
				ctx.rotate(0.25*Math.PI);
				ctx.translate(-26,-25);
				
				draw.fillCursor = canvas.toDataURL();
				draw.fillCursorHotspot = [
					26-15*Math.sqrt(2)/2-3*Math.sqrt(2)/2,
					25+15*Math.sqrt(2)/2-3*Math.sqrt(2)/2
				];
			}
			
			ctx.clearRect(0,0,50,50);
			ctx.lineCap = 'butt';
			ctx.lineJoin = 'miter';
			drawArrow({ctx:ctx,startX:25,startY:19,finX:25,finY:31,arrowLength:4,color:'#000',lineWidth:5,fillArrow:true,doubleEnded:false,angleBetweenLinesRads:0.5});
			drawArrow({ctx:ctx,startX:25,startY:20,finX:25,finY:31,arrowLength:4,color:'#FFF',lineWidth:3,fillArrow:true,doubleEnded:false,angleBetweenLinesRads:0.5});
			draw.downArrowCursor = canvas.toDataURL();
			draw.downArrowCursorHotspot = [25,31];
			
			ctx.clearRect(0,0,50,50);
			drawArrow({ctx:ctx,startX:19,startY:25,finX:31,finY:25,arrowLength:4,color:'#000',lineWidth:5,fillArrow:true,doubleEnded:false,angleBetweenLinesRads:0.5});
			drawArrow({ctx:ctx,startX:20,startY:25,finX:30,finY:25,arrowLength:4,color:'#FFF',lineWidth:3,fillArrow:true,doubleEnded:false,angleBetweenLinesRads:0.5});
			draw.rightArrowCursor = canvas.toDataURL();
			draw.rightArrowCursorHotspot = [31,25];
			
			ctx.clearRect(0,0,50,50);
			drawArrow({ctx:ctx,startX:25-6/Math.sqrt(2),startY:25+6/Math.sqrt(2),finX:25+6/Math.sqrt(2),finY:25-6/Math.sqrt(2),arrowLength:4,color:'#000',lineWidth:5,fillArrow:true,doubleEnded:false,angleBetweenLinesRads:0.5});
			drawArrow({ctx:ctx,startX:25-6/Math.sqrt(2),startY:25+6/Math.sqrt(2),finX:25+6/Math.sqrt(2),finY:25-6/Math.sqrt(2),arrowLength:4,color:'#FFF',lineWidth:3,fillArrow:true,doubleEnded:false,angleBetweenLinesRads:0.5});			
			draw.upRightArrowCursor = canvas.toDataURL();
			draw.upRightArrowCursorHotspot = [25+6/Math.sqrt(2),25-6/Math.sqrt(2)];			
			
			this.pen = 'url("'+draw.penCursor+'") '+draw.penCursorHotspot[0]+' '+draw.penCursorHotspot[1]+', auto';
			this.cross = 'url("'+draw.lineCursor+'") '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+' auto';
			this.rulerPen1 = 'url("'+draw.rulerEdgeCursor1+'") '+draw.rulerEdgeCursorHotspot1[0]+' '+draw.rulerEdgeCursorHotspot1[1]+', auto';
			this.rulerPen2 = 'url("'+draw.rulerEdgeCursor2+'") '+draw.rulerEdgeCursorHotspot2[0]+' '+draw.rulerEdgeCursorHotspot2[1]+', auto';
			this.ruler180 = 'url("'+draw.ruler180+'") '+draw.ruler180Hotspot[0]+' '+draw.ruler180Hotspot[1]+', auto';
			this.fill = 'url("'+draw.fillCursor+'") '+draw.fillCursorHotspot[0]+' '+draw.fillCursorHotspot[1]+', auto';
			this.downArrow = 'url("'+draw.downArrowCursor+'") '+draw.downArrowCursorHotspot[0]+' '+draw.downArrowCursorHotspot[1]+', auto';
			this.rightArrow = 'url("'+draw.rightArrowCursor+'") '+draw.rightArrowCursorHotspot[0]+' '+draw.rightArrowCursorHotspot[1]+', auto';
			this.upRightArrow = 'url("'+draw.upRightArrowCursor+'") '+draw.upRightArrowCursorHotspot[0]+' '+draw.upRightArrowCursorHotspot[1]+', auto';			
		}
	}
	if (typeof object.protractor == 'object') {
		var buttonPos = object.protractor.buttonPos || [1120,620];
		var protractorButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		protractorButton.type = 'protractor';
		protractorButton.draw = function() {
			var color = draw.buttonColor;
			if (draw.protractorVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.lineWidth = 1;
			this.ctx.strokeStyle = '#000';
			this.ctx.beginPath();
			this.ctx.moveTo(46.5,35.5);
			this.ctx.lineTo(46.5,37.5);
			this.ctx.lineTo(8.5,37.5);		
			this.ctx.lineTo(8.5,34.5);
			this.ctx.arc(27.5,34.5,19,Math.PI,2*Math.PI);
			this.ctx.stroke();	
			if (draw.protractorVisible == false) {
				this.ctx.fillStyle = '#CCF';
				this.ctx.fill();
				for (var i = 0; i < 7; i++) {
					this.ctx.moveTo(27.5+4*Math.cos((1+i/6)*Math.PI),34.5+4*Math.sin((1+i/6)*Math.PI));
					this.ctx.lineTo(27.5+16*Math.cos((1+i/6)*Math.PI),34.5+16*Math.sin((1+i/6)*Math.PI))
				}
				this.ctx.stroke();
				this.ctx.beginPath();
				this.ctx.arc(27.5,34.5,15,Math.PI,2*Math.PI);
				for (var i = 0; i < 19; i++) {
					this.ctx.moveTo(27.5+17*Math.cos((1+i/18)*Math.PI),34.5+17*Math.sin((1+i/18)*Math.PI));
					this.ctx.lineTo(27.5+19*Math.cos((1+i/18)*Math.PI),34.5+19*Math.sin((1+i/18)*Math.PI))
				}
				this.ctx.moveTo(27.5,34.5);
				this.ctx.lineTo(27.5,30.5);
				this.ctx.moveTo(23.5,34.5);
				this.ctx.lineTo(31.5,34.5);		
				this.ctx.stroke();
			}			
		}
		protractorButton.click = function() {
			draw.protractorVisible = !draw.protractorVisible;
			moveToolToFront('protractor');			
		}
		draw.buttons.push(protractorButton);
		draw.protractor = {
			center:object.protractor.center || [600,500],
			startCenter:object.protractor.center || [600,500],
			radius:object.protractor.radius || 250,
			startRadius:object.protractor.radius || 250,			
			angle:0,
			color:object.protractor.color || '#CCF',
		}
	}
	if (typeof object.ruler == 'object') {
		var buttonPos = object.ruler.buttonPos || [1120,620];
		var rulerButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		var markings = boolean(object.ruler.markings,true);
		rulerButton.type = 'ruler';
		rulerButton.draw = function() {
			var color = draw.buttonColor;
			if (draw.rulerVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			if (draw.rulerVisible == true) {
				roundedRect(this.ctx,7.5,22.5,40,10,3,1,'#000');
			} else {
				roundedRect(this.ctx,7.5,22.5,40,10,3,1,'#000','#CCF');
				if (draw.ruler.markings == true) {
					this.ctx.lineWidth = 1;
					this.ctx.strokeStyle = '#000';
					this.ctx.beginPath();
					for (var i = 0; i < 11; i++) {
						this.ctx.moveTo(9.5+i*(36/10),22.5);
						this.ctx.lineTo(9.5+i*(36/10),26.5);				
					}
					this.ctx.stroke();
				}
			}			
		}
		rulerButton.click = function() {
			draw.rulerVisible = !draw.rulerVisible;
			moveToolToFront('ruler');			
		}		
		draw.buttons.push(rulerButton);
		draw.ruler = {
			left:object.ruler.left || 200,
			startLeft:object.ruler.left || 200,
			top:object.ruler.top || 300,
			startTop:object.ruler.top || 300,
			length:object.ruler.length || 800,
			width:object.ruler.length / 8 || 100,
			angle:0,
			color:object.ruler.color || '#CCF',
			transparent:boolean(object.ruler.transparent,true),
			markings:markings
		}
		recalcRulerValues();
	}
	if (typeof object.compass == 'object') {
		var buttonPos = object.compass.buttonPos || [1120,620];
		var compassButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		compassButton.type = 'compass';
		compassButton.draw = function() {
			var color = draw.buttonColor;
			if (draw.compassVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';

			var center1 = [13,45];
			var center2 = [26,15];
			var center3 = [40,45];
			var armLength = Math.sqrt(Math.pow(0.5*(center3[0]-center1[0]),2)+Math.pow(center2[1]-center1[1],2));

			var angle2 = -0.5 * Math.PI - Math.atan((center2[1]-center1[1])/(center2[0]-center1[0]));
			var angle3 = 0.5 * Math.PI - Math.atan((center3[1]-center2[1])/(center3[0]-center2[0]));
			
			// draw pointy arm
			this.ctx.translate(center2[0],center2[1]);
			this.ctx.rotate(-angle2);
			
			if (draw.compassVisible) {
				roundedRect(this.ctx,-2,0,4,armLength-5,1,1,'#000');
			} else {
				roundedRect(this.ctx,-2,0,4,armLength-5,1,1,'#000','#99F');		
			}
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 0.5;
			this.ctx.beginPath();
			this.ctx.moveTo(-1,armLength-5);
			this.ctx.lineTo(0,armLength);
			this.ctx.lineTo(1,armLength-5);
			this.ctx.lineTo(-1,armLength-5);
			this.ctx.stroke();
			if (draw.compassVisible) {
				this.ctx.fillStyle = '#333';
				this.ctx.fill();	
			}
				
			this.ctx.rotate(angle2);
			this.ctx.translate(-center2[0],-center2[1]);

			//draw pencil
			this.ctx.beginPath();
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 1;
			this.ctx.moveTo(40,45);
			this.ctx.lineTo(38,42);
			this.ctx.lineTo(38,25);
			this.ctx.lineTo(42,25);	
			this.ctx.lineTo(42,42);
			this.ctx.lineTo(40,45);
			if (!draw.compassVisible) {
				if (draw.color == '#000') {
					this.ctx.fillStyle = '#FC3';
				} else {
					this.ctx.fillStyle = draw.color;			
				}
				this.ctx.fill();	
			}
			this.ctx.stroke();
			this.ctx.beginPath();
			this.ctx.moveTo(40,45);
			this.ctx.lineTo(38,42);
			this.ctx.lineTo(42,42);
			this.ctx.lineTo(40,45);
			if (!draw.compassVisible) {
				this.ctx.fillStyle = '#FFC';
				this.ctx.fill();	
			}
			this.ctx.stroke();
			this.ctx.beginPath();
			if (draw.color == '#000') {
				this.ctx.fillStyle = '#FC3';
			} else {
				this.ctx.fillStyle = draw.color;			
			}
			this.ctx.moveTo(40,45);
			this.ctx.lineTo(39.5,44.3);
			this.ctx.lineTo(40.5,45.7);
			this.ctx.lineTo(40,45);
			this.ctx.fill();
			this.ctx.stroke();
				
			this.ctx.strokeRect(44,15+armLength*0.5,1,5);		
				
			// draw pencil arm
			this.ctx.translate(center2[0],center2[1]);
			this.ctx.rotate(-angle3);
			
			var pAngle = Math.PI/14;
			
			this.ctx.beginPath();
			this.ctx.moveTo(-2,0);
			this.ctx.lineTo(2,0);
			this.ctx.lineTo(2,armLength*0.7);
			this.ctx.lineTo(6,armLength*0.7);
			this.ctx.lineTo(6,armLength*0.7+4);
			this.ctx.lineTo(-2,armLength*0.7);
			this.ctx.lineTo(-2,0);
			this.ctx.stroke();
			if (!draw.compassVisible) {
				this.ctx.fillStyle = '#99F';
				this.ctx.fill();	
			}
			
			if (!draw.compassVisible) {
				this.ctx.fillRect(6.5,armLength*0.5-0.5,1,5);		
			}
				
			this.ctx.rotate(angle3);
			this.ctx.translate(-center2[0],-center2[1]);	
			
			// draw top of compass
			this.ctx.translate(center2[0],center2[1]);
			
			roundedRect(this.ctx,-2.5,-3,5,7,1,1,'#000','#000');
			roundedRect(this.ctx,-1,-6,2,3,0,1,'#000','#000');	
			this.ctx.fillStyle = '#CCC';
			this.ctx.beginPath();
			this.ctx.arc(0,0,1,0,2*Math.PI);
			this.ctx.fill();

			this.ctx.translate(-center2[0],-center2[1]);			
		}
		compassButton.click = function() {
			draw.compassVisible = !draw.compassVisible;
			moveToolToFront('compass');	
		}		
		draw.buttons.push(compassButton);
		draw.compassButton = compassButton;
		//console.log(compassButton);
		var center1 = object.compass.center1 || [500,450];
		var radius = object.compass.radius || 150;
		var armLength = object.compass.armLength || 250;
		var angle = object.compass.angle || 0;
		var h = Math.sqrt(Math.pow(armLength,2)-Math.pow(0.5*radius,2));
		var center2 = [center1[0]+0.5*radius*Math.cos(angle)+h*Math.sin(angle),center1[1]+0.5*radius*Math.sin(angle)-h*Math.cos(angle)];
		var center3 = [center1[0]+radius*Math.cos(angle),center1[1]+radius*Math.sin(angle)];

		var angle2 = (angle%(2*Math.PI));
		if (angle2 < 0) angle2 += 2*Math.PI;
		if (angle2 > 0.5 * Math.PI && angle2 < 1.5 * Math.PI) {
			var drawOn = 'left';	
		} else {
			var drawOn = 'right';
		}	
		
		var mp1 = midpoint(center1[0],center1[1],center3[0],center3[1]);
		var mp2 = midpoint(center2[0],center2[1],mp1[0],mp1[1]);

		draw.compass = {
			center1:center1.slice(0),
			startCenter1:center1.slice(0),
			center2:center2.slice(0),
			startCenter2:center2.slice(0),
			center3:center3.slice(0),
			startCenter3:center3.slice(0),
			radius:radius,
			startRadius:radius,
			h:h,
			startH:h,
			armLength:armLength,
			radiusLocked:false,
			angle:angle,
			startAngle:angle,
			drawOn:drawOn,
			startDrawOn:drawOn,
			lockCenter:mp2.slice(0),
			mode:'none',
		}
		recalcCompassValues();
	}
	if (typeof object.undo == 'object') {
		var buttonPos = object.undo.buttonPos || [1120,620];
		var undoButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		undoButton.type = 'undo';
		undoButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);

			this.ctx.strokeStyle = '#000';
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.lineWidth = 4;
			this.ctx.beginPath();
			this.ctx.arc(27.5,27.5,12,-Math.PI,0.7*Math.PI);
			this.ctx.moveTo(13.5,27.5);
			this.ctx.lineTo(13.5-10*Math.sin(1*Math.PI),27.5+10*Math.cos(1*Math.PI));
			this.ctx.lineTo(13.5-10*Math.cos(0.95*Math.PI),27.5-10*Math.sin(0.95*Math.PI));
			this.ctx.lineTo(13.5,27.5);		
			this.ctx.stroke();			
		}
		undoButton.click = function() {
			draw.path.pop();
			drawCanvasPaths();				
		}		
		draw.buttons.push(undoButton);
	}
	if (typeof object.undoPen == 'object') {
		var buttonPos = object.undoPen.buttonPos || [1120,620];
		var undoButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		undoButton.type = 'undoPen';
		undoButton.draw = function() {
			var s = draw.buttonSize;
			roundedRect(this.ctx,3,3,s-6,s-6,8,6,'#000',draw.buttonColor);
			
			this.ctx.strokeStyle = '#000';
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			this.ctx.lineWidth = 4;
			this.ctx.beginPath();
			this.ctx.arc(s/2,s/2,12*s/55,-Math.PI,0.7*Math.PI);
			this.ctx.moveTo(13.5*s/55,27.5*s/55);
			this.ctx.lineTo(13.5*s/55-10*s/55*Math.sin(1*Math.PI),27.5*s/55+10*s/55*Math.cos(1*Math.PI));
			this.ctx.lineTo(13.5*s/55-10*s/55*Math.cos(0.95*Math.PI),27.5*s/55-10*s/55*Math.sin(0.95*Math.PI));
			this.ctx.lineTo(13.5*s/55,27.5*s/55);		
			this.ctx.stroke();			
		}
		undoButton.click = function() {
			for (var i = draw.path.length - 1; i >= 0; i--) {
				if (typeof draw.path[i].obj == 'object') {
					for (var j = draw.path[i].obj.length - 1; j >= 0; j--) {
						if (draw.path[i].obj[j].type = 'pen') {
							draw.path[i].obj.splice(j,1);
							if (draw.path[i].obj.length == 0) draw.path.splice(i,1);
							drawCanvasPaths();
							return;
						}
					}					
				}
			}
		}		
		draw.buttons.push(undoButton);
	}
	if (typeof object.clear == 'object') {
		var buttonPos = object.clear.buttonPos || [1120,620];
		var clearButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		clearButton.type = 'clear';
		clearButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);

			this.ctx.strokeStyle = '#000';
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.lineWidth = 4;
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:20>><<align:center>>CLR']});			
		}
		clearButton.click = function() {
			clearDrawPaths();
			resetDrawTools();			
		}			
		draw.buttons.push(clearButton);
	}
	if (typeof object.clearPen == 'object') {
		var buttonPos = object.clearPen.buttonPos || [1120,620];
		var clearButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		clearButton.type = 'clearPen';
		clearButton.draw = function() {
			var s = draw.buttonSize;
			roundedRect(this.ctx,3,3,s-6,s-6,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:s,top:15*s/55,textArray:['<<font:Arial>><<fontSize:'+20*s/55+'>><<align:center>>CLR']});			
		}
		clearButton.click = function() {
			for (var i = draw.path.length - 1; i >= 0; i--) {
				if (draw.path[i].obj.length == 1 && draw.path[i].obj[0].type == 'pen') {
					removePathObject(i);
				}
			}
			drawCanvasPaths();			
		}			
		draw.buttons.push(clearButton);
	}	
	if (typeof object.compassHelp == 'object') {
		var compassHelpImage = new Image();
		compassHelpImage.src = '/i/images/compassInstructions.PNG';
		var buttonPos = object.compassHelp.buttonPos || [1120,620];
		var compassHelpButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		compassHelpButton.type = 'compassHelp';
		compassHelpButton.draw = function() {
			var color = draw.buttonColor;
			if (draw.compassHelpVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.strokeStyle = '#000';
			this.ctx.fillStyle = '#666';
			this.ctx.font = '42px Arial';
			this.ctx.textAlign = 'center';
			this.ctx.textBaseline = 'middle';
			this.ctx.fillText('?',27.5,27.5);
			this.ctx.strokeText('?',27.5,27.5);			
		}
		compassHelpButton.click = function() {
			draw.compassHelpVisible = !draw.compassHelpVisible;
			if (draw.compassHelpVisible) {
				showObj(draw.compassHelpBox,draw.compassHelpBox.data);			
			} else {
				hideObj(draw.compassHelpBox,draw.compassHelpBox.data);			
			}			
		}			
		compassHelpButton.isStaticMenuCanvas = true;		
		draw.buttons.push(compassHelpButton);
		var helpBoxPos = object.compassHelp.helpBoxPos || [600,110];
		var compassHelpBox = createCanvas(helpBoxPos[0],helpBoxPos[1],500,420,false,false,true,draw.drawButtonZIndex);		
		compassHelpBox.isStaticMenuCanvas = true;
		roundedRect(compassHelpBox.getContext('2d'),5,5,490,410,15,4,'#000','#FFC');
		compassHelpImage.onload = function() {
			compassHelpBox.getContext('2d').drawImage(compassHelpImage,15,15,compassHelpImage.naturalWidth*0.93,compassHelpImage.naturalHeight*0.93);
		}
		addListener(compassHelpBox,function() {
			draw.compassHelpVisible = false;
			hideObj(draw.compassHelpBox,draw.compassHelpBox.data);
			redrawButtons();			
		});
		draw.compassHelpBox = compassHelpBox;
	}
	if (typeof object.pen == 'object') {
		var buttonPos = object.pen.buttonPos || [1120,620];
		var penButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		penButton.type = 'pen';
		penButton.draw = function() {
			if (draw.drawMode !== 'pen') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = draw.cursors.pen;
			}
			
			var s = draw.buttonSize;
			roundedRect(this.ctx,3,3,s-6,s-6,8,6,'#000',draw.buttonColor);

			this.ctx.fillStyle = draw.color;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';	

			this.ctx.translate(s/2,s/2);
			this.ctx.rotate(Math.PI/4);
				this.ctx.fillRect(-5,-11,10,20);
				this.ctx.fillRect(-5,-18,10,5);
				this.ctx.beginPath();
				this.ctx.moveTo(-5,11);
				this.ctx.lineTo(0,18);
				this.ctx.lineTo(5,11);
				this.ctx.lineTo(-5,11);
				this.ctx.fill();		
			this.ctx.rotate(-Math.PI/4);
			this.ctx.translate(-s/2,-s/2);				
		}
		penButton.click = function() {
			changeDrawMode('pen');			
		}		
		draw.buttons.push(penButton);
	}
	if (typeof object.line == 'object') {
		var buttonPos = object.line.buttonPos || [1120,620];
		var lineButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		lineButton.type = 'line';
		lineButton.draw = function() {
			if (draw.drawMode !== 'line') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.lineWidth = draw.thickness + 1;
			this.ctx.beginPath();
			this.ctx.arc(12,20,2,0,2*Math.PI);
			this.ctx.stroke();	
			this.ctx.lineWidth = draw.thickness;;
			this.ctx.beginPath();
			this.ctx.moveTo(12,20);
			this.ctx.lineTo(43,35);
			this.ctx.stroke();	
			this.ctx.lineWidth = draw.thickness + 1;
			this.ctx.beginPath();	
			this.ctx.arc(43,35,2,0,2*Math.PI);
			this.ctx.stroke();			
		}
		lineButton.click = function() {
			changeDrawMode('line');			
		}		
		draw.buttons.push(lineButton);
	}
	if (typeof object.curve == 'object') {
		var buttonPos = object.curve.buttonPos || [1120,620];
		var curveButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		curveButton.type = 'curve';
		curveButton.draw = function() {
			var color = draw.buttonColor;
			this.style.cursor = draw.cursors.pointer;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.lineWidth = draw.thickness + 1;
			this.ctx.beginPath();
			this.ctx.moveTo(10,20);
			this.ctx.quadraticCurveTo(27.5,55,45,20);
			this.ctx.stroke();				
		}
		curveButton.click = function() {
			draw.curve.add();
		}		
		draw.buttons.push(curveButton);
	}
	if (typeof object.curve2 == 'object') {
		var buttonPos = object.curve2.buttonPos || [1120,620];
		var curveButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		curveButton.type = 'curve2';
		curveButton.draw = function() {
			var color = draw.buttonColor;
			this.style.cursor = draw.cursors.pointer;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.lineWidth = draw.thickness + 1;
			this.ctx.beginPath();
			this.ctx.moveTo(8,20);
			this.ctx.bezierCurveTo(21,55,43,55,47,20);
			this.ctx.stroke();				
		}
		curveButton.click = function() {
			draw.curve2.add();
		}		
		draw.buttons.push(curveButton);
	}	
	if (typeof object.angle == 'object') {
		var buttonPos = object.angle.buttonPos || [1120,620];
		var angleButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		angleButton.type = 'angle';
		angleButton.draw = function() {
			var color = draw.buttonColor;
			this.style.cursor = draw.cursors.pointer;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			drawAngle({ctx:this.ctx,a:[30,11.2],b:[10,40],c:[45,40],fill:false,radius:35,drawLines:true,lineWidth:2});	
		}
		angleButton.click = function() {
			draw.angle.add();
		}		
		draw.buttons.push(angleButton);
	}
	if (typeof object.angle2 == 'object') {
		var buttonPos = object.angle2.buttonPos || [1120,620];
		var angleButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		angleButton.type = 'angle';
		angleButton.draw = function() {
			var color = draw.buttonColor;
			this.style.cursor = draw.cursors.pointer;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			drawAngle({ctx:this.ctx,a:[30,15],b:[10,40],c:[45,40],fill:true,radius:20,drawLines:true,lineWidth:2});	
		}
		angleButton.click = function() {
			draw.angle.add2();
		}		
		draw.buttons.push(angleButton);
	}
	if (typeof object.anglesAroundPoint == 'object') {
		var buttonPos = object.anglesAroundPoint.buttonPos || [1120,620];
		var anglesAroundPointButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		anglesAroundPointButton.type = 'anglesAroundPoint';
		anglesAroundPointButton.draw = function() {
			var color = draw.buttonColor;
			this.style.cursor = draw.cursors.pointer;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			drawAnglesAroundPoint({
				ctx:this.ctx,
				center:[27.5,35],
				points:[[10,35],[33,18],[45,35]],
				lineColor:'#000',
				thickness:2,
				angles:[
					{fill:true,fillColor:"#CFC",lineWidth:2,labelFontSize:25,labelMeasure:false,labelRadius:33,radius:10},
					{fill:true,fillColor:"#FCC",lineWidth:2,labelFontSize:25,labelMeasure:false,labelRadius:33,radius:10}
				]
			})
		};	
		anglesAroundPointButton.click = function() {
			draw.anglesAroundPoint.add();
		}		
		draw.buttons.push(anglesAroundPointButton);
	}	
	if (typeof object.lineEnds == 'object') {
		var buttonPos = object.lineEnds.buttonPos || [1120,620];
		var lineEndsButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		lineEndsButton.type = 'lineEnds';
		lineEndsButton.draw = function() {
			if (draw.drawMode !== 'lineEnds') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';	
			drawArrow({context:this.ctx,startX:10,startY:27.5,finX:45,finY:27.5,arrowLength:12,color:'#000',lineWidth:2,arrowLineWidth:3});			
		}
		lineEndsButton.click = function() {
			draw.lineEndsVisible = !draw.lineEndsVisible;
			if (draw.lineEndsVisible == true) {
				for (var i = 0; i < draw.lineEndStartButtons.length; i++) {
					showObj(draw.lineEndStartButtons[i],draw.lineEndStartButtons[i].data)
				}
				for (var i = 0; i < draw.lineEndMidButtons.length; i++) {
					showObj(draw.lineEndMidButtons[i],draw.lineEndMidButtons[i].data)
				}
				for (var i = 0; i < draw.lineEndFinButtons.length; i++) {
					showObj(draw.lineEndFinButtons[i],draw.lineEndFinButtons[i].data)
				}
				for (var i = 0; i < draw.lineEndSizeButtons.length; i++) {
					showObj(draw.lineEndSizeButtons[i],draw.lineEndSizeButtons[i].data)
				}				
				for (var i = 0; i < container.childNodes.length; i++) {
					if (draw.lineEndStartButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndMidButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndFinButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndSizeButtons.indexOf(container.childNodes[i]) == -1) {
						addListenerStart(container.childNodes[i],lineEndsClose);
					}
				}				
			} else {
				for (var i = 0; i < draw.lineEndStartButtons.length; i++) {
					hideObj(draw.lineEndStartButtons[i],draw.lineEndStartButtons[i].data)
				}
				for (var i = 0; i < draw.lineEndMidButtons.length; i++) {
					hideObj(draw.lineEndMidButtons[i],draw.lineEndMidButtons[i].data)
				}
				for (var i = 0; i < draw.lineEndFinButtons.length; i++) {
					hideObj(draw.lineEndFinButtons[i],draw.lineEndFinButtons[i].data)
				}
				for (var i = 0; i < draw.lineEndSizeButtons.length; i++) {
					hideObj(draw.lineEndSizeButtons[i],draw.lineEndSizeButtons[i].data)
				}				
				for (var i = 0; i < container.childNodes.length; i++) {
					if (draw.lineEndStartButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndMidButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndFinButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndSizeButtons.indexOf(container.childNodes[i]) == -1) {
						removeListenerStart(container.childNodes[i],lineEndsClose);
					}
				}								
			}			
		}			
		draw.buttons.push(lineEndsButton);
		var left = buttonPos[0];
		var top = buttonPos[1]+53;		
		var lineEndsBackButton = createCanvas(left,top,120,220,false,false,false,draw.drawButtonZIndex);
		lineEndsBackButton.isStaticMenuCanvas = true;		
		roundedRect(lineEndsBackButton.getContext('2d'),3,3,114,214,8,6,'#000',draw.buttonColor);
		draw.lineEndsBackButton = lineEndsBackButton;
		
		var lineEndStarts = ['none','open','closed'];
		var lineEndMids = ['none','dash','dash2','open','open2'];
		var lineEndFins = ['none','open','closed'];
		
		for (var i = 0; i < lineEndStarts.length; i++) {
			var left2 = left;
			var top2 = top + 48 * i;	
			var lineEndsButton = createCanvas(left2,top2,50,50,false,false,true,draw.drawButtonZIndex);
			lineEndsButton.isStaticMenuCanvas = true;		
			lineEndsButton.styling = lineEndStarts[i];
			lineEndsButton.draw = function() {
				var ctx = this.ctx;
				roundedRect(ctx,2,2,46,46,4,2,'#000','#CFF');
				ctx.lineWidth = 2;
				ctx.strokeStyle = '#000';
				ctx.lineCap = 'round';
				ctx.lineJoin = 'round';
				ctx.beginPath();
				ctx.moveTo(20,25);
				ctx.lineTo(50,25);
				ctx.stroke();
				switch (this.styling) {
					case 'open':
						drawArrow({context:ctx,startX:50,startY:25,finX:20,finY:25,arrowLength:draw.lineEndsSize,color:'#000',lineWidth:2,arrowLineWidth:3});
						break;
					case 'closed':
						drawArrow({context:ctx,startX:50,startY:25,finX:20,finY:25,arrowLength:draw.lineEndsSize,color:'#000',lineWidth:2,arrowLineWidth:3,fillArrow:true});
						break;					
				}
			}
			lineEndsButton.draw();

			addListener(lineEndsButton,function() {
				for (var i = 0; i < draw.path.length; i++) {
					if (draw.path[i].selected == true) {
						for (var j = 0; j < draw.path[i].obj.length; j++) {
							if (['line','curve'].indexOf(draw.path[i].obj[j].type) > -1) {
								draw.path[i].obj[j].endStart = this.styling;
								draw.path[i].obj[j].endStartSize = draw.lineEndsSize;								
							}
						}
					}
				}
				drawCanvasPaths();			
			})
			draw.lineEndStartButtons.push(lineEndsButton);
		}
		
		for (var i = 0; i < lineEndMids.length; i++) {
			var left2 = left + 48;
			var top2 = top + 48 * i;	
			var lineEndsButton = createCanvas(left2,top2,50,50,false,false,true,draw.drawButtonZIndex);
			lineEndsButton.isStaticMenuCanvas = true;	
			lineEndsButton.styling = lineEndMids[i];
			lineEndsButton.draw = function() {
				var ctx = this.ctx;			
				roundedRect(ctx,2,2,46,46,4,2,'#000','#CFF');
				ctx.lineWidth = 2;
				ctx.strokeStyle = '#000';
				ctx.lineCap = 'round';
				ctx.lineJoin = 'round';
				ctx.beginPath();
				ctx.moveTo(10,25);
				ctx.lineTo(40,25);
				ctx.stroke();
				switch (this.styling) {
					case 'dash':
						drawDash(ctx,10,25,40,25,8);
						break;
					case 'dash2':
						drawDoubleDash(ctx,10,25,40,25,8);
						break;
					case 'open':
						drawParallelArrow({context:ctx,startX:10,startY:25,finX:40,finY:25,arrowLength:draw.lineEndsSize,lineWidth:3});
						break;
					case 'open2':
						drawParallelArrow({context:ctx,startX:10,startY:25,finX:40,finY:25,arrowLength:draw.lineEndsSize,lineWidth:3,numOfArrows:2});
						break;
				}
			}
			lineEndsButton.draw();

			addListener(lineEndsButton,function() {
				for (var i = 0; i < draw.path.length; i++) {
					if (draw.path[i].selected == true) {
						for (var j = 0; j < draw.path[i].obj.length; j++) {
							if (['line','curve'].indexOf(draw.path[i].obj[j].type) > -1) {
								draw.path[i].obj[j].endMid = this.styling;
								draw.path[i].obj[j].endMidSize = draw.lineEndsSize;
							}
						}
					}
				}
				drawCanvasPaths();			
			})
			draw.lineEndMidButtons.push(lineEndsButton);
		}		
		
		for (var i = 0; i < lineEndFins.length; i++) {
			var left2 = left + 2 * 48;
			var top2 = top + 48 * i;
			var lineEndsButton = createCanvas(left2,top2,50,50,false,false,true,draw.drawButtonZIndex);
			lineEndsButton.isStaticMenuCanvas = true;	
			lineEndsButton.styling = lineEndFins[i];
			lineEndsButton.draw = function() {
				var ctx = this.ctx;						
				roundedRect(ctx,2,2,46,46,4,2,'#000','#CFF');
				ctx.lineWidth = 2;
				ctx.strokeStyle = '#000';
				ctx.lineCap = 'round';
				ctx.lineJoin = 'round';
				ctx.beginPath();
				ctx.moveTo(0,25);
				ctx.lineTo(30,25);
				ctx.stroke();
				switch (this.styling) {
					case 'open':
						drawArrow({context:ctx,startX:0,startY:25,finX:30,finY:25,arrowLength:draw.lineEndsSize,color:'#000',lineWidth:2,arrowLineWidth:3});
						break;
					case 'closed':
						drawArrow({context:ctx,startX:0,startY:25,finX:30,finY:25,arrowLength:draw.lineEndsSize,color:'#000',lineWidth:2,arrowLineWidth:3,fillArrow:true});
						break;					
				}
			}
			lineEndsButton.draw();
				
			addListener(lineEndsButton,function() {
				for (var i = 0; i < draw.path.length; i++) {
					if (draw.path[i].selected == true) {
						for (var j = 0; j < draw.path[i].obj.length; j++) {
							if (['line','curve'].indexOf(draw.path[i].obj[j].type) > -1) {
								draw.path[i].obj[j].endFin = this.styling;
								draw.path[i].obj[j].endFinSize = draw.lineEndsSize;
							}
						}
					}
				}
				drawCanvasPaths();
			})			
			draw.lineEndFinButtons.push(lineEndsButton);
		}
		
		for (var i = 0; i < 2; i++) {
			var left2 = left + 25 + 48*i;
			var top2 = top + 48*5;
			var lineEndsButton = createCanvas(left2,top2,50,50,false,false,true,draw.drawButtonZIndex);
			lineEndsButton.isStaticMenuCanvas = true;	
			if (i == 0) {
				lineEndsButton.inc = -1;
			} else {
				lineEndsButton.inc = 1;				
			}
			lineEndsButton.draw = function() {
				var ctx = this.ctx;						
				roundedRect(ctx,2,2,46,46,4,2,'#000','#CFF');
				if (this.inc == -1) {
					text({context:ctx,textArray:['<<fontSize:28>>-'],left:0,top:0,width:50,height:50,vertAlign:'middle',textAlign:'center'});
				} else {
					text({context:ctx,textArray:['<<fontSize:28>>+'],left:0,top:0,width:50,height:50,vertAlign:'middle',textAlign:'center'});			
				}
			}
			lineEndsButton.draw();
				
			addListener(lineEndsButton,function() {
				if (this.inc == -1) {
					draw.lineEndsSize--;
				} else {
					draw.lineEndsSize++;
				}
				for (var i = 0; i < draw.path.length; i++) {
					if (draw.path[i].selected == true) {
						for (var j = 0; j < draw.path[i].obj.length; j++) {
							if (['line','curve'].indexOf(draw.path[i].obj[j].type) > -1) {
								draw.path[i].obj[j].endStartSize = draw.lineEndsSize;
								draw.path[i].obj[j].endMidSize = draw.lineEndsSize;
								draw.path[i].obj[j].endFinSize = draw.lineEndsSize;
							}
						}
					}
				}
				for (var i = 0; i < draw.lineEndStartButtons.length; i++) {
					draw.lineEndStartButtons[i].draw();
				}				
				for (var i = 0; i < draw.lineEndMidButtons.length; i++) {
					draw.lineEndMidButtons[i].draw();
				}
				for (var i = 0; i < draw.lineEndFinButtons.length; i++) {
					draw.lineEndFinButtons[i].draw();
				}				
				drawCanvasPaths();
				
			})			
			draw.lineEndSizeButtons.push(lineEndsButton);
		}		
	}
	if (typeof object.table == 'object') {
		var buttonPos = object.table.buttonPos || [1120,620];
		var tableButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		tableButton.type = 'table';
		var dir = object.table.dir || 'below';
		tableButton.menuDir = dir;
		tableButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			this.ctx.strokeStyle = '#666';
			this.ctx.lineWidth = 1;
			this.ctx.fillStyle = '#FFF';
			this.ctx.fillRect(10,11,35,33);
			this.ctx.fillStyle = '#CCC';
			this.ctx.fillRect(10,11,35,33/4);
			for (var i = 0; i < 5; i++) {
				this.ctx.moveTo(10,11+i*33/4);
				this.ctx.lineTo(45,11+i*33/4);
			}
			for (var i = 0; i < 4; i++) {
				this.ctx.moveTo(10+i*35/3,11);
				this.ctx.lineTo(10+i*35/3,44);
			}
			this.ctx.stroke();
			this.ctx.lineWidth = 1;
			this.ctx.strokeStyle = '#000';
			this.ctx.strokeRect(10,11,35,33);			
		}
		tableButton.click = function() {
			draw.tableSizeVisible = !draw.tableSizeVisible;
			if (draw.tableSizeVisible == true) {
				changeDrawMode('table');
				showObj(draw.tableSizeCanvas,draw.tableSizeCanvas.data);
			} else {
				changeDrawMode();
				hideObj(draw.tableSizeCanvas,draw.tableSizeCanvas.data);
			}
			draw.tableSize.rows = 0;
			if (draw.tableSizeCanvasDir == 'above') draw.tableSize.rows = 9;
			draw.tableSize.cols = 0;
			draw.tableSizeCanvas.draw();			
		}		
		draw.buttons.push(tableButton);

		var rows = object.table.rows || 10;
		var cols = object.table.cols || 10;

		if (dir == 'below') {
			var left = buttonPos[0];
			var top = buttonPos[1]+53;
		} else if (dir == 'above') {
			var left = buttonPos[0];
			var top = buttonPos[1]-(rows*25+40);
		}
		var tableSizeCanvas = createCanvas(left,top,cols*25+20,rows*25+40,false,false,true,draw.drawButtonZIndex);
		tableSizeCanvas.isStaticMenuCanvas = true;
		draw.tableSizeCanvas = tableSizeCanvas;
		draw.tableSizeCanvas.rows = rows;
		draw.tableSizeCanvas.cols = cols;
		draw.tableSizeCanvasDir = dir;
		draw.tableSize = {rows:9,cols:-1,maxRows:rows-1,maxCols:cols-1};
		
		tableSizeCanvas.draw = function() {
			var ctx = this.ctx;
			roundedRect(ctx,3,3,this.data[102]-6,this.data[103]-6,8,6,'#000',draw.buttonColor);
			for (var i = 0; i < this.rows; i++) {
				for (var j = 0; j < this.cols; j++) {
					if (draw.tableSizeCanvasDir == 'below') {
						if (draw.tableSize.rows >= i && draw.tableSize.cols >= j) {
							roundedRect(ctx,10+25*j,30+25*i,25,25,0,0.01,'#F6F','#F6F');
						} else {
							roundedRect(ctx,10+25*j,30+25*i,25,25,0,0.01,'#FFC','#FFC');
						}
					} else if (draw.tableSizeCanvasDir == 'above') {
						if (draw.tableSize.rows <= i && draw.tableSize.cols >= j) {
							roundedRect(ctx,10+25*j,30+25*i,25,25,0,0.01,'#F6F','#F6F');
						} else {
							roundedRect(ctx,10+25*j,30+25*i,25,25,0,0.01,'#FFC','#FFC');
						}						
					}
				}
			}
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 3;
			ctx.beginPath();
			for (var i = 0; i < rows + 2; i++) {
				ctx.moveTo(10,30+25*i);
				ctx.lineTo(10+cols*25,30+25*i);
			}
			for (var i = 0; i < cols + 2; i++) {
				ctx.moveTo(10+25*i,30);
				ctx.lineTo(10+25*i,30+rows*25);
			}
			ctx.stroke();
			if (draw.tableSizeCanvasDir == 'below') {
				text({context:ctx,textArray:['<<fontSize:14>>'+(draw.tableSize.rows+1)+' x '+(draw.tableSize.cols+1)],left:12,top:5,width:200});
			} else if (draw.tableSizeCanvasDir == 'above') {
				text({context:ctx,textArray:['<<fontSize:14>>'+(10-draw.tableSize.rows)+' x '+(draw.tableSize.cols+1)],left:12,top:5,width:200});
			}
		}
		tableSizeCanvas.draw();
		
		addListenerMove(tableSizeCanvas,function(e) {
			updateMouse(e);
			var col = Math.min(draw.tableSize.maxCols,Math.max(0,Math.floor((mouse.x - e.target.data[100] - 10) / 25))); 
			var row = Math.min(draw.tableSize.maxRows,Math.max(0,Math.floor((mouse.y - e.target.data[101] - 30) / 25)));		
			if (row !== draw.tableSize.rows || col !== draw.tableSize.cols) {
				draw.tableSize.rows = row;
				draw.tableSize.cols = col;
				e.target.draw();
			}
		});
		
		addListener(tableSizeCanvas,function(e) {
			var rows = draw.tableSize.rows+1;
			if (draw.tableSizeCanvasDir == 'above') rows = 10 - draw.tableSize.rows;
			draw.table2.add(rows,draw.tableSize.cols+1);
		});
	}
	if (typeof object.distHoriz == 'object') {
		var buttonPos = object.distHoriz.buttonPos || [1120,620];
		var distHorizButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		distHorizButton.type = 'distHoriz';
		distHorizButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			drawArrow({ctx:this.ctx,startX:10,startY:27.5,finX:27.5,finY:27.5,doubleEnded:true,arrowLength:5,fillArrow:true,color:'#393',lineWidth:1});
			drawArrow({ctx:this.ctx,startX:27.5,startY:27.5,finX:45,finY:27.5,doubleEnded:true,arrowLength:5,fillArrow:true,color:'#393',lineWidth:1});
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 2;
			this.ctx.beginPath();
			this.ctx.moveTo(10,15);
			this.ctx.lineTo(10,40);
			this.ctx.moveTo(27.5,15);
			this.ctx.lineTo(27.5,40);
			this.ctx.moveTo(45,15);
			this.ctx.lineTo(45,40);
			this.ctx.stroke();			
		}
		distHorizButton.click = function() {
			distributeHoriz();
		}			
		draw.buttons.push(distHorizButton);
	}
	if (typeof object.distVert == 'object') {
		var buttonPos = object.distVert.buttonPos || [1120,620];
		var distVertButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		distVertButton.type = 'distVert';
		distVertButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			drawArrow({ctx:this.ctx,startY:10,startX:27.5,finY:27.5,finX:27.5,doubleEnded:true,arrowLength:5,fillArrow:true,color:'#393',lineWidth:1});
			drawArrow({ctx:this.ctx,startY:27.5,startX:27.5,finY:45,finX:27.5,doubleEnded:true,arrowLength:5,fillArrow:true,color:'#393',lineWidth:1});
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 2;
			this.ctx.beginPath();
			this.ctx.moveTo(15,10);
			this.ctx.lineTo(40,10);
			this.ctx.moveTo(15,27.5);
			this.ctx.lineTo(40,27.5);
			this.ctx.moveTo(15,45);
			this.ctx.lineTo(40,45);
			this.ctx.stroke();			
		}
		distVertButton.click = function() {
			distributeVert();
		}				
		draw.buttons.push(distVertButton);
	}
	if (typeof object.tableRowColChange == 'object') {
		var buttonPos = object.tableRowColChange.buttonPos || [1120,620];
		var tableButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		tableButton.type = 'tableRowColChange';
		tableButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			this.ctx.strokeStyle = '#666';
			this.ctx.lineWidth = 1;
			this.ctx.fillStyle = '#FFF';
			this.ctx.fillRect(10,11,35,33);
			this.ctx.fillStyle = '#333';
			this.ctx.fillRect(10,11+2*33/4,35,33/4);
			for (var i = 0; i < 5; i++) {
				this.ctx.moveTo(10,11+i*33/4);
				this.ctx.lineTo(45,11+i*33/4);
			}
			for (var i = 0; i < 4; i++) {
				this.ctx.moveTo(10+i*35/3,11);
				this.ctx.lineTo(10+i*35/3,44);
			}
			this.ctx.stroke();
			this.ctx.lineWidth = 1;
			this.ctx.strokeStyle = '#000';
			this.ctx.strokeRect(10,11,35,33);				
		}
		tableButton.click = function() {
			draw.tableChangeVisible = !draw.tableChangeVisible;
			if (draw.tableChangeVisible == true) {
				tableMenuClose();
				changeDrawMode('tableChange');
				draw.tableRowColCanvas.style.zIndex = Number(this.style.zIndex)+1;
				showObj(draw.tableRowColCanvas,draw.tableRowColCanvas.data);
			} else {
				changeDrawMode();
				hideObj(draw.tableRowColCanvas,draw.tableRowColCanvas.data);
			}
			draw.tableRowColCanvas.selected = -1;
			draw.tableRowColCanvas.draw();			
		}		
		draw.buttons.push(tableButton);

		var left = buttonPos[0];
		var top = buttonPos[1]+53;		
		var tableRowColCanvas = createCanvas(left,top,200,260,false,false,true,zIndex+100);
		tableRowColCanvas.isStaticMenuCanvas = true;	
		tableRowColCanvas.selected = -1;
		draw.tableRowColCanvas = tableRowColCanvas;
		draw.tableChangeVisible = false;
		
		tableRowColCanvas.draw = function() {
			var ctx = this.ctx;
			roundedRect(ctx,3,3,this.data[102]-6,this.data[103]-6,8,6,'#000',draw.buttonColor);
			
			for (var i = 0; i < 6; i++) {
				if (draw.tableRowColCanvas.selected == i) {
					roundedRect(ctx,10,10+40*i,180,40,0,0.01,'#F6F','#F6F');
				} else {
					roundedRect(ctx,10,10+40*i,180,40,0,0.01,'#FFC','#FFC');						
				}
			}
			
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 2;
			ctx.beginPath();
			for (var i = 0; i < 7; i++) {
				ctx.moveTo(10,10+40*i);
				ctx.lineTo(190,10+40*i);
			}
			ctx.moveTo(10,10);
			ctx.lineTo(10,250);
			ctx.moveTo(190,10);
			ctx.lineTo(190,250);
			ctx.stroke();
			text({context:ctx,textArray:['<<fontSize:20>>Add rows above'],left:10,top:10,width:180,height:40,vertAlign:'middle',textAlign:'center'});
			text({context:ctx,textArray:['<<fontSize:20>>Add rows below'],left:10,top:50,width:180,height:40,vertAlign:'middle',textAlign:'center'});
			text({context:ctx,textArray:['<<fontSize:20>>Delete rows'],left:10,top:90,width:180,height:40,vertAlign:'middle',textAlign:'center'});
			text({context:ctx,textArray:['<<fontSize:20>>Add columns left'],left:10,top:130,width:180,height:40,vertAlign:'middle',textAlign:'center'});
			text({context:ctx,textArray:['<<fontSize:20>>Add columns right'],left:10,top:170,width:180,height:40,vertAlign:'middle',textAlign:'center'});
			text({context:ctx,textArray:['<<fontSize:20>>Delete columns'],left:10,top:210,width:180,height:40,vertAlign:'middle',textAlign:'center'});
		}
		tableRowColCanvas.draw();
	
		addListenerMove(tableRowColCanvas,function(e) {
			updateMouse(e);
			var sel = Math.floor((mouse.y - e.target.data[101] - 10) / 40);		
			if (mouse.x - e.target.data[100] < 10 || mouse.x - e.target.data[100] > 190) sel = -1;
			if (sel < 0 || sel > 5) sel = -1;
			if (sel !== draw.tableRowColCanvas.selected) {
				draw.tableRowColCanvas.selected = sel;
				e.target.draw();
			}
		});
		
		addListener(tableRowColCanvas,function(e) {
			if (draw.tableRowColCanvas.selected < 0 || draw.tableRowColCanvas.selected > 5) return;
			for (var i = 0; i < draw.path.length; i++) {
				if (draw.path[i].selected == true) {
					for (var j = 0; j < draw.path[i].obj.length; j++) {
						var type = draw.path[i].obj[j].type;
						if (type == 'table' || type == 'table2') {
							var obj = draw.path[i].obj[j];
							var cells = obj.cells;
							var selRows = [];
							var selCols = [];
							var rowHeights = [];
							var colWidths = [];
							for (var r = 0; r < cells.length; r++) {
								for (var c = 0; c < cells[r].length; c++) {
									if (cells[r][c].selected == true) {
										if (selRows.indexOf(r) == -1) {
											selRows.push(r);
											if (type == 'table') {
												rowHeights.push(cells[r][c].height);
											} else if (type == 'table2') {
												rowHeights.push(obj.heights[r]);
											}
										}
										if (selCols.indexOf(c) == -1) {
											selCols.push(c);
											if (type == 'table') {
												colWidths.push(cells[r][c].width);
											} else if (type == 'table2') {
												colWidths.push(obj.widths[c]);
											}
										}
									}
								}
							}
							if (selRows.length == 0 || selCols.length == 0) continue;
							switch (draw.tableRowColCanvas.selected) {
								case 0: // add rows above
								case 1: // add rows below
									var newRows = [];
									var newHeights = [];
									for (var r = 0; r < selRows.length; r++) {
										var row = clone(cells[selRows[r]]);
										for (var c = 0; c < row.length; c++) {
											var tags = textArrayGetStartTags(row[c].text);
											row[c].text = [tags];
										}
										newRows.push(row);
										newHeights.push(obj.heights[selRows[r]]);
									}
									if (draw.tableRowColCanvas.selected == 0) {
										var newCel = obj.cells.slice(0,selRows[0]).concat(newRows).concat(obj.cells.slice(selRows[0]));
										var newHei = obj.heights.slice(0,selRows[0]).concat(newHeights).concat(obj.heights.slice(selRows[0]));
									} else {
										var newCel = obj.cells.slice(0,selRows[selRows.length-1]+1).concat(newRows).concat(obj.cells.slice(selRows[selRows.length-1]+1));
										var newHei = obj.heights.slice(0,selRows[selRows.length-1]+1).concat(newHeights).concat(obj.heights.slice(selRows[selRows.length-1]+1));
									}
									obj.cells = newCel;
									obj.heights = newHei;
									break;
								case 3: // add cols left
								case 4: // add cols right
									var newWidths = [];								
									for (var r = 0; r < cells.length; r++) {
										var newCells = [];
										for (var c = 0; c < selCols.length; c++) {
											var cell = clone(cells[r][selCols[c]]);
											var tags = textArrayGetStartTags(cell.text);
											cell.text = [tags];
											newCells.push(cell);
											if (r == 0) newWidths.push(obj.widths[selCols[c]]);
										}
										if (draw.tableRowColCanvas.selected == 3) {
											var newRow = obj.cells[r].slice(0,selCols[0]).concat(newCells).concat(obj.cells[r].slice(selCols[0]));
										} else {
											var newRow = obj.cells[r].slice(0,selCols[selCols.length-1]+1).concat(newCells).concat(obj.cells[r].slice(selCols[selCols.length-1]+1));
										}
										obj.cells[r] = newRow;
									}
									if (draw.tableRowColCanvas.selected == 3) {
										obj.widths = obj.widths.slice(0,selCols[0]).concat(newWidths).concat(obj.widths.slice(selCols[0]));
									} else {
										obj.widths = obj.widths.slice(0,selCols[selCols.length-1]+1).concat(newWidths).concat(obj.widths.slice(selCols[selCols.length-1]+1));	
									}
									break;
								case 2: // del rows
									for (var r = selRows.length - 1; r >= 0; r--) {
										cells.splice(selRows[r],1);
										obj.heights.splice(selRows[r],1);
									}
									break;
								case 5: // del cols
									for (var r = 0; r < cells.length; r++) {
										for (var c = selCols.length - 1; c >= 0; c--) {
											cells[r].splice(selCols[c],1);
											if (r == 0) obj.widths.splice(selCols[c],1);
										}
									}			
									break;
							}
							updateBorder(draw.path[i]);
						}
					}
				}
			}
			drawCanvasPaths();
			tableMenuClose();
		});	
		draw.tableRowColChangeButton = tableButton;
	}
	if (typeof object.tableBorders == 'object') {
		var buttonPos = object.tableBorders.buttonPos || [1120,620];
		var tableButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		tableButton.type = 'tableBorders';
		tableButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			this.ctx.strokeStyle = '#F00';
			this.ctx.lineWidth = 2;
			this.ctx.fillStyle = '#FFF';
			this.ctx.fillRect(10,11,35,33);
			this.ctx.beginPath();
			for (var i = 1; i < 4; i++) {
				this.ctx.moveTo(10,11+i*33/4);
				this.ctx.lineTo(45,11+i*33/4);
			}
			for (var i = 1; i < 3; i++) {
				this.ctx.moveTo(10+i*35/3,11);
				this.ctx.lineTo(10+i*35/3,44);
			}
			this.ctx.stroke();			
		}
		tableButton.click = function() {
			draw.tableBordersVisible = !draw.tableBordersVisible;
			if (draw.tableBordersVisible == true) {
				tableMenuClose();
				changeDrawMode('tableBorders');
				draw.tableBordersCanvas.style.zIndex = Number(this.style.zIndex)+1;
				showObj(draw.tableBordersCanvas,draw.tableBordersCanvas.data);
			} else {
				changeDrawMode();
				hideObj(draw.tableBordersCanvas,draw.tableBordersCanvas.data);
			}
			draw.tableBordersCanvas.draw();			
		}			
		draw.buttons.push(tableButton);

		var left = buttonPos[0];
		var top = buttonPos[1]+53;		
		var tableBordersCanvas = createCanvas(left,top,400,170,false,false,true,zIndex+100);
		tableBordersCanvas.isStaticMenuCanvas = true;			
		tableBordersCanvas.selected = -1;
		draw.tableBordersCanvas = tableBordersCanvas;
		draw.tableBordersVisible = false;
		
		tableBordersCanvas.colors = ['none','#000','#333','#666','#999','#F00','#00F','#393'];
		tableBordersCanvas.draw = function() {
			var ctx = this.ctx;
			roundedRect(ctx,3,3,this.data[102]-6,this.data[103]-6,8,6,'#000','#FFC');

			text({context:ctx,textArray:['<<fontSize:18>>Outer Border'],left:0,top:10,width:200,height:50,textAlign:'center'});
			text({context:ctx,textArray:['<<fontSize:18>>Inner Border'],left:200,top:10,width:200,height:50,textAlign:'center'});
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 2;
			if (!ctx.setLineDash) {ctx.setLineDash = function () {}}			
			ctx.setLineDash([]);
			ctx.beginPath();
			ctx.moveTo(200,10);
			ctx.lineTo(200,160);
			ctx.stroke();
			
			// draw color buttons
			roundedRect(ctx,10,40,22.5,22.5,0,2,'#000');
			roundedRect(ctx,210,40,22.5,22.5,0,2,'#000');
			ctx.beginPath();
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 2;
			ctx.moveTo(10,40);
			ctx.lineTo(32.5,62.5);
			ctx.moveTo(32.5,40);
			ctx.lineTo(10,62.5);
			ctx.moveTo(210,40);
			ctx.lineTo(232.5,62.5);
			ctx.moveTo(232.5,40);
			ctx.lineTo(210,62.5);			
			ctx.stroke();
			for (var i = 1; i < this.colors.length; i++) {
				roundedRect(ctx,10+22.5*i,40,22.5,22.5,0,2,'#000',this.colors[i]);
				roundedRect(ctx,210+22.5*i,40,22.5,22.5,0,2,'#000',this.colors[i]);
			}

			var innerColor = '#999';
			var innerWeight = 2;
			var innerDash = [5,5];
			var outerColor = '#000';
			var outerWeight = 4;
			var outerDash = [0,0];
			
			for (var i = 0; i < draw.path.length; i++) {
				if (draw.path[i].selected == true) {
					for (var j = 0; j < draw.path[i].obj.length; j++) {
						if (draw.path[i].obj[j].type == 'table' || draw.path[i].obj[j].type == 'table2') {
							innerColor = draw.path[i].obj[j].innerBorder.color;
							if (draw.path[i].obj[j].innerBorder.show == false) innerColor = '#FFC';
							innerWeight = draw.path[i].obj[j].innerBorder.width;
							innerDash = draw.path[i].obj[j].innerBorder.dash;
							if (typeof innerDash !== 'object') innerDash = [0,0];
							if (typeof innerDash[0] !== 'number') innerDash[0] = 0;
							if (typeof innerDash[1] !== 'number') innerDash[1] = 0;
							outerColor = draw.path[i].obj[j].outerBorder.color;
							if (draw.path[i].obj[j].outerBorder.show == false) outerColor = '#FFC';
							outerWeight = draw.path[i].obj[j].outerBorder.width;
							outerDash = draw.path[i].obj[j].outerBorder.dash;
							if (typeof outerDash !== 'object') outerDash = [0,0];
							if (typeof outerDash[0] !== 'number') outerDash[0] = 0;
							if (typeof outerDash[1] !== 'number') outerDash[1] = 0;
						}
					}
				}
			}
			
			ctx.strokeStyle = outerColor;
			ctx.lineWidth = outerWeight;
			ctx.setLineDash(outerDash);
			ctx.beginPath();
			ctx.moveTo(10,80);
			ctx.lineTo(190,80);
			ctx.stroke();
			
			ctx.strokeStyle = innerColor;
			ctx.lineWidth = innerWeight;
			ctx.setLineDash(innerDash);
			ctx.beginPath();
			ctx.moveTo(210,80);
			ctx.lineTo(390,80);
			ctx.stroke();
			
			text({context:ctx,textArray:['<<fontSize:30>>-'],left:10,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:35,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>width '+outerWeight],left:5,top:130,width:60,height:30,textAlign:'center'});

			text({context:ctx,textArray:['<<fontSize:30>>-'],left:75,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:100,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>dash '+outerDash[0]],left:70,top:130,width:60,height:30,textAlign:'center'});

			text({context:ctx,textArray:['<<fontSize:30>>-'],left:140,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:165,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>gap '+outerDash[1]],left:135,top:130,width:60,height:30,textAlign:'center'});
			
			text({context:ctx,textArray:['<<fontSize:30>>-'],left:210,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:235,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>width '+innerWeight],left:205,top:130,width:60,height:30,textAlign:'center'});

			text({context:ctx,textArray:['<<fontSize:30>>-'],left:275,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:300,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>dash '+innerDash[0]],left:270,top:130,width:60,height:30,textAlign:'center'});

			text({context:ctx,textArray:['<<fontSize:30>>-'],left:340,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:365,top:100,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>gap '+innerDash[1]],left:335,top:130,width:60,height:30,textAlign:'center'});			
		}
		tableBordersCanvas.draw();
	
		addListenerMove(tableBordersCanvas,function(e) {
			updateMouse(e);
			var l = e.target.data[100];
			var t = e.target.data[101];
			if (mouseHitRect(l+10,t+40,180,22.5) || mouseHitRect(l+210,t+40,180,22.5) || mouseHitRect(l+10,t+100,50,25) || mouseHitRect(l+75,t+100,50,25) || mouseHitRect(l+140,t+100,50,25) || mouseHitRect(l+210,t+100,50,25) || mouseHitRect(l+275,t+100,50,25) || mouseHitRect(l+340,t+100,50,25)) {
				e.target.style.cursor = draw.cursors.pointer;
			} else {
				e.target.style.cursor = draw.cursors.default;
			}
		});
		
		addListener(tableBordersCanvas,function(e) {
			if (e.target.style.cursor == draw.cursors.default) return;
			updateMouse(e);
			var l = e.target.data[100];
			var t = e.target.data[101];

			for (var i = 0; i < draw.path.length; i++) {
				if (draw.path[i].selected == true) {
					for (var j = 0; j < draw.path[i].obj.length; j++) {
						if (draw.path[i].obj[j].type == 'table' || draw.path[i].obj[j].type == 'table2') {			
							if (mouseHitRect(l+10,t+40,180,22.5)) {
								var color = e.target.colors[Math.floor((mouse.x-(l+10))/22.5)];
								if (color == 'none') {
									draw.path[i].obj[j].outerBorder.show = false;
								} else {
									draw.path[i].obj[j].outerBorder.show = true;
									draw.path[i].obj[j].outerBorder.color = color;
								}
							} else if (mouseHitRect(l+210,t+40,180,22.5)) {
								var color = e.target.colors[Math.floor((mouse.x-(l+210))/22.5)];
								if (color == 'none') {
									draw.path[i].obj[j].innerBorder.show = false;
								} else {
									draw.path[i].obj[j].innerBorder.show = true;
									draw.path[i].obj[j].innerBorder.color = color;
								}
							} else if (mouseHitRect(l+10,t+100,25,25)) {
								draw.path[i].obj[j].outerBorder.width = Math.max(1,draw.path[i].obj[j].outerBorder.width-1);
							} else if (mouseHitRect(l+35,t+100,25,25)) {
								draw.path[i].obj[j].outerBorder.width++;
							} else if (mouseHitRect(l+75,t+100,25,25)) {
								if (typeof draw.path[i].obj[j].outerBorder.dash !== 'object') draw.path[i].obj[j].outerBorder.dash = [0,0];
								draw.path[i].obj[j].outerBorder.dash[0] = Math.max(0,draw.path[i].obj[j].outerBorder.dash[0]-1);
							} else if (mouseHitRect(l+100,t+100,25,25)) {
								if (typeof draw.path[i].obj[j].outerBorder.dash !== 'object') draw.path[i].obj[j].outerBorder.dash = [0,0];
								draw.path[i].obj[j].outerBorder.dash[0]++;
							} else if (mouseHitRect(l+140,t+100,25,25)) {
								if (typeof draw.path[i].obj[j].outerBorder.dash !== 'object') draw.path[i].obj[j].outerBorder.dash = [0,0];
								draw.path[i].obj[j].outerBorder.dash[1] = Math.max(0,draw.path[i].obj[j].outerBorder.dash[1]-1);
							} else if (mouseHitRect(l+165,t+100,25,25)) {
								if (typeof draw.path[i].obj[j].outerBorder.dash !== 'object') draw.path[i].obj[j].outerBorder.dash = [0,0];
								draw.path[i].obj[j].outerBorder.dash[1]++;
							} else if (mouseHitRect(l+210,t+100,25,25)) {
								draw.path[i].obj[j].innerBorder.width = Math.max(1,draw.path[i].obj[j].innerBorder.width-1);
							} else if (mouseHitRect(l+235,t+100,25,25)) {
								draw.path[i].obj[j].innerBorder.width++;
							} else if (mouseHitRect(l+275,t+100,25,25)) {
								if (typeof draw.path[i].obj[j].innerBorder.dash !== 'object') draw.path[i].obj[j].innerBorder.dash = [0,0];
								draw.path[i].obj[j].innerBorder.dash[0] = Math.max(0,draw.path[i].obj[j].innerBorder.dash[0]-1);
							} else if (mouseHitRect(l+300,t+100,25,25)) {
								if (typeof draw.path[i].obj[j].innerBorder.dash !== 'object') draw.path[i].obj[j].innerBorder.dash = [0,0];
								draw.path[i].obj[j].innerBorder.dash[0]++;
							} else if (mouseHitRect(l+340,t+100,25,25)) {
								if (typeof draw.path[i].obj[j].innerBorder.dash !== 'object') draw.path[i].obj[j].innerBorder.dash = [0,0];
								draw.path[i].obj[j].innerBorder.dash[1] = Math.max(0,draw.path[i].obj[j].innerBorder.dash[1]-1);
							} else if (mouseHitRect(l+365,t+100,25,25)) {
								if (typeof draw.path[i].obj[j].innerBorder.dash !== 'object') draw.path[i].obj[j].innerBorder.dash = [0,0];
								draw.path[i].obj[j].innerBorder.dash[1]++;
							}
						}
					}
				}
			}
			drawCanvasPaths();
			this.draw();
		});	
		draw.tableBordersButton = tableButton;
	}
	if (typeof object.tableCellColor == 'object') {
		var buttonPos = object.tableCellColor.buttonPos || [1120,620];
		var tableButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		tableButton.type = 'tableCellColor';
		tableButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			this.ctx.strokeStyle = '#666';
			this.ctx.lineWidth = 1;
			this.ctx.fillStyle = '#FFF';
			this.ctx.fillRect(10,11,35,33);
			this.ctx.fillStyle = '#393';
			this.ctx.fillRect(10+11*1,11+1*33/4,35/3,33/4);
			this.ctx.beginPath();
			for (var i = 0; i < 5; i++) {
				this.ctx.moveTo(10,11+i*33/4);
				this.ctx.lineTo(45,11+i*33/4);
			}
			for (var i = 0; i < 4; i++) {
				this.ctx.moveTo(10+i*35/3,11);
				this.ctx.lineTo(10+i*35/3,44);
			}
			this.ctx.stroke();
			this.ctx.lineWidth = 1;
			this.ctx.strokeStyle = '#000';
			this.ctx.strokeRect(10,11,35,33);			
		}
		tableButton.click = function() {
			draw.tableCellColorVisible = !draw.tableCellColorVisible;
			if (draw.tableCellColorVisible == true) {
				tableMenuClose();
				changeDrawMode('tableCellColor');
				draw.tableCellColorCanvas.style.zIndex = Number(this.style.zIndex)+1;				
				showObj(draw.tableCellColorCanvas,draw.tableCellColorCanvas.data);
			} else {
				changeDrawMode();
				hideObj(draw.tableCellColorCanvas,draw.tableCellColorCanvas.data);
			}			
		}			
		draw.buttons.push(tableButton);

		var left = buttonPos[0];
		var top = buttonPos[1]+53;		
		var tableCellColorCanvas = createCanvas(left,top,110,110,false,false,true,zIndex+100);
		tableCellColorCanvas.isStaticMenuCanvas = true;					
		draw.tableCellColorCanvas = tableCellColorCanvas;
		draw.tableCellColorsVisible = false;
		
		tableCellColorCanvas.colors = [['none','#000','#333','#666'],['#999','#CCC','#FFF','#FFC',],['#FCF','#CFF','#FCC','#CFC'],['#CCF','#F00','#393','#00F']];
		tableCellColorCanvas.draw = function() {
			var ctx = this.ctx;
			roundedRect(ctx,3,3,this.data[102]-6,this.data[103]-6,8,6,'#000','#FFC');
		
			// draw color buttons
			for (var i = 0; i < this.colors.length; i++) {
				for (var j = 0; j < this.colors[i].length; j++) {
					if (i == 0 && j == 0) {
						roundedRect(ctx,10,10,22.5,22.5,0,2,'#000');
						ctx.beginPath();
						ctx.strokeStyle = '#000';
						ctx.lineWidth = 2;
						ctx.moveTo(10,10);
						ctx.lineTo(32.5,32.5);
						ctx.moveTo(32.5,10);
						ctx.lineTo(10,32.5);			
						ctx.stroke();						
					} else {
						roundedRect(ctx,10+22.5*i,10+22.5*j,22.5,22.5,0,2,'#000',this.colors[j][i]);
						roundedRect(ctx,210+22.5*i,10+22.5*j,22.5,22.5,0,2,'#000',this.colors[j][i]);
					}
				}
			}

		}
		tableCellColorCanvas.draw();
	
		addListenerMove(tableCellColorCanvas,function(e) {
			updateMouse(e);
			var l = e.target.data[100];
			var t = e.target.data[101];
			if (mouseHitRect(l+10,t+10,90,90)) {
				e.target.style.cursor = draw.cursors.pointer;
			} else {
				e.target.style.cursor = draw.cursors.default;
			}
		});
		
		addListener(tableCellColorCanvas,function(e) {
			if (e.target.style.cursor == draw.cursors.default) return;
			updateMouse(e);
			var l = e.target.data[100];
			var t = e.target.data[101];
			var color = this.colors[Math.floor((mouse.y-(t+10))/22.5)][Math.floor((mouse.x-(l+10))/22.5)];
			for (var i = 0; i < draw.path.length; i++) {
				if (draw.path[i].selected == true) {
					var path = draw.path[i];
					for (var j = 0; j < path.obj.length; j++) {
						if (path.obj[j].type == 'table' || path.obj[j].type == 'table2') {			
							var cells = path.obj[j].cells;
							for (var r = 0; r < cells.length; r++) {
								for (var c = 0; c < cells[r].length; c++) {
									if (cells[r][c].selected == true) {
										cells[r][c].color = color;
									}
								}
							}
						}
					}
					drawCanvasPath(draw.path.indexOf(path));
				}
			}
		});	
		draw.tableCellColorButton = tableButton;
	}
	if (typeof object.tableInputs == 'object') {
		var buttonPos = object.tableInputs.buttonPos || [1120,620];
		var tableInputsButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		tableInputsButton.type = 'tableInputs';
		tableInputsButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			this.ctx.strokeStyle = '#666';
			this.ctx.lineWidth = 1;
			this.ctx.fillStyle = '#FFF';
			this.ctx.fillRect(10,11,35,33);
			this.ctx.fillStyle = '#CCC';
			this.ctx.fillRect(10,11,35,33/4);
			for (var i = 0; i < 5; i++) {
				this.ctx.moveTo(10,11+i*33/4);
				this.ctx.lineTo(45,11+i*33/4);
			}
			for (var i = 0; i < 4; i++) {
				this.ctx.moveTo(10+i*35/3,11);
				this.ctx.lineTo(10+i*35/3,44);
			}
			this.ctx.stroke();
			this.ctx.lineWidth = 1;
			this.ctx.strokeStyle = '#000';
			this.ctx.strokeRect(10,11,35,33);

			this.ctx.fillStyle = '#FFF';	
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 2;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			this.ctx.beginPath();
			this.ctx.fillRect(28,35,20,13);
			this.ctx.strokeRect(28,35,20,13);
			this.ctx.stroke();
			text({context:this.ctx,left:28,width:20,top:29,textArray:['<<font:Georgia>><<fontSize:10>><<align:center>>I']});			
		}
		tableInputsButton.click = function() {
			for (var i = 0; i < draw.path.length; i++) {
				if (draw.path[i].selected == true) {
					for (var j = 0; j < draw.path[i].obj.length; j++) {
						if (draw.path[i].obj[j].type == 'table') {
							var cells = draw.path[i].obj[j].cells;
							for (var r = 0; r < cells.length; r++) {
								for (var c = 0; c < cells[r].length; c++) {
									if (cells[r][c].selected == true) {
										if (typeof cells[r][c].input !== 'boolean') {
											cells[r][c].input = true;
										} else {
											cells[r][c].input = !cells[r][c].input;
										}
									}
								}
							}
						}
					}
				}
			}
			drawCanvasPaths();			
		}			
		draw.buttons.push(tableInputsButton);
	}	
	if (typeof object.select == 'object') {
		var buttonPos = object.select.buttonPos || [1120,620];
		var selectButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		selectButton.type = 'select';
		selectButton.draw = function() {
			if (draw.drawMode !== 'select') {
				var color = draw.buttonColor;
			} else {
				var color = draw.buttonSelectedColor;
			}	
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.drawImage(selImg,(55-26*0.65)/2+26*0.1,(55-42*0.65)/2,26*0.65,42*0.65);			
		}
		selectButton.click = function() {
			changeDrawMode('select');			
		}		
		draw.buttons.push(selectButton);
	}
	if (typeof object.clone == 'object') {
		var buttonPos = object.clone.buttonPos || [1120,620];
		var cloneButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		cloneButton.type = 'clone';
		cloneButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:12>><<align:center>>CLONE']});				
		}
		cloneButton.click = function() {
			clonePaths();
			/*var clones = [];
			var pMax = draw.path.length;
			for (var p = 0; p < pMax; p++) {
				if (draw.path[p].selected == true) {
					var path = clone(draw.path[p]);
					clones.push(path);
					draw.path[p].selected = false;
				}
			}
			reviveDrawPaths(clones);
			draw.path = draw.path.concat(clones);
			drawCanvasPaths();	*/
		}		
		draw.buttons.push(cloneButton);
	}
	if (typeof object.trigger == 'object') {
		var buttonPos = object.trigger.buttonPos || [1120,620];
		var triggerButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		triggerButton.type = 'trigger';
		triggerButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:5,textArray:['<<font:Arial>><<fontSize:14>><<align:center>>TRIG<<br>>GER']});			
		}
		triggerButton.click = function() {
			draw.triggerEnabled = !draw.triggerEnabled;
			if (draw.triggerEnabled == true) {
				draw.stepNum = 0;
				showSlider(draw.triggerSlider);
			} else {
				hideSlider(draw.triggerSlider);
			}
			for (var i = 0; i < draw.path.length; i++) {
				updateBorder(draw.path[i]);
			}
			drawCanvasPaths();
			calcCursorPositions();
		}		
		draw.buttons.push(triggerButton);
		draw.stepNumChange = function() {
			drawCanvasPaths();
		}
		draw.triggerSlider = createSlider({
			id:1,
			left:50,
			top:700,
			width:400,
			height:60,
			zIndex:10000000,
			vari:'Step',
			linkedVar:'draw.triggerNum',
			varChangeListener:'draw.stepNumChange',
			min:0,
			max:1,
			startNum:0,
			discrete:true,
			stepNum:1,
			snap:true,
			snapNum:1,
			visible:false
		});
	}
	if (typeof object.ans == 'object') {
		var buttonPos = object.ans.buttonPos || [1120,620];
		var ansButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		ansButton.type = 'ans';
		ansButton.draw = function() {
			var color = draw.buttonColor;
			if (draw.triggerNum == 1) color = '#CFC';
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:20>><<align:center>>ANS']});			
		}
		ansButton.click = function() {
			draw.triggerEnabled = true;
			draw.triggerNum = draw.triggerNum == 1 ? 0 : 1;
			/*draw.ansMode = true;
			if (un(draw.showAns) || draw.showAns == false){
				draw.showAns = true;
			} else {
				draw.showAns = false;
			}*/
			this.draw();
			drawCanvasPaths();
			calcCursorPositions();
		}		
		draw.buttons.push(ansButton);
	}		
	if (typeof object.video == 'object') {
		var buttonPos = object.video.buttonPos || [1120,620];
		var videoButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		videoButton.type = 'video';
		videoButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			roundedRect(this.ctx,8,14,39,27,5,0,'#FFC','#FFC');
			drawPath({ctx:this.ctx,closed:true,fillColor:'#000',path:[[22,27.5-7],[36,27.5],[22,27.5+7]]});
			for (var i = 0; i < 4; i++) {
				roundedRect(this.ctx,10+i*(3+(35-4*3)/3),8,3,3,0,0,'#FFC','#FFC');
				roundedRect(this.ctx,10+i*(3+(35-4*3)/3),44,3,3,0,0,'#FFC','#FFC');
			}			
		}
		videoButton.click = function() {
			addVideo();
		}		
		draw.buttons.push(videoButton);
	}	
	if (typeof object.group == 'object') {
		var buttonPos = object.group.buttonPos || [1120,620];
		var groupButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		groupButton.type = 'group';
		groupButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:12>><<align:center>>GROUP']});			
		}
		groupButton.click = function() {
			groupPaths();
			/*var selected = [];
			for (var i = 0; i < draw.path.length; i++) {
				if (draw.path[i].selected == true) selected.push(i);
			}
			if (selected.length > 1) {
				var pathObject = [];
				for (i = 0; i < selected.length; i++) {
					for (var k = 0; k < draw.path[selected[i]].obj.length; k++) {
						pathObject.push(draw.path[selected[i]].obj[k]);
					}
				}
				draw.path[selected[selected.length-1]] = {obj:pathObject.slice(0),selected:true};
				updateBorder(draw.path[selected[selected.length-1]]);
				for (var i = selected.length - 2; i >= 0; i--) {
					draw.path.splice(selected[i],1);	
				}
				drawCanvasPaths();
			} else if (selected.length == 1) {
				var pathObject = [];
				for (var i = 0; i < draw.path[selected[0]].obj.length; i++) {
					pathObj = [[draw.path[selected[0]].obj[i]],true];
					updateBorder(pathObj);
					pathObject.push(pathObj);
				}
				draw.path.splice(selected[0],1);
				for (var i = pathObject.length - 1; i >= 0; i--) {
					draw.path.splice(selected[0],0,pathObject[i]);
				}
				drawCanvasPaths();
			}*/			
		}		
		draw.buttons.push(groupButton);
	}
	if (typeof object.delete == 'object') {
		var buttonPos = object.delete.buttonPos || [1120,620];
		var deleteButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		deleteButton.type = 'delete';
		deleteButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:20>><<align:center>><<color:#F00>>DEL']});			
		}
		deleteButton.click = function() {
			deleteSelectedPaths();
		}		
		draw.buttons.push(deleteButton);
	}	
	if (typeof object.rect == 'object') {
		var buttonPos = object.rect.buttonPos || [1120,620];
		var rectButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		rectButton.type = 'rect';
		rectButton.draw = function() {
			if (draw.drawMode !== 'rect') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineWidth = draw.thickness;;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.beginPath();
			this.ctx.strokeRect(12.5,17.5,30,20);
			this.ctx.stroke();			
		}
		rectButton.click = function() {
			changeDrawMode('rect');			
		}			
		draw.buttons.push(rectButton);
	}
	if (typeof object.square == 'object') {
		var buttonPos = object.square.buttonPos || [1120,620];
		var squareButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		squareButton.type = 'square';
		squareButton.draw = function() {
			if (draw.drawMode !== 'square') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineWidth = draw.thickness;;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.beginPath();
			this.ctx.strokeRect(15,15,25,25);
			this.ctx.stroke();			
		}
		squareButton.click = function() {
			changeDrawMode('square');			
		}		
		draw.buttons.push(squareButton);
	}
	if (typeof object.polygon == 'object') {
		var buttonPos = object.polygon.buttonPos || [1120,620];
		var polygonButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		polygonButton.type = 'polygon';
		polygonButton.draw = function() {
			if (draw.drawMode !== 'polygon') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineWidth = draw.thickness;;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.beginPath();
			this.ctx.moveTo(10,25);
			this.ctx.lineTo(25,10);
			this.ctx.lineTo(45,30);
			this.ctx.lineTo(30,45);
			this.ctx.lineTo(20,45);
			this.ctx.lineTo(10,25);
			this.ctx.stroke();			
		}
		polygonButton.click = function() {
			changeDrawMode('polygon');
		}		
		draw.buttons.push(polygonButton);
	}	
	if (typeof object.circle == 'object') {
		var buttonPos = object.circle.buttonPos || [1120,620];
		var circleButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		circleButton.type = 'circle';
		circleButton.draw = function() {
			if (draw.drawMode !== 'circle') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineWidth = draw.thickness;;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.beginPath();
			this.ctx.arc(27.5,27.5,15,0,2*Math.PI);
			this.ctx.stroke();			
		}
		circleButton.click = function() {
			changeDrawMode('circle');			
		}		
		draw.buttons.push(circleButton);
	}
	if (typeof object.ellipse == 'object') {
		var buttonPos = object.ellipse.buttonPos || [1120,620];
		var ellipseButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		ellipseButton.type = 'ellipse';
		ellipseButton.draw = function() {
			if (draw.drawMode !== 'ellipse') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.strokeStyle = draw.color;
			this.ctx.lineWidth = draw.thickness;;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.save();
			this.ctx.translate(27.5,27.5);
			this.ctx.scale(1.5,1);
			this.ctx.beginPath();
			this.ctx.arc(0,0,10,0,2*Math.PI);
			this.ctx.stroke();
			this.ctx.restore();			
		}
		ellipseButton.click = function() {
			changeDrawMode('ellipse');			
		}		
		draw.buttons.push(ellipseButton);
	}
	if (typeof object.button == 'object') {
		var buttonPos = object.button.buttonPos || [1120,620];
		var buttonButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		buttonButton.type = 'button';
		buttonButton.draw = function() {
			if (draw.drawMode !== 'button') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.fillStyle = '#6F9';	
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 2;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			this.ctx.beginPath();
			this.ctx.fillRect(8,15,55-16,25);
			this.ctx.strokeRect(8,15,55-16,25);
			this.ctx.stroke();
			
			text({context:this.ctx,left:8,width:55-16,top:15,textArray:['<<font:Hobo>><<fontSize:20>><<align:center>>bttn']});			
		}
		buttonButton.click = function() {
			if (draw.fillColor == '#000' || draw.fillColor == 'none') {
				var fillColor = '#6F9';
			} else {
				var fillColor = draw.fillColor;	
			}
			deselectAllPaths();
			var mInput = createMathsInput2({
				left:50-draw.drawRelPos[0],
				top:200-draw.drawRelPos[1],
				width:150,
				height:2*draw.drawArea[3],
				varSize:{minWidth:30,maxWidth:150,minHeight:60,maxHeight:60},
				backColor:'none',
				selectColor:'none',
				border:false,
				borderColor:'#00F',
				borderWidth:1,
				borderDash:[5,8],
				textAlign:'center',
				vertAlign:'middle',
				maxLines:100,
				selectable:true,
				zIndex:draw.zIndex,
				pointerCanvas:draw.cursorCanvas
			});
			setMathsInputText(mInput,['<<font:Hobo>><<fontSize:32>><<align:center>>button']);
			draw.path.push({obj:[{
				type:'button',
				thickness:4,
				fillColor:fillColor,
				color:'#000',
				left:50-draw.drawRelPos[0],
				top:200-draw.drawRelPos[1],
				width:150,
				height:60,
				text:['<<font:Hobo>><<fontSize:32>><<align:center>>button'],
				mathsInput:mInput,
				backColor:'none',
				selectColor:'none',
				textAlign:'center'
			}],selected:true,trigger:[]});
			//mInput.drawPath = draw.path[draw.path.length-1];
			updateBorder(draw.path[draw.path.length-1]);
			changeDrawMode();
			drawCanvasPaths();			
		}		
		draw.buttons.push(buttonButton);
	}	
	if (typeof object.text == 'object') {
		var buttonPos = object.text.buttonPos || [1120,620];
		var textButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		textButton.type = 'text';
		textButton.draw = function() {
			if (draw.drawMode !== 'textStart') {
				var color = draw.buttonColor;
			} else {
				var color = draw.buttonSelectedColor;
			}	
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			text({context:this.ctx,left:0,width:55,top:5,textArray:['<<font:Arial>><<fontSize:35>><<align:center>>A']});			
		}
		textButton.click = function() {
			changeDrawMode('textStart');			
		}		
		draw.buttons.push(textButton);
	}
	if (typeof object.input == 'object') {
		var buttonPos = object.input.buttonPos || [1120,620];
		var inputButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		inputButton.type = 'input';
		inputButton.draw = function() {
			if (draw.drawMode !== 'input') {
				var color = draw.buttonColor;
				this.style.cursor = draw.cursors.pointer;
			} else {
				var color = draw.buttonSelectedColor;
				this.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
			}
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			this.ctx.fillStyle = '#FFF';	
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 2;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			this.ctx.beginPath();
			this.ctx.fillRect(8,15,55-16,25);
			this.ctx.strokeRect(8,15,55-16,25);
			this.ctx.stroke();
			
			text({context:this.ctx,left:8,width:55-16,top:15,textArray:['<<font:Georgia>><<fontSize:20>><<align:center>>I']});			
		}
		inputButton.click = function() {
			deselectAllPaths();
			
			var mInput = createMathsInput2({
				left:100-draw.drawRelPos[0],
				top:200-draw.drawRelPos[1],
				width:150,
				height:2*draw.drawArea[3],
				fontSize:30,
				varSize:{minWidth:30,maxWidth:150,minHeight:60,maxHeight:60,padding:10},
				backColor:'none',
				selectColor:'none',
				border:false,
				borderColor:'#00F',
				borderWidth:1,
				borderDash:[5,8],
				textAlign:'center',
				vertAlign:'middle',
				maxLines:1,
				selectable:true,
				zIndex:draw.zIndex,
				pointerCanvas:draw.cursorCanvas
			});
			setMathsInputText(mInput,['<<font:Arial>><<fontSize:32>><<align:center>>']);
			//mInput.drawPath = draw.path[draw.path.length-1];
			
			var leftInput = createMathsInput2({
				left:100-800-draw.drawRelPos[0],
				top:200-draw.drawRelPos[1],
				width:800,
				height:2*draw.drawArea[3],
				varSize:{minWidth:30,maxWidth:800,minHeight:50,maxHeight:50,padding:0},
				backColor:'none',
				selectColor:'none',
				border:true,
				borderColor:'#00F',
				borderWidth:1,
				borderDash:[5,8],
				textAlign:'right',
				vertAlign:'middle',
				maxLines:1,
				fontSize:32,
				selectable:true,
				zIndex:draw.zIndex,
				pointerCanvas:draw.cursorCanvas
			});
			//leftInput.drawPath = draw.path[draw.path.length-1];
			
			var rightInput = createMathsInput2({
				left:250-draw.drawRelPos[0],
				top:200-draw.drawRelPos[1],
				width:800,
				height:2*draw.drawArea[3],
				varSize:{minWidth:30,maxWidth:800,minHeight:50,maxHeight:50,padding:0},
				backColor:'none',
				selectColor:'none',
				border:true,
				borderColor:'#00F',
				borderWidth:1,
				borderDash:[5,8],
				textAlign:'left',
				vertAlign:'middle',
				maxLines:1,
				fontSize:32,
				selectable:true,
				zIndex:draw.zIndex,
				pointerCanvas:draw.cursorCanvas
			});
			//rightInput.drawPath = draw.path[draw.path.length-1];
			
			draw.path.push({obj:[{
				type:'input',
				thickness:4,
				fillColor:'#FFF',
				color:'#000',
				left:100-draw.drawRelPos[0],
				top:200-draw.drawRelPos[1],
				width:150,
				height:60,
				text:['<<font:Arial>><<fontSize:32>><<align:center>>input'],
				leftText:[],
				rightText:[],
				edit:true,
				mathsInput:mInput,
				leftInput:leftInput,
				rightInput:rightInput,
				backColor:'none',
				selectColor:'none',
				textAlign:'center',
			}],selected:true,trigger:[]});
			repositionPath(draw.path[draw.path.length-1]);	
			changeDrawMode();
			drawCanvasPaths();			
		}		
		draw.buttons.push(inputButton);
	}
	if (typeof object.grid == 'object') {
		var buttonPos = object.grid.buttonPos || [1120,620];
		var gridButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		gridButton.type = 'grid';
		gridButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			this.ctx.strokeStyle = '#666';
			this.ctx.lineWidth = 1;
			for (var i = 0; i < 9; i++) {
				this.ctx.moveTo(10,10+i*35/8);
				this.ctx.lineTo(45,10+i*35/8);
			}
			for (var i = 0; i < 9; i++) {
				this.ctx.moveTo(10+i*35/8,10);
				this.ctx.lineTo(10+i*35/8,45);
			}
			this.ctx.stroke();

			drawArrow({ctx:this.ctx,startX:8,startY:55/2,finX:49,finY:55/2,lineWidth:2,arrowLength:4});
			drawArrow({ctx:this.ctx,finY:6,startX:55/2,startY:47,finX:55/2,lineWidth:2,arrowLength:4});			
		}
		gridButton.click = function() {
			draw.grid.add();
		}		
		draw.buttons.push(gridButton);
	}	
	if (typeof object.colorSelect == 'object') {
		var colors = object.colorSelect.colors || ['#000','#999','#00F','#F00','#393','#F0F','#93C','#F60'];
		var buttonPos = object.colorSelect.buttonPos || [1120,620];
		var expandTo = object.colorSelect.expandTo || 'left';
		var colorSelectButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		colorSelectButton.type = 'colorSelect';
		colorSelectButton.colors = colors;
		colorSelectButton.draw = function() {
			var color = draw.buttonColor;
			if (draw.colorSelectVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			for (var i = 0; i < 9; i++) {
				this.ctx.fillStyle = this.colors[i] || '#FFF';
				this.ctx.fillRect(12.5+10*(i%3),12.5+10*Math.floor(i/3),10,10);
			}
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 1;
			this.ctx.strokeRect(12.5,12.5,30,30);			
		}
		colorSelectButton.click = function() {
			draw.colorSelectVisible = !draw.colorSelectVisible;
			if (draw.colorSelectVisible == true) {
				for (var i = 0; i < draw.colorButtons.length; i++) {
					showObj(draw.colorButtons[i],draw.colorButtons[i].data)
				}
				for (var i = 0; i < container.childNodes.length; i++) {
					if (draw.colorButtons.indexOf(container.childNodes[i]) == -1) {
						addListenerStart(container.childNodes[i],colorSelectClose);
					}
				}				
			} else {
				for (var i = 0; i < draw.colorButtons.length; i++) {
					hideObj(draw.colorButtons[i],draw.colorButtons[i].data)
				}
				for (var i = 0; i < container.childNodes.length; i++) {
					if (draw.colorButtons.indexOf(container.childNodes[i]) == -1) {
						removeListenerStart(container.childNodes[i],colorSelectClose);
					}
				}								
			}			
		}		
		draw.buttons.push(colorSelectButton);
		switch (expandTo) {
			case 'left':
				var left = buttonPos[0] - 125;
				var top = buttonPos[1] + 17.5 - 100;
				break;
			case 'top':
				var left = buttonPos[0] - 32.5;
				var top = buttonPos[1] - 225;		
				break;
			case 'right':
				var left = buttonPos[0] + 60;
				var top = buttonPos[1] + 17.5 - 100;		
				break;
			case 'bottom':
				var left = buttonPos[0] - 32.5;
				var top = buttonPos[1] + 60;		
				break;
		}
		var colorBackButton = createCanvas(left,top,120,220,false,false,false,draw.drawButtonZIndex);
		colorBackButton.isStaticMenuCanvas = true;					
		roundedRect(colorBackButton.getContext('2d'),3,3,114,214,8,6,'#000',draw.buttonColor);
		draw.colorButtons.push(colorBackButton);
		for (var i = 0; i < colors.length; i++) {
			var left2 = left + 10 + 50 * (i % 2);
			var top2 = top + 10 + 50 * Math.floor(i / 2);	
			var colorButton = createCanvas(left2,top2,50,50,false,false,true,draw.drawButtonZIndex);
			colorButton.isStaticMenuCanvas = true;		
			colorButton.color = colors[i];
			colorButton.ctx.lineCap = 'round';
			colorButton.ctx.lineJoin = 'round';
			colorButton.ctx.lineWidth = 4;
			colorButton.ctx.strokeStyle = '#000';		
			colorButton.ctx.fillStyle = colors[i];
			colorButton.ctx.fillRect(0,0,50,50);
			colorButton.ctx.strokeRect(0,0,50,50);
			addListener(colorButton,function() {
				draw.color = this.color;
				//changeDrawMode();
				//redrawButtons();
				draw.cursors.update();
				recalcRulerValues(); // updates the ruler edge draw cursors				
				for (var i = 0; i < draw.path.length; i++) {
					if (draw.path[i].selected == true) {
						for (var j = 0; j < draw.path[i].obj.length; j++) {
							draw.path[i].obj[j].color = this.color;	
							if (draw.path[i].obj[j].type == 'angle') {
								draw.path[i].obj[j].lineColor = this.color;
							}
						}
					}
				}
				drawCanvasPaths();
			})
			draw.colorButtons.push(colorButton);
		}
	}
	if (typeof object.thicknessSelect == 'object') {
		var thicknesses = object.thicknessSelect.thicknessses || [1,3,5,7];
		var buttonPos = object.thicknessSelect.buttonPos || [1120,620];
		var expandTo = object.thicknessSelect.expandTo || 'left';
		var thicknessSelectButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		thicknessSelectButton.type = 'thicknessSelect';
		thicknessSelectButton.thicknesses = thicknesses;
		thicknessSelectButton.draw = function() {
			var color = draw.buttonColor;
			if (draw.thicknessSelectVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.strokeStyle = '#000';
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			this.ctx.lineWidth = 1;
			this.ctx.beginPath();
			this.ctx.moveTo(10,12);
			this.ctx.lineTo(45,12);
			this.ctx.stroke();
			this.ctx.lineWidth = 3;
			this.ctx.beginPath();
			this.ctx.moveTo(10.5,20);
			this.ctx.lineTo(44.5,20);
			this.ctx.stroke();		
			this.ctx.lineWidth = 5;
			this.ctx.beginPath();
			this.ctx.moveTo(11,29);
			this.ctx.lineTo(44,29);
			this.ctx.stroke();	
			this.ctx.lineWidth = 7;
			this.ctx.beginPath();
			this.ctx.moveTo(11.5,39);
			this.ctx.lineTo(43.5,39);
			this.ctx.stroke();			
		}
		thicknessSelectButton.click = function() {
			draw.thicknessSelectVisible = !draw.thicknessSelectVisible;
			if (draw.thicknessSelectVisible == true) {
				for (var i = 0; i < draw.thicknessButtons.length; i++) {
					showObj(draw.thicknessButtons[i],draw.thicknessButtons[i].data)
				}
				for (var i = 0; i < container.childNodes.length; i++) {
					if (draw.thicknessButtons.indexOf(container.childNodes[i]) == -1) {
						addListenerStart(container.childNodes[i],thicknessSelectClose);
					}
				}				
			} else {
				for (var i = 0; i < draw.thicknessButtons.length; i++) {
					hideObj(draw.thicknessButtons[i],draw.thicknessButtons[i].data)
				}	
				for (var i = 0; i < container.childNodes.length; i++) {
					if (draw.thicknessButtons.indexOf(container.childNodes[i]) == -1) {
						removeListenerStart(container.childNodes[i],thicknessSelectClose);
					}
				}							
			}			
		}		
		draw.buttons.push(thicknessSelectButton);
		switch (expandTo) {
			case 'left':
				var left = buttonPos[0] - 125;
				var top = buttonPos[1] + 17.5 - 100;
				break;
			case 'top':
				var left = buttonPos[0] - 32.5;
				var top = buttonPos[1] - 225;		
				break;
			case 'right':
				var left = buttonPos[0] + 60;
				var top = buttonPos[1] + 17.5 - 100;		
				break;
			case 'bottom':
				var left = buttonPos[0] - 32.5;
				var top = buttonPos[1] + 60;		
				break;
		}
		var thicknessBackButton = createCanvas(left,top,120,220,false,false,false,draw.drawButtonZIndex);
		thicknessBackButton.isStaticMenuCanvas = true;				
		roundedRect(thicknessBackButton.getContext('2d'),3,3,114,214,8,6,'#000',draw.buttonColor);
		draw.thicknessButtons.push(thicknessBackButton);
		for (var i = 0; i < thicknesses.length; i++) {
			var left2 = left + 10;
			var top2 = top + 14 + 50*i - 2.5*i;	
			var thicknessButton = createCanvas(left2,top2,100,50,false,false,true,draw.drawButtonZIndex);
			thicknessButton.isStaticMenuCanvas = true;
			thicknessButton.thickness = thicknesses[i];
			addListener(thicknessButton,function() {
				draw.thickness = this.thickness;
				//changeDrawMode();			
				redrawThicknessButtons();
				//redrawButtons();
				draw.cursors.update();
				for (var i = 0; i < draw.path.length; i++) {
					if (draw.path[i].selected == true) {
						for (var j = 0; j < draw.path[i].obj.length; j++) {
							draw.path[i].obj[j].thickness = this.thickness;
							if (draw.path[i].obj[j].type == 'angle') {
								draw.path[i].obj[j].lineWidth = this.thickness;
							}							
						}
					}
				}
				drawCanvasPaths();				
			})
			draw.thicknessButtons.push(thicknessButton);
		}
		redrawThicknessButtons()
	}	
	if (typeof object.fillColorSelect == 'object') {
		var colors = object.fillColorSelect.colors || ['#FF0','#F0F','#0FF','#CFC','#FCC','#CFF','#FCF','#FFC','#6F9','#000','#F00','#00F','#999','none'];
		var buttonPos = object.fillColorSelect.buttonPos || [1120,620];
		var expandTo = object.fillColorSelect.expandTo || 'left';
		var fillColorSelectButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		fillColorSelectButton.type = 'fillColorSelect';
		fillColorSelectButton.colors = colors;
		fillColorSelectButton.draw = function() {
			var color = draw.buttonColor;
			if (draw.fillColorSelectVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			for (var i = 0; i < 9; i++) {
				this.ctx.fillStyle = this.colors[i] || '#FFF';
				this.ctx.fillRect(12.5+10*(i%3),12.5+10*Math.floor(i/3),10,10);
			}
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 1;
			this.ctx.strokeRect(12.5,12.5,30,30);			
		}
		fillColorSelectButton.click = function() {
			draw.fillColorSelectVisible = !draw.fillColorSelectVisible;
			if (draw.fillColorSelectVisible == true) {
				for (var i = 0; i < draw.fillColorButtons.length; i++) {
					showObj(draw.fillColorButtons[i],draw.fillColorButtons[i].data)
				}
				for (var i = 0; i < container.childNodes.length; i++) {
					if (draw.fillColorButtons.indexOf(container.childNodes[i]) == -1) {
						addListenerStart(container.childNodes[i],fillColorSelectClose);
					}
				}				
			} else {
				for (var i = 0; i < draw.fillColorButtons.length; i++) {
					hideObj(draw.fillColorButtons[i],draw.fillColorButtons[i].data)
				}
				for (var i = 0; i < container.childNodes.length; i++) {
					if (draw.fillColorButtons.indexOf(container.childNodes[i]) == -1) {
						removeListenerStart(container.childNodes[i],fillColorSelectClose);
					}
				}
			}			
		}			
		draw.buttons.push(fillColorSelectButton);
		switch (expandTo) {
			case 'left':
				var left = buttonPos[0] - 125;
				var top = buttonPos[1] + 17.5 - 100;
				break;
			case 'top':
				var left = buttonPos[0] - 32.5;
				var top = buttonPos[1] - 225;		
				break;
			case 'right':
				var left = buttonPos[0] + 60;
				var top = buttonPos[1] + 17.5 - 100;		
				break;
			case 'bottom':
				var left = buttonPos[0] - 32.5;
				var top = buttonPos[1] + 60;		
				break;
		}
		var colorBackButton = createCanvas(left,top,120,370,false,false,false,draw.drawButtonZIndex);
		colorBackButton.isStaticMenuCanvas = true;
		roundedRect(colorBackButton.getContext('2d'),3,3,114,364,8,6,'#000',draw.buttonColor);
		draw.fillColorButtons.push(colorBackButton);
		for (var i = 0; i < colors.length; i++) {
			var left2 = left + 10 + 50 * (i % 2);
			var top2 = top + 10 + 50 * Math.floor(i / 2);	
			var colorButton = createCanvas(left2,top2,50,50,false,false,true,draw.drawButtonZIndex);
			colorButton.isStaticMenuCanvas = true;
			colorButton.color = colors[i];
			colorButton.ctx.lineCap = 'round';
			colorButton.ctx.lineJoin = 'round';
			colorButton.ctx.lineWidth = 4;
			colorButton.ctx.strokeStyle = '#000';
			if (colors[i] == 'none') {
				colorButton.ctx.fillStyle = mainCanvasFillStyle;
				colorButton.ctx.fillRect(0,0,50,50);
				colorButton.ctx.save();
				colorButton.ctx.beginPath();
				colorButton.ctx.moveTo(0,0);
				colorButton.ctx.lineTo(50,50);
				colorButton.ctx.moveTo(50,0);
				colorButton.ctx.lineTo(0,50);
				colorButton.ctx.lineWidth = 1;
				colorButton.ctx.strokeStyle = '#000';
				colorButton.ctx.stroke();
				colorButton.ctx.restore();
			} else {
				colorButton.ctx.fillStyle = colors[i];
				colorButton.ctx.fillRect(0,0,50,50);
			}
			colorButton.ctx.strokeRect(0,0,50,50);
			addListener(colorButton,function() {
				draw.fillColor = this.color;
				//changeDrawMode();
				//redrawButtons();
				draw.cursors.update();
				for (var i = 0; i < draw.path.length; i++) {
					if (draw.path[i].selected == true) {
						for (var j = 0; j < draw.path[i].obj.length; j++) {
							draw.path[i].obj[j].fillColor = this.color;
							if (draw.path[i].obj[j].type == 'angle') {
								draw.path[i].obj[j].lineColor = this.lineColor;
							}							
						}
					}
				}
				drawCanvasPaths();				
			})
			draw.fillColorButtons.push(colorButton);
		}		
	}
	if (typeof object.drawStyle == 'object') {
		var buttonPos = object.drawStyle.buttonPos || [1120,620];
		var button = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		button.type = 'drawStyle';
		button.draw = function() {
			var color = draw.buttonColor;
			if (draw.drawStyleSelectVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			
			this.ctx.strokeStyle = '#000';
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			this.ctx.lineWidth = 1;
			this.ctx.beginPath();
			this.ctx.moveTo(10,12);
			this.ctx.lineTo(45,12);
			this.ctx.stroke();
			this.ctx.strokeStyle = '#00F';
			this.ctx.lineWidth = 3;
			this.ctx.beginPath();
			this.ctx.moveTo(10.5,20);
			this.ctx.lineTo(44.5,20);
			this.ctx.stroke();		
			this.ctx.strokeStyle = '#F00';
			this.ctx.lineWidth = 5;
			this.ctx.beginPath();
			this.ctx.moveTo(11,29);
			this.ctx.lineTo(44,29);
			this.ctx.stroke();	
			this.ctx.strokeStyle = '#393';
			this.ctx.lineWidth = 7;
			this.ctx.beginPath();
			this.ctx.moveTo(11.5,39);
			this.ctx.lineTo(43.5,39);
			this.ctx.stroke();			
		}
		button.click = function() {
			draw.drawStyleSelectVisible = !draw.drawStyleSelectVisible;
			if (draw.drawStyleSelectVisible == true) {
				changeDrawMode('drawStyle');
				showObj(draw.drawStyleCanvas,draw.drawStyleCanvas.data);
				//showMathsInput(draw.drawStyleCanvas.lineColorInput);
				//showMathsInput(draw.drawStyleCanvas.fillColorInput);
				//defaults
				draw.drawStyleCanvas.lineWidth = 2;
				draw.drawStyleCanvas.lineColor = '#000';
				draw.drawStyleCanvas.lineDash = [0,0];
				draw.drawStyleCanvas.fillColor = 'none';
				draw.drawStyleCanvas.radius = 0;
				draw.drawStyleCanvas.selected = [];
				for (var p = 0; p < draw.path.length; p++) {
					if (boolean(draw.path[p].selected,false) == true) {
						draw.drawStyleCanvas.selected.push(p);
					}
				}
				var found = false;
				for (var s = 0; s < draw.drawStyleCanvas.selected.length; s++) {
					if (found == true) break;
					var path = draw.path[draw.drawStyleCanvas.selected[s]];
					for (var o = 0; o < path.obj.length; o++) {
						if (found == true) break;
						var obj = path.obj[o];
						if (!un(draw[obj.type])) {
							found = true;
							if (!un(draw[obj.type].getLineColor)) {
								draw.drawStyleCanvas.lineColor = draw[obj.type].getLineColor(obj);
							}
							if (!un(draw[obj.type].getLineWidth)) {
								draw.drawStyleCanvas.lineWidth = draw[obj.type].getLineWidth(obj);
							}
							if (!un(draw[obj.type].getLineDash)) {
								draw.drawStyleCanvas.lineDash = draw[obj.type].getLineDash(obj);
							}
							if (!un(draw[obj.type].getFillColor)) {
								draw.drawStyleCanvas.fillColor = draw[obj.type].getFillColor(obj);
							}
							if (!un(draw[obj.type].getRadius)) {
								draw.drawStyleCanvas.radius = draw[obj.type].getRadius(obj);
							}
							break;
						}
						if (['pen','line','circle','ellipse','rect','square','arc','curve','curve2','polygon'].indexOf(obj.type) > -1) {
							found = true;
							draw.drawStyleCanvas.lineWidth = obj.thickness || 2;
							draw.drawStyleCanvas.lineColor = obj.color || '#000';
							draw.drawStyleCanvas.lineDash = obj.dash || [0,0];
							draw.drawStyleCanvas.fillColor = obj.fillColor || 'none';
							draw.drawStyleCanvas.radius = obj.radius || 0;
						}
						if (['table2'].indexOf(obj.type) > -1) {
								for (var r = 0; r < obj.cells.length; r++) {
									for (var c = 0; c < obj.cells[r].length; c++) {
										var cell = obj.cells[r][c];
										if (cell.selected == true) {
											if (found == true) break;
											if (!un(cell.box)) {
												found = true;
												draw.drawStyleCanvas.lineWidth = cell.box.lineWidth || 2;
												draw.drawStyleCanvas.lineColor = cell.box.lineColor || '#000';
												draw.drawStyleCanvas.lineDash = cell.box.dash || [0,0];
												draw.drawStyleCanvas.fillColor = cell.box.fillColor || cell.box.color || 'none';
												draw.drawStyleCanvas.radius = cell.box.radius || 0;
											}
										}
									}
								}
							}
					}
				}
				if (found == false) {
					draw.drawStyleCanvas.lineWidth = draw.thickness;
					draw.drawStyleCanvas.lineColor = draw.color;
					draw.drawStyleCanvas.lineDash = draw.dash || [0,0];
					draw.drawStyleCanvas.fillColor = draw.fillColor;
					draw.drawStyleCanvas.radius = draw.radius || 0;
				}
				draw.drawStyleCanvas.draw();
				addListenerMove(draw.drawStyleCanvas,draw.drawStyleCanvas.move);
				addListener(draw.drawStyleCanvas,draw.drawStyleCanvas.click);
				addListener(window,draw.drawStyleCanvas.close);
			} else {
				changeDrawMode();
				hideObj(draw.drawStyleCanvas,draw.drawStyleCanvas.data);
				//hideMathsInput(draw.drawStyleCanvas.lineColorInput);
				//hideMathsInput(draw.drawStyleCanvas.fillColorInput);
				removeListenerMove(draw.drawStyleCanvas,draw.drawStyleCanvas.move);
				removeListener(draw.drawStyleCanvas,draw.drawStyleCanvas.click);
				removeListener(window,draw.drawStyleCanvas.close);
			}			
		}
		draw.buttons.push(button);
		draw.dash = [0,0];
		
		var left = buttonPos[0];
		var top = buttonPos[1]+53;
		var drawStyleCanvas = createCanvas(left,top,200,400,false,false,true,zIndex+1001000);
		drawStyleCanvas.isStaticMenuCanvas = true;	
		drawStyleCanvas.selected = -1;
		drawStyleCanvas.button = button;
		draw.drawStyleCanvas = drawStyleCanvas;
		draw.drawStyleSelectVisible = false;
		
		drawStyleCanvas.lineColors = [
			['none','#000','#666','#FFF','#060','#393','#6F9','#09F'],
			['#F60','#F90','#FF0','#F0F','#0FF','#0F0','#00F','#F00'],
			['#990','#630','#FF6','#F6F','#6FF','#6F6','#66F','#F66'],
			['#90F','#309','#FFC','#FCF','#CFF','#CFC','#CCF','#FCC']
		];
		drawStyleCanvas.fillColors = [
			['none','#000','#666','#FFF','#060','#393','#6F9','#09F'],
			['#FFF8FA','#F90','#FF0','#F0F','#0FF','#0F0','#00F','#F00'],
			['#E5F8E5','#630','#FF6','#F6F','#6FF','#6F6','#66F','#F66'],
			['#E1F6FE','#309','#FFC','#FCF','#CFF','#CFC','#CCF','#FCC']
		];
		/*
		drawStyleCanvas.lineColorInput = createMathsInput2({left:left+200-110,top:top+60,width:100,height:20,border:true,fontSize:18,transparent:true,backColor:'#FFC',selectColor:'#FFC',zIndex:zIndex+1001001,visible:false});
		drawStyleCanvas.lineColorInput.onInputEnd = function() {
			var str = replaceAll(this.stringJS,'*','');
			var re = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$");
			if (str == 'none' || re.test(str) == true) {
				for (var s = 0; s < draw.drawStyleCanvas.selected.length; s++) {
					var p = draw.drawStyleCanvas.selected[s];
					for (var o = 0; o < draw.path[p].obj.length; o++) {
						if (['pen','line','circle','ellipse','rect','square','arc','curve','curve2','polygon','button','text'].indexOf(draw.path[p].obj[o].type) > -1) {
							draw.path[p].obj[o].color = str;
						}
					}
				}
				draw.color = str;
				draw.drawStyleCanvas.lineColor = str;
				drawCanvasPaths();
				redrawButtons();
				draw.drawStyleCanvas.draw();				
			}
		}
		drawStyleCanvas.fillColorInput = createMathsInput2({left:left+200-110,top:top+175+4*22.5,width:100,height:20,border:true,fontSize:18,transparent:true,backColor:'#FFC',selectColor:'#FFC',zIndex:zIndex+1001001,visible:false});
		drawStyleCanvas.fillColorInput.onInputEnd = function() {
			var str = replaceAll(this.stringJS,'*','');
			var re = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$");
			if (str == 'none' || re.test(str) == true) {
				for (var s = 0; s < draw.drawStyleCanvas.selected.length; s++) {
					var p = draw.drawStyleCanvas.selected[s];
					for (var o = 0; o < draw.path[p].obj.length; o++) {
						if (['pen','line','circle','ellipse','rect','square','arc','curve','curve2','polygon','button','text'].indexOf(draw.path[p].obj[o].type) > -1) {
							draw.path[p].obj[o].fillColor = str;
						}
					}
				}
				draw.fillColor = str;
				draw.drawStyleCanvas.fillColor = str;
				drawCanvasPaths();
				redrawButtons();
				draw.drawStyleCanvas.draw();				
			}		
		}*/
		drawStyleCanvas.cursorPos = [];
		drawStyleCanvas.cursorIndex = -1;
		drawStyleCanvas.left = left;
		drawStyleCanvas.top = top;
		drawStyleCanvas.draw = function() {
			//setMathsInputText(draw.drawStyleCanvas.lineColorInput,draw.color);
			//setMathsInputText(draw.drawStyleCanvas.fillColorInput,draw.fillColor);
			
			var ctx = this.ctx;
			roundedRect(ctx,3,3,this.data[102]-6,this.data[103]-6,8,6,'#000','#FFC');
			this.cursorPos = [];
			
			var left = this.left;
			var top = this.top;
			var t = 20;
			//console.log(this.lineColor,this.lineWidth,this.lineDash,this.fillColor,this.radius);
			
			var rad = Math.min(this.radius,15);
			roundedRect(ctx,20,t,this.data[102]-40,30,rad,this.lineWidth,this.lineColor,this.lineDash);
			
			t += 40;
			text({context:ctx,textArray:['<<fontSize:18>>Line'],left:10,top:t,width:this.data[102]-20,height:50,textAlign:'left'});
			t += 30;
			roundedRect(ctx,10,t,22.5,22.5,0,2,'#000');
			roundedRect(ctx,210,t,22.5,22.5,0,2,'#000');
			ctx.beginPath();
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 2;
			ctx.moveTo(10,t);
			ctx.lineTo(32.5,t+22.5);
			ctx.moveTo(32.5,t);
			ctx.lineTo(10,t+22.5);
			ctx.moveTo(210,t);
			ctx.lineTo(232.5,t+22.5);
			ctx.moveTo(232.5,t);
			ctx.lineTo(210,t+22.5);			
			ctx.stroke();			
			for (var r = 0; r < this.lineColors.length; r++) {
				for (var c = 0; c < this.lineColors[r].length; c++) {
					this.cursorPos.push({rect:[left+10+22.5*c,top+90+22.5*r,22.5,22.5],cursor:'pointer',color:this.lineColors[r][c],type:'lineColor'});
					if (this.lineColors[r][c] == 'none') continue;
					roundedRect(ctx,10+22.5*c,90+22.5*r,22.5,22.5,0,2,'#000',this.lineColors[r][c]);
				}
			}
			
			var t = 90+4*22.5+15;
			text({context:ctx,textArray:['<<fontSize:30>>-'],left:10,top:t,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:35,top:t,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>width '+this.lineWidth],left:5,top:t+30,width:60,height:30,textAlign:'center'});
			this.cursorPos.push({rect:[left+10,top+t,25,25],cursor:'pointer',diff:-1,type:'lineWidth'});
			this.cursorPos.push({rect:[left+35,top+t,25,25],cursor:'pointer',diff:1,type:'lineWidth'});
			
			text({context:ctx,textArray:['<<fontSize:30>>-'],left:75,top:t,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:100,top:t,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>dash '+this.lineDash[0]],left:70,top:t+30,width:60,height:30,textAlign:'center'});
			this.cursorPos.push({rect:[left+75,top+t,25,25],cursor:'pointer',diff:-5,type:'lineDash'});
			this.cursorPos.push({rect:[left+100,top+t,25,25],cursor:'pointer',diff:5,type:'lineDash'});
			
			text({context:ctx,textArray:['<<fontSize:30>>-'],left:140,top:t,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:30>>+'],left:165,top:t,width:25,height:25,textAlign:'center',vertAlign:'middle',box:{color:'#FCF',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:16>>rad '+this.radius],left:135,top:t+30,width:60,height:30,textAlign:'center'});			
			this.cursorPos.push({rect:[left+140,top+t,25,25],cursor:'pointer',diff:-5,type:'radius'});
			this.cursorPos.push({rect:[left+165,top+t,25,25],cursor:'pointer',diff:5,type:'radius'});
			
			t += 60;
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 2;
			ctx.setLineDash([]);
			ctx.beginPath();
			ctx.moveTo(10,t);
			ctx.lineTo(this.data[102]-10,t);
			ctx.stroke();
			
			t += 10;
			text({context:ctx,textArray:['<<fontSize:18>>Fill'],left:10,top:t,width:this.data[102]-20,height:50,textAlign:'left'});
			
			t += 30;
			// draw color buttons
			roundedRect(ctx,10,t,22.5,22.5,0,2,'#000');
			roundedRect(ctx,210,t,22.5,22.5,0,2,'#000');
			ctx.beginPath();
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 2;
			ctx.moveTo(10,t);
			ctx.lineTo(32.5,t+22.5);
			ctx.moveTo(32.5,t);
			ctx.lineTo(10,t+22.5);
			ctx.moveTo(210,t);
			ctx.lineTo(232.5,t+22.5);
			ctx.moveTo(232.5,t);
			ctx.lineTo(210,t+22.5);			
			ctx.stroke();
			for (var r = 0; r < this.fillColors.length; r++) {
				for (var c = 0; c < this.fillColors[r].length; c++) {
					this.cursorPos.push({rect:[left+10+22.5*c,top+t+22.5*r,22.5,22.5],cursor:'pointer',color:this.fillColors[r][c],type:'fillColor'});
					if (this.fillColors[r][c] == 'none') continue;
					roundedRect(ctx,10+22.5*c,t+22.5*r,22.5,22.5,0,2,'#000',this.fillColors[r][c]);
				}
			}
		}
		drawStyleCanvas.move = function(e) {
			updateMouse(e);
			if (typeof this.cursorPos !== 'undefined') {
				for (var c = 0; c < this.cursorPos.length; c++) {
					var pos = this.cursorPos[c];
					if (mouseHitRect(pos.rect[0],pos.rect[1],pos.rect[2],pos.rect[3])) {
						this.style.cursor = pos.cursor;
						this.cursorIndex = c;
						return;
					}
				}
			}
			this.cursorIndex = -1;
			this.style.cursor = 'default';
		}
		drawStyleCanvas.click = function(e) {
			if (this.cursorIndex == -1) return;
			var pos = this.cursorPos[this.cursorIndex];
			switch (pos.type) {
				case 'lineColor':
					for (var s = 0; s < this.selected.length; s++) {
						var p = this.selected[s];
						for (var o = 0; o < draw.path[p].obj.length; o++) {
							var obj = draw.path[p].obj[o];
							if (!un(draw[obj.type]) && !un(draw[obj.type].setLineColor)) {
								draw[obj.type].setLineColor(obj,pos.color);
								continue;
							}
							if (['pen','line','circle','ellipse','rect','square','arc','curve','curve2','polygon','text','simpleGrid'].indexOf(obj.type) > -1) {
								obj.color = pos.color;
							}
							if (['angle'].indexOf(obj.type) > -1) {
								obj.lineColor = pos.color;
							}
							if (['table2'].indexOf(obj.type) > -1) {
								var selCount = draw.table2.countSelectedCells(obj);
								var cells = selCount == 0 ? draw.table2.getAllCells(obj) : draw.table2.getSelectedCells(obj);
								for (var c = 0; c < cells.length; c++) {
									var cell = cells[c];
									if (!un(cell.box)) {
										cell.box.borderColor = pos.color;
									} else {
										if (pos.color !== 'none') {
											cell.box = {
												color:'none',
												borderColor:pos.color,
												borderWidth:3,
												borderRadius:0,
												show:true
											}
										}
									}
								}
							}
						}
					}
					draw.color = pos.color;
					this.lineColor = pos.color;
					break;
				case 'fillColor':
					for (var s = 0; s < this.selected.length; s++) {
						var p = this.selected[s];
						for (var o = 0; o < draw.path[p].obj.length; o++) {
							var obj = draw.path[p].obj[o];
							if (!un(draw[obj.type]) && !un(draw[obj.type].setFillColor)) {
								draw[obj.type].setFillColor(obj,pos.color);
								continue;
							}
							if (['pen','line','circle','ellipse','rect','square','arc','curve','curve2','polygon','text','angle'].indexOf(obj.type) > -1) {
								obj.fillColor = pos.color;
							}
							if (['table2'].indexOf(obj.type) > -1) {
								var selCount = draw.table2.countSelectedCells(obj);
								var cells = selCount == 0 ? draw.table2.getAllCells(obj) : draw.table2.getSelectedCells(obj);
								for (var c = 0; c < cells.length; c++) {
									var cell = cells[c];
									if (!un(cell.box)) {
										cell.box.color = pos.color;
									} else {
										if (pos.color !== 'none') {
											cell.box = {
												color:pos.color,
												lineColor:'none',
												borderWidth:3,
												borderRadius:0,
												show:true
											}
										}
									}
								}
							}
						}
					}
					draw.fillColor = pos.color;
					this.fillColor = pos.color;
					break;
				case 'lineWidth':
					this.lineWidth += pos.diff;
					if (this.lineWidth < 1) this.lineWidth = 1;
					for (var s = 0; s < this.selected.length; s++) {
						var p = this.selected[s];
						for (var o = 0; o < draw.path[p].obj.length; o++) {
							var obj = draw.path[p].obj[o];
							if (!un(draw[obj.type]) && !un(draw[obj.type].setLineWidth)) {
								draw[obj.type].setLineWidth(obj,this.lineWidth);
								continue;
							}
							if (['pen','line','circle','ellipse','rect','square','arc','curve','curve2','polygon','button','text','anglesAroundPoint','simpleGrid'].indexOf(obj.type) > -1) {							
								obj.thickness = this.lineWidth;
							}
							if (['angle'].indexOf(obj.type) > -1) {
								obj.lineWidth = this.lineWidth;
							}
							if (['table2'].indexOf(obj.type) > -1) {
								var selCount = draw.table2.countSelectedCells(obj);
								var cells = selCount == 0 ? draw.table2.getAllCells(obj) : draw.table2.getSelectedCells(obj);
								for (var c = 0; c < cells.length; c++) {
									var cell = cells[c];
									if (!un(cell.box)) cell.box.borderWidth = this.lineWidth;
								}
							}
						}
					}
					draw.thickness = this.lineWidth;
					break;
				case 'lineDash':
					this.lineDash[0] += pos.diff;
					this.lineDash[1] += pos.diff;
					if (this.lineDash[0] < 0) this.lineDash[0] = 0;
					if (this.lineDash[1] < 0) this.lineDash[0] = 0;
					for (var s = 0; s < this.selected.length; s++) {
						var p = this.selected[s];
						for (var o = 0; o < draw.path[p].obj.length; o++) {
							var obj = draw.path[p].obj[o];
							if (!un(draw[obj.type]) && !un(draw[obj.type].setLineDash)) {
								draw[obj.type].setLineDash(obj,clone(this.lineDash));
							} else if (['pen','line','circle','ellipse','rect','square','arc','curve','curve2','polygon','button','text'].indexOf(obj.type) > -1) {
								obj.dash = clone(this.lineDash);
							} else if (['table2'].indexOf(obj.type) > -1) {
								var selCount = draw.table2.countSelectedCells(obj);
								var cells = selCount == 0 ? draw.table2.getAllCells(obj) : draw.table2.getSelectedCells(obj);
								for (var c = 0; c < cells.length; c++) {
									var cell = cells[c];
									if (!un(cell.box)) cell.box.dash = clone(this.lineDash);
								}
							}
						}
					}
					draw.dash = clone(this.lineDash);
					break;
				case 'radius':
					this.radius += pos.diff;
					if (this.radius < 0) this.radius = 0;					
					for (var s = 0; s < this.selected.length; s++) {
						var p = this.selected[s];
						for (var o = 0; o < draw.path[p].obj.length; o++) {
							var obj = draw.path[p].obj[o];
							if (!un(draw[obj.type]) && !un(draw[obj.type].setRadius)) {
								draw[obj.type].setRadius(obj,clone(this.radius));
								continue;
							}
							if (['text'].indexOf(obj.type) > -1) {
								obj.radius = clone(this.radius);
							}
							if (['table2'].indexOf(obj.type) > -1) {
								var selCount = draw.table2.countSelectedCells(obj);
								var cells = selCount == 0 ? draw.table2.getAllCells(obj) : draw.table2.getSelectedCells(obj);
								for (var c = 0; c < cells.length; c++) {
									var cell = cells[c];
									if (!un(cell.box)) {
										cell.box.radius = this.radius;
									} else {
										if (pos.color !== 'none') {
											cell.box = {
												fillColor:'none',
												lineColor:'#000',
												borderWidth:3,
												radius:this.radius,
												show:true
											}
										}
									}
								}
							}	
						}
					}
					draw.radius = clone(this.radius);
					break;
			}
			drawCanvasPaths();
			redrawButtons();
			this.draw();
		}
		drawStyleCanvas.close = function(e) {
			if (e.target == draw.drawStyleCanvas) return;
			if (e.target == draw.drawStyleCanvas.button) return;
			//if (e.target == draw.drawStyleCanvas.lineColorInput.cursorCanvas) return;
			//if (e.target == draw.drawStyleCanvas.fillColorInput.cursorCanvas) return;
			draw.drawStyleSelectVisible = false;
			changeDrawMode();
			redrawButtons();
			hideObj(draw.drawStyleCanvas,draw.drawStyleCanvas.data);
			//hideMathsInput(draw.drawStyleCanvas.lineColorInput);
			//hideMathsInput(draw.drawStyleCanvas.fillColorInput);
			removeListenerMove(draw.drawStyleCanvas,draw.drawStyleCanvas.move);
			removeListener(draw.drawStyleCanvas,draw.drawStyleCanvas.click);
			removeListener(window,draw.drawStyleCanvas.close);			
		}
	}
	if (typeof object.align == 'object') {
		var buttonPos = object.align.buttonPos || [1120,620];
		var button = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		button.type = 'align';
		button.draw = function() {
			var color = draw.buttonColor;
			if (draw.alignSelectVisible == true) color = draw.buttonSelectedColor;
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',color);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:14>><<align:center>>ALIGN']});			
		}
		button.click = function() {
			draw.alignSelectVisible = !draw.alignSelectVisible;
			if (draw.alignSelectVisible == true) {
				changeDrawMode('align');
				showObj(draw.alignCanvas,draw.alignCanvas.data);
				draw.alignCanvas.draw();
				addListenerMove(draw.alignCanvas,draw.alignCanvas.move);
				addListener(draw.alignCanvas,draw.alignCanvas.click);
				addListener(window,draw.alignCanvas.close);
			} else {
				changeDrawMode();
				hideObj(draw.alignCanvas,draw.alignCanvas.data);
				removeListenerMove(draw.alignCanvas,draw.alignCanvas.move);
				removeListener(draw.alignCanvas,draw.alignCanvas.click);
				removeListener(window,draw.alignCanvas.close);
			}			
		}
		draw.buttons.push(button);
		
		var left = buttonPos[0];
		var top = buttonPos[1]+53;
		var alignCanvas = createCanvas(left,top,170,170,false,false,true,zIndex+1001000);
		alignCanvas.isStaticMenuCanvas = true;	
		alignCanvas.selected = -1;
		alignCanvas.button = button;
		draw.alignCanvas = alignCanvas;
		draw.alignSelectVisible = false;
		
		alignCanvas.cursorPos = [];
		alignCanvas.cursorIndex = -1;
		alignCanvas.left = left;
		alignCanvas.top = top;
		alignCanvas.draw = function() {
			var ctx = this.ctx;
			roundedRect(ctx,3,3,this.data[102]-6,this.data[103]-6,8,6,'#000','#FFC');
			this.cursorPos = [];
			
			var left = this.left;
			var top = this.top;
			
			text({context:ctx,textArray:['<<fontSize:14>>Left'],left:10,top:10,width:50,height:50,textAlign:'center',vertAlign:'middle',box:{color:'#CFC',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:14>>Center'],left:60,top:10,width:50,height:50,textAlign:'center',vertAlign:'middle',box:{color:'#CFC',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:14>>Right'],left:110,top:10,width:50,height:50,textAlign:'center',vertAlign:'middle',box:{color:'#CFC',borderWidth:2}});
			
			text({context:ctx,textArray:['<<fontSize:14>>Top'],left:10,top:60,width:50,height:50,textAlign:'center',vertAlign:'middle',box:{color:'#CFC',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:14>>Middle'],left:60,top:60,width:50,height:50,textAlign:'center',vertAlign:'middle',box:{color:'#CFC',borderWidth:2}});
			text({context:ctx,textArray:['<<fontSize:14>>Bottom'],left:110,top:60,width:50,height:50,textAlign:'center',vertAlign:'middle',box:{color:'#CFC',borderWidth:2}});
			
			text({context:ctx,textArray:['<<fontSize:14>>to margin (left)'],left:10,top:110,width:150,height:50,textAlign:'center',vertAlign:'middle',box:{color:'#CFC',borderWidth:2}});
			
			this.cursorPos.push({rect:[left+10,top+10,50,50],cursor:'pointer',type:'left'});
			this.cursorPos.push({rect:[left+60,top+10,50,50],cursor:'pointer',type:'center'});
			this.cursorPos.push({rect:[left+110,top+10,50,50],cursor:'pointer',type:'right'});
			this.cursorPos.push({rect:[left+10,top+60,50,50],cursor:'pointer',type:'top'});
			this.cursorPos.push({rect:[left+60,top+60,50,50],cursor:'pointer',type:'middle'});
			this.cursorPos.push({rect:[left+110,top+60,50,50],cursor:'pointer',type:'bottom'});
			this.cursorPos.push({rect:[left+10,top+110,150,50],cursor:'pointer',type:'toMargin'});
		}
		alignCanvas.move = function(e) {
			updateMouse(e);
			if (typeof this.cursorPos !== 'undefined') {
				for (var c = 0; c < this.cursorPos.length; c++) {
					var pos =this.cursorPos[c];
					if (mouseHitRect(pos.rect[0],pos.rect[1],pos.rect[2],pos.rect[3])) {
						this.style.cursor = pos.cursor;
						this.cursorIndex = c;
						return;
					}
				}
			}			
			this.cursorIndex = -1;
			this.style.cursor = 'default';
		}
		alignCanvas.click = function(e) {
			if (this.cursorIndex == -1) return;
			var pos = this.cursorPos[this.cursorIndex];
			if (pos.type == 'toMargin') {
				snapToMargin();
			} else {
				alignPaths(pos.type);
			}
		}
		alignCanvas.close = function(e) {
			if (e.target == draw.alignCanvas) return;
			if (e.target == draw.alignCanvas.button) return;
			draw.alignSelectVisible = false;
			changeDrawMode();
			redrawButtons();
			hideObj(draw.alignCanvas,draw.alignCanvas.data);
			removeListenerMove(draw.alignCanvas,draw.alignCanvas.move);
			removeListener(draw.alignCanvas,draw.alignCanvas.click);
			removeListener(window,draw.alignCanvas.close);			
		}
	}	
	if (typeof object.save == 'object') {
		var buttonPos = object.save.buttonPos || [1120,620];
		var saveButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		saveButton.type = 'save';
		saveButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:16>><<align:center>>SAVE']});				
		}
		saveButton.click = function() {
			var filename = prompt("Please enter filename", "file");
			saveDrawPaths(filename);		
		}		
		draw.buttons.push(saveButton);
	}
	if (typeof object.load == 'object') {
		var buttonPos = object.load.buttonPos || [1120,620];
		var loadButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		loadButton.type = 'load';
		loadButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:16>><<align:center>>LOAD']});				
		}
		loadButton.click = function() {
			loadDrawPaths();			
		}		
		draw.buttons.push(loadButton);
	}
	if (typeof object.png == 'object') {
		var buttonPos = object.png.buttonPos || [1120,620];
		var pngButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		pngButton.type = 'png';
		pngButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:20>><<align:center>>PNG']});			
		}
		pngButton.click = function() {
			var filename = Number(prompt("Scale Factor", "2"));
			png(filename);			
		}		
		draw.buttons.push(pngButton);
	}
	if (typeof object.pdf == 'object') {
		var buttonPos = object.pdf.buttonPos || [1120,620];
		var pdfButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		pdfButton.type = 'pdf';
		pdfButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:20>><<align:center>>PDF']});			
		}
		pdfButton.click = function() {
			var filename = prompt("Please enter filename", "file");
			pdf(filename);			
		}		
		draw.buttons.push(pdfButton);
	}
	if (typeof object.js == 'object') {
		var buttonPos = object.js.buttonPos || [1120,620];
		var jsButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		jsButton.type = 'js';
		jsButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			text({context:this.ctx,left:0,width:55,top:15,textArray:['<<font:Arial>><<fontSize:20>><<align:center>>JS']});			
		}
		jsButton.click = function() {
			preview();			
		}		
		draw.buttons.push(jsButton);
	}
	if (typeof object.simpleGrid == 'object') {
		var buttonPos = object.simpleGrid.buttonPos || [1120,620];
		var simpleGridButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		simpleGridButton.type = 'simpleGrid';
		simpleGridButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			this.ctx.strokeStyle = '#000';
			this.ctx.lineWidth = 1;
			for (var i = 12.5; i <= 42.5; i += 10) {
				this.ctx.moveTo(i,12.5);
				this.ctx.lineTo(i,42.5);
				this.ctx.moveTo(12.5,i);
				this.ctx.lineTo(42.5,i);	
			}
			this.ctx.stroke();
		}
		simpleGridButton.click = function() {
			draw.simpleGrid.add(10,10,30);
		}		
		draw.buttons.push(simpleGridButton);
	}
	if (typeof object.dotGrid == 'object') {
		var buttonPos = object.dotGrid.buttonPos || [1120,620];
		var dotGridButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		dotGridButton.type = 'simpleGrid';
		dotGridButton.draw = function() {
			roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
			this.ctx.fillStyle = '#000';
			for (var i = 12.5; i <= 42.5; i += 10) {
				for (var j = 12.5; j <= 42.5; j += 10) {
					this.ctx.beginPath();
					this.ctx.arc(i,j,1.5,0,2*Math.PI);
					this.ctx.fill();
				}
			}
			this.ctx.stroke();
		}
		dotGridButton.click = function() {
			draw.simpleGrid.add(10,10,30,true);
		}		
		draw.buttons.push(dotGridButton);
	}	
	if (typeof object.backGrid == 'object') {
		var buttonPos = object.backGrid.buttonPos || [1120,620];
		var obj = {};
		obj.canvas = createCanvas(draw.drawArea[0],draw.drawArea[1],draw.drawArea[2],draw.drawArea[3],true,false,false,1);
		obj.menuButton = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
		obj.menuButton.draw = function() {
			var ctx = this.ctx;
			if (draw.backGrid.showMenu == false) {
				roundedRect(ctx,3,3,49,49,8,6,'#000','#C9F');
			} else {
				roundedRect(ctx,3,3,49,49,8,6,'#000','#FFC');		
			}
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 1;
			for (var i = 15; i < 41; i += 12.5) {
				ctx.moveTo(i,0);
				ctx.lineTo(i,55);
				ctx.moveTo(0,i);
				ctx.lineTo(55,i);	
			}
			ctx.stroke();			
		}
		
		obj.show = true;
		obj.snap = true;
		obj.showMenu = false;
		obj.size = 25.25;
		obj.menuCanvas = createCanvas(buttonPos[0]-169,buttonPos[1]+55,220,400,false,false,true,draw.drawButtonZIndex+1);
		roundedRect(obj.menuCanvas.ctx,3,3,214,394,8,6,'#000','#C9F');	
		obj.showButton = createCanvas(buttonPos[0]-134,buttonPos[1]+175,150,40,false,false,true,draw.drawButtonZIndex+1);
		obj.snapButton = createCanvas(buttonPos[0]-134,buttonPos[1]+220,150,40,false,false,true,draw.drawButtonZIndex+1);
		obj.slider = createSlider({id:0,left:buttonPos[0]-150,top:buttonPos[1]+75,width:200,height:50,linkedVar:'draw.backGrid.size',min:5,max:100,startNum:50,discrete:true,stepNum:5,visible:false,zIndex:draw.drawButtonZIndex+1,vari:'Grid Size',varChangeListener:'draw.backGrid.drawBackGrid'});
		drawTextBox(obj.showButton,obj.showButton.ctx,obj.showButton.data,'#6F9','#000',4,'20px Arial','#000','center','Grid On');
		drawTextBox(obj.snapButton,obj.snapButton.ctx,obj.snapButton.data,'#6F9','#000',4,'20px Arial','#000','center','Snapping On');
		
		obj.showHideBackGridMenu = function() {
			var obj = draw.backGrid;
			obj.showMenu = !obj.showMenu;
			if (obj.showMenu == true) {
				showObj(obj.menuCanvas,obj.menuCanvas.data);
				showObj(obj.showButton,obj.showButton.data);
				showObj(obj.snapButton,obj.snapButton.data);
				showSlider(obj.slider);
				for (var i = 0; i < obj.alignHorizVertButtons.length; i++) {
					obj.alignHorizVertButtons[i].highlight = false;
					obj.alignHorizVertButtons[i].draw();
					showObj(obj.alignHorizVertButtons[i],obj.alignHorizVertButtons[i].data);
				}
				addListener(window,draw.backGrid.hideBackGridMenu);
			} else {
				hideObj(obj.menuCanvas,obj.menuCanvas.data);
				hideObj(obj.showButton,obj.showButton.data);
				hideObj(obj.snapButton,obj.snapButton.data);
				hideSlider(obj.slider);
				for (var i = 0; i < obj.alignHorizVertButtons.length; i++) {
					hideObj(obj.alignHorizVertButtons[i],obj.alignHorizVertButtons[i].data);
				}
				removeListener(window,draw.backGrid.hideBackGridMenu);
			}
			obj.menuButton.draw();
		}
		obj.hideBackGridMenu = function(e) {
			var obj = draw.backGrid;
			if ([
				obj.menuButton,
				obj.menuCanvas,
				obj.showButton,
				obj.snapButton,
				obj.slider.backCanvas,
				obj.slider.sliderCanvas,
				obj.labelCanvas
			].indexOf(e.target) == -1 && obj.alignHorizVertButtons.indexOf(e.target) == -1) {
				obj.showMenu = false;
				hideObj(obj.menuCanvas,obj.menuCanvas.data);
				hideObj(obj.showButton,obj.showButton.data);
				hideObj(obj.snapButton,obj.snapButton.data);
				hideSlider(obj.slider);
				for (var i = 0; i < obj.alignHorizVertButtons.length; i++) {
					hideObj(obj.alignHorizVertButtons[i],obj.alignHorizVertButtons[i].data);
				}
				obj.menuButton.draw();
				removeListener(window,obj.hideBackGridMenu);
			}
		}		

		obj.showHideBackGrid = function() {
			var obj = draw.backGrid;
			obj.show = !obj.show;
			if (obj.show == true) { 
				drawTextBox(obj.showButton,obj.showButton.ctx,obj.showButton.data,'#6F9','#000',4,'20px Arial','#000','center','Grid On');
			} else {
				drawTextBox(obj.showButton,obj.showButton.ctx,obj.showButton.data,'#F00','#000',4,'20px Arial','#000','center','Grid Off');
			}
			obj.drawBackGrid();
		}
		obj.snapOnOff = function() {
			var obj = draw.backGrid;			
			obj.snap = !obj.snap;
			draw.gridSnap = obj.snap;
			if (obj.snap == true) { 
				drawTextBox(obj.snapButton,obj.snapButton.ctx,obj.snapButton.data,'#6F9','#000',4,'20px Arial','#000','center','Snapping On');
			} else {
				drawTextBox(obj.snapButton,obj.snapButton.ctx,obj.snapButton.data,'#F00','#000',4,'20px Arial','#000','center','Snapping Off');
			}
			obj.drawBackGrid();
		}		
		
		obj.drawBackGrid = function() {
			var ctx = draw.backGrid.canvas.ctx;
			var l = draw.gridSnapRect[0];
			var t = draw.gridSnapRect[1];
			var w = draw.gridSnapRect[2];
			var h = draw.gridSnapRect[3];
			ctx.clearRect(l,t,w,h);
			var marginSize = mainCanvasBorderWidth;
			var margin = [l+marginSize,l+w-marginSize,t+marginSize,t+h-marginSize];
			if (draw.backGrid.show == true) {
				/*var count = -1;
				for (var i = l; i <= l+w; i += draw.backGrid.size) {
					count++;					
					if (i <= margin[0] || i >= margin[1]) continue;
					if (count % 10 == 0) {
						ctx.strokeStyle = '#BBB';
						ctx.lineWidth = 1.5;
						ctx.setLineDash([]);
					} else if (count % 5 == 0) {
						ctx.strokeStyle = '#CCC';
						ctx.lineWidth = 1;
						ctx.setLineDash([]);
					} else {
						ctx.strokeStyle = '#CCC';
						ctx.lineWidth = 0.5;
						if (draw.backGrid.size >= 25) ctx.setLineDash([]);				
					}
					ctx.beginPath();
					ctx.moveTo(i,Math.max(margin[2],t));
					ctx.lineTo(i,Math.min(margin[3],t+h));
					ctx.stroke();
				}
				var count = -1;
				for (var i = t; i <= t+h; i += draw.backGrid.size) {
					count++;
					if (i <= margin[2] || i >= margin[3]) continue;
					if (count % 10 == 0) {
						ctx.strokeStyle = '#BBB';
						ctx.lineWidth = 1.5;
						ctx.setLineDash([]);
					} else if (count % 5 == 0) {
						ctx.strokeStyle = '#CCC';
						ctx.lineWidth = 1;
						ctx.setLineDash([]);
					} else {
						ctx.strokeStyle = '#CCC';
						ctx.lineWidth = 0.5;
						if (draw.backGrid.size >= 25) ctx.setLineDash([]);				
					}
					ctx.beginPath();
					ctx.moveTo(Math.max(margin[0],l),i);
					ctx.lineTo(Math.min(margin[1],l+w),i);
					ctx.stroke();
				}*/
				if (arraysEqual(draw.gridMargin,[0,0,0,0]) == false) {
					var m = draw.gridMargin;
					ctx.strokeStyle = '#F00';
					ctx.lineWidth = 2;
					ctx.setLineDash([]);
					ctx.strokeRect(m[0],m[1],draw.drawArea[2]-m[0]-m[2],draw.drawArea[3]-m[1]-m[3]);
				}
				for (var i = 0; i < draw.gridVertMargins.length; i++) {
					var m = draw.gridVertMargins[i];
					ctx.beginPath();
					ctx.strokeStyle = '#F00';
					ctx.lineWidth = 2;
					ctx.setLineDash([]);
					ctx.moveTo(m,draw.gridMargin[1]);
					ctx.lineTo(m,draw.drawArea[3]-draw.gridMargin[3]);
					ctx.stroke();
				}
				for (var i = 0; i < draw.gridHorizMargins.length; i++) {
					var m = draw.gridHorizMargins[i];
					ctx.beginPath();
					ctx.strokeStyle = '#F00';
					ctx.lineWidth = 2;
					ctx.setLineDash([]);
					ctx.moveTo(draw.gridMargin[0],m);
					ctx.lineTo(draw.drawArea[2]-draw.gridMargin[2],m);
					ctx.stroke();
				}
			}
			/*ctx.strokeStyle = '#000';
			ctx.lineWidth = 2;
			ctx.setLineDash([]);
			ctx.beginPath();
			ctx.moveTo(0,100);
			ctx.lineTo(1200,100);
			ctx.stroke();*/
			draw.gridSnapSize = draw.backGrid.size;
		}

		obj.menuCanvas.style.cursor = 'default';
		addListenerMove(obj.menuCanvas,function() {
			var obj = draw.backGrid;
			for (var i = 0; i < obj.alignHorizVertButtons.length; i++) {
				if (obj.alignHorizVertButtons[i].highlight == true) {
					obj.alignHorizVertButtons[i].highlight = false;
					obj.alignHorizVertButtons[i].draw();
				}
			}
		});
		obj.alignHorizVertButtonsMove = function(e) {
			var obj = draw.backGrid;
			for (var i = 0; i < obj.alignHorizVertButtons.length; i++) {
				if (obj.alignHorizVertButtons[i] == e.target) {
					obj.alignHorizVertButtons[i].highlight = true;
				} else {
					obj.alignHorizVertButtons[i].highlight = false;
				}
				obj.alignHorizVertButtons[i].draw();
			}
		}
		obj.alignHorizVertButtonsPress = function(e) {
			var obj = draw.backGrid;
			draw.vertSnap = e.target.vert;
			draw.horizSnap = e.target.horiz;
			for (var i = 0; i < obj.alignHorizVertButtons.length; i++) {
				obj.alignHorizVertButtons[i].draw();
			}
		}
		draw.backGrid = obj;
		obj.menuButton.draw();
		obj.drawBackGrid();
		addListener(draw.backGrid.menuButton,draw.backGrid.showHideBackGridMenu);
		addListener(draw.backGrid.showButton,draw.backGrid.showHideBackGrid);
		addListener(draw.backGrid.snapButton,draw.backGrid.snapOnOff);			
		obj.alignHorizVertButtons = [];
		for (var i = 0; i < 9; i++) {
			var button = createCanvas(buttonPos[0]-130+50*(i%3),buttonPos[1]+285+50*Math.floor(i/3),50,50,false,false,true,draw.drawButtonZIndex+1);
			button.x = 10+15*(i%3);
			button.y = 13+12*Math.floor(i/3);
			button.horiz = ['left','center','right'][i%3];
			button.vert = ['top','middle','bottom'][Math.floor(i/3)];
			button.highlight = false;
			button.draw = function() {
				var color = '#FFC';
				if (this.highlight == true) color = '#FCF';
				if (draw.vertSnap == this.vert && draw.horizSnap == this.horiz) color = '#F6F';
				roundedRect(this.ctx,1,1,48,48,0,2,'#000',color);
				roundedRect(this.ctx,10,13,30,24,0,1,'#000','#CCF');
				this.ctx.beginPath();
				this.ctx.strokeStyle = '#F00';
				this.ctx.lineWidth = 2;
				this.ctx.moveTo(this.x-5,this.y-5);
				this.ctx.lineTo(this.x+5,this.y+5);
				this.ctx.moveTo(this.x-5,this.y+5);
				this.ctx.lineTo(this.x+5,this.y-5);	
				this.ctx.stroke();
			}
			button.draw();
			
			addListenerMove(button,draw.backGrid.alignHorizVertButtonsMove);
			addListener(button,draw.backGrid.alignHorizVertButtonsPress);
			
			obj.alignHorizVertButtons.push(button);
		}
	}
	if (typeof object.backGrid2 == 'object') { // no button
		var obj = {};
		obj.canvas = createCanvas(draw.drawArea[0],draw.drawArea[1],draw.drawArea[2],draw.drawArea[3],true,false,false,1);
		obj.show = true;

		obj.showGrid = function() {
			var obj = draw.backGrid;
			obj.show = true;
			snapBordersOn = true;
			showObj(draw.backGrid.canvas);
			obj.drawBackGrid();
		}
		obj.hideGrid = function() {
			var obj = draw.backGrid;
			obj.show = false;
			snapBordersOn = false;
			hideObj(draw.backGrid.canvas);
			obj.drawBackGrid();
		}
		obj.drawBackGrid = function() {
			var ctx = draw.backGrid.canvas.ctx;
			var l = draw.gridSnapRect[0];
			var t = draw.gridSnapRect[1];
			var w = draw.gridSnapRect[2];
			var h = draw.gridSnapRect[3];
			ctx.clear();
			var marginSize = mainCanvasBorderWidth;
			var margin = [l+marginSize,l+w-marginSize,t+marginSize,t+h-marginSize];
			if (draw.backGrid.show == true) {
				if (arraysEqual(draw.gridMargin,[0,0,0,0]) == false) {
					var m = draw.gridMargin;
					ctx.strokeStyle = '#F00';
					ctx.lineWidth = 2;
					ctx.setLineDash([]);
					ctx.strokeRect(m[0],m[1],draw.drawArea[2]-m[0]-m[2],draw.drawArea[3]-m[1]-m[3]);
				}
				for (var i = 0; i < draw.gridVertMargins.length; i++) {
					var m = draw.gridVertMargins[i];
					ctx.beginPath();
					ctx.strokeStyle = '#F00';
					ctx.lineWidth = 2;
					ctx.setLineDash([]);
					ctx.moveTo(m,draw.gridMargin[1]);
					ctx.lineTo(m,draw.drawArea[3]-draw.gridMargin[3]);
					ctx.stroke();
				}
				for (var i = 0; i < draw.gridHorizMargins.length; i++) {
					var m = draw.gridHorizMargins[i];
					ctx.beginPath();
					ctx.strokeStyle = '#F00';
					ctx.lineWidth = 2;
					ctx.setLineDash([]);
					ctx.moveTo(draw.gridMargin[0],m);
					ctx.lineTo(draw.drawArea[2]-draw.gridMargin[2],m);
					ctx.stroke();
				}
			}
			draw.gridSnapSize = draw.backGrid.size;
		}
		draw.backGrid = obj;
		obj.drawBackGrid();
	}		
	for (var key in object) {
		if (['line','pen','polygon','rect','square'].includes(key)) continue;
		if (!un(draw[key]) && typeof draw[key].drawButton == 'function') {			
			var buttonPos = object[key].buttonPos || [1120,620];
			var button = createCanvas(buttonPos[0],buttonPos[1],55,55,true,false,true,draw.drawButtonZIndex);
			button.type = key;
			button.drawButton = draw[key].drawButton;
			button.draw = function() {
				roundedRect(this.ctx,3,3,49,49,8,6,'#000',draw.buttonColor);
				this.drawButton(this.ctx,draw.buttonSize);
			};
			button.click = draw[key].add;
			draw.buttons.push(button);			
		}
	}
	
	
	redrawButtons();
	draw.cursors.update();
	if (defaultMode == 'line') {
		setTimeout(function() {draw.cursorCanvas.style.cursor = draw.cursors.cross},1000);
	}
	
	for (var i = 0; i < draw.buttons.length; i++) {
		addListener(draw.buttons[i],drawButtonClick);
		draw.buttons[i].isStaticMenuCanvas = true;
	}
	addListenerMove(draw.cursorCanvas,drawCanvasMove);
	addListenerStart(draw.cursorCanvas,drawCanvasStart);
	if (drawMode == 'none') changeDrawMode();
	if (object.divMode === true) draw.divMode();
}
function addPen(side,color) {
	var l = 25;
	if (side == 'right') l = 1120;
	if (un(color)) color = '#F00';
	addDrawTools({
		pen:{buttonPos:[l,560]},
		undo:{buttonPos:[l,620]},
		buttonSize:50,
		thickness:5,
		color:color
	});	
}

function redrawButtons() {
	if (draw.drawMode == 'none') changeDrawMode();
	for (var i = 0; i < draw.buttons.length; i++) {
		draw.buttons[i].draw();				
	}
}
function drawButtonClick(e) {
	e.target.click();
	redrawButtons();
	drawToolsCanvas();	
	draw.cursors.update();
}
function addDrawCanvas() {
	var z = draw.zIndex + 2 * draw.drawCanvas.length;
	var canvas = createCanvas(draw.drawArea[0]+draw.drawRelPos[0],draw.drawArea[1]+draw.drawRelPos[1],draw.drawArea[2],draw.drawArea[3],false,false,false,z);
	if (!un(draw.div)) {
		canvas.setAttribute('class', 'drawDivCanvas');
		draw.div.children[0].appendChild(canvas);
	} else {
		showObj(canvas);
		resizeCanvas(canvas,draw.drawArea[0]+draw.drawRelPos[0],draw.drawArea[1]+draw.drawRelPos[1],draw.drawArea[2],draw.drawArea[3]);
	}
	draw.drawCanvas.push(canvas);
	draw.toolsCanvas.style.zIndex = z+2;
	draw.toolsCanvas.data[107] = z+2;
	//console.log('addDrawCanvas',canvas,draw.drawArea[0]+draw.drawRelPos[0],draw.drawArea[1]+draw.drawRelPos[1],draw.drawArea[2],draw.drawArea[3]);
	draw.cursorCanvas.style.zIndex = z+3;	
	draw.cursorCanvas.data[107] = z+3;
}
function changeDrawRelPos(newX,newY,includeHidden) {
	//console.log(newX,newY,arguments.callee.caller.name);
	var w = Math.max(draw.drawArea[2],draw.drawArea[2]*draw.scale);
	var h = Math.max(draw.drawArea[3],draw.drawArea[3]*draw.scale);
	var prevX = draw.drawRelPos[0];
	var prevY = draw.drawRelPos[1];
	draw.drawRelPos[0] = newX;
	draw.drawRelPos[1] = newY;
	var x = draw.drawArea[0] + draw.drawRelPos[0];
	var y = draw.drawArea[1] + draw.drawRelPos[1];
	for (var c = 0; c < draw.drawCanvas.length; c++) {
		if (includeHidden == false && draw.drawCanvas[c].parentNode == 'undefined') continue;
		if (includeHidden == false && draw.flattenMode == true && typeof draw.pathCanvas !== 'undefined' && draw.pathCanvas.indexOf(c) == -1 && c < draw.drawCanvas.length - 2) continue;
		draw.drawCanvas[c].data[100] = x;
		draw.drawCanvas[c].data[101] = y;
		draw.drawCanvas[c].data[102] = w;
		draw.drawCanvas[c].data[103] = h;
		resizeCanvas2(draw.drawCanvas[c],x,y,w,h);
	}
	if (!un(draw.cursorPosHighlight) && !un(draw.cursorPosHighlight.canvas)) {
		resizeCanvas2(draw.cursorPosHighlight.canvas,x,y);
	}
	if (includeHidden == true) {
		draw.cursorCanvas.data[100] = x;
		draw.cursorCanvas.data[101] = y;
		draw.cursorCanvas.data[102] = w;
		draw.cursorCanvas.data[103] = h;
		resizeCanvas2(draw.cursorCanvas,x,y,w,h);
	}
	draw.toolsCanvas.data[100] = x;
	draw.toolsCanvas.data[101] = y;
	draw.toolsCanvas.data[102] = w;
	draw.toolsCanvas.data[103] = h;
	resizeCanvas2(draw.toolsCanvas,x,y,w,h);
	draw.cursorCanvas.data[100] = x;
	draw.cursorCanvas.data[101] = y;
	draw.cursorCanvas.data[102] = w;
	draw.cursorCanvas.data[103] = h;
	resizeCanvas2(draw.cursorCanvas,x,y,w,h);
	
	if (typeof screenShade !== 'undefined') {
		screenShade.position();
	}
	
	if (typeof draw.backGrid !== 'undefined') {
		draw.backGrid.canvas.data[100] = x;
		draw.backGrid.canvas.data[101] = y;
		draw.backGrid.canvas.data[102] = w;
		draw.backGrid.canvas.data[103] = h;
		resizeCanvas2(draw.backGrid.canvas,x,y,w,h);		
	}
	
	for (var p = 0; p < draw.path.length; p++) {
		if (!un(draw.path[p]._canvas)) {
			var canvas = draw.path[p]._canvas;
			resizeCanvas3(canvas,canvas.drawPos+draw.drawRelPos[0],canvas.drawPos+draw.drawRelPos[1]);
		}
	}
	if (includeHidden == true) calcCursorPositions();
}
function changeDrawArea(drawArea,setDrawRelPos) {
	draw.drawArea = drawArea;
	//console.log(drawArea);
	var canvases = [draw.cursorCanvas,draw.toolsCanvas].concat(draw.drawCanvas);//.concat(draw.drawCanvas2);
	//console.log(canvases);
	for (var c = 0; c < canvases.length; c++) {
		canvases[c].width = drawArea[2];
		canvases[c].height = drawArea[3];
		canvases[c].data[100] = drawArea[0];
		canvases[c].data[101] = drawArea[1];
		canvases[c].data[102] = drawArea[2];
		canvases[c].data[103] = drawArea[3];
		resizeCanvas3(canvases[c]);
	}
	if (boolean(setDrawRelPos,true) == true) changeDrawRelPos(0,0);
}
function changeDrawMode(mode,altMode) {
	if (typeof mode === 'undefined') mode = draw.defaultMode;
	if (typeof altMode === 'undefined') altMode = draw.defaultMode;
	if (mode === draw.drawMode) mode = altMode;
	if (mode === 'prev') mode = draw.prevDrawMode || draw.defaultMode;
	draw.prevDrawMode = draw.drawMode;
	draw.drawMode = mode;
	if (mode === 'select' || mode == 'none') {
		if (draw.retainCursorCanvas == true) {
			draw.cursorCanvas.style.pointerEvents = 'auto';
		} else {
			draw.cursorCanvas.style.pointerEvents = 'none';
		}
	} else {
		draw.cursorCanvas.style.pointerEvents = 'auto';
	}
	if (['line','rect','square','circle','ellipse','polygon'].includes(mode)) {
		draw.cursors.update();
		draw.cursorCanvas.style.cursor = 'url('+draw.lineCursor+') '+draw.lineCursorHotspot[0]+' '+draw.lineCursorHotspot[1]+', auto';
	}
	//console.log('-',mode);
	calcCursorPositions();
}

function colorSelectClose(e) {
	if (e.target.type !== 'colorSelect') {
		draw.colorSelectVisible = false;
		for (var i = 0; i < draw.colorButtons.length; i++) {
			hideObj(draw.colorButtons[i],draw.colorButtons[i].data)
		}
		for (var i = 0; i < container.childNodes.length; i++) {
			if (draw.colorButtons.indexOf(container.childNodes[i]) == -1) {
				removeListenerStart(container.childNodes[i],colorSelectClose);
			}
		}	
		redrawButtons();
	}
}
function fillColorSelectClose(e) {
	if (e.target.type !== 'fillColorSelect') {
		draw.fillColorSelectVisible = false;
		for (var i = 0; i < draw.fillColorButtons.length; i++) {
			hideObj(draw.fillColorButtons[i],draw.fillColorButtons[i].data)
		}
		for (var i = 0; i < container.childNodes.length; i++) {
			if (draw.fillColorButtons.indexOf(container.childNodes[i]) == -1) {
				removeListenerStart(container.childNodes[i],fillColorSelectClose);
			}
		}	
		redrawButtons();
	}
}
function redrawThicknessButtons() {
	for (var i = 1; i < draw.thicknessButtons.length; i++) {
		var button = draw.thicknessButtons[i];
		button.ctx.clearRect(0,0,100,50);
		button.ctx.lineCap = 'round';
		button.ctx.lineJoin = 'round';
		button.ctx.lineWidth = 4;
	
		button.ctx.strokeStyle = '#000';
		button.ctx.fillStyle = '#FFC';
		if (button.thickness == draw.thickness) button.ctx.fillStyle = '#CFF';
		button.ctx.fillRect(0,0,100,50);
		button.ctx.strokeRect(0,0,100,50);
		
		button.ctx.beginPath();
		button.ctx.lineWidth = button.thickness;
		button.ctx.moveTo(20,25);
		button.ctx.lineTo(80,25);
		button.ctx.stroke();
	}
}
function thicknessSelectClose(e) {
	if (e.target.type !== 'thicknessSelect') {
		draw.thicknessSelectVisible = false;
		for (var i = 0; i < draw.thicknessButtons.length; i++) {
			hideObj(draw.thicknessButtons[i],draw.thicknessButtons[i].data)
		}
		for (var i = 0; i < container.childNodes.length; i++) {
			if (draw.thicknessButtons.indexOf(container.childNodes[i]) == -1) {
				removeListenerStart(container.childNodes[i],thicknessSelectClose);
			}
		}	
		redrawButtons();
	}
}
function lineEndsClose(e) {
	if (e.target.type !== 'lineEnds') {
		draw.lineEndsVisible = false;
		for (var i = 0; i < draw.lineEndStartButtons.length; i++) {
			hideObj(draw.lineEndStartButtons[i],draw.lineEndStartButtons[i].data)
		}
		for (var i = 0; i < draw.lineEndMidButtons.length; i++) {
			hideObj(draw.lineEndMidButtons[i],draw.lineEndMidButtons[i].data)
		}
		for (var i = 0; i < draw.lineEndFinButtons.length; i++) {
			hideObj(draw.lineEndFinButtons[i],draw.lineEndFinButtons[i].data)
		}
		for (var i = 0; i < draw.lineEndSizeButtons.length; i++) {
			hideObj(draw.lineEndSizeButtons[i],draw.lineEndSizeButtons[i].data)
		}		
		
		for (var i = 0; i < container.childNodes.length; i++) {
			if (draw.lineEndStartButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndMidButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndFinButtons.indexOf(container.childNodes[i]) == -1 && draw.lineEndSizeButtons.indexOf(container.childNodes[i]) == -1) {
				removeListenerStart(container.childNodes[i],lineEndsClose);
			}
		}
		redrawButtons();
	}
}
function tableMenuClose() {
	changeDrawMode();
	draw.tableSizeVisible = false;
	hideObj(draw.tableSizeCanvas,draw.tableSizeCanvas.data);
	if (!un(draw.tableRowColCanvas)) {
		draw.tableRowColCanvas.selected = -1;
		draw.tableRowColCanvas.draw();	
	}
	if (!un(draw.tableRowColCanvas)) hideObj(draw.tableRowColCanvas,draw.tableRowColCanvas.data);
	if (!un(draw.tableBordersCanvas)) hideObj(draw.tableBordersCanvas,draw.tableBordersCanvas.data);
	if (!un(draw.tableCellColorCanvas)) hideObj(draw.tableCellColorCanvas,draw.tableCellColorCanvas.data);
	if (!un(draw.tbLayoutSizeCanvas)) {
		draw.tbLayoutSizeVisible = false;
		hideObj(draw.tbLayoutSizeCanvas);
	}
	if (!un(draw.tbLayoutQSizeCanvas)) {
		draw.tbLayoutQSizeVisible = false;
		hideObj(draw.tbLayoutQSizeCanvas);
	}	
}
function tableCellsSelectionTest() {
	if (typeof draw == 'object') {
		for (var i = 0; i < draw.path.length; i++) {
			if (draw.path[i].selected == true) {
				for (var j = 0; j < draw.path[i].obj.length; j++) {
					if (draw.path[i].obj[j].type == 'table' || draw.path[i].obj[j].type == 'table2') {
						var cells = draw.path[i].obj[j].cells;
						for (var r = 0; r < cells.length; r++) {
							for (var c = 0; c < cells[r].length; c++) {
								if (cells[r][c].selected == true && cells[r][c].highlight == true) {
									return true;
								}
							}
						}
					}
				}
			}
		}
	}
	return false;
}

function isPosOverTool(x,y) {
	for (var i = 0; i < draw.toolOrder.length; i++) {
		if (draw.toolOrder[i] == 'protractor' && draw.protractorVisible == true) {
			var center = draw.protractor.center;
			var rad = draw.protractor.radius;	
			var angle = draw.protractor.angle;
			var mouseAngle = measureAngle({a:[x,y],b:[center[0],center[1]],c:[center[0]+rad*Math.cos(angle),center[1]+rad*Math.sin(angle)]});
			
			if (dist(x,y,center[0],center[1]) <= rad && mouseAngle >= 0 && mouseAngle <= Math.PI) {
				draw.protractor.prevX = x;
				draw.protractor.prevY = y;
				draw.protractor.relSelPoint = vectorFromAToB(draw.protractor.center,[x,y]);
				if (dist(x,y,center[0]+rad*Math.cos(angle),center[1]+rad*Math.sin(angle)) <= 0.5* rad || dist(x,y,center[0]-rad*Math.cos(angle),center[1]-rad*Math.sin(angle)) <= 0.5 * rad) {
					return {cursor:draw.cursors.rotate,func:drawClickProtractorStartRotate};
				} else {
					return {cursor:draw.cursors.move1,func:drawClickProtractorStartMove};				
				}
			}
		}
	
		if (draw.toolOrder[i] == 'ruler' && draw.rulerVisible == true) {
			if (hitTestPolygon([x,y],draw.ruler.verticesArray1) == true) {
				draw.ruler.prevX = x;
				draw.ruler.prevY = y;
				if (hitTestPolygon([x,y],draw.ruler.verticesArray2) == true) {
					return {cursor:draw.cursors.rotate,func:drawClickRulerStartRotate1};
				} else if (hitTestPolygon([x,y],draw.ruler.verticesArray3) == true) {
					return {cursor:draw.cursors.rotate,func:drawClickRulerStartRotate2};
				} else if (draw.ruler.markings == true && dist(draw.ruler.center[0],draw.ruler.center[1],x,y) < 25) {
					return {cursor:draw.cursors.ruler180,func:drawClickRulerRotate180};
				} else {
					return {cursor:draw.cursors.move1,func:drawClickRulerStartMove};		
				}
			}
			if (hitTestPolygon([x,y],draw.ruler.verticesArray4) == true) {
				var startPos = closestPointOnLine([x,y],draw.ruler.edgePos1,draw.ruler.edgePos2)
				draw.startX = startPos[0];
				draw.startY = startPos[1];			
				return {cursor:draw.cursors.rulerPen1,func:drawClickRulerStartDraw1};
			}
			if (hitTestPolygon([x,y],draw.ruler.verticesArray5) == true) {
				var startPos = closestPointOnLine([x,y],draw.ruler.edgePos3,draw.ruler.edgePos4)
				draw.startX = startPos[0];
				draw.startY = startPos[1];			
				return {cursor:draw.cursors.rulerPen2,func:drawClickRulerStartDraw2};
			}		
		}
		
		if (draw.toolOrder[i] == 'compass' && draw.compassVisible == true) {
			var center1 = draw.compass.center1;
			var center2 = draw.compass.center2;
			var center3 = draw.compass.center3;
			var lockCenter = draw.compass.lockCenter;
			var rad = draw.compass.radius;	
			var angle = draw.compass.angle;
		
			if (dist(x,y,lockCenter[0],lockCenter[1]) <= 30) {
				return {cursor:draw.cursors.pointer,func:drawClickCompassLock};
			} else if (dist(x,y,center2[0],center2[1]) <= 40 || hitTestPolygon([x,y],draw.compass.topPolygon) == true) {
				draw.compass.prevX = x;
				draw.compass.prevY = y;
				return {cursor:'url("/i/cursors/rotate.cur") 12 12, auto',func:drawClickCompassStartDraw};
			} else if (dist(x,y,center1[0],center1[1]) <= 30 || distancePointToLineSegment([x,y],draw.compass.center1,draw.compass.center2) <= 20) {
				draw.compass.prevX = x;
				draw.compass.prevY = y;
				// store positions relative to center1
				draw.compass.relSelPoint = vectorFromAToB(draw.compass.center1,[x,y]);
				draw.compass.relCenter2 = vectorFromAToB(draw.compass.center1,draw.compass.center2);
				draw.compass.relCenter3 = vectorFromAToB(draw.compass.center1,draw.compass.center3);
				draw.compass.relLockCenter = vectorFromAToB(draw.compass.center1,draw.compass.lockCenter);
				return {cursor:draw.cursors.move1,func:drawClickCompassStartMove1};
			} else if (dist(x,y,center3[0],center3[1]) <= 30 || distancePointToLineSegment([x,y],draw.compass.center3,draw.compass.center2) <= 20 || hitTestPolygon([x,y],draw.compass.pencilPolygon) == true) {			
				draw.compass.prevX = x;
				draw.compass.prevY = y;
				return {cursor:draw.cursors.move1,func:drawClickCompassStartMove2};
			}
		}
	}
	return false;
}
function resetDrawTools(restoreStartPaths) {
	if (typeof draw == 'undefined') return;
	if (boolean(restoreStartPaths,true) == true) draw.path = draw.startPath.slice();
	draw.color = draw.startColor;
	draw.thickness = draw.startThickness;
	draw.fillColor = draw.startFillColor;
	changeDrawMode(draw.startDrawMode);
	draw.prevDrawMode = 'none';
	draw.protractorVisible = false;
	draw.compassVisible = false;
	draw.rulerVisible = false;			
	draw.colorSelectVisible = false;
	draw.thicknessSelectVisible = false;
	draw.compassHelpSelectVisible = false;
	if (typeof draw.compassHelpBox !== 'undefined') hideObj(draw.compassHelpBox,draw.compassHelpBox.data);
	for (var i = 0; i < draw.colorButtons.length; i++) {
		hideObj(draw.colorButtons[i],draw.colorButtons[i].data)
	}
	for (var i = 0; i < draw.thicknessButtons.length; i++) {
		hideObj(draw.thicknessButtons[i],draw.thicknessButtons[i].data)
	}	
	for (var i = 0; i < container.childNodes.length; i++) {
		removeListenerStart(container.childNodes[i],colorSelectClose);
		removeListenerStart(container.childNodes[i],thicknessSelectClose);
		removeListenerStart(container.childNodes[i],fillColorSelectClose);
	}
	if (typeof draw.protractor !== 'undefined') {
		draw.protractor.center = draw.protractor.startCenter.slice(0);
		draw.protractor.angle = 0;
	}
	if (typeof draw.ruler !== 'undefined') {	
		draw.ruler.left = draw.ruler.startLeft;
		draw.ruler.top = draw.ruler.startTop;
		draw.ruler.angle = 0;
		recalcRulerValues();
	}
	if (typeof draw.compass !== 'undefined') {
		draw.compass.center1 = draw.compass.startCenter1.slice(0);
		draw.compass.center2 = draw.compass.startCenter2.slice(0);
		draw.compass.center3 = draw.compass.startCenter3.slice(0);		
		draw.compass.h = draw.compass.startH;
		draw.compass.angle = draw.compass.startAngle;
		draw.compass.radius = draw.compass.startRadius;
		draw.compass.radiusLocked = false;
		draw.compass.drawOn = draw.compass.startDrawOn;
		var mp1 = midpoint(draw.compass.center1[0],draw.compass.center1[1],draw.compass.center3[0],draw.compass.center3[1]);
		var mp2 = midpoint(draw.compass.center2[0],draw.compass.center2[1],mp1[0],mp1[1]);
		draw.compass.lockCenter = mp2.slice(0);
		recalcCompassValues();			
	}
	redrawButtons();
	draw.cursors.update();
	drawToolsCanvas();
	drawCanvasPaths();
}
function moveToolToFront(tool) {
	var index = draw.toolOrder.indexOf(tool);
	draw.toolOrder.splice(index,1);
	draw.toolOrder.unshift(tool);
}
function drawToolsCanvas() {
	draw.toolsctx.clear();
	draw.toolsctx.scale(draw.scale,draw.scale);
	for (var i = draw.toolOrder.length; i >= 0; i--) {
		if (draw.toolOrder[i] == 'protractor' && draw.protractorVisible == true) drawProtractor();
		if (draw.toolOrder[i] == 'ruler' && draw.rulerVisible == true) drawRuler();	
		if (draw.toolOrder[i] == 'compass' && draw.compassVisible == true) drawCompass();
		draw.cursors.update();
	}
	draw.toolsctx.setTransform(1, 0, 0, 1, 0, 0);
}
function recalcRulerValues() {
	if (typeof draw.ruler == 'undefined') return;
	var left = draw.ruler.left;
	var top = draw.ruler.top;
	var length = draw.ruler.length;
	var width = draw.ruler.width;
	var angle = draw.ruler.angle;
	draw.ruler.centerX1 = left+0.02*length*Math.cos(angle);
	draw.ruler.centerY1 = top+0.02*length*Math.sin(angle);	
	draw.ruler.centerX2 = left+0.98*length*Math.cos(angle);
	draw.ruler.centerY2 = top+0.98*length*Math.sin(angle);	
	draw.ruler.verticesArray1 = [
		[left,top],
		[left+length*Math.cos(angle),top+length*Math.sin(angle)],
		[left+length*Math.cos(angle)-width*Math.sin(angle),top+length*Math.sin(angle)+width*Math.cos(angle)],
		[left-width*Math.sin(angle),top+width*Math.cos(angle)]
	];
	draw.ruler.verticesArray2 = [
		[left,top],
		[left+0.1*length*Math.cos(angle),top+0.1*length*Math.sin(angle)],
		[left-width*Math.sin(angle)+0.1*length*Math.cos(angle),top+width*Math.cos(angle)+0.1*length*Math.sin(angle)],
		[left-width*Math.sin(angle),top+width*Math.cos(angle)]
	];
	draw.ruler.verticesArray3 = [
		[left+length*Math.cos(angle)-0.1*length*Math.cos(angle),top+length*Math.sin(angle)-0.1*length*Math.sin(angle)],
		[left+length*Math.cos(angle),top+length*Math.sin(angle)],
		[left+length*Math.cos(angle)-width*Math.sin(angle),top+length*Math.sin(angle)+width*Math.cos(angle)],
		[left+length*Math.cos(angle)-width*Math.sin(angle)-0.1*length*Math.cos(angle),top+length*Math.sin(angle)+width*Math.cos(angle)-0.1*length*Math.sin(angle)]
	];
	draw.ruler.center = [
		left+0.5*length*Math.cos(angle)-0.5*width*Math.sin(angle),
		top+0.5*length*Math.sin(angle)+0.5*width*Math.cos(angle)
	];
	draw.ruler.centerRel = [
		0.5*length*Math.cos(angle)-0.5*width*Math.sin(angle),
		0.5*length*Math.sin(angle)+0.5*width*Math.cos(angle)
	];
	
	draw.ruler.verticesArray4 = [
		[left+40*Math.sin(angle),top-40*Math.cos(angle)],
		[left+length*Math.cos(angle)+40*Math.sin(angle),top+length*Math.sin(angle)-40*Math.cos(angle)],
		[left+length*Math.cos(angle),top+length*Math.sin(angle)],
		[left,top]
	];
	if (draw.ruler.markings == true) {
		draw.ruler.edgePos1 = [
			left+0.02*length*Math.cos(angle)+(0.5*draw.thickness+2)*Math.sin(angle),
			top+0.02*length*Math.sin(angle)-(0.5*draw.thickness+2)*Math.cos(angle)
		];
		draw.ruler.edgePos2 = [
			left+0.98*length*Math.cos(angle)+(0.5*draw.thickness+2)*Math.sin(angle),
			top+0.98*length*Math.sin(angle)-(0.5*draw.thickness+2)*Math.cos(angle)
		];
	} else {
		draw.ruler.edgePos1 = [
			left+(0.5*draw.thickness+2)*Math.sin(angle),
			top-(0.5*draw.thickness+2)*Math.cos(angle)
		];
		draw.ruler.edgePos2 = [
			left+length*Math.cos(angle)+(0.5*draw.thickness+2)*Math.sin(angle),
			top+length*Math.sin(angle)-(0.5*draw.thickness+2)*Math.cos(angle)
		];
	}
	
	draw.ruler.verticesArray5 = [
		[left-width*Math.sin(angle)-40*Math.sin(angle),top+width*Math.cos(angle)+40*Math.cos(angle)],
		[left+length*Math.cos(angle)-width*Math.sin(angle)-40*Math.sin(angle),top+length*Math.sin(angle)+width*Math.cos(angle)+40*Math.cos(angle)],
		[left+length*Math.cos(angle)-width*Math.sin(angle),top+length*Math.sin(angle)+width*Math.cos(angle)],
		[left-width*Math.sin(angle),top+width*Math.cos(angle)],
	];
	draw.ruler.edgePos3 = [
		left-width*Math.sin(angle)-(0.5*draw.thickness+2)*Math.sin(angle),
		top+width*Math.cos(angle)+(0.5*draw.thickness+2)*Math.cos(angle)
	];
	draw.ruler.edgePos4 = [
		left+length*Math.cos(angle)-width*Math.sin(angle)-(0.5*draw.thickness+2)*Math.sin(angle),
		top+length*Math.sin(angle)+width*Math.cos(angle)+(0.5*draw.thickness+2)*Math.cos(angle)
	];	
	var cursor = draw.hiddenCanvas;
	var ctx = draw.hiddenCanvas.ctx;
	
	ctx.clearRect(0,0,50,50);
	ctx.translate(25,25);
	ctx.rotate(draw.ruler.angle);
		ctx.fillStyle = draw.color;
		ctx.fillRect(-5,-11,10,20);
		ctx.fillRect(-5,-18,10,5);
		ctx.beginPath();
		ctx.moveTo(-5,11);
		ctx.lineTo(0,18);
		ctx.lineTo(5,11);
		ctx.lineTo(-5,11);
		ctx.fill();		
	ctx.rotate(-draw.ruler.angle);	
	ctx.translate(-25,-25);

	draw.rulerEdgeCursor1 = cursor.toDataURL();
	draw.rulerEdgeCursorHotspot1 = [25-18*Math.sin(draw.ruler.angle),25+18*Math.cos(draw.ruler.angle)];
	
	ctx.clearRect(0,0,50,50);
	ctx.translate(25,25);
	ctx.rotate(Math.PI+draw.ruler.angle);
		ctx.fillStyle = draw.color;
		ctx.fillRect(-5,-11,10,20);
		ctx.fillRect(-5,-18,10,5);
		ctx.beginPath();
		ctx.moveTo(-5,11);
		ctx.lineTo(0,18);
		ctx.lineTo(5,11);
		ctx.lineTo(-5,11);
		ctx.fill();		
	ctx.rotate(-Math.PI-draw.ruler.angle);	
	ctx.translate(-25,-25);

	draw.rulerEdgeCursor2 = cursor.toDataURL();
	draw.rulerEdgeCursorHotspot2 = [25-18*Math.sin(Math.PI+draw.ruler.angle),25+18*Math.cos(Math.PI+draw.ruler.angle)];		
}
function recalcCompassValues() {
	var center1 = draw.compass.center1;
	var center2 = draw.compass.center2;
	var center3 = draw.compass.center3;								
	var rad = draw.compass.radius;	
	var angle = draw.compass.angle;

	var angle2 = Math.atan((0.5*draw.compass.radius)/draw.compass.h);
	
	/*
	// pointy arm
	if (center2[0] > center1[0]) {
		var pointPolygon = [
			[center2[0]+20*Math.cos(angle-angle2),center2[1]-20*Math.sin(angle-angle2)],
			[center2[0]-20*Math.cos(angle-angle2),center2[1]+20*Math.sin(angle-angle2)],
			[center1[0]-20*Math.cos(angle-angle2),center1[1]+20*Math.sin(angle-angle2)],
			[center1[0]+20*Math.cos(angle-angle2),center1[1]-20*Math.sin(angle-angle2)]
		];
	} else {
		var pointPolygon = [
			[center2[0]+20*Math.cos(Math.PI-angle-angle2),center2[1]-20*Math.sin(Math.PI-angle-angle2)],
			[center2[0]-20*Math.cos(Math.PI-angle-angle2),center2[1]+20*Math.sin(Math.PI-angle-angle2)],
			[center1[0]-20*Math.cos(Math.PI-angle-angle2),center1[1]+20*Math.sin(Math.PI-angle-angle2)],
			[center1[0]+20*Math.cos(Math.PI-angle-angle2),center1[1]-20*Math.sin(Math.PI-angle-angle2)]
		];
	}
	
	draw.toolsctx.fillStyle = '#F0F';
	draw.toolsctx.beginPath();
	draw.toolsctx.moveTo(pointPolygon[0][0],pointPolygon[0][1]);
	draw.toolsctx.lineTo(pointPolygon[1][0],pointPolygon[1][1]);
	draw.toolsctx.lineTo(pointPolygon[2][0],pointPolygon[2][1]);
	draw.toolsctx.lineTo(pointPolygon[3][0],pointPolygon[3][1]);
	draw.toolsctx.lineTo(pointPolygon[0][0],pointPolygon[0][1]);			
	draw.toolsctx.fill();
	
	var pencilArmPolygon = [
		[center2[0]+20*Math.cos(angle2-angle),center2[1]-20*Math.sin(angle2-angle)],
		[center2[0]-20*Math.cos(angle2-angle),center2[1]+20*Math.sin(angle2-angle)],
		[center3[0]-20*Math.cos(angle2-angle),center3[1]+20*Math.sin(angle2-angle)],
		[center3[0]+20*Math.cos(angle2-angle),center3[1]-20*Math.sin(angle2-angle)]
	];
	
	draw.toolsctx.fillStyle = '#FF0';
	draw.toolsctx.beginPath();
	draw.toolsctx.moveTo(pencilArmPolygon[0][0],pencilArmPolygon[0][1]);
	draw.toolsctx.lineTo(pencilArmPolygon[1][0],pencilArmPolygon[1][1]);
	draw.toolsctx.lineTo(pencilArmPolygon[2][0],pencilArmPolygon[2][1]);
	draw.toolsctx.lineTo(pencilArmPolygon[3][0],pencilArmPolygon[3][1]);
	draw.toolsctx.lineTo(pencilArmPolygon[0][0],pencilArmPolygon[0][1]);			
	draw.toolsctx.fill();
	*/
	
	if (draw.compass.drawOn == 'right') {
		var angle3 = angle2-angle-Math.PI/14;
		var center4 = [center3[0]-200*Math.sin(angle3),center3[1]-200*Math.cos(angle3)];
	} else {
		var angle3 = -(angle2+angle-Math.PI/14);
		var center4 = [center3[0]+200*Math.sin(angle3),center3[1]+200*Math.cos(angle3)];					
	}

	var pencilPolygon = [
		[center4[0]+20*Math.cos(angle3),center4[1]-20*Math.sin(angle3)],
		[center4[0]-20*Math.cos(angle3),center4[1]+20*Math.sin(angle3)],
		[center3[0]-20*Math.cos(angle3),center3[1]+20*Math.sin(angle3)],
		[center3[0]+20*Math.cos(angle3),center3[1]-20*Math.sin(angle3)]
	];
	
	/*
	draw.toolsctx.fillStyle = '#FF0';
	draw.toolsctx.beginPath();
	draw.toolsctx.moveTo(pencilPolygon[0][0],pencilPolygon[0][1]);
	draw.toolsctx.lineTo(pencilPolygon[1][0],pencilPolygon[1][1]);
	draw.toolsctx.lineTo(pencilPolygon[2][0],pencilPolygon[2][1]);
	draw.toolsctx.lineTo(pencilPolygon[3][0],pencilPolygon[3][1]);
	draw.toolsctx.lineTo(pencilPolygon[0][0],pencilPolygon[0][1]);			
	draw.toolsctx.fill();	
	*/
	
	if (draw.compass.drawOn == 'right') {
		var topPolygon = [
			[center2[0]-62*Math.sin(-angle)+10*Math.cos(angle),center2[1]-62*Math.cos(angle)-10*Math.sin(-angle)],
			[center2[0]-62*Math.sin(-angle)-10*Math.cos(angle),center2[1]-62*Math.cos(angle)+10*Math.sin(-angle)],
			[center2[0]-10*Math.cos(angle),center2[1]+10*Math.sin(-angle)],
			[center2[0]+10*Math.cos(angle),center2[1]-10*Math.sin(-angle)],
		];
	} else {
		var topPolygon = [
			[center2[0]+62*Math.sin(-angle)+10*Math.cos(angle),center2[1]+62*Math.cos(angle)-10*Math.sin(-angle)],
			[center2[0]+62*Math.sin(-angle)-10*Math.cos(angle),center2[1]+62*Math.cos(angle)+10*Math.sin(-angle)],
			[center2[0]-10*Math.cos(angle),center2[1]+10*Math.sin(-angle)],
			[center2[0]+10*Math.cos(angle),center2[1]-10*Math.sin(-angle)],
		];
	}
	/*
	draw.toolsctx.fillStyle = '#F0F';
	draw.toolsctx.beginPath();
	draw.toolsctx.moveTo(topPolygon[0][0],topPolygon[0][1]);
	draw.toolsctx.lineTo(topPolygon[1][0],topPolygon[1][1]);
	draw.toolsctx.lineTo(topPolygon[2][0],topPolygon[2][1]);
	draw.toolsctx.lineTo(topPolygon[3][0],topPolygon[3][1]);
	draw.toolsctx.lineTo(topPolygon[0][0],topPolygon[0][1]);			
	draw.toolsctx.fill();	
	*/
	
	//draw.compass.pointPolygon = pointPolygon;
	//draw.compass.pencilArmPolygon = pencilArmPolygon;
	draw.compass.pencilPolygon = pencilPolygon;								
	draw.compass.topPolygon = topPolygon;	
}
function drawProtractor() {
	var rad = draw.protractor.radius;
	var center = draw.protractor.center;
	var color = draw.protractor.color;
	var angle = draw.protractor.angle;
	var ctx = draw.toolsctx;
	
	var radius = [0.12*rad,0.7*rad,0.8*rad,0.88*rad,0.92*rad,rad];
	var fontSize = rad / 20;
	var colorRGB = hexToRgb(color);
	
	ctx.save();
	ctx.translate(-draw.drawArea[0],-draw.drawArea[1]); // adjust for drawArea 	
	ctx.translate(center[0],center[1]);
	ctx.rotate(angle);
	
	ctx.fillStyle = "rgba("+colorRGB.r+","+colorRGB.g+","+colorRGB.b+",0.25)";
	ctx.beginPath();
	ctx.moveTo(0-rad,0);
	ctx.arc(0,0,rad,Math.PI,2*Math.PI);
	ctx.lineTo(0+rad,0+0.04*rad);
	ctx.lineTo(0-rad,0+0.04*rad);
	ctx.lineTo(0-rad,0);
	ctx.fill();
	
	ctx.lineWidth = 1;
	ctx.strokeStyle = '#000';
	ctx.fillStyle = '#000';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	ctx.font = fontSize + 'px Arial';
	ctx.beginPath();
	ctx.moveTo(0-radius[0],0);
	ctx.arc(0,0,radius[0],Math.PI,2*Math.PI);

	ctx.moveTo(0-radius[0],0);
	ctx.lineTo(0+radius[0],0);

	var angle = Math.PI;
	if (boolean(draw.protractor.numbers,true) === true) {
		ctx.moveTo(0-radius[1],0);
		ctx.arc(0,0,radius[1],Math.PI,2*Math.PI);
		ctx.moveTo(0-radius[2],0);
		ctx.arc(0,0,radius[2],Math.PI,265*Math.PI/180);
		ctx.moveTo((0+radius[2]*Math.cos(275*Math.PI/180)),(0+radius[2]*Math.sin(275*Math.PI/180)));
		ctx.arc(0,0,radius[2],275*Math.PI/180,2*Math.PI);
		for (var i = 0; i < 181; i++) {
			if (i == 90) {
				ctx.moveTo(0,0+10);
				ctx.lineTo(0,0-radius[1]-7);
				ctx.moveTo(0,0-0.86*rad);
				ctx.lineTo(0,0-radius[5]);
				
				ctx.translate((0+0.8*rad*Math.cos(angle)),(0+0.8*rad*Math.sin(angle)));
				ctx.rotate(angle+0.5*Math.PI);
				var largerFont = 1.5 * fontSize; 
				ctx.font = largerFont + 'px Arial';
				ctx.fillText(90,0,0);
				ctx.font = fontSize + 'px Arial';
				ctx.rotate(-(angle+0.5*Math.PI));
				ctx.translate(-(0+0.8*rad*Math.cos(angle)),-(0+0.8*rad*Math.sin(angle)));		
			} else if (i % 10 == 0) {
				ctx.moveTo(0+radius[0]*Math.cos(angle),0+radius[0]*Math.sin(angle));
				ctx.lineTo(0+(radius[1]+3)*Math.cos(angle),0+(radius[1]+3)*Math.sin(angle));
				ctx.moveTo(0+(radius[2]-3)*Math.cos(angle),0+(radius[2]-3)*Math.sin(angle));
				ctx.lineTo(0+(radius[2]+3)*Math.cos(angle),0+(radius[2]+3)*Math.sin(angle));			
				ctx.moveTo(0+radius[3]*Math.cos(angle),0+radius[3]*Math.sin(angle));
				ctx.lineTo(0+radius[5]*Math.cos(angle),0+radius[5]*Math.sin(angle));
				
				ctx.translate((0+0.75*rad*Math.cos(angle)),(0+0.75*rad*Math.sin(angle)));
				ctx.rotate(angle+0.5*Math.PI);
				ctx.fillText(180-i,0,0);
				ctx.rotate(-(angle+0.5*Math.PI));
				ctx.translate(-(0+0.75*rad*Math.cos(angle)),-(0+0.75*rad*Math.sin(angle)));
				
				ctx.translate((0+0.845*rad*Math.cos(angle)),(0+0.845*rad*Math.sin(angle)));
				ctx.rotate(angle+0.5*Math.PI);
				ctx.fillText(i,0,0);
				ctx.rotate(-(angle+0.5*Math.PI));
				ctx.translate(-(0+0.845*rad*Math.cos(angle)),-(0+0.845*rad*Math.sin(angle)));
			} else if (i % 5 == 0) {
				ctx.moveTo(0+radius[3]*Math.cos(angle),0+radius[3]*Math.sin(angle));
				ctx.lineTo(0+radius[5]*Math.cos(angle),0+radius[5]*Math.sin(angle));
			} else {
				ctx.moveTo(0+radius[4]*Math.cos(angle),0+radius[4]*Math.sin(angle));
				ctx.lineTo(0+radius[5]*Math.cos(angle),0+radius[5]*Math.sin(angle));			
			}
			angle += Math.PI / 180;
		}
	} else {
		for (var i = 0; i < 181; i++) {
			if (i == 90) {
				ctx.moveTo(0,0+10);
				ctx.lineTo(0,0-radius[5]);	
			} else if (i % 10 == 0) {
				ctx.moveTo(0+radius[0]*Math.cos(angle),0+radius[0]*Math.sin(angle));;
				ctx.lineTo(0+radius[5]*Math.cos(angle),0+radius[5]*Math.sin(angle));
			} else if (i % 5 == 0) {
				ctx.moveTo(0+radius[3]*Math.cos(angle),0+radius[3]*Math.sin(angle));
				ctx.lineTo(0+radius[5]*Math.cos(angle),0+radius[5]*Math.sin(angle));
			} else {
				ctx.moveTo(0+radius[4]*Math.cos(angle),0+radius[4]*Math.sin(angle));
				ctx.lineTo(0+radius[5]*Math.cos(angle),0+radius[5]*Math.sin(angle));			
			}
			angle += Math.PI / 180;
		}

	}

	ctx.stroke();
	
	ctx.restore();
}
function drawRuler() {
	var left = draw.ruler.left;
	var top = draw.ruler.top;
	var width = draw.ruler.width;
	var length = draw.ruler.length;
	var color = draw.ruler.color;
	var transparent = draw.ruler.transparent;	
	var angle = draw.ruler.angle;
	var ctx = draw.toolsctx;
	
	var fontSize = width / 6;
		
	ctx.save();
	ctx.translate(left, top);
	ctx.rotate(angle);

	ctx.beginPath();
	
	if (transparent == true) {
		var colorRGB = hexToRgb(color);
		ctx.fillStyle = "rgba("+colorRGB.r+","+colorRGB.g+","+colorRGB.b+",0.25)";
		roundedRect(ctx, 0, 0, length, width, 8, 1, "rgba(0,0,0,0)", "rgba("+colorRGB.r+","+colorRGB.g+","+colorRGB.b+",0.5)");
	} else {
		ctx.fillStyle = color;
		roundedRect(ctx, 0, 0, length, width, 8, 1, '#000', color);
	}

	if (draw.ruler.markings == true) {
		var xPos = length * 0.02;
		var dx = (length * 0.96) / 150;
		
		ctx.lineWidth = 1;
		ctx.strokeStyle = '#000';
		ctx.fillStyle = '#000';
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.font = fontSize + 'px Arial';
		for (var dCount = 0; dCount <= 150; dCount++) {
			ctx.beginPath();
			ctx.moveTo(xPos,0);
			if (dCount % 10 == 0) {
				ctx.lineTo(xPos,0.22*width);
				ctx.fillText(Math.round(0.1*dCount),xPos,0.32*width);
			} else if (dCount % 5 == 0) {
				ctx.lineTo(xPos,0.16*width);
			} else {
				ctx.lineTo(xPos,0.1*width);
			}
			ctx.stroke();
			xPos += dx;
		}
		ctx.beginPath();
		ctx.moveTo(length*0.5,0.5*width);
		ctx.lineTo(length*0.51,0.6*width);
		ctx.lineTo(length*0.49,0.6*width);
		ctx.lineTo(length*0.5,0.5*width);
		ctx.fill();
	}
	
	ctx.restore();
}
function drawCompass() {
	if (un(draw.compass)) return;
	var armLength = draw.compass.armLength;
	var radius = draw.compass.radius;
	var h = draw.compass.h;
	var center1 = draw.compass.center1;
	var center2 = draw.compass.center2;
	var center3 = draw.compass.center3;
	var drawOn = draw.compass.drawOn;
		
	var ctx = draw.toolsctx;
	
	if (draw.compass.radiusLocked == true || draw.compass.mode == 'draw') {
		// draw lock button
		ctx.translate(center2[0],center2[1]);
		if (drawOn == 'right') {
			ctx.rotate(draw.compass.angle);
		} else {
			ctx.rotate(draw.compass.angle + Math.PI);			
		}
	
		var lockHeight = 0.5 * draw.compass.h;
	
		//bar	
		ctx.fillStyle = '#99F';
		ctx.strokeStyle = '#000';
		ctx.lineWidth = 1;
		ctx.fillRect(-0.25*draw.compass.radius,lockHeight-5,0.5*draw.compass.radius,10);
		ctx.strokeRect(-0.25*draw.compass.radius,lockHeight-5,0.5*draw.compass.radius,10);

		//circle
		ctx.fillStyle = '#99F';
		ctx.strokeStyle = '#333';
		ctx.lineWidth = 3;
		ctx.beginPath();
		ctx.arc(0,lockHeight,15,0,2*Math.PI);
		ctx.fill();	
		ctx.stroke();

		//padlock
		ctx.fillStyle = '#333';
		ctx.beginPath();
		ctx.moveTo(6,lockHeight-2);
		ctx.lineTo(6,lockHeight+3);
		ctx.arc(0,lockHeight+3,6,0,Math.PI);
		ctx.lineTo(-6,lockHeight+3);
		ctx.lineTo(-6,lockHeight-2);
		ctx.stroke();
		ctx.fill();
		
		//keyhole
		ctx.fillStyle = '#99F';
		ctx.beginPath();
		ctx.arc(0,lockHeight+2.5,1.5,0,2*Math.PI);
		ctx.fill();
		ctx.fillRect(-0.5,lockHeight+2.5,1,3);
		
		//arm
		ctx.beginPath();
		ctx.moveTo(-6,lockHeight+2);
		ctx.lineTo(-6,lockHeight+2);
		ctx.arc(0,lockHeight-4,5,Math.PI,2*Math.PI);
		ctx.lineTo(6,lockHeight+2);
		ctx.stroke();
		
		if (drawOn == 'right') {
			ctx.rotate(-draw.compass.angle);
		} else {
			ctx.rotate(-draw.compass.angle - Math.PI);			
		}
		ctx.translate(-center2[0],-center2[1]);
	} else {
		// draw lock button
		ctx.translate(center2[0],center2[1]);
		if (drawOn == 'right') {
			ctx.rotate(draw.compass.angle);
		} else {
			ctx.rotate(draw.compass.angle + Math.PI);			
		}
			
		var lockHeight = 0.5 * draw.compass.h;
	
		//bar	
		ctx.fillStyle = '#999';
		ctx.strokeStyle = '#999';
		ctx.lineWidth = 2;
		ctx.strokeRect(-0.25*draw.compass.radius,lockHeight-5,0.5*draw.compass.radius,10);

		//circle
		ctx.fillStyle = mainCanvasFillStyle;
		ctx.strokeStyle = '#999';
		ctx.lineWidth = 3;		
		ctx.beginPath();
		ctx.arc(0,lockHeight,15,0,2*Math.PI);
		ctx.fill();	
		ctx.stroke();

		//padlock
		ctx.fillStyle = '#999';
		ctx.beginPath();
		ctx.moveTo(6,lockHeight-2);
		ctx.lineTo(6,lockHeight+3);
		ctx.arc(0,lockHeight+3,6,0,Math.PI);
		ctx.lineTo(-6,lockHeight+3);
		ctx.lineTo(-6,lockHeight-2);
		ctx.stroke();
		ctx.fill();
		
		//keyhole
		ctx.fillStyle = mainCanvasFillStyle;
		ctx.beginPath();
		ctx.arc(0,lockHeight+2.5,1.5,0,2*Math.PI);
		ctx.fill();
		ctx.fillRect(-0.5,lockHeight+2.5,1,3);
		
		//arm
		ctx.beginPath();
		ctx.moveTo(-6,lockHeight-2);
		ctx.arc(0,lockHeight-4,5,(4/5)*Math.PI,(9/5)*Math.PI);
		ctx.stroke();
		
		if (drawOn == 'right') {
			ctx.rotate(-draw.compass.angle);
		} else {
			ctx.rotate(-draw.compass.angle - Math.PI);			
		}
		ctx.translate(-center2[0],-center2[1]);
	}

	ctx.lineWidth = 2;
	ctx.strokeStyle = '#000';
	ctx.fillStyle = '#000';

	var angle2 = -0.5 * Math.PI - Math.atan((center2[1]-center1[1])/(center2[0]-center1[0]));
	if (center2[0] < center1[0]) angle2 += Math.PI;
	var angle3 = -0.5 * Math.PI - Math.atan((center3[1]-center2[1])/(center3[0]-center2[0]));
	if (center2[0] < center3[0]) angle3 += Math.PI;
	
	// draw pointy arm
	ctx.translate(center2[0],center2[1]);
	ctx.rotate(-angle2);
	
	roundedRect(ctx,-7,0,14,armLength-20,3,4,'#000','#99F');
	ctx.strokeStyle = '#000';
	ctx.fillStyle = '#CCC';
	ctx.lineWidth = 0.5;
	ctx.beginPath();
	ctx.moveTo(-3,armLength-20);
	ctx.lineTo(0,armLength);
	ctx.lineTo(3,armLength-20);
	ctx.lineTo(-3,armLength-20);
	ctx.fill();
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(0,armLength-26);
	ctx.stroke();
		
	ctx.rotate(angle2);
	ctx.translate(-center2[0],-center2[1]);

	// draw pencil arm
	ctx.translate(center2[0],center2[1]);
	ctx.rotate(-angle3);
	
	if (drawOn == 'right') {
		var pAngle = Math.PI/14;
	} else {
		var pAngle = -Math.PI/14;		
	}
	
	//draw pencil
	ctx.translate(0,armLength);
	ctx.rotate(pAngle);
	
	ctx.beginPath();
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 2;
	if (draw.color == '#000') {
		ctx.fillStyle = '#FC3';
	} else {
		ctx.fillStyle = draw.color;
	}
	ctx.moveTo(0,0);
	ctx.lineTo(-10,-30);
	ctx.lineTo(-10,-200);
	ctx.lineTo(10,-200);	
	ctx.lineTo(10,-30);
	ctx.lineTo(0,0);
	ctx.fill();
	ctx.stroke();
	ctx.beginPath();
	ctx.fillStyle = '#FFC';
	ctx.moveTo(0,0);
	ctx.lineTo(-10,-30);
	ctx.lineTo(10,-30);
	ctx.lineTo(0,0);
	ctx.fill();
	ctx.stroke();
	ctx.beginPath();
	ctx.fillStyle = draw.color;
	ctx.moveTo(0,0);
	ctx.lineTo(-3,-9);
	ctx.lineTo(3,-9);
	ctx.lineTo(0,0);
	ctx.fill();
	ctx.stroke();
	
	ctx.rotate(-pAngle);	
	ctx.translate(0,-armLength);
	
	ctx.fillStyle = '#99F';
	ctx.beginPath();
	if (drawOn == 'right') {
		ctx.moveTo(-7,0);
		ctx.lineTo(7,0);
		ctx.lineTo(7,armLength-95);		
		ctx.lineTo(7+45*Math.cos(pAngle),armLength-95+45*Math.sin(pAngle));
		ctx.lineTo(7+45*Math.cos(pAngle)-20*Math.sin(pAngle),armLength-95+45*Math.sin(pAngle)+20*Math.cos(pAngle));
		ctx.lineTo(-7,armLength-80);
		ctx.lineTo(-7,0);
	} else {
		ctx.moveTo(7,0);
		ctx.lineTo(-7,0);
		ctx.lineTo(-7,armLength-95);		
		ctx.lineTo(-7-45*Math.cos(pAngle),armLength-95-45*Math.sin(pAngle));
		ctx.lineTo(-7-45*Math.cos(pAngle)-20*Math.sin(pAngle),armLength-95-45*Math.sin(pAngle)+20*Math.cos(pAngle));
		ctx.lineTo(7,armLength-80);
		ctx.lineTo(7,0);		
	}
	ctx.fill();
	ctx.stroke();

	ctx.translate(0,armLength);
	ctx.rotate(pAngle);
	
	ctx.beginPath();
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 2;
	ctx.fillStyle = '#000';
	if (drawOn == 'right') {
		ctx.moveTo(14,-103);
		ctx.lineTo(24,-103);
		ctx.lineTo(24,-67);
		ctx.lineTo(14,-67);	
		ctx.lineTo(14,-103);
	} else {
		ctx.moveTo(-14,-103);
		ctx.lineTo(-24,-103);
		ctx.lineTo(-24,-67);
		ctx.lineTo(-14,-67);	
		ctx.lineTo(-14,-103);		
	}
	ctx.fill();
	ctx.stroke();
	
	ctx.rotate(-pAngle);	
	ctx.translate(0,-armLength);

	ctx.strokeStyle = '#000';
	ctx.fillStyle = '#CCC';
	ctx.lineWidth = 0.5;
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(0,armLength-86);
	ctx.stroke();

	ctx.rotate(angle3);
	ctx.translate(-center2[0],-center2[1]);	
	
	// draw top of compass
	ctx.translate(center2[0],center2[1]);
	if (drawOn == 'right') {
		ctx.rotate(draw.compass.angle);
	} else {
		ctx.rotate(draw.compass.angle + Math.PI);		
	}
	
	roundedRect(ctx,-15,-30,30,55,10,2,'#000','#000');
	roundedRect(ctx,-5,-60,10,30,0,2,'#000','#000');	
	ctx.fillStyle = '#CCC';
	ctx.beginPath();
	ctx.arc(0,0,7,0,2*Math.PI);
	ctx.fill();
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(-4,-4);
	ctx.lineTo(4,4);
	ctx.moveTo(4,-4);
	ctx.lineTo(-4,4);
	ctx.stroke();

	if (drawOn == 'right') {
		ctx.rotate(-draw.compass.angle);
	} else {
		ctx.rotate(-draw.compass.angle - Math.PI);		
	}
	ctx.translate(-center2[0],-center2[1]);	
}