// from http://brainerror.net/scripts/javascript/blendtrans/

/*
<a href="javascript:opacity('imageid', 1.0, 0.0, 500)">Hide</a>

It's nothing more than a standard link that calls a JavaScript function named opacity with a few parameters.

    * The first parameter is a string (it needs quotes around it), it has the ID of the image in it.
    * The starting opacity, 100 is 100% visible.
    * Ending opacity, we want the image to disappear, so it should be 0% visible
    * The duration of the transition in milliseconds, 500 means 0.5 seconds for a transition that requires 100 changes. If you change from 50 to 100 it will only take 250 milliseconds.

With these parameters you can make an image semi-transparent, did you know, that you are not limited to images either? You can do the same thing with text, or any other tag in HTML, as long as it has got an ID attribute.
*/
function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	changeOpacOfElem(opacity, document.getElementById(id)); 
}

//change the opacity of an object for different browsers
function changeOpacOfElem(opacity, elem) {
	var object = elem.style; 
	object.opacity = opacity;
	object.MozOpacity = opacity;
	object.KhtmlOpacity = opacity;
	object.filter = "alpha(opacity=" + ( opacity * 100 ) + ")";
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	shiftOpacityOfElem(document.getElementById(id));
}

function shiftOpacityOfElem(elem, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(elem.style.opacity == 0) {
		opacity(id, 0.0, 1.0, millisec);
	} else {
		opacity(id, 1.0, 0.0, millisec);
	}
}

function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	
	//make image transparent
	changeOpac(0.0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i/100 + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
}

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

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