// Harbuger menu
$("#hmenu a").on('click', function() {
	$('.bar').toggleClass('animate');
	if ( $("#oer_sidebar").hasClass("hide") ) {
		$("#oer_sidebar").removeClass("hide");
	} else {
		$("#oer_sidebar").addClass("hide");
	}
});


$('#btn_lab1').on('click', function() {
	$('#btn_lab1').addClass('active');
	$('#btn_lab2').removeClass('active');
	$('#btn_lab3').removeClass('active');
	$('#btn_lab4').removeClass('active');
	$('#lab1').show();
	$('#lab2').hide();
	$('#canvas').hide();
	// $('#lab4').hide();
	$('#lab4').css('visibility', 'hidden');
	$('#sidebar_lab1').show();
	$('#sidebar_lab2').hide();
	$('#sidebar_lab3').hide();
	$('#oer_canvas').show();
	$('#oer_sidebar').show();
});

$('#btn_lab2').on('click', function() {
	$('#btn_lab1').removeClass('active');
	$('#btn_lab2').addClass('active');
	$('#btn_lab3').removeClass('active');
	$('#btn_lab4').removeClass('active');
	$('#lab1').hide();
	$('#lab2').show();
	$('#canvas').hide();
	// $('#lab4').hide();
	$('#lab4').css('visibility', 'hidden');
	$('#sidebar_lab1').hide();
	$('#sidebar_lab2').show();
	$('#sidebar_lab3').hide();
	$('#oer_canvas').show();
	$('#oer_sidebar').show();
});

$('#btn_lab3').on('click', function() {
	$('#btn_lab1').removeClass('active');
	$('#btn_lab2').removeClass('active');
	$('#btn_lab3').addClass('active');
	$('#btn_lab4').removeClass('active');
	$('#lab1').hide();
	$('#lab2').hide();
	$('#canvas').show();
	// $('#lab4').hide();
	$('#lab4').css('visibility', 'hidden');
	$('#sidebar_lab1').hide();
	$('#sidebar_lab2').hide();
	$('#sidebar_lab3').show();
	$('#oer_canvas').show();
	$('#oer_sidebar').show();
});

$('#btn_lab4').on('click', function() {
	$('#btn_lab1').removeClass('active');
	$('#btn_lab2').removeClass('active');
	$('#btn_lab3').removeClass('active');
	$('#btn_lab4').addClass('active');
	$('#lab1').hide();
	$('#lab2').hide();
	$('#lab3').hide();
	$('#canvas').hide();
	// $('#lab4').show();
	$('#lab4').css('visibility', 'visible');
	$('#sidebar_lab1').hide();
	$('#sidebar_lab2').hide();
	$('#sidebar_lab3').hide();
	$('#oer_canvas').hide();
	$('#oer_sidebar').hide();
});

// Animation On/Off
$("#animation_switch").on('change', function() {

});

// Layers On/Off
$("#layers_switch").on('change', function() {
	if ( $("#layers_switch").prop("checked") ) {
		layer_k.visible = true;
		layer_l.visible = true;
		layer_m.visible = true;
		layer_n.visible = true;
		if ( $("#label_switch").prop("checked") ) {
			layers_label.visible = true;
			layer_k_label.visible = true;
			layer_l_label.visible = true;
			layer_m_label.visible = true;
			layer_n_label.visible = true;
		}
	} else {
		layer_k.visible = false;
		layer_l.visible = false;
		layer_m.visible = false;
		layer_n.visible = false;
		layers_label.visible = false;
		layer_k_label.visible = false;
		layer_l_label.visible = false;
		layer_m_label.visible = false;
		layer_n_label.visible = false;
	}
	stage.update();
});



// Label On/Off
$("#label_switch").on('change', function() {
	if ( $("#label_switch").prop("checked") ) {
		core_label.visible = true;
		if (config.protons > 0) protons_label.visible = true;
		if (config.neutrons) neutrons_label.visible = true;
		if ( $("#layers_switch").prop("checked") ) {
			layers_label.visible = true;
			layer_k_label.visible = true;
			layer_l_label.visible = true;
			layer_m_label.visible = true;
			layer_n_label.visible = true;
		}
	} else {
		core_label.visible = false;
		protons_label.visible = false;
		neutrons_label.visible = false;
		layers_label.visible = false;
		layer_k_label.visible = false;
		layer_l_label.visible = false;
		layer_m_label.visible = false;
		layer_n_label.visible = false;		
	}
	stage.update();
});


