var theColor, elemToFade, startColor, endColor, cR_end, cG_end, cB_end, time, ret, endColorArray, endColorReplace, startColorReplace, startColorArray;


function hexConvert( theColor ){
	ret = [];
	theColor.replace(/(..)/g, function(theColor){
		ret.push( parseInt( theColor, 16 ) );
	});
	return ret;
} 

function animColor(){

	elemToFade.style.backgroundColor = 'rgb('+cR+','+cG+','+cB+')';

	if (cR < cR_end) {
		cR+= 1;		
	}
	if (cG < cG_end) {
		cG+= 1;
	}
	if (cB < cB_end) {
		cB+= 1;
	}
	if(cR != cR_end && cG != cG_end && cB != cB_end){
	 setTimeout(animColor, time);
	}

}
function fadeBackColour() {

	if(startColor.indexOf("#") === 0){
	  var startColorNoHash = startColor.replace(/#/, "");
		hexConvert(startColorNoHash);
		cR = ret[0];
		cG = ret[1];
		cB = ret[2];
		console.log("return ret later 4 startColor ->  "+ret)
	}
	else{
    startColorReplace = startColor.replace(/ /g, "");
    startColorArray = startColorReplace.substring(startColorReplace.indexOf('(')+1,startColorReplace.lastIndexOf(')')).split(",");
		cR = Number(startColorArray[0]); 
		cG = Number(startColorArray[1]); 
		cB = Number(startColorArray[2]);			

	}
	if(endColor.indexOf("#") > -1){
	 var endColorNoHash = endColor.replace(/#/, "");

		hexConvert(endColorNoHash);
		cR_end = ret[0];
		cG_end = ret[1];
		cB_end = ret[2];		
  console.log("return ret later 4 endColor ->  "+ret)
	}
	else{
    endColorReplace = endColor.replace(/ /g, "");
    endColorArray = endColorReplace.substring(endColorReplace.indexOf('(')+1,endColorReplace.lastIndexOf(')')).split(",");
		cR_end = Number(endColorArray[0]); 
		cG_end = Number(endColorArray[1]); 
		cB_end = Number(endColorArray[2]);	
	}
	animColor();
}
  
document.getElementById('videos-list').onclick = function(){
	elemToFade = document.getElementById('content-right');
	endColor = "#3D3D3D";
	startColor = "#222222";
	time = 200;
	fadeBackColour();
}