// exposed global variables/elements that your program can access
let joystickDeltaX = 0;
let joystickDeltaY = 0;
let pinchWidthX = 0;
let pinchWidthY = 0;
let button1Pressed = false;
let button2Pressed = false;
let button3Pressed = false;
let button4Pressed = false;
let button5Pressed = false;
let button6Pressed = false;

let stickElement = null;
let baseElement = null;
let button1Element = null;
let button2Element = null;
let button3Element = null;
let button4Element = null;
let button5Element = null;
let button6Element = null;

// the following variables marked with an underscore ( _ ) are for internal use
let _touches = [];
let _eventTarget;
let _stickDistance;
let _stickNormalizedX;
let _stickNormalizedY;
let _buttonCanvasWidth = 70;
let _buttonCanvasReducedWidth = 50;
let _buttonCanvasHalfWidth = _buttonCanvasWidth * 0.5;
let _smallButtonCanvasWidth = 40;
let _smallButtonCanvasReducedWidth = 28;
let _smallButtonCanvasHalfWidth = _smallButtonCanvasWidth * 0.5;
let _showJoystick;
let _showButtons;
let _limitStickTravel;
let _stickRadius;
let _baseX;
let _baseY;
let _stickX;
let _stickY;
let _container;
let _pinchWasActive = false;



