bfg-common 1.5.436 → 1.5.437

package/public/spice-console/lib/virtualjoystick.js

@@ -1,370 +1,370 @@
-/*
-    Copyright (c) 2016 eyeOS
-
-    This file is part of Open365.
-
-    Open365 is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as
-    published by the Free Software Foundation, either version 3 of the
-    License, or (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program. If not, see <http://www.gnu.org/licenses/>.
-*/
-
-var VirtualJoystick	= function(opts)
-{
-	opts			= opts			|| {};
-	this._container		= opts.container	|| document.body;
-	this._stickEl		= opts.stickElement	|| this._buildJoystickStick();
-	this._baseEl		= opts.baseElement	|| this._buildJoystickBase();
-	this._mouseLeft = opts.mouseLeft || this._buildJoystickButton();
-	this._mouseSupport	= 'mouseSupport' in opts? opts.mouseSupport	: false;
-	this._range		= opts.range		|| 60;
-	
-	this._timer = null;
-	
-	this._callback	= 'callback' in opts? opts.callback	: false;
-	this._callbackcontext = 'callbackcontext' in opts? opts.callbackcontext: this;
-	this._callbackButton = 'callbackbutton' in opts? opts.callbackbutton : false;
-	this._referenceItem = opts.referenceItem;
-
-	this._container.style.position	= "relative";
-
-	this._container.appendChild(this._baseEl);
-	this._container.appendChild(this._mouseLeft);
-	
-	this._baseEl.style.position	= "absolute"
-	this._baseEl.style.display	= "block";
-	
-	this._mouseLeft.style.position	= "absolute"
-	this._mouseLeft.style.display	= "block";
-		
-	//calculate positions
-	var jcnt = $(this._referenceItem);
-	var baseTop = jcnt.height()-jcnt.offset().top-130;
-	var baseLeft = 20;
-	var baseRight = 20;
-	this._baseEl.style.top = baseTop+'px';
-	this._baseEl.style.left = baseLeft+'px';
-	
-	this._container.appendChild(this._stickEl);
-	this._stickEl.style.position	= "absolute"
-	this._stickEl.style.display	= "none";
-	
-	this._mouseLeft.style.top = baseTop+20+'px';
-	this._mouseLeft.style.right = baseRight+'px';
-	
-	this._pressed	= false;
-	this._baseX	= 0;
-	this._baseY	= 0;
-	this._stickX	= 0;
-	this._stickY	= 0;
-
-	__bind		= function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-	this._$onTouchStart	= __bind(this._onTouchStart	, this);
-	this._$onTouchEnd	= __bind(this._onTouchEnd	, this);
-	this._$onTouchMove	= __bind(this._onTouchMove	, this);
-	this._$onTouchStartButton = __bind(this._onTouchStartButton, this);
-	this._$onTouchEndButton = __bind(this._onTouchEndButton, this);
-	this._baseEl.addEventListener( 'touchstart'	, this._$onTouchStart	, false );
-	this._mouseLeft.addEventListener( 'touchstart'	, this._$onTouchStartButton	, false );
-	this._mouseLeft.addEventListener( 'touchend'	, this._$onTouchEndButton	, false );
-	this._container.addEventListener( 'touchend'	, this._$onTouchEnd	, false );
-	this._container.addEventListener( 'touchmove'	, this._$onTouchMove	, false );
-	if( this._mouseSupport ){
-		this._$onMouseDown	= __bind(this._onMouseDown	, this);
-		this._$onMouseUp	= __bind(this._onMouseUp	, this);
-		this._$onMouseMove	= __bind(this._onMouseMove	, this);
-		this._$onMouseDownButton = __bind(this._onMouseDownButton, this);
-		this._$onMouseUpButton = __bind(this._onMouseUpButton, this);
-		this._baseEl.addEventListener( 'mousedown'	, this._$onMouseDown	, false );
-		this._container.addEventListener( 'mouseup'	, this._$onMouseUp	, false );
-		this._mouseLeft.addEventListener( 'mousedown'	, this._$onTouchStartButton	, false );
-		this._mouseLeft.addEventListener( 'mouseup'	, this._$onTouchEndButton	, false );
-		this._container.addEventListener( 'mousemove'	, this._$onMouseMove	, false );
-	}
-}
-
-VirtualJoystick.prototype.destroy	= function()
-{
-	this._container.removeChild(this._baseEl);
-	this._container.removeChild(this._stickEl);
-	
-	this._mouseLeft.removeEventListener( 'touchstart'	, this._$onTouchStartButton	, false );
-	this._mouseLeft.removeEventListener( 'touchend'		, this._$onTouchEndButton	, false );
-	this._container.removeChild(this._mouseLeft);
-
-	this._container.removeEventListener( 'touchstart'	, this._$onTouchStart	, false );
-	this._container.removeEventListener( 'touchend'		, this._$onTouchEnd	, false );
-	this._container.removeEventListener( 'touchmove'	, this._$onTouchMove	, false );
-	if( this._mouseSupport ){
-		this._container.removeEventListener( 'mouseup'		, this._$onMouseUp	, false );
-		this._container.removeEventListener( 'mousedown'	, this._$onMouseDown	, false );
-		this._container.removeEventListener( 'mousemove'	, this._$onMouseMove	, false );
-	}
-}
-
-/**
- * @returns {Boolean} true if touchscreen is currently available, false otherwise
-*/
-VirtualJoystick.touchScreenAvailable	= function()
-{
-	return 'createTouch' in document ? true : false;
-}
-
-//////////////////////////////////////////////////////////////////////////////////
-//										//
-//////////////////////////////////////////////////////////////////////////////////
-
-VirtualJoystick.prototype.deltaX	= function(){ return this._stickX - this._baseX;	}
-VirtualJoystick.prototype.deltaY	= function(){ return this._stickY - this._baseY;	}
-
-VirtualJoystick.prototype.up	= function(){
-	if( this._pressed === false )	return false;
-	var deltaX	= this.deltaX();
-	var deltaY	= this.deltaY();
-	if( deltaY >= 0 )	return false;
-	if( Math.abs(deltaY) < this._range && Math.abs(deltaY) < Math.abs(deltaX) ){
-		return false;
-	}
-	return true;
-}
-VirtualJoystick.prototype.down	= function(){
-	if( this._pressed === false )	return false;
-	var deltaX	= this.deltaX();
-	var deltaY	= this.deltaY();
-	if( deltaY <= 0 )	return false;
-	if( Math.abs(deltaY) < this._range && Math.abs(deltaY) < Math.abs(deltaX) ){
-		return false;
-	}
-	return true;	
-}
-VirtualJoystick.prototype.right	= function(){
-	if( this._pressed === false )	return false;
-	var deltaX	= this.deltaX();
-	var deltaY	= this.deltaY();
-	if( deltaX <= 0 )	return false;
-	if( Math.abs(deltaX) < this._range && Math.abs(deltaY) > Math.abs(deltaX) ){
-		return false;
-	}
-	return true;	
-}
-VirtualJoystick.prototype.left	= function(){
-	if( this._pressed === false )	return false;
-	var deltaX	= this.deltaX();
-	var deltaY	= this.deltaY();
-	if( deltaX >= 0 )	return false;
-	if( Math.abs(deltaX) < this._range && Math.abs(deltaY) > Math.abs(deltaX) ){
-		return false;
-	}
-	return true;	
-}
-
-//////////////////////////////////////////////////////////////////////////////////
-//										//
-//////////////////////////////////////////////////////////////////////////////////
-
-VirtualJoystick.prototype._onUp	= function()
-{
-	this._pressed	= false; 
-	this._stickEl.style.display	= "none";
-	//this._baseEl.style.display	= "none";
-	
-	this._baseX	= this._baseY	= 0;
-	this._stickX	= this._stickY	= 0;
-	this._eraseInterval();
-}
-
-VirtualJoystick.prototype._onDown	= function(x, y)
-{
-	this._pressed	= true; 
-	this._stickX	= x;
-	this._stickY	= y;
-
-	this._stickEl.style.display	= "";
-	this._stickEl.style.left	= (this._stickX - this._stickEl.width /2)+"px";
-	this._stickEl.style.top		= (this._stickY - this._stickEl.height/2)+"px";
-	this._startInterval();
-
-}
-
-VirtualJoystick.prototype._onMove	= function(x, y)
-{
-	if( this._pressed === true ){
-		this._stickX	= x;
-		this._stickY	= y;
-		this._stickEl.style.left	= (x - this._stickEl.width /2)+"px";
-		this._stickEl.style.top		= (y - this._stickEl.height/2)+"px";
-		this._startInterval();
-	}
-}
-
-VirtualJoystick.prototype._startInterval = function(x, y) {
-	this._eraseInterval();
-	var centerXBase = $(this._baseEl).offset().left + ($(this._baseEl).width()/2);
-	var centerXStick = $(this._stickEl).offset().left + ($(this._stickEl).width()/2);
-	this.offsetX = parseInt((centerXStick - centerXBase) / 5);
-	
-	//////
-	
-	var centerYBase = $(this._baseEl).offset().top + ($(this._baseEl).height()/2);
-	var centerYStick = $(this._stickEl).offset().top + ($(this._stickEl).height()/2);
-	
-	this.offsetY = parseInt((centerYStick - centerYBase) / 5);
-	
-	if(this.offsetX > 15) {
-		this.offsetX = 15;
-	}
-	
-	if(this.offsetY > 15) {
-		this.offsetY = 15;
-	}
-	//calculate movements from offsets
-	
-	var self = this;
-	this._timer = setInterval(function() {
-		if(self._callback) {
-			self._callback.call(self._callbackcontext, [self.offsetX, self.offsetY]);
-		}
-	}, 10);
-	
-}
-
-VirtualJoystick.prototype._eraseInterval = function() {
-	if(this._timer) {
-		clearTimeout(this._timer);
-		this._timer = null;
-	}
-}
-
-//////////////////////////////////////////////////////////////////////////////////
-//		bind touch events (and mouse events for debug)			//
-//////////////////////////////////////////////////////////////////////////////////
-
-VirtualJoystick.prototype._onMouseUp	= function(event)
-{
-	return this._onUp();
-}
-
-VirtualJoystick.prototype._onMouseDown	= function(event)
-{
-	var x	= event.pageX;
-	var y	= event.pageY;
-	return this._onDown(x, y);
-}
-
-VirtualJoystick.prototype._onMouseMove	= function(event)
-{
-	var x	= event.pageX;
-	var y	= event.pageY;
-	return this._onMove(x, y);
-}
-
-VirtualJoystick.prototype._onTouchStart	= function(event)
-{
-	if( event.touches.length != 1 )	return;
-
-	event.preventDefault();
-
-	var x	= event.touches[ 0 ].pageX;
-	var y	= event.touches[ 0 ].pageY;
-	return this._onDown(x, y)
-}
-
-VirtualJoystick.prototype._onTouchEnd	= function(event)
-{
-//??????
-// no preventDefault to get click event on ios
-event.preventDefault();
-
-	return this._onUp()
-}
-
-VirtualJoystick.prototype._onTouchMove	= function(event)
-{
-	if(event.touches && event.touches.length != 1 )	return;
-
-	event.preventDefault();
-
-	var x	= event.touches[ 0 ].pageX;
-	var y	= event.touches[ 0 ].pageY;
-	return this._onMove(x, y)
-}
-
-VirtualJoystick.prototype._onTouchStartButton	= function(event)
-{
-	if( event.touches && event.touches.length != 1 )	return;
-
-	event.preventDefault();
-	this._callbackButton.call(this._callbackcontext, ['down']);
-}
-
-VirtualJoystick.prototype._onTouchEndButton	= function(event)
-{
-//??????
-// no preventDefault to get click event on ios
-event.preventDefault();
-	this._callbackButton.call(this._callbackcontext, ['up']);
-}
-//////////////////////////////////////////////////////////////////////////////////
-//		build default stickEl and baseEl				//
-//////////////////////////////////////////////////////////////////////////////////
-
-VirtualJoystick.prototype._buildJoystickBase	= function()
-{
-	var canvas	= document.createElement( 'canvas' );
-	canvas.style.zIndex = 2;
-	canvas.width	= 126;
-	canvas.height	= 126;
-	
-	var ctx		= canvas.getContext('2d');
-	ctx.beginPath(); 
-	ctx.strokeStyle = "cyan"; 
-	ctx.lineWidth	= 6; 
-	ctx.arc( canvas.width/2, canvas.width/2, 40, 0, Math.PI*2, true); 
-	ctx.stroke();	
-
-	ctx.beginPath(); 
-	ctx.strokeStyle	= "cyan"; 
-	ctx.lineWidth	= 2; 
-	ctx.arc( canvas.width/2, canvas.width/2, 60, 0, Math.PI*2, true); 
-	ctx.stroke();
-	
-	return canvas;
-}
-
-VirtualJoystick.prototype._buildJoystickStick	= function()
-{
-	var canvas	= document.createElement( 'canvas' );
-	canvas.style.zIndex = 2;
-	canvas.width	= 86;
-	canvas.height	= 86;
-	var ctx		= canvas.getContext('2d');
-	ctx.beginPath(); 
-	ctx.strokeStyle	= "cyan"; 
-	ctx.lineWidth	= 6; 
-	ctx.arc( canvas.width/2, canvas.width/2, 40, 0, Math.PI*2, true); 
-	ctx.stroke();
-	return canvas;
-}
-
-VirtualJoystick.prototype._buildJoystickButton	= function()
-{
-	var canvas	= document.createElement( 'canvas' );
-	canvas.style.zIndex = 2;
-	canvas.width	= 86;
-	canvas.height	= 86;
-	var ctx		= canvas.getContext('2d');
-	ctx.beginPath(); 
-	ctx.strokeStyle	= "green"; 
-	ctx.lineWidth	= 6; 
-	ctx.arc( canvas.width/2, canvas.width/2, 40, 0, Math.PI*2, true); 
-	ctx.stroke();
-	return canvas;
-}
+/*
+    Copyright (c) 2016 eyeOS
+
+    This file is part of Open365.
+
+    Open365 is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as
+    published by the Free Software Foundation, either version 3 of the
+    License, or (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+var VirtualJoystick	= function(opts)
+{
+	opts			= opts			|| {};
+	this._container		= opts.container	|| document.body;
+	this._stickEl		= opts.stickElement	|| this._buildJoystickStick();
+	this._baseEl		= opts.baseElement	|| this._buildJoystickBase();
+	this._mouseLeft = opts.mouseLeft || this._buildJoystickButton();
+	this._mouseSupport	= 'mouseSupport' in opts? opts.mouseSupport	: false;
+	this._range		= opts.range		|| 60;
+	
+	this._timer = null;
+	
+	this._callback	= 'callback' in opts? opts.callback	: false;
+	this._callbackcontext = 'callbackcontext' in opts? opts.callbackcontext: this;
+	this._callbackButton = 'callbackbutton' in opts? opts.callbackbutton : false;
+	this._referenceItem = opts.referenceItem;
+
+	this._container.style.position	= "relative";
+
+	this._container.appendChild(this._baseEl);
+	this._container.appendChild(this._mouseLeft);
+	
+	this._baseEl.style.position	= "absolute"
+	this._baseEl.style.display	= "block";
+	
+	this._mouseLeft.style.position	= "absolute"
+	this._mouseLeft.style.display	= "block";
+		
+	//calculate positions
+	var jcnt = $(this._referenceItem);
+	var baseTop = jcnt.height()-jcnt.offset().top-130;
+	var baseLeft = 20;
+	var baseRight = 20;
+	this._baseEl.style.top = baseTop+'px';
+	this._baseEl.style.left = baseLeft+'px';
+	
+	this._container.appendChild(this._stickEl);
+	this._stickEl.style.position	= "absolute"
+	this._stickEl.style.display	= "none";
+	
+	this._mouseLeft.style.top = baseTop+20+'px';
+	this._mouseLeft.style.right = baseRight+'px';
+	
+	this._pressed	= false;
+	this._baseX	= 0;
+	this._baseY	= 0;
+	this._stickX	= 0;
+	this._stickY	= 0;
+
+	__bind		= function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+	this._$onTouchStart	= __bind(this._onTouchStart	, this);
+	this._$onTouchEnd	= __bind(this._onTouchEnd	, this);
+	this._$onTouchMove	= __bind(this._onTouchMove	, this);
+	this._$onTouchStartButton = __bind(this._onTouchStartButton, this);
+	this._$onTouchEndButton = __bind(this._onTouchEndButton, this);
+	this._baseEl.addEventListener( 'touchstart'	, this._$onTouchStart	, false );
+	this._mouseLeft.addEventListener( 'touchstart'	, this._$onTouchStartButton	, false );
+	this._mouseLeft.addEventListener( 'touchend'	, this._$onTouchEndButton	, false );
+	this._container.addEventListener( 'touchend'	, this._$onTouchEnd	, false );
+	this._container.addEventListener( 'touchmove'	, this._$onTouchMove	, false );
+	if( this._mouseSupport ){
+		this._$onMouseDown	= __bind(this._onMouseDown	, this);
+		this._$onMouseUp	= __bind(this._onMouseUp	, this);
+		this._$onMouseMove	= __bind(this._onMouseMove	, this);
+		this._$onMouseDownButton = __bind(this._onMouseDownButton, this);
+		this._$onMouseUpButton = __bind(this._onMouseUpButton, this);
+		this._baseEl.addEventListener( 'mousedown'	, this._$onMouseDown	, false );
+		this._container.addEventListener( 'mouseup'	, this._$onMouseUp	, false );
+		this._mouseLeft.addEventListener( 'mousedown'	, this._$onTouchStartButton	, false );
+		this._mouseLeft.addEventListener( 'mouseup'	, this._$onTouchEndButton	, false );
+		this._container.addEventListener( 'mousemove'	, this._$onMouseMove	, false );
+	}
+}
+
+VirtualJoystick.prototype.destroy	= function()
+{
+	this._container.removeChild(this._baseEl);
+	this._container.removeChild(this._stickEl);
+	
+	this._mouseLeft.removeEventListener( 'touchstart'	, this._$onTouchStartButton	, false );
+	this._mouseLeft.removeEventListener( 'touchend'		, this._$onTouchEndButton	, false );
+	this._container.removeChild(this._mouseLeft);
+
+	this._container.removeEventListener( 'touchstart'	, this._$onTouchStart	, false );
+	this._container.removeEventListener( 'touchend'		, this._$onTouchEnd	, false );
+	this._container.removeEventListener( 'touchmove'	, this._$onTouchMove	, false );
+	if( this._mouseSupport ){
+		this._container.removeEventListener( 'mouseup'		, this._$onMouseUp	, false );
+		this._container.removeEventListener( 'mousedown'	, this._$onMouseDown	, false );
+		this._container.removeEventListener( 'mousemove'	, this._$onMouseMove	, false );
+	}
+}
+
+/**
+ * @returns {Boolean} true if touchscreen is currently available, false otherwise
+*/
+VirtualJoystick.touchScreenAvailable	= function()
+{
+	return 'createTouch' in document ? true : false;
+}
+
+//////////////////////////////////////////////////////////////////////////////////
+//										//
+//////////////////////////////////////////////////////////////////////////////////
+
+VirtualJoystick.prototype.deltaX	= function(){ return this._stickX - this._baseX;	}
+VirtualJoystick.prototype.deltaY	= function(){ return this._stickY - this._baseY;	}
+
+VirtualJoystick.prototype.up	= function(){
+	if( this._pressed === false )	return false;
+	var deltaX	= this.deltaX();
+	var deltaY	= this.deltaY();
+	if( deltaY >= 0 )	return false;
+	if( Math.abs(deltaY) < this._range && Math.abs(deltaY) < Math.abs(deltaX) ){
+		return false;
+	}
+	return true;
+}
+VirtualJoystick.prototype.down	= function(){
+	if( this._pressed === false )	return false;
+	var deltaX	= this.deltaX();
+	var deltaY	= this.deltaY();
+	if( deltaY <= 0 )	return false;
+	if( Math.abs(deltaY) < this._range && Math.abs(deltaY) < Math.abs(deltaX) ){
+		return false;
+	}
+	return true;	
+}
+VirtualJoystick.prototype.right	= function(){
+	if( this._pressed === false )	return false;
+	var deltaX	= this.deltaX();
+	var deltaY	= this.deltaY();
+	if( deltaX <= 0 )	return false;
+	if( Math.abs(deltaX) < this._range && Math.abs(deltaY) > Math.abs(deltaX) ){
+		return false;
+	}
+	return true;	
+}
+VirtualJoystick.prototype.left	= function(){
+	if( this._pressed === false )	return false;
+	var deltaX	= this.deltaX();
+	var deltaY	= this.deltaY();
+	if( deltaX >= 0 )	return false;
+	if( Math.abs(deltaX) < this._range && Math.abs(deltaY) > Math.abs(deltaX) ){
+		return false;
+	}
+	return true;	
+}
+
+//////////////////////////////////////////////////////////////////////////////////
+//										//
+//////////////////////////////////////////////////////////////////////////////////
+
+VirtualJoystick.prototype._onUp	= function()
+{
+	this._pressed	= false; 
+	this._stickEl.style.display	= "none";
+	//this._baseEl.style.display	= "none";
+	
+	this._baseX	= this._baseY	= 0;
+	this._stickX	= this._stickY	= 0;
+	this._eraseInterval();
+}
+
+VirtualJoystick.prototype._onDown	= function(x, y)
+{
+	this._pressed	= true; 
+	this._stickX	= x;
+	this._stickY	= y;
+
+	this._stickEl.style.display	= "";
+	this._stickEl.style.left	= (this._stickX - this._stickEl.width /2)+"px";
+	this._stickEl.style.top		= (this._stickY - this._stickEl.height/2)+"px";
+	this._startInterval();
+
+}
+
+VirtualJoystick.prototype._onMove	= function(x, y)
+{
+	if( this._pressed === true ){
+		this._stickX	= x;
+		this._stickY	= y;
+		this._stickEl.style.left	= (x - this._stickEl.width /2)+"px";
+		this._stickEl.style.top		= (y - this._stickEl.height/2)+"px";
+		this._startInterval();
+	}
+}
+
+VirtualJoystick.prototype._startInterval = function(x, y) {
+	this._eraseInterval();
+	var centerXBase = $(this._baseEl).offset().left + ($(this._baseEl).width()/2);
+	var centerXStick = $(this._stickEl).offset().left + ($(this._stickEl).width()/2);
+	this.offsetX = parseInt((centerXStick - centerXBase) / 5);
+	
+	//////
+	
+	var centerYBase = $(this._baseEl).offset().top + ($(this._baseEl).height()/2);
+	var centerYStick = $(this._stickEl).offset().top + ($(this._stickEl).height()/2);
+	
+	this.offsetY = parseInt((centerYStick - centerYBase) / 5);
+	
+	if(this.offsetX > 15) {
+		this.offsetX = 15;
+	}
+	
+	if(this.offsetY > 15) {
+		this.offsetY = 15;
+	}
+	//calculate movements from offsets
+	
+	var self = this;
+	this._timer = setInterval(function() {
+		if(self._callback) {
+			self._callback.call(self._callbackcontext, [self.offsetX, self.offsetY]);
+		}
+	}, 10);
+	
+}
+
+VirtualJoystick.prototype._eraseInterval = function() {
+	if(this._timer) {
+		clearTimeout(this._timer);
+		this._timer = null;
+	}
+}
+
+//////////////////////////////////////////////////////////////////////////////////
+//		bind touch events (and mouse events for debug)			//
+//////////////////////////////////////////////////////////////////////////////////
+
+VirtualJoystick.prototype._onMouseUp	= function(event)
+{
+	return this._onUp();
+}
+
+VirtualJoystick.prototype._onMouseDown	= function(event)
+{
+	var x	= event.pageX;
+	var y	= event.pageY;
+	return this._onDown(x, y);
+}
+
+VirtualJoystick.prototype._onMouseMove	= function(event)
+{
+	var x	= event.pageX;
+	var y	= event.pageY;
+	return this._onMove(x, y);
+}
+
+VirtualJoystick.prototype._onTouchStart	= function(event)
+{
+	if( event.touches.length != 1 )	return;
+
+	event.preventDefault();
+
+	var x	= event.touches[ 0 ].pageX;
+	var y	= event.touches[ 0 ].pageY;
+	return this._onDown(x, y)
+}
+
+VirtualJoystick.prototype._onTouchEnd	= function(event)
+{
+//??????
+// no preventDefault to get click event on ios
+event.preventDefault();
+
+	return this._onUp()
+}
+
+VirtualJoystick.prototype._onTouchMove	= function(event)
+{
+	if(event.touches && event.touches.length != 1 )	return;
+
+	event.preventDefault();
+
+	var x	= event.touches[ 0 ].pageX;
+	var y	= event.touches[ 0 ].pageY;
+	return this._onMove(x, y)
+}
+
+VirtualJoystick.prototype._onTouchStartButton	= function(event)
+{
+	if( event.touches && event.touches.length != 1 )	return;
+
+	event.preventDefault();
+	this._callbackButton.call(this._callbackcontext, ['down']);
+}
+
+VirtualJoystick.prototype._onTouchEndButton	= function(event)
+{
+//??????
+// no preventDefault to get click event on ios
+event.preventDefault();
+	this._callbackButton.call(this._callbackcontext, ['up']);
+}
+//////////////////////////////////////////////////////////////////////////////////
+//		build default stickEl and baseEl				//
+//////////////////////////////////////////////////////////////////////////////////
+
+VirtualJoystick.prototype._buildJoystickBase	= function()
+{
+	var canvas	= document.createElement( 'canvas' );
+	canvas.style.zIndex = 2;
+	canvas.width	= 126;
+	canvas.height	= 126;
+	
+	var ctx		= canvas.getContext('2d');
+	ctx.beginPath(); 
+	ctx.strokeStyle = "cyan"; 
+	ctx.lineWidth	= 6; 
+	ctx.arc( canvas.width/2, canvas.width/2, 40, 0, Math.PI*2, true); 
+	ctx.stroke();	
+
+	ctx.beginPath(); 
+	ctx.strokeStyle	= "cyan"; 
+	ctx.lineWidth	= 2; 
+	ctx.arc( canvas.width/2, canvas.width/2, 60, 0, Math.PI*2, true); 
+	ctx.stroke();
+	
+	return canvas;
+}
+
+VirtualJoystick.prototype._buildJoystickStick	= function()
+{
+	var canvas	= document.createElement( 'canvas' );
+	canvas.style.zIndex = 2;
+	canvas.width	= 86;
+	canvas.height	= 86;
+	var ctx		= canvas.getContext('2d');
+	ctx.beginPath(); 
+	ctx.strokeStyle	= "cyan"; 
+	ctx.lineWidth	= 6; 
+	ctx.arc( canvas.width/2, canvas.width/2, 40, 0, Math.PI*2, true); 
+	ctx.stroke();
+	return canvas;
+}
+
+VirtualJoystick.prototype._buildJoystickButton	= function()
+{
+	var canvas	= document.createElement( 'canvas' );
+	canvas.style.zIndex = 2;
+	canvas.width	= 86;
+	canvas.height	= 86;
+	var ctx		= canvas.getContext('2d');
+	ctx.beginPath(); 
+	ctx.strokeStyle	= "green"; 
+	ctx.lineWidth	= 6; 
+	ctx.arc( canvas.width/2, canvas.width/2, 40, 0, Math.PI*2, true); 
+	ctx.stroke();
+	return canvas;
+}