/*
  * Main fade function.
  *	element = HTML element to apply fade effect to
  *	type = element style item to apply fade effect to (background, border or color)
  *	start = fade start color in hexadecimal
  *	end = fade end color in hexadecimal
  *	steps = number of fade effect steps
  *	speed = speed in milliseconds between fade effect steps
  */
function fade(id, type, start, end, steps, speed) 
{
	var element = document.getElementById(id);
	clearInterval(element.timer);
	steps = steps || 20;
	speed = speed || 20;
	var endrgb = convertHexToRgb(end);
	if(!element.r) 
	{
		var startrgb = convertHexToRgb(start);
		element.r = startrgb[0];
		element.g = startrgb[1];
		element.b = startrgb[2];
	}
	var r = Math.round(Math.abs(element.r - endrgb[0]) / steps);
	var g = Math.round(Math.abs(element.g - endrgb[1]) / steps);
	var b = Math.round(Math.abs(element.b - endrgb[2]) / steps);
	if (r == 0) 
	{ 
		r = 1;
	}
	if (g == 0) 
	{ 
		g = 1;
	}
	if (b == 0) 
	{ 
		b = 1;
	}
	element.step = 1;
	element.timer = setInterval( function() { performStep(element, type, steps, endrgb, [r, g, b]) }, speed);
}

/*
  * Performs a fade effect step by closing the gap between start and end color defined by an increment step depending on the number of steps.
  * 	element = HTML element to apply fade effect to
  *	type = element style item to apply fade effect to (background, border or color)
  *	steps = number of fade effect steps
  *	end = fade end color in RGB array
  *	inc = fade color increment in RGB array
  */
function performStep(element, type, steps, end, inc) 
{
	var color = 'rgb(' + end[0] + ',' + end[1] + ',' + end[2] + ')';
	if (element.step <= steps) 
	{
		var r = element.r;
		var g = element.g;
		var b = element.b;
		if (r >= end[0]) 
		{
			r = r - inc[0];
		} 
		else 
		{
			r = parseInt(r) + parseInt(inc[0]);
		}
		if (g >= end[1]) 
		{
			g = g - inc[1];
		} 
		else 
		{
			g = parseInt(g) + parseInt(inc[1]);
		}
		if (b >= end[2]) 
		{
			b = b - inc[2];
		} 
		else 
		{
			b = parseInt(b) + parseInt(inc[2]);
		}
		color = 'rgb(' + r + ',' + g + ',' + b + ')';
		element.r = r;
		element.g = g;
		element.b = b;
		element.step = element.step + 1;
	} 
	else 
	{
		clearInterval(element.timer);
	}
	if (type == 'background') 
	{
		element.style.backgroundColor = color;
	} 
	else if (type == 'border') 
	{
		element.style.borderColor = color;
	} 
	else 
	{
		element.style.color = color;
	}
}

/*
  * Converts an hexadecimal color value into an RGB value as a 3-values array.
  *	color = hexadecimal color value to convert
  */
function convertHexToRgb(color) {
    var r = parseInt(color.substring(0, 2), 16);
	var g = parseInt(color.substring(2, 4), 16);
	var b = parseInt(color.substring(4, 6), 16);
	return [r, g, b];
}