let MobileJoystickControls = function (opts)
{
	opts = opts || {};
	_container = document.body;

	//create joystick Base
	baseElement = document.createElement('canvas');
	baseElement.width = 126;
	baseElement.height = 126;
	_container.appendChild(baseElement);
	baseElement.style.position = "absolute";
	baseElement.style.display = "none";

	_Base_ctx = baseElement.getContext('2d');
	_Base_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Base_ctx.lineWidth = 2;
	_Base_ctx.beginPath();
	_Base_ctx.arc(baseElement.width / 2, baseElement.width / 2, 40, 0, Math.PI * 2, true);
	_Base_ctx.stroke();

	//create joystick Stick
	stickElement = document.createElement('canvas');
	stickElement.width = 86;
	stickElement.height = 86;
	_container.appendChild(stickElement);
	stickElement.style.position = "absolute";
	stickElement.style.display = "none";

	_Stick_ctx = stickElement.getContext('2d');
	_Stick_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Stick_ctx.lineWidth = 3;
	_Stick_ctx.beginPath();
	_Stick_ctx.arc(stickElement.width / 2, stickElement.width / 2, 30, 0, Math.PI * 2, true);
	_Stick_ctx.stroke();

	//create button1
	button1Element = document.createElement('canvas');
	button1Element.width = _buttonCanvasReducedWidth; // for Triangle Button
	//button1Element.width = _buttonCanvasWidth; // for Circle Button
	button1Element.height = _buttonCanvasWidth;

	_container.appendChild(button1Element);
	button1Element.style.position = "absolute";
	button1Element.style.display = "none";
	button1Element.style.zIndex = "10";
	button1Pressed = false;

	_Button1_ctx = button1Element.getContext('2d');
	_Button1_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button1_ctx.lineWidth = 3;

	// Triangle Button
	_Button1_ctx.beginPath();
	_Button1_ctx.moveTo(0, _buttonCanvasHalfWidth);
	_Button1_ctx.lineTo(_buttonCanvasReducedWidth, _buttonCanvasWidth);
	_Button1_ctx.lineTo(_buttonCanvasReducedWidth, 0);
	_Button1_ctx.closePath();
	_Button1_ctx.stroke();

	/*
	// Circle Button
	_Button1_ctx.beginPath();
	_Button1_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button1_ctx.stroke();
	_Button1_ctx.lineWidth = 1;
	_Button1_ctx.beginPath();
	_Button1_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button1_ctx.stroke();
	*/

	//create button2
	button2Element = document.createElement('canvas');
	button2Element.width = _buttonCanvasReducedWidth; // for Triangle Button
	//button2Element.width = _buttonCanvasWidth; // for Circle Button
	button2Element.height = _buttonCanvasWidth;

	_container.appendChild(button2Element);
	button2Element.style.position = "absolute";
	button2Element.style.display = "none";
	button2Element.style.zIndex = "10";
	button2Pressed = false;

	_Button2_ctx = button2Element.getContext('2d');
	_Button2_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button2_ctx.lineWidth = 3;

	// Triangle Button
	_Button2_ctx.beginPath();
	_Button2_ctx.moveTo(_buttonCanvasReducedWidth, _buttonCanvasHalfWidth);
	_Button2_ctx.lineTo(0, 0);
	_Button2_ctx.lineTo(0, _buttonCanvasWidth);
	_Button2_ctx.closePath();
	_Button2_ctx.stroke();

	/*
	// Circle Button
	_Button2_ctx.beginPath();
	_Button2_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button2_ctx.stroke();
	_Button2_ctx.lineWidth = 1;
	_Button2_ctx.beginPath();
	_Button2_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button2_ctx.stroke();
	*/

	//create button3
	button3Element = document.createElement('canvas');
	button3Element.width = _buttonCanvasWidth;
	button3Element.height = _buttonCanvasReducedWidth; // for Triangle Button
	//button3Element.height = _buttonCanvasWidth; // for Circle Button

	_container.appendChild(button3Element);
	button3Element.style.position = "absolute";
	button3Element.style.display = "none";
	button3Element.style.zIndex = "10";
	button3Pressed = false;

	_Button3_ctx = button3Element.getContext('2d');
	_Button3_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button3_ctx.lineWidth = 3;

	// Triangle Button
	_Button3_ctx.beginPath();
	_Button3_ctx.moveTo(_buttonCanvasHalfWidth, 0);
	_Button3_ctx.lineTo(0, _buttonCanvasReducedWidth);
	_Button3_ctx.lineTo(_buttonCanvasWidth, _buttonCanvasReducedWidth);
	_Button3_ctx.closePath();
	_Button3_ctx.stroke();

	/*
	// Circle Button
	_Button3_ctx.beginPath();
	_Button3_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button3_ctx.stroke();
	_Button3_ctx.lineWidth = 1;
	_Button3_ctx.beginPath();
	_Button3_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button3_ctx.stroke();
	*/

	//create button4
	button4Element = document.createElement('canvas');
	button4Element.width = _buttonCanvasWidth;
	button4Element.height = _buttonCanvasReducedWidth; // for Triangle Button
	//button4Element.height = _buttonCanvasWidth; // for Circle Button

	_container.appendChild(button4Element);
	button4Element.style.position = "absolute";
	button4Element.style.display = "none";
	button4Element.style.zIndex = "10";
	button4Pressed = false;

	_Button4_ctx = button4Element.getContext('2d');
	_Button4_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button4_ctx.lineWidth = 3;

	// Triangle Button
	_Button4_ctx.beginPath();
	_Button4_ctx.moveTo(_buttonCanvasHalfWidth, _buttonCanvasReducedWidth);
	_Button4_ctx.lineTo(_buttonCanvasWidth, 0);
	_Button4_ctx.lineTo(0, 0);
	_Button4_ctx.closePath();
	_Button4_ctx.stroke();

	/*
	// Circle Button
	_Button4_ctx.beginPath();
	_Button4_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button4_ctx.stroke();
	_Button4_ctx.lineWidth = 1;
	_Button4_ctx.beginPath();
	_Button4_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button4_ctx.stroke();
	*/

	//create button5
	button5Element = document.createElement('canvas');
	button5Element.width = _smallButtonCanvasWidth;
	button5Element.height = _smallButtonCanvasReducedWidth; // for Triangle Button
	//button5Element.height = _smallButtonCanvasWidth; // for Circle Button

	_container.appendChild(button5Element);
	button5Element.style.position = "absolute";
	button5Element.style.display = "none";
	button5Element.style.zIndex = "10";
	button5Pressed = false;

	_Button5_ctx = button5Element.getContext('2d');
	_Button5_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button5_ctx.lineWidth = 3;

	// Triangle Button
	_Button5_ctx.beginPath();
	_Button5_ctx.moveTo(_smallButtonCanvasHalfWidth, 0);
	_Button5_ctx.lineTo(0, _smallButtonCanvasReducedWidth);
	_Button5_ctx.lineTo(_smallButtonCanvasWidth, _smallButtonCanvasReducedWidth);
	_Button5_ctx.closePath();
	_Button5_ctx.stroke();

	/*
	// Circle Button
	_Button5_ctx.beginPath();
	_Button5_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button5_ctx.stroke();
	_Button5_ctx.lineWidth = 1;
	_Button5_ctx.beginPath();
	_Button5_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button5_ctx.stroke();
	*/

	//create button6
	button6Element = document.createElement('canvas');
	button6Element.width = _smallButtonCanvasWidth;
	button6Element.height = _smallButtonCanvasReducedWidth; // for Triangle Button
	//button6Element.height = _buttonCanvasWidth; // for Circle Button

	_container.appendChild(button6Element);
	button6Element.style.position = "absolute";
	button6Element.style.display = "none";
	button6Element.style.zIndex = "10";
	button6Pressed = false;

	_Button6_ctx = button6Element.getContext('2d');
	_Button6_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button6_ctx.lineWidth = 3;

	// Triangle Button
	_Button6_ctx.beginPath();
	_Button6_ctx.moveTo(_smallButtonCanvasHalfWidth, _smallButtonCanvasReducedWidth);
	_Button6_ctx.lineTo(_smallButtonCanvasWidth, 0);
	_Button6_ctx.lineTo(0, 0);
	_Button6_ctx.closePath();
	_Button6_ctx.stroke();

	/*
	// Circle Button
	_Button6_ctx.beginPath();
	_Button6_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button6_ctx.stroke();
	_Button6_ctx.lineWidth = 1;
	_Button6_ctx.beginPath();
	_Button6_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button6_ctx.stroke();
	*/

	// options
	_showJoystick = opts.showJoystick || false;
	_showButtons = opts.showButtons || true;

	_baseX = _stickX = opts.baseX || 100;
	_baseY = _stickY = opts.baseY || 200;

	_limitStickTravel = opts.limitStickTravel || false;
	if (_limitStickTravel) _showJoystick = true;
	_stickRadius = opts.stickRadius || 50;
	if (_stickRadius > 100) _stickRadius = 100;

	// the following listeners are for 1-finger touch detection to emulate mouse-click and mouse-drag operations
	_container.addEventListener('pointerdown', _onPointerDown, false);
	_container.addEventListener('pointermove', _onPointerMove, false);
	_container.addEventListener('pointerup', _onPointerUp, false);
	// the following listener is for 2-finger pinch gesture detection
	_container.addEventListener('touchmove', _onTouchMove, false);

}; // end let MobileJoystickControls = function (opts)


