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

// Initialize Canvas
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var stage = new createjs.Stage("canvas");
var childIndex = -1;

// Enable Mouseover on stage
stage.enableMouseOver();

// Enable Drag and Drop on mobile
createjs.Touch.enable(stage);

// Pipette (2 frame)
var pipette = new Array();
var pipette_img = new Array();
for (let i=0; i <= 1; i++) {
	pipette_img[i] = new Image();
	pipette_img[i].src = 'images/pipette-' + i + '.png';

	pipette[i] = new createjs.Bitmap(pipette_img[i]);
	pipette[i].scaleX = pipette[i].scaleY = 1;
	pipette[i].regX = 55;
	pipette[i].regY = 12;
	pipette[i].x = config.center_x + 200;
	pipette[i].y = config.center_y + 180;
	pipette[i].rotation = 0;

	pipette_img[i].onload = function () {
		stage.addChild(pipette[i]);
		stage.setChildIndex(pipette[i], childIndex++);
		stage.update();
	}
}


// Tube1 (6 frames)
var tube1_img = new Array();
var tube1 = new Array();
for (let i=0; i <= 5; i++) {
	tube1_img[i] = new Image();
	tube1_img[i].src = 'images/tube-' + i + '.png';

	tube1[i] = new createjs.Bitmap(tube1_img[i]);
	tube1[i].scaleX = tube1[i].scaleY = 1;
	tube1[i].x = config.center_x - 278;	// -278, -228, -174, -120, -64
	tube1[i].y = config.center_y - 4;

	tube1_img[i].onload = function () {
		stage.addChild(tube1[i]);
		stage.setChildIndex(tube1[i], childIndex++);
		stage.update();
	}
}

// Tube2 (7 frames)
var tube2_img = new Array();
var tube2 = new Array();
for (let i=0; i <= 6; i++) {
	tube2_img[i] = new Image();
	tube2_img[i].src = 'images/tube-' + i + '.png';

	tube2[i] = new createjs.Bitmap(tube2_img[i]);
	tube2[i].scaleX = tube2[i].scaleY = 1;
	tube2[i].x = config.center_x - 228;	// -278, -228, -174, -120, -64
	tube2[i].y = config.center_y - 4;

	tube2_img[i].onload = function () {
		stage.addChild(tube2[i]);
		stage.setChildIndex(tube2[i], childIndex++);
		stage.update();
	}
}

// Tube3 (8 frames)
var tube3_img = new Array();
var tube3 = new Array();
for (let i=0; i <= 7; i++) {
	tube3_img[i] = new Image();
	tube3_img[i].src = 'images/tube-' + i + '.png';

	tube3[i] = new createjs.Bitmap(tube3_img[i]);
	tube3[i].scaleX = tube3[i].scaleY = 1;
	tube3[i].x = config.center_x - 174;	// -278, -228, -174, -120, -64
	tube3[i].y = config.center_y - 4;

	tube3_img[i].onload = function () {
		stage.addChild(tube3[i]);
		stage.setChildIndex(tube3[i], childIndex++);
		stage.update();
	}
}

// Tube4 (9 frames)
var tube4_img = new Array();
var tube4 = new Array();
for (let i=0; i <= 8; i++) {
	tube4_img[i] = new Image();
	tube4_img[i].src = 'images/tube-' + i + '.png';

	tube4[i] = new createjs.Bitmap(tube4_img[i]);
	tube4[i].scaleX = tube4[i].scaleY = 1;
	tube4[i].x = config.center_x - 120;	// -278, -228, -174, -120, -64
	tube4[i].y = config.center_y - 4;

	tube4_img[i].onload = function () {
		stage.addChild(tube4[i]);
		stage.setChildIndex(tube4[i], childIndex++);
		stage.update();
	}
}


// Tube5 (11 frames)
var tube5_img = new Array();
var tube5 = new Array();
for (let i=0; i <= 10; i++) {
	tube5_img[i] = new Image();
	tube5_img[i].src = 'images/tube-' + i + '.png';

	tube5[i] = new createjs.Bitmap(tube5_img[i]);
	tube5[i].scaleX = tube5[i].scaleY = 1;
	tube5[i].x = config.center_x - 64;	// -278, -228, -174, -120, -64
	tube5[i].y = config.center_y - 4;

	tube5_img[i].onload = function () {
		stage.addChild(tube5[i]);
		stage.setChildIndex(tube5[i], childIndex++);
		stage.update();
	}
}

