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

// LABELS
// Layers Label
var layers_label = new createjs.Text();
layers_label.text = config.layers_label;
layers_label.font = "24px Arial";
layers_label.color = "#888888";
layers_label.textAlign = "center";
layers_label.x = config.center_x - 410;
layers_label.y = config.center_y - 220;
stage.addChild(layers_label);
stage.setChildIndex(layers_label, child_index++);
stage.update();

var layer_k_label = new createjs.Text();
layer_k_label.text = config.layer_k_label;
layer_k_label.font = "24px Arial";
layer_k_label.color = "#888888";
layer_k_label.textAlign = "center";
layer_k_label.x = config.center_x - 220;
layer_k_label.y = config.center_y - 80;
stage.addChild(layer_k_label);
stage.setChildIndex(layer_k_label, child_index++);
stage.update();

var layer_l_label = new createjs.Text();
layer_l_label.text = config.layer_l_label;
layer_l_label.font = "24px Arial";
layer_l_label.color = "#888888";
layer_l_label.textAlign = "center";
layer_l_label.x = config.center_x - 270;
layer_l_label.y = config.center_y - 110;
stage.addChild(layer_l_label);
stage.setChildIndex(layer_l_label, child_index++);
stage.update();

var layer_m_label = new createjs.Text();
layer_m_label.text = config.layer_m_label;
layer_m_label.font = "24px Arial";
layer_m_label.color = "#888888";
layer_m_label.textAlign = "center";
layer_m_label.x = config.center_x - 330;
layer_m_label.y = config.center_y - 140;
stage.addChild(layer_m_label);
stage.setChildIndex(layer_m_label, child_index++);
stage.update();

var layer_n_label = new createjs.Text();
layer_n_label.text = config.layer_n_label;
layer_n_label.font = "24px Arial";
layer_n_label.color = "#888888";
layer_n_label.textAlign = "center";
layer_n_label.x = config.center_x - 380;
layer_n_label.y = config.center_y - 170;
stage.addChild(layer_n_label);
stage.setChildIndex(layer_n_label, child_index++);
stage.update();



// LAYERS
// layers k
layer_k = new createjs.Shape();
layer_k.graphics.setStrokeStyle(3).setStrokeDash([12, 6], 0).beginStroke('#cccccc').drawCircle(0, 0, 120);
layer_k.x = config.center_x - 100;
layer_k.y = config.center_y + 0;
stage.addChild(layer_k);
stage.setChildIndex(layer_k, child_index++);
stage.update();

// layers l
layer_l = new createjs.Shape();
layer_l.graphics.setStrokeStyle(3).setStrokeDash([12, 6], 0).beginStroke('#cccccc').drawCircle(0, 0, 180);
layer_l.x = config.center_x - 100;
layer_l.y = config.center_y + 0;
stage.addChild(layer_l);
stage.setChildIndex(layer_l, child_index++);
stage.update();

// layers m
layer_m = new createjs.Shape();
layer_m.graphics.setStrokeStyle(3).setStrokeDash([12, 6], 0).beginStroke('#cccccc').drawCircle(0, 0, 240);
layer_m.x = config.center_x - 100;
layer_m.y = config.center_y + 0;
stage.addChild(layer_m);
stage.setChildIndex(layer_m, child_index++);
stage.update();

// layers n
layer_n = new createjs.Shape();
layer_n.graphics.setStrokeStyle(3).setStrokeDash([12, 6], 0).beginStroke('#cccccc').drawCircle(0, 0, 300);
layer_n.x = config.center_x - 100;
layer_n.y = config.center_y + 0;
stage.addChild(layer_n);
stage.setChildIndex(layer_n, child_index++);
stage.update();


// CORE
// Core
var core_img = new Image();
core_img.src = 'images/core.png';

var core = new createjs.Bitmap(core_img);
core.scaleX = core.scaleY = 1;
core.x = config.center_x - 192;
core.y = config.center_y - 92;

core_img_idx = child_index++;
core_img.onload = function () {
	stage.addChild(core);
	stage.setChildIndex(core, core_img_idx);
	stage.update();
}

// Proton
var proton_img = new Image();
proton_img.src = 'images/proton.png';

var proton = new createjs.Bitmap(proton_img);
proton.scaleX = proton.scaleY = 0;
proton.alpha = 0.9;
proton.x = config.center_x - 163;
proton.y = config.center_y - 37;

proton_img_idx = child_index++;
proton_img.onload = function () {
	stage.addChild(proton);
	stage.setChildIndex(proton, proton_img_idx);
	stage.update();
}


// Neutron
var neutron_img = new Image();
neutron_img.src = 'images/neutron.png';

var neutron = new createjs.Bitmap(neutron_img);
neutron.scaleX = neutron.scaleY = 0;
neutron.alpha = 0.9;
neutron.x = config.center_x - 103;
neutron.y = config.center_y - 37;

neutron_img_idx = child_index++;
neutron_img.onload = function () {
	stage.addChild(neutron);
	stage.setChildIndex(neutron, neutron_img_idx);
	stage.update();
}

// protons counter
var protons_counter = new createjs.Text();
protons_counter.text = config.protons_counter + 'p';
protons_counter.font = "20px Arial";
protons_counter.color = "#d85252";
protons_counter.textAlign = "center";
protons_counter.x = config.center_x - 125;
protons_counter.y = config.center_y - 60;
stage.addChild(protons_counter);
stage.setChildIndex(protons_counter, child_index++);
stage.update();