function _move(style, x, y)
{
	style.left = x + 'px';
	style.top = y + 'px';
}

function _onButton1Down()
{
	button1Pressed = true;

	_Button1_ctx.strokeStyle = 'rgba(255,255,255,0.5)';
	_Button1_ctx.lineWidth = 3;

	// Triangle Button
	_Button1_ctx.beginPath();
	_Button1_ctx.moveTo(0, _buttonCanvasHalfWidth);
	_Button1_ctx.lineTo(_buttonCanvasReducedWidth, _buttonCanvasWidth);
	_Button1_ctx.lineTo(_buttonCanvasReducedWidth, 0);
	_Button1_ctx.closePath();
	_Button1_ctx.stroke();

	/*
	// Circle Button
	_Button1_ctx.beginPath();
	_Button1_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button1_ctx.stroke();
	_Button1_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button1_ctx.lineWidth = 1;
	_Button1_ctx.beginPath();
	_Button1_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button1_ctx.stroke();
	*/
}

function _onButton1Up()
{
	button1Pressed = false;

	_Button1_ctx.clearRect(0, 0, _buttonCanvasWidth, _buttonCanvasWidth);
	_Button1_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button1_ctx.lineWidth = 3;

	// Triangle Button
	_Button1_ctx.beginPath();
	_Button1_ctx.moveTo(0, _buttonCanvasHalfWidth);
	_Button1_ctx.lineTo(_buttonCanvasReducedWidth, _buttonCanvasWidth);
	_Button1_ctx.lineTo(_buttonCanvasReducedWidth, 0);
	_Button1_ctx.closePath();
	_Button1_ctx.stroke();

	/*
	// Circle Button
	_Button1_ctx.beginPath();
	_Button1_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button1_ctx.stroke();
	_Button1_ctx.lineWidth = 1;
	_Button1_ctx.beginPath();
	_Button1_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button1_ctx.stroke();
	*/
}

