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

// Initialize Canvas
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d', {willReadFrequently: true});
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);


// Water (4 frame)
var water = new Array();
var water_img = new Array();
for (let i=0; i <= 3; i++) {
	water_img[i] = new Image();
	water_img[i].src = 'images/water-' + i + '.png';

	water[i] = new createjs.Bitmap(water_img[i]);
	water[i].scaleX = water[i].scaleY = 1;
	water[i].width = 97;
	water[i].height = 224;
	water[i].regX = 48;
	water[i].regY = 112;
	water[i].x = config.center_x - 240;
	water[i].y = config.center_y + 80;
	water[i].rotation = 0;
	water[i].cursor = "pointer";

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


// Bottle area
bottle_area = new createjs.Shape();
bottle_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 90, 90);
bottle_area.x = config.center_x + 30;
bottle_area.y = config.center_y - 40;
bottle_area.width = 90;
bottle_area.height = 90;
stage.addChild(bottle_area);
stage.setChildIndex(bottle_area, childIndex++);
stage.update();

// Beaker Α area
beaker1_area = new createjs.Shape();
beaker1_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 80, 100);
beaker1_area.x = config.center_x + 150;
beaker1_area.y = config.center_y - 0;
beaker1_area.width = 80;
beaker1_area.height = 100;
stage.addChild(beaker1_area);
stage.setChildIndex(beaker1_area, childIndex++);
stage.update();

// Beaker Β area
beaker2_area = new createjs.Shape();
beaker2_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 80, 100);
beaker2_area.x = config.center_x + 240;
beaker2_area.y = config.center_y - 0;
beaker2_area.width = 80;
beaker2_area.height = 100;
stage.addChild(beaker2_area);
stage.setChildIndex(beaker2_area, childIndex++);
stage.update();


// Pipette (2 frames)
var pipette_img = new Array();
var pipette = 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].width = 101;
	pipette[i].height = 23;
	pipette[i].regX = 56;
	pipette[i].regY = 12;
	pipette[i].x = config.center_x - 154;
	pipette[i].y = config.center_y + 170;
	pipette[i].rotation = 0;
	pipette[i].cursor = "pointer";

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


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

	dropper[i] = new createjs.Bitmap(dropper_img[i]);
	dropper[i].scaleX = dropper[i].scaleY = 1;
	dropper[i].width = 101;
	dropper[i].height = 23;
	dropper[i].regX = 56;
	dropper[i].regY = 12;
	dropper[i].x = config.center_x - 34;
	dropper[i].y = config.center_y + 170;
	dropper[i].rotation = 0;
	dropper[i].cursor = "pointer";

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



// Bottle 100ml (4 frames)
var bottle100_img = new Array();
var bottle100 = new Array();
for (let i=0; i <= 3; i++) {
	bottle100_img[i] = new Image();
	bottle100_img[i].src = 'images/bottle100-' + i + '.png';

	bottle100[i] = new createjs.Bitmap(bottle100_img[i]);
	bottle100[i].scaleX = bottle100[i].scaleY = 0.9;
	bottle100[i].width = 82;
	bottle100[i].height = 21;
	bottle100[i].x = config.center_x + 40;
	bottle100[i].y = config.center_y + 50;

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


// Bottle 150ml (4 frames)
var bottle150_img = new Array();
var bottle150 = new Array();
for (let i=0; i <= 3; i++) {
	bottle150_img[i] = new Image();
	bottle150_img[i].src = 'images/bottle150-' + i + '.png';

	bottle150[i] = new createjs.Bitmap(bottle150_img[i]);
	bottle150[i].scaleX = bottle150[i].scaleY = 1;
	bottle150[i].x = config.center_x + 40;
	bottle150[i].y = config.center_y + 30;

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


// Bottle 200ml (4 frames)
var bottle200_img = new Array();
var bottle200 = new Array();
for (let i=0; i <= 3; i++) {
	bottle200_img[i] = new Image();
	bottle200_img[i].src = 'images/bottle200-' + i + '.png';

	bottle200[i] = new createjs.Bitmap(bottle200_img[i]);
	bottle200[i].scaleX = bottle200[i].scaleY = 1.05;
	bottle200[i].x = config.center_x + 40;
	bottle200[i].y = config.center_y + 20;

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


// Bottle 300ml (4 frames)
var bottle300_img = new Array();
var bottle300 = new Array();
for (let i=0; i <= 3; i++) {
	bottle300_img[i] = new Image();
	bottle300_img[i].src = 'images/bottle300-' + i + '.png';

	bottle300[i] = new createjs.Bitmap(bottle300_img[i]);
	bottle300[i].scaleX = bottle300[i].scaleY = 1.1;
	bottle300[i].x = config.center_x + 30;
	bottle300[i].y = config.center_y + 20;

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


// Beaker A (1 frames)
var beaker1_img = new Array();
var beaker1 = new Array();
beaker1_img = new Image();
beaker1_img.src = 'images/beaker1.png';

beaker1 = new createjs.Bitmap(beaker1_img);
beaker1.scaleX = beaker1.scaleY = 1;
beaker1.x = config.center_x + 150;
beaker1.y = config.center_y + 90;

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

// Beaker B (1 frames)
var beaker2_img = new Array();
var beaker2 = new Array();
beaker2_img = new Image();
beaker2_img.src = 'images/beaker2.png';

beaker2 = new createjs.Bitmap(beaker2_img);
beaker2.scaleX = beaker2.scaleY = 1;
beaker2.x = config.center_x + 250;
beaker2.y = config.center_y + 90;

beaker2_img.onload = function () {
	stage.addChild(beaker2);
	stage.setChildIndex(beaker2, 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 - 320;
labels.y = config.center_y - 100;

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

