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

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


// Magnisium ribbon (1 frame)
var mg_img = new Array();
var mg = new Array();
mg_img = new Image();
mg_img.src = 'images/mg-ribbon-0.png';

mg = new createjs.Bitmap(mg_img);
mg.scaleX = mg.scaleY = 1;
mg.x = config.center_x - 185;
mg.y = config.center_y + 160;

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

// Plate (5 frames)
var plate_img = new Array();
var plate = new Array();
for (let i=0; i <= 4; i++) {
	plate_img[i] = new Image();
	plate_img[i].src = 'images/plate-' + i + '.png';

	plate[i] = new createjs.Bitmap(plate_img[i]);
	plate[i].scaleX = plate[i].scaleY = 0.9;
	plate[i].x = config.center_x - 100;
	plate[i].y = config.center_y + 180;

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

plate[1].x = config.center_x - 30;
plate[1].y = config.center_y + 150;
plate[2].x = config.center_x + 40;
plate[2].y = config.center_y + 180;
plate[3].x = config.center_x + 110;
plate[3].y = config.center_y + 150;
plate[4].x = config.center_x + 180;
plate[4].y = config.center_y + 180;


// Scissor (5 frames)
var scissor_img = new Array();
var scissor = new Array();
for (let i=0; i <= 4; i++) {
	scissor_img[i] = new Image();
	scissor_img[i].src = 'images/scissor-' + i + '.png';

	scissor[i] = new createjs.Bitmap(scissor_img[i]);
	scissor[i].scaleX = scissor[i].scaleY = 1;
	scissor[i].width = 170;
	scissor[i].height = 41;
	scissor[i].x = config.center_x - 320;
	scissor[i].y = config.center_y + 170;

	scissor_img[i].onload = function () {
		stage.addChild(scissor[i]);
		stage.setChildIndex(scissor[i], childIndex++);
		stage.update();
	}
}
scissor[0].width = 117;
scissor[0].height = 34;

// Gas
var gas_img = new Image();
gas_img.src = 'images/gas.png';

var gas = new createjs.Bitmap(gas_img);
gas.scaleX = gas.scaleY = 1;
gas.x = config.center_x + 280;
gas.y = config.center_y + 140;

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


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

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

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

// Plates area
plate_area1 = new createjs.Shape();
plate_area1.graphics.beginFill(config.click_area_color).drawRect(0, 0, 200, 40);
plate_area1.x = config.center_x - 250;
plate_area1.y = config.center_y + 160;
//plate_area1.width = 200;
//plate_area1.height = 40;
stage.addChild(plate_area1);
stage.setChildIndex(plate_area1, childIndex++);
stage.update();

plate_area2 = new createjs.Shape();
plate_area2.graphics.beginFill(config.click_area_color).drawRect(0, 0, 200, 40);
plate_area2.x = config.center_x - 160;
plate_area2.y = config.center_y + 140;
//plate_area2.width = 200;
//plate_area2.height = 40;
stage.addChild(plate_area2);
stage.setChildIndex(plate_area2, childIndex++);
stage.update();

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

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

plate_area5 = new createjs.Shape();
plate_area5.graphics.beginFill(config.click_area_color).drawRect(0, 0, 200, 40);
plate_area5.x = config.center_x + 30;
plate_area5.y = config.center_y + 160;
//plate_area5.width = 200;
//plate_area5.height = 40;
stage.addChild(plate_area5);
stage.setChildIndex(plate_area5, childIndex++);
stage.update();


// Gaz button area
gas_btn = new createjs.Shape();
gas_btn.graphics.beginFill(config.click_area_color).drawRect(0, 0, 25, 25);
gas_btn.x = config.center_x + 270;
gas_btn.y = config.center_y + 155;
gas_btn.width = 25;
gas_btn.height = 25;
gas_btn.cursor = "pointer"; // show pointer on mouseover
stage.addChild(gas_btn);
stage.setChildIndex(gas_btn, childIndex++);
stage.update();


// Mg ribbon area
mg_area = new createjs.Shape();
mg_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 70, 40);
mg_area.x = config.center_x - 250;
mg_area.y = config.center_y + 170;
mg_area.width = 70;
mg_area.height = 40;
stage.addChild(mg_area);
stage.setChildIndex(mg_area, childIndex++);
stage.update();


// Reaction area
flame_area = new createjs.Shape();
flame_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 150, 50);
flame_area.x = config.center_x + 160;
flame_area.y = config.center_y + 80;
flame_area.width = 150;
flame_area.height = 50;
stage.addChild(flame_area);
stage.setChildIndex(flame_area, childIndex++);
stage.update();

