/// VARIABLEN DEFINIEREN

var input = "";
var output = "";
var clearinput = false;
var R_O_C = document.getElementById("rollOutCanvas").getContext("2d");
var R_I_C = document.getElementById("rollInCanvas").getContext("2d");
var H_P_X = document.getElementById("hidePowX").getContext("2d");
var shift = false;



/// FUNKTIONEN BESTIMMEN

// Maths

function renderInput(){
	// INPUTFELD AKTUALISIEREN
	document.getElementById("input").innerHTML = input;
}

function renderOutput(){
	// OUTPUTFELD AKTUALISIEREN
	document.getElementById("output").innerHTML = output;
}

function clearInput(){
	// INPUT ENTFERNEN
	if (clearinput == true){
		input = "";
	}
	clearinput = false;
}


function number(num){
	// NUMMERNFELD
	document.getElementById("num" + num).addEventListener("click", function(){
		clearInput();
		input += num;
		renderInput();
	});
}

function pow(pow_x){
	// POTENZEN
	document.getElementById("pow" + pow_x).addEventListener("click", function(){
		clearInput();
		switch(pow_x) {
			case 2:
				input += "²";
				break;
			case 3:
				input += "³";
				break;
			case 4:
				input += "⁴";
				document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
				window.setTimeout(hidePowDiv,250);
				break;
			case 5:
				input += "⁵";
				document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
				window.setTimeout(hidePowDiv,250);
				break;
			case 6:
				input += "⁶";
				document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
				window.setTimeout(hidePowDiv,250);
				break;
			case 7:
				input += "⁷";
				document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
				window.setTimeout(hidePowDiv,250);
				break;
			case 8:
				input += "⁸";
				document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
				window.setTimeout(hidePowDiv,250);
				break;
			case 9:
				input += "⁹";
				document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
				window.setTimeout(hidePowDiv,250);
				break;
		}
		renderInput();
	});
}

function trigonometry(tri_x){
	// TRIGONOMETRISCHE FUNKTIONEN
	document.getElementById(tri_x).addEventListener("click", function(){
		clearInput();
		switch(tri_x) {
			case "sine":
				input += "sin(";
				break;
			case "cosine":
				input += "cos(";
				break;
			case "tangent":
				input += "tan(";
				break;
			case "arcsine":
				input += "sin⁻¹(";
				break;
			case "arccosine":
				input += "cos⁻¹(";
				break;
			case "arctangent":
				input += "tan⁻¹(";
				break;
		}
		renderInput();
	});
}

function root(sqrt_cbrt){
	// WURZELN
	document.getElementById(sqrt_cbrt).addEventListener("click", function(){
		clearInput();
		if (sqrt_cbrt == "sqrt"){
			input += "√(";
		}else if (sqrt_cbrt == "cbrt"){
			input += "∛(";
		}
		renderInput();
	});
}

// Graphics

function hideArcTrigonometry(){
	// TRIGONOMISCHE UMKEHRUNGEN ZU BEGINN VERSTECKEN
	document.getElementById("arcsine").style.display = "none";
	document.getElementById("arccosine").style.display = "none";
	document.getElementById("arctangent").style.display = "none";
}


function drawRollOutCanvas(){
	// CANVAS NACH LINKS AUSRICHTEN
	document.getElementById("rollInCanvas").style.display = "none";
	document.getElementById("rollOutCanvas").style.display = "";
	document.getElementById("infoList").style.display = "none";
	document.getElementById("setCommas").style.display = "none";
}

function drawRollInCanvas(){
	// CANVAS NACH RECHTS AUSRICHTEN
	document.getElementById("rollInCanvas").style.display = "";
	document.getElementById("rollOutCanvas").style.display = "none";
	window.setTimeout(showList_Range,500);
}

function showList_Range(){
	// ANMERKUNGEN SICHTBAR MACHEN
	document.getElementById("infoList").style.display = "";
	document.getElementById("setCommas").style.display = "";
}


function hidePowDiv(){
	document.getElementById("inputForPowX").style.display = "none";
	powxVisible = false;
}

function deleteFlashing(){
	// BLINKEN STOPPEN
	document.getElementById("input").style.animation = "";
	document.getElementById("output").style.animation = "";
}


/// AUSFÜHREN BEIM LADEN DER SEITE

document.getElementById("comma").addEventListener("click", function(){
	// KOMMA
	clearInput();
	input += ",";
	renderInput();
});

