Sizerboard.DrawBox = function(sizerboard, inputs){

    const self = this;
    let started = false;

    const construct = () => {

        sizerboard.print("info", "sizerboard_draw_box_building");

        sizerboard.print("ok", "sizerboard_draw_box_built");

    };

    this.start = callback => {

        const end = status => typeof callback == "function" && callback(status);

        sizerboard.print("info", "sizerboard_draw_box_starting");

        if(started){
            sizerboard.print("warn", "sizerboard_draw_box_already_started");
            end(false);
            return false;
        };
        started = true;

        sizerboard.print("ok", "sizerboard_draw_box_started");
        end(true);
        
        return true;
    };

    this.show = (item, event, key) => {
        if(item.hasAttribute("disabled"))
            return;

        sizerboard.item_self.querySelector(".draw-box").setAttribute("data-mode", key);
        sizerboard.item_self.querySelectorAll(".draw-box .fields>[data-visible=true]").forEach(section => section.setAttribute("data-visible", false));
        item.parentNode.parentNode.querySelectorAll("[disabled]").forEach(button => button.removeAttribute("disabled"));

        sizerboard.item_self.querySelector(".draw-box .fields>." + key).setAttribute("data-visible", true);
        item.setAttribute("disabled", true);
        
    };

    construct();

};