/* --------------------------------------------------
Author: Anastasios Pallas / tcpallas@gmail.com
Version 1.0
Last Update: 2024-07-30
-------------------------------------------------- */


function show_step(val) {

	$("#help_step1").hide();
	$("#help_step2").hide();
	$("#help_step3").hide();
	$("#help_step4").hide();
	$("#help_step5").hide();
	$("#help_step6").hide();

	$("#help_step" + val.toString()).show();
	config.current_step = val;
	return true;

}


function put_back(obj, x, y, step = 10) {
	
	if (obj.x < config.center_x + x) {
		obj.x = obj.x + step;
	}
	if (obj.x > config.center_x + x)  {
		obj.x = obj.x - step;
	}
	if (obj.y < config.center_y + y) {
		obj.y = obj.y + step;
	}
	if (obj.y > config.center_y + y) {
		obj.y = obj.y - step;
	}

	if (Math.abs(Math.abs(obj.x) - Math.abs(config.center_x + x)) < 10) {
		obj.x = config.center_x + x;
	}

	if (Math.abs(Math.abs(obj.y) - Math.abs(config.center_y + y)) < 10) {
		obj.y = config.center_y + y;
	}

	if (obj.x == config.center_x + x && obj.y == config.center_y + y) {
		// object return back
		return true;
	}

	// object is still on the way 
	return false;

}

let ml = 0;
let pp = 0;
let use_1m = false;
let use_2m = false;
let use_water = false;
let h2so4 = '';
let h2so4A = '';
let h2so4B = '';
let wt = '';

// Pick randomly from 8 exercices
// 1. 100 mL 0.2 M /  20ml 1M +  80ml water (dilution)
// 1. 100 mL 0.2 M /   5ml 4M +  95ml water (dilution)
// 2. 200 mL 0.5 M / 100ml 1M + 100ml water (dilution)
// 2. 200 mL 0.5 M /  25ml 4M + 175ml water (dilution)
// 3. 150 mL 2.0 M / 100ml 1M +  50ml 4M    (mixure)
// 4. 150 mL 2.5 M /  75ml 1M +  75ml 4M    (mixure)
// 5. 150 mL 3.0 M /  50ml 1M + 100ml 4M    (mixure)
// 6. 300 mL 3.0 M / 100ml 1M + 200ml 4M    (mixure)

let exercise = Math.floor(Math.random() * 6) + 1;	// 1 to 6

// test a specific exercise
// exercise = 6;

if (exercise == 1) {
	use_water = true;
	ml = 100;
	pp = 0.2;
	$('#method').text('με αραίωση');
} else if (exercise == 2) {
	use_water = true;
	ml = 200;
	pp = 0.5;
	$('#method').text('με αραίωση');
} else if (exercise == 3) {
	ml = 150;
	pp = 2;
	$('#method').text('με ανάμειξη');
} else if (exercise == 4) {
	ml = 150;
	pp = 2.5;
	$('#method').text('με ανάμειξη');
} else if (exercise == 5) {
	ml = 150;
	pp = 3;
	$('#method').text('με ανάμειξη');
} else if (exercise == 6) {
	ml = 300;
	pp = 3;
	$('#method').text('με ανάμειξη');
}

$('#bottle').text(ml.toString());
$('#bottle2').text(ml.toString());
$('#periktikotita').text(pp.toFixed(1));
$('#periktikotita2').text(pp.toFixed(1));





