/* --------------------------------------------------
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_step7").hide();
	$("#help_step8").hide();
	$("#help_step9").hide();

	$("#help_step" + val.toString()).show();
	config.current_step = val;
	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) {
	
	if (anim_step == 1) {

		// rotate dropper
		if (tube1[1].visible && dropper.rotation > -30) {
			dropper.x = config.center_x - 220;
			dropper.y = config.center_y - 30;
			dropper.rotation--;
			tube1_area.width = 0;
			tube1_area.height = 0;
			tube1_area.visible = false;
		}

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

		// rotate dropper back
		if (tube1[2].visible && dropper.rotation != 0) {
			dropper.x = config.center_x - 220;
			dropper.y = config.center_y - 30;
			dropper.rotation++;
		}

		if (tube1[2].visible && dropper.rotation == 0) {
			tube1[2].visible = false;
			tube1[4].visible = true;	// purple
			tube2_area.width = 50;
			tube2_area.height = 30;
			tube2_area.visible = true;
			show_step(2);
		}
	}

	if (anim_step == 2) {

		// rotate dropper
		if (tube2[1].visible && dropper.rotation > -30) {
			dropper.x = config.center_x - 170;
			dropper.y = config.center_y - 30;
			dropper.rotation--;
			tube2_area.width = 0;
			tube2_area.height = 0;
			tube2_area.visible = false;
		}

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

		// rotate dropper back
		if (tube2[2].visible && dropper.rotation != 0) {
			dropper.x = config.center_x - 170;
			dropper.y = config.center_y - 30;
			dropper.rotation++;
		}

		if (tube2[2].visible && dropper.rotation == 0) {
			tube2[2].visible = false;
			tube2[5].visible = true;	// red
			tube3_area.width = 50;
			tube3_area.height = 30;
			tube3_area.visible = true;
			show_step(3);
		}
	}

	if (anim_step == 3) {

		// rotate dropper
		if (tube3[1].visible && dropper.rotation > -30) {
			dropper.x = config.center_x - 120;
			dropper.y = config.center_y - 30;
			dropper.rotation--;
			tube3_area.width = 0;
			tube3_area.height = 0;
			tube3_area.visible = false;
		}

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

		// rotate dropper back
		if (tube3[2].visible && dropper.rotation != 0) {
			dropper.x = config.center_x - 120;
			dropper.y = config.center_y - 30;
			dropper.rotation++;
		}

		if (tube3[2].visible && dropper.rotation == 0) {
			tube3[2].visible = false;
			tube3[6].visible = true;	// yellow
			tube4_area1.width = 50;
			tube4_area1.height = 30;
			tube4_area1.visible = true;
			show_step(4);
		}
		
	}

	if (anim_step == 4) {
		// rotate dropper
		if (tube4[1].visible && dropper.rotation > -30) {
			dropper.x = config.center_x - 70;
			dropper.y = config.center_y - 30;
			dropper.rotation--;
			tube4_area1.width = 0;
			tube4_area1.height = 0;
			tube4_area1.visible = false;
		}

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

		// rotate dropper back
		if (tube4[2].visible && dropper.rotation != 0) {
			dropper.x = config.center_x - 70;
			dropper.y = config.center_y - 30;
			dropper.rotation++;
		}

		if (tube4[2].visible && dropper.rotation == 0) {
			tube4[2].visible = false;
			tube4[5].visible = true;	// red
			tube4_area1.width = 50;
			tube4_area1.height = 30;
			tube4_area1.visible = true;
			anim_step = 5.1
			show_step(5);
		}

	}

	if (anim_step == 5.1) {

		// return dropper back to table
		if (tube4[5].visible) {
			anim_timer++;

			if (anim_timer < 60) {
				if (dropper.x < config.center_x + 25) {
				dropper.x += 10;
				}
				if (dropper.x > config.center_x + 25)  {
					dropper.x -= 10;
				}
				if (dropper.y < config.center_y + 180) {
					dropper.y += 10;
				}
				if (dropper.y > config.center_y + 180) {
					dropper.y -= 10;
				}
			} else {
				anim_timer = 0;
				anim_step = 5.2;
			}
		}
		// hide tube4 area1
		tube4_area1.width = 0;
		tube4_area1.height = 0;
		tube4_area1.visible = false;

		// enable beaker area
		beaker1_area.width = 80;
		beaker1_area.height = 30;
		beaker1_area.visible = true;

	}

	
	if (anim_step == 5.2) {
		// rotate pipette and get 20ml
		if (pipette[0].rotation > -60) {
			pipette[0].x = config.center_x + 240;
			pipette[0].y = config.center_y + 90;
			pipette[0].rotation--;
			beaker1_area.width = 0;
			beaker1_area.height = 0;
			beaker1_area.visible = false;
		}

		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;
			anim_step = 5.3;
		}
	}

	if (anim_step == 5.3) {
		// rotate pipette back
		if (pipette[1].visible && pipette[1].rotation != 0) {
			pipette[1].rotation++;
		}
		tube4_area2.width = 120;
		tube4_area2.height = 40;
		tube4_area2.visible = true;
	}

	if (anim_step == 5.4) {
		// tube4 red to purple
		// rotate pipette
		if (pipette[1].visible && pipette[1].rotation != -45) {
			pipette[1].x = config.center_x - 60;
			pipette[1].y = config.center_y - 40;
			pipette[1].rotation--;
		}

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

	if (anim_step == 5.5) {
		// rotate pipette back
		if (pipette[1].visible && pipette[1].rotation != 0) {
			pipette[1].rotation++;
			pipette[0].x = pipette[1].x;
			pipette[0].y = pipette[1].y;
			pipette[0].rotation = pipette[1].rotation;
		}

		if (pipette[1].rotation == 0) {
			// show empty pipette
			pipette[1].visible = false;
			pipette[0].visible = true;
			// hide tube4 area2
			tube4_area2.width = 0;
			tube4_area2.height = 0;
			tube4_area2.visible = false;
			// enable beaker area
			beaker1_area.width = 80;
			beaker1_area.height = 30;
			beaker1_area.visible = true;
			show_step(6);
		}
	}

	if (anim_step == 6.1) {
		// rotate pipette and get 20ml
		if (pipette[0].rotation > -60) {
			pipette[0].x = config.center_x + 240;
			pipette[0].y = config.center_y + 90;
			pipette[0].rotation--;
			beaker1_area.width = 0;
			beaker1_area.height = 0;
			beaker1_area.visible = false;
		}

		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;
			anim_step = 6.2;
		}
	}

	if (anim_step == 6.2) {
		// rotate pipette back
		if (pipette[1].visible && pipette[1].rotation != 0) {
			pipette[1].rotation++;
		}
		tube4_area2.width = 120;
		tube4_area2.height = 40;
		tube4_area2.visible = true;
	}

	if (anim_step == 6.3) {
		// tube4 purple to yellow
		// rotate pipette
		if (pipette[1].visible && pipette[1].rotation != -45) {
			pipette[1].x = config.center_x - 60;
			pipette[1].y = config.center_y - 40;
			pipette[1].rotation--;
		}

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

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

		if (pipette[1].visible && pipette[1].rotation == 0) {
			// show empty pipette
			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;
			// hide tube4 area2
			tube4_area2.width = 0;
			tube4_area2.height = 0;
			tube4_area2.visible = false;
			// hide beaker area
			beaker1_area.width = 0;
			beaker1_area.height = 0;
			beaker1_area.visible = false;

			// go to next step
			show_step(7);
		}
	}

	if (anim_step == 7.1) {
		// rotate pipette and get 20ml
		if (pipette[0].rotation > -60) {
			pipette[0].x = config.center_x + 320;
			pipette[0].y = config.center_y + 90;
			pipette[0].rotation--;
			beaker2_area.width = 0;
			beaker2_area.height = 0;
			beaker2_area.visible = false;
		}

		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;
			anim_step = 7.2;
		}
	}

	if (anim_step == 7.2) {
		// rotate pipette back
		if (pipette[1].visible && pipette[1].rotation != 0) {
			pipette[1].rotation++;
		}
		tube4_area2.width = 120;
		tube4_area2.height = 40;
		tube4_area2.visible = true;
	}

	if (anim_step == 7.3) {
		// tube4 yellow to purple
		// rotate pipette
		if (pipette[1].visible && pipette[1].rotation != -45) {
			pipette[1].x = config.center_x - 60;
			pipette[1].y = config.center_y - 40;
			pipette[1].rotation--;
		}

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

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

		if (pipette[1].visible && pipette[1].rotation == 0) {
			// show empty pipette
			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;
			// hide tube4 area2
			tube4_area2.width = 0;
			tube4_area2.height = 0;
			tube4_area2.visible = false;
			// hide beaker area
			beaker2_area.width = 80;
			beaker2_area.height = 30;
			beaker2_area.visible = true;
			// go to next step
			show_step(8);
		}
	}

	if (anim_step == 8.1) {
		// rotate pipette and get 20ml
		if (pipette[0].rotation > -60) {
			pipette[0].x = config.center_x + 310;
			pipette[0].y = config.center_y + 90;
			pipette[0].rotation--;
			beaker2_area.width = 0;
			beaker2_area.height = 0;
			beaker2_area.visible = false;
		}

		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;
			anim_step = 8.2;
		}
	}

	if (anim_step == 8.2) {
		// rotate pipette back
		if (pipette[1].visible && pipette[1].rotation != 0) {
			pipette[1].rotation++;
		}
		tube4_area2.width = 120;
		tube4_area2.height = 40;
		tube4_area2.visible = true;
	}

	if (anim_step == 8.3) {
		// tube4 purple to red
		// rotate pipette
		if (pipette[1].visible && pipette[1].rotation != -45) {
			pipette[1].x = config.center_x - 60;
			pipette[1].y = config.center_y - 40;
			pipette[1].rotation--;
		}

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

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

		if (pipette[1].rotation == 0) {
			// show empty pipette
			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;
			// hide tube4 area2
			tube4_area2.width = 0;
			tube4_area2.height = 0;
			tube4_area2.visible = false;
			// hide beaker area
			beaker2_area.width = 0;
			beaker2_area.height = 0;
			beaker2_area.visible = false;

			// go to next step
			anim_step = 8.5;
		}
	}

	if (anim_step == 8.5) {
		// return pipette to table
		anim_timer++;

		if (anim_timer < 60) {
			if (pipette[0].x < config.center_x + 135) {
				pipette[0].x += 10;
			}
			if (pipette[0].x > config.center_x + 135)  {
				pipette[0].x -= 10;
			}
			if (pipette[0].y < config.center_y + 180) {
				pipette[0].y += 10;
			}
			if (pipette[0].y > config.center_y + 180) {
				pipette[0].y -= 10;
			}
		} else {
			anim_timer = 0;
		}

		// experiment completed
		if (anim_timer == 0) {
			show_step(9);
		}
	}	




	stage.update();

}