// Drops (1 frame)
var drops = new Array();
var drops_img = new Array();
drops_img = new Image();
drops_img.src = 'images/drops.png';

drops = new createjs.Bitmap(drops_img);
drops.scaleX = drops.scaleY = 1;
drops.x = config.center_x - 258;
drops.y = config.center_y + 10;

drops_img.onload = function () {
	stage.addChild(drops);
	stage.setChildIndex(drops, childIndex++);
	stage.update();
}


// Fe ribbon (1 frame)
var ribbon_img = new Image();
ribbon_img.src = 'images/fe-ribbon.png';
var ribbon = new createjs.Bitmap(ribbon_img);
ribbon.scaleX = ribbon.scaleY = 1;
ribbon.regX = 38;
ribbon.regY = 18;
ribbon.x = config.center_x + 80;
ribbon.y = config.center_y + 175;
ribbon.rotation = 0;

ribbon_img.onload = function () {
	stage.addChild(ribbon);
	stage.setChildIndex(ribbon, childIndex++);
	stage.update();
}


// Beaker HCl (1 frame)
var beaker_img = new Array();
var beaker = new Array();
beaker_img = new Image();
beaker_img.src = 'images/beaker.png';

beaker = new createjs.Bitmap(beaker_img);
beaker.scaleX = beaker.scaleY = 1;
beaker.regX = 36;
beaker.regY = 50;
beaker.x = config.center_x + 300;
beaker.y = config.center_y + 150;
beaker.rotation = 0;

beaker_img.onload = function () {
	stage.addChild(beaker);
	stage.setChildIndex(beaker, childIndex++);
	stage.update();
}



// Labels
var labels_img = new Image();
var labels = new createjs.Bitmap(labels_img);
labels_img.src = 'images/labels.png';
labels.scaleX = labels.scaleY = 1;
labels.x = config.center_x - 380;
labels.y = config.center_y - 80;

labels_img.onload = function () {
	stage.addChild(labels);
	stage.setChildIndex(labels, childIndex++);
	stage.update();
}


// Tube base (1 frame)
var tube_base_img = new Image();
tube_base_img.src = 'images/tube-base.png';
var tube_base = new createjs.Bitmap(tube_base_img);
tube_base.scaleX = tube_base.scaleY = 1;
tube_base.x = config.center_x - 310;
tube_base.y = config.center_y + 50;

tube_base_img.onload = function () {
	stage.addChild(tube_base);
	stage.setChildIndex(tube_base, childIndex++);
	stage.update();
}


// Tubes drop area
tube1_area = new createjs.Shape();
tube1_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 50, 30);
tube1_area.x = config.center_x - 280;
tube1_area.y = config.center_y - 30;
tube1_area.width = 50;
tube1_area.height = 30;
stage.addChild(tube1_area);
stage.setChildIndex(tube1_area, childIndex++);
stage.update();

tube2_area = new createjs.Shape();
tube2_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 50, 30);
tube2_area.x = config.center_x - 228;
tube2_area.y = config.center_y - 30;
tube2_area.width = 50;
tube2_area.height = 30;
stage.addChild(tube2_area);
stage.setChildIndex(tube2_area, childIndex++);
stage.update();

tube3_area = new createjs.Shape();
tube3_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 50, 30);
tube3_area.x = config.center_x - 176;
tube3_area.y = config.center_y - 30;
tube3_area.width = 50;
tube3_area.height = 30;
stage.addChild(tube3_area);
stage.setChildIndex(tube3_area, childIndex++);
stage.update();

tube4_area = new createjs.Shape();
tube4_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 50, 30);
tube4_area.x = config.center_x - 124;
tube4_area.y = config.center_y - 30;
tube4_area.width = 50;
tube4_area.height = 30;
stage.addChild(tube4_area);
stage.setChildIndex(tube4_area, childIndex++);
stage.update();

tube5_area = new createjs.Shape();
tube5_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 50, 30);
tube5_area.x = config.center_x - 72;
tube5_area.y = config.center_y - 30;
tube5_area.width = 50;
tube5_area.height = 30;
stage.addChild(tube5_area);
stage.setChildIndex(tube5_area, childIndex++);
stage.update();



// HCl beaker area
beaker_area = new createjs.Shape();
beaker_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 80, 30);
beaker_area.x = config.center_x + 260;
beaker_area.y = config.center_y + 70;
beaker_area.width = 80;
beaker_area.height = 30;
stage.addChild(beaker_area);
stage.setChildIndex(beaker_area, childIndex++);
stage.update();