function update_steps() {

	if (exercise <= 2) {
		$('#step1_txt').html('Υπολόγισε τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> <strong>και τον όγκο του νερού</strong> που πρέπει να χρησιμοποιήσεις για να παρασκευάσεις το διάλυμα.');
		$('#step2_txt').html('Διάλεξε την κατάλληλη κωνική φιάλη.');
		$('#step3_txt').html('Με την πιπέτα πάρε τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> που υπολόγισες (' + h2so4 + ') και μετάφερέ τον στην κωνική φιάλη.');
		$('#step4_txt').html('Με τον υδροβολέα πρόσθεσε στην κωνική φιάλη περίπου ' + wt + ' απιονισμένο νερό που υπολόγισες, σχεδόν μέχρι την χαραγή.');
		$('#step5_txt').html('Έπεστρεψε τον υδροβολέα στην θέση του και με το σταγονόμετρο συμπλήρωσε προσεκτικά απιονισμένο νερό ώστε να φτάσει ακριβώς στη χαραγή.');
	} else {
		$('#step1_txt').html('Υπολόγισε τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> 1 M και τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> 4M που πρέπει να χρησιμοποιήσεις για να παρασκευάσεις το διάλυμα.');
		$('#step2_txt').html('Διάλεξε την κατάλληλη κωνική φιάλη.');
		$('#step3_txt').html('Με την πιπέτα πάρε τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> 1 M από το ποτήρι ζέσης Α που υπολόγισες (' + h2so4A + ') και μετάφερέ τον στην κωνική φιάλη.');
		$('#step4_txt').html('Με την πιπέτα και πάλι πάρε τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> 4 M από το ποτήρι ζέσης Β που υπολόγισες (' + h2so4B + ') και μετάφερέ τον στην κωνική φιάλη.');
		$('#step5_txt').html('Επέστρεψε την πιπέτα στην θέση της.');

		// update oer application text
		$('#oer_text').html('<ol><li>Υπολόγισε τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> 1 M και τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> 4 M που πρέπει να χρησιμοποιήσεις για να παρασκευάσεις το διάλυμα.</li><li>Διάλεξε την κατάλληλη κωνική φιάλη.</li><li>Με την πιπέτα πάρε τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> 1 M από το ποτήρι ζέσης Α που υπολόγισες και μετάφερέ τον στην κωνική φιάλη.</li><li>Με την πιπέτα και πάλι πάρε τον όγκο του διαλύματος H<sub>2</sub>SO<sub>4</sub> 4 M από το ποτήρι ζέσης Β που υπολόγισες και μετάφερέ τον στην κωνική φιάλη.</li><li>Επέστρεψε την πιπέτα στην θέση της.</li></ol>');
	}

}



function check_lab1() {
	let q1 = $("input[name='qst_1']:checked").val();
	let q2 = $("input[name='qst_2']:checked").val();
	let q3 = $("input[name='qst_3']:checked").val();

	if ( typeof q1 === "undefined" ) return false;
	if ( typeof q2 === "undefined" ) return false;
	if ( typeof q3 === "undefined" ) return false;

	// q1: 1=1M, 2=4M
	// q2: 1=5ml, 2=20ml, 3=25ml, 4=100ml
	// q3: 1=80ml, 2=95ml, 3=100ml, 4=175ml

	if (exercise == 1 && q1 == '1' && q2 == '2' && q3 == '1') {
		h2so4 = '20 mL';
		wt = '80 mL';
		beaker2.visible = false;
		$("#qst_alert").hide();
		show_step(2);
		anim_step = 2.1;
		return true;
	}

	if (exercise == 1 && q1 == '2' && q2 == '1' && q3 == '2') {
		h2so4 = '5 mL';
		wt = '95 mL';
		beaker1.visible = false;
		$("#qst_alert").hide();
		show_step(2);
		anim_step = 2.1;
		return true;
	}

	if (exercise == 2 && q1 == '1' && q2 == '4' && q3 == '3') {
		h2so4 = '100 mL';
		wt = '100 mL';
		beaker2.visible = false;
		$("#qst_alert").hide();
		show_step(2);
		anim_step = 2.1;
		return true;
	}

	if (exercise == 2 && q1 == '2' && q2 == '3' && q3 == '4') {
		h2so4 = '25 mL';
		wt = '175 mL';
		beaker1.visible = false;
		$("#qst_alert").hide();
		show_step(2);
		anim_step = 2.1;
		return true;
	}

	beaker1.visible = true;
	beaker2.visible = true;

	$("#qst_alert").show();
	return false;
}