function _onButton2Down()
{
	button2Pressed = true;

	_Button2_ctx.strokeStyle = 'rgba(255,255,255,0.5)';
	_Button2_ctx.lineWidth = 3;

	// Triangle Button
	_Button2_ctx.beginPath();
	_Button2_ctx.moveTo(_buttonCanvasReducedWidth, _buttonCanvasHalfWidth);
	_Button2_ctx.lineTo(0, 0);
	_Button2_ctx.lineTo(0, _buttonCanvasWidth);
	_Button2_ctx.closePath();
	_Button2_ctx.stroke();

	/*
	// Circle Button
	_Button2_ctx.beginPath();
	_Button2_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button2_ctx.stroke();
	_Button2_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button2_ctx.lineWidth = 1;
	_Button2_ctx.beginPath();
	_Button2_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button2_ctx.stroke();
	*/
}

function _onButton2Up()
{
	button2Pressed = false;

	_Button2_ctx.clearRect(0, 0, _buttonCanvasWidth, _buttonCanvasWidth);
	_Button2_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button2_ctx.lineWidth = 3;

	// Triangle Button
	_Button2_ctx.beginPath();
	_Button2_ctx.moveTo(_buttonCanvasReducedWidth, _buttonCanvasHalfWidth);
	_Button2_ctx.lineTo(0, 0);
	_Button2_ctx.lineTo(0, _buttonCanvasWidth);
	_Button2_ctx.closePath();
	_Button2_ctx.stroke();

	/*
	// Circle Button
	_Button2_ctx.beginPath();
	_Button2_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button2_ctx.stroke();
	_Button2_ctx.lineWidth = 1;
	_Button2_ctx.beginPath();
	_Button2_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button2_ctx.stroke();
	*/
}

function _onButton3Down()
{
	button3Pressed = true;

	_Button3_ctx.strokeStyle = 'rgba(255,255,255,0.5)';
	_Button3_ctx.lineWidth = 3;

	// Triangle Button
	_Button3_ctx.beginPath();
	_Button3_ctx.moveTo(_buttonCanvasHalfWidth, 0);
	_Button3_ctx.lineTo(0, _buttonCanvasReducedWidth);
	_Button3_ctx.lineTo(_buttonCanvasWidth, _buttonCanvasReducedWidth);
	_Button3_ctx.closePath();
	_Button3_ctx.stroke();

	/*
	// Circle Button
	_Button3_ctx.beginPath();
	_Button3_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button3_ctx.stroke();
	_Button3_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button3_ctx.lineWidth = 1;
	_Button3_ctx.beginPath();
	_Button3_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button3_ctx.stroke();
	*/
}

function _onButton3Up()
{
	button3Pressed = false;

	_Button3_ctx.clearRect(0, 0, _buttonCanvasWidth, _buttonCanvasWidth);
	_Button3_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button3_ctx.lineWidth = 3;

	// Triangle Button
	_Button3_ctx.beginPath();
	_Button3_ctx.moveTo(_buttonCanvasHalfWidth, 0);
	_Button3_ctx.lineTo(0, _buttonCanvasReducedWidth);
	_Button3_ctx.lineTo(_buttonCanvasWidth, _buttonCanvasReducedWidth);
	_Button3_ctx.closePath();
	_Button3_ctx.stroke();

	/*
	// Circle Button
	_Button3_ctx.beginPath();
	_Button3_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button3_ctx.stroke();
	_Button3_ctx.lineWidth = 1;
	_Button3_ctx.beginPath();
	_Button3_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button3_ctx.stroke();
	*/
}

function _onButton4Down()
{
	button4Pressed = true;

	_Button4_ctx.strokeStyle = 'rgba(255,255,255,0.5)';
	_Button4_ctx.lineWidth = 3;

	// Triangle Button
	_Button4_ctx.beginPath();
	_Button4_ctx.moveTo(_buttonCanvasHalfWidth, _buttonCanvasReducedWidth);
	_Button4_ctx.lineTo(_buttonCanvasWidth, 0);
	_Button4_ctx.lineTo(0, 0);
	_Button4_ctx.closePath();
	_Button4_ctx.stroke();

	/*
	// Circle Button
	_Button4_ctx.beginPath();
	_Button4_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button4_ctx.stroke();
	_Button4_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button4_ctx.lineWidth = 1;
	_Button4_ctx.beginPath();
	_Button4_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button4_ctx.stroke();
	*/
}

