//change the opacity for different browsers
function setOpacity(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 + ")";
}

function fadeOpacity(id, opacStart, opacEnd, millisec) {
	//If start and end are the same there is no work to do, and we should also avoid dividing by zero.
	if(opacStart != opacEnd && millisec > 0)
	{
		// Use a loop to generate all the steps except the last, since it is not guaranteed to be a multiple of the arbitrary interval.
		// Use a 75 ms interval, since empirically that seems to be the max value at which the transition looks smooth, not choppy.
		// A smaller interval would also work, but would use more cpu time for the same effect.
		for(var timeDelay = 0; timeDelay < millisec; timeDelay += 75)
		{
			var opacityThisStep = opacStart + (timeDelay / millisec) * (opacEnd - opacStart)
			setTimeout("setOpacity(" + opacityThisStep + ",'" + id + "')", timeDelay);
		}
		setTimeout("setOpacity(" + opacEnd + ",'" + id + "')", millisec);
	}
}

function toggleOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		fadeOpacity(id, 0, 100, millisec);
	} else {
		fadeOpacity(id, 100, 0, millisec);
	}
}

function blendimage(divid, imageid, imagefile, millisec) {
	//set the current image as the div tag background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	
	//make image tag transparent before changing its source
	setOpacity(0, imageid);
	
	//set the new image file as the source of the image tag
	document.getElementById(imageid).src = imagefile;

	//fade in the new image
	fadeOpacity(imageid, 0, 100, millisec);
}

function fadeFromCurrentOpacity(id, opacEnd, millisec) {
	//standard opacity is 100
	var currentOpac = 100;
	
	//if the element has an opacity set, get it
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}

	//call for the function that changes the opacity
	fadeOpacity(id, currentOpac, opacEnd, millisec)
}