var current = 0
var nodes

function init_fader() {
	var i, image, alt, src, height, width

	var html = ''
	var images = $('transitions').getElementsByTagName('img')

	// Find the images, extract the text and wrap with DIVs
	for (i=0; i<images.length; i++) {
		image = images[i]
		src = image.getAttribute('src')
		alt = image.getAttribute('alt')
		height = image.getAttribute('height')
		width = image.getAttribute('width')

		html += '<div class="home-image" style="filter: alpha(opacity=0); font-size: 12pt;">' +
					'<img src="' + src + '" height="' + height + '" width="' + width + '"><br />' + alt + '</div>'
	}

	// Change the HTML
	$('transitions').update('<div id="fader">' + html + '</div>')

	// Get the nodes and immediately display the first one
	nodes = $('fader').getElementsByTagName('div')
	Effect.Fade(nodes[0], {to: 0.99, duration: 0.1})

	// Repeat forever
	new PeriodicalExecuter(transition, 5)
}

// Transition between to nodes
function transition() {
	var next = current + 1
	if (next >= nodes.length) {
		next = 0
	}

	Effect.Fade(nodes[next], {to: 0.99, duration: 1.0})
	Effect.Fade(nodes[current], {to: 0.01, duration: 1.0})

	current = current + 1
	if (current >= nodes.length) {
		current = 0
	}
}
