// example: opacity(['Layer1', 'Layer2'], [0,0], [93,70], 5500)
//
// In the above example "Layer1" and "Layer2" are two divs whose opacity is changed
// from 0% to 93% and from 0% to 70%, respectively, in 5500 milliseconds (5.5 secs)

function opacity(id, start, end, millisec) {
	var numObjects = id.length;
	var rangeSize = new Array(numObjects)
	var step = new Array(numObjects)
	var minRangeSize = 9999;
	var idxMinRangeSize = 0;

	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//evaluate the range size for each object id
	for (i=0; i<numObjects; i++)
	{
		rangeSize[i] = Math.abs(end[i] - start[i]);
	}

	//set the minimum range size, which will be used as main cycle for opacity transation
	for (i=0; i<numObjects; i++)
	{
		if (rangeSize[i] < minRangeSize)
		{
			minRangeSize = rangeSize[i];
			idxMinRangeSize = i;
		}
	}

	//set the opacity step for each object id
	for (i=0; i<numObjects; i++)
	{
		step[i] = rangeSize[i] / rangeSize[idxMinRangeSize];
	}

	//determine the direction for the blending, if start and end are the same nothing happens
	if (start[0] > end[0]) 
	{
		for (i=0; i<=rangeSize[idxMinRangeSize]; i++) 
		{
			for (j=0; j<numObjects; j++) 
			{
				setTimeout("changeOpac(" + (start[j] - (i * step[j])) + ", '" + id[j] + "')",(timer * speed));
			}

			timer++;
		}
	}
	else if(start[0] < end[0]) 
	{
		for (i=0; i<=rangeSize[idxMinRangeSize]; i++) 
		{
			for (j=0; j<numObjects; j++) 
			{
				setTimeout("changeOpac(" + (start[j] + (i * step[j])) + ", '" + id[j] + "')",(timer * speed));
			}

			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}