function mathsInputFrac(e) {mathsInputElement("['frac', [''], ['']]");}
function mathsInputPow(e) {mathsInputElement("['power', false, ['']]");}
function mathsInputSubs(e) {mathsInputElement("['subs', [''], ['']]");}
function mathsInputRoot(e) {mathsInputElement("['root', [''], ['']]");}
function mathsInputSqrt(e) {mathsInputElement("['sqrt', ['']]");}
function mathsInputSin(e) {mathsInputElement("['sin', ['']]");}
function mathsInputCos(e) {mathsInputElement("['cos', ['']]");}
function mathsInputTan(e) {mathsInputElement("['tan', ['']]");}
function mathsInputInvSin(e) {mathsInputElement("['sin-1', ['']]");}
function mathsInputInvCos(e) {mathsInputElement("['cos-1', ['']]");}
function mathsInputInvTan(e) {mathsInputElement("['tan-1', ['']]");}
function mathsInputLn(e) {mathsInputElement("['ln', ['']]");}
function mathsInputLog(e) {mathsInputElement("['log', ['']]");}
function mathsInputLogBase(e) {mathsInputElement("['logBase', [''], ['']]");}
function mathsInputAbs(e) {mathsInputElement("['abs', ['']]");}
function mathsInputExp(e) {mathsInputElement("['exp', ['']]");}
function mathsInputSigma1(e) {mathsInputElement("['sigma1', ['']]");}
function mathsInputSigma2(e) {mathsInputElement("['sigma2', [''], [''], ['']]");}
function mathsInputInt1(e) {mathsInputElement("['int1', ['']]");}
function mathsInputInt2(e) {mathsInputElement("['int2', [''], [''], ['']]");}
function mathsInputVectorArrow(e) {mathsInputElement("['vectorArrow', ['']]");}
function mathsInputBar(e) {mathsInputElement("['bar', ['']]");}
function mathsInputHat(e) {mathsInputElement("['hat', ['']]");}
function mathsInputRecurring(e) {mathsInputElement("['recurring', ['']]");}
function mathsInputColVector2d(e) {mathsInputElement("['colVector2d', [''], ['']]");}
function mathsInputColVector3d(e) {mathsInputElement("['colVector3d', [''], [''], ['']]");}
function mathsInputMixedNum(e) {mathsInputElement("['mixedNum', [''], [''], ['']]");}
function mathsInputLim(e) {mathsInputElement("['lim', [''], ['']]");}

