color-picker

cpick.htm
  Choose A color: <input type="text" id="color1" size="12"><input id="colora1" type="button" value="" style="cursor:pointer;width:22px;height:22px;border:1px inset gray;background-color:#FF0000"  onclick="ShowLayer(1);"><BR>
  Choose A color: <input type="text" id="color2" size="12"><input id="colora2" type="button" value="" style="cursor:pointer;width:22px;height:22px;border:1px inset gray;background-color:#FF0000"  onclick="ShowLayer(2);"><BR>            
  Choose A color: <input type="text" id="color3" size="12"><input id="colora3" type="button" value="" style="cursor:pointer;width:22px;height:22px;border:1px inset gray;background-color:#FF0000"  onclick="ShowLayer(3);"><BR>
  Choose A color: <input type="text" id="color4" size="12"><input id="colora4" type="button" value="" style="cursor:pointer;width:22px;height:22px;border:1px inset gray;background-color:#FF0000"  onclick="ShowLayer(4);"><BR>            

  <!--COLOR PICKER WIDGET BEGIN -->
<div style="position:absolute;border:1px solid black;background-color:white;display:none;width:340px;height:420px;color:#000000;" id="main" imgLoc="">
</div>
<script language="JavaScript" src="cpick.js"></script>
<!--COLOR PICKER WIDGET END -->
</div>

/*
Author: Eric Simmons
Contact: [email protected]
Website: http://www.jswitch.com
Version: 2.0 12/2004      
Browser Target: Mozilla 7+/FireFox Netscape 7+, IE 5.0+
Purpose : Its time for a badly needed update.

DISCLAIMER
THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT
ANY EXPRESS OR IMPLIED WARRANTIES, JSWITCH.COM
IS NOT RESPONSIBLE FOR ANY ADVERSE AFFECTS TO
YOUR COMPUTER OR SYSTEM RUNNING THESE SCRIPTS.

v 1.0
Initial implementation of the color tool.
Basic RGB hex color picker.

v2.0
new features:
Displayable <DIV> layer acts as a popup dailog.
Only requires 2 graphics files.
Can retian up to 8 personal colors.

v 2.1 6/05
When choosing a color on the color map it gets selected.                  
Fixed probelms with IE scrolling.
Added addition custom color space.
UI change for cleaner look and more defined user of controls.
                
  

fixes:
Cleaner JS for more clarity.
Code optimized for speed.


*/

//Changable variables
var STR_CAPTION = "JSwitch Color Picker"
/*This is the function that you can add your code to, or overide and access the color
in the SEL_COLOR variable. The SEL_COLOR variable is a hex value of the currently
selected color. It is set everytime a user clicks on the ok button.
After setting the SEL_COLOR var the BtnOk() function calls the "BtnOkClicked()";
function  BtnOkClicked()
{}
*/


var mouseX =0; //current horizontal position of the mouse
var mouseY =0; //current veritcal position of the mouse
var boxX =0;
var boxY =0;
var cpaneX = 0;
var cpaneY = 0;  
var cmapX = 0;
var cmapY = 0;
var cPaneT = 0;
var cPaneL = 0;
var cmapRegSel = 1;
var cmapReg = 1;
var cmapSel = 10;
var InCPane = false;
var InCMap = false;
var U_COL_NUM = 10;
var usrColor = new Array("NA","NA","NA","NA","NA","NA","NA","NA","NA","NA");
var SEL_COLOR;
var IMG_PATH

var PALLET_LAYER = null;


