gabriel/depthjs test

## depthjs test
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>

var accumulatedX = null;
var accumulatedY = null;
var smoothing = 0.95;

function move(data) {
  //data.x = 100-data.x;

  if (accumulatedX == null) {
    accumulatedX = data.x;
    accumulatedY = data.y;
    accumulatedZ = data.z;
  } else {
    accumulatedX = accumulatedX * smoothing + data.x * (1 - smoothing);
    accumulatedY = accumulatedY * smoothing + data.y * (1 - smoothing);
    accumulatedZ = accumulatedZ * smoothing + data.z * (1 - smoothing);
  }

  var x = accumulatedX * $(window).width() / 100;
  var y = accumulatedY * $(window).height() / 100;

  if (x < 0) x = 0;
  if (y < 0) y = 0;
  x = Math.min(x, $(window).width() - $('#test').width());
  y = Math.min(y, $(window).height() - $('#test').height());
  //console.log("Move to " + x + ", " + y);
  if (x != $('#test').css("left") || y != $('#test').css("top")) {
    $('#test').css({left: x, top: y});
  }
}

function init() {
  var $DepthJS_eventPort = $("#DepthJS_eventPort");

  var eventHandler = function(callback) {
    return function() {
      var jsonRep = $DepthJS_eventPort.text();
      var msg = JSON.parse(jsonRep);
      callback(msg.data);
    };
  };

  if ($DepthJS_eventPort.length > 0) {
    console.log("Binding to eventPort");
    $DepthJS_eventPort.bind("Move", eventHandler(move));
  } else {
    // This is created on document_end, so it may/may not be avail the first time
    setTimeout(init, 100);
  }
}

init();
</script>

</head>
<body>
  <div id="test" style="border: 1px solid black; background-color: rgb(238, 238, 238); width: 200px; height: 200px; text-align: center; position: absolute; left: 10px; top: 10px"> </div>
</body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

	<script>

	var accumulatedX = null;
	var accumulatedY = null;
	var smoothing = 0.95;

	function move(data) {
	//data.x = 100-data.x;

	if (accumulatedX == null) {
	accumulatedX = data.x;
	accumulatedY = data.y;
	accumulatedZ = data.z;
	} else {
	accumulatedX = accumulatedX * smoothing + data.x * (1 - smoothing);
	accumulatedY = accumulatedY * smoothing + data.y * (1 - smoothing);
	accumulatedZ = accumulatedZ * smoothing + data.z * (1 - smoothing);
	}

	var x = accumulatedX * $(window).width() / 100;
	var y = accumulatedY * $(window).height() / 100;

	if (x < 0) x = 0;
	if (y < 0) y = 0;
	x = Math.min(x, $(window).width() - $('#test').width());
	y = Math.min(y, $(window).height() - $('#test').height());
	//console.log("Move to " + x + ", " + y);
	if (x != $('#test').css("left") \|\| y != $('#test').css("top")) {
	$('#test').css({left: x, top: y});
	}
	}

	function init() {
	var $DepthJS_eventPort = $("#DepthJS_eventPort");

	var eventHandler = function(callback) {
	return function() {
	var jsonRep = $DepthJS_eventPort.text();
	var msg = JSON.parse(jsonRep);
	callback(msg.data);
	};
	};

	if ($DepthJS_eventPort.length > 0) {
	console.log("Binding to eventPort");
	$DepthJS_eventPort.bind("Move", eventHandler(move));
	} else {
	// This is created on document_end, so it may/may not be avail the first time
	setTimeout(init, 100);
	}
	}

	init();
	</script>

	</head>
	<body>
	<div id="test" style="border: 1px solid black; background-color: rgb(238, 238, 238); width: 200px; height: 200px; text-align: center; position: absolute; left: 10px; top: 10px"> </div>
	</body>
	</html>