var colorPickerEventListeners=[];
function colorPicker(pathImg){
    // A few configuration settings
    this.CROSSHAIRS_LOCATION='crosshairs.png';
    this.HUE_SLIDER_LOCATION='h.png';
    this.HUE_SLIDER_ARROWS_LOCATION='position.png';
    this.SAT_VAL_SQUARE_LOCATION='sv.png';
    colorPickerEventListeners=[];
    this.huePositionImg=null;
    this.hueSelectorImg=null;
    this.satValImg=null;
    this.crossHairsImg=null;
    this.colorSelectorDiv=null;
    this.satValDiv=null;
    this.newSatValImg=null;
    this.crossHairs=null;
    this.inputBox2=null;
    
   // initialize:function(pathImg)
   // {        
        this.huePositionImg = document.createElement('img');
        this.huePositionImg.galleryImg = false;        
        this.huePositionImg.width = 18;
        this.huePositionImg.height = 11;
        this.huePositionImg.src = pathImg+this.HUE_SLIDER_ARROWS_LOCATION;
        this.huePositionImg.style.position = 'absolute';
        
        this.hueSelectorImg = document.createElement('img');
        this.hueSelectorImg.galleryImg = false;        
        this.hueSelectorImg.width = 18;        
        this.hueSelectorImg.height = 120;
        this.hueSelectorImg.src = pathImg+this.HUE_SLIDER_LOCATION;
        this.hueSelectorImg.style.display = 'block';
        
        this.satValImg = document.createElement('img');
        this.satValImg.galleryImg = false;
        this.satValImg.width = 120;
        this.satValImg.height = 120;
        this.satValImg.src = pathImg+this.SAT_VAL_SQUARE_LOCATION;
        this.satValImg.style.display = 'block';
        
        this.crossHairsImg = document.createElement('img');
        this.crossHairsImg.galleryImg = false;
        this.crossHairsImg.width = 21;
        this.crossHairsImg.height = 21;
        this.crossHairsImg.src = pathImg+this.CROSSHAIRS_LOCATION;
        this.crossHairsImg.style.position = 'absolute';
    //},
   
    // This copyright statement applies to the following two functions,
    // which are taken from MochiKit.
    //
    // Copyright 2005 Bob Ippolito <bob@redivi.com>
    //
    // Permission is hereby granted, free of charge, to any person obtaining
    // a copy of this software and associated documentation files (the
    // "Software"), to deal in the Software without restriction, including
    // without limitation the rights to use, copy, modify, merge, publish,
    // distribute, sublicense, and/or sell copies of the Software, and to
    // permit persons to whom the Software is furnished to do so, subject
    // to the following conditions:
    //
    // The above copyright notice and this permission notice shall be
    // included in all copies or substantial portions of the Software.
    // 
    // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
    // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
    // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
    // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
    // BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
    // ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
    // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
    
   
    
   
    

}

