var holder1 = 'imgHolder1';
var holder2 = 'imgHolder2';
var headlineHolder = 'imgHeadline';

var currentRotatorImageURL = '';

var currentDisplaying = 'holder2';

var arrImageLinks = [];
var currentImageIndex = 0;

var rotateInterval = 5000;
var rotateDuration = 2000;

var globalTimeoutContainer;

if(typeof(imageRotateInterval) == 'number'){
	rotateInterval = imageRotateInterval;
}

function toggleImage(imageHolderID1, imageHolderID2, url, text, duration){
	preloadImage = new Image();
	preloadImage.src = url;
	preloadImage.onload = function(){
		if(currentDisplaying == 'holder1'){
			$('#'+imageHolderID2).css('background-image', 'url('+url+')');
			$('#'+imageHolderID2).fadeIn(duration).css('visibility', '')
			currentDisplaying = 'holder2';
		}
		else{
			$('#'+imageHolderID1).css('background-image', 'url('+url+')');
			$('#'+imageHolderID2).fadeOut(duration).css('visibility', '')
			currentDisplaying = 'holder1';
		}
		
		$('#'+headlineHolder).html(text);
	}
}

function rotateImage(){
	currentImageIndex++;
	if(currentImageIndex >= arrImageLinks.size()){
		currentImageIndex = 0;
	}
	nextImage = arrImageLinks[currentImageIndex];
	$(nextImage).click();
}


$(document).ready(function(){
	var firstImageButton = $('.Box_Bannerover li a').first();

	if(firstImageButton != undefined){
		//get image links to rotate
		arrImageLinks = $('.Box_Bannerover li a');
		
		$('.Box_Bannerover li a').first().addClass('Selected');
		currentRotatorImageURL = $('.Box_Bannerover li a.Selected').first().attr('href');
		currentHeadlineText = $('.Box_Bannerover li a.Selected').first().attr('title');
		
		$('#'+holder2).css('background-image', 'url('+currentRotatorImageURL+')');
		$('#'+headlineHolder).html(currentHeadlineText);
		
		
		$('.Box_Bannerover li a').each(function(index){
			$(this).attr('rel', index);
		})
		
		$('.Box_Bannerover li a').bind('click', function(){
			clearTimeout(globalTimeoutContainer);
			
			$('.Box_Bannerover li a').removeClass('Selected');
			$(this).addClass('Selected');
			if($(this).attr('href') != currentRotatorImageURL){
				toggleImage(holder1, holder2, $(this).attr('href'), $(this).attr('title'), rotateDuration);
				currentRotatorImageURL = $('.Box_Bannerover li a.Selected').first().attr('href');
			}
			
			currentImageIndex = $(this).attr('rel');
			globalTimeoutContainer = setTimeout(rotateImage, rotateInterval);
			return false;
		})
		
		globalTimeoutContainer = setTimeout(rotateImage, rotateInterval);
	}
})