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

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

// Orthostatis (8 frames)
var orthostatis_img = new Array();
var orthostatis = new Array();
for (let i=0; i <= 7; i++) {
	orthostatis_img[i] = new Image();
	orthostatis_img[i].src = 'images/oxygen/base-and-tube-' + i + '.png';

	orthostatis[i] = new createjs.Bitmap(orthostatis_img[i]);
	orthostatis[i].scaleX = orthostatis[i].scaleY = 1;
	orthostatis[i].x = config.center_x + 190;
	orthostatis[i].y = config.center_y - 70;

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


// bottle (1 frame)
bottle_img = new Image();
bottle_img.src = 'images/oxygen/bottle.png';

bottle = new createjs.Bitmap(bottle_img);
bottle.scaleX = bottle.scaleY = 1;
bottle.width = 97;
bottle.height = 224;
bottle.regX = 72;
bottle.regY = 112;
bottle.rotation = 0;
bottle.x = config.center_x - 160;
bottle.y = config.center_y + 80;
bottle.cursor = "pointer";

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

// bottle running (1 frame)
bottle2_img = new Image();
bottle2_img.src = 'images/oxygen/bottle-running.png';

bottle2 = new createjs.Bitmap(bottle2_img);
bottle2.scaleX = bottle2.scaleY = 1;
bottle2.width = 145;
bottle2.height = 224;
bottle2.regX = 72;
bottle2.regY = 112;
bottle2.x = config.center_x + 180;
bottle2.y = config.center_y - 15;
bottle2.rotation = 30;
bottle2.cursor = "pointer";

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


// plate
plate_img = new Image();
plate_img.src = 'images/oxygen/plate.png';

plate = new createjs.Bitmap(plate_img);
plate.scaleX = plate.scaleY = 1;
plate.x = config.center_x + 90;
plate.y = config.center_y + 160;

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

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

	spoon[i] = new createjs.Bitmap(spoon_img[i]);
	spoon[i].scaleX = spoon[i].scaleY = 1;
	spoon[i].width = 82;
	spoon[i].height = 21;
	spoon[i].regX = 41;
	spoon[i].regY = 11;
	spoon[i].x = config.center_x - 110;
	spoon[i].y = config.center_y + 175;
	spoon[i].rotation = 0;
	spoon[i].cursor = "pointer";

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

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

	spirto[i] = new createjs.Bitmap(spirto_img[i]);
	spirto[i].scaleX = spirto[i].scaleY = 1;
	spirto[i].width = 86;
	spirto[i].height = 10;
	spirto[i].regX = 43;
	spirto[i].regY = 5;
	spirto[i].x = config.center_x + 0;
	spirto[i].y = config.center_y + 175;
	spirto[i].rotation = 0;
	spirto[i].cursor = "pointer";

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

// Light
var light_img = new Image();
light_img.src = 'images/oxygen/light.png';

var light = new createjs.Bitmap(light_img);
light.scaleX = light.scaleY = 1;
light.regX = 7;
light.regY = 30;
light.x = spirto[0].x + 34;
light.y = spirto[0].y + 3;
light.width = 15;
light.height = 30;

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


// Tube area for bottle
tube_area1 = new createjs.Shape();
tube_area1.graphics.beginFill(config.click_area_color).drawRect(0, 0, 120, 100);
tube_area1.x = config.center_x + 130;
tube_area1.y = config.center_y - 140;
tube_area1.width = 80;
tube_area1.height = 80;
stage.addChild(tube_area1);
stage.setChildIndex(tube_area1, childIndex++);
stage.update();


// Tube area for spoon
tube_area2 = new createjs.Shape();
tube_area2.graphics.beginFill(config.click_area_color).drawRect(0, 0, 80, 80);
tube_area2.x = config.center_x + 180;
tube_area2.y = config.center_y - 110;
tube_area2.width = 80;
tube_area2.height = 80;
stage.addChild(tube_area2);
stage.setChildIndex(tube_area2, childIndex++);
stage.update();

// Plate area
plate_area = new createjs.Shape();
plate_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 90, 40);
plate_area.x = config.center_x + 85;
plate_area.y = config.center_y + 140;
plate_area.width = 90;
plate_area.height = 40;
stage.addChild(plate_area);
stage.setChildIndex(plate_area, childIndex++);
stage.update();


// Light area
light_area = new createjs.Shape();
light_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 20, 20);
light_area.x = light.x - 10;
light_area.y = light.y - 20;
light_area.width = 90;
light_area.height = 40;
light_area.cursor = "pointer";
stage.addChild(light_area);
stage.setChildIndex(light_area, childIndex++);
stage.update();


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

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

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

