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

function show_step(val) {

	$("#help_step1").hide();
	$("#help_step2").hide();
	$("#help_step3").hide();
	$("#help_step4").hide();
	$("#help_step5").hide();
	$("#help_step6").hide();
	$("#help_step7").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;

}


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

let anim_step = 0;
let anim_timer = 0;

function tickHandler(e) {
	stage.update();


	// Step 2
	if (anim_step == 2.1) {
		// hide gas button
		gas_btn.visible = false;
		gas_btn.width = 0;
		gas_btn.height = 0;

	}

	if (anim_step == 2.2) {
		// scissor to bottle1 area
		scissor.visible = false;
		scissor.x = config.center_x + 75;
		scissor.y = config.center_y + 97;
		bottle1[0].visible = false;
		bottle1[1].visible = true;
	}

	if (anim_step == 2.3) {
		// bottle1 to flame area
		// rotate bottle1
		if (bottle1[1].rotation != 170) {
			bottle1[1].x = config.center_x + 330;
			bottle1[1].y = config.center_y + 10;
			bottle1[1].rotation += 2;
		}

		if (bottle1[1].rotation == 170) {
			anim_timer++;

			if (anim_timer == 30) {
				bottle1[2].x = bottle1[1].x;
				bottle1[2].y = bottle1[1].y;
				bottle1[2].rotation = bottle1[1].rotation;
				bottle1[1].visible = false;
				bottle1[2].visible = true;
				anim_timer = 0;
				anim_step = 2.4;
			}
		}
	}

	if (anim_step == 2.4) {
		// rotate bottle1 back
		if (bottle1[2].rotation != 0) {
			bottle1[2].rotation -= 2;
		}

		if (bottle1[2].rotation == 0) {
			// put back bottle1 to the table
			put_back(bottle1[2], 130, 145, 5);
			show_step(3);
		}

		if (!scissor.visible && bottle1[2].x == config.center_x + 130 && bottle1[2].y == config.center_y + 145) {
			// show scissor again
			bottle1[3].x = bottle1[2].x;
			bottle1[3].y = bottle1[2].y;
			bottle1[2].visible = false;
			bottle1[3].visible = true;
			scissor.x = config.center_x + 75;
			scissor.y = config.center_y + 97;
			scissor.visible = true;
		}

		if (scissor.visible) {
			// put back scissor
			put_back(scissor, -310, 170);
		}
	}


	// Step 3
	if (anim_step == 3.1) {
		// spoon gets some CuSO4
   		spoon[1].x = spoon[0].x;
   		spoon[1].y = spoon[0].y;
   		spoon[0].visible = false;
   		spoon[1].visible = true;
   		plate_area.visible = false;
   		plate_area.width = 0;
   		plate_area.height = 0;
   		anim_step = 3.2;
	}

	if (anim_step == 3.2) {
		bottle1_area.x = config.center_x + 95;
		bottle1_area.y = config.center_y + 70;
	}

	if (anim_step == 3.3) {
		// rotate full spoon to CuSO4
		if (spoon[1].visible && spoon[1].rotation < 30) {
			spoon[1].x = config.center_x + 115;
			spoon[1].y = config.center_y + 65;
			spoon[1].rotation++;
		}

		// put CuSO4 to bottle1
		if (spoon[1].visible && spoon[1].rotation == 30) {
			spoon[1].visible = false;
			spoon[0].x = spoon[1].x;
			spoon[0].y = spoon[1].y;
			spoon[0].visible = true;
			bottle1[3].visible = false;
			bottle1[4].visible = true;
			anim_step = 3.3;
		}
		
		if (spoon[0].visible && spoon[0].rotation != 0) {
			spoon[0].rotation--;
		}

		if (spoon[0].visible && spoon[0].rotation == 0) {
			anim_step = 3.3;
		}
	}

	if (anim_step == 3.3) {
		put_back(spoon[0], -150, + 180);
		bottle1_area.visible = false;
		bottle1_area.width = 0;
		bottle1_area.height = 0;
		show_step(4);
	}

	// Step 4
	if (anim_step == 4.1) {
		// scissor to bottle2 area
		scissor.visible = false;
		scissor.x = config.center_x + 158;
		scissor.y = config.center_y + 97;
		bottle2[0].visible = false;
		bottle2[1].visible = true;
	}

	if (anim_step == 4.2) {
		// bottle2 to flame area
		// rotate bottle2
		if (bottle2[1].rotation != 170) {
			bottle2[1].x = config.center_x + 330;
			bottle2[1].y = config.center_y + 10;
			bottle2[1].rotation += 2;
		}

		if (bottle2[1].rotation == 170) {
			anim_timer++;

			if (anim_timer == 30) {
				bottle2[2].x = bottle2[1].x;
				bottle2[2].y = bottle2[1].y;
				bottle2[2].rotation = bottle2[1].rotation;
				bottle2[1].visible = false;
				bottle2[2].visible = true;
				anim_timer = 0;
				anim_step = 4.3;
			}
		}
	}

	if (anim_step == 4.3) {
		// rotate bottle2 back
		if (bottle2[2].rotation != 0) {
			bottle2[2].rotation -= 2;
		}

		if (bottle2[2].rotation == 0) {
			// put back bottle1 to the table
			put_back(bottle2[2], 215, 145, 5);
		}

		if (!scissor.visible && bottle2[2].x == config.center_x + 215 && bottle2[2].y == config.center_y + 145) {
			// show scissor again
			bottle2[3].x = bottle2[2].x;
			bottle2[3].y = bottle2[2].y;
			bottle2[2].visible = false;
			bottle2[3].visible = true;
			scissor.x = config.center_x + 158;
			scissor.y = config.center_y + 97;
			scissor.visible = true;
		}

		if (scissor.visible) {
			// put back scissor
			put_back(scissor, -310, 170);
		}

		if (scissor.visible && bottle2[3].visible) {
			show_step(5);
		}
	}


	// Step 5
	if (anim_step == 5.1) {
		// rotate full tube to bottle2
		if (tube[0].visible && tube[0].rotation < 120) {
			tube[0].x = config.center_x + 195;
			tube[0].y = config.center_y + 55;
			tube[0].rotation +=2;
		}

		if (tube[0].rotation == 120) {
			tube[1].x = tube[0].x;
			tube[1].y = tube[0].y;
			tube[1].rotation = tube[0].rotation;
			tube[0].visible = false;
			tube[1].visible = true;
			bottle2[3].visible = false;
			bottle2[5].visible = true;
			anim_step = 5.2;
		}
	}

	if (anim_step == 5.2) {
		if (tube[1].rotation != 0) {
			tube[1].rotation -= 2;
		}
		if (tube[1].rotation == 0) {
			show_step(6);
			anim_step = 6.1;
		}
	}

	// Step 6
	if (anim_step == 6.1) {
		// show gas button
		gas_btn.visible = true;
		gas_btn.width = 30;
		gas_btn.height = 30;

		put_back(tube[1], 64, 132, 4);	

	}

}
