function init() {
sliderMin = 0;
sliderMax = 256;
rValue=0;
gValue=0;
bValue=0;
r1 = '0';
r2 = '0';
g1 = '0';
g2 = '0';
b1 = '0';
b2 = '0';
Rgb = '0';
rGb = '0';
rgB = '0';
rActive = false;
gActive = false;
bActive = false;
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp;

domRed = redSlider.style;
domRed.xpos = redSlider.offsetLeft;
domRed.ypos = redSlider.offsetTop;
domRed.w = redSlider.clientWidth;
domRed.h = redSlider.clientHeight;
domGreen = greenSlider.style;
domGreen.xpos = greenSlider.offsetLeft;
domGreen.ypos = greenSlider.offsetTop;
domGreen.w = greenSlider.clientWidth;
domGreen.h = greenSlider.clientHeight;
domBlue = blueSlider.style;
domBlue.xpos = blueSlider.offsetLeft;
domBlue.ypos = blueSlider.offsetTop;
domBlue.w = blueSlider.clientWidth;
domBlue.h = blueSlider.clientHeight;

if (!redSlider.clientWidth){
domRed = document.redSlider;
domRed.xpos = parseInt(domRed.left);
domRed.ypos = parseInt(domRed.top);
domRed.w = domRed.clip.width;
domRed.h = domRed.clip.height;
domGreen = document.greenSlider;
domGreen.xpos = parseInt(domGreen.left);
domGreen.ypos = parseInt(domGreen.top);
domGreen.w = domGreen.clip.width;
domGreen.h = domGreen.clip.height;
domBlue = document.blueSlider;
domBlue.xpos = parseInt(domBlue.left);
domBlue.ypos = parseInt(domBlue.top);
domBlue.w = domBlue.clip.width;
domBlue.h = domBlue.clip.height;
}

hexArray = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
doctc1 = document.getElementById("tc1");
doctc2 = document.getElementById("tc2");
}

function mouseDown(e) {
if (!e) var e = window.event;

if (!e.pageX){
var x = e.x+document.body.scrollLeft;
var y = e.y+document.body.scrollTop;
}
else {
var x = e.pageX;
var y = e.pageY;
}

rActive = false;
gActive = false;
bActive = false;

if (x > domRed.xpos && x < domRed.xpos+domRed.w && y > domRed.ypos && y < domRed.ypos+domRed.h){ rActive = true; dragObject = domRed; }
if (x > domGreen.xpos && x < domGreen.xpos+domGreen.w && y > domGreen.ypos && y < domGreen.ypos+domGreen.h){ gActive = true; dragObject = domGreen; }
if (x > domBlue.xpos && x < domBlue.xpos+domBlue.w && y > domBlue.ypos && y < domBlue.ypos+domBlue.h){ bActive = true; dragObject = domBlue; }

if (rActive==true || gActive==true || bActive==true){
if (x>=dragObject.xpos && x<=dragObject.xpos+dragObject.w) {
dragObject.dragOffsetX = x-dragObject.xpos;
}
}
return true;
}

function mouseMove(e) {
if (rActive==false && gActive==false && bActive==false) return true;

if (!e) var e = window.event;

if (!e.pageX){
var x = e.x+document.body.scrollLeft;
var y = e.y+document.body.scrollTop;
}
else{
var x = e.pageX;
var y = e.pageY;
}

if (rActive) {
rMoveTo = x-dragObject.dragOffsetX;
if (rMoveTo > sliderMax) rMoveTo = sliderMax;
if (rMoveTo < sliderMin) rMoveTo = sliderMin;
domRed.xpos = rMoveTo;
domRed.left = domRed.xpos;
rValue = (domRed.xpos+4);
calcValue(rMoveTo, 'red');
}
if (gActive) {
gMoveTo = x-dragObject.dragOffsetX;
if (gMoveTo > sliderMax) gMoveTo = sliderMax;
if (gMoveTo < sliderMin) gMoveTo = sliderMin;
domGreen.xpos = gMoveTo;
domGreen.left = domGreen.xpos;
gValue = (domGreen.xpos+4);
calcValue(gMoveTo, 'green');
}
if (bActive) {
bMoveTo = x-dragObject.dragOffsetX;
if (bMoveTo > sliderMax) bMoveTo = sliderMax;
if (bMoveTo < sliderMin) bMoveTo = sliderMin;
domBlue.xpos = bMoveTo;
domBlue.left = domBlue.xpos;
bValue = (domBlue.xpos+4);
calcValue(bMoveTo, 'blue');
}
return true
}

function mouseUp(e) {
if (!e) var e = window.event;
rActive = false;
gActive = false;
bActive = false;
return true
}

function calcValue(base, color) {
base -= 1;
if (base < 16) { first = 0; }
else { first = parseInt(base/16); }
c1=hexArray[first];
if (color == 'red') { r1 = c1; Rgb=base; }
else if (color == 'green') { g1 = c1; rGb=base; }
else { b1 = c1; rgB=base; }
tmcolor = '$'+r1+g1+b1;
webcor = '#'+r1+g1+b1;
doctc1.style.color =webcor;
doctc2.style.color =webcor;
doctc1.innerHTML = tmcolor;
doctc2.innerHTML = tmcolor;
return true;
}