var keyboardButton1 = [];
var keyboardButton2 = [];
var keyboardChars = [
	{display:'0x00D7',name:'times'},
	{display:'0x00F7',name:'divide'},
	{display:'0x00B0',name:'degrees'},
	{display:'0x221E',name:'infinity'},
	{display:'0x2261',name:'equivalence'},
	{display:'0x2248',name:'approximately'},		
	{display:'0x2264',name:'lessEqual'},
	{display:'0x2265',name:'moreEqual'},
	{display:'0x03C0',name:'pi'},
	{display:'0x2260',name:'notEqual'},
	{display:'0x03B8',name:'theta'},
	{display:'0x00B1',name:'plusMinus'},
	{display:'0x2213',name:'minusPlus'},
	{display:'0x2B1A',name:'dottedSquare'},
	{display:'0x2115',name:'naturals'},
	{display:'0x2124',name:'integers'},
	{display:'0x211A',name:'rationals'},
	{display:'0x211D',name:'reals'},
	{display:'0x2208',name:'elementOf'},
	{display:'0x2209',name:'notElementOf'},
	{display:'0x221D',name:'proportionalTo'},				
	{display:'0x2220',name:'angle'},				
	{display:'0x2229',name:'intersection'},				
	{display:'0x222A',name:'union'},				
	{display:'0x2234',name:'therefore'},
	{display:'0x2190',name:'leftArrow'},
	{display:'0x2191',name:'upArrow'},
	{display:'0x2192',name:'rightArrow'},
	{display:'0x2193',name:'downArrow'}
];
var keyboardElements = [
	{display:['<<font:algebra>>x',['power',false,['']]],name:'power',func:mathsInputPow},
	{display:['<<font:algebra>>x',['power',false,['']]],name:'pow',func:mathsInputPow},
	{display:['x',['subs',false,['']]],name:'subs',func:mathsInputSubs},
	{display:[['frac',[''],['']]],name:'frac',func:mathsInputFrac},
	{display:[['sqrt',['']]],name:'sqrt',func:mathsInputSqrt},
	{display:[['root',[''],['']]],name:'root',func:mathsInputRoot},
	{display:[['sin',['']]],name:'sin',func:mathsInputSin},
	{display:[['sin-1',['']]],name:'sin-1',func:mathsInputInvSin},
	{display:[['cos',['']]],name:'cos',func:mathsInputCos},	
	{display:[['cos-1',['']]],name:'cos-1',func:mathsInputInvCos},
	{display:[['tan',['']]],name:'tan',func:mathsInputTan},
	{display:[['tan-1',['']]],name:'tan-1',func:mathsInputInvTan},
	{display:[['ln',['']]],name:'ln',func:mathsInputLn},	
	{display:[['log',['']]],name:'log',func:mathsInputLog},	
	{display:[['logBase',[''],['']]],name:'logBase',func:mathsInputLogBase},		
	{display:[['abs',['']]],name:'abs',func:mathsInputAbs},
	{display:[['exp',['']]],name:'exp',func:mathsInputExp},
	{display:[['sigma1',['']]],name:'sigma1',func:mathsInputSigma1},
	{display:[['sigma2',[''],[''],['']]],name:'sigma2',func:mathsInputSigma2},
	{display:[['int1',['']]],name:'int1',func:mathsInputInt1},
	{display:[['int2',[''],[''],['']]],name:'int2',func:mathsInputInt2},
	{display:[['vectorArrow',['']]],name:'vectorArrow',func:mathsInputVectorArrow},
	{display:[['bar',['']]],name:'bar',func:mathsInputBar},
	{display:[['hat',['']]],name:'hat',func:mathsInputHat},
	{display:[['recurring',['']]],name:'recurring',func:mathsInputRecurring},
	{display:[['colVector2d',[''],['']]],name:'colVector2d',func:mathsInputColVector2d},
	{display:[['colVector3d',[''],[''],['']]],name:'colVector3d',func:mathsInputColVector3d},
	{display:[['mixedNum',[''],[''],['']]],name:'mixedNum',func:mathsInputMixedNum},
	{display:[['lim',[''],['']]],name:'lim',func:mathsInputLim}
];

function addKeyboard(object) {
	if (object.type == 'num') {
		object.keyArray = [
			['1','2','3'],
			['4','5','6'],
			['7','8','9'],
			['-','0','delete']
		];
	}
	object.keySize = 50;
	object.fontSize = 36;
	createKeyboard(object);
}

