// JavaScript Document
function hexToRGB()
{
//reset the RGB background in case there's an existing error
resetRGB();
//read the input hex value and validate it
var hexVal = document.getElementById('hex').value;
document.getElementById('hex').onchange();
 
//convert to rgb and output to screen
document.getElementById('rgb_red').value = h2d(hexVal.substring(0,2));
document.getElementById('rgb_green').value = h2d(hexVal.substring(2,4));
document.getElementById('rgb_blue').value = h2d(hexVal.substring(4));
 
//set the background colour to the shade
document.getElementById("top").style.backgroundColor = '#' + hexVal;
 
//call the change shade function
changeShade();
}
 
function rgbToHex()
{
//reset the hex background in case there's an existing error
resetHex();
//validate, in case there's a page refresh or something, and read the entered rgb values
document.getElementById('rgb_red').onchange();
document.getElementById('rgb_green').onchange();
document.getElementById('rgb_blue').onchange();
var rgbRed = document.getElementById('rgb_red').value;
var rgbGreen = document.getElementById('rgb_green').value;
var rgbBlue = document.getElementById('rgb_blue').value;

 
//convert the rgb values to integers and then to hex
var hexVal = d2h(parseInt(rgbRed)) + d2h(parseInt(rgbGreen)) + d2h(parseInt(rgbBlue));
document.getElementById('hex').value = hexVal;
 
//set the background colour to the shade
document.getElementById("top").style.backgroundColor = '#' + hexVal;
 
//call the change shade function
changeShade();
}
 
function changeShade()
{
//read the (calculated rgb values 
var rgbRed = document.getElementById('rgb_red').value;
var rgbGreen = document.getElementById('rgb_green').value;
var rgbBlue = document.getElementById('rgb_blue').value;
//read the percentage change required
var perCent = document.getElementById('lord_val').value;
//read lighten or darken and set factor
if (document.getElementById('lord_l').checked)
  {var factor=1;}
else
  {var factor=-1;}
  
//calculate the new rgb values
var rgbRedNew = parseInt((rgbRed*(1+(perCent*0.01*factor)))+0.5);
var rgbGreenNew = parseInt(rgbGreen*(1+(perCent*0.01*factor))+0.5);
var rgbBlueNew = parseInt(rgbBlue*(1+(perCent*0.01*factor))+0.5);

//prevent values greater than 255
rgbRedNew=Math.min(rgbRedNew,255);
rgbGreenNew=Math.min(rgbGreenNew,255);
rgbBlueNew=Math.min(rgbBlueNew,255);
//prevent values less than 0
rgbRedNew=Math.max(rgbRedNew,0);
rgbGreenNew=Math.max(rgbGreenNew,0);
rgbBlueNew=Math.max(rgbBlueNew,0);


//output the new values back to screen
document.getElementById('rgb_rednew').value = rgbRedNew;
document.getElementById('rgb_greennew').value = rgbGreenNew;
document.getElementById('rgb_bluenew').value = rgbBlueNew;
 

//output the new hex value back to screen
document.getElementById('hexnew').value = d2h(rgbRedNew) + d2h(rgbGreenNew) + d2h(rgbBlueNew);
 
//set the background colour to the new shade
document.getElementById("bottom").style.backgroundColor = '#' + d2h(rgbRedNew) + d2h(rgbGreenNew) + d2h(rgbBlueNew);
  
}
 

function h2d(h) {return parseInt(h,16);} 
 
function d2h(d) 
{if (d.toString(16).length == 2)
		{return d.toString(16);}
		else
		{return '0' + d.toString(16);}
}

function validateRGB(rgb,id) 
{ 
if((rgb >= 0) && (rgb <= 255)) 
	{document.getElementById(id).style.backgroundColor = '#ffffff';
	document.getElementById('invalid_rgb').style.visibility = 'hidden';
	return true;}
	else
	{document.getElementById(id).style.backgroundColor = '#ff0000';
	document.getElementById('invalid_rgb').style.visibility = 'visible';
	 return false;}
} 

function validateHex (hex,id)
{if (/^[a-f\d]{6}$/i.test (hex))
	{document.getElementById(id).style.backgroundColor = '#ffffff';
	document.getElementById('invalid_hex').style.visibility = 'hidden';
	return true;}
	else
	{document.getElementById(id).style.backgroundColor = '#ff0000';
	document.getElementById('invalid_hex').style.visibility = 'visible';
	return false;}
}


function resetRGB()
{document.getElementById('rgb_red').style.backgroundColor = '#ffffff';
document.getElementById('rgb_green').style.backgroundColor = '#ffffff';
document.getElementById('rgb_blue').style.backgroundColor = '#ffffff';
document.getElementById('invalid_rgb').style.visibility = 'hidden';
}

function resetHex()
{document.getElementById('hex').style.backgroundColor = '#ffffff';
document.getElementById('invalid_hex').style.visibility = 'hidden';}

function copyColour()
{document.getElementById('hex').value = document.getElementById('hexnew').value;
hexToRGB();
}