/* --------------------------------------------------
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);


// Dropper (1 frame)
var dropper_img = new Image();
dropper_img.src = 'images/dropper.png';
var dropper = new createjs.Bitmap(dropper_img);
dropper.scaleX = dropper.scaleY = 1;
dropper.regX = 44;
dropper.regY = 11;
dropper.x = config.center_x + 25;
dropper.y = config.center_y + 180;
dropper.rotation = 0;

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


// 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 + 135;
	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 (7 frames)
var tube1_img = new Array();
var tube1 = new Array();
for (let i=0; i <= 6; 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, -124
	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, -124
	tube2[i].y = config.center_y - 4;

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

// Tube3 (7 frames)
var tube3_img = new Array();
var tube3 = new Array();
for (let i=0; i <= 6; 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, -124
	tube3[i].y = config.center_y - 4;

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

// Tube4 (11 frames)
var tube4_img = new Array();
var tube4 = new Array();
for (let i=0; i <= 10; 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 - 124;	// -278, -228, -174, -124
	tube4[i].y = config.center_y - 4;

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


// Beaker NaOH (2 frames)
var beaker1_img = new Array();
var beaker1 = new Array();
for (let i=0; i <= 1; i++) {
	beaker1_img[i] = new Image();
	beaker1_img[i].src = 'images/beaker1-' + i + '.png';

	beaker1[i] = new createjs.Bitmap(beaker1_img[i]);
	beaker1[i].scaleX = beaker1[i].scaleY = 1;
	beaker1[i].regX = 36;
	beaker1[i].regY = 50;
	beaker1[i].x = config.center_x + 220;
	beaker1[i].y = config.center_y + 150;
	beaker1[i].rotation = 0;

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

// Beaker HCl (2 frames)
var beaker2_img = new Array();
var beaker2 = new Array();
for (let i=0; i <= 1; i++) {
	beaker2_img[i] = new Image();
	beaker2_img[i].src = 'images/beaker2-' + i + '.png';

	beaker2[i] = new createjs.Bitmap(beaker2_img[i]);
	beaker2[i].scaleX = beaker2[i].scaleY = 1;
	beaker2[i].regX = 36;
	beaker2[i].regY = 50;
	beaker2[i].x = config.center_x + 300;
	beaker2[i].y = config.center_y + 150;
	beaker2[i].rotation = 0;

	beaker2_img[i].onload = function () {
		stage.addChild(beaker2[i]);
		stage.setChildIndex(beaker2[i], 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();
}


// Drops (2 frames)
var drops = new Array();
var drops_img = new Array();
for (let i=0; i <= 1; i++) {
	drops_img[i] = new Image();
	drops_img[i].src = 'images/drops-' + i + '.png';

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

	drops_img[i].onload = function () {
		stage.addChild(drops[i]);
		stage.setChildIndex(drops[i], 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();
}




// 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 = 0;
tube2_area.height = 0;
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 = 0;
tube3_area.height = 0;
stage.addChild(tube3_area);
stage.setChildIndex(tube3_area, childIndex++);
stage.update();

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

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


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


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


