const canvas = document.getElementById("backgroundCanvas");

PIXI.utils.skipHello();

const app = new PIXI.Application({
	view: canvas,
	width: window.innerWidth,
	height: window.innerHeight,
	resolution: window.devicePixelRatio,
	autoDensity: true,
	antialias: true
});
let graphic = new PIXI.Graphics();
app.stage.addChild(graphic);
app.ticker.add(animationloop);
//app.ticker.start();

//render quality related global vars
var time = 0;
var slowFrames = 0;
var fastFrames = 0;
var lastLoop = new Date();
//User input related vars
var mouseX = 0;
var mouseY = 0;
var clickX = 0;
var clickY = 0;
var keyX = 0;
var keyY = 0;
var globalX = 300;
var globalY = 300;
var tempGlobalX = 300;
var tempGlobalY = 300;
var dragging = false;
var pressing = false;
var scrollDelta = 0;
var zoom = 100;
var colorMod = 10;
var tempColorMod = 10;
var modifier = 24;
var tempModifier = 24;
var iterations = 6; //changes how deep the picture is, ish? higher numbers = slower
//how many screen pixels wide/high each pixel is
var res = 20;
function animationloop() {
	//res= 3;
	time++;
	//CALCULATE FPS
	var thisLoop = new Date();
	var fps = 1000 / (thisLoop - lastLoop);
	lastLoop = thisLoop;
	//console.log(dragging)
	//if the fps is way too low, increment a counter to make sure it is not a fluke
	if (fps < 15) {
		slowFrames++;
	}
	if (fps > 45) {
		fastFrames++;
	}
	//if our counter keeps incrementing, decrease resolution and reset the counter
	if (slowFrames > 3) {
		res++;
		slowFrames = 0;
	}
	//if our framerate is good for ~300 frames, increase the resolution
	//this function increases the number of good frames required as we get more frames and aproaches ~300
	if (fastFrames > Math.atan((time * time) / 1000000) * 200 + 3) {
		res--;
		fastFrames = 0;
		if (res < 1)
			//make sure resolution doesn't get better than 1 pixel (otherwise bad things happen)
			res = 1;
	}
	var width = app.screen.width;
	var height = app.screen.height;
	graphic.clear();
	graphic.alpha = 1;
	graphic.lineStyle(0, 0xffffff);
	if (dragging) {
		tempGlobalX = globalX + mouseX - clickX;
		tempGlobalY = globalY + mouseY - clickY;
	}
	if (pressing) {
		tempColorMod = colorMod + mouseX - keyX;
		tempModifier = modifier + mouseY - keyY;
		console.log(tempModifier)
	}
	zoom += scrollDelta;
	scrollDelta *= 0.85;
	renderFractal(res, 1 / zoom, tempModifier);
	//modifier+=.01;
}
function renderFractal(res, scale, mod) {
	for (var y = window.innerHeight / 2 + res; y > -1 * res; y -= res) {
		for (var x = window.innerWidth / 2; x > -1 * res; x -= res) {
			var ytemp = scale * (y - tempGlobalY);
			var xtemp = scale * (x - tempGlobalX); //-mouseX);
			//store modified x and y values for input into the XOR

			var h = (xor(xtemp + ytemp, ytemp, mod + 0.05) % 255) / 255; //modifier value +- .05 adds color
			var s = 1;
			var l = (xor(xtemp, ytemp + xtemp, mod - 0.1) % 255) / 255; //+70 for blue background
			graphic.beginFill(hslToHex(h, s, l));
			rect(x, y, res, res);
			rect(x, window.innerHeight - y, res, res);
			rect(window.innerWidth - x, y, res, res);
			rect(window.innerWidth - x, window.innerHeight - y, res, res);
		}
	}
}
function xor(x, y, mod) {
	y = y - 1; //fixes strange center glitch
	//a modified xor (not actually xor)
	x = x - 1;
	var out = 0;
	for (i = 0; i < iterations; i++) {
		var powI = Math.pow(
			mod / 100 + 1,
			i * (tempColorMod / window.innerWidth) * 4
		);
		out += Math.abs(
			200 * powI * ((Math.round(x / powI) * Math.round(y / powI)) % 2)
		);
	}
	return out;
}
function line(x0, y0, x1, y1) {
	graphic.moveTo(x0, y0);
	graphic.lineTo(x1, y1);
}
function rect(x0, y0, x1, y1) {
	graphic.drawRect(x0, y0, x1, y1);
}

window.addEventListener("resize", function () {
	app.renderer.resize(window.innerWidth, window.innerHeight);
});

canvas.onmousemove = function (e) {
	mouseX = e.pageX - this.offsetLeft;
	mouseY = e.pageY - this.offsetTop;
};
window.addEventListener("keydown", function (event) {
	
	const key = event.key; // "a", "1", "Shift", etc.
	
	if ((key == "f" && !pressing)) {
		keyX = mouseX;
		keyY = mouseY;
		pressing = true;
	}
	if (key == "w") {
		iterations++;
	}
	
	if (key == "s") {
		iterations--;
		if(iterations < 1){
			iterations = 1;
		}
	}
	if (key == "h") {
		if(canvas.style.zIndex == -99){
			canvas.style.zIndex = 99;
		}else{
			canvas.style.zIndex = -99;
		}
	}
});
window.addEventListener("keyup", function (event) {
	const key = event.key; // "a", "1", "Shift", etc.
	if (key == "f") {
		colorMod = colorMod + mouseX - keyX;
		modifier = modifier + mouseY - keyY;
		pressing = false;
	}

});

document.getElementById("mainContainer").onClick = function(){
	canvas.style.zIndex = 99;
}
canvas.addEventListener("mousedown", function () {
	clickX = mouseX;
	clickY = mouseY;
	dragging = true;
});
canvas.addEventListener("mouseup", function () {
	dragging = false;
	globalX = globalX + mouseX - clickX;
	globalY = globalY + mouseY - clickY;
});

function MouseWheelHandler(e) {
	//http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
	// cross-browser wheel delta
	var e = window.event || e;
	scrollDelta += Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
}
if (canvas.addEventListener) {
	canvas.addEventListener("mousewheel", MouseWheelHandler, false);
	canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else canvas.attachEvent("onmousewheel", MouseWheelHandler);

function hslToHex(h, s, l) {
	var r, g, b;

	if (s == 0) {
		r = g = b = l; // achromatic
	} else {
		function hue2rgb(p, q, t) {
			if (t < 0) t += 1;
			if (t > 1) t -= 1;
			if (t < 1 / 6) return p + (q - p) * 6 * t;
			if (t < 1 / 2) return q;
			if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
			return p;
		}

		var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
		var p = 2 * l - q;

		r = hue2rgb(p, q, h + 1 / 3);
		g = hue2rgb(p, q, h);
		b = hue2rgb(p, q, h - 1 / 3);
	}

	return PIXI.utils.rgb2hex([r, g, b]);
}