基于jquery封装的一个调色板，用到了Deferred对象回调

最近经常封装js工具，请不要以为我是一名前端工程师，这只是我不得已的副业而已

window.colorPanel || (window.colorPanel = {
    left: 0,
    light: 127,
    isbind: false,
    mousedown: false,
    selectRGB: { r: 127, g: 127, b: 127 },
    selectColor: '#777777',
    dfd: null,
    style: {
        cp_btn: {
            border: '#d9d9d9 1px solid',
            borderRadius: '3px',
            display: 'inline-block'
        },
        cp_area: {
             '256px',
            height: '24px',
            margin: '0',
            padding: '0',
            border: 'none',
            float: 'left'
        }
    },
    html: '<div id="cp_board" style="position:absolute;padding:3px;256px;height:auto;border:#d9d9d9 1px solid;borderRadius:3px;background-color:white;">'
        + '    <div   id="cp_view"   style="70px;height:24px;background-color: #777;border-radius: 3px;display: inline-block;float:left;"></div>'
        + '    <input id="cp_light"  style="50px;height:20px;padding: 0;margin-left: 10px;float: left;" type="text" value="127" />'
        + '    <input id="cp_text"   style="70px;height:20px;margin-left:10px;padding: 0;float: left;" type="text" value="#777777" />'
        + '    <span  id="cp_close"  style="24px;height:22px;line-height: 18px;text-align: center;position: absolute;font-weight:bolder;font-size:28px;color:red;top:3px;right:3px;cursor: pointer;">x</span>'
        + '    <div   id="cp_gray"   style="256px;height:20px;margin: 10px 0;float: left; background:linear-gradient(to right,#000 0px, #777 127px, #fff 255px);"></div>'
        + '    <div   id="cp_area_1" style="background:linear-gradient(to right,#f00,#ff0);"></div>'
        + '    <div   id="cp_area_2" style="background:linear-gradient(to right,#0f0,#ff0);"></div>'
        + '    <div   id="cp_area_3" style="background:linear-gradient(to right,#0f0,#0ff);"></div>'
        + '    <div   id="cp_area_4" style="background:linear-gradient(to right,#00f,#0ff);"></div>'
        + '    <div   id="cp_area_5" style="background:linear-gradient(to right,#00f,#f0f);"></div>'
        + '    <div   id="cp_area_6" style="background:linear-gradient(to right,#f00,#f0f);"></div>'
        + '    <span  id="cp_cancel" style=" 60px; height: 22px;line-height: 18px;text-align: center;margin-top: 3px;cursor: pointer;float: left;">Cancel</span>'
        + '    <span  id="cp_choose" style=" 60px;height: 22px;line-height: 18px;text-align: center;margin-top: 3px;float: right;cursor: pointer;">Choose</span>'
        + '</div>',
    hToInt: function (c, n) {
        var s = c.toUpperCase(),
            i = s == 'A' ? 10
              : s == 'B' ? 11
              : s == 'C' ? 11
              : s == 'D' ? 11
              : s == 'E' ? 11
              : s == 'F' ? 11
              : parseInt(s, 10);
        return n == 0 ? i : i * 16;
    },
    setRGB: function (c) {
        colorPanel.selectRGB.r = colorPanel.hToInt(c.substr(1, 1), 1) + colorPanel.hToInt(c.substr(2, 1), 0);
        colorPanel.selectRGB.g = colorPanel.hToInt(c.substr(3, 1), 1) + colorPanel.hToInt(c.substr(4, 1), 0);
        colorPanel.selectRGB.b = colorPanel.hToInt(c.substr(5, 1), 1) + colorPanel.hToInt(c.substr(6, 1), 0);
    },
    setColor: function (left) {
        var r = 0, g = 0, b = 0;
        var light = left ? left : colorPanel.light;
        if (light == 255) {
            r = g = b = "FF";
        } else if (light == 0) {
            r = g = b = "00";
        } else if (light > 127) {
            r = parseInt((255 - colorPanel.selectRGB.r) * (light - 127) / 127 + colorPanel.selectRGB.r).toString(16);
            g = parseInt((255 - colorPanel.selectRGB.g) * (light - 127) / 127 + colorPanel.selectRGB.g).toString(16);
            b = parseInt((255 - colorPanel.selectRGB.b) * (light - 127) / 127 + colorPanel.selectRGB.b).toString(16);
        } else {
            r = parseInt(colorPanel.selectRGB.r * light / 127).toString(16);
            g = parseInt(colorPanel.selectRGB.g * light / 127).toString(16);
            b = parseInt(colorPanel.selectRGB.b * light / 127).toString(16);
        }
        var c = '#' + (r.length > 1 ? r : ('0' + r)) + (g.length > 1 ? g : ('0' + g)) + (b.length > 1 ? b : ('0' + b));
        $('#cp_view').css('background-color', c);
        $('#cp_text').val(c.toUpperCase());
    },
    areaMove: function (left, area) {
        if (colorPanel.mousedown) {
            var r = left.toString(16).toUpperCase(),
                h = r.length > 1 ? r : ('0' + r),
                c = area == '1' ? 'FF' + h + "00"
                  : area == '2' ? h + "FF00"
                  : area == '3' ? "00FF" + h
                  : area == '4' ? "00" + h + "FF"
                  : area == '5' ? h + "00FF"
                  : area == '6' ? "FF00" + h : "777777";
            $('#cp_text').val("#" + c);
            $('#cp_view').css('background-color', "#" + c);
            $('#cp_gray').css('background', 'linear-gradient(to right,#000 0px, #' + c + ' 127px, #fff 255px)');
            colorPanel.selectRGB
                = area == '1' ? { r: 255, g: left, b: 0 }
                : area == '2' ? { r: left, g: 255, b: 0 }
                : area == '3' ? { r: 0, g: 255, b: left }
                : area == '4' ? { r: 0, g: left, b: 255 }
                : area == '5' ? { r: left, g: 0, b: 255 }
                : area == '6' ? { r: 255, g: 0, b: left }
                : colorPanel.selectRGB;
            colorPanel.setColor();
        }
    },
    show: function (dtd) {
        colorPanel.dfd = dtd || $.Deferred();
        if (!colorPanel.content) {
            colorPanel.content = $(colorPanel.html).appendTo('body').find('[id^="cp_area_"]').css(colorPanel.style.cp_area);
            $('#cp_board span').css(colorPanel.style.cp_btn).hover(function () {
                $(this).css('background-color', '#eeeeee');
            }, function () {
                $(this).css('background-color', '#ffffff');
            });
        } else {
            $('#cp_board').show();
        }
        $('#cp_board').css({ left: UEditor.contentMenu.content.css('left'), top: UEditor.contentMenu.content.css('top') });
        colorPanel.left = $('#cp_board').offset().left + 4;

        if (!colorPanel.isbind) {
            colorPanel.isbind = true;
            $('#cp_gray').on('mousemove', function (e) {
                if (colorPanel.mousedown) {
                    var light = e.pageX - colorPanel.left;
                    $('#cp_light').val(light);
                    colorPanel.light = light;
                    colorPanel.setColor(light);
                }
            });
            $('[id^=cp_area_]').on('mousemove', function (e) {
                colorPanel.areaMove(e.pageX - colorPanel.left, $(this).attr('id').replace('cp_area_', ''));
            });
            $('#cp_board').on('mousedown', function (e) {
                colorPanel.mousedown = true;
                var id = e.originalEvent.srcElement.id;
                if (id == 'cp_gray') {
                    var light = e.pageX - colorPanel.left;
                    $('#cp_light').val(light);
                    colorPanel.light = light;
                    colorPanel.setColor(light);
                } else {
                    if (id.indexOf('cp_area_') > -1) {
                        colorPanel.areaMove(e.pageX - colorPanel.left, id.replace('cp_area_', ''));
                    }
                }
            }).on('mouseup', function (e) {
                colorPanel.mousedown = false;
            });
            $('#cp_text').on('keyup', function (e) {
                var v = $(this).val();
                var pattern = /^#[0-9a-fA-F]{6}$/
                if (v.length == 7 && v.substr(0, 1) == '#' && v.match(pattern) != null) {
                    $('#cp_view').css('background-color', v);
                    $(this).val(v.toUpperCase());
                    $('#cp_gray').css('background', 'linear-gradient(to right,#000 0px, ' + v + ' 127px, #fff 255px)');
                    colorPanel.setRGB(v);
                } else {
                    $('#cp_view').css('background-color', '#fff');
                }
            });
            $('#cp_light').on('keyup', function (e) {
                colorPanel.setColor($(this).val());
            });
            $('#cp_close').on('click', function (e) {
                $('#cp_board').hide();
                colorPanel.dfd.reject();
            });
            $('#cp_cancel').on('click', function (e) {
                $('#cp_board').hide();
                colorPanel.dfd.reject();
            });
            $('#cp_choose').on('click', function (e) {
                $('#cp_board').hide();
                colorPanel.selectColor = $('#cp_text').val();
                colorPanel.dfd.resolve();
            });
        }
    }
});
/* 调用方法 */
$.Deferred(colorPanel.show).done(function () {
    alert(colorPanel.selectColor);
});