window.onload = main;
var d = document;
var container;
var button;

function main() {
    console.log("JS loaded!");
    container = d.getElementById("container");
    addListeners(d.body, 'click', createbutton);
}

function addListeners(e, a, f) {
    e.addEventListener(a, f);
}

class Button {
    constructor(f) {
        this.element = d.createElement("div");
        this.element.id = "Button";
        this.element.innerHTML = "<p>Button</p>";
        container.appendChild(this.element);
        addListeners(this.element, 'mouseover', HoverButton.applyShadow);
        addListeners(this.element, 'mouseout', HoverButton.applyUnshadow);
        addListeners(this.element, 'mouseout', HoverButton.applyUnpush);
        addListeners(this.element, 'mousedown', PushButton.applyPush);
        addListeners(this.element, 'mouseup', PushButton.applyUnpush);
    }
}

class HoverButton extends Button {
    constructor() {
        super();
    }
    static applyShadow() {
        button.element.style.boxShadow = "5px 5px 5px #6C5B7B";
    }
    static applyUnshadow() {
        button.element.style.boxShadow = "none";
    }
}

class PushButton extends Button {
    constructor() {
        super();
    }
    static applyPush(elem) {
        button.element.style.backgroundColor = "#C06C84";
    }
    static applyUnpush(elem) {
        button.element.style.backgroundColor = "#F67280";
    }
}

function createbutton() {
    console.log(container.children);
    if(container.children.length == 0) {
        button = new Button();
        console.log("button created!");
    }
    d.body.removeEventListener("click", createbutton);
}