var sBaseUrl		= "/z_core/img/content/";
var aContainerObj 	= [$('body')];
var aImgs			= ["bg-petal.jpg","bg-leaf.jpg","bg-walk.jpg","bg-dog.jpg","bg-rose.jpg", "bg-puddle.jpg"];	
var iCount			= 1;
var iSpeed			= 1*1000;

$(function(){
	// check if we want the carousel
	if ($('.carousel').length)
	{
		// create a div  that we'll  fade in / out, hiding the inital body img
		$('body').prepend('<div id="carousel-img"></div>');
		aContainerObj.push($('#carousel-img'));
		//  we don't wont to see it just yet
		aContainerObj[1].fadeOut(0);
		// load our first image, so it's ready to be displayed
		aContainerObj[iCount].css('background-image', 'url("' + sBaseUrl + aImgs[iCount] + '")', on_fadeCompleted);
		// start the carousel 
		var intervalID 	= window.setInterval(on_ImageIntervalTimeOut, 4*1000);	
	}	
});

function on_ImageIntervalTimeOut() {
	var iContainerTarget	= iCount%2;
	var iImgCount			= iCount%aImgs.length;
	// fade alternatively 
	if (iContainerTarget)
	{
		aContainerObj[1].fadeIn(iSpeed, on_fadeCompleted);
	} else {
		aContainerObj[1].fadeOut(iSpeed, on_fadeCompleted);		
	}		
	
	iCount++;
}

function on_fadeCompleted() {
	// preload our next image into the hidden element
	var iContainerTarget	= iCount%2;
	var iImgCount			= iCount%aImgs.length;
	aContainerObj[iContainerTarget].css('background-image', 'url("' + sBaseUrl + aImgs[iImgCount] + '")');
}