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

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


// beaker nail (6 frames)
var beaker_nail_img = new Array();
var beaker_nail = new Array();
for (let i=0; i <= 5; i++) {
	beaker_nail_img[i] = new Image();
	beaker_nail_img[i].src = 'images/oxidosi/beaker-nail-' + i + '.png';

	beaker_nail[i] = new createjs.Bitmap(beaker_nail_img[i]);
	beaker_nail[i].scaleX = beaker_nail[i].scaleY = 1;
	beaker_nail[i].x = config.center_x + 110;
	beaker_nail[i].y = config.center_y + 100;

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

// beaker wire (6 frames)
var beaker_wire_img = new Array();
var beaker_wire = new Array();
for (let i=0; i <= 5; i++) {
	beaker_wire_img[i] = new Image();
	beaker_wire_img[i].src = 'images/oxidosi/beaker-wire-' + i + '.png';

	beaker_wire[i] = new createjs.Bitmap(beaker_wire_img[i]);
	beaker_wire[i].scaleX = beaker_wire[i].scaleY = 1;
	beaker_wire[i].x = config.center_x + 230;
	beaker_wire[i].y = config.center_y + 100;

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

// nail (3 frames)
var nail_img = new Array();
var nail = new Array();
for (let i=0; i <= 2; i++) {
	nail_img[i] = new Image();
	nail_img[i].src = 'images/oxidosi/nail-' + i + '.png';

	nail[i] = new createjs.Bitmap(nail_img[i]);
	nail[i].scaleX = nail[i].scaleY = 1;
	nail[i].width = 94;
	nail[i].height = 11;
	nail[i].regX = 47;
	nail[i].regY = 6;
	nail[i].x = config.center_x - 80;
	nail[i].y = config.center_y + 170;
	nail[i].rotation = 0;

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


// wire (3 frames)
var wire_img = new Array();
var wire = new Array();
for (let i=0; i <= 2; i++) {
	wire_img[i] = new Image();
	wire_img[i].src = 'images/oxidosi/wire-' + i + '.png';

	wire[i] = new createjs.Bitmap(wire_img[i]);
	wire[i].scaleX = wire[i].scaleY = 1;
	wire[i].x = config.center_x - 0;
	wire[i].y = config.center_y + 150;

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


// beaker CUSO4 (4 frames)
var beaker_cu_img = new Array();
var beaker_cu = new Array();
for (let i=0; i <= 3; i++) {
	beaker_cu_img[i] = new Image();
	beaker_cu_img[i].src = 'images/oxidosi/beaker-cu-' + i + '.png';

	beaker_cu[i] = new createjs.Bitmap(beaker_cu_img[i]);
	beaker_cu[i].scaleX = beaker_cu[i].scaleY = 1;
	beaker_cu[i].width = 61;
	beaker_cu[i].height = 84;
	beaker_cu[i].regX = 30;
	beaker_cu[i].regY = 42;
	beaker_cu[i].x = config.center_x - 230;
	beaker_cu[i].y = config.center_y + 142;
	beaker_cu[i].rotation = 0;

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


// Labels
var labels_img = new Image();
labels_img.src = 'images/oxidosi/labels.png';

var labels = new createjs.Bitmap(labels_img);
labels.scaleX = labels.scaleY = 1;
labels.x = config.center_x - 270;
labels.y = config.center_y + 60;

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


// beaker A area for nail
beaker_area1 = new createjs.Shape();
beaker_area1.graphics.beginFill(config.click_area_color).drawRect(0, 0, 55, 40);
beaker_area1.x = config.center_x + 110;
beaker_area1.y = config.center_y + 80;
beaker_area1.width = 80;
beaker_area1.height = 80;
stage.addChild(beaker_area1);
stage.setChildIndex(beaker_area1, childIndex++);
stage.update();


// beaker B area for nail
beaker_area2 = new createjs.Shape();
beaker_area2.graphics.beginFill(config.click_area_color).drawRect(0, 0, 55, 40);
beaker_area2.x = config.center_x + 230;
beaker_area2.y = config.center_y + 80;
beaker_area2.width = 80;
beaker_area2.height = 80;
stage.addChild(beaker_area2);
stage.setChildIndex(beaker_area2, childIndex++);
stage.update();