document.getElementById("add").addEventListener("click", function(){
	// ADDIEREN
	clearInput();
	input += "+";
	renderInput();
});

document.getElementById("subtract").addEventListener("click", function(){
	// SUBTRAHIEREN
	clearInput();
	input += "-";
	renderInput();
});

document.getElementById("multiply").addEventListener("click", function(){
	// MULTIPLIZIEREN
	clearInput();
	input += "×";
	renderInput();
});

document.getElementById("divide").addEventListener("click", function(){
	// DIVIDIEREN
	clearInput();
	input += "÷";
	renderInput();
});

document.getElementById("In").addEventListener("click", function(){
	// LOGARITHMUS NATURALIS
	clearInput();
	input += "ln(";
	renderInput();
});

document.getElementById("parantheseOpen").addEventListener("click", function(){
	// KLAMMER AUF
	clearInput();
	input += "(";
	renderInput();
});

document.getElementById("parantheseClose").addEventListener("click", function(){
	// KLAMMER ZU
	clearInput();
	input += ")";
	renderInput();
});

document.getElementById("answer").addEventListener("click", function(){
	// ANTWORT BENUTZEN
	clearInput();
	if (output != 0){
		var lastAnswer = output.toString();
		input = input + lastAnswer;
		renderInput();
	}
});

document.getElementById("powX").addEventListener("click", function(){
	// HOCH VIER BIS NEUN ELEMENT
	if (powxVisible == false){
		document.getElementById("inputForPowX").style.display = "";
		document.getElementById("inputForPowX").style.animation = "showPowDiv 500ms ease";
		powxVisible = true;
	}else if(powxVisible == true){
		document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
		window.setTimeout(hidePowDiv,250);
	}
});

document.getElementById("hidePowX").addEventListener("click", function(){
	// HOCH VIER BIS NEUN ELEMENT VERSTECKEN
	document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
	window.setTimeout(hidePowDiv,250);
});

