/*
 * Hdr Slideshow
 * Controls the header animation.
 * The pool of images is dynamically included by MODx.
 */

var ssHoldTime = 250; // how many milliseconds to hold each frame
var ssFadeLen = 5000; // how long to do the fade
var curSSIndx = 0;
var animFx = new Object;
var bufferImg = new Object;
window.addEvent('domready', function(){
	// init to the first image
	$$('#headerImage img')[0].src = ssimgs[0].src;

	// Create a new image holder
	bufferImg = new Element('img', {
		'src': ssimgs[curSSIndx].src,
		'height': 170,
		'width': 490,
		'styles': {
			'position': 'absolute',
			'z-index': 2
		}
	});
	bufferImg.inject('headerImage', 'top');


	animFx = new Fx.Tween(bufferImg, {'duration': ssFadeLen});
	animFx.addEvent('complete', function(){
		setTimeout(nextStill, ssHoldTime);
	});

	setTimeout(nextStill, ssHoldTime);
});


function nextStill(){
	bufferImg.setStyle('opacity', 0);
	bufferImg.src = $('baseHdrImg').src;
	bufferImg.setStyle('opacity', 1);

	curSSIndx++;
	if (curSSIndx >= ssimgs.length) curSSIndx = 0;
	
	$('baseHdrImg').src = ssimgs[curSSIndx].src;
	animFx.start('opacity', 0);
}