/// class ProspectDirector.Web.UI.FeatureSets.Editors.ColorEditorDialog
/// using ProspectDirector.Web.UI.Dialog
/// using ProspectDirector.Web.UI.Window

/**
[NEEDS DOCUMENTATION]
@class ColorEditorDialog
@namespace Web.UI.FeatureSets.Editors
@extends Web.UI.Dialog
@constructor
**/
ProspectDirector.Web.UI.FeatureSets.Editors.ColorEditorDialog =
ProspectDirector.Web.UI.Dialog.extend({

    //================================
    // CONSTRUCTOR
    //================================

    init: function (options) {

        this.options = $.extend(true, {}, options, {
            config: {
                modal: true,
                iframe: false,
                resizable: false,
                height: 270,
                width: 380
            }
        });

        this._super(this.options);

        this.render();
        this.activate();

    },

    //================================
    // PROPERTIES
    //================================

    get_contentContainer: function () {
        return this.get_window().DOM().get_content();
    },

    get_palette: function () {
        return this.get_contentContainer().find("DIV[data-id=palette]");
    },

    get_swatch: function () {
        return this.get_contentContainer().find("DIV[data-id=swatch]");
    },

    get_inputHex: function () {
        return this.get_contentContainer().find("INPUT[data-id=input-hex]");
    },

    get_inputR: function () {
        return this.get_contentContainer().find("INPUT[data-id=input-r]");
    },

    get_inputG: function () {
        return this.get_contentContainer().find("INPUT[data-id=input-g]");
    },

    get_inputB: function () {
        return this.get_contentContainer().find("INPUT[data-id=input-b]");
    },

    get_okButton: function () {
        return this.get_contentContainer().find("BUTTON[data-id=ok]");
    },

    get_cancelButton: function () {
        return this.get_contentContainer().find("BUTTON[data-id=cancel]");
    },

    //================================
    // INITIALIZERS
    //================================

    _init_palette: function () {

        this.get_palette().kendoFlatColorPicker({
            preview: false,
            value: "#FFFFFF",
            change: $.proxy(this._colorPicker_onChange, this)
        });

    },

    //================================
    // EVENT HANDLERS
    //================================

    _colorPicker_onChange: function (e) {

        var color = kendo.parseColor(e.sender.value());

        this.get_inputHex().val(color.toHex().toUpperCase());
        this.get_inputR().val(color.r);
        this.get_inputG().val(color.g);
        this.get_inputB().val(color.b);

        this.updateColorPreview();

    },

    _rgb_onKeyUp: function (e) {

        var picker = this.get_palette().data("kendoFlatColorPicker");

        picker.value("rgb(" +
            this.getValidRGB(this.get_inputR().val()) + ", " +
            this.getValidRGB(this.get_inputG().val()) + ", " +
            this.getValidRGB(this.get_inputB().val()) + ")");

        this.updateHex();
        this.updateColorPreview();

    },

    _hex_onKeyUp: function (e) {

        var picker = this.get_palette().data("kendoFlatColorPicker"),
            regex = new RegExp("^[A-Fa-f0-9]{6}$"),
            value = this.get_inputHex().val();

        if (regex.test(value)) {

            picker.value(value);

            this.updateRGB();
            this.updateColorPreview();

        }

    },

    _okButton_onClick: function (e) {

        var result = this.get_palette().data("kendoFlatColorPicker").value();

        if (result) {
            result =  result.toUpperCase();
        }

        this.hide({
            command: "ok",
            data: result
        });

    },

    _cancelButton_onClick: function (e) {
        this.hide();
    },

    //================================
    // PUBLIC METHODS
    //================================

    render: function () {

        var content = "" +
        "<div class=\"-pd-color-picker-dialog\">" +
        "<div data-id=\"palette\"></div>" +
        "<div data-id=\"inputs\">" +
        "<label data-id=\"label-r\">R:</label>" +
        "<label data-id=\"label-g\">G:</label>" +
        "<label data-id=\"label-b\">B:</label>" +
        "<label data-id=\"label-hex\">Hex:</label>" +
        "<input data-id=\"input-r\" type=\"text\" maxlength=\"3\"/>" +
        "<input data-id=\"input-g\" type=\"text\" maxlength=\"3\"/>" +
        "<input data-id=\"input-b\" type=\"text\" maxlength=\"3\"/>" +
        "<input data-id=\"input-hex\" type=\"text\" maxlength=\"6\"/>" +
        "</div>" +
        "<div data-id=\"swatch\">&nbsp;</div>" +
        "<button data-id=\"ok\" class=\"-pd-button\">OK</button>" +
        "<button data-id=\"cancel\" class=\"-pd-button\">Cancel</button>" +
        "</div>";

        this.get_contentContainer().empty();
        this.get_contentContainer().append(content);

    },

    activate: function () {

        this.get_inputR().on("keyup", $.proxy(this._rgb_onKeyUp, this));
        this.get_inputG().on("keyup", $.proxy(this._rgb_onKeyUp, this));
        this.get_inputB().on("keyup", $.proxy(this._rgb_onKeyUp, this));
        this.get_inputHex().on("keyup", $.proxy(this._hex_onKeyUp, this));
        this.get_okButton().on("click", $.proxy(this._okButton_onClick, this));
        this.get_cancelButton().on("click", $.proxy(this._cancelButton_onClick, this));

        this._init_palette();

        if (this.options.data.hex) {
            this.get_palette().data("kendoFlatColorPicker").value(this.options.data.hex);
            this.updateColorPreview();
            this.updateHex();
            this.updateRGB();
        }

    },

    //================================
    // PRIVATE METHODS
    //================================

    updateHex: function () {

        var color = kendo.parseColor(this.get_palette().data("kendoFlatColorPicker").value());

        this.get_inputHex().val(color.toHex().toUpperCase());

    },

    updateRGB: function () {

        var color = kendo.parseColor(this.get_palette().data("kendoFlatColorPicker").value());

        this.get_inputR().val(color.r);
        this.get_inputG().val(color.g);
        this.get_inputB().val(color.b);

    },

    updateColorPreview: function () {

        var picker = this.get_palette().data("kendoFlatColorPicker"),
            color = kendo.parseColor(picker.value());

        this.get_swatch().css({
            backgroundColor: "#" + color.toHex()
        });

    },

    getValidRGB: function (value) {

        var result = parseInt(value);

        if (isNaN(result)) {
            result = 0;
        }
        else if (result < 0) {
            result = 0;
        }
        else if (result > 255) {
            result = 255;
        }

        return result;

    }

});

//================================
// STATIC METHODS
//================================

ProspectDirector.Web.UI.FeatureSets.Editors.ColorEditorDialog.open = function (options) {
    return new ProspectDirector.Web.UI.FeatureSets.Editors.ColorEditorDialog(options);
};