/*
 * @description Apply a style to an element.
 * @param strId id of the element to be manipulated.
 * @param strEffect the action to take place. i.e. fading, moving, etc.
 * @param intOrigin starting point.
 * @param intDestination stop point.
 * @param intSpeed the timeout interval.
 * @param intIncrement the offset size of each increment.
 * @returns null.
 */
function transitionEffect(strId, strEffect, intOrigin, intDestination, intSpeed, intIncrement)
{
	if (document.getElementById(strId))
	{
		if (intOrigin > intDestination)
		{
			// Decrement value.
			intOrigin -= intIncrement;
			if (intOrigin < intDestination)
			{
				intOrigin = intDestination;
				handleIDStyle(strId, 'display', 'none');
			}
		}
		else
		{
			// Increment value.
			intOrigin += intIncrement;
			handleIDStyle(strId, 'display', 'block');
			if (intOrigin > intDestination)
			{
				intOrigin = intDestination;
				handleIDStyle(strId, 'display', 'block');
			}
		}
		// Set new effect style.
		handleIDStyle(strId, strEffect, intOrigin);
		// Stop when destination is reached.
		if (intOrigin != intDestination)
		{
			setTimeout('transitionEffect(\'' + strId + '\', \'' + strEffect + '\', ' + intOrigin + ', ' + intDestination + ', ' + intSpeed + ', ' + intIncrement + ')', intSpeed);
		}
	}
}
/*
 * @description Toggle between origin and destination and apply a style to an element.
 * @param strId id of the element to be manipulated.
 * @param strEffect the action to take place. i.e. fading, moving, etc.
 * @param intOrigin starting point.
 * @param intDestination stop point.
 * @param intSpeed the timeout interval.
 * @param intIncrement the offset size of each increment.
 * @returns null.
 */
function toggleTransitionEffect(strId, strEffect, intOrigin, intDestination, intSpeed, intIncrement)
{
	if (handleIDStyle(strId, strEffect) == intDestination)
	{
		var intTempOrigin = intOrigin;
		intOrigin = intDestination;
		intDestination = intTempOrigin;
	}
	transitionEffect(strId, strEffect, intOrigin, intDestination, intSpeed, intIncrement);
}
/*
 * @description Apply styles to two elements in one pass.
 * @param strId1 id of the element to be manipulated.
 * @param strId2 id of the second element to be manipulated.
 * @param strEffect the action to take place. i.e. fading, moving, etc.
 * @param intOrigin starting point.
 * @param intDestination stop point.
 * @param intSpeed the timeout interval.
 * @param intIncrement the offset size of each increment.
 * @param intDelay the time to wait before executing the second transition.
 * @returns null.
 */
function dualTransitionEffect(strId1, strId2, strEffect, intOrigin, intDestination, intSpeed, intIncrement, intDelay)
{
	transitionEffect(strId1, strEffect, intOrigin, intDestination, intSpeed, intIncrement);
	setTimeout('transitionEffect(\'' + strId2 + '\', \'' + strEffect + '\', ' + intDestination + ', ' + intOrigin + ', ' + intSpeed + ', ' + intIncrement + ')', intDelay);
}