//p5 X --> Y
//p5 Y --> -Z
//p5 Z --> X

//line(y1, -z1, x1, y2, -z2, x2)

let debug = false,
	viewPort = {x: 0, y: 0, z: 0},
	arrows = [],
	quads = [],
	cuboids = [],
	state = 0,
	scale = 25,
	grid = true;

let oldMouse = {x: 0, y: 0},
	rotation = {x: 0, y: 0};
	

function setup() {
	setFrameRate(60);
	let c = createCanvas($("#canvasHolder").width(), $("#canvasHolder").height(), WEBGL);
	c.parent("canvasHolder");
	$("#cheatInput").css("display", "none");
}

function draw() {
	background(20);
	translate(-50, 50, 0);
	rotateX(-PI / 16);
	rotateY(-PI / 8);
	myOrbitControl();
	checkKeys();
	drawCoordSystem();
	for (let a of arrows) a.show();	
	for (let q of quads) q.show();
	for (let c of cuboids) c.show();
}

let vectorA1 = () => new Arrow(2, 2, 2, 4, 0, 0, "#FFF", true);
let vectorB1 = () => new Arrow(2, 2, 2, 0, 6, 0, "#FFF");
let vectorC1 = () => new Arrow(2, 2, 2, 3, 0, 5, "#FFF");
let vectorA2 = () => new Arrow(2, 2, 2, 2, 3, -2, "#FFF", true);
let vectorB2 = () => new Arrow(2, 2, 2, 0, 3, 2, "#FFF");
let vectorC2 = () => new Arrow(2, 2, 2, 3, -1, 6, "#FFF");
let createCuboid = (a1, a2, a3, h) => new Cuboid(a1, a2, a3, color(100, 255, 255), h);
let createQuad = (a1, a2) => new Quad(a1, a2, color(255, 200, 100));
let crossVector = (a1, a2) => Arrow.cross(a1, a2, "#FE9");

function drawCoordSystem(){
	
	strokeWeight(5);
	
	let strong = 10,
		weak = 150;
	
	let longLength = 300;
	let shortLength = longLength / 3;
	
	let long = longLength - longLength % scale;
	let short = shortLength - shortLength % scale;
	
	//X
	stroke(strong, strong, 255); //strong
	line(0, 0, long, 0, 0, 0);
	stroke(weak, weak, 255); //weak
	line(0, 0, 0, 0, 0, -short);
	
	//Y
	stroke(255, strong, strong); //strong
	line(long, 0, 0, 0, 0, 0);
	stroke(255, weak, weak); //weak
	line(0, 0, 0, -short, 0, 0);
	
	//Z
	stroke(strong, 255, strong); //strong
	line(0, -long, 0, 0, 0, 0);
	stroke(weak, 255, weak); //weak
	line(0, 0, 0, 0, short, 0);
	
	if (grid){
		strokeWeight(1);

		//Multiple for XY
		stroke("rgba(255, " + weak + ", 255, 0.3)");
		for (let y = -short; y <= longLength; y += scale) line(y, 0, long, y, 0, -short);
		for (let x = -short; x <= longLength; x += scale) line(long, 0, x, -short, 0, x);
		
		//Multiple for XZ
		stroke("rgba(" + weak + ", 255, 255, 0.3)");
		for (let z = -short; z <= longLength; z += scale) line(0, -z, long, 0, -z, -short);
		for (let x = -short; x <= longLength; x += scale) line(0, -long, x, 0, short, x);

		//Multiple for YZ
		stroke("rgba(255, 255, " + weak + ", 0.3)");
		for (let y = -short; y <= longLength; y += scale) line(y, -long, 0, y, short, 0);
		for (let z = -short; z <= longLength; z += scale) line(long, -z, 0, -short, -z, 0);
	}
	
}

function myOrbitControl(){
	if (mouseIsPressed){
		rotation.x -= map(mouseY - oldMouse.y, 0, height, 0, PI);
		rotation.y += map(mouseX - oldMouse.x, 0, width, 0, PI);
	}
	rotateX(rotation.x);
	rotateY(rotation.y);
	oldMouse.x = mouseX;
	oldMouse.y = mouseY;
}