$('#element').on('change', function() {

	if ($('#element').val() == 'N') {
		config.protons = 7;
		config.neutrons = 7;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "N";
		element_symbol.font = "72px Arial";
		element_name.text = "Άζωτο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'C') {
		config.protons = 6;
		config.neutrons = 6;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "C";
		element_symbol.font = "72px Arial";
		element_name.text = "Άνθρακας";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'S') {
		config.protons = 16;
		config.neutrons = 16;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "S";
		element_symbol.font = "72px Arial";
		element_name.text = "Θείο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'Li') {
		config.protons = 3;
		config.neutrons = 4;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Li";
		element_symbol.font = "72px Arial";
		element_name.text = "Λίθιο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'Mg') {
		config.protons = 12;
		config.neutrons = 12;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Mg";
		element_symbol.font = "72px Arial";
		element_name.text = "Μαγνήσιο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'Na') {
		config.protons = 11;
		config.neutrons = 12;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Na";
		element_symbol.font = "72px Arial";
		element_name.text = "Νάτριο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'Ne') {
		config.protons = 10;
		config.neutrons = 10;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Ne";
		element_symbol.font = "72px Arial";
		element_name.text = "Νέον";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'H') {
		config.protons = 1;
		config.neutrons = 0;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "H";
		element_symbol.font = "72px Arial";
		element_name.text = "Υδρογόνο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'Cl') {
		config.protons = 17;
		config.neutrons = 18;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Cl";
		element_symbol.font = "72px Arial";
		element_name.text = "Χλώριο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'He') {
		config.protons = 2;
		config.neutrons = 2;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "He";
		element_symbol.font = "72px Arial";
		element_name.text = "Ήλιο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'Be') {
		config.protons = 4;
		config.neutrons = 5;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Be";
		element_symbol.font = "72px Arial";
		element_name.text = "Βηρύλλιο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'B') {
		config.protons = 5;
		config.neutrons = 5;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "B";
		element_symbol.font = "72px Arial";
		element_name.text = "Βόριο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}
	if ($('#element').val() == 'O') {
		config.protons = 8;
		config.neutrons = 8;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "O";
		element_symbol.font = "72px Arial";
		element_name.text = "Οξυγόνο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}
	if ($('#element').val() == 'F') {
		config.protons = 9;
		config.neutrons = 10;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "F";
		element_symbol.font = "72px Arial";
		element_name.text = "Φθόριο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}
	if ($('#element').val() == 'Al') {
		config.protons = 13;
		config.neutrons = 14;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Al";
		element_symbol.font = "72px Arial";
		element_name.text = "Αργίλιο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}
	if ($('#element').val() == 'Si') {
		config.protons = 14;
		config.neutrons = 14;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Si";
		element_symbol.font = "72px Arial";
		element_name.text = "Πυρίτιο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}
	if ($('#element').val() == 'P') {
		config.protons = 15;
		config.neutrons = 16;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "P";
		element_symbol.font = "72px Arial";
		element_name.text = "Φώσφορος";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}
	if ($('#element').val() == 'Ar') {
		config.protons = 18;
		config.neutrons = 22;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Ar";
		element_symbol.font = "72px Arial";
		element_name.text = "Αργό";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}
	if ($('#element').val() == 'K') {
		config.protons = 19;
		config.neutrons = 20;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "K";
		element_symbol.font = "72px Arial";
		element_name.text = "Κάλιο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'Ca') {
		config.protons = 20;
		config.neutrons = 20;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "Ca";
		element_symbol.font = "72px Arial";
		element_name.text = "Ασβέστιο";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = true;
	}

	if ($('#element').val() == 'Na+') {
		config.protons = 11;
		config.neutrons = 12;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "Na⁺";
		element_symbol.font = "60px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'Mg2+') {
		config.protons = 12;
		config.neutrons = 12;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "Mg²⁺";
		element_symbol.font = "54px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'O2-') {
		config.protons = 8;
		config.neutrons = 8;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "O²⁻";
		element_symbol.font = "64px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'F-') {
		config.protons = 9;
		config.neutrons = 10;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 350;
		element_symbol.text = "F⁻";
		element_symbol.font = "64px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'K+') {
		config.protons = 19;
		config.neutrons = 20;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "K⁺";
		element_symbol.font = "64px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'Cl-') {
		config.protons = 17;
		config.neutrons = 18;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "Cl⁻";
		element_symbol.font = "64px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'Al+') {
		config.protons = 13;
		config.neutrons = 14;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "Al³⁺";
		element_symbol.font = "64px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'S-') {
		config.protons = 16;
		config.neutrons = 16;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "S²⁻";
		element_symbol.font = "64px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'Ca+') {
		config.protons = 20;
		config.neutrons = 20;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "Ca²⁺";
		element_symbol.font = "54px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}

	if ($('#element').val() == 'P-') {
		config.protons = 15;
		config.neutrons = 16;
		element_atomic_num.text = config.protons;
		element_symbol.x = config.center_x + 360;
		element_symbol.text = "P³⁻";
		element_symbol.font = "64px Arial";
		element_name.text = "";
		element_mass.text = config.protons + config.neutrons;
		element_protons.text = config.protons;
		element_atomic_num.visible = false;
	}



});

$('#protons').on('change', function() {
	config.protons = parseInt($('#protons').val());
	protons_counter.text = config.protons + 'p';
	if (config.protons > 0) {
		protons_counter.visible = true;
	} else {
		protons_counter.visible = false;
	}
	proton.scaleX = proton.scaleY = config.protons * 0.0555;
	proton.x = config.center_x - (74 * proton.scaleX) - 90;
	proton.y = config.center_y - (74 * proton.scaleY * 0.5);

	stage.update();

	check_atom();
});


$('#neutrons').on('change', function() {
	config.neutrons = parseInt($('#neutrons').val());
	neutrons_counter.text = config.neutrons + 'n';
	if (config.neutrons > 0) {
		neutrons_counter.visible = true;
	} else {
		neutrons_counter.visible = false;
	}
	neutron.scaleX = neutron.scaleY = config.neutrons * 0.0555;
	neutron.x = config.center_x - 110 + (neutron.scaleX * 0.5);
	neutron.y = config.center_y - (74 * neutron.scaleY * 0.5);

	stage.update();

	check_atom();
});

$('#electrons_k').on('change', function() {
	config.electrons_k = parseInt($('#electrons_k').val());
	for (let idx = 0; idx < 8; idx++) {
		electron[idx].visible = false;
	}

	if (config.electrons_k == 1) {
		electron[0].visible = true;
	} else if (config.electrons_k == 2) {
		electron[0].visible = true;electron[4].visible = true;
	} else if (config.electrons_k == 3) {
		electron[0].visible = true;electron[4].visible = true;electron[2].visible = true;
	} else if (config.electrons_k == 4) {
		electron[0].visible = true;electron[4].visible = true;electron[2].visible = true;
		electron[6].visible = true;
	} else if (config.electrons_k == 5) {
		electron[0].visible = true;electron[4].visible = true;electron[2].visible = true;
		electron[6].visible = true;electron[1].visible = true;
	} else if (config.electrons_k == 6) {
		electron[0].visible = true;electron[4].visible = true;electron[2].visible = true;
		electron[6].visible = true;electron[1].visible = true;electron[5].visible = true;
	} else if (config.electrons_k == 7) {
		electron[0].visible = true;electron[4].visible = true;electron[2].visible = true;
		electron[6].visible = true;electron[1].visible = true;electron[5].visible = true;
		electron[3].visible = true;
	} else if (config.electrons_k == 8) {
		electron[0].visible = true;electron[4].visible = true;electron[2].visible = true;
		electron[6].visible = true;electron[1].visible = true;electron[5].visible = true;
		electron[3].visible = true;electron[7].visible = true;
	} 

	stage.update();

	check_atom();
});

$('#electrons_l').on('change', function() {
	config.electrons_l = parseInt($('#electrons_l').val());
	for (let idx = 8; idx < 16; idx++) {
		electron[idx].visible = false;
	}

	if (config.electrons_l == 1) {
		electron[8].visible = true;
	} else if (config.electrons_l == 2) {
		electron[8].visible = true;electron[12].visible = true;
	} else if (config.electrons_l == 3) {
		electron[8].visible = true;electron[12].visible = true;electron[10].visible = true;
	} else if (config.electrons_l == 4) {
		electron[8].visible = true;electron[12].visible = true;electron[10].visible = true;
		electron[14].visible = true;
	} else if (config.electrons_l == 5) {
		electron[8].visible = true;electron[12].visible = true;electron[10].visible = true;
		electron[14].visible = true;electron[9].visible = true;
	} else if (config.electrons_l == 6) {
		electron[8].visible = true;electron[12].visible = true;electron[10].visible = true;
		electron[14].visible = true;electron[9].visible = true;electron[13].visible = true;
	} else if (config.electrons_l == 7) {
		electron[8].visible = true;electron[12].visible = true;electron[10].visible = true;
		electron[14].visible = true;electron[9].visible = true;electron[13].visible = true;
		electron[11].visible = true;
	} else if (config.electrons_l == 8) {
		electron[8].visible = true;electron[12].visible = true;electron[10].visible = true;
		electron[14].visible = true;electron[9].visible = true;electron[13].visible = true;
		electron[11].visible = true;electron[15].visible = true;
	} 

	stage.update();

	check_atom();
});

$('#electrons_m').on('change', function() {
	config.electrons_m = parseInt($('#electrons_m').val());
	for (let idx = 16; idx < 24; idx++) {
		electron[idx].visible = false;
	}

	if (config.electrons_m == 1) {
		electron[16].visible = true;
	} else if (config.electrons_m == 2) {
		electron[16].visible = true;electron[20].visible = true;
	} else if (config.electrons_m == 3) {
		electron[16].visible = true;electron[20].visible = true;electron[18].visible = true;
	} else if (config.electrons_m == 4) {
		electron[16].visible = true;electron[20].visible = true;electron[18].visible = true;
		electron[22].visible = true;
	} else if (config.electrons_m == 5) {
		electron[16].visible = true;electron[20].visible = true;electron[18].visible = true;
		electron[22].visible = true;electron[17].visible = true;
	} else if (config.electrons_m == 6) {
		electron[16].visible = true;electron[20].visible = true;electron[18].visible = true;
		electron[22].visible = true;electron[17].visible = true;electron[21].visible = true;
	} else if (config.electrons_m == 7) {
		electron[16].visible = true;electron[20].visible = true;electron[18].visible = true;
		electron[22].visible = true;electron[17].visible = true;electron[21].visible = true;
		electron[19].visible = true;
	} else if (config.electrons_m == 8) {
		electron[16].visible = true;electron[20].visible = true;electron[18].visible = true;
		electron[22].visible = true;electron[17].visible = true;electron[21].visible = true;
		electron[19].visible = true;electron[23].visible = true;
	} 

	stage.update();

	check_atom();
});

$('#electrons_n').on('change', function() {
	config.electrons_n = parseInt($('#electrons_n').val());
	for (let idx = 24; idx < 32; idx++) {
		electron[idx].visible = false;
	}

	if (config.electrons_n == 1) {
		electron[24].visible = true;
	} else if (config.electrons_n == 2) {
		electron[24].visible = true;electron[28].visible = true;
	} else if (config.electrons_n == 3) {
		electron[24].visible = true;electron[28].visible = true;electron[26].visible = true;
	} else if (config.electrons_n == 4) {
		electron[24].visible = true;electron[28].visible = true;electron[26].visible = true;
		electron[30].visible = true;
	} else if (config.electrons_n == 5) {
		electron[24].visible = true;electron[28].visible = true;electron[26].visible = true;
		electron[30].visible = true;electron[25].visible = true;
	} else if (config.electrons_n == 6) {
		electron[24].visible = true;electron[28].visible = true;electron[26].visible = true;
		electron[30].visible = true;electron[25].visible = true;electron[29].visible = true;
	} else if (config.electrons_n == 7) {
		electron[24].visible = true;electron[28].visible = true;electron[26].visible = true;
		electron[30].visible = true;electron[25].visible = true;electron[29].visible = true;
		electron[27].visible = true;
	} else if (config.electrons_n == 8) {
		electron[24].visible = true;electron[28].visible = true;electron[26].visible = true;
		electron[30].visible = true;electron[25].visible = true;electron[29].visible = true;
		electron[27].visible = true;electron[31].visible = true;
	}

	stage.update();

	check_atom();
});

