$(document).ready(function(){
	
	// all but one of the title boxes is hidden by default, so set visibility to be zero
	var titles = $('#home-holder-box div.title-box');
	
	$.each( titles, function(key, value){
		if( $(value).hasClass('hide') )
		{
			$(value).css('opacity', 0);
		}
	});
	
	// set visibility to be zero on all but the active background image too
	var imgs = $('#bg-box img');
	$.each( imgs, function(key, value){
		if( $(value).attr('id') != 'bg' ){
			$(value).css('opacity', 0);
		}
	});
	
	// now, every 10 seconds we want to fade out the old one and bring in the new
	var interVal = setInterval("doHomepage()", 10000);
	
});

function doHomepage()
{
	// work out the next active item before we do anything
	if( $('#home-holder-box div.active').next().hasClass('title-box') )
	{
		var nextActive = $('#home-holder-box div.active').next();
	}
	else
	{
		var nextActive = $('#home-holder-box div.title-box').first();
	}
			
	// fade out active title
	$('#home-holder-box div.active').animate({
		opacity: 0
	}, 750, function(){
		$(this).removeClass('active');
		$(this).addClass('hide');
		$(nextActive).removeClass('hide');
		fadeIn( nextActive );
	});
	
	$('#home-holder-box div.active .cufon-element').animate({
		opacity:0
	},750);
	
	// fade out the BG
	$('#bg').animate({
		opacity:0
	}, 750, function(){
		$(this).attr('id', '');
		$(this).addClass('hide');
	});
	
	// bring in the new BG
	var newImg = $(nextActive).attr('id').replace('title-box-','');
	newImg = '#bg-box img.bg-'+newImg;
	newImgFilter = newImg;
	
	
	$(newImg).removeClass('hide');
	$(newImg).attr('id', 'bg');
	
	initResizeAfterDom(newImgFilter);
	
	$(newImg).animate({
		opacity:1
	}, 500);
	
	// function to fade in the new content
	function fadeIn( object )
	{
		$(object).animate({
			opacity: 1
		}, 500, function(){
			$(this).addClass('active');
		});
		
		
		// have to do this for IE, fade out the cufon replaced elements
		$(object).find('.cufon-element').animate({
			opacity:1
		},750);
	}	
}