// main function to process the fade request //
function colorFade(id,element,start,end,steps,speed) {
	var startrgb,endrgb,er,eg,eb,rint,gint,bint,target=document.getElementById(id);
	steps=steps || 20; speed=speed || 20;
	clearInterval(target.timer);
	endrgb=colorConv(end);
	er=endrgb[0]; eg=endrgb[1]; eb=endrgb[2];
	if(!target.r) {
		startrgb=colorConv(start);
		r=startrgb[0]; g=startrgb[1]; b=startrgb[2];
		target.r=r; target.g=g; target.b=b;
	}
	rint=Math.round(Math.abs(target.r-er)/steps);
	gint=Math.round(Math.abs(target.g-eg)/steps);
	bint=Math.round(Math.abs(target.b-eb)/steps);
	if(rint==0) {rint=1}; if(gint==0) {gint=1}; if(bint==0) {bint=1};
	target.step=1;
	target.timer=setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
}

// incrementally close the gap between the two colors //
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) {
	var target=document.getElementById(id),color;
	if(target.step<=steps) {
		var r=target.r,g=target.g,b=target.b;
		if(r>=er) {r=r-rint;} else {r=parseInt(r)+parseInt(rint);}
		if(g>=eg) {g=g-gint;} else {g=parseInt(g)+parseInt(gint);}
		if(b>=eb) {b=b-bint;} else {b=parseInt(b)+parseInt(bint);}
		color='rgb('+r+','+g+','+b+')';
		if(element=='background') {
			target.style.backgroundColor=color;
		} else if(element=='border') {
			target.style.borderColor=color;
		} else {
			target.style.color=color;
		}
		target.r=r; target.g=g; target.b=b;
		target.step=target.step+1;
	} else {
		clearInterval(target.timer);
		target.r=0;
		color='rgb('+er+','+eg+','+eb+')';
		if(element=='background') {
			target.style.backgroundColor=color;
		} else if(element=='border') {
			target.style.borderColor=color;
		} else {
			target.style.color=color;
		}
	}
}

// convert the color to rgb from hex //
function colorConv(color) {
	var rgb=[parseInt(color.substring(0,2),16), parseInt(color.substring(2,4),16), parseInt(color.substring(4,6),16)];
	return rgb;
}