BX.namespace("PopupproAdminRoulette");

BX.PopupproAdminRoulette = function () {
    this.init();
};

BX.PopupproAdminRoulette.prototype = {

    init: function () {
        this.c_table = document.querySelector(".block.roulette");
        this._events();
    },

    colorPickerInit(e)
    {
        return new BX.ColorPicker({
            bindElement: BX(e.target),
            defaultColor: e.target.value,
            onColorSelected: function (value) {
                e.target.value = value;
                e.target.style.background = value;
            },
            selectedColor: e.target.value,
            colorPreview: false,
            popupOptions: {
                angle: true,
                autoHide: true,
                closeByEsc: true,
                events: {
                    onPopupClose: () => BX.onCustomEvent("onPreviewUpdate", [this])
                }
            }
        }).open();
    },

    _events: function () {
        BX.bindDelegate(BX(document), "click", { className: "roulette_color_picker"}, this.colorPickerInit);
        BX.bindDelegate(BX(document), "input", { className: "roulette_color_picker"}, e => e.preventDefault());
        BX.bindDelegate(BX(document), "keyup", { className: "roulette_color_picker"}, e => e.preventDefault());
        BX.bindDelegate(BX(document), "keydown", { className: "roulette_color_picker"}, e => e.preventDefault());
        BX.bind(this.c_table, "input", e => BX.onCustomEvent("onPreviewUpdate", [this]));
    }
}