// neutrons counter
var neutrons_counter = new createjs.Text();
neutrons_counter.text = config.neutrons_counter + 'n';
neutrons_counter.font = "20px Arial";
neutrons_counter.color = "#8d8d8d";
neutrons_counter.textAlign = "center";
neutrons_counter.x = config.center_x - 65;
neutrons_counter.y = config.center_y - 60;
stage.addChild(neutrons_counter);
stage.setChildIndex(neutrons_counter, child_index++);
stage.update();

// protons label
var protons_label = new createjs.Text();
protons_label.text = config.protons_label;
protons_label.font = "16px Arial";
protons_label.color = "#d85252";
protons_label.textAlign = "center";
protons_label.x = config.center_x - 135;
protons_label.y = config.center_y + 45;
stage.addChild(protons_label);
stage.setChildIndex(protons_label, child_index++);
stage.update();

// neutrons label
var neutrons_label = new createjs.Text();
neutrons_label.text = config.neutrons_label;
neutrons_label.font = "16px Arial";
neutrons_label.color = "#8d8d8d";
neutrons_label.textAlign = "center";
neutrons_label.x = config.center_x - 60;
neutrons_label.y = config.center_y + 45;
stage.addChild(neutrons_label);
stage.setChildIndex(neutrons_label, child_index++);
stage.update();

// element box
element_box = new createjs.Shape();
element_box.graphics.setStrokeStyle(5).beginStroke('#cccccc').beginFill('#174e81').drawRect(0, 0, 160, 180);
element_box.x = config.center_x + 270;
element_box.y = config.center_y - 300;
stage.addChild(element_box);
stage.setChildIndex(element_box, child_index++);
stage.update();

element_atomic_box = new createjs.Shape();
element_atomic_box.graphics.beginFill('#3491c3').drawRect(0, 0, 154, 36);
element_atomic_box.x = config.center_x + 273;
element_atomic_box.y = config.center_y - 298;
stage.addChild(element_atomic_box);
stage.setChildIndex(element_atomic_box, child_index++);
stage.update();


// element atomic num
var element_atomic_num = new createjs.Text();
element_atomic_num.text = "";
element_atomic_num.font = "20px Arial";
element_atomic_num.color = "#ffffff";
element_atomic_num.textAlign = "center";
element_atomic_num.x = config.center_x + 350;
element_atomic_num.y = config.center_y - 290;
stage.addChild(element_atomic_num);
stage.setChildIndex(element_atomic_num, child_index++);
stage.update();

// element symbol
var element_symbol = new createjs.Text();
element_symbol.text = "";
element_symbol.font = "72px Arial";
element_symbol.color = "#ffffff";
element_symbol.textAlign = "center";
element_symbol.x = config.center_x + 350;
element_symbol.y = config.center_y - 250;
stage.addChild(element_symbol);
stage.setChildIndex(element_symbol, child_index++);
stage.update();

// element name
var element_name = new createjs.Text();
element_name.text = "";
element_name.font = "20px Arial";
element_name.color = "#ffffff";
element_name.textAlign = "center";
element_name.x = config.center_x + 350;
element_name.y = config.center_y - 160;
stage.addChild(element_name);
stage.setChildIndex(element_name, child_index++);
stage.update();

// element mass number
var element_mass = new createjs.Text();
element_mass.text = "";
element_mass.font = "18px Arial";
element_mass.color = "#ffffff";
element_mass.textAlign = "center";
element_mass.x = config.center_x + 290;
element_mass.y = config.center_y - 245;
stage.addChild(element_mass);
stage.setChildIndex(element_mass, child_index++);
stage.update();

// element protons
var element_protons = new createjs.Text();
element_protons.text = "";
element_protons.font = "18px Arial";
element_protons.color = "#ffffff";
element_protons.textAlign = "center";
element_protons.x = config.center_x + 290;
element_protons.y = config.center_y - 205;
stage.addChild(element_protons);
stage.setChildIndex(element_protons, child_index++);
stage.update();


// ELECTRONS
// Electron
var electron = [];
var electron_img = new Image();
electron_img.src = 'images/electron.png';

for (let lr = 0; lr < 4; lr++) {
	for (let el = 0; el < 8; el++) {
		idx = lr * 8 + el;
		electron[idx] = new createjs.Bitmap(electron_img);
		electron[idx].scaleX = electron[idx].scaleY = 1;
		electron[idx].x = config.center_x - 100;
		electron[idx].y = config.center_y - 0;
		electron[idx].regX = ((lr * 60) + 104) * -1;	// Layer K: -104, Layer L: -164, Layer M: -224, Layer N: -344
		electron[idx].regY = 0;
		electron[idx].rotation = el * 45; // 0, 45, 90, 135, 180, 225, 270, 315
		electron[idx].visible = false;
	}
}

electron_img.onload = function () {
	for (let lr = 0; lr < 4; lr++) {
		for (let el = 0; el < 8; el++) {
			idx = lr * 8 + el;
			stage.addChild(electron[idx]);
			stage.setChildIndex(electron[idx], child_index);
			stage.update();
			child_index++;
		}
	}
}


// core label
var core_label = new createjs.Text();
core_label.text = config.core_label;
core_label.font = "20px Arial";
core_label.color = "#d5b71c";
core_label.textAlign = "center";
core_label.x = config.center_x - 100;
core_label.y = config.center_y - 113;
stage.addChild(core_label);
stage.setChildIndex(core_label, child_index++);
stage.update();

stage.update();
