document.addEventListener(
	"DOMContentLoaded",
	function(){
		// console.log("DOMContentLoaded");
		canvas = document.getElementById('areaDiDisegno');
		// console.log(canvas);
		context = canvas.getContext('2d');
		
		var controlsHeight = document.getElementById('controls').offsetHeight;
		
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight - controlsHeight;
		
		[].forEach.call(
			document.querySelectorAll('.bottone'),
			function(el){
				console.log("bottone");
				el.addEventListener('click', function(){
					var id = this.id;
					console.log(id);
					
					var colore = id.match(/[A-Z][a-z]+/g);
					
					if(id=="bottoneCancella"){
						cancella();
					} else {
						selezionaColore({colore: colore[0].toLowerCase()});
					}
				});
			}
		);
		
		canvas.addEventListener("mousedown", function(e){
			trovaCoordinate('down', e);
		});
		
		canvas.addEventListener("mousemove", function(e){
			trovaCoordinate('move', e);
		});
		
		canvas.addEventListener("mouseup", function(e){
			trovaCoordinate('up', e);
		});
		
		
	},
	false
);

var canvas;
var context;
var coloreSelezionato = 'black';
var larghezzaLinea = 2;
var puntoInizioDisegnoX = 0;
var puntoInizioDisegnoY = 0;
var posizioneCorrenteMouseX = 0;
var posizioneCorrenteMouseY = 0;
var isDown = false;

function selezionaColore(obj) {
	console.log("selezionaColore" + obj.colore);
	larghezzaLinea = 2;
	switch(obj.colore) {
		case "verde":
			coloreSelezionato = "green";
		break;
		case "blu":
			coloreSelezionato = "blue";
		break;
		case "rosso":
			coloreSelezionato = "red";
		break;
		case "giallo":
			coloreSelezionato = "yellow";
		break;
		case "arancione":
			coloreSelezionato = "orange";
		break;
		case "nero":
			coloreSelezionato = "black";
		break;
		case "bianco":
			coloreSelezionato = "white";
			larghezzaLinea = 14;
		break;
	}
}

function trovaCoordinate(res, e){
	console.log("trovaCoordinate: " + res);
	if(res == 'down') {
		posizioneCorrenteMouseX = e.clientX - canvas.offsetLeft;
		posizioneCorrenteMouseY = e.clientY - canvas.offsetTop;
		
		console.log(posizioneCorrenteMouseX);
		console.log(posizioneCorrenteMouseY);
		
		puntoInizioDisegnoX = posizioneCorrenteMouseX;
		puntoInizioDisegnoY = posizioneCorrenteMouseY;
		
		isDown = true;
	}
	
	if (res=="up") {
		isDown = false;
	}
	
	if(res=="move") {
		if(isDown){
			
			puntoInizioDisegnoX = posizioneCorrenteMouseX;
			puntoInizioDisegnoY = posizioneCorrenteMouseY;
			posizioneCorrenteMouseX = e.clientX - canvas.offsetLeft;
			posizioneCorrenteMouseY = e.clientY - canvas.offsetTop;
			disegna();
		}
	}
}

function disegna(){
	console.log("disegna");
	context.beginPath();
	context.moveTo(puntoInizioDisegnoX, puntoInizioDisegnoY);
	context.lineTo(posizioneCorrenteMouseX, posizioneCorrenteMouseY);
	context.strokeStyle = coloreSelezionato;
	context.lineWidth = larghezzaLinea;
	context.stroke();
	context.closePath();
	
}


function cancella() {
	console.log("cancella");
	var finestraConferma = confirm("Vuoi davvero cancellare?");
	if(finestraConferma){
		context.clearRect(0, 0, canvas.width, canvas.height);
	}
	
};
