// SETTINGS
var speed = 1700; // speed of changing animation (in miliseconds)
var interval = 2000; // interval of changing banners (in miliseconds)


// SETTINGS END

// FUCTIONAL PART, DO NOT CHANGE!!!
var timer;
var timeout;
var banner = 1;
function rotate() {
	var number_of_banners = $('#contentWrap').children('.slide').length;	
	$("#image"+banner).fadeOut(speed);	
	if (++banner > number_of_banners) banner = 1;
	$("#image"+banner).fadeIn(speed);
}

function changeImage(variant) {
	clearInterval(timer);
	clearTimeout(timeout);
	$('.slide').stop(true, true);
	$('.slide').not('#image'+variant).fadeOut(500);
	$('#image'+variant).fadeIn(500);
	banner = variant;
	timeout = setTimeout('timer = setInterval("rotate()", interval + speed)', 1);
}

function preloadImages(images) {
	var image = images.split(",");
	for(var i in image)
	{
		pic1= new Image(); 
		pic1.src=image[i]; 
	}	
}


// DOCUMENT READY PART. IF YOU HAVE OTHER JQUERY SCRIPT ON THE PAGE, ADD THIS TO YOUR DOCUMENT READY.
$(document).ready(function(){
	
	var number_of_banners = $('#contentWrap').children('img').length;
	for (i = 2; i <= number_of_banners; i++) {
		$("#image"+i).hide();	
	}
	timer = setInterval("rotate()", interval + speed); //interval + speed because changing count as shown time too.

	$('#panelInner1').mouseenter(function(){
		changeImage(1);
	});	
	
	$('#panelInner2').mouseenter(function(){
		changeImage(2);
	});
	
	$('#panelInner3').mouseenter(function(){
		changeImage(3);
	});
	
	
	
	//USE THIS FOR HOVERING OF 3 MAIN TABS
	
	$("div#panelInner1").hover(function () {
			$(this).css({'background-image' : 'url(/1/content/uk_pensions/home/gfx/hover_advisers.png)', 'background-repeat' : 'no-repeat'});
		  }, function () {
			var cssObj = {
			  'background-image' : '',
			  'background-repeat' : ''
			}
			$(this).css(cssObj);
		 });
		 $("div#panelInner2").hover(function () {
			$(this).css({'background-image' : 'url(/1/content/uk_pensions/home/gfx/hover_employers.png)', 'background-repeat' : 'no-repeat'});
		  }, function () {
			var cssObj = {
			  'background-image' : '',
			  'background-repeat' : ''
			}
			$(this).css(cssObj);
		 });
		 $("div#panelInner3").hover(function () {
			$(this).css({'background-image' : 'url(/1/content/uk_pensions/home/gfx/hover_employees.png)', 'background-repeat' : 'no-repeat'});
		  }, function () {
			var cssObj = {
			  'background-image' : '',
			  'background-repeat' : ''
			}
			$(this).css(cssObj);
		 });
		
	  $('#important_message').slideDown(700, function() {
      // Animation complete 
      }); 
		
		//END USE THIS FOR HOVERING OF 3 MAIN TABS
});


// FUNCTIONAL PART END