Color Bar.. [CB]

[Todge]

This will remove the color drop-down and replace it with a multi-colored bar in a seperate cell below the smilies...

Moving your mouse over the color bar changed the color of the left-hand box, clicking will set the color into the box second from left, clicking on THAT box will add the code to your text window.....

Put it in you Global Footer, no editting is required..

<script type="text/javascript">
<!--
/*
Color Bar (V2) by Todge
Copyright © 2005
Please keep this header intact
*/

var newTR=document.createElement('TR');
var newTD=document.createElement('TD');
newTD.width='30%';
newTD.className='windowbg2';
newTD.innerHTML='<font size=2>Add Color:</font>';
newTR.appendChild(newTD);
newTD=document.createElement('TD')
newTD.width='70%';
newTD.className='windowbg2';
newTD.setAttribute('id','colorCell');
newTR.appendChild(newTD);

var TD = document.getElementsByTagName('TD');

for(nr=0; nr<TD.length; nr++)
{
var newRow=TD[nr].parentNode;
if(TD[nr].width == '30%' && TD[nr].className == 'windowbg2' && TD[nr].innerHTML.match('Message:'))
{
newRow.parentNode.insertBefore(newTR,newRow);
}
}


function addHex(bgCol)
{
if(bgCol.match('#'))
{
hex=bgCol.split('#')[1];
}
else
{
hexCode=new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
bgCol=bgCol.split('(')[1].split(')')[0].split(',')
var hex=hexCode[parseInt(bgCol[0]/16)];
hex+=hexCode[bgCol[0]-(parseInt(bgCol[0]/16)*16)];
hex+=hexCode[parseInt(bgCol[1]/16)];
hex+=hexCode[bgCol[1]-(parseInt(bgCol[1]/16)*16)];
hex+=hexCode[parseInt(bgCol[2]/16)];
hex+=hexCode[bgCol[2]-(parseInt(bgCol[2]/16)*16)];
}
return hex;
}

function createColorBar(red,green,blue)
{
var newMix=document.createElement('TD');
newMix.width="2";
newMix.height="20";
newMix.style.backgroundColor='rgb('+red+','+green+','+blue+')';
newMix.onmouseover=function(){document.getElementById('colornow').style.backgroundColor=this.style.backgroundColor;}
newMix.onclick=function(){document.getElementById('colorchosen').style.backgroundColor=this.style.backgroundColor;}
colorMix.appendChild(newMix)
}


var hexColor;
var Colors=document.getElementsByTagName('select');
for(c=0; c<Colors.length; c++)
{
if(Colors[c].name=='color')
{
var colorBar='<table cellpadding="0" cellspacing="0"><tr><td><table><tr><td id="colornow" width="20" height="20"></td></tr></table></td>';
colorBar+='<td><table><tr><td id="colorchosen" style="background-color: rgb(255,255,255); width="20" height="20"></td></tr></table></td>';
colorBar+='<td><table cellpadding="0" cellspacing="0" border="0"><tr id="colormix">';
colorBar+='</tr></table></td></tr></table>';

document.getElementById('colorCell').innerHTML = colorBar;

Colors[c].parentNode.removeChild(Colors[c]);

document.getElementById('colorchosen').onmouseover=function(){hexColor=addHex(this.style.backgroundColor);}

document.getElementById('colorchosen').innerHTML='<a href=javascript:add("[color="+hexColor+"]","[/color]")><img src="http://proboards8.com/boardimages/avatars/blank.gif" width="18" height="18" border="0" alt="[color]"></a>';

var colorMix=document.getElementById('colormix');
var mix=256;
while(mix>-1)
{
createColorBar(mix,mix,mix);
mix=mix-16;
}
while(mix<257)
{
createColorBar(mix,0,0)
mix=mix+16;
}
mix=0;
while(mix<257)
{
createColorBar(255,mix,0);
mix=mix+16;
}
while(mix>-1)
{
createColorBar(mix,255,0);
mix=mix-16;
}
while(mix<257)
{
createColorBar(0,255,mix);
mix=mix+16;
}
while(mix>-1)
{
createColorBar(0,mix,255);
mix=mix-16;
}
while(mix<257)
{
createColorBar(mix,0,255);
mix=mix+16;
}
var mix=0;
while(mix<257)
{
createColorBar(255,mix,255);
mix=mix+16;
}
}
}
// -->
</script>

Editted to work in Opera