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


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


// 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 + 130;
stage.addChild(scissor_label);
stage.setChildIndex(scissor_label, 0);
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 - 50;
mg_label.y = config.center_y + 130;
stage.addChild(mg_label);
stage.setChildIndex(mg_label, 1);
stage.update();


// Plate label
var plate_label = new createjs.Text();
plate_label.text = config.plate_label;
plate_label.font = "18px Arial";
plate_label.color = "#a01c1c";
plate_label.textAlign = "center";
plate_label.x = config.center_x + 120;
plate_label.y = config.center_y + 130;
stage.addChild(plate_label);
stage.setChildIndex(plate_label, 2);
stage.update();


// Gas label
var gas_label = new createjs.Text();
gas_label.text = config.gas_label;
gas_label.font = "18px Arial";
gas_label.color = "#a01c1c";
gas_label.textAlign = "center";
gas_label.x = config.center_x + 335;
gas_label.y = config.center_y + 130;
stage.addChild(gas_label);
stage.setChildIndex(gas_label, 3);
stage.update();



// 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 + 250;
gas.y = config.center_y + 40;

gas_img.onload = function () {
	stage.addChild(gas);
	stage.setChildIndex(gas, 4);
	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 - 90;
mg.y = config.center_y + 160;

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

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

var plate = new createjs.Bitmap(plate_img);
plate.scaleX = plate.scaleY = 1;
plate.x = config.center_x + 50;
plate.y = config.center_y + 165;

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


// Mg dust (on plate)
var mg_dust_img = new Image();
mg_dust_img.src = 'images/mg_dust.png';

var mg_dust = new createjs.Bitmap(mg_dust_img);
mg_dust.scaleX = mg_dust.scaleY = 1;
mg_dust.x = config.center_x + 55;
mg_dust.y = config.center_y + 158;

mg_dust_img.onload = function () {
	stage.addChild(mg_dust);
	stage.setChildIndex(mg_dust, 7);
	stage.update();
}


// Plate area
plate_area = new createjs.Shape();
plate_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 190, 60);
plate_area.x = config.center_x - 20;
plate_area.y = config.center_y + 155;
stage.addChild(plate_area);
stage.setChildIndex(plate_area, 8);
stage.update();


// Flame
var assets = [];
var spriteSheet;
var flame = new createjs.Sprite();

function handleFileLoad(event) {
    assets.push(event);
}

function handleComplete() {
    for (var i = 0; i < assets.length; i++) {
        var event = assets[i];
        var result = event.result;

        switch (event.item.id) {
            case 'flame':
                spriteSheet = result;
                break;
        }
    }
    
    initFlame();
}

function initFlame() {
	flame = new createjs.Sprite(spriteSheet, "run");
	flame.scaleY = 0.2;
	flame.scaleX = 0.2;
	flame.x = config.center_x + 286;
	flame.y = config.center_y + 6;
	flame.visible = false;
	stage.addChild(flame);
	stage.setChildIndex(flame, 9);
	stage.update();
}

var manifest = [
    {src: "images/flame.json", id: "flame", type: "spritesheet"}
];

var loader = new createjs.LoadQueue(true, "./");
loader.on("fileload", handleFileLoad);
loader.on("complete", handleComplete);
loader.loadManifest(manifest);



// 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, 10);
	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 - 182;
scissor_ribbon.y = config.center_y + 160;
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, 11);
	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 = 0.9;
light.regX = light.regY = 90 * 0.9;
light.x = scissor_ribbon.x + 140;
light.y = scissor_ribbon.y - 10;

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

// Dust (on air)
var dust_img = new Image();
dust_img.src = 'images/dust.png';

var dust = new createjs.Bitmap(dust_img);
dust.scaleX = dust.scaleY = 1;
dust.regX = 6;
dust.regY = 0;
dust.x = scissor_ribbon.x + 150;
dust.y = scissor_ribbon.y + 30;

dust_img.onload = function () {
	stage.addChild(dust);
	stage.setChildIndex(dust, 13);
	stage.update();
}






// Gaz button
var gas_btn = new createjs.Shape();
gas_btn.graphics.beginFill(config.click_area_color).drawRect(0, 0, 40, 30);
gas_btn.x = config.center_x + 240;
gas_btn.y = config.center_y + 142;
gas_btn.cursor = "pointer"; // show pointer on mouseover
stage.addChild(gas_btn);
stage.setChildIndex(gas_btn, 14);
stage.update();


// Mg ribbon area
mg_area = new createjs.Shape();
mg_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 117, 34);
mg_area.x = config.center_x - 160;
mg_area.y = config.center_y + 165;
stage.addChild(mg_area);
stage.setChildIndex(mg_area, 15);
stage.update();

// Reaction area
act_area = new createjs.Shape();
act_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 170, 41);
act_area.x = config.center_x + 130;
act_area.y = config.center_y - 20;
stage.addChild(act_area);
stage.setChildIndex(act_area, 16);
stage.update();
