//-----------------------------------------------------------------------------
// Effects
//-----------------------------------------------------------------------------

var numTicks = 10;
var currTimeout;

var borderColor;
	
function effects_highlightWidget(widget, startColor, endColor)
{	
	// Default colors if not specified
	if(!startColor)
		startColor = "ffff88";
	if(!endColor)
		endColor = "ffffff";
		
	// First let's store the current border color
	borderColor = widget.style.borderColor;
		
	var decStartColor = new Array();
	var decEndColor = new Array();
	
	// Grab the hex components
	var startRedHex = startColor.substring(0, 2);
	var startGreenHex = startColor.substring(2, 4);
	var startBlueHex = startColor.substring(4, 6);
	
	var endRedHex = endColor.substring(0, 2);
	var endGreenHex = endColor.substring(2, 4);
	var endBlueHex = endColor.substring(4, 6);
	
	// Convert them to integer
	decStartColor[0] = parseInt(startRedHex, 16);
	decStartColor[1] = parseInt(startGreenHex, 16);
	decStartColor[2] = parseInt(startBlueHex, 16);
	
	decEndColor[0] = parseInt(endRedHex, 16);
	decEndColor[1] = parseInt(endGreenHex, 16);
	decEndColor[2] = parseInt(endBlueHex, 16);
	
	// Calculate the amount to change each component based on the amount of ticks wanted
	var redAmount = (decEndColor[0] - decStartColor[0]) / numTicks;
	var greenAmount = (decEndColor[1] - decStartColor[1]) / numTicks;
	var blueAmount = (decEndColor[2] - decStartColor[2]) / numTicks;
	
	// Now start ticking and changing the background color
	effects_highlightWidgetTick(widget, 0, decStartColor, redAmount, greenAmount, blueAmount);
	
	// Finally let's apply a permanent border
	widget.style.borderColor = "#ffff88";
}

function effects_highlightWidgetTick(widget, tickNum, lastColor, redAmount, greenAmount, blueAmount)
{
	// Increment ticks and check
	tickNum++
	if(tickNum > numTicks)
		return;
	
	currColor = new Array();
	currColor[0] = Math.round(lastColor[0] + redAmount);
	currColor[1] = Math.round(lastColor[1] + greenAmount);
	currColor[2] = Math.round(lastColor[2] + blueAmount);
	
	var colorString = "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")";
	widget.style.backgroundColor = colorString; 
	
	currTimeout = setTimeout(function () { effects_highlightWidgetTick(widget, tickNum, currColor, redAmount, greenAmount, blueAmount); }, 100);
}

function effects_highlightWidgetStop(widget, endColor)
{
	if(!endColor)
		endColor = "ffffff";
		
	// Clear the timeout
	if(currTimeout)
		clearTimeout(currTimeout);
	
	// And restore the original colors
	widget.style.backgroundColor = "#" + endColor;
	widget.style.borderColor = borderColor;
}