var faderStage_percentagePerTime = 5;                          // how many percentages of opacity to change per delayMs
var faderStage_beginFadeInAtPercentage = 70;                   // when to begin fading in the next image
var faderStage_delayMs = 25;                                   // number of milliseconds to wait in-between opacity changes
var faderStage_nextPictureMs = 5000;                           // number of milliseconds in between slides
var faderStage_width = 940;                                    // width of one slide image
var faderStage_height = 190;                                   // height of one slide image

// Don't mess with stuff below here unless you understand the effects on the code.

var faderStage_imagesContainer;
var faderStage_currentOffset = 0;
var faderStage_ignoreActions = true;
var faderStage_imageList = [ ];
var faderStage_imageDom = [ ];

function faderStage_fadeIn(newOffset, currentAlpha) {
	faderStage_imageDom[newOffset].style.visibility = 'visible';
	if(!currentAlpha)
		currentAlpha = 0;
	
	currentAlpha += faderStage_percentagePerTime;
	if(currentAlpha >= 100) {
		faderStage_imageDom[newOffset].style.opacity = 100;
		faderStage_imageDom[newOffset].style.filter = 'alpha(opacity=100)';
		faderStage_currentOffset = newOffset;
		faderStage_ignoreActions = false;
	}
	else {
		faderStage_imageDom[newOffset].style.opacity = currentAlpha * 0.01;
		faderStage_imageDom[newOffset].style.filter = 'alpha(opacity=' + currentAlpha + ')';
		setTimeout(
			function() { faderStage_fadeIn(newOffset, currentAlpha) },
			faderStage_delayMs
		);
	}
}

function faderStage_fadeOut(oldOffset, newOffset, currentAlpha) {
	faderStage_imageDom[oldOffset].style.visibility = 'visible';
	if(!currentAlpha)
		currentAlpha = 100;
	
	if(currentAlpha == faderStage_beginFadeInAtPercentage)
		faderStage_fadeIn(newOffset);
	
	currentAlpha -= faderStage_percentagePerTime;
	if(currentAlpha <= 0) {
		faderStage_imageDom[oldOffset].style.visibility = 'hidden';
		faderStage_imageDom[oldOffset].style.opacity = 0;
		faderStage_imageDom[oldOffset].style.filter = 'alpha(opacity=0)';
	}
	else {
		faderStage_imageDom[oldOffset].style.opacity = currentAlpha * 0.01;
		faderStage_imageDom[oldOffset].style.filter = 'alpha(opacity=' + currentAlpha + ')';
		setTimeout(
			function() { faderStage_fadeOut(oldOffset, newOffset, currentAlpha) },
			faderStage_delayMs
		);
	}
}

function faderStage_loadXml() {
	if(!faderStage_imageListXml)
		return;
	
	var xmlHttpRequest;
    try { xmlHttpRequest = new XMLHttpRequest(); }
    catch(e) {
        try { xmlHttpRequest = new ActiveXObject('Msxml2.XMLHTTP'); }
        catch(e) {
            try { xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP'); }
            catch(e) { return; }
        }
    }
    
    xmlHttpRequest.onreadystatechange = function() {
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
            var widgets = xmlHttpRequest.responseXML.getElementsByTagName('fader-widget');
			
            var slides = xmlHttpRequest.responseXML.getElementsByTagName('slide');
            for(var i = 0; i < slides.length; ++i) {
                if(
                    slides[i].attributes &&
                    slides[i].attributes.getNamedItem('src') && slides[i].attributes.getNamedItem('src').nodeValue &&
                    slides[i].attributes.getNamedItem('alt') && slides[i].attributes.getNamedItem('alt').nodeValue
                ) {
                    faderStage_imageList.push({
                        src: slides[i].attributes.getNamedItem('src').nodeValue,
                        alt: slides[i].attributes.getNamedItem('alt').nodeValue
                    });
                }
            }
            
            faderStage_initialize();
        }
    }
    xmlHttpRequest.open('GET', faderStage_imageListXml, true);
    xmlHttpRequest.send('');
}

function faderStage_initialize() {
    var stageContainer = document.getElementById('pageStage');
    
    if(!stageContainer || !faderStage_imageList || faderStage_imageList.length < 2) return;
	
	stageContainer.style.backgroundImage = 'none';
	var existingImages = stageContainer.getElementsByTagName('img');
	for(var i = 0; i < existingImages.length; ++i)
		existingImages[i].parentNode.removeChild(existingImages[i]);
    
    faderStage_imagesContainer = document.createElement('div');
    faderStage_imagesContainer.id = 'pageStageFader';
    faderStage_imagesContainer.style.width = '' + (faderStage_width) + 'px';
    faderStage_imagesContainer.style.height = '' + (faderStage_height) + 'px';
    
    for(var i = 0; i < faderStage_imageList.length; ++i) {
        var newImage = document.createElement('img');
        newImage.width = faderStage_width;
        newImage.height = faderStage_height;
        newImage.alt = '[' + faderStage_imageList[i].alt + ']';
        newImage.src = faderStage_imageList[i].src;
		newImage.style.visibility = i ? 'hidden' : 'visible';
        faderStage_imagesContainer.appendChild(newImage);
		faderStage_imageDom.push(newImage);
    }
    
	if(stageContainer.firstChild) stageContainer.insertBefore(faderStage_imagesContainer, stageContainer.firstChild);
	else stageContainer.appendChild(faderStage_imagesContainer);
    
    faderStage_ignoreActions = false;
	setInterval(
		function() {
			if(!faderStage_ignoreActions) {
				faderStage_ignoreActions = true;
				faderStage_fadeOut(
					faderStage_currentOffset,
					faderStage_currentOffset >= faderStage_imageList.length - 1 ? 0 : faderStage_currentOffset + 1
				);
			}
		},
		faderStage_nextPictureMs
	);
}

if(window.addEventListener)  window.addEventListener('load', faderStage_loadXml, false);
else if(window.attachEvent)  window.attachEvent('onload', faderStage_loadXml);