// Set delay for the changing of the banners
var delay = 3500;

// Function for fading in and out the banners so they rotate
function show_banner (index) {

	var this_banner = $('div#banner img.banner:eq(' + index + ')');

	// Get the width and height for positioning
	var bannerwidth = this_banner.width();
	var bannerheight = this_banner.height();

	// Get the center
	var center_x = Math.round (bannerwidth / 2);
	var center_y = Math.round (bannerheight / 2);
	
	this_banner.css("margin-left", (74 - center_x)).css("margin-top", (38 - center_y));

	// Fade out the current banner and fade in the new.
	$('div#banner img.banner:eq(' + current_banner + ')').fadeOut("slow", function () {
		this_banner.fadeIn("slow");
	});

	current_banner = index;
	
	// Check what the next banner will be
	next_banner = (current_banner == banner_amount ? 0 : (current_banner + 1));

	// Recursion with a delay
	setTimeout ("show_banner(" + next_banner + ")", delay);
	
}

// Create the onload function
function on_load () {

	show_banner (0);
	
}