<script src="/socket.io/socket.io.js"></script>
<script src="bower_components/virtualjoystick.js/virtualjoystick.js"></script>
<script src="../threex.cloudcontroller.js"></script>
<script src="../threex.cloudcontrollerscreenupdater.js"></script>
<script src="../threex.cloudcontrollervirtualjoystick.js"></script>
<body style='width:100%;margin: 0px; background-color: #bbbbbb; overflow: hidden;'>
<!-- <img id='remoteImage' src=''/>	 -->
<script>
window.addEventListener('load', function(event){
	
	//////////////////////////////////////////////////////////////////////////////////
	//		CloudController itself						//
	//////////////////////////////////////////////////////////////////////////////////
	
	var cloudController	= new THREEx.CloudController()

	cloudController.socket.on('connect', function(){
		console.log('connected to server')
	})
	cloudController.socket.on('disconnect', function(){
		console.warn('disconnected from server')
	})

	//////////////////////////////////////////////////////////////////////////////////
	//		screenUpdater							//
	//////////////////////////////////////////////////////////////////////////////////
	
	var screenUpdater	= new THREEx.CloudControllerScreenUpdater(cloudController)
	document.body.appendChild(screenUpdater.domElement)

	screenUpdater.sendResolution()
	
	setTimeout(function(){	
		screenUpdater.sendResolution()
	}, 1000*0.5)

	//////////////////////////////////////////////////////////////////////////////////
	//		virtualjoystick							//
	//////////////////////////////////////////////////////////////////////////////////

	var cloudVirtualJoystick	= new THREEx.CloudControllerVirtualJoystick(cloudController)
	setInterval(function(){
		cloudVirtualJoystick.sendIfChanged()
	}, 1000*1/60)

})

</script></body>