define(['common'], function (Common) {
    var option = function (q, op) {
        this.questionmodule = q;
        this.option = op;
        this.dialog_text = null;
        this.dialog_bgcolor = null;
        this.dialog_severitylevel = null;
        this.holder = null;
        this.texteditable = true;
        this.removable = true;
        if (op) {
            if (op.removable == false)
                this.removable = false;
            else
                this.removable = true;
        }
        this.onremove = null;
    };

    option.prototype.getOptionValue = function () {
        var option = this.option || {};
        option.Text = this.dialog_text.val();
        var texts = this.dialog_text.data("texts");
        if (texts) {
            option.LocalTexts = texts;
        }
        option.BackgroundColor = this.dialog_bgcolor.val();
        option.SeverityLevel = this.dialog_severitylevel.val();
        return option;
    }

    option.prototype.removeOption = function () {
        this.holder.remove();
        if (this.onremove)
            this.onremove(this);
        this.onsave();
    }

    option.prototype.onsave = function () {
        this.questionmodule.onsave();
    }

    option.prototype.createContent = function () {
        var _this = this;
        var tb = $('<table style="border: 1px solid #a8a8a8; margin-top:2px;line-height:32px;"></table>');
        this.holder = tb;
        var tr = $('<tr></tr>');
        tb.append(tr);
        var optext = $('<input type="text" class="form-control" style="width:226px;margin-left:5px;"/>');
        this.dialog_text = optext;
        var addiText = $('<span class="spanbtn iconmultitext" style="font-size:14px;" title="' + GetTextByKey("P_IPT_XXX", "Language Selection") + '"/>');
        addiText.click(function () {
            Common.createMultiTextDialog(optext);
        });
        var td = $('<td colspan="2"><span class="redasterisk">*</span></td>');
        td.append(this.dialog_text).append(addiText)
        tr.append(td);

        //tr = $('<tr></tr>');
        //tb.append(tr);
        td = $('<td style="width:76px;"></td>');
        tr.append(td);
        td.append($('<label>' + GetTextByKey("P_IPT_SEVERITYLEVEL", "Severity Level") + '</label>'));
        this.dialog_severitylevel = createSeverityLevel().addClass('form-control');
        this.dialog_severitylevel.css('width', 100);
        tr.append($('<td></td>').append(this.dialog_severitylevel));

        //tr = $('<tr></tr>');
        //tb.append(tr);
        var bg_label = $('<label>' + GetTextByKey("P_IPT_BACKGROUNDCOLOR", "Background Color") + '</label>');
        td = $('<td style="width:100px;"></td>').append(bg_label);
        tr.append(td);
        this.dialog_bgcolor = $('<input style="width:100px;"/>');
        var bgcolor = $('<div></div>')
        bgcolor.append(this.dialog_bgcolor);
        td = $('<td></td>').append(bgcolor);
        tr.append(td);
        initColorCtrl(this.dialog_bgcolor);

        if (!this.texteditable) {
            this.dialog_text.attr('disabled', 'disabled');
        }
        if (this.removable) {
            td = $('<td style="width:30px;"></td>');
            tr.append(td);
            var deleteoptionbtn = $('<em class="spanbtn icondelete"></em>');
            td.append(deleteoptionbtn.click(function () {
                _this.removeOption();
            }));

            if (templatereadonly || !editable)
                deleteoptionbtn.hide();
        }

        function updateOptionContent() {
            var op = _this.option;
            if (op) {
                _this.dialog_text.val(op.Text).data("texts", op.LocalTexts);
                if (op.BackgroundColor && op.BackgroundColor != '')
                    _this.dialog_bgcolor.spectrum("set", op.BackgroundColor);
                _this.dialog_severitylevel.val(op.SeverityLevel);
            }
        }

        function controlSaveEvent() {
            _this.dialog_text.change(function () {
                _this.onsave();
            });
            _this.dialog_severitylevel.change(function () {
                _this.onsave();
            });
            _this.dialog_bgcolor.change(function () {
                _this.onsave();
            });
        }

        function setDisabled() {
            _this.dialog_text.prop('disabled', true);
            _this.dialog_bgcolor.prop('disabled', true);
            _this.dialog_severitylevel.prop('disabled', true);
        }

        updateOptionContent();
        if (templatereadonly || !editable)
            setDisabled();
        controlSaveEvent();
        return tb;
    }

    function initColorCtrl(ipt_color) {
        ipt_color.spectrum({
            allowEmpty: true,
            color: "#FFF",
            showInput: true,
            containerClassName: "full-spectrum",
            showInitial: true,
            showPalette: true,
            showSelectionPalette: true,
            showAlpha: true,
            maxPaletteSize: 10,
            preferredFormat: "hex",
            localStorageKey: "spectrum.demo",
            chooseText: GetTextByKey("P_IPT_OK", "OK"),
            cancelText: GetTextByKey("P_IPT_CANCEL", "Cancel"),
            clearText: GetTextByKey("P_SPECTRUM_CLEARCOLORSELECTION", "Clear Color Selection"),
            noColorSelectedText: GetTextByKey("P_SPECTRUM_NOCOLORSELECTED", "No Color Selected"),
            disabled: (templatereadonly && !editable),
            move: function (color) {
                if (color)
                    ipt_color.val(color.toHexString().toUpperCase()); // #ff0000
            },
            show: function () {

            },
            beforeShow: function () {

            },
            hide: function (color) {
                if (color) {
                    ipt_color.val(color.toHexString().toUpperCase()); // #ff0000
                }
            },

            palette: [
                ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/
                    "rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"],
                ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
                    "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
                ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
                    "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
                    "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
                    "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
                    "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
                    "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
                    "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
                    "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
                    /*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
                    "rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
                    "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
                    "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
            ]
        });
    }

    function createSeverityLevel() {
        var items = [];
        items.push({ 'Key': 0, "Value": GetTextByKey("P_IPT_SL_NONE", "None") });
        items.push({ 'Key': 1, "Value": GetTextByKey("P_IPT_SL_LOW", "Low") });
        items.push({ 'Key': 2, "Value": GetTextByKey("P_IPT_SL_MEDIUM", "Medium") });
        items.push({ 'Key': 3, "Value": GetTextByKey("P_IPT_SL_HIGH", "High") });
        var sel = $('<select style="width:324px;height:22px;"></select>');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            sel.append('<option value="' + item.Key + '">' + item.Value + '</option>');
        }
        return sel;
    }

    return option;
});