<!DOCTYPE html>
<html>
<head>
	<title>SpriteGen</title>
	<link rel="stylesheet" type="text/css" href="SpriteGen.css">
</head>
<body>

	<div id="codeContainer" ondblclick="this.style.zIndex='-1';this.style.opacity='0'">
		<h2>CODE</h2>
		<h4>Poids : </h4>
		<p></p>
	</div>

	<input type="file" id="fileChooser" onchange="Test(this.files[0].name);restart();">
	<img src="Rat.png" id="bordel" style="border: 5px solid blue;">
	<div class="container" >
		<canvas id="backGround"></canvas>
		<canvas id="foreGround"></canvas>
		<canvas id="activeLayer"></canvas>
	</div>

	<button onclick="sketch.push(new coord(999,0));draw();">Séparer</button>
	<button onclick="restart()">Recommencer</button>
	<button onclick="ereaser()">Effacer le dernier point</button>
	<button onclick="codeGenerator()">Générer le code</button>
	<input type="range" id="zoom" min="2" max="30" value="10" onchange="zoom(this.value)" name="zoom">
	<pre>SpriteGen, conçu par Drak, 2018.</pre>

	<script type="text/javascript" src="Bresenham.js"></script>
	<script type="text/javascript">
		var consoleOutput = document.getElementsByTagName('pre')[0];

		var bg = document.getElementById('backGround');
			var bgCtx = bg.getContext('2d');

		var fg = document.getElementById('foreGround');
			var fgCtx = fg.getContext('2d');

		var al = document.getElementById('activeLayer');
			var alCtx = al.getContext('2d');
		
		var colorList = ['BlueViolet','Blue','Brown','CadetBlue','Crimson', 'DarkBlue', 'DarkRed', 'DarkGreen', 'DarkOrchid', 'DarkSlateBlue', 'DimGray', 'HotPink', 'MediumPurple', 'Olive', 'Yellow'];
		var index = 0;

		var cnvsCont = document.getElementsByClassName('container')[0];

		var lol = document.getElementById('bordel');

		function coord(x, y) {		
			this.x = x;
			this.y = y;
		}

		var sketch = [new coord(999, 0)];

		function Test(value) {	
			lol.src = value;
			lol.onload = function(){
				bg.width = lol.width;
				bg.height = lol.height;
				fg.width = lol.width;
				fg.height = lol.height;
				al.width = lol.width;
				al.height = lol.height;
				cnvsCont.style.height = (10*lol.height) + "px";
				cnvsCont.style.width = (10*lol.width) + "px";
				document.getElementById('zoom').value = 10;
				bgCtx.drawImage(lol,0,0);
			}
		}

		al.onmousemove = function(event) {
			var cPos = al.getBoundingClientRect();
			var factor = document.getElementById('zoom').value;
			var x = Math.ceil((event.clientX - cPos.left)/factor );
			var y = Math.ceil((event.clientY - cPos.top)/factor );
			consoleOutput.innerHTML = x + ", " + y;
			alCtx.clearRect(0,0,lol.width, lol.height);
			alCtx.fillStyle="red";
			var index = sketch.length-1;
			if (sketch[index].x === 999) {
				plot(x-1, y-1, alCtx);
			} else {
				plotLine(sketch[index].x-1, sketch[index].y-1, x-1, y-1, alCtx);
			}
		}

		al.onclick = function(event) {
			var cPos = al.getBoundingClientRect();
			var factor = document.getElementById('zoom').value;
			var x = Math.ceil((event.clientX - cPos.left)/factor );
			var y = Math.ceil((event.clientY - cPos.top)/factor );
			var newPoint = new coord(x , y);
			sketch.push(newPoint);
			draw();
			consoleOutput.innerHTML = "Nombre de points : " + (sketch.length-1);
		}

		function zoom(factor) {
			cnvsCont.style.height = (factor*lol.height) + "px";
			cnvsCont.style.width = (factor*lol.width) + "px";
		}

		function draw() {
			fgCtx.clearRect(0,0,lol.width,lol.height);
			fgCtx.fillStyle=colorList[index];
			var a;
			index = 0;
			fgCtx.fillStyle=colorList[index]
			for ( a = 1; a < sketch.length; a++ ) {
				if (sketch[a].x === 999) {
					index = (index + 1)%colorList.length;
					fgCtx.fillStyle=colorList[index];
				} else {
					if (sketch[a-1].x === 999) {
						plot(sketch[a].x-1, sketch[a].y-1, fgCtx);
					} else {
						plotLine(sketch[a-1].x-1, sketch[a-1].y-1, sketch[a].x-1, sketch[a].y-1, fgCtx);
					}
				}
			}
		}

		function ereaser() {
			if (sketch.length > 1) {
				sketch.pop();
				draw();
			} else {consoleOutput.innerHTML = "Il n'y a plus de point à effacer !";}
		}

		function codeGenerator() {
			alCtx.clearRect(0,0,lol.width, lol.height);
			var winCode = document.getElementById('codeContainer');
			winCode.style.zIndex = "2";winCode.style.opacity = "1";
			winCode = winCode.lastElementChild;
			console.log(winCode); var tempY;
			winCode.innerHTML = "{";
			for (var a = 1 ; a<=sketch.length ; a++) {
				console.log(a);
				if (sketch[a] != undefined) {
					if (sketch[a].x === 999) {
						winCode.innerHTML += "9, ";
					} else {
						winCode.innerHTML += sketch[a].x + ".";
						tempY = lol.height-sketch[a].y;
						if (tempY<10) { winCode.innerHTML += "0";}
						winCode.innerHTML += tempY + ", ";
					}
				}
			}
			winCode.innerHTML = winCode.innerHTML.slice(0,winCode.innerHTML.length-2);
			winCode.innerHTML = winCode.innerHTML.replace(/.00,/g, ",");
			winCode.innerHTML = winCode.innerHTML.replace(/0,/g, ",");
			winCode.parentElement.getElementsByTagName('h4')[0].innerHTML = "Size : " + (winCode.innerHTML.length - sketch.length) + " octets";
			winCode.innerHTML += " -> List 7";
		}

		function restart() {
			if (sketch.length > 1) {
				if (confirm('Effacer tous les points ?') === true) {
					sketch = [new coord(999, 0)];
					draw();
				}
			}
		}

		Test("Rat.png");
		

	</script>

</body>
</html>