function _onButton4Up()
{
	button4Pressed = false;

	_Button4_ctx.clearRect(0, 0, _buttonCanvasWidth, _buttonCanvasWidth);
	_Button4_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button4_ctx.lineWidth = 3;

	// Triangle Button
	_Button4_ctx.beginPath();
	_Button4_ctx.moveTo(_buttonCanvasHalfWidth, _buttonCanvasReducedWidth);
	_Button4_ctx.lineTo(_buttonCanvasWidth, 0);
	_Button4_ctx.lineTo(0, 0);
	_Button4_ctx.closePath();
	_Button4_ctx.stroke();

	/*
	// Circle Button
	_Button4_ctx.beginPath();
	_Button4_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button4_ctx.stroke();
	_Button4_ctx.lineWidth = 1;
	_Button4_ctx.beginPath();
	_Button4_ctx.arc(_buttonCanvasHalfWidth, _buttonCanvasHalfWidth, _buttonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button4_ctx.stroke();
	*/
}

function _onButton5Down()
{
	button5Pressed = true;

	_Button5_ctx.strokeStyle = 'rgba(255,255,255,0.5)';
	_Button5_ctx.lineWidth = 3;

	// Triangle Button
	_Button5_ctx.beginPath();
	_Button5_ctx.moveTo(_smallButtonCanvasHalfWidth, 0);
	_Button5_ctx.lineTo(0, _smallButtonCanvasReducedWidth);
	_Button5_ctx.lineTo(_smallButtonCanvasWidth, _smallButtonCanvasReducedWidth);
	_Button5_ctx.closePath();
	_Button5_ctx.stroke();

	/*
	// Circle Button
	_Button5_ctx.beginPath();
	_Button5_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button5_ctx.stroke();
	_Button5_ctx.lineWidth = 1;
	_Button5_ctx.beginPath();
	_Button5_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button5_ctx.stroke();
	*/
}

function _onButton5Up()
{
	button5Pressed = false;

	_Button5_ctx.clearRect(0, 0, _smallButtonCanvasWidth, _smallButtonCanvasWidth);
	_Button5_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button5_ctx.lineWidth = 3;

	// Triangle Button
	_Button5_ctx.beginPath();
	_Button5_ctx.moveTo(_smallButtonCanvasHalfWidth, 0);
	_Button5_ctx.lineTo(0, _smallButtonCanvasReducedWidth);
	_Button5_ctx.lineTo(_smallButtonCanvasWidth, _smallButtonCanvasReducedWidth);
	_Button5_ctx.closePath();
	_Button5_ctx.stroke();

	/*
	// Circle Button
	_Button5_ctx.beginPath();
	_Button5_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button5_ctx.stroke();
	_Button5_ctx.lineWidth = 1;
	_Button5_ctx.beginPath();
	_Button5_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button5_ctx.stroke();
	*/
}

function _onButton6Down()
{
	button6Pressed = true;

	_Button6_ctx.strokeStyle = 'rgba(255,255,255,0.5)';
	_Button6_ctx.lineWidth = 3;

	// Triangle Button
	_Button6_ctx.beginPath();
	_Button6_ctx.moveTo(_smallButtonCanvasHalfWidth, _smallButtonCanvasReducedWidth);
	_Button6_ctx.lineTo(_smallButtonCanvasWidth, 0);
	_Button6_ctx.lineTo(0, 0);
	_Button6_ctx.closePath();
	_Button6_ctx.stroke();

	/*
	// Circle Button
	_Button6_ctx.beginPath();
	_Button6_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button6_ctx.stroke();
	_Button6_ctx.lineWidth = 1;
	_Button6_ctx.beginPath();
	_Button6_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button6_ctx.stroke();
	*/
}

function _onButton6Up()
{
	button6Pressed = false;

	_Button6_ctx.clearRect(0, 0, _smallButtonCanvasWidth, _smallButtonCanvasWidth);
	_Button6_ctx.strokeStyle = 'rgba(255,255,255,0.2)';
	_Button6_ctx.lineWidth = 3;

	// Triangle Button
	_Button6_ctx.beginPath();
	_Button6_ctx.moveTo(_smallButtonCanvasHalfWidth, _smallButtonCanvasReducedWidth);
	_Button6_ctx.lineTo(_smallButtonCanvasWidth, 0);
	_Button6_ctx.lineTo(0, 0);
	_Button6_ctx.closePath();
	_Button6_ctx.stroke();

	/*
	// Circle Button
	_Button6_ctx.beginPath();
	_Button6_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 8, 0, Math.PI * 2);
	_Button6_ctx.stroke();
	_Button6_ctx.lineWidth = 1;
	_Button6_ctx.beginPath();
	_Button6_ctx.arc(_smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth, _smallButtonCanvasHalfWidth - 1, 0, Math.PI * 2);
	_Button6_ctx.stroke();
	*/
}


