HTML5简易取色器中遇到的jquery闭包问题

现在在做一个有关图片处理的项目，用到了一些HTML5中的新特性，但是在颜色方面没有找到一个比较好用的取色器，所以就打算自己写一个。

实现过程比较简单，由于是第一次写类似插件的JS，涉及到了闭包问题，对于我来说还是第一次接触，所以难免遇到一些问题。

问题描述：

我 在$.fn.colorpicker = function (callbackFun, colorType)中接收两个参数（回调函数和返回值类型），问题是在我在两个地方调用$.fn.colorpicker并传递不同回调函数参数时，无 法更改包中的callbackFun值，导致每次返回的颜色都传递到第一次调用的回调函数中，希望有大牛帮我解释一下。

以下是js全部代码（暂时只支持火狐浏览器，其它未作兼容，实现比较匆忙，有什么需要改进的地方欢迎指点）

/*
colorpicker 1.0
Copyright (c) 2013 Jia Wencheng
Email:jiawencheng06@163.com

Name:colorpicker

Description:This a jQuery (Interface) colorpicker.
*/
(function ($) {
    $.fn.colorpicker = function (callbackFun, colorType) {

        originObj = $(this);
        colorType = colorType;
        callbackFun = callbackFun;

        $(document).ready(function () {
            if (!$("#divMain")[0]) {
                createElement();
                initColorMapBar();
                initColorMap([0, 0, 0]);
            }
        });

        if ($("#divMain").css("display") == "none") {
            $("#divMain").css("display", "block");
            initColorPicker();
        }
        else {
            $("#divMain").css("display", "none");
        }

        function initColorPicker() {
            var offsetTop;
            if ((originObj.offset().top + originObj.height() / 2) < 179) {
                offsetTop = 0;
            }
            else if ((originObj.offset().top + originObj.height() / 2 + 179) > window.innerHeight) {
                offsetTop = window.innerHeight - 356;
            }
            else {
                offsetTop = originObj.offset().top + originObj.height() / 2 - 179;
            }

            var offsetLeft;
            if ((window.innerWidth - originObj.offset().left - originObj.width()) < 325) {
                offsetLeft = originObj.offset().left - 325;
            }
            else {
                offsetLeft = originObj.offset().left + originObj.width() + 10;
            }

            $(divMain).css("top", offsetTop);
            $(divMain).css("left", offsetLeft);
        }

        function createElement() {
            divMain = document.createElement("div");
            divMain.id = "divMain";
            $(divMain).css("width", 315).css("height", 356).css("background-color", "#E8E8E8").css("position", "absolute").css("border", "1px solid #CCCCCC").css("-moz-user-select", "none").css("box-shadow", "10px 10px 10px rgba(0, 0, 0, 0.2)").css("display", "none").css("z-index", "10000");

            divHeader = document.createElement("div");
            divHeader.id = "divHeader";
            $(divHeader).css("height", 28).css("background", "-moz-linear-gradient(center top , #FFFFFF, #E5E5E5) repeat scroll 0 0 transparent").css("position", "relative").css("font-weight", 300).css("color", "#212121").css("cursor", "move").css("border-bottom", "1px solid #CCCCCC").css("box-shadow", "0 1px 0 0 #F4F4F4");
            divHeader.onmousedown = divHeaderMouseDown;
            divHeader.onmouseup = divHeaderMouseUp;
            divHeader.onmousemove = divHeaderMouseMove;
            divHeader.onmouseout = divHeaderMouseOut;

            spanName = document.createElement("span");
            spanName.id = "spanName";
            $(spanName).css("height", 28).css("padding-left", 20).css("line-height", "28px").css("text-shadow", "0 1px 0 #FFFFFF").css("background-color", "transparent").css("vertical-align", "top").css("word-wrap", "break-word").css("font-weight", 600).css("font-size", "12px").css("font-family", "HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif").css("float", "left").html("Color");
            spanName.click = cpClose;
            divHeader.appendChild(spanName);

            spanClose = document.createElement("span");
            spanClose.id = "spanClose";
            $(spanClose).css("background", "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAArUlEQVQoz2OYOXMmAxSzAXEOEB8A4p9QfAAqxgZTB1MsDcTngfg/DnweqoYBZvIlPIphGKSGjQFqJUxwPxA7QE1cj8SGyeeANBxGMwmkyACIBYC4AE3uMAPUc8iC9////w8SV8DirJ/YNPSDNEA17UeT+wwSPIZsOtQpDUAcALXlPZL8MZCGfCSB9VDF/6EKG9A8nU9WsMIi7hIBxdLIMQ2zKR+aHODBCBWDJw0AyNRnE3i8MH4AAAAASUVORK5CYII=') no-repeat scroll 0 0 transparent").css("cursor", "pointer").css("height", "12px").css("width", "12px").css("opacity", "0.7").css("overflow", "hidden").css("position", "absolute").css("right", "15px").css("top", "7px").attr("title", "Close");
            spanClose.onclick = cpClose;
            divHeader.appendChild(spanClose);
            $(spanClose).mouseover(function () {
                $(this).css("opacity", "1");
            });
            $(spanClose).mouseout(function () {
                $(this).css("opacity", "0.7");
            });
            divMain.appendChild(divHeader);

            divCanvas = document.createElement("div");
            divCanvas.id = "divCanvas";
            $(divCanvas).css("height", 280).css("position", "relative").css("box-shadow", "0 1px 0 0 #F4F4F4").css("border-bottom", "1px solid #CCCCCC");

            divCPSubmit = document.createElement("div");
            divCPSubmit.id = "divCPSubmit";
            $(divCPSubmit).css("height", 40);

            canvasMap = document.createElement("canvas");
            canvasMap.id = "canvasMap";
            contextMap = canvasMap.getContext("2d");
            canvasMap.setAttribute("height", 260);
            canvasMap.setAttribute("width", 260)
            $(canvasMap).css("float", "left").css("position", "absolute").css("top", "10px").css("left", "10px");
            divCanvas.appendChild(canvasMap);

            canvasMapCover = document.createElement("canvas");
            canvasMapCover.id = "canvasMapCover";
            contextMapCover = canvasMapCover.getContext("2d");
            canvasMapCover.setAttribute("height", 260);
            canvasMapCover.setAttribute("width", 260)
            $(canvasMapCover).css("float", "left").css("position", "absolute").css("top", "10px").css("left", "10px").css("cursor", "crosshair").css("background-color", "transparent");
            canvasMapCover.onclick = colorMapClicked;
            divCanvas.appendChild(canvasMapCover);

            canvasMapBar = document.createElement("canvas");
            canvasMapBar.id = "canvasMapBar";
            contextMapBar = canvasMapBar.getContext("2d");
            canvasMapBar.setAttribute("height", 260);
            canvasMapBar.setAttribute("width", 30)
            $(canvasMapBar).css("float", "left").css("position", "absolute").css("top", "10px").css("right", "10px");
            divCanvas.appendChild(canvasMapBar);

            canvasMapBarCover = document.createElement("canvas");
            canvasMapBarCover.id = "canvasMapBarCover";
            contextMapBarCover = canvasMapBarCover.getContext("2d");
            canvasMapBarCover.setAttribute("height", 260);
            canvasMapBarCover.setAttribute("width", 30)
            $(canvasMapBarCover).css("float", "left").css("position", "absolute");
            $(canvasMapBarCover).css("position", "absolute").css("top", "10px").css("right", "10px").css("cursor", "crosshair");
            canvasMapBarCover.onclick = colorMapBarClicked;
            divCanvas.appendChild(canvasMapBarCover);

            divMain.appendChild(divCanvas);

            divFooter = document.createElement("div");
            divFooter.id = "divFooter";
            $(divFooter).css("height", "26px").css("float", "left").css("padding", "10px");

            divApply = document.createElement("div");
            divApply.id = "divApply";
            $(divApply).css("background", "none repeat scroll 0 0 transparent").css("border", "1px solid #CCCCCC").css("font-size", "100%").css("margin", "0px").css("outline", "0 none").css("padding", "0px").css("border-radius", "4px").css("vertical-align", "baseline").css("height", "26px").css("float", "left");

            divColor = document.createElement("div");
            divColor.id = "divColor";
            $(divColor).css("float", "left").css("background-color", "#DB0268").css("height", "13px").css("padding", "6px 5px 7px").css("width", "10px").css("border-radius", "4px 0 0 4px");
            divApply.appendChild(divColor);

            txtColorValue = document.createElement("input");
            txtColorValue.id = "txtColorValue";
            txtColorValue.type = "text";
            $(txtColorValue).css("float", "left").css("box-shadow", "0 -1px 0 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.5)").css("color", "#444444").css("font-size", "11px").css("padding", "6px 5px 7px").css("width", "50px").css("text-transform", "uppercase").css("text-align", "center").css("border", "0px").css("-moz-user-select", "text");
            txtColorValue.onkeyup = txtColorValueKeyUp;
            divApply.appendChild(txtColorValue);

            btnApply = document.createElement("input");
            btnApply.id = "btnApply";
            btnApply.type = "button";
            $(btnApply).css("background-color", "#DB0268").css("box-shadow", "0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.5))").css("border", "0px").css("border-radius", "0px 4px 4px 0px").css("color", "#FFFFFF").css("cursor", "pointer").css("float", "left").css("font-size", "11px").css("padding", "5px 10px 6px 10px").css("text-shadow", "0 -1px 0 rgba(0, 0, 0, 0.5)").attr("value", "Apply");
            btnApply.onclick = cpApply;
            divApply.appendChild(btnApply);

            divFooter.appendChild(divApply);

            btnCancel = document.createElement("input");
            btnCancel.id = "btnCancel";
            btnCancel.type = "button";
            $(btnCancel).css("background-color", "#E5E5E5").css("background-image", "-moz-linear-gradient(center top , #F4F4F4, #E5E5E5)").css("background-repeat", "repeat-x").css("box-shadow", "0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.5)").css("border", "1px solid #D1D1D1").css("border-radius", "4px 4px 4px 4px").css("color", "#212121").css("text-shadow", "0 1px 1px rgba(255, 255, 255, 0.75)").css("cursor", "pointer").css("float", "right").css("position", "relative").css("left", "90px").css("margin-bottom", "0px").css("font-size", "11px").css("-moz-user-select", "-moz-none").css("padding", "5px 10px 6px 10px").attr("value", "Cancel");
            btnCancel.onclick = cpClose;
            divApply.appendChild(btnCancel);

            divFooter.appendChild(btnCancel);

            divMain.appendChild(divFooter);

            jQuery("body").prepend(divMain);
            $("#divCPMain").css("display", "block");
        };

        function initColorMapBar() {
            var color = 0;

            var fillColor = contextMapBar.createLinearGradient(1, 1, 30, 1);

            for (var i = 0; i < 6; i++) {
                color = i % 2 == 0 ? 0 : 255;

                for (var j = 1; j < 45; j++) {
                    if (i % 2 == 0) {
                        if (color > 248 && color <= 255) {
                            color = 255;
                        }
                        else {
                            color = color + 6;
                        }
                    }
                    else {
                        if (color < 7 && color >= 0) {
                            color = 0;
                        }
                        else {
                            color = color - 6;
                        }
                    }

                    switch (i) {
                        case 0:
                            fillColor.addColorStop(0, "rgba(255,0," + color + ",1)");
                            break;
                        case 1:
                            fillColor.addColorStop(0, "rgba(" + color + ",0,255,1)");
                            break;
                        case 2:
                            fillColor.addColorStop(0, "rgba(0," + color + ",255,1)");
                            break;
                        case 3:
                            fillColor.addColorStop(0, "rgba(0,255," + color + ",1)");
                            break;
                        case 4:
                            fillColor.addColorStop(0, "rgba(" + color + ",255,0,1)");
                            break;
                        case 5:
                            fillColor.addColorStop(0, "rgba(255," + color + ",0,1)");
                            break;
                    }

                    fillColor.addColorStop(1, "rgba(0,0,0,1)");

                    contextMapBar.beginPath();
                    contextMapBar.moveTo(1, j + 43 * i);
                    contextMapBar.lineTo(30, j + 43 * i);
                    contextMapBar.lineWidth = 2;
                    contextMapBar.strokeStyle = fillColor;
                    contextMapBar.stroke();
                }
            }
        }

        function initColorMap(imageData) {

            var fillColor = contextMapBar.createLinearGradient(1, 1, 1, 260);

            fillColor.addColorStop(1, "rgba(0,0,0,1)");

            for (var i = 0; i < 260; i++) {
                fillColor.addColorStop(0, "rgba(" + (255 - Math.round((255 - imageData[0]) * i / 260)) + "," + (255 - Math.round((255 - imageData[1]) * i / 260)) + "," + (255 - Math.round((255 - imageData[2]) * i / 260)) + ",1)");

                contextMap.beginPath();
                contextMap.moveTo(i + 1, 1);
                contextMap.lineTo(i + 1, 260);
                contextMap.lineWidth = 2;
                contextMap.strokeStyle = fillColor;
                contextMap.stroke();
            }
        }

        function drawMapCrossMark(coorX, coorY, contextObj) {
            contextObj.clearRect(0, 0, 260, 260);
            contextObj.beginPath();
            contextObj.moveTo(coorX - 4, coorY);
            contextObj.lineTo(coorX - 1, coorY);
            contextObj.moveTo(coorX, coorY - 4);
            contextObj.lineTo(coorX, coorY - 1);
            contextObj.moveTo(coorX + 1, coorY);
            contextObj.lineTo(coorX + 4, coorY);
            contextObj.moveTo(coorX, coorY + 1);
            contextObj.lineTo(coorX, coorY + 4);
            contextObj.lineWidth = 1;
            contextObj.strokeStyle = "#FFF";
            contextObj.stroke();
        }

        function colorMapClicked(e) {
            drawMapCrossMark(e.layerX, e.layerY, contextMapCover);
            var colorData = contextMap.getImageData(e.layerX, e.layerY, 1, 1).data;
            $(txtColorValue).val((colorData[0].toString(16).length == 2 ? colorData[0].toString(16) : "0" + colorData[0].toString(16)) + (colorData[1].toString(16).length == 2 ? colorData[1].toString(16) : "0" + colorData[1].toString(16)) + (colorData[2].toString(16).length == 2 ? colorData[2].toString(16) : "0" + colorData[2].toString(16)));
            $(divColor).css("background-color", "#" + $(txtColorValue).val());
        }

        function colorMapBarClicked(e) {
            drawMapCrossMark(e.layerX, e.layerY, contextMapBarCover);
            var colorData = contextMapBar.getImageData(e.layerX, e.layerY, 1, 1).data;
            initColorMap(colorData);
            $(txtColorValue).val((colorData[0].toString(16).length == 2 ? colorData[0].toString(16) : "0" + colorData[0].toString(16)) + (colorData[1].toString(16).length == 2 ? colorData[1].toString(16) : "0" + colorData[1].toString(16)) + (colorData[2].toString(16).length == 2 ? colorData[2].toString(16) : "0" + colorData[2].toString(16)));
            $(divColor).css("background-color", "#" + $(txtColorValue).val());
        }

        function txtColorValueKeyUp(e) {
            var colorData = $(this).val().split('');

            if (colorData.length >= 3 && colorData.length < 6) {
                colorData = [colorData[0], colorData[0], colorData[1], colorData[1], colorData[2], colorData[2]];
            }

            var isColorDataIsValid = true;
            for (var i = 0; i < 6; i++) {
                if (!(colorData[i].charCodeAt() >= 48 && colorData[i].charCodeAt() <= 57) || (colorData[i].charCodeAt() >= 65 && colorData[i].charCodeAt() <= 70) || (colorData[i].charCodeAt() >= 97 && colorData[i].charCodeAt() <= 102)) {
                    isColorDataIsValid = false;
                    break;
                }
            }
            if (isColorDataIsValid) {
                $(divColor).css("background-color", "#" + $(txtColorValue).val());
            }
        }

        function divHeaderMouseDown(e) {
            isMouseDown = true;
            layerXTemp = e.layerX;
            layerYTemp = e.layerY;
            $("#divMain").css("opacity", "0.9");
        }

        function divHeaderMouseUp(e) {
            isMouseDown = false;
            $("#divMain").css("opacity", "1");
        }

        function divHeaderMouseMove(e) {
            if (isMouseDown) {
                $("#divMain").css("left", e.clientX - layerXTemp);
                $("#divMain").css("top", e.clientY - layerYTemp);
            }
        }

        function divHeaderMouseOut(e) {
            isMouseDown = false;
            $("#divMain").css("opacity", "1");
        }

        function cpApply() {
            if (typeof callbackFun == "function") {
                if (colorType == "rgb") {
                    callbackFun(new colorRgb($("#divColor").css("background-color").split(')')[0].substring(4).split(',')));
                }
                else {
                    callbackFun(colorHex($("#divColor").css("background-color").split(')')[0].substring(4).split(',')).toLocaleUpperCase());
                }
            }
            $("#divMain").css("display", "none");
        }

        function cpClose() {
            $("#divMain").css("display", "none");
        }

        function colorRgb(rgb) {
            this.r = rgb[0],
            this.g = rgb[1],
            this.b = rgb[2]
        }

        function colorHex(rgb) {
            return "#" + colorSingelHex(parseInt(rgb[0])) + colorSingelHex(parseInt(rgb[1])) + colorSingelHex(parseInt(rgb[2]));
        }

        function colorSingelHex(value) {
            return value.toString(16).length > 1 ? value.toString(16) : "0" + value.toString(16);
        }
    }

})(jQuery);