$(document).ready(function(){

var
hexidec = [0, 0],
form = $('#form'),
sample = $('#sample');

function getColor(){
$('#hexadecimal').val(rgbToHex(sample.css('background-color')));
var
rgb = rgbToHex($('#hexadecimal').val()),
c = "0123456789abcdef";
var
red = c.indexOf(rgb.substring(1,2))*16+c.indexOf(rgb.substring(2,3)),
green = c.indexOf(rgb.substring(3,4))*16+c.indexOf(rgb.substring(4,5)),
blue = c.indexOf(rgb.substring(5,6))*16+c.indexOf(rgb.substring(6,7));
$('#red option:eq(' + red + ')').attr('selected', 'selected');
$('#green option:eq(' + green + ')').attr('selected', 'selected');
$('#blue option:eq(' + blue + ')').attr('selected', 'selected');
}

function getHex(){
var
c = "0123456789abcdef",
red = $('#red').val(),
green = $('#green').val(),
blue = $('#blue').val();
with (Math){
var
numOne = c.substring(floor(red/16),floor(red/16)+1),
numTwo = c.substring(red%16,(red%16)+1),
numThree = c.substring(floor(green/16),floor(green/16)+1),
numFour = c.substring(green%16,(green%16)+1),
numFive = c.substring(floor(blue/16),floor(blue/16)+1),
numSix = c.substring(blue%16,(blue%16)+1);
$('#hexadecimal').val("#" + numOne + "" + numTwo + "" + numThree + "" + numFour + "" + numFive + "" + numSix);
sample.css('background-color', rgbToHex($('#hexadecimal').val()));
}
}

function getRGB(){
var
hex = rgbToHex($('#hexadecimal').val()),
pound=0;
for (var i = 0; i < 7; i++){
hexidec[i] = hex.charAt(i);
var temp = hexidec[i];
if (temp == '#') pound++;
if ((temp == 'a') || (temp == 'A')) hexidec[i] = 10;
if ((temp == 'b') || (temp == 'B')) hexidec[i] = 11;
if ((temp == 'c') || (temp == 'C')) hexidec[i] = 12;
if ((temp == 'd') || (temp == 'D')) hexidec[i] = 13;
if ((temp == 'e') || (temp == 'E')) hexidec[i] = 14;
if ((temp == 'f') || (temp == 'F')) hexidec[i] = 15;
}
$('#red option:eq(' + ((hexidec[0+pound]*16)- -hexidec[1+pound]) + ')').attr('selected', 'selected');
$('#green option:eq(' + ((hexidec[2+pound]*16)- -hexidec[3+pound]) + ')').attr('selected', 'selected');
$('#blue option:eq(' + ((hexidec[4+pound]*16)- -hexidec[5+pound]) + ')').attr('selected', 'selected');
sample.css('background-color', rgbToHex($('#hexadecimal').val()));
}

function rgbToHex(rgb_color){
if (rgb_color.substr(0, 1) === '#') return rgb_color;
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(rgb_color);
var
red = parseInt(digits[2]),
green = parseInt(digits[3]),
blue = parseInt(digits[4]);
var hex = (red << 16) | (green << 8) | blue;
return digits[1] + '#' + hex.toString(16);
}

$('#colorBtn').click(function(ev){
sample.css('background-color', rgbToHex($('#colors').val()));
getColor();
ev.preventDefault();
});

$('#rgbBtn').click(function(ev){
getHex();
sample.css('background-color', rgbToHex($('#hexadecimal').val()));
ev.preventDefault();
});

$('#hexBtn').click(function(ev){
getRGB();
sample.css('background-color', rgbToHex($('#hexadecimal').val()));
ev.preventDefault();
});

$('#colors').live('keyup', function(ev){
sample.css('background-color', rgbToHex($('#colors').val()));
getColor();
});

$('div.rgb select').live('keyup', function(ev){
getHex();
sample.css('background-color', rgbToHex($('#hexadecimal').val()));
});

});