function _onPointerDown(event)
{
	
	_eventTarget = event.target;

	if (_eventTarget == button1Element)
		return _onButton1Down();
	else if (_eventTarget == button2Element)
		return _onButton2Down();
	else if (_eventTarget == button3Element)
		return _onButton3Down();
	else if (_eventTarget == button4Element)
		return _onButton4Down();
	else if (_eventTarget == button5Element)
		return _onButton5Down();
	else if (_eventTarget == button6Element)
		return _onButton6Down();
	else if (_eventTarget != renderer.domElement) // target was the GUI menu
		return;

	// else target is the joystick area
	_stickX = event.clientX;
	_stickY = event.clientY;
	
	_baseX = _stickX;
	_baseY = _stickY;
	
	joystickDeltaX = joystickDeltaY = 0;
	
} // end function _onPointerDown(event)


function _onPointerMove(event)
{
	
	_eventTarget = event.target;

	if (_eventTarget != renderer.domElement) // target was the GUI menu or Buttons
		return;

	_stickX = event.clientX;
	_stickY = event.clientY;

	joystickDeltaX = _stickX - _baseX;
	joystickDeltaY = _stickY - _baseY;
	
	if (_limitStickTravel)
	{
		_stickDistance = Math.sqrt((joystickDeltaX * joystickDeltaX) + (joystickDeltaY * joystickDeltaY));

		if (_stickDistance > _stickRadius)
		{
			_stickNormalizedX = joystickDeltaX / _stickDistance;
			_stickNormalizedY = joystickDeltaY / _stickDistance;

			_stickX = _stickNormalizedX * _stickRadius + _baseX;
			_stickY = _stickNormalizedY * _stickRadius + _baseY;

			joystickDeltaX = _stickX - _baseX;
			joystickDeltaY = _stickY - _baseY;
		}
	}

	if (_pinchWasActive)
	{
		_pinchWasActive = false;

		_baseX = event.clientX;
		_baseY = event.clientY;
		
		_stickX = _baseX;
		_stickY = _baseY;

		joystickDeltaX = joystickDeltaY = 0;
	}

	if (_showJoystick)
	{
		stickElement.style.display = "";
		_move(baseElement.style, (_baseX - baseElement.width / 2), (_baseY - baseElement.height / 2));
		
		baseElement.style.display = "";
		_move(stickElement.style, (_stickX - stickElement.width / 2), (_stickY - stickElement.height / 2));
	}

} // end function _onPointerMove(event)


function _onPointerUp(event)
{

	_eventTarget = event.target;

	if (_eventTarget == button1Element)
		return _onButton1Up();
	else if (_eventTarget == button2Element)
		return _onButton2Up();	
	else if (_eventTarget == button3Element)
		return _onButton3Up();
	else if (_eventTarget == button4Element)
		return _onButton4Up();
	else if (_eventTarget == button5Element)
		return _onButton5Up();
	else if (_eventTarget == button6Element)
		return _onButton6Up();
	else if (_eventTarget != renderer.domElement) // target was the GUI menu
		return;

	joystickDeltaX = joystickDeltaY = 0;

	baseElement.style.display = "none";
	stickElement.style.display = "none";
	
} // end function _onPointerUp(event)


function _onTouchMove(event)
{
	// we only want to deal with a 2-finger pinch
	if (event.touches.length != 2)
		return;

	_touches = event.touches;
	
	if (_touches[0].target != button1Element && _touches[0].target != button2Element &&
		_touches[0].target != button3Element && _touches[0].target != button4Element &&
		_touches[0].target != button5Element && _touches[0].target != button6Element &&
		_touches[1].target != button1Element && _touches[1].target != button2Element &&
		_touches[1].target != button3Element && _touches[1].target != button4Element &&
		_touches[1].target != button5Element && _touches[1].target != button6Element)
	{
		pinchWidthX = Math.abs(_touches[1].pageX - _touches[0].pageX);
		pinchWidthY = Math.abs(_touches[1].pageY - _touches[0].pageY);

		_stickX = _baseX;
		_stickY = _baseY;

		joystickDeltaX = joystickDeltaY = 0;

		_pinchWasActive = true;

		baseElement.style.display = "none";
		stickElement.style.display = "none";
	}

} // end function _onTouchMove(event)