//set the opacity of an element to a specified value
function setOpacity (image, opacity){

	image.style.opacity = (opacity / 100)
	image.style.MozOpacity = (opacity / 100)
	image.style.KhtmlOpacity = (opacity / 100)
	image.style.filter = 'alpha(opacity=' + opacity + ')'
	
}

function getNextSibling(image) {
	//if it cant find the next sibling, it returns the current one
	var sibling = image.nextSibling
	while (sibling && sibling.nodeType != 1) { sibling = sibling.nextSibling } 
	if (sibling) { 
		return sibling
	}else{
		return image	
	}
}

//make image invisible and set next one as current image
function getNextImage(image) {
	
	//nextimg = image.nextSibling
	//nextimg = $(image).next()[0]
	nextimg = getNextSibling(image)
	
	//parentimg = $(image).parent()[0]
	parentimg = image.parentNode
	

    if(nextimg == image) {
		//if no next image then get the first image again
		//nextimg = document.getElementById( image.id ).firstChild
		//nextimg = $("img:first", parentimg )[0]
		nextimg = parentimg.getElementsByTagName("img")[0]
		
	} else {
		image.style.display = 'none'
		image.style.zIndex = 0
		nextimg.style.display = 'block'
		nextimg.style.zIndex = 100
	}
	return nextimg
}

//set default values for parameters and starting image
function blendImages(id, speed, pause, caption) {

    if(speed == null) { speed = 30 }
    if(pause == null) { pause = 1500 }

	//select first child image
	//var image = $("img:first", id )[0]
	var image = document.getElementById(id).getElementsByTagName("img")[0]
	
	setOpacity( image, 0)

    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) { $(caption).html(image.alt) }

	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) {
/*
	alert('opacity='+opacity)
	opacity = opacity + 3
*/
	if (opacity < 70) 					{opacity = opacity + 7}
	if (opacity >= 70 && opacity < 85) 	{opacity = opacity + 5}
	if (opacity >= 85 && opacity < 95) 	{opacity = opacity + 3}
	if (opacity >= 95) 					{opacity = opacity + 1}

	//basic attempt at easing fade
	//opacity = opacity + Math.round((100 - opacity) / 20)

	if(opacity < 99) {

		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+")";
		//$(image).parent().css("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)
}