// Hero banner images need to be defined here, excepting the first banner; the rest is defined in the lloydsHomepage.aspx template
var firstBanner = $('#content #hero-banner-area p a').html();
var secondBanner = '<img src="img/banners/homepage/3-yr-sterling-hero.jpg" alt="Offshore Limited Edition Deposit" />';
var thirdBanner = '<img src="img/banners/homepage/70xx220_ibsa-airport-1.jpg" alt="Instant access offshore savings account in Sterling and Euro" />';
var fourthBanner = '<img src="img/banners/homepage/70xx220_hero-banner-ftd.jpg" alt="Fixed term savings account" />';

var newBannerHTML = '';
var newBannerHTMLA = '';
var newBanner = '';

var repeatingTimeOut = '';

$('#hero-banner-area ul li:first a').addClass('selected').parent().addClass('selected');



function startTimeOut() { stopTimeOut(); repeatingTimeOut = window.setTimeout('automaticSwap()', 10000); }
function stopTimeOut() { window.clearTimeout(repeatingTimeOut); window.clearTimeout(pageLoadTimeOut); }

// Function to get the banner link and image
function getBannerContent(banner)
{
	newBannerHTMLA = $('#'+banner+' a').attr('href');
	newBannerHTML = '<a href="'+newBannerHTMLA+'">';
	if (banner == 'hero-first') { newBannerHTML = newBannerHTML+firstBanner; }
	else if (banner == 'hero-second') { newBannerHTML = newBannerHTML+secondBanner; }
	else if (banner == 'hero-third') { newBannerHTML = newBannerHTML+thirdBanner; }
	else if (banner == 'hero-fourth') { newBannerHTML = newBannerHTML+fourthBanner; }
	newBannerHTML = newBannerHTML+'</a>';
	return newBannerHTML;
}

// Function to change the banner on hover
// NB: a class needs to be added to the LI as well as the A for Internet Explorer to handle the z-indexing right
function changeBanner(activeLink)
{
	stopTimeOut();
	
	$('#hero-banner-area ul li a').stop();
	$('#hero-banner-area p').stop().css({ opacity: '1' });
	$('#hero-banner-area ul li.selected').each(function() { $(this).removeClass('selected'); });
	$('#hero-banner-area ul li a span.hover').remove();
	$('#hero-banner-area p.fade-in-banner').remove();
	
	
	var banner = $(activeLink).parent().attr('id');
	getBannerContent(banner);
	// The if... statement is to stop the banner flashing white if you roll over the button and banner vertically repeatedly
	var currentBanner = $('#hero-banner-area p:first a').attr('href');
	if (currentBanner != newBannerHTMLA)
	{
		$('#hero-banner-area').append('<p class="fade-in-banner">'+newBannerHTML+'</p>');
		$('#hero-banner-area p:first').fadeOut(300);
	
		window.setTimeout(function()
		 { 
			$('#hero-banner-area p:first').html(newBannerHTML).css({ display: 'block'});
			$('#hero-banner-area p.fade-in-banner').remove();
		}, 350);
	
		$('#hero-banner-area ul li a.selected').append('<span class="hover"><!-- --></span>').removeClass('selected');
		$('#hero-banner-area ul li a span.hover').fadeOut(300);
		window.setTimeout(function()
		{
			$('#hero-banner-area ul li a span.hover').parent().parent().removeClass('selected');
			$('#hero-banner-area ul li a span.hover').remove();
			$(activeLink).parent().addClass('selected');
		}, 280);
		$(activeLink).addClass('selected');
	}
	return false;
}

$('#hero-banner-area ul li a').click(function() { stopTimeOut(); });
$('#hero-banner-area ul li a').mouseover(function() { changeBanner($(this)); });
$('#hero-banner-area ul li a').mouseout(function() { startTimeOut(); });


// Function to change the banner automatically
function automaticSwap()
{
	stopTimeOut();
	
	$('#hero-banner-area ul li a').stop();
	$('#hero-banner-area p').stop().css({ opacity: '1' });
	$('#hero-banner-area ul li.selected').each(function() { $(this).removeClass('selected'); });
	$('#hero-banner-area ul li a span.hover').remove();
	$('#hero-banner-area p.fade-in-banner').remove();
		
	var currentBanner = $('#hero-banner-area ul li a.selected').parent().attr('id');
	if (currentBanner == 'hero-first') { newBanner = 'hero-second'; }
	else if (currentBanner == 'hero-second') { newBanner = 'hero-third'; }
	else if (currentBanner == 'hero-third') { newBanner = 'hero-fourth'; }
	else if (currentBanner == 'hero-fourth') { newBanner = 'hero-first'; }		
	
	getBannerContent(newBanner);
	$('#hero-banner-area').append('<p class="fade-in-banner">'+newBannerHTML+'</p>');
	$('#hero-banner-area p:first').fadeOut(300);
		
	window.setTimeout(function()
	{
		$('#hero-banner-area p:first').html(newBannerHTML).css({ display: 'block'});
		$('#hero-banner-area p.fade-in-banner').remove();
		//repeatingFade();
	}, 350);	
		
	$('#hero-banner-area ul li a.selected').append('<span class="hover"><!-- --></span>').removeClass('selected');
	$('#hero-banner-area ul li a span.hover').fadeOut(300);
	window.setTimeout(function()
	{
		$('#hero-banner-area ul li a span.hover').parent().parent().removeClass('selected');
		$('#hero-banner-area ul li a span.hover').remove();
		$('li#'+newBanner).addClass('selected');
	}, 280);
	$('li#'+newBanner).children('a').addClass('selected');
	
	startTimeOut();
}

pageLoadTimeOut = window.setTimeout(function() { automaticSwap(); }, 10000);