window.ontouchmove = function(event) {
	xm = event.touches[0].pageX;
	ym = event.touches[0].pageY;
	document.getElementById("touchx").innerHTML = xm + 'px';
	document.getElementById("touchy").innerHTML = ym + 'px';
}

if (document.body.contains(document.getElementById("motiona"))) {
	window.ondevicemotion = function(event) {
		ax = event.accelerationIncludingGravity.x
		ay = event.accelerationIncludingGravity.y
		az = event.accelerationIncludingGravity.z
		rotation = event.rotationRate;
		if (rotation != null) {
			arAlpha = Math.round(rotation.alpha);
			arBeta = Math.round(rotation.beta);
			arGamma = Math.round(rotation.gamma);
			document.getElementById("motiona").innerHTML = arAlpha + 'deg';
			document.getElementById("motionb").innerHTML = arBeta + 'deg';
			document.getElementById("motiong").innerHTML = arGamma + 'deg';
		}
	}
	
	window.ondeviceorientation = function(event) {
		alpha = Math.round(event.alpha);
		beta = Math.round(event.beta);
		gamma = Math.round(event.gamma);
		document.getElementById("orientationa").innerHTML = alpha + 'deg';
		document.getElementById("orientationb").innerHTML = beta + 'deg';
		document.getElementById("orientationg").innerHTML = gamma + 'deg';
	}
}

//var element = document.getElementsByTagName('body')[0];
var element = document.getElementById('compass');
var forceValueOutput = document.getElementById('force');
var touch = null;

//addForceTouchToElement(element);

function onTouchStart(e) {
	e.preventDefault();
	checkForce(e);
	alert('toch start');
}

function onTouchMove(e) {
	e.preventDefault();
	checkForce(e);
}

function onTouchEnd(e) {
	e.preventDefault();
	touch = null;
	alert('toch start');
}

function checkForce(e) {
	touch = e.touches[0];
	setTimeout(refreshForceValue.bind(touch), 10);
}

function refreshForceValue() {
	var touchEvent = this;
	var forceValue = 0;
	if (touchEvent) {
		forceValue = touchEvent.force || 0;
		setTimeout(refreshForceValue.bind(touch), 10);
	} else {
		forceValue = 0;
	}
	renderElement(forceValue);
}

function renderElement(forceValue) {
	//element.style.webkitTransform = 'translateX(-50%) translateY(-50%) scale(' + (1 + forceValue * 1.5) + ')';
	//element.style.webkitFilter = 'hue-rotate(' + forceValue * 240 + 'deg)';
	//background.style.webkitFilter = 'blur(' + forceValue * 30 + 'px)';
	element.style.webkitTransform = 'scale(' + (1 + forceValue * 1.5) + ')';
	forceValueOutput.innerHTML = forceValue.toFixed(4)*100;
}

function addForceTouchToElement(elem) {
	elem.addEventListener('touchstart', onTouchStart, false);
	elem.addEventListener('touchmove', onTouchMove, false);
	elem.addEventListener('touchend', onTouchEnd, false);
}