function RotationSupport(accelerationCallback) {

	this.controls = new RotationControls(accelerationCallback);

}

function RotationControls(accelCallback) {

	var width = 50, height = 100, depth = 10;

	var margin = 5, bottomMargin = 15;

	var angleX = 180;

	var angleY = 180;

	var angleZ = 180;

	var accelerationCallback = accelCallback;

	$("#sliderX").slider( {

		slide : updateAngleX,

		animate : true,

		max : 360,

		min : 0,

		value : angleX

	});

	$("#sliderY").slider( {

		slide : updateAngleY,

		animate : true,

		max : 360,

		min : 0,

		value : angleY

	});

	$("#sliderZ").slider( {

		slide : updateAngleZ,

		animate : true,

		max : 360,

		min : 0,

		value : angleZ

	});

	renderUI();

	function translateFace(xy, xz, yz) {

		var px = width / 2;

		var py = height / 2;

		var pz = depth/2;

		var points = [ {

			x : px,

			y : py,

			z : pz

		}, {

			x : px,

			y : -py,

			z : pz

		}, {

			x : -px,

			y : -py,

			z : pz

		}, {

			x : -px,

			y : py,

			z : pz

		} ];

		return rotate(points, xy, xz, yz);

	}

	function translateScreen(xy, xz, yz) {

		var px = width / 2;

		var py = height / 2;

		var pz = depth/2;

		var points = [ {

			x : px - margin,

			y : py - bottomMargin,

			z : pz

		}, {

			x : px - margin,

			y : -py + bottomMargin,

			z : pz

		}, {

			x : -px + margin,

			y : -py + margin,

			z : pz

		}, {

			x : -px + margin,

			y : py - margin,

			z : pz

		} ];

		return rotate(points, xy, xz, yz);

	}

	function translateBack(xy, xz, yz) {

		var px = width / 2;

		var py = height / 2;

		var pz = -depth/2;

		var points = [ {

			x : px,

			y : py,

			z : pz

		}, {

			x : px,

			y : -py,

			z : pz

		}, {

			x : -px,

			y : -py,

			z : pz

		}, {

			x : -px,

			y : py,

			z : pz

		} ];

		return rotate(points, xy, xz, yz);

	}

	function translateTop(xy, xz, yz) {

		var px = width / 2;

		var py = height / 2;

		var pz = depth/2;

		var points = [ {

			x : px,

			y : -py,

			z : pz

		}, {

			x : px,

			y : -py,

			z : -pz

		}, {

			x : px,

			y : py,

			z : -pz

		}, {

			x : px,

			y : py,

			z : pz

		} ];

		return rotate(points, xy, xz, yz);

	}

	function translateBottom(xy, xz, yz) {

		var px = -width / 2;

		var py = height / 2;

		var pz = depth/2;

		var points = [ {

			x : px,

			y : -py,

			z : pz

		}, {

			x : px,

			y : -py,

			z : -pz

		}, {

			x : px,

			y : py,

			z : -pz

		}, {

			x : px,

			y : py,

			z : pz

		} ];

		return rotate(points, xy, xz, yz);

	}

	function translateLeft(xy, xz, yz) {

		var px = width / 2;

		var py = height / 2;

		var pz = depth/2;

		var points = [ {

			x : px,

			y : py,

			z : pz

		}, {

			x : px,

			y : py,

			z : -pz

		}, {

			x : -px,

			y : py,

			z : -pz

		}, {

			x : -px,

			y : py,

			z : pz

		} ];

		return rotate(points, xy, xz, yz);

	}

	function translateRight(xy, xz, yz) {

		var px = width / 2;

		var py = -height / 2;

		var pz = depth/2;

		var points = [ {

			x : px,

			y : py,

			z : pz

		}, {

			x : px,

			y : py,

			z : -pz

		}, {

			x : -px,

			y : py,

			z : -pz

		}, {

			x : -px,

			y : py,

			z : pz

		} ];

		return rotate(points, xy, xz, yz);

	}

	function renderUI() {

		var canvas = document.getElementById("phoneposition");

		var ctx = canvas.getContext("2d");

		ctx.clearRect(0, 0, canvas.width, canvas.height);

		var r = 62;

		var xy = (180 - angleX) * Math.PI / 180;

		var yz = (angleY - 180) * Math.PI / 180;

		var xz = (180 - angleZ) * Math.PI / 180 + Math.PI / 2;

		var back = translateBack(xy, xz, yz);

		if ((back[0].z + back[2].z)/2 < 0) {

			paint(canvas, ctx, back);

		} else {

			paint(canvas, ctx, translateFace(xy, xz, yz));

			paintScreen(canvas, ctx, translateScreen(xy, xz, yz));

		}

		var dz = 0;

		if (back[0].z > back[3].z) {

			var bottom = translateBottom(xy, xz, yz);

			paint(canvas, ctx, bottom);

			dz = bottom[1].y - bottom[0].y;

		} else if (back[0].z != back[3].z) {

			var top = translateTop(xy, xz, yz);

			paint(canvas, ctx, top);

			dz = top[1].y - top[0].y;

		}

		if (back[1].z > back[0].z) {

			paint(canvas, ctx, translateLeft(xy, xz, yz));

		} else if (back[1].z != back[0].z) {

			paint(canvas, ctx, translateRight(xy, xz, yz));

		}

		var accelX = (back[1].y - back[0].y) / width;

		var accelY = (back[0].y - back[3].y) / height;

		var accelZ = dz / depth;

		notifyAcceleration(accelX, accelY, accelZ);	

	}

	function rotate(points, xy, xz, yz) {

		var res = new Array();

		for ( var p in points) {

			var px = points[p].x;

			var py = points[p].y;

			var pz = points[p].z;

			var rx = Math.sqrt(px * px + py * py);

			var angXY = Math.atan(px / py) + (px < 0 ? Math.PI : 0);

			px = rx * Math.sin(angXY + xy);

			py = rx * Math.cos(angXY + xy);

			var rz = Math.sqrt(px * px + pz * pz);

			var angXZ = (px == 0 ? 0 : Math.atan(pz / px))

					+ (px < 0 ? Math.PI : 0);

			px = rz * Math.sin(angXZ + xz);

			pz = rz * Math.cos(angXZ + xz);

			var ry = Math.sqrt(py * py + pz * pz);

			var angYZ = (pz == 0 ? 0 : Math.atan(py / pz))

					+ (pz < 0 ? Math.PI : 0);

			py = ry * Math.sin(angYZ + yz);

			pz = ry * Math.cos(angYZ + yz);

			res.push( {

				x : px,

				y : py,

				z : pz

			});

		}

		return res;

	}

	function updateAngleX(event, ui) {

		angleX = ui.value;

		renderUI();

	}

	function updateAngleY(event, ui) {

		angleY = ui.value;

		renderUI();

	}

	function updateAngleZ(event, ui) {

		angleZ = ui.value;

		renderUI();

	}

	function paint(canvas, ctx, points) {

		var xcoord = canvas.width / 2;

		var ycoord = canvas.height / 2;

		ctx.fillStyle = "yellow";

		ctx.strokeStyle = "black";

		ctx.beginPath();

		ctx.moveTo(xcoord + points[3].x, ycoord + points[3].y);

		for (point in points) {

			ctx.lineTo(xcoord + points[point].x, ycoord + points[point].y);

		}

		ctx.fill();

		ctx.beginPath();

		ctx.moveTo(xcoord + points[3].x, ycoord + points[3].y);

		for (point in points) {

			ctx.lineTo(xcoord + points[point].x, ycoord + points[point].y);

		}

		ctx.stroke();

	}

	function paintScreen(canvas, ctx, screen) {

		var xcoord = canvas.width / 2;

		var ycoord = canvas.height / 2;

		ctx.fillStyle = "grey";

		ctx.beginPath();

		ctx.moveTo(xcoord + screen[3].x, ycoord + screen[3].y);

		for (point in screen) {

			ctx.lineTo(xcoord + screen[point].x, ycoord + screen[point].y);

		}

		ctx.fill();

	}

	function notifyAcceleration(x, y, z) {

		accelerationCallback(x, y, z);

	}

}