// gui object classes?
// Why am I doing this?
class auxillery_dialog {
	constructor (title) {
		var me = this;
		this.root = document.createElement("div");
		this.root.classList.add("dialog");
		this.title = "string" == typeof title ? title : "";
		var title_bar = document.createElement("div");
		title_bar.innerText = this.title;
		this.root.appendChild(title_bar);
		this.body = document.createElement("div");
		this.root.appendChild(me.body);
		var close = document.createElement("span");
		close.innerText = "<";
		close.classList.add("close");
		title_bar.appendChild(close);
		close.addEventListener("click", ()=>{
			me.root.classList.remove("focused");
		});
	}
}

// Initialize gui

window.app = {};
app.gui = {};
app.gui.main = document.createElement("div");
app.gui.main.id = "root";
document.body.appendChild(app.gui.main);
app.gui.menu = document.createElement("nav");
app.gui.menu.id = "navigation";
app.gui.main.appendChild(app.gui.menu);
app.gui.view = document.createElement("div");
app.gui.view.id = "view";
app.gui.main.appendChild(app.gui.view);
// Library popup
app.gui.library = new auxillery_dialog("Library");
// Options popup
app.gui.options = new auxillery_dialog("Options");
// pre-populate grid with emptys
for (var x = 0; x < 16; x++) {
	var name = "pec"+x;
	var thisPec = app.gui[name] = document.createElement("span");
	thisPec.classList.add("pecSlot","empty");
	thisPec.innerHTML = "<p>+</p>";
	app.gui.view.appendChild(thisPec);
	thisPec.addEventListener("click", (p,x)=>{
		app.currentPec = p;
		app.currentPecIndex = x;
		app.gui.library.root.classList.add("focused");
	}, thisPec, x);
}