function html(name, vector, first, second){
	if (name == null){
		$("#info").html("");
		return;
	}
	let dir = vector.dir;
	$("#info").append("<fieldset><table><tr><td></td><td><span></span></td><td></td><td><span></span></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td></tr></table></fieldset>");
	$("#info fieldset").last().attr({
		"class": "holder",
		"id": name
	});
	$("#" + name + " table tr:eq(0) td:eq(0)").html("<sub>&rarr;</sub>");
	$("#" + name + " table tr:eq(0) td:eq(0)").css({"text-align": "left", "-moz-transform": "translate(-2px, 30px) scale(1, 1)"});
	$("#" + name + " table tr:eq(0) td:eq(1) span").html("(");
	$("#" + name + " table tr:eq(0) td:eq(2)").html(dir.x);
	$("#" + name + " table tr:eq(0) td:eq(3) span").html(")");
	$("#" + name + " table tr:eq(0) td:eq(1), #" + name + " table tr:eq(0) td:eq(3)").attr({
		"style": "font-size: 70px",
		"rowspan": "3"
	});
	$("#" + name + " table tr:eq(1) td:eq(0)").html(name + " = ");
	$("#" + name + " table tr:eq(1) td:eq(1)").html(dir.y);
	$("#" + name + " table tr:eq(2) td:eq(1)").html(dir.z);
	
	if (first){
		$("#" + name + " table tr:eq(0) td:eq(5), #" + name + " table tr:eq(0) td:eq(7)").html("<sub>&rarr;</sub>");
		$("#" + name + " table tr:eq(0) td:eq(5), #" + name + " table tr:eq(0) td:eq(7)").css("-moz-transform", "translateY(30px)");
		$("#" + name + " table tr:eq(1) td:eq(2)").html(" = ");
		$("#" + name + " table tr:eq(1) td:eq(3)").html(first);
		$("#" + name + " table tr:eq(1) td:eq(4)").html("&times;");
		$("#" + name + " table tr:eq(1) td:eq(5)").html(second);
	}
}

function updater(){
	arrows = [];
	quads = [];
	cuboids = [];
	html(null);
	switch(state){
		case 1:
			arrows.push(vectorA1());
			html("a", vectorA1());
			break;
		case 2:
			arrows.push(vectorA1());
			arrows.push(vectorB1());
			html("a", vectorA1());
			html("b", vectorB1());
			break;
		case 3:
			arrows.push(vectorA1());
			arrows.push(vectorB1());
			arrows.push(crossVector(vectorA1(), vectorB1()));
			html("a", vectorA1());
			html("b", vectorB1());
			html("x", crossVector(vectorA1(), vectorB1()), "a", "b"); 
			break;
		case 4:
			arrows.push(vectorA1());
			arrows.push(vectorB1());
			arrows.push(crossVector(vectorA1(), vectorB1()));
			quads.push(createQuad(vectorA1(), vectorB1()));
			html("a", vectorA1());
			html("b", vectorB1());
			html("x", crossVector(vectorA1(), vectorB1()), "a", "b"); 
			break;
		case 5:
			arrows.push(vectorA1());
			arrows.push(vectorB1());
			html("a", vectorA1());
			html("b", vectorB1());
			break;
		case 6:
			arrows.push(vectorA1());
			arrows.push(vectorB1());
			arrows.push(vectorC1());
			html("a", vectorA1());
			html("b", vectorB1());
			html("c", vectorC1());
			break;
		case 7:
			arrows.push(vectorA1());
			arrows.push(vectorB1());
			arrows.push(vectorC1());
			cuboids.push(createCuboid(vectorA1(), vectorB1(), vectorC1(), true));
			html("a", vectorA1());
			html("b", vectorB1());
			html("c", vectorC1());
			break;
		case 8:
			arrows.push(vectorA1());
			arrows.push(vectorB1());
			arrows.push(vectorC1());
			arrows.push(crossVector(vectorA1(), vectorB1()));
			cuboids.push(createCuboid(vectorA1(), vectorB1(), vectorC1(), true));
			quads.push(createQuad(vectorA1(), vectorB1()));
			html("a", vectorA1());
			html("b", vectorB1());
			html("c", vectorC1());
			html("x", crossVector(vectorA1(), vectorB1()), "a", "b"); 
			break;
		case 9:
			break;
		case 10:
			arrows.push(vectorA2());
			html("a", vectorA2());
			break;
		case 11:
			arrows.push(vectorA2());
			arrows.push(vectorB2());
			html("a", vectorA2());
			html("b", vectorB2());
			break;
		case 12:
			arrows.push(vectorA2());
			arrows.push(vectorB2());
			arrows.push(vectorC2());
			html("a", vectorA2());
			html("b", vectorB2());
			html("c", vectorC2());
			break;
		case 13:
			quads.push(createQuad(vectorA2(), vectorB2()));
			arrows.push(vectorA2());
			arrows.push(vectorB2());
			arrows.push(vectorC2());
			html("a", vectorA2());
			html("b", vectorB2());
			html("c", vectorC2());
			break;
		case 14:
			cuboids.push(createCuboid(vectorA2(), vectorB2(), vectorC2(), false));
			quads.push(createQuad(vectorA2(), vectorB2()));
			arrows.push(vectorA2());
			arrows.push(vectorB2());
			arrows.push(vectorC2());
			html("a", vectorA2());
			html("b", vectorB2());
			html("c", vectorC2());
			break;
		case 15:
			cuboids.push(createCuboid(vectorA2(), vectorB2(), vectorC2(), false));
			quads.push(createQuad(vectorA2(), vectorB2()));
			arrows.push(crossVector(vectorA2(), vectorB2()));
			arrows.push(vectorA2());
			arrows.push(vectorB2());
			arrows.push(vectorC2());
			html("a", vectorA2());
			html("b", vectorB2());
			html("c", vectorC2());
			html("x", crossVector(vectorA2(), vectorB2()), "a", "b");
			break;
	}
}