//CSS STYLES
var STYLE_BTN = 'text-align:center;cursor:pointer;font-family:\"TAHOMA\";font-size:11pt;font-weight:bold;width:60px;height:20px;background-color:ThreeDHighlight;position:absolute;';
var STYLE_BTN_OVER ='position:absolute;border:1px solid black;text-align:center;cursor:pointer;font-family:"TAHOMA";font-size:11pt;font-weight:bold;background-color:ThreeDHighlight';
var STYLE_BTN_DOWN ='border-bottom:1px solid ButtonHighlight;border-right:1px solid ButtonHighlight;border-top:1px solid ButtonShadow;border-left:1px solid ButtonShadow;';
var STYLE_BORD =    'position:absolute;border:1px solid black;';
var STYLE_CMAP =    'position:absolute;border:1px solid black;background-image:url(\''+document.getElementById("main").getAttribute("imgLoc")+'cmap.jpg\'); background-repeat:no-repeat;';
//var STYLE_MASK_MZ = 'position:absolute;border:1px solid black;cursor:crosshair;width:257px;height:258px;left:5px;top:30px;';
var STYLE_MASK_MS = 'position:absolute;border:1px solid black;cursor:crosshair;width:257px;height:258px;left:5px;top:30px;';
var STYLE_USER =    'position:absolute;border:1px solid black;width:20px;height:20px;cursor:pointer;';
var STYLE_TAG =     'position:absolute;border:1px solid black;color:white;text-align:center;width:40px;height:20px';
var STYLE_TEXT =    'width:30px;height:20px;position:absolute;';
var STYLE_COMP =    'position:absolute;border:1px solid black;width:60px;height:20px;';

document.onmousemove = getXY; //get new cords when mouse is moved  
if (navigator.appName == "Microsoft Internet Explorer")
{
    cPaneT = 34;
    cPaneL = 9;
} else
{
    cPaneT = 32;
    cPaneL = 6;
    document.captureEvents(Event.MOUSEMOVE);
}

GetCookieArray();

function ShowLayer(id,id2)
{
    var mainDiv = document.getElementById("main");
    
        boxX = mouseX;
        boxY = mouseY;
        mainDiv.style.top = boxY
        mainDiv.style.left = boxX;
        
        
        mainDiv.style.display = 'inline';
           
    date = new Date();
    date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 30));
  
         document.cookie = 'Field='+id+'; expires=' + date.toGMTString();
//        document.cookie = 'Field2='+id2+';  expires=' + date.toGMTString();
         
        IMG_PATH = mainDiv.getAttribute("imgLoc");
        mainDiv.innerHTML= MakeDivLayer();
        //mainDiv.innerHTML=CreatePalette();

        if(navigator.appName == "Microsoft Internet Explorer")
            document.getElementById("cPaneMask").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ IMG_PATH +"cmask.png', sizingMethod='scale')" ;
        else
            document.getElementById("cPaneMask").style.backgroundImage = 'url('+IMG_PATH+'cmask.png)';
        UpdateUserColor();
        ChangePaneColor("FF0000");
}

function SetUserColor()
{
    curCol = document.getElementById("cComp1").style.backgroundColor;
    for (i=U_COL_NUM-1;i>0;i--)
    {
        usrColor[i] = usrColor[i-1];
    }
    if(curCol.substr(0,1) == "r")
        curCol = rgb2hex(curCol);
    usrColor[0] = curCol;
    UpdateUserColor();
    UpdateUserCookie();
}

function UpdateUserColor()
{  
    divName = "cUser";
    for (i=0;i<U_COL_NUM;i++)
    {
        tempName =divName + i;
        if (usrColor[i] != "NA")
            document.getElementById(tempName).style.backgroundColor = usrColor[i];
    }
}

function UpdateUserCookie()
{
    date = new Date();
    date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 30));
    document.cookie = "cUser" + "=" + escape(usrColor.toString()) + "; expires=" + date.toGMTString();  
}

function GetCookieArray()
{      
   tmpColor = GetUserCookie("cUser").split(",");
   for(i=0;i<tmpColor.length;i++)
   {
       if(tmpColor[i] != "")
       {    
           usrColor[i] = tmpColor[i];
       }
              
   }
}

function SetRetainColor(userObj)
{
    newColor =  userObj.style.backgroundColor;
    document.getElementById("cComp1").style.backgroundColor = newColor;

    if(newColor.substr(0,1) == "r")
        document.getElementById("thex").value = rgb2hex(newColor);
    else
        document.getElementById("thex").value = newColor;
}

