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


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;

}


// 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
	if (anim_step == 1.1) {
		// rotate pipette and get HCI liquid
		if (pipette[0].visible && pipette[0].rotation > -60) {
			pipette[0].x = config.center_x + 340;
			pipette[0].y = config.center_y + 90;
			pipette[0].rotation -= 2;
		}

		if (pipette[0].visible && 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 == 1.2) {

		// rotate pipette and drop liquid
		if (tube1[0].visible) {
			if (pipette[1].visible && pipette[1].rotation > -60) {
				pipette[1].x = config.center_x - 225;
				pipette[1].y = config.center_y - 55;
				pipette[1].rotation -= 2;
			}

			if (pipette[1].visible && 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 (pipette[0].visible && pipette[0].rotation > -60) {
				pipette[0].x = config.center_x + 340;
				pipette[0].y = config.center_y + 90;
				pipette[0].rotation -= 2;
			}

			// animate drops
			drops.x = config.center_x - 258;
			if (pipette[1].rotation == -60 && anim_timer < 60) {
				anim_timer++;
				drops.visible = true;
				drops.y += 3;
				if (drops.y >= config.center_y + 70) {
					drops.y = config.center_y + 10;
					drops.visible = false;
					tube1[0].visible = false;
					tube1[5].visible = true;
					anim_timer = 0;
					stage.update();
				}
			}
		}

		if (tube1[5].visible) {
			drops.visible = false;

			// rotate pipette back
			if (pipette[0].rotation != 0) {	
				pipette[0].x = config.center_x - 225;
				pipette[0].y = config.center_y - 55;
				pipette[0].rotation += 2;
			}

			// go to next step
			if (pipette[0].rotation == 0) {
				show_step(2);
			}
		}
	}


	// Step 2
	if (anim_step == 2.1) {
		// rotate pipette and get HCI liquid
		if (pipette[0].visible && pipette[0].rotation > -60) {
			pipette[0].x = config.center_x + 340;
			pipette[0].y = config.center_y + 90;
			pipette[0].rotation -= 2;
		}

		if (pipette[0].visible && 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 == 2.2) {

		// rotate pipette and drop liquid
		if (tube2[1].visible) {
			if (pipette[1].visible && pipette[1].rotation > -60) {
				pipette[1].x = config.center_x - 173;
				pipette[1].y = config.center_y - 55;
				pipette[1].rotation -= 2;
			}

			if (pipette[1].visible && 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 (pipette[0].visible && pipette[0].rotation > -60) {
				pipette[0].x = config.center_x + 288;
				pipette[0].y = config.center_y + 90;
				pipette[0].rotation -= 2;
			}

			// animate drops
			drops.x = config.center_x - 206;
			if (pipette[1].rotation == -60 && anim_timer < 60) {
				anim_timer++;
				drops.visible = true;
				drops.y += 3;
				if (drops.y >= config.center_y + 70) {
					drops.y = config.center_y + 10;
					drops.visible = false;
					tube2[1].visible = false;
					tube2[6].visible = true;
					anim_timer = 0;
				}
			}
		}

		if (tube2[6].visible) {
			// rotate pipette back
			if (pipette[0].rotation != 0) {
				pipette[0].x = config.center_x - 173;
				pipette[0].y = config.center_y - 55;
				pipette[0].rotation += 2;
			}

			// go to next step
			if (pipette[0].rotation == 0) {
				show_step(3);
			}
		}
	}

	// Step 3
	if (anim_step == 3.1) {
		// rotate pipette and get HCI liquid
		if (pipette[0].visible && pipette[0].rotation > -60) {
			pipette[0].x = config.center_x + 340;
			pipette[0].y = config.center_y + 90;
			pipette[0].rotation -= 2;
		}

		if (pipette[0].visible && 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) {
		// rotate pipette and drop liquid
		if (tube3[2].visible) {
			if (pipette[1].visible && pipette[1].rotation > -60) {
				pipette[1].x = config.center_x - 121;
				pipette[1].y = config.center_y - 55;
				pipette[1].rotation -= 2;
			}

			if (pipette[1].visible && 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 (pipette[0].visible && pipette[0].rotation > -60) {
				pipette[0].x = config.center_x + 236;
				pipette[0].y = config.center_y + 90;
				pipette[0].rotation -= 2;
			}

			// animate drops
			drops.x = config.center_x - 154;
			if (pipette[1].rotation == -60 && anim_timer < 60) {
				anim_timer++;
				drops.visible = true;
				drops.y += 3;
				if (drops.y >= config.center_y + 70) {
					drops.y = config.center_y + 10;
					drops.visible = false;
					tube3[2].visible = false;
					tube3[7].visible = true;
					anim_timer = 0;
				}
			}
		}

		if (tube3[7].visible) {
			// rotate pipette back
			if (pipette[0].rotation != 0) {
				pipette[0].x = config.center_x - 121;
				pipette[0].y = config.center_y - 55;
				pipette[0].rotation += 2;
			}

			// go to next step
			if (pipette[0].rotation == 0) {
				show_step(4);
			}
		}
	}

	// Step 4
	if (anim_step == 4.1) {
		// rotate pipette and get HCI liquid
		if (pipette[0].visible && pipette[0].rotation > -60) {
			pipette[0].x = config.center_x + 340;
			pipette[0].y = config.center_y + 90;
			pipette[0].rotation -= 2;
		}

		if (pipette[0].visible && 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.2) {

		if (tube4[3].visible) {

			// rotate pipette and drop liquid
			if (pipette[1].visible && pipette[1].rotation > -60) {
				pipette[1].x = config.center_x - 69;
				pipette[1].y = config.center_y - 55;
				pipette[1].rotation -= 2;
			}

			if (pipette[1].visible && 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 (pipette[0].visible && pipette[0].rotation > -60) {
				pipette[0].x = config.center_x + 184;
				pipette[0].y = config.center_y + 90;
				pipette[0].rotation -= 2;
			}

			// animate drops
			drops.x = config.center_x - 102;
			if (pipette[1].rotation == -60 && anim_timer < 60) {
				anim_timer++;
				drops.visible = true;
				drops.y += 3;
				if (drops.y >= config.center_y + 70) {
					drops.y = config.center_y + 10;
					drops.visible = false;
					tube4[3].visible = false;
					tube4[8].visible = true;
					anim_timer = 0;
				}
			}
		}

		if (tube4[8].visible) {
			// rotate pipette back
			if (pipette[0].rotation != 0) {
				pipette[0].x = config.center_x - 69;
				pipette[0].y = config.center_y - 55;
				pipette[0].rotation += 2;
			}

			// go to next step
			if (pipette[0].rotation == 0) {
				show_step(5);
				anim_step = 5.1;
			}
		}
	}

	if (anim_step == 5.1) {
		put_back(pipette[0], 200, 180);
	}

	if (anim_step == 5.2) {
		// Fe ribbon to tube5
		// rotate ribbon
		if (ribbon.visible && ribbon.rotation != 94) {
			ribbon.rotation += 2;
		}

		// put ribbon to tube5 (CuSO4)
		if (ribbon.visible && ribbon.rotation == 94) {
			ribbon.x = config.center_x - 36;
			if (ribbon.rotation == 94 && anim_timer < 60) {
				anim_timer++;
				ribbon.visible = true;
				ribbon.y += 3;
				if (ribbon.y >= config.center_y + 120) {
					ribbon.y = config.center_y + 10;
					ribbon.visible = false;
					tube5[4].visible = false;
					tube5[9].visible = true;
					anim_timer = 0;
				}
			}
		}

		if (tube5[9].visible) {
			anim_timer++;

			if (anim_timer == 60) {
				anim_timer = 0;
				anim_step = 5.3;
			}
		}

	}

	if (anim_step == 5.3) {
		tube5[9].visible = false;
		tube5[10].visible = true;
		show_step(6);
		anim_step = 6;
	}

	stage.update();

}
