function RotationSupport(accelerationCallback) {

	this.controls = new RotationControls(accelerationCallback);

}

function RotationControls(accelCallback) {

	$("#sliderX").slider( {

		slide : updateAngleX,

		animate : true,

		max : 360,

		min : 0,

	});

	$("#sliderY").slider( {

		slide : updateAngleY,

		animate : true,

		max : 360,

		min : 0,

	});

	$("#sliderZ").slider( {

		slide : updateAngleZ,

		animate : true,

		max : 360,

		min : 0,

	});

	function translateFace(xy, xz, yz) {

		var px = width / 2;

		var py = height / 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);

	}

		var px = width / 2;

		var py = height / 2;

		var points = [ {

			x : px,

			y : -py,

			z : pz

		}, {

			y : -py,

		}, {

			y : py,

			z : pz

		} ];

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

	}

		var py = height / 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 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 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 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 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);

	}