function GetUserCookie(crumbName)
{
    colCookie = document.cookie.split("; ");
    
    for (a=0; a < colCookie.length; a++)
    {
        colCrumb = colCookie[a].split("=");                    
        if(colCrumb[0] == crumbName)
            return unescape(colCrumb[1]);
    }

    return "";

}

function getXY(e)
{
    if (!e)
    {
        mouseX = event.clientX + document.body.scrollLeft;
        mouseY = event.clientY + document.body.scrollTop;
    } else
    {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }    

    
    if (InCPane)
    {
        cpaneX = mouseX - boxX-cPaneL;
        cpaneY = mouseY - boxY-cPaneT;
        if (cpaneX < 0) cpaneX = 0;
        if (cpaneX > 255) cpaneX = 255;
        if (cpaneY < 0) cpaneY = 0;
        if (cpaneY > 255) cpaneY = 255;
        FindColor();
    }

    if (InCMap)
    {
        cmapX =  mouseX - boxX-272;
        cmapY =  mouseY - boxY-32;
        if (cmapX < 1) cmapX = 1;
        if (cmapX > 60) cmapX = 60;
        if (cmapY < 0) cmapY = 0;
        if (cmapY > 255) cmapY = 255;
        cmapReg =  Math.ceil(cmapX/10);
    }

}

function GetMapColor()
{
    var rtnColor
  
    cmapSel = cmapY;
    document.getElementById("cmapCur").style.top  =cmapY-1;
    document.getElementById("cmapCur").style.left  = ((cmapReg-1)*10);
    cmapRegSel = cmapReg;
    switch (cmapReg)
    {
    case 1:
        rtnColor = '#' + dec2hex(255) + dec2hex(0) + dec2hex(cmapSel);
        break;
    case 2:
        rtnColor = '#' + dec2hex(cmapSel) + dec2hex(0) + dec2hex(255);
        break;
    case 3:
        rtnColor = '#' + dec2hex(0) + dec2hex(cmapSel) + dec2hex(255);
        break;
    case 4:
        rtnColor = '#' + dec2hex(0) + dec2hex(255) + dec2hex(cmapSel);
        break;
    case 5:
        rtnColor = '#' + dec2hex(cmapSel) + dec2hex(255) + dec2hex(0);
        break;
    case 6:
        rtnColor = '#' + dec2hex(255) + dec2hex(cmapSel) + dec2hex(0);
        break;  
    }  
    return rtnColor;
}

function GetNewColor()
{
    newColor = FindColor();
    document.getElementById("cComp1").style.backgroundColor = newColor;
    document.getElementById("thex").value = newColor;
}

function FindColor()
{
    var X;
    var Y;
    var Z;
    var R;
    var G;
    var B;
    
    X = cpaneX;
    Y = Math.round (cpaneY * (X/255));
    Z = (cpaneY * ((255-cmapSel)/255)) + cmapSel;
    Z = Math.round( Z * (cpaneX/255));
    
    switch (cmapRegSel)
    {
    case 1:
        R = X;G = Y;B = Z;
        break;
    case 2:
        R = Z;G = Y;B = X;
        break;
    case 3:
        R = Y;G = Z;B = X;
        break;
    case 4:
        R = Y;G = X;B = Z;
        break;
    case 5:
        R = Z;G = X;B = Y;
        break;
    case 6:
        R = X;G = Z;B = Y;
        break;  
    }

    bgRed   = '#' + dec2hex(R) + dec2hex(0) + dec2hex(0);
    bgGrn   = '#' + dec2hex(0) + dec2hex(G) + dec2hex(0);
    bgBlu   = '#' + dec2hex(0) + dec2hex(0) + dec2hex(B);
    rtnColor = '#' + dec2hex(R) + dec2hex(G) + dec2hex(B);
    
    document.getElementById("red").value = String(R);  
    document.getElementById("grn").value = String(G);
    document.getElementById("blu").value = String(B);
    document.getElementById("red").style.backgroundColor = bgRed;  
    document.getElementById("grn").style.backgroundColor = bgGrn;
    document.getElementById("blu").style.backgroundColor = bgBlu;
    document.getElementById("cComp2").style.backgroundColor = rtnColor;
    return rtnColor;
}

