/* --------------------------------------------------
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', {willReadFrequently: true});
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);



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

gas_img.onload = function () {
	stage.addChild(gas);
	stage.setChildIndex(gas, childIndex++);
	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 - 80;
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/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 - 150;
	spoon[i].y = config.center_y + 180;
	spoon[i].rotation = 0;
	spoon[i].cursor = "pointer";

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

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

	tube[i] = new createjs.Bitmap(tube_img[i]);
	tube[i].scaleX = tube[i].scaleY = 1;
	tube[i].width = 28;
	tube[i].height = 107;
	tube[i].regX = 14;
	tube[i].regY = 54;
	tube[i].rotation = 0;
	tube[i].x = config.center_x + 64;
	tube[i].y = config.center_y + 132;

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


// Tube base (1 frame)
var tube_base_img = new Image();
tube_base_img.src = 'images/tube-base.png';
var tube_base = new createjs.Bitmap(tube_base_img);
tube_base.scaleX = tube_base.scaleY = 1;
tube_base.x = config.center_x + 32;
tube_base.y = config.center_y + 110;

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


// bottle1 (6 frames)
var bottle1_img = new Array();
var bottle1 = new Array();
for (let i=0; i <= 5; i++) {
	bottle1_img[i] = new Image();
	bottle1_img[i].src = 'images/bottle-' + i + '.png';

	bottle1[i] = new createjs.Bitmap(bottle1_img[i]);
	bottle1[i].scaleX = bottle1[i].scaleY = 1;
	bottle1[i].width = 112;
	bottle1[i].height = 100;
	bottle1[i].regX = 56;
	bottle1[i].regY = 50;
	bottle1[i].x = config.center_x + 130;
	bottle1[i].y = config.center_y + 145;
	bottle1[i].rotation = 0;
	bottle1[i].cursor = "pointer";

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

// bottle2 (6 frames)
var bottle2_img = new Array();
var bottle2 = new Array();
for (let i=0; i <= 5; i++) {
	bottle2_img[i] = new Image();
	bottle2_img[i].src = 'images/bottle-' + i + '.png';

	bottle2[i] = new createjs.Bitmap(bottle2_img[i]);
	bottle2[i].scaleX = bottle2[i].scaleY = 1;
	bottle2[i].width = 112;
	bottle2[i].height = 100;
	bottle2[i].regX = 56;
	bottle2[i].regY = 50;
	bottle2[i].x = config.center_x + 215;
	bottle2[i].y = config.center_y + 145;
	bottle2[i].rotation = 0;
	bottle2[i].cursor = "pointer";

	bottle2_img[i].onload = function () {
		stage.addChild(bottle2[i]);
		stage.setChildIndex(bottle2[i], 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 - 310;
scissor.y = config.center_y + 170;
scissor.width = 100;
scissor.height = 30;
scissor.cursor = "pointer";

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


// Labels
var labels_img = new Image();
var labels = new createjs.Bitmap(labels_img);
labels_img.src = 'images/labels.png';
labels.scaleX = labels.scaleY = 1;
labels.x = config.center_x - 300;
labels.y = config.center_y - 0;

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





// Plate area
plate_area = new createjs.Shape();
plate_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 80, 30);
plate_area.x = config.center_x - 80;
plate_area.y = config.center_y + 150;
plate_area.width = 80;
plate_area.height = 30;
stage.addChild(plate_area);
stage.setChildIndex(plate_area, childIndex++);
stage.update();


// Bottle1 area
bottle1_area = new createjs.Shape();
bottle1_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 50, 40);
bottle1_area.x = config.center_x + 95;
bottle1_area.y = config.center_y + 90;
bottle1_area.width = 50;
bottle1_area.height = 40;
stage.addChild(bottle1_area);
stage.setChildIndex(bottle1_area, childIndex++);
stage.update();

// Bottle2 area
bottle2_area = new createjs.Shape();
bottle2_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 50, 40);
bottle2_area.x = config.center_x + 180;
bottle2_area.y = config.center_y + 50;
bottle2_area.width = 50;
bottle2_area.height = 40;
stage.addChild(bottle2_area);
stage.setChildIndex(bottle2_area, childIndex++);
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 + 320;
	flame.y = config.center_y + 100;
	flame.visible = false;
	stage.addChild(flame);
	stage.setChildIndex(flame, childIndex++);
	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);

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


// Flame area
flame_area = new createjs.Shape();
flame_area.graphics.beginFill(config.click_area_color).drawRect(0, 0, 120, 120);
flame_area.x = config.center_x + 280;
flame_area.y = config.center_y - 20;
flame_area.width = 120;
flame_area.height = 120;
stage.addChild(flame_area);
stage.setChildIndex(flame_area, childIndex++);
stage.update();





