more work on virtualjoystick

css/osd.css

@@ -4,6 +4,7 @@
  position : absolute;
  top : 0;
  left : 0;
+ z-index : 10;
 }
 
 #osdContainer .subContainer {

index.html

@@ -8,6 +8,7 @@
 
  <link rel='stylesheet' href="css/main.css" />
  <link rel='stylesheet' href="css/osd.css" />
+ <link rel='stylesheet' href="css/virtualjoystick.css" />
  <link rel='stylesheet' href="css/pageLandingMain.css" />
  <link rel='stylesheet' href="css/embedded.css" />
 
@@ -30,7 +31,7 @@
  ******************************************************************************** -->
  <div id="canvasContainer"></div>
  <!-- *****************************************************************************
- canvasContainer
+ virtualjoystickContainer
  ******************************************************************************** -->
  <div id="virtualjoystickContainer"><div class="subContainer">
  </div></div>

js/pageGameMain.js

@@ -9,7 +9,7 @@ Marble.PageGameMain = function()
  osdLayer = new Marble.OsdLayer();
  osdLayer.livesSet( this._playerLives );
 
- if( true || !VirtualJoystick.touchScreenAvailable() ){
+ if( true ||  !VirtualJoystick.touchScreenAvailable() ){
  this._virtualJoystick = new VirtualJoystick({
  mouseSupport : true
  }); 

vendor/virtualjoystick.js/virtualjoystick.js

@@ -34,9 +34,9 @@ var VirtualJoystick = function(opts)
  this._$onMouseDown = __bind(this._onMouseDown , this);
  this._$onMouseUp = __bind(this._onMouseUp , this);
  this._$onMouseMove = __bind(this._onMouseMove , this);
- this._container.addEventListener( 'mousedown' , this._$onMouseDown , true );
- this._container.addEventListener( 'mouseup' , this._$onMouseUp , true );
- this._container.addEventListener( 'mousemove' , this._$onMouseMove , true );
+ this._container.addEventListener( 'mousedown' , this._$onMouseDown , false );
+ this._container.addEventListener( 'mouseup' , this._$onMouseUp , false );
+ this._container.addEventListener( 'mousemove' , this._$onMouseMove , false );
  }
 }
 
@@ -49,8 +49,8 @@ VirtualJoystick.prototype.destroy = function()
  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( 'mouseup' , this._$onMouseUp , false );
  this._container.removeEventListener( 'mousemove' , this._$onMouseMove , false );
  }
 }
@@ -166,7 +166,8 @@ VirtualJoystick.prototype._onMouseDown = function(event)
 {
  var x = event.clientX;
  var y = event.clientY;
- return this._onDown(x, y);
+ //return
+ this._onDown(x, y);
 }
 
 VirtualJoystick.prototype._onMouseMove = function(event)