function FindColorPoint(pointX, pointY)
{
    var X;
    var Y;
    var Z;
    var R;
    var G;
    var B;
    
    X = pointX;
    Y = Math.round (pointY * (X/255));
    Z = (cpaneY * ((255-cmapSel)/255)) + cmapSel;
    Z = Math.round( Z * (pointX/255));
    
    switch (cmapRegSel)
    {
    case 1:
        R = X;G = Y;B = Z;
        break;
    case 2:
        R = Z;G = Y;B = X;
        break;
    case 3:
        R = Y;G = Z;B = X;
        break;
    case 4:
        R = Y;G = X;B = Z;
        break;
    case 5:
        R = Z;G = X;B = Y;
        break;
    case 6:
        R = X;G = Z;B = Y;
        break;  
    }

    bgRed   = '#' + dec2hex(R) + dec2hex(0) + dec2hex(0);
    bgGrn   = '#' + dec2hex(0) + dec2hex(G) + dec2hex(0);
    bgBlu   = '#' + dec2hex(0) + dec2hex(0) + dec2hex(B);
    rtnColor = '#' + dec2hex(R) + dec2hex(G) + dec2hex(B);
    return rtnColor;
}


function ChangePaneColor(nColor)
{
    document.getElementById("cPane").style.backgroundColor = nColor;
    document.getElementById("cComp1").style.backgroundColor = nColor;
    document.getElementById("thex").value = nColor;
}

function rgb2hex(rgb)
{
    rExp = new RegExp("RGB", "i");
    rgb = rgb.replace(rExp,"");
    rgb = rgb.substring(1,rgb.length-1);
    rgbAry = rgb.split(", ");
    rtnStr = "#" + dec2hex(parseInt(rgbAry[0])) + dec2hex(parseInt(rgbAry[1])) + dec2hex(parseInt(rgbAry[2]))
    return rtnStr;
}
function dec2hex(n)
{
    s=(n.toString(16));
    s=s.toUpperCase();
    if (s.length == 1)
        s = '0' + s
    return(s);
}

function BtnCancel()
{
    document.getElementById("main").style.display = "none";
    cmapRegSel = 1;
    cmapSel = 0;
}


function BtnOk()
{
    SEL_COLOR = document.getElementById("thex").value
    BtnCancel();
    BtnOkClicked();
}


function CreatePalette()
{
    var newPalLayer = "";
    ptop = 0;
    pleft = 5;
    cNum = 0;
    for(rows=0;rows < 10; rows++)
    {
        for (cols=0;cols<10;cols++)
        {
            newPalLayer += '<div style="background-color:'+ FindColorPoint(10, cNum) +';left:'+pleft +'px;top:'+ ptop +'px;'+STYLE_USER+'"  onclick="SetRetainColor(this);"></div>';
            pleft += 25;
            cNum += 2;
        }
        pleft = 5;
        ptop += 25;
        cNum += 2;
    }
    //alert(newPalLayer);
    return newPalLayer;
}