function makeColorSelector(inputBox,selector)
    {       
        var rgb, hsv;
        //selector.myAddEventListener(window, 'unload', selector.cleanupEventListeners);
        function colorChanged()
        {
            var hex = rgbToHex(rgb.r, rgb.g, rgb.b);
            var hueRgb = hsvToRgb(hsv.h, 1, 1);
            var hueHex = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b);            
            inputBox.value = hex;
            selector.inputBox2.value = hex;
            selector.satValDiv.style.background = hueHex;
            selector.crossHairs.style.left = ((hsv.v*119)-10).toString() + 'px';
            selector.crossHairs.style.top = (((1-hsv.s)*119)-10).toString() + 'px';
            huePos.style.top = ((hsv.h*119)-5).toString() + 'px';
        }
        function rgbChanged()
        {
            hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
            colorChanged();
        }
        function hsvChanged(obj)
        {
            rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
            colorChanged();
        }
        
        selector.colorSelectorDiv = document.createElement('div');
        selector.colorSelectorDiv.className='colorSelectorDiv';
        selector.colorSelectorDiv.style.padding = '10px';
        selector.colorSelectorDiv.style.position = 'relative';
        if(navigator.appName.indexOf("Explorer")<0)
        {
            selector.colorSelectorDiv.style.height = '145px';
            selector.colorSelectorDiv.style.width = '155px';
        }
        else
        {
            selector.colorSelectorDiv.style.height = '165px';
            selector.colorSelectorDiv.style.width = '180px';
        }
        selector.colorSelectorDiv.style.background="white";
        selector.colorSelectorDiv.style.zIndex="10";
           
        selector.satValDiv = document.createElement('div');
        selector.satValDiv.className='colorSelectorSquare';
        selector.satValDiv.style.position = 'relative';    
        selector.satValDiv.style.width = '120px';
        selector.satValDiv.style.height = '120px';
        selector.satValDiv.style.border = "solid 1px #828280";
        selector.newSatValImg = fixPNG(selector.satValImg);
        selector.satValDiv.appendChild(selector.newSatValImg);
        selector.crossHairs = selector.crossHairsImg.cloneNode(false);
        selector.satValDiv.appendChild(selector.crossHairs);
        function satValDragged(x, y)
        {
            hsv.s = 1-(y/119);
            hsv.v = (x/119);
            hsvChanged();
        }
        trackDrag(selector.satValDiv, satValDragged,selector);
        selector.colorSelectorDiv.appendChild(selector.satValDiv);
    
        var hueDiv = document.createElement('div');
        hueDiv.style.position = 'absolute';
        hueDiv.className = 'colorSelectorHue';
        hueDiv.style.left = '145px';
        hueDiv.style.top = '10px';        
        hueDiv.style.border="solid 1px #c6c6c6";
        if(navigator.appName.indexOf("Explorer")<0)
        {
            hueDiv.style.width = '17px';        
        }
         else hueDiv.style.width = '15px';
        hueDiv.style.height = '120px';
        var huePos = fixPNG(selector.huePositionImg);
        hueDiv.appendChild(selector.hueSelectorImg.cloneNode(false));
        hueDiv.appendChild(huePos);
        function hueDragged(x, y)
        {
            hsv.h = y/119;
            hsvChanged();
        }
        trackDrag(hueDiv, hueDragged,this);
        selector.colorSelectorDiv.appendChild(hueDiv);     
        
        function inputBoxChanged()
        {
            if(selector.inputBox2.value.length==0)rgb = hexToRgb(inputBox.value, {r: 0, g: 0, b: 0});
            else rgb = hexToRgb(selector.inputBox2.value, {r: 0, g: 0, b: 0});
            rgbChanged();
        }
        
        function closeSelector()
        {
            inputBox.value=selector.inputBox2.value;
            //alert(inputBox.id+":"+inputBox.value);
            var pare=document.getElementById('controlToggle_div_draw');
            pare.removeChild(selector.colorSelectorDiv.parentNode);
            colorPickerCleanupEventListeners();
        }
        
        selector.inputBox2=document.createElement('INPUT');
        selector.inputBox2.name="colorSelectorValue";
        selector.inputBox2.className="colorSelectorValue";
        selector.inputBox2.type="text";
        
        colorPickerAddEventListener(selector.inputBox2, 'change', inputBoxChanged);
        selector.inputBox2.size =8;        
        selector.inputBox2.style.position = 'absolute';        
         if(navigator.appName.indexOf("Explorer")<0) selector.inputBox2.style.top = (115 + (25 - (selector.inputBox2.offsetHeight/2))).toString() + 'px';
         else selector.inputBox2.style.top = (113 + (25 - (selector.inputBox2.offsetHeight/2))).toString() + 'px';
        selector.inputBox2.style.left = "10px";
        selector.colorSelectorDiv.appendChild(selector.inputBox2);
        
        var butonOK=document.createElement('INPUT');
        butonOK.style.position = 'absolute';
        butonOK.name="colorSelectorOK";
        butonOK.value="OK";
        butonOK.type="button";
        butonOK.style.left = (parseInt((hueDiv.style.left).replace("px",""))-30)+'px';
        butonOK.style.top = selector.inputBox2.style.top;
        butonOK.onclick=closeSelector;
        
        selector.colorSelectorDiv.appendChild(butonOK);
        
        inputBoxChanged();
        
        return selector.colorSelectorDiv;
    }

	function fixPNG(myImage)
    {
        var arVersion = navigator.appVersion.split("MSIE");
        var version = parseFloat(arVersion[1]);
        if ((version >= 5.5) && (version < 7) && (document.body.filters)) 
        {
            var node = document.createElement('span');
            node.id = myImage.id;
            node.className = myImage.className;
            node.title = myImage.title;
            node.style.cssText = myImage.style.cssText;
            node.style.setAttribute('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader"
                                            + "(src=\'" + myImage.src + "\', sizingMethod='scale')");
            node.style.fontSize = '0';
            node.style.width = myImage.width.toString() + 'px';
            node.style.height = myImage.height.toString() + 'px';
            node.style.display = 'inline-block';
            return node;
        }
        else
        {
            return myImage.cloneNode(false);
        }
    }

	 function trackDrag(node, handler,selector)
    {
        function fixCoords(x, y)
        {
            var nodePageCoords = colorPickerPageCoords(node);
            x = (x - nodePageCoords.x) + document.documentElement.scrollLeft;
            y = (y - nodePageCoords.y) + document.documentElement.scrollTop;
            if (x < 0) x = 0;
            if (y < 0) y = 0;
            if (x > node.offsetWidth - 1) x = node.offsetWidth - 1;
            if (y > node.offsetHeight - 1) y = node.offsetHeight - 1;
            return {x: x, y: y};
        }
        function mouseDown(ev)
        {
            var coords = fixCoords(ev.clientX, ev.clientY);
            var lastX = coords.x;
            var lastY = coords.y;
            handler(coords.x, coords.y);
    
            function moveHandler(ev)
            {
                var coords = fixCoords(ev.clientX, ev.clientY);
                if (coords.x != lastX || coords.y != lastY)
                {
                    lastX = coords.x;
                    lastY = coords.y;
                    handler(coords.x, coords.y);
                }
            }
            function upHandler(ev)
            {
                colorPickerRemoveEventListener(document, 'mouseup', upHandler);
                colorPickerRemoveEventListener(document, 'mousemove', moveHandler);
                colorPickerAddEventListener(node, 'mousedown', mouseDown);
            }
            colorPickerAddEventListener(document, 'mouseup', upHandler);
            colorPickerAddEventListener(document, 'mousemove', moveHandler);
            colorPickerRemoveEventListener(node, 'mousedown', mouseDown);
            if (ev.preventDefault) ev.preventDefault();
        }
        colorPickerAddEventListener(node, 'mousedown', mouseDown);
        node.onmousedown = function(e) { return false; };
        node.onselectstart = function(e) { return false; };
        node.ondragstart = function(e) { return false; };
    }

	function colorPickerAddEventListener(node, event, handler)
    {
        if (colorPickerFindEventListener(node, event, handler) != null)
        {
            return;
        }
    
        if (!node.addEventListener)
        {
            node.attachEvent('on' + event, handler);
        }
        else
        {
            node.addEventListener(event, handler, false);
        }
    
        colorPickerEventListeners.push({node: node, event: event, handler: handler});
    }

	function colorPickerFindEventListener(node, event, handler)
    {
        var i;
        for (i in colorPickerEventListeners)
        {
            if (colorPickerEventListeners[i].node == node && colorPickerEventListeners[i].event == event
             && colorPickerEventListeners[i].handler == handler)
            {
                return i;
            }
        }
        return null;
    }

	function hexToRgb(hex_string, default_)
    {
        if (default_ == undefined)
        {
            default_ = null;
        }
    
        if (hex_string.substr(0, 1) == '#')
        {
            hex_string = hex_string.substr(1);
        }
        
        var r;
        var g;
        var b;
        if (hex_string.length == 3)
        {
            r = hex_string.substr(0, 1);
            r += r;
            g = hex_string.substr(1, 1);
            g += g;
            b = hex_string.substr(2, 1);
            b += b;
        }
        else if (hex_string.length == 6)
        {
            r = hex_string.substr(0, 2);
            g = hex_string.substr(2, 2);
            b = hex_string.substr(4, 2);
        }
        else
        {
            return default_;
        }
        
        r = parseInt(r, 16);
        g = parseInt(g, 16);
        b = parseInt(b, 16);
        if (isNaN(r) || isNaN(g) || isNaN(b))
        {
            return default_;
        }
        else
        {
            return {r: r / 255, g: g / 255, b: b / 255};
        }
    }

	function rgbToHsv(red, green, blue)
    {
        var max = Math.max(Math.max(red, green), blue);
        var min = Math.min(Math.min(red, green), blue);
        var hue;
        var saturation;
        var value = max;
        if (min == max)
        {
            hue = 0;
            saturation = 0;
        }
        else
        {
            var delta = (max - min);
            saturation = delta / max;
            if (red == max)
            {
                hue = (green - blue) / delta;
            }
            else if (green == max)
            {
                hue = 2 + ((blue - red) / delta);
            }
            else
            {
                hue = 4 + ((red - green) / delta);
            }
            hue /= 6;
            if (hue < 0)
            {
                hue += 1;
            }
            if (hue > 1)
            {
                hue -= 1;
            }
        }
        return {
            h: hue,
            s: saturation,
            v: value
        };
    }

	function rgbToHex(r, g, b, includeHash)
    {
        r = Math.round(r * 255);
        g = Math.round(g * 255);
        b = Math.round(b * 255);
        if (includeHash == undefined)
        {
            includeHash = true;
        }
        
        r = r.toString(16);
        if (r.length == 1)
        {
            r = '0' + r;
        }
        g = g.toString(16);
        if (g.length == 1)
        {
            g = '0' + g;
        }
        b = b.toString(16);
        if (b.length == 1)
        {
            b = '0' + b;
        }
        return ((includeHash ? '#' : '') + r + g + b).toUpperCase();
    }

	 function hsvToRgb(hue, saturation, value)
    {
        var red;
        var green;
        var blue;
        if (value == 0.0)
        {
            red = 0;
            green = 0;
            blue = 0;
        }
        else
        {
            var i = Math.floor(hue * 6);
            var f = (hue * 6) - i;
            var p = value * (1 - saturation);
            var q = value * (1 - (saturation * f));
            var t = value * (1 - (saturation * (1 - f)));
            switch (i)
            {
                case 1: red = q; green = value; blue = p; break;
                case 2: red = p; green = value; blue = t; break;
                case 3: red = p; green = q; blue = value; break;
                case 4: red = t; green = p; blue = value; break;
                case 5: red = value; green = p; blue = q; break;
                case 6: // fall through
                case 0: red = value; green = t; blue = p; break;
            }
        }
        return {r: red, g: green, b: blue};
    }   

	 function colorPickerPageCoords(node)
    {
        var x = node.offsetLeft;
        var y = node.offsetTop;
        var parent = node.offsetParent;
        while (parent != null)
        {
            x += parent.offsetLeft;
            y += parent.offsetTop;
            parent = parent.offsetParent;
        }
        return {x: x, y: y};
    }   

	function colorPickerRemoveEventListenerIndex(index)
    {
        var eventListener = colorPickerEventListeners[index];
        delete colorPickerEventListeners[index];
        
        if (!eventListener.node.removeEventListener)
        {
            eventListener.node.detachEvent('on' + eventListener.event,
                                           eventListener.handler);
        }
        else
        {
            eventListener.node.removeEventListener(eventListener.event,
                                                   eventListener.handler, false);
        }
    }  
    function colorPickerRemoveEventListener(node, event, handler)
    {
        colorPickerRemoveEventListenerIndex(colorPickerFindEventListener(node, event, handler));
    }   

	function colorPickerCleanupEventListeners()
    {
        var i;
        for (i = colorPickerEventListeners.length; i > 0; i--)
        {
            if (colorPickerEventListeners[i] != undefined)
            {
                colorPickerRemoveEventListenerIndex(i);
            }
        }
    }