var chart = function (jScore, eScore, qImage) {
	// Animation Parameters
	var jLineOffset = 0; // How long to wait before the J axis line starts moving.
	var jLineDuration = 2000; // How long it takes for the J axis line to grow fully.
	
	var eLineOffset = 600; // How long to wait before the E axis line starts moving.
	var eLineDuration = 1400; // How long it takes for the E axis line to grow fully.
	
	var pointOffset = 1800; // How long to wait before the point starts to fade in.
	var pointDuration = 600; // How long it takes for the point to fade in fully.

	var mapCoordinates = function (j, e) {
		// Origin of j,e space (0,0) on x,y space of the image:
		var xOrigin = 347;
		var yOrigin = 556;

		// Coordinates in chart j,e space.
		var jCoord = j * 3.59;
		var eCoord = e * 3.55;
		
		// Transformations between j,e space and x,y space.
		var jTrans = jCoord * Math.cos(Math.PI / 4);
		var eTrans = eCoord * Math.cos(Math.PI / 4);
		
		// Coorinates in image x,y space.
		var xCoord = xOrigin + jTrans - eTrans;
		var yCoord = yOrigin - jTrans - eTrans;
		
		return {x: xCoord, y: yCoord};
	}
	var getPointCoordinate = function (coord) {
		var coords = mapCoordinates(jScore, eScore);
		return (coords[coord] - 8);
	}
	var getJLineSize = function () {
		return jScore * 255 / 100;
	}
	var getJLineCoordinate = function (coord, origin) {
		var coords = mapCoordinates(0, eScore);
		switch (coord) {
			case "x": return coords.x;
			case "y": return coords.y - (origin ? 0 : getJLineSize());
		}
	}
	var getELineSize = function () {
		return eScore * 251 / 100;
	}
	var getELineCoordinate = function (coord, origin) {
		var coords = mapCoordinates(jScore, 0);
		switch (coord) {
			case "x": return coords.x - (origin ? 0 : getELineSize()) + 2; // 2px of "patch"
			case "y": return coords.y - (origin ? 0 : getELineSize()) + 2; // 2px of "patch"
		}
	}
	j("#chart-container")
		.css({
			position: "relative",
			width: "700px",
			height: "600px"
		})
		.append("<img/>").children("img:last")
			.attr("id", "chart-image")
			.attr("src", qImage)
			.attr("width", "700")
			.attr("height", "600")
			.css({
				position: "absolute",
				left: "0px",
				top: "0px",
				zIndex: "13"
			})
		.end()
		// J Axis Line
		.append("<div></div>").children("div:last")
			.attr("id", "chart-j-line")
			.css({
				position: "absolute",
				left: getJLineCoordinate("x", true) + "px",
				top: getJLineCoordinate("y", true) + "px",
				width: "0px",
				height: "0px",
				zIndex: "21",
				backgroundImage: "url('images/j-line.gif')",
				backgroundPosition: "top right"
			})
		.end()
		// E Axis Line
		.append("<div></div>").children("div:last")
			.attr("id", "chart-e-line")
			.css({
				position: "absolute",
				left: getELineCoordinate("x", true) + "px",
				top: getELineCoordinate("y", true) + "px",
				width: "0px",
				height: "0px",
				zIndex: "34",
				backgroundImage: "url('images/e-line.gif')",
				backgroundPosition: "top left"
			})
		.end()
		// Point
		.append("<div></div>").children("div:last")
			.attr("id", "chart-point")
			.css({
				position: "absolute",
				left: getPointCoordinate("x") + "px",
				top: getPointCoordinate("y") + "px",
				width: "16px",
				height: "16px",
				zIndex: "47",
				backgroundImage: "url('images/you.gif')",
				backgroundPosition: "top left",
				display: "none"
			})
		.end()
		// Animation
		.find("#chart-image")
			.load(function () {
				setTimeout(function () {
					j("#chart-j-line")
						.animate({
							left: getJLineCoordinate("x", false) + "px",
							top: getJLineCoordinate("y", false) + "px",
							width: getJLineSize() + "px",
							height: getJLineSize() + "px"
						}, jLineDuration)
					.end();
				}, jLineOffset);
				setTimeout(function () {
					j("#chart-e-line")
						.animate({
							left: getELineCoordinate("x", false) + "px",
							top: getELineCoordinate("y", false) + "px",
							width: getELineSize() + "px",
							height: getELineSize() + "px"
						}, eLineDuration)
					.end();
				}, eLineOffset);
				setTimeout(function () {
					j("#chart-point").fadeIn(pointDuration);
				}, pointOffset);
			})
		.end()
	.end();
};