function System() {
	var container = null;
	var canvas = null;
	var contextType = '2d';
	var contextAttributes = {};
	var context = null;

	var system = null;
	this.game = null;
	var backgroundColor = "#D3D3D3";
	var framerate = 60;

	var lastTime = 0;

	this.create = function(elementName, gameObject, defaultBackgroundColor) {
		system = this;
		system.game = gameObject;
		backgroundColor = defaultBackgroundColor || backgroundColor;
		
		container = document.getElementById(elementName);
		canvas = document.createElement("canvas");
		container.appendChild(canvas);

		window.addEventListener('resize', system.handleResize);
		canvas.addEventListener('touchmove', system.handleTouchMove);
		canvas.addEventListener('mousemove', system.handleMouseMove);
		canvas.addEventListener('mousedown', system.handleMouseDown);
		canvas.addEventListener('contextmenu', system.handleContextMenu);
		canvas.addEventListener('touchstart', system.handleTouchStart);
		canvas.addEventListener('mouseup', system.handleMouseUp);
		canvas.addEventListener('touchend', system.handleTouchEnd);
		
		this.game.init(system, canvas);
		system.handleResize(null);
		
		window.requestAnimationFrame(system.handleRequestAnimationFrame);
	};

	this.getCanvasSize = function() {
		return {width: canvas.width + 0, height: canvas.height + 0};
	}

	this.preRender = function() {
		if(this.backgroundContext == null) {
			this.backgroundCanvas = document.createElement("canvas");
			this.backgroundCanvas.width = canvas.width;
			this.backgroundCanvas.height = canvas.height;
			this.backgroundContext = this.backgroundCanvas.getContext("2d");

			this.backgroundContext.fillStyle = backgroundColor;
			this.backgroundContext.fillRect(0, 0, this.backgroundCanvas.width, this.backgroundCanvas.height);
		}
	}

	this.handleResize = function(event) {
		canvas.width = container.offsetWidth;
		canvas.height = container.offsetHeight;
		context = canvas.getContext(contextType, contextAttributes);
		context.translate(0.5, 0.5);
		system.game.handleResize(canvas);
	};

	this.handleRequestAnimationFrame = function(event) {
		var currentTime = new Date().getTime();
		var delta = (currentTime - lastTime) / (1000 / framerate);
		if(delta > 100) {
			delta = (1000 / framerate);
		}
		system.game.updateDelta(canvas, delta);
		lastTime = currentTime;

		context.fillStyle = backgroundColor;
		context.fillRect(0, 0, canvas.width, canvas.height);

		system.game.draw(context);
		window.requestAnimationFrame(system.handleRequestAnimationFrame);
	};

	this.handleMouseMove = function(event) {
		system.game.mouseMove(canvas, event.offsetX, event.offsetY);
	};

	this.handleMouseDown = function(event) {
		system.game.mouseDown(canvas, event.button, event.offsetX, event.offsetY);
	};

	this.handleMouseUp = function(event) {
		system.game.mouseUp(canvas, event.button, event.offsetX, event.offsetY);
	};

	this.handleTouchStart = function(event) {
		system.game.touchStart(canvas, event.touches[0].clientX, event.touches[0].clientY);
	}

	this.handleTouchMove = function(event) {
		system.game.touchMove(canvas, event.touches[0].clientX, event.touches[0].clientY);
	}

	this.handleTouchEnd = function(event) {
		system.game.touchEnd(canvas, event.offsetX, event.offsetY);
	}

	this.handleContextMenu = function(event) {
		system.game.contextMenu(canvas, event);
		event.preventDefault();
		return false;
	};

	this.handleServerMessage = function(data) {
		system.game.receiveMessage(data);
	}

	this.formatFloat = function(val) {
		//console.log(val, Number.parseFloat(val), val.toFixed(4), Number.parseFloat(val).toFixed(4), parseFloat(val.toFixed(4)));
		if (Number.isNaN(parseFloat(val))) {
    		return 0;
  		}
		//return val;
		return parseFloat(val.toFixed(6));
	};
};