//find next image
function nextImage(o) {
	do o = o.nextSibling;
	while(o && o.tagName != 'IMG');
	return o;
}

//find first image inside an element
function firstChildImage(o) {
	o = o.firstChild;
	while(o && o.tagName != 'IMG') {
		o = o.nextSibling;
	}
	return o;
}

//set the opacity of an element to a specified value
function setOpacity(obj, o) {
	obj.style.opacity = (o / 100); //Firefox, Opera, CSS3 browsers
	obj.style.MozOpacity = (o / 100); //Older versions of Mozilla/Firefox
	obj.style.KhtmlOpacity = (o / 100);//Konqueror
	obj.style.filter = 'alpha(opacity=' + o + ')';//Internet Explorer
}

//make image invisible and set next one as current image
function getNextImage(image) {
	if (next = nextImage(image)) {
		image.style.display = 'none';
		image.style.zIndex = 0;
		next.style.display = 'block';
		next.style.zIndex = 100;
	} else {
		//if there is not a next image, get the first image again
		next = firstChildImage(image.parentNode);
	}
	return next;
}

//set default values for parameters and starting image
function blendImages(id, speed, pause, caption) {
	if(speed == null) {
		speed = 50;
	}
	if(pause == null) {
		pause = 5000;
	}
	var blend = document.getElementById(id);
	var image = firstChildImage(blend);
	startBlending(image, speed, pause, caption);
}

//make image a block-element and set the caption
function startBlending(image, speed, pause, caption) {
	image.style.display = 'block';
	if(caption != null) {
		var obj = document.getElementById(caption);
		if(image.alt != ''){
			obj.innerHTML = image.alt;
			obj.style.display = 'block';
		}else{
			obj.style.display = 'none';	
		}
	}
	continueFadeImage(image, 0, speed, pause, caption);
}

//set an increased opacity and check if the image is done blending
function continueFadeImage(image, opacity, speed, pause, caption) {
	opacity = opacity + 5;
	if (opacity < 105) {
		setTimeout(function() {fadeImage(image, opacity, speed, pause, caption)}, speed);
	} else {
		//if the image is done, set it to the background and make it transparent
		image.parentNode.style.backgroundImage = "url("+image.src+")";
		setOpacity(image,0);
		//get the next image and start blending it again
		image = getNextImage(image);
		setTimeout(function() {startBlending(image, speed, pause, caption)}, pause);		
	}
}

//set the opacity to a new value and continue the fading
function fadeImage(image, opacity, speed, pause, caption) {
	setOpacity(image,opacity);
	continueFadeImage(image, opacity, speed, pause, caption);
}