// JavaScript to rotate background image and headline text on the main page.
// Requires a div #fader_img which contains a div #fader_img_inner (empty),
// the text requires a div called #fader_txt.

// Set the counter at 1 because the assets at 0 in both arrays will already be loaded (for non-js compatibility).
var i = 1;
var img_dir = '/includes/pinfold/img/';

// Images should be 700 x 513 - they are background-image properties so the page will not resize to accommodate them if they are larger/smaller
var img_array = [
	'home/background.jpg',
	'home/background2.jpg',
	'home/background3.jpg'
];
var txt_array = [
	'Over 350 academic and <br />research staff including 80 <br />readers and professors',
	'An international faculty - <br />over 3,000 students from <br />90 countries',
	'Top rating for <br />research - 7th in <br />the UK'
]

function rotateText() {
	// Get the new assets
	var background_img = 'url(' + img_dir + img_array[i] + ')';
	var headline_text = txt_array[i];
	// Set inner_img = img
	jQuery('#fader_img_inner').css({"background-image": jQuery('#fader_img').css('background-image')});
	// Hide img behind inner_img
	jQuery('#fader_img_inner').fadeTo(10, 1, function() {
		// Set img = new img
		jQuery('#fader_img').css('background-image', background_img);
		// Reveal new img
		jQuery('#fader_img_inner').fadeTo(800, 0);
	});


	// Fade out old headline
	jQuery('#fader_txt').fadeOut(100, function() {
		// Fade in new headline
		jQuery('#fader_txt').html(headline_text).fadeIn(300);
	});

	i++;
	if (i >= img_array.length) i = 0;
}

setInterval(rotateText, 12000 );