function MakeDivLayer()
{
    var newDivLayer;
    newDivLayer = '<div id="title" style="width:337px;height:22px;border-bottom:1px solid black;font-weight:bold;color:white;text-align:center;background-color:#0C58C2;">' + STR_CAPTION + '</div>';
    newDivLayer += '<div id="cPane" style="border-left:1px solid black;position:absolute;width:257px;height:258px;left:5px;top:30px;background-color:#FF0000;"></div>';
    newDivLayer += '<div style="'+STYLE_MASK_MS+'" id="cPaneMask" onmouseout="InCPane=false;" onMouseMove="InCPane=true;" onclick="GetNewColor();"></div>';
    newDivLayer += '<div style="cursor:crosshair;width:60px;height:258px;left:270px;top:30px;'+STYLE_CMAP+'" id="cMap" onclick="ChangePaneColor(GetMapColor());" onmouseout="InCMap=false;" onMouseMove="InCMap=true;">';
    newDivLayer += '<div id="cmapCur" style="position:absolute;left:0px;top:0px;width:10px;height:1px;border-bottom:1px solid black"><!-- --></div>';
    newDivLayer += '</div>';
  
    newDivLayer += '<span style="position:absolute;left:5px;top:290px;">Custom colors:</span>';
    newDivLayer += '<input type="button" style="height:20px;width:45px;left:7px;top:310px;'+STYLE_BTN_OVER+'" id="btnUser" onclick="SetUserColor();" value=">>">';
    newDivLayer += '<div style="left:55px;top:310px;'+STYLE_USER+'"  id="cUser0" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:80px;top:310px;'+STYLE_USER+'"  id="cUser1" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:5px;top:335px;'+STYLE_USER+'" id="cUser2" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:30px;top:335px;'+STYLE_USER+'" id="cUser3" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:55px;top:335px;'+STYLE_USER+'" id="cUser4" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:80px;top:335px;'+STYLE_USER+'" id="cUser5" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:5px;top:360px;'+STYLE_USER+'" id="cUser6" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:30px;top:360px;'+STYLE_USER+'" id="cUser7" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:55px;top:360px;'+STYLE_USER+'" id="cUser8" onclick="SetRetainColor(this);"></div>';
    newDivLayer += '<div style="left:80px;top:360px;'+STYLE_USER+'" id="cUser9" onclick="SetRetainColor(this);"></div>';
        
    newDivLayer += '<span style="position:absolute;left:137px;top:290px;">RGB:</span>';    
    newDivLayer += '<div style="left:110px;top:310px;'+STYLE_TEXT+'"  >red:</div>';
    newDivLayer += '<div style="left:110px;top:335px;'+STYLE_TEXT+'"  >grn:</div>';
    newDivLayer += '<div style="left:110px;top:360px;'+STYLE_TEXT+'" >blu:</div>';
    newDivLayer += '<input type="text" style="none;left:135px;top:310px;'+STYLE_TAG+'"  id="red">';
    newDivLayer += '<input type="text" style="none;left:135px;top:335px;'+STYLE_TAG+'" id="grn">';
    newDivLayer += '<input type="text" style="none;left:135px;top:360px;'+STYLE_TAG+'" id="blu">';
    
    newDivLayer += '<span style="position:absolute;left:277px;top:290px;">Color:</span>';
    newDivLayer += '<span style="position:absolute;left:190px;top:310px;">Finder:</span>';
    newDivLayer += '<span style="position:absolute;left:190px;top:335px;">Selected:</span>';
    newDivLayer +='<div  style="left:270px;top:310px;'+STYLE_COMP+'" id="cComp2"></div>';
    newDivLayer += '<div style="left:270px;top:335px;'+STYLE_COMP+'" id="cComp1"></div>';
    newDivLayer += '<div style="'+STYLE_TEXT+';width:90px;left:190px;top:360px;">Triple Hex:</div>';
    newDivLayer += '<input style="text-align:center;width:70px;height:20px;left:260px;top:360px;'+STYLE_BORD+'" type="text" ID="thex">';
    
    newDivLayer += '<input type="button" style="width:60px;left:5px;top:390px;'+STYLE_BTN_OVER+'"  id="btnOK"  onclick="BtnOk();" value="ok">';
    newDivLayer += '<input type="button" style="width:60px;left:70px;top:390px;'+STYLE_BTN_OVER+'"  id="btnCan" onclick="BtnCancel();" value="close" >';
    //newDivLayer += "</div>
    return newDivLayer;
}
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
  }
return null
}
function BtnOkClicked()
{
    var field=getCookie('Field');
    //document.write(document.cookie);
    
     document.getElementById('color'+field).value = SEL_COLOR;
     document.getElementById('colora'+field).style.backgroundColor = SEL_COLOR;
}

function UpdateColor(id){
    //get value
    var color = document.getElementById('color'+id).value;
        x = document.getElementById('colora'+id);
        x.style.backgroundColor= color;
        return;
}