function createKeyboard(object) {
	var keySize = object.keySize || 60;
	var fontSize = object.fontSize || 40;
	var keyPadding = object.keyPadding || 5;
	var align = object.align || 'left';
	var keyArray = object.keyArray;
	var backColor = object.backColor || '#F0F';
	var algText = object.algText || false;
	var rows = object.keyArray.length;
	var keyButtonLeft = object.keyButtonLeft || 1130;
	var keyButtonTop = object.keyButtonTop || 630;
	var keyButtonSize = object.keyButtonSize || 50;
	var dragArea = object.dragArea || [15,100,15,15]; // this is xMin, yMin, xMax, yMax
	//var textInputMode = boolean(object.textInputMode,false);
	
	var cols;
	for (var i = 0; i < keyArray.length; i++) {
		if (!cols) {cols = keyArray[i].length};
		cols = Math.max(cols, keyArray[i].length);	
	}
	
	// width and height of keyboard
	var width = cols * (keySize + keyPadding) + keyPadding * 5;
	var height = rows * (keySize + keyPadding) + 40 + keyPadding * 4; 

	var left = object.left || 1180 - width;
	var top = object.top || 620 - height;
	
	// create keyboard canvas
	var canvasInstance = document.createElement('canvas');
	canvasInstance.width = width;
	canvasInstance.height = height;
	canvasInstance.setAttribute('position', 'absolute');
	canvasInstance.setAttribute('cursor', 'auto');
	canvasInstance.setAttribute('draggable', 'false');
	canvasInstance.setAttribute('class', 'buttonClass');
	canvasInstance.style.zIndex = 800000;
	canvasInstance.style.cursor = openhand;
	//canvasInstance.textInputMode = textInputMode;
	
	canvasInstance.dragArea = dragArea;
	var contextInstance = canvasInstance.getContext('2d');
	roundedRect(contextInstance, 2, 2, width - 4, height - 4, 15, 4, '#000', backColor)
	contextInstance.strokeStyle = '#333';
	contextInstance.lineWidth = 4;
	contextInstance.beginPath();
	contextInstance.moveTo(15, 25);
	contextInstance.lineTo(width - 55, 25);	
	contextInstance.closePath();
	contextInstance.stroke();
	contextInstance.font = '20px Arial';
	contextInstance.textBaseline = 'middle';
	contextInstance.textAlign = 'center';
	contextInstance.fillStyle = backColor;
	contextInstance.fillRect((0.5 * width - 20) - 0.5 * contextInstance.measureText('Keyboard').width - 10, 20, contextInstance.measureText('Keyboard').width + 20, 10);
	contextInstance.fillStyle = '#333';	
	contextInstance.fillText('Keyboard', 0.5 * width - 20, 25);
	
	canvasInstance.data = [left, top, width, height];
	for (var i = 0; i < 4; i++) {
		canvasInstance.data[100+i] = canvasInstance.data[i];
	}
	canvasInstance.data[116] = false;
	keyboard[pageIndex] = canvasInstance;
	keyboardData[pageIndex] = canvasInstance.data;

	// make draggable
	addListenerStart(keyboard[pageIndex],dragKeyboardStart)
	keyboardVis[pageIndex] = false;
	
	// create keys
	var rowNum;
	var colNum;
	var keyCount = 0;
	key1[pageIndex] = [];
	key1Data[pageIndex] = [];

	for (var rowNum = 0; rowNum < keyArray.length; rowNum++) {
		var keyLeft;
		if (align == 'left') {
			keyLeft = left + keyPadding * 3;
		} else if (align == 'right') {
			keyLeft = left + width - keyArray[rowNum].length * (keySize + keyPadding) - keyPadding * 2;
		} else {
			keyLeft = left + 0.5 * (width - keyArray[rowNum].length * (keySize + keyPadding));
		}
		var	keyTop = top + keyPadding + 40 + keyPadding + rowNum * (keySize + keyPadding);
		
		for (var colNum = 0; colNum < keyArray[rowNum].length; colNum++) {
			var canvasInstance = document.createElement('canvas');
			canvasInstance.width = keySize;
			canvasInstance.height = keySize;
			canvasInstance.setAttribute('position', 'absolute');
			canvasInstance.setAttribute('cursor', 'auto');
			canvasInstance.setAttribute('draggable', 'false');
			canvasInstance.setAttribute('class', 'buttonClass');
			canvasInstance.style.zIndex = 800000;
			canvasInstance.style.opacity = 0.7;
			canvasInstance.style.pointerEvents = 'none';
				
			var contextInstance = canvasInstance.getContext('2d');
			
			canvasInstance.name = keyArray[rowNum][colNum];
			canvasInstance.value = clone(keyArray[rowNum][colNum]);
			canvasInstance.func = function(){};
			canvasInstance.relFontSize = 1;
			canvasInstance.keySize = keySize;			
			canvasInstance.element = false;
			canvasInstance.static = false;	
			
			for (var c = 0; c < keyboardChars.length; c++) {
				if (canvasInstance.value == keyboardChars[c].name) {
					canvasInstance.value = String.fromCharCode(keyboardChars[c].display);
					break;
				}
			}
			for (var e = 0; e < keyboardElements.length; e++) {
				if (canvasInstance.value == keyboardElements[e].name) {
					canvasInstance.relFontSize = 0.7;
					if (['frac','mixedNum'].indexOf(canvasInstance.value) > -1) {
						canvasInstance.relFontSize = 0.6;
					}
					if (['sqrt','root'].indexOf(canvasInstance.value) > -1) {
						canvasInstance.relFontSize = 0.6;
					}
					canvasInstance.value = keyboardElements[e].display;
					canvasInstance.func = keyboardElements[e].func;
					canvasInstance.element = true;
					break;
				}
			}
			
			if (canvasInstance.element == true || ['leftArrow','rightArrow','del','delete'].indexOf(canvasInstance.name) > -1) {
				canvasInstance.color = '#FF0'; // color for operators
				canvasInstance.colorPressed = '#990';
				canvasInstance.keyType = 'operator';
			} else if (['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'].indexOf(canvasInstance.name) > -1) {
				canvasInstance.color = '#AFF'; // color for letters
				canvasInstance.colorPressed = '#6CC';
				canvasInstance.keyType = 'letter';
			} else if(['0','1','2','3','4','5','6','7','8','9',0,1,2,3,4,5,6,7,8,9].indexOf(canvasInstance.name) > -1) {
				canvasInstance.color = '#AFA'; // color for numbers
				canvasInstance.colorPressed = '#9C9';
				canvasInstance.keyType = 'number';
			} else {
				canvasInstance.color = '#FB8'; // color for misc
				canvasInstance.colorPressed = '#C95';
				canvasInstance.keyType = 'misc';
			}
			
			canvasInstance.ctx = contextInstance;
			canvasInstance.ctx.canvas = canvasInstance;
			canvasInstance.keySize = keySize;
			canvasInstance.algText = algText;
			canvasInstance.fontSize = fontSize;
			
			drawKey(canvasInstance.ctx,canvasInstance.name,canvasInstance.algText,false,canvasInstance.keySize,canvasInstance.fontSize);
			addListenerStart(canvasInstance,keyStart);

			var relKeyLeft = keyLeft - left;
			var relKeyTop = keyTop - top;
			
			key1[pageIndex][keyCount] = canvasInstance;
			key1Data[pageIndex][keyCount] = [keyLeft, keyTop, keySize, keySize, relKeyLeft, relKeyTop, keyArray[rowNum][colNum]];
			key1Data[pageIndex][keyCount][100] = keyLeft;
			key1Data[pageIndex][keyCount][101] = keyTop;

			keyLeft += keySize + keyPadding;
			keyCount++;
		}
	}
	
	if (typeof object.staticKeys !== 'undefined') {
		var keys2 = object.staticKeys;
		var keyLeft = object.staticKeyPos[0];
		var keyTop = object.staticKeyPos[1];
		var staticKeySize = object.staticKeySize || keySize;
		var staticKeyPadding = object.staticKeyPadding || keyPadding;
		for (var k = 0; k < keys2.length; k++) {
			var canvasInstance = document.createElement('canvas');
			canvasInstance.width = staticKeySize;
			canvasInstance.height = staticKeySize;
			canvasInstance.setAttribute('position', 'absolute');
			canvasInstance.setAttribute('cursor', 'auto');
			canvasInstance.setAttribute('draggable', 'false');
			canvasInstance.setAttribute('class', 'buttonClass');
			canvasInstance.style.zIndex = 800000;
			canvasInstance.style.opacity = 0.7;
			canvasInstance.style.pointerEvents = 'none';
				
			var contextInstance = canvasInstance.getContext('2d');
			
			canvasInstance.name = keys2[k];
			canvasInstance.value = keys2[k];
			canvasInstance.func = function(){};
			canvasInstance.keySize = staticKeySize;
			canvasInstance.relFontSize = 1;
			canvasInstance.element = false;
			canvasInstance.static = true;
			container.appendChild(canvasInstance);
			
			for (var c = 0; c < keyboardChars.length; c++) {
				if (canvasInstance.value == keyboardChars[c].name) {
					canvasInstance.value = String.fromCharCode(keyboardChars[c].display);
					break;
				}
			}
			for (var e = 0; e < keyboardElements.length; e++) {
				if (canvasInstance.value == keyboardElements[e].name) {
					canvasInstance.relFontSize = 0.9;
					if (['frac','mixedNum'].indexOf(canvasInstance.value) > -1) {
						canvasInstance.relFontSize = 0.8;
					}
					canvasInstance.value = keyboardElements[e].display;
					canvasInstance.func = keyboardElements[e].func;
					canvasInstance.element = true;
					break;
				}
			}
			
			canvasInstance.ctx = contextInstance;
			canvasInstance.ctx.canvas = canvasInstance;
			canvasInstance.staticKeySize = staticKeySize;
			canvasInstance.algText = algText;
			canvasInstance.fontSize = fontSize;
			
			if (canvasInstance.element == true || ['leftArrow','rightArrow','del','delete'].indexOf(canvasInstance.name) > -1) {
				canvasInstance.color = '#FF0'; // color for operators
				canvasInstance.colorPressed = '#990';
				canvasInstance.keyType = 'operator';
			} else if (['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'].indexOf(canvasInstance.name) > -1) {
				canvasInstance.color = '#AFF'; // color for letters
				canvasInstance.colorPressed = '#6CC';
				canvasInstance.keyType = 'letter';
			} else if(['0','1','2','3','4','5','6','7','8','9',0,1,2,3,4,5,6,7,8,9].indexOf(canvasInstance.name) > -1) {
				canvasInstance.color = '#CFC'; // color for numbers
				canvasInstance.colorPressed = '#9C9';
				canvasInstance.keyType = 'number';
			} else {
				canvasInstance.color = '#CCC'; // color for misc
				canvasInstance.colorPressed = '#AAA';
				canvasInstance.keyType = 'misc';
			}			
			
			drawKey(canvasInstance.ctx,canvasInstance.name,canvasInstance.algText,false,canvasInstance.staticKeySize,canvasInstance.fontSize);
			addListenerStart(canvasInstance,keyStart);

			var relKeyLeft = keyLeft - left;
			var relKeyTop = keyTop - top;
			
			key1[pageIndex][keyCount] = canvasInstance;
			key1Data[pageIndex][keyCount] = [keyLeft, keyTop, staticKeySize, staticKeySize, relKeyLeft, relKeyTop, keys2[k]];
			key1Data[pageIndex][keyCount][100] = keyLeft;
			key1Data[pageIndex][keyCount][101] = keyTop;

			keyLeft += staticKeySize + staticKeyPadding;
			keyCount++;			
		}
	}
	
	// create close button
	var canvasInstance = document.createElement('canvas');
	canvasInstance.width = 40;
	canvasInstance.height = 40;
	canvasInstance.setAttribute('position', 'absolute');
	canvasInstance.setAttribute('cursor', 'auto');
	canvasInstance.setAttribute('draggable', 'false');
	canvasInstance.setAttribute('class', 'buttonClass');
	canvasInstance.style.zIndex = 800000;
	addListener(canvasInstance, hideKeyboard)
	
	var contextInstance = canvasInstance.getContext('2d');
	roundedRect(contextInstance, 3, 3, 34, 34, 8, 6, '#000', '#000');
	contextInstance.strokeStyle = '#FFF';
	contextInstance.fillStyle = '#FFF';
	contextInstance.lineWidth = 5;
	contextInstance.beginPath();
	
	contextInstance.moveTo(10, 30);
	contextInstance.lineTo(30, 30);
	
	contextInstance.closePath();
	contextInstance.stroke();
	key1[pageIndex][keyCount] = canvasInstance;
	key1Data[pageIndex][keyCount] = [left + width - 40, top+1, 40, 40, width - 40, 0, 'closeKeyboard'];
	key1Data[pageIndex][keyCount][100] = left + width - 40;
	key1Data[pageIndex][keyCount][101] = top+1;
	
	// create showKeyboard button
	var s = keyButtonSize;
	var canvasInstance = document.createElement('canvas');
	canvasInstance.width = s;
	canvasInstance.height = s;
	canvasInstance.setAttribute('position', 'absolute');
	canvasInstance.setAttribute('cursor', 'auto');
	canvasInstance.setAttribute('draggable', 'false');
	canvasInstance.setAttribute('class', 'buttonClass');
	canvasInstance.style.zIndex = 8000000000000;
	addListener(canvasInstance, showKeyboard)
	var contextInstance = canvasInstance.getContext('2d');
	roundedRect(contextInstance, s*1.5/50, s*1.5/50, s*47/50, s*47/50, s*5/50, s*3/50, '#000', backColor);
	roundedRect(contextInstance, s*9/50, s*9/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	roundedRect(contextInstance, s*21/50, s*9/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	roundedRect(contextInstance, s*33/50, s*9/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	roundedRect(contextInstance, s*9/50, s*21/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	roundedRect(contextInstance, s*21/50, s*21/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	roundedRect(contextInstance, s*33/50, s*21/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	roundedRect(contextInstance, s*9/50, s*33/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	roundedRect(contextInstance, s*21/50, s*33/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	roundedRect(contextInstance, s*33/50, s*33/50, s*8/50, s*8/50, s*3/50, s*2/50, '#000', '#AFF');
	canvases[pageIndex].push(canvasInstance);
	showKeys[pageIndex] = canvasInstance;
	var dataInstance = [keyButtonLeft, keyButtonTop, s, s, true, false, true];
	dataInstance[100] = keyButtonLeft;
	dataInstance[101] = keyButtonTop;
	dataInstance[102] = s;
	dataInstance[103] = s;
	canvasInstance.data = dataInstance;
	canvasInstance.ctx = contextInstance;
	
	keyboardButton1[pageIndex] = canvasInstance;
	
	// create hideKeyboard button
	var canvasInstance = document.createElement('canvas');
	canvasInstance.width = s;
	canvasInstance.height = s;
	canvasInstance.setAttribute('position', 'absolute');
	canvasInstance.setAttribute('cursor', 'auto');
	canvasInstance.setAttribute('draggable', 'false');
	canvasInstance.setAttribute('class', 'buttonClass');
	canvasInstance.style.zIndex = 8000000000000;
	addListener(canvasInstance, hideKeyboard)
	var contextInstance = canvasInstance.getContext('2d');
	roundedRect(contextInstance, s*1.5/50, s*1.5/50, s*47/50, s*47/50, s*5/50, s*3/50, '#000', backColor);
	canvases[pageIndex].push(canvasInstance);
	hideKeys[pageIndex] = canvasInstance;
	var dataInstance = [keyButtonLeft, keyButtonTop, s, s, false, false, true];
	dataInstance[100] = keyButtonLeft;
	dataInstance[101] = keyButtonTop;
	dataInstance[102] = s;
	dataInstance[103] = s;
	canvasInstance.data = dataInstance;
	canvasInstance.ctx = contextInstance;
	
	keyboardButton2[pageIndex] = canvasInstance;
}

function keyStart(e) {
	e.preventDefault();
	var name = e.target.name;
	var ctx = e.target.ctx;
	var algText = e.target.algText;
	var keySize = e.target.keySize;
	var fontSize = e.target.fontSize;
	var element = e.target.element;
	
	addListenerEnd(e.target,keyStop);
	drawKey(ctx,name,algText,true,keySize,fontSize);
	
	if (!un(draw) && !un(draw.keyboard) && draw.keyboard.active == true) {
		textEdit.softKeyInput(e.target.name);
	} else {
		if (name == 'leftArrow') {
			mathsInputLeftArrow(e);
		} else if (name == 'rightArrow') {
			mathsInputRightArrow(e)
		} else {
			if (boolean(element,false) == true) {
				e.target.func.apply();
			} else {
				softKeyMathsInput(e);
			}
		}
	}
}

function keyStop(e) {
	var name = e.target.name;
	var ctx = e.target.ctx;
	var algText = e.target.algText;
	var keySize = e.target.keySize;
	var fontSize = e.target.fontSize;
	drawKey(ctx,name,algText,false,keySize,fontSize);
	removeListenerEnd(e.target,keyStop);
}

var keyboardCurrFont = 'Arial';
function updateKeyboardCurrFont() {
	var prev = keyboardCurrFont;
	
	if (typeof currMathsInput == 'undefined') return;
	if (currMathsInput.selected == true && currMathsInput.selectPos.length > 0) {
		var cursorMapPos = currMathsInput.cursorMap[Math.max(currMathsInput.selectPos[0],currMathsInput.selectPos[1])];			
	} else {
		var cursorMapPos = currMathsInput.cursorMap[currMathsInput.cursorPos];
	}	
	
	for (var pos = 0; pos < currMathsInput.allMap.length; pos++) {
		if (arraysEqual(cursorMapPos,currMathsInput.allMap[pos]) == true) break;
		var posText = currMathsInput.richText;
		for (var pos2 = 0; pos2 < currMathsInput.allMap[pos].length - 1; pos2++) {
			posText = posText[currMathsInput.allMap[pos][pos2]];
		}
		posText = posText.slice(currMathsInput.allMap[pos][currMathsInput.allMap[pos].length - 1]);
		var tagType = 'none';
		if (posText.indexOf('<<font:') == 0) {
			for (var pos3 = 0; pos3 < posText.length; pos3++) {
				if (posText.slice(pos3).indexOf('>>') == 0) {			
					keyboardCurrFont = posText.slice(7,pos3);
					break;
				}
			}
		}
	}
	if (keyboardCurrFont !== prev && typeof key1 !== 'undefined' && typeof key1[pageIndex] !== 'undefined') {
		for (var k = 0; k < key1[pageIndex].length - 1; k++) {
			if (key1[pageIndex][k].keyType == 'letter') {
				drawKey(key1[pageIndex][k].ctx,key1[pageIndex][k].name,key1[pageIndex][k].algText,false,key1[pageIndex][k].keySize,key1[pageIndex][k].fontSize);
			}
		}
	}
}

function drawKey(ctx,name,algText,pressed,keySize,fontSize,font) {
	var isAlgText = boolean(algText,false);
	var isPressed = boolean(pressed,false);
	if (!keySize) keySize = 60; 
	if (!fontSize) fontSize = 40;
	if (!font) {
		font = keyboardCurrFont;
	}
	if (isAlgText == true) font = 'algebra';
	fontSize = fontSize * ctx.canvas.relFontSize;
	
	ctx.clearRect(0,0,keySize,keySize);
	if (isPressed == false) {
		var color = ctx.canvas.color;
	} else {
		var color = ctx.canvas.colorPressed;
	}
	/*var color = '#AFF';
	if (boolean(ctx.canvas.element,false) == true || ['leftArrow','rightArrow','del','delete'].indexOf(name) > -1) {
		font = 'algebra';
		if (isPressed == true) {
			color = '#990';
		} else {
			color = '#FF0';			
		}
	} else {
		if (isPressed == true) { 
			color = '#6CC';
		}
	}*/
	
	switch (name) {
		case 'leftArrow' :
		case 'left' :
			text({ctx:ctx,textArray:[],left:1.5,top:1.5,height:keySize-3,width:keySize-3,align:'center',vertAlign:'middle',box:{type:'loose',radius:6,color:color,borderWidth:3}});
			ctx.lineWidth = 2;
			ctx.beginPath();
			ctx.moveTo(45*keySize/60, 30*keySize/60);
			ctx.lineTo(15*keySize/60, 30*keySize/60);
			ctx.lineTo(25*keySize/60, 20*keySize/60);
			ctx.moveTo(15*keySize/60, 30*keySize/60);
			ctx.lineTo(25*keySize/60, 40*keySize/60);
			ctx.stroke();
			break;
		case 'rightArrow' :
		case 'right' :
			text({ctx:ctx,textArray:[],left:1.5,top:1.5,height:keySize-3,width:keySize-3,align:'center',vertAlign:'middle',box:{type:'loose',radius:6,color:color,borderWidth:3}});
			ctx.lineWidth = 2;
			ctx.beginPath();
			ctx.moveTo(15*keySize/60, 30*keySize/60);
			ctx.lineTo(45*keySize/60, 30*keySize/60);
			ctx.lineTo(35*keySize/60, 20*keySize/60);
			ctx.moveTo(45*keySize/60, 30*keySize/60);
			ctx.lineTo(35*keySize/60, 40*keySize/60);
			ctx.stroke();
			break;
		case 'delete' :
		case 'del' :
			text({ctx:ctx,textArray:[],left:1.5,top:1.5,height:keySize-3,width:keySize-3,align:'center',vertAlign:'middle',box:{type:'loose',radius:6,color:color,borderWidth:3}});
			ctx.textAlign = "center";
			ctx.textBaseline = "middle"; 
			ctx.fillStyle = "#000";
			ctx.font = (fontSize/2)+"px Arial";			
			ctx.fillText("DEL", keySize * 0.5, keySize * 0.65);
			break;					
		default :
			var txt = [];
			if (typeof ctx.canvas.value == 'number') {
				txt = [String(ctx.canvas.value)];
			} else if (typeof ctx.canvas.value == 'string') {
				txt = [ctx.canvas.value];
			} if (typeof ctx.canvas.value == 'object') {
				txt = ctx.canvas.value;
			}
			text({ctx:ctx,text:txt,font:font,fontSize:fontSize,rect:[1.5,1.5,keySize-3,keySize-3],align:[0,0],box:{type:'loose',radius:6,color:color,borderWidth:3}});
		
			break;
	}
}

var keyboardHardClosed = false; // has the user clicked the minimise button?
var keyboardHardOpen = false; // has the user clicked the minimise button?

function showKeyboard(event) {
	event.preventDefault();
	keyboardHardClosed = false;
	keyboardHardOpen = true;
	showKeyboard2();
}

function showKeyboard2(lightUp) {
	if (un(keyboard[pageIndex])) return;
	if (boolean(lightUp,false) == true) {
		for (var i = 0; i < key1[pageIndex].length; i++) {
			key1[pageIndex][i].style.opacity = 1;
			key1[pageIndex][i].style.pointerEvents = 'auto';	
		}			
	}
	if (keyboardHardClosed) return;
	if (keyboard[pageIndex].parentNode !== container) {
		container.appendChild(keyboard[pageIndex]);
		for (i = 0; i < key1[pageIndex].length; i++) {
			if (boolean(key1[pageIndex][i].static,false) == false) {
				container.appendChild(key1[pageIndex][i]);
			}
		}
		if (showKeys[pageIndex].parentNode == container) {container.removeChild(showKeys[pageIndex])};
		container.appendChild(hideKeys[pageIndex])
		keyboardVis[pageIndex] = true;
	}
}


function hideKeyboard(event) {
	event.preventDefault();
	keyboardHardClosed = true;
	keyboardHardOpen = false;
	hideKeyboard2();
}

function hideKeyboard2(lightDown) {
	if (un(keyboard[pageIndex])) return;
	if (boolean(lightDown,false) == true) {
		for (var i = 0; i < key1[pageIndex].length - 1; i++) {
			key1[pageIndex][i].style.opacity = 0.7;
			key1[pageIndex][i].style.pointerEvents = 'none';	
		}			
	}		
	if (keyboard[pageIndex].parentNode == container && keyboardHardOpen == false) {
		container.removeChild(keyboard[pageIndex]);
		for (var i = 0; i < key1[pageIndex].length; i++) {
			if (boolean(key1[pageIndex][i].static,false) == false) {
				container.removeChild(key1[pageIndex][i]);	
			}
		}
		if (hideKeys[pageIndex].parentNode == container) {container.removeChild(hideKeys[pageIndex])};
		container.appendChild(showKeys[pageIndex]);
		keyboardVis[pageIndex] = false;
	}
}

var drag;
function dragKeyboardStart(e) {
	updateMouse(e);
	e.target.style.cursor = closedhand;
	e.target.dragOffset = [mouse.x-e.target.data[100],mouse.y-e.target.data[101]];
	drag = e.target;
	addListenerMove(window, dragKeyboardMove )
	addListenerEnd(window, dragKeyboardStop )
}
function dragKeyboardMove(e) {
	e.target.style.cursor = closedhand;
	updateMouse(e);
	var l = mouse.x - drag.dragOffset[0];
	l = Math.max(l,drag.dragArea[0]);
	l = Math.min(l,mainCanvasWidth-drag.dragArea[2]-drag.data[102]);	
	var t = mouse.y - drag.dragOffset[1];
	t = Math.max(t,drag.dragArea[1]);
	t = Math.min(t,mainCanvasHeight-drag.dragArea[3]-drag.data[103]);
	drag.data[100] = l;
	drag.data[101] = t;
	resizeCanvas2(drag,l,t);

	for (i = 0; i < key1[pageIndex].length; i++) {
		if (boolean(key1[pageIndex][i].static,false) == false) {
			key1Data[pageIndex][i][100] = l + key1Data[pageIndex][i][4];
			key1Data[pageIndex][i][101] = t + key1Data[pageIndex][i][5]; 
			resizeCanvas2(key1[pageIndex][i],key1Data[pageIndex][i][100],key1Data[pageIndex][i][101]);
		}
	}
}
function dragKeyboardStop(e) {
	removeListenerMove(window, dragKeyboardMove)
	removeListenerEnd(window, dragKeyboardStop)
	e.target.style.cursor = openhand;
	//drag.style.cursor = 'url("../images/cursors/openhand.cur"), auto';
}