function check_lab2() {
	let q4 = $("input[name='qst_4']:checked").val();
	let q5 = $("input[name='qst_5']:checked").val();

	// q4 (1M): 1=50ml, 2=75ml, 3=100ml, 4=200ml
	// q5 (4M): 1=50ml, 2=75ml, 3=100ml, 4=200ml

	if ( typeof q4 === "undefined" ) return false;
	if ( typeof q5 === "undefined" ) return false;

	if (exercise == 3 && q4 == '3' && q5 == '1') {
		h2so4A = '100 mL';
		h2so4B = '50 mL';
		water[0].visible = false;
		dropper[1].visible = false;
		$("#qst_alert").hide();
		show_step(2);
		anim_step = 2.1;
		return true;
	}

	if (exercise == 4 && q4 == '2' && q5 == '2') {
		h2so4A = '75 mL';
		h2so4B = '75 mL';
		water[0].visible = false;
		dropper[1].visible = false;
		$("#qst_alert").hide();
		show_step(2);
		anim_step = 2.1;
		return true;
	}

	if (exercise == 5 && q4 == '1' && q5 == '3') {
		h2so4A = '50 mL';
		h2so4B = '100 mL';
		water[0].visible = false;
		dropper[1].visible = false;
		$("#qst_alert").hide();
		show_step(2);
		anim_step = 2.1;
		return true;
	}

	if (exercise == 6 && q4 == '3' && q5 == '4') {
		h2so4A = '100 mL';
		h2so4B = '200 mL';
		water[0].visible = false;
		dropper[1].visible = false;
		$("#qst_alert").hide();
		show_step(2);
		anim_step = 2.1;
		return true;
	}

	water[0].visible = true;
	dropper[1].visible = true;
	$("#qst_alert").show();
	return false;
}

function check_qst6(val) {

	if (val == 100) {
		bottle100[0].visible = true;
		bottle150[0].visible = false;
		bottle200[0].visible = false;
		bottle300[0].visible = false;
	} else if (val == 150) {
		bottle100[0].visible = false;
		bottle150[0].visible = true;
		bottle200[0].visible = false;
		bottle300[0].visible = false;
	} else if (val == 200) {
		bottle100[0].visible = false;
		bottle150[0].visible = false;
		bottle200[0].visible = true;
		bottle300[0].visible = false;
	} else if (val == 300) {
		bottle100[0].visible = false;
		bottle150[0].visible = false;
		bottle200[0].visible = false;
		bottle300[0].visible = true;
	}

	if (val == ml) {
		$("#qst_alert").hide();
		$("#lab_question6").hide()
		show_step(3);
		anim_step = 0; // just wait for the next action
	} else {
		$("#qst_alert").show();
	}

	update_steps();

	return true;
}

// Update stage will render next frame
createjs.Ticker.framerate = 15;
createjs.Ticker.addEventListener("tick", tickHandler);

var anim_timer = 0;
var anim_step = 0;

