window.onload = initAll;

var imgCount = 4;
var currImg = 1;
var currChange = .05;

function initAll() {
	div = document.createElement('div');
	div.style.height = '300px';
	div.style.width = '900px';
	div.style.position = 'absolute';
	div.style.top = '0px';
	div.style.left = '0px';
	div.style.opacity = 0;
	div.style.filter = 'alpha(opacity=0)';
	div.style.zIndex = 1;
	div.style.overflow = 'auto';
	
	header = document.getElementById('header');
	
	header.appendChild(div);
	
	imgElement = div;
	
	setTimeout(loadNextImg,4000);
}

function loadNextImg() {
	
	currImg++;
	
	currImg = (currImg <= imgCount) ? currImg : 1;
	
	var img = new Image();
	img.onload = dispImg;
	img.src = 'header_'+currImg+'.jpg';
}

function dispImg() {
	imgElement.style.background = 'url('+this.src+') 300px 25px no-repeat #094671';
	
	fadeImgElement();
}

function fadeImgElement() {
	div.style.opacity = (Math.round(div.style.opacity*100) / 100) + currChange;
	div.style.filter = 'alpha(opacity='+div.style.opacity*100+')';
	
	if(!((div.style.opacity*1 >= 1 && imgElement == div) || (div.style.opacity*1 <= 0 && imgElement == header))) {
		setTimeout(fadeImgElement, 50);
	} else {
		currChange = currChange * -1;
		imgElement = (imgElement == div) ? header : div;
		setTimeout(loadNextImg, 4000);//Later, load while timing the four seconds?
	}
}