var WIDTH = 670;
var HEIGHT = 300;
var tempImg;
var iX = new Array(100);
var iY = new Array(100);
var iTouched = new Array(100);
var iDelete = new Array(100);
var XYcount = 1;
var i;
var drawingCanvas;
var context;
var mouseX;
var mouseY;
var dragMode = false;

function paintCanvas(){

	init();
			
	// Check the element is in the DOM and the browser supports canvas
	if(drawingCanvas && drawingCanvas.getContext) {
				 
		drawingCanvas.addEventListener("click", clickCanvas, false);
		drawingCanvas.addEventListener("mousemove", moveCanvas, false);
		drawingCanvas.addEventListener("mousedown", downCanvas, false);
		drawingCanvas.addEventListener("mouseup", upCanvas, false);
		
		drawXY();
	}
	
	
}

function init(){

	drawingCanvas = document.getElementById('myDrawing');
	context = drawingCanvas.getContext('2d');

	iX[0] = 0;
	iY[0] = HEIGHT - 50;
	iTouched[0] = false;
	
	for(i=1; i<100; i++){
		iX[i] = WIDTH;
		iY[i] = HEIGHT - 50;
		iTouched[i] = false;
		iDelete[i] = false;
	}
}

function drawXY(){

	clear();
	//context.fillStyle = "#DDDDDD";
	context.strokeStyle = "#DDDDDD";
		
	for(i=0; i<XYcount+1; i++){
		context.beginPath();
		if(iDelete[i]){
			context.fillStyle = "#B22222";
		}
		else if(iTouched[i]){
		  context.fillStyle = "#3399CC";
		}
		else{
			context.fillStyle = "#DDDDDD";
		}
		if(iTouched[i]){
			context.arc(iX[i], iY[i], 4, 0, Math.PI*2, 0);
		}
		else{
			context.arc(iX[i], iY[i], 3, 0, Math.PI*2, 0);
		}
		if(iDelete[i]){
			context.arc(iX[i], iY[i], 6, 0, Math.PI*2, 0);
		}
		context.closePath();
		context.fill();
	}
	
	context.beginPath();
	for(i=0; i<XYcount+1; i++){
		context.lineTo(iX[i], iY[i])
	}
	context.closePath();
	context.stroke();
		
}

function clickCanvas(event){
    
	var index = 1;
    var anyTouched = false;
	
	for(i=1; i<XYcount+1; i++){
		if(iTouched[i]){
			anyTouched = true;
			break;
		}
	}
	
	if(anyTouched){
	}
	else{
		mouseY = event.layerY - drawingCanvas.offsetTop;
		mouseX = event.layerX - drawingCanvas.offsetLeft;
		
		for(i=1; i<XYcount+1; i++){
			if(mouseX < iX[i]){
				index = i;
				break;
			}
		}
		
		for(i=XYcount+1; i>index; i--){
			iX[i] = iX[i-1];
			iY[i] = iY[i-1];
		}
				
		iX[index] = mouseX;
		iY[index] = Math.min(mouseY, HEIGHT-50);
		
		XYcount = XYcount + 1;

		drawXY();
	}
}

function downCanvas(event){
	for(i=1; i<XYcount+1; i++){
		if(iTouched[i]){
			dragMode = true;			
			break;
		}
	}
}

function upCanvas(event){
	dragMode = false;
	for(i=1; i<XYcount; i++){
		if(iDelete[i]){
			for(var j=i; j<XYcount+1; j++){
				iX[j] = iX[j+1];
				iY[j] = iY[j+1];
			}
			iDelete[i] = false;
			XYCount--;
			break;
		}
	}
}

function moveCanvas(event){
	
	mouseX = event.layerX - drawingCanvas.offsetLeft;
	mouseY = event.layerY - drawingCanvas.offsetTop;
		
	if(!dragMode){
		document.body.style.cursor = 'default';
		for(i=1; i<XYcount; i++){
			iTouched[i] = false;
			if(Math.abs(iX[i]-mouseX)<8 && Math.abs(iY[i]-mouseY)<8){
				document.body.style.cursor = 'pointer';
				iTouched[i] = true;
				break;
			}
		}
	}
	else{
		for(i=1; i<XYcount+1; i++){
			if(iTouched[i]){
				iDelete[i] = false;
				iX[i] = Math.min(Math.max(event.layerX - drawingCanvas.offsetLeft, iX[i-1]), iX[i+1]);
				iY[i] = Math.min(event.layerY - drawingCanvas.offsetTop, HEIGHT-50);
				for(var j=1; j<XYcount+1; j++){
					if(i!=j && Math.abs(iX[i]-iX[j])<8 && Math.abs(iY[i]-iY[j])<8){
						iDelete[i] = true;
					}
				}
				break;
			}
		}
	}
	
	drawXY();
	context.fillStyle = "#DDDDDD";
	context.fillText("x: "+getAzimut(mouseX)+" y: "+getElevation(mouseY), mouseX+5, mouseY-5);
}

function dragPoint(event, i){
	
	mouseY = event.layerY - drawingCanvas.offsetTop;
	mouseX = event.layerX - drawingCanvas.offsetLeft;
	
	iX[i] = mouseX;
	iY[i] = Math.min(mouseY, HEIGHT-50);
	
	drawXY();
}

function getAzimut(xWert){
	return Math.round((180 - xWert/(WIDTH/2) * 180) * 100)/100;
}

function getElevation(yWert){
	return Math.round((90 - yWert/(HEIGHT-50) * 90) * 100)/100;
}

function clear() {
	// Create the grey frame
	context.strokeStyle = "#000000";
	context.fillStyle = "#333333";
	context.fillRect(0,0, WIDTH, HEIGHT);
	
	context.fillStyle = "#555555";
	context.fillRect(0,HEIGHT-50, WIDTH, 50);
	
}