function tickHandler(e) {


	// Step 1

	// Step 2

	if (anim_step == 2.1) {
		$("#lab_question1").hide();
		$("#lab_question2").hide();
		$("#lab_question3").hide();
		$("#lab_question4").hide();
		$("#lab_question5").hide();
		$("#lab_question6").show();
	}

	// Step 3
	if (anim_step == 3.1) {
		// Pipette to beaker A
		// rotate pipette and get liquid
		if (pipette[0].visible) {

			if (pipette[0].rotation < 60) {
				pipette[0].x = config.center_x + 160;
				pipette[0].y = config.center_y + 90;
				pipette[0].rotation += 2;
			}

			if (pipette[0].rotation == 60) {
				pipette[1].x = pipette[0].x;
				pipette[1].y = pipette[0].y;
				pipette[1].rotation = pipette[0].rotation;
				pipette[0].visible = false;
				pipette[1].visible = true;
			}
		}

		// rotate pipette back
		if (pipette[1].visible && pipette[1].rotation != 0) {
			pipette[1].rotation -= 2;
		}
	}

	if (anim_step == 3.2) {
		// Pipette to beaker B
		// rotate pipette and get liquid
		if (pipette[0].visible) {

			if (pipette[0].rotation < 60) {
				pipette[0].x = config.center_x + 250;
				pipette[0].y = config.center_y + 90;
				pipette[0].rotation += 2;
			}

			if (pipette[0].rotation == 60) {
				pipette[1].x = pipette[0].x;
				pipette[1].y = pipette[0].y;
				pipette[1].rotation = pipette[0].rotation;
				pipette[0].visible = false;
				pipette[1].visible = true;
			}
		}

		// rotate pipette back
		if (pipette[1].visible && pipette[1].rotation != 0) {
			pipette[1].rotation -= 2;
		}	
	}



	if (anim_step == 3.3) {
		// Pipette to bottle
		if (pipette[1].visible) {
			if (pipette[1].rotation < 60) {
				pipette[1].x = config.center_x + 40;
				pipette[1].y = config.center_y + 20;
				pipette[1].rotation += 2;
			}

			if (pipette[1].rotation == 60) {
				pipette[0].x = pipette[1].x;
				pipette[0].y = pipette[1].y;
				pipette[0].rotation = pipette[1].rotation;
				pipette[1].visible = false;
				pipette[0].visible = true;
				if (ml == 100) {
					bottle100[0].visible = false;
					bottle100[1].visible = true;
				} else if (ml == 150) {
					bottle150[0].visible = false;
					bottle150[1].visible = true;
				} else if (ml == 200) {
					bottle200[0].visible = false;
					bottle200[1].visible = true;
				} else if (ml == 300) {
					bottle300[0].visible = false;
					bottle300[1].visible = true;
				}
			}
		}

		// rotate pipette back
		if (pipette[0].visible && pipette[0].rotation != 0) {
			pipette[0].rotation -= 2;
		}

		if (pipette[0].visible && pipette[0].rotation == 0) {
			put_back(pipette[0], -154, 170);

			if (pipette[0].x == config.center_x - 154 && pipette[0].y == config.center_y + 170) {
				show_step(4);
				anim_step = 0;
			}
		}
	}


	// Step 4
	if (anim_step == 4.1) {
		// Water to bottle
		// rotate water
   		water[0].x = config.center_x + 10;
		water[0].y = config.center_y + 70;

		if (water[0].rotation < 30) {
			water[0].rotation++;
		}

		if (water[0].rotation == 30) {
			water[1].x = water[0].x;
			water[1].y = water[0].y;
			water[1].rotation = water[0].rotation;
			water[0].visible = false;
			water[1].visible = true;
			anim_step = 4.2;
		}
	}

	if (anim_step == 4.2) {
		// put liquid to bottle
		anim_timer++;

		if (anim_timer == 30) {
			if (ml == 100) {
				bottle100[1].visible = false;
				bottle100[2].visible = true;
			} else if (ml == 150) {
				bottle150[1].visible = false;
				bottle150[2].visible = true;
			} else if (ml == 200) {
				bottle200[1].visible = false;
				bottle200[2].visible = true;
			} else if (ml == 300) {
				bottle300[1].visible = false;
				bottle300[2].visible = true;
			}
		}

		if (anim_timer > 60) {
			// stop running liquid
			water[2].x = water[1].x;
			water[2].y = water[1].y;
			water[2].rotation = water[1].rotation;
			water[1].visible = false;
			water[2].visible = true;
			anim_timer = 0;
			anim_step = 4.3;
		}
	}

	if (anim_step == 4.3) {

		// rotate bottle back
		if (water[2].rotation != 0) {
			water[2].rotation--;
		}

		if (water[2].rotation == 0) {
			// put bottle back to table
			put_back(water[2], -240, 80);

			if (water[2].x == config.center_x - 240 && water[2].y == config.center_y + 80) {
				show_step(5);
				anim_step = 0;
			}
		}		

	}

	if (anim_step == 4.4) {
		// Pipette to beaker B
		// rotate pipette and get liquid
		if (pipette[0].visible) {

			if (pipette[0].rotation < 60) {
				pipette[0].x = config.center_x + 250;
				pipette[0].y = config.center_y + 90;
				pipette[0].rotation += 2;
			}

			if (pipette[0].rotation == 60) {
				pipette[1].x = pipette[0].x;
				pipette[1].y = pipette[0].y;
				pipette[1].rotation = pipette[0].rotation;
				pipette[0].visible = false;
				pipette[1].visible = true;
			}
		}

		// rotate pipette back
		if (pipette[1].visible && pipette[1].rotation != 0) {
			pipette[1].rotation -= 2;
		}	
	}

	if (anim_step == 4.5) {
		// Pipette to bottle
		if (pipette[1].visible) {
			if (pipette[1].rotation < 60) {
				pipette[1].x = config.center_x + 50;
				pipette[1].y = config.center_y + 20;
				pipette[1].rotation += 2;
			}

			if (pipette[1].rotation == 60) {
				pipette[0].x = pipette[1].x;
				pipette[0].y = pipette[1].y;
				pipette[0].rotation = pipette[1].rotation;
				pipette[1].visible = false;
				pipette[0].visible = true;
				if (ml == 100) {
					bottle100[1].visible = false;
					bottle100[3].visible = true;
				} else if (ml == 150) {
					bottle150[1].visible = false;
					bottle150[3].visible = true;
				} else if (ml == 200) {
					bottle200[1].visible = false;
					bottle200[3].visible = true;
				} else if (ml == 300) {
					bottle300[1].visible = false;
					bottle300[3].visible = true;
				}
			}
		}

		// rotate pipette back
		if (pipette[0].visible && pipette[0].rotation != 0) {
			pipette[0].rotation -= 2;
			show_step(5);
		}

		if (pipette[0].visible && pipette[0].rotation == 0) {
			put_back(pipette[0], -154, 170);

			if (pipette[0].x == config.center_x - 154 && pipette[0].y == config.center_y + 170) {
				show_step(6);
				anim_step = 0;
			}
		}
	}



	// Step 5
	if (anim_step == 5.1) {
		// Dropper to bottle
		// Rotate dropper
		if (dropper[1].visible) {

			if (dropper[1].rotation < 60) {
				dropper[1].x = config.center_x + 40;
				dropper[1].y = config.center_y + 20;
				dropper[1].rotation += 2;
			}

			if (dropper[1].rotation == 60) {
				dropper[0].x = dropper[1].x;
				dropper[0].y = dropper[1].y;
				dropper[0].rotation = dropper[1].rotation;
				dropper[1].visible = false;
				dropper[0].visible = true;
				if (ml == 100) {
					bottle100[2].visible = false;
					bottle100[3].visible = true;
				} else if (ml == 150) {
					bottle150[2].visible = false;
					bottle150[3].visible = true;
				} else if (ml == 200) {
					bottle200[2].visible = false;
					bottle200[3].visible = true;
				} else if (ml == 300) {
					bottle300[2].visible = false;
					bottle300[3].visible = true;
				}
			}
		}

		// rotate dropper back
		if (dropper[0].visible && dropper[0].rotation != 0) {
			dropper[0].rotation -= 2;
		}

		if (dropper[0].visible && dropper[0].rotation == 0) {
			anim_step = 5.2;
		}

	}

	if (anim_step == 5.2) {
		put_back(dropper[0], -34, 170);

		if (dropper[0].x == config.center_x - 34 && dropper[0].y == config.center_y + 170) {
			show_step(6);
			anim_step = 0;
		}
	}


	stage.update();

}
