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


// Debugging
stage.addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    log.innerHTML = 'STAGE x: ' + sX + ' / y:' + sY;
});


// Scissor Label
var scissor_label = new createjs.Text();
scissor_label.text = config.scissor_label;
scissor_label.font = "18px Arial";
scissor_label.color = "#a01c1c";
scissor_label.textAlign = "center";
scissor_label.x = config.center_x - 200;
scissor_label.y = config.center_y + 125;
stage.addChild(scissor_label);
stage.setChildIndex(scissor_label, childIndex++);
stage.update();

// Bottle label
var bottle_label = new createjs.Text();
bottle_label.text = config.bottle_label;
bottle_label.font = "18px Arial";
bottle_label.color = "#a01c1c";
bottle_label.textAlign = "center";
bottle_label.x = config.center_x - 90;
bottle_label.y = config.center_y - 50;
stage.addChild(bottle_label);
stage.setChildIndex(bottle_label, childIndex++);
stage.update();

// Spirto label
var spirto_label = new createjs.Text();
spirto_label.text = config.spirto_label;
spirto_label.font = "18px Arial";
spirto_label.color = "#a01c1c";
spirto_label.textAlign = "center";
spirto_label.x = config.center_x + 20;
spirto_label.y = config.center_y + 125;
stage.addChild(spirto_label);
stage.setChildIndex(spirto_label, childIndex++);
stage.update();

// Mg ribbon label
var mg_label = new createjs.Text();
mg_label.text = config.mg_label;
mg_label.font = "18px Arial";
mg_label.color = "#a01c1c";
mg_label.textAlign = "center";
mg_label.x = config.center_x + 160;
mg_label.y = config.center_y + 125;
stage.addChild(mg_label);
stage.setChildIndex(mg_label, childIndex++);
stage.update();

// Fiali label
var fiali_label = new createjs.Text();
fiali_label.text = config.fiali_label;
fiali_label.font = "18px Arial";
fiali_label.color = "#a01c1c";
fiali_label.textAlign = "center";
fiali_label.x = config.center_x + 280;
fiali_label.y = config.center_y + 40;
stage.addChild(fiali_label);
stage.setChildIndex(fiali_label, childIndex++);
stage.update();


// Bubbles
var bubbles_img = new Image();
bubbles_img.src = 'images/bubbles.png';

var bubbles = new createjs.Bitmap(bubbles_img);
bubbles.scaleX = bubbles.scaleY = 1;
bubbles.x = config.center_x + 240;
bubbles.y = config.center_y + 10;

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

// Bottle
var bottle_img = new Image();
bottle_img.src = 'images/bottle-hcl.png';

var bottle = new createjs.Bitmap(bottle_img);
bottle.scaleX = bottle.scaleY = 1;
bottle.x = config.center_x - 130;
bottle.y = config.center_y - 20;
bottle.width = 97;
bottle.height = 224;

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

// Bottle running
var bottle2_img = new Image();
bottle2_img.src = 'images/bottle-running.png';

var bottle2 = new createjs.Bitmap(bottle2_img);
bottle2.scaleX = bottle2.scaleY = 1;
bottle2.x = config.center_x + 225;
bottle2.y = config.center_y + 80;
bottle2.width = 145;
bottle2.height = 224;
bottle2.regX = 72;
bottle2.regY = 112;

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

// Bottle empty
var bottle3_img = new Image();
bottle3_img.src = 'images/bottle-empty.png';

var bottle3 = new createjs.Bitmap(bottle3_img);
bottle3.scaleX = bottle3.scaleY = 1;
bottle3.x = config.center_x + 155;		// default position -130
bottle3.y = config.center_y - 30;		// default position -20
bottle3.width = 97;
bottle3.height = 224;

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


// Fiali
var fiali_img = new Image();
fiali_img.src = 'images/fiali.png';

var fiali = new createjs.Bitmap(fiali_img);
fiali.scaleX = fiali.scaleY = 1;
fiali.x = config.center_x + 240;
fiali.y = config.center_y + 85;
fiali.width = 86;
fiali.height = 119;

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

// Fiali with HCl
var fiali2_img = new Image();
fiali2_img.src = 'images/fiali-hcl.png';

var fiali2 = new createjs.Bitmap(fiali2_img);
fiali2.scaleX = fiali2.scaleY = 1;
fiali2.x = config.center_x + 240;
fiali2.y = config.center_y + 85;
fiali2.width = 86;
fiali2.height = 119;

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


// Magnisium ribbon
var mg_img = new Image();
mg_img.src = 'images/mg_ribbon.png';

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

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


// Scissor
var scissor_img = new Image();
scissor_img.src = 'images/scissor.png';

var scissor = new createjs.Bitmap(scissor_img);
scissor.scaleX = scissor.scaleY = 1;
scissor.x = config.center_x - 280;
scissor.y = config.center_y + 165;
scissor.width = 117;
scissor.height = 34;
scissor.cursor = "pointer";

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


// Scissor with ribbon
var scissor_ribbon_img = new Image();
scissor_ribbon_img.src = 'images/scissor_ribbon.png';

var scissor_ribbon = new createjs.Bitmap(scissor_ribbon_img);
scissor_ribbon.scaleX = scissor_ribbon.scaleY = 1;
scissor_ribbon.x = config.center_x - 280;
scissor_ribbon.y = config.center_y + 165;
scissor_ribbon.width = 170;
scissor_ribbon.height = 41;
scissor_ribbon.cursor = "pointer";

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


// Spirto
var spirto_img = new Image();
spirto_img.src = 'images/spirto.png';

var spirto = new createjs.Bitmap(spirto_img);
spirto.scaleX = spirto.scaleY = 1;
spirto.x = config.center_x - 40;
spirto.y = config.center_y + 190;
spirto.width = 114;
spirto.height = 10;
spirto.cursor = "pointer";

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


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

var light = new createjs.Bitmap(light_img);
light.scaleX = light.scaleY = 1;
light.regX = 7;
light.regY = 30;
light.x = spirto.x + 105;
light.y = spirto.y + 10;
light.width = 15;
light.height = 30;

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