$(document).ready( function(){

	fadeDiv();
	
	$("#section1").mouseover( function(){
		clearTimeout(timeoutvar);
		fadeDiv(1);
		$("#hpbody1").fadeIn(1050);
		$("#hpbody").fadeOut(350);
	});
	
	$("#section1").mouseout( function(){
		clearTimeout(timeoutvar);
		$("#hpbody1").fadeOut(200);
		$("#hpbody").fadeIn(1050);
		fadeDiv();
	});
	
	$("#section2").mouseover( function(){
		clearTimeout(timeoutvar);
		fadeDiv(2);
		$("#hpbody2").fadeIn(1050);
		$("#hpbody").fadeOut(350);
	});
	
	$("#section2").mouseout( function(){
		clearTimeout(timeoutvar);
		$("#hpbody2").fadeOut(200);
		$("#hpbody").fadeIn(1050);
		fadeDiv();
	});
	
	$("#section3").mouseover( function(){
		clearTimeout(timeoutvar);
		fadeDiv(3);
		$("#hpbody3").fadeIn(1050);
		$("#hpbody").fadeOut(350);
	});
	
	$("#section3").mouseout( function(){
		clearTimeout(timeoutvar);
		$("#hpbody3").fadeOut(200);
		$("#hpbody").fadeIn(1050);
		fadeDiv();
	});
	
	$("#section4").mouseover( function(){
		clearTimeout(timeoutvar);
		fadeDiv(4);
		$("#hpbody4").fadeIn(1050);
		$("#hpbody").fadeOut(350);
	});
	
	$("#section4").mouseout( function(){
		clearTimeout(timeoutvar);
		$("#hpbody4").fadeOut(200);
		$("#hpbody").fadeIn(1050);
		fadeDiv();
	});
	
});

fadeDiv = function(num){

	divid = '#hpbody';
	if (num)
		divid = divid + num;
	
	$(divid).innerfade({
		animationtype: 'fade',
		speed: 750,
		timeout: 3000,
		type: 'random_start',
		containerheight: '500px'
	});

}