var images = new Array(
		["projects/0001.jpg", "describing text for image one", ""],
		["projects/0004b.jpg", "describing text for image two", ""],
		["projects/0003.jpg", "describing text for image two", ""],
		["projects/0004.jpg", "describing text for image two", ""],
		["projects/0002.jpg", "describing text for image two", ""],
		["projects/0005.jpg", "describing text for image two", ""],
		["projects/0006.jpg", "describing text for image two", ""],
		["projects/0007.jpg", "describing text for image two", ""],
		["projects/0008.jpg", "describing text for image two", ""],
		["projects/0009.jpg", "describing text for image two", ""],
		["projects/0010.jpg", "describing text for image two", ""],
		["projects/0011.jpg", "describing text for image two", ""]
		 );

var speed = 20;

var interval = 5500;

var index = oldIndex = 0;

function start() {
	createBackgroundContainer(document.getElementById('image'));
	setTimeout('startFading()', interval);
}

function createBackgroundContainer(element) {
	var image = document.createElement('img');
	image.setAttribute('id', 'image');
	image.setAttribute('src', element.src);
	image.setAttribute('alt', element.alt);
	image.style.width = element.width + 'px';
	image.style.height = element.height + 'px';
	image.style.margin = '0';
	
	var backgroundContainer = document.createElement('span');
	backgroundContainer.setAttribute('id', 'backgroundContainer');
	backgroundContainer.style.display = 'block';
	backgroundContainer.style.margin = '0em auto 0 auto';
	backgroundContainer.style.padding = '0';
	backgroundContainer.style.width = element.width + 'px';
	backgroundContainer.style.height = element.height + 'px';
	backgroundContainer.appendChild(image);
	
	var parent = element.parentNode;
	parent.replaceChild(backgroundContainer, element);
}

function startFading() {
	var image = document.getElementById('image');
	/*index = Math.round(Math.random() * (images.length - 1));
	while (oldIndex == index) {
		index = Math.round(Math.random() * (images.length - 1));
	}
	oldIndex = index;
*/

index++;
if (index >= images.length) index=0;


	var backgroundContainer = document.getElementById('backgroundContainer');
	backgroundContainer.style.backgroundImage = "url('" + document.getElementById('image').src + "')";
	
	image.style.opacity = 0;
	image.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
	image.setAttribute('src', images[index][0]);
	image.setAttribute('alt', images[index][1]);
	image.setAttribute('title', images[index][2]);
	
	for (var i = 0; i < 100; i++) {
		setTimeout('fadeIn(' + i + ')', speed*i);
	}
	setTimeout("startFading()", interval);
}

function fadeIn(i) {
	document.getElementById('image').style.opacity = i/100;
	document.getElementById('image').style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + i + ")";
}