document.getElementById("equals").addEventListener("click", function(){
	// ERGEBNIS AUSRECHNEN
	rawInput = input;
	
	//Sonderzeichen zu Math-Elementen umwandeln
	rawInput = rawInput.replace(/,/g,".");
	rawInput = rawInput.replace(/×/g,"*");
	rawInput = rawInput.replace(/÷/g,"/");
	rawInput = rawInput.replace(/\(([^\(]*)\)²/g,"Math.pow($1, 2)");
	rawInput = rawInput.replace(/\(([^\(]*)\)³/g,"Math.pow($1, 3)");
	rawInput = rawInput.replace(/\(([^\(]*)\)⁴/g,"Math.pow($1, 4)");
	rawInput = rawInput.replace(/\(([^\(]*)\)⁵/g,"Math.pow($1, 5)");
	rawInput = rawInput.replace(/\(([^\(]*)\)⁶/g,"Math.pow($1, 6)");
	rawInput = rawInput.replace(/\(([^\(]*)\)⁷/g,"Math.pow($1, 7)");
	rawInput = rawInput.replace(/\(([^\(]*)\)⁸/g,"Math.pow($1, 8)");
	rawInput = rawInput.replace(/\(([^\(]*)\)⁹/g,"Math.pow($1, 9)");
	rawInput = rawInput.replace(/sin\(([^\(]*)\)/g,"Math.sin($1*(Math.PI/180))");
	rawInput = rawInput.replace(/cos\(([^\(]*)\)/g,"Math.cos($1*(Math.PI/180))");
	rawInput = rawInput.replace(/tan\(([^\(]*)\)/g,"Math.tan($1*(Math.PI/180))");
	rawInput = rawInput.replace(/sin⁻¹\(([^\(]*)\)/g,"(Math.asin($1)*(180/Math.PI))");
	rawInput = rawInput.replace(/cos⁻¹\(([^\(]*)\)/g,"(Math.acos($1)*(180/Math.PI))");
	rawInput = rawInput.replace(/tan⁻¹\(([^\(]*)\)/g,"(Math.atan($1)*(180/Math.PI))");
	rawInput = rawInput.replace(/ln\(([^\(]*)\)/g,"Math.log($1)");
	rawInput = rawInput.replace(/√\(([^\(]*)\)/g,"Math.sqrt($1)");
	rawInput = rawInput.replace(/∛\(([^\(]*)\)/g,"Math.cbrt($1)");
	
	try{
		output = eval(rawInput); // Rechnen
		clearinput = true;
		if (output != null){
			document.getElementById("output").style.animation = "FlashingOutput 250ms steps(3,start) 1";
			window.setTimeout(deleteFlashing,250);
		}
	}catch(e){
		document.getElementById("input").style.animation = "FlashingInput 250ms steps(3,start) 1";
		window.setTimeout(deleteFlashing,250);
		document.getElementById("verticalP").style.animation = "hide 0.5s ease-in";
		document.getElementById("rollInOut").style.animation = "rollOut 0.5s ease-out";
		document.getElementById("rollInOut").style.width = "500px";
		document.getElementById("rollInOut").style.paddingRight = "30px";
		document.getElementById("verticalP").style.opacity = "0.0";
		drawRollInCanvas();
		clearinput = false;
	}
	output = output.toString();
	var commas = document.getElementById("Commas").value;
	if (output.search("\\.") != -1){ 
		P_comma = output.search("\\.");
		afterComma = output.substr(P_comma+1, output.length-1);
		afterComma = afterComma.toString();
		lengthAfterComma = afterComma.length;
		if (lengthAfterComma > commas){
			output = parseFloat(output).toFixed(commas);
		}
	}
	renderOutput();
});

document.getElementById("clear").addEventListener("click", function(){
	// INPUT UND OUTPUT ENTFERNEN
	input = "";
	output = 0;
	renderInput();
	renderOutput();
});

document.getElementById("delete").addEventListener("click", function(){
	// DELETE FUNKTION
	if (input.substr(input.length-7, input.length-1) == "×" || input == "×"){ //Multiplikation
		input = input.replace(/×/,"");
	}else if (input.substr(input.length-8, input.length-1) == "÷" || input == "÷"){ //Division
		input = input.replace(/÷/,"");
	}else if (input.substr(input.length-6, input.length-1) == "²" || input == "²"){ //Potenz 2
		input = input.replace(/²/,"");
	}else if (input.substr(input.length-6, input.length-1) == "³" || input == "³"){ //Potenz 3
		input = input.replace(/³/,"");
	}else if (input.substr(input.length-7, input.length-1) == "⁴" || input == "⁴"){ //Potenz 4
		input = input.replace(/⁴/,"");
	}else if (input.substr(input.length-7, input.length-1) == "⁵" || input == "⁵"){ //Potenz 5
		input = input.replace(/⁵/,"");
	}else if (input.substr(input.length-7, input.length-1) == "⁶" || input == "⁶"){ //Potenz 6
		input = input.replace(/⁶/,"");
	}else if (input.substr(input.length-7, input.length-1) == "⁷" || input == "⁷"){ //Potenz 7
		input = input.replace(/⁷/,"");
	}else if (input.substr(input.length-7, input.length-1) == "⁸" || input == "⁸"){ //Potenz 8
		input = input.replace(/⁸/,"");
	}else if (input.substr(input.length-7, input.length-1) == "⁹" || input == "⁹"){ //Potenz 9
		input = input.replace(/⁹/,"");
	}else if (input.substr(input.length-4, input.length-1) == "sin(" || input == "sin("){ //Sinus
		input = input.replace(/sin\(/,"");
	}else if (input.substr(input.length-4, input.length-1) == "cos(" || input == "cos("){ //Cosinus
		input = input.replace(/cos\(/,"");
	}else if (input.substr(input.length-4, input.length-1) == "tan(" || input == "tan("){ //Tangens
		input = input.replace(/tan\(/,"");
	}else if (input.substr(input.length-17, input.length-1) == "sin⁻¹(" || input == "sin⁻¹("){ //Arcsinus
		input = input.replace(/sin⁻¹\(/,"");
	}else if (input.substr(input.length-17, input.length-1) == "cos⁻¹(" || input == "cos⁻¹("){ //Arccosinus
		input = input.replace(/cos⁻¹\(/,"");
	}else if (input.substr(input.length-17, input.length-1) == "tan⁻¹(" || input == "tan⁻¹("){ //Arctangens
		input = input.replace(/tan⁻¹\(/,"");
	}else if (input.substr(input.length-3, input.length-1) == "ln(" || input == "ln("){ //Logarithmus
		input = input.replace(/ln\(/,"");
	}else if (input.substr(input.length-8, input.length-1) == "√(" || input == "√("){ //Quadratwurzel
		input = input.replace(/√\(/,"");
	}else if (input.substr(input.length-8, input.length-1) == "∛(" || input == "∛("){ //Kubikwurzel
		input = input.replace(/∛\(/,"");
	}else{
		input = input.substr(0, input.length-1);
	}
	clearinput = false;
	renderInput();
});

document.getElementById("shift").addEventListener("click", function(){
	if (shift == false){
		shift = true;
	}else if (shift == true){
		shift = false;
	}
	if (shift == true){
		document.getElementById("arcsine").style.display = "";
		document.getElementById("arccosine").style.display = "";
		document.getElementById("arctangent").style.display = "";
		document.getElementById("sine").style.display = "none";
		document.getElementById("cosine").style.display = "none";
		document.getElementById("tangent").style.display = "none";
	}else if (shift == false){
		hideArcTrigonometry();
		document.getElementById("sine").style.display = "";
		document.getElementById("cosine").style.display = "";
		document.getElementById("tangent").style.display = "";
	}
});




// CANVAS PFEIL NACH LINKS AUSGERICHTET PLUS AKTIONEN
R_O_C.moveTo(25,10);
R_O_C.lineTo(10,50);
R_O_C.lineTo(25,90);
R_O_C.moveTo(40,10);
R_O_C.lineTo(25,50);
R_O_C.lineTo(40,90);
R_O_C.lineWidth = 3;
R_O_C.strokeStyle = "#666";
R_O_C.stroke();
document.getElementById("rollOutCanvas").addEventListener("mouseover", function(){
	R_O_C.strokeStyle = "#000";
	R_O_C.stroke();
});
document.getElementById("rollOutCanvas").addEventListener("mouseout", function(){
	R_O_C.strokeStyle = "#666";
	R_O_C.stroke();
});
document.getElementById("rollOutCanvas").addEventListener("click", function rollOut(){
	document.getElementById("verticalP").style.animation = "hide 0.5s ease-in";
	document.getElementById("rollInOut").style.animation = "rollOut 0.5s ease-out";
	document.getElementById("rollInOut").style.width = "500px";
	document.getElementById("rollInOut").style.paddingRight = "30px";
	document.getElementById("verticalP").style.opacity = "0.0";
	drawRollInCanvas();
});

// CANVAS PFEIL NACH RECHTS AUSGERICHTET PLUS AKTIONEN
R_I_C.moveTo(25,10);
R_I_C.lineTo(40,50);
R_I_C.lineTo(25,90);
R_I_C.moveTo(10,10);
R_I_C.lineTo(25,50);
R_I_C.lineTo(10,90);
R_I_C.lineWidth = 3;
R_I_C.strokeStyle = "#666";
R_I_C.stroke();
document.getElementById("rollInCanvas").addEventListener("mouseover", function(){
	R_I_C.strokeStyle = "#000";
	R_I_C.stroke();
});
document.getElementById("rollInCanvas").addEventListener("mouseout", function(){
	R_I_C.strokeStyle = "#666";
	R_I_C.stroke();
});
document.getElementById("rollInCanvas").addEventListener("click", function(){
	document.getElementById("verticalP").style.animation = "show 0.5s ease-in";
	document.getElementById("rollInOut").style.animation = "rollIn 0.5s ease-out";
	document.getElementById("rollInOut").style.width = "50px";
	document.getElementById("rollInOut").style.paddingRight = "0px";
	document.getElementById("verticalP").style.opacity = "1.0";
	drawRollOutCanvas();
});

H_P_X.moveTo(0,5);
H_P_X.lineTo(180,5);
H_P_X.lineTo(150,10);
H_P_X.lineTo(30,10);
H_P_X.lineTo(0,5);
H_P_X.lineWidth = 5;
H_P_X.strokeStyle = "#000";
H_P_X.stroke();



/// FUNKTIONEN AURUFEN

number("0");
number("1");
number("2");
number("3");
number("4");
number("5");
number("6");
number("7");
number("8");
number("9");
pow(2);
pow(3);
pow(4);
pow(5);
pow(6);
pow(7);
pow(8);
pow(9);
trigonometry("sine");
trigonometry("cosine");
trigonometry("tangent");
trigonometry("arcsine");
trigonometry("arccosine");
trigonometry("arctangent");
root("sqrt");
root("cbrt");
renderInput();
renderOutput();
drawRollOutCanvas();
hideArcTrigonometry();
hidePowDiv();