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;

document.addEventListener("DOMContentLoaded", function(){
	canvas = document.getElementById('areaDiDisegno');
	context = canvas.getContext('2d');
	
	
	//var borderWidth = getComputedStyle(canvas, null).borderWidth;

	//canvas.width = window.innerWidth - parseInt(borderWidth) * 2;
	var controlsHeight = document.getElementById('controls').offsetHeight;

	//canvas.height = window.innerHeight - controlsHeight - parseInt(borderWidth) * 2;
	
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight - controlsHeight - 20;
	
	[].forEach.call(
		document.querySelectorAll('.bottone'),
		function(el) {
			console.log("EL: " + el);
			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("mousemove", function(e) {
		trovaCoordinate('move', e);
	}, false);
	canvas.addEventListener("mousedown", function(e) {
		trovaCoordinate('down', e);
	}, false);
	canvas.addEventListener("mouseup", function(e) {
		trovaCoordinate('up', e);
	}, false);
	canvas.addEventListener("mouseout", function(e) {
		trovaCoordinate('out', e);
		;
	}, false);

	
});




function selezionaColore(obj) {
	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;
	default:
		larghezzaLinea = 2;
	break;
	}
	

};


function trovaCoordinate(res, e) {
	if (res == 'down') {
		puntoInizioDisegnoX = posizioneCorrenteMouseX;
		puntoInizioDisegnoY = posizioneCorrenteMouseY;
		posizioneCorrenteMouseX = e.clientX - canvas.offsetLeft;
		posizioneCorrenteMouseY = e.clientY - canvas.offsetTop;

		isDown = true;
	}
	
	if (res == 'up' || res == "out") {
		isDown = false;
	}
	
	if (res == 'move') {
		if (isDown) {
			puntoInizioDisegnoX = posizioneCorrenteMouseX;
			puntoInizioDisegnoY = posizioneCorrenteMouseY;
			posizioneCorrenteMouseX = e.clientX - canvas.offsetLeft;
			posizioneCorrenteMouseY = e.clientY - canvas.offsetTop;
			disegna();
		}
	}
}


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


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

	}
}


