function swapCarouselImages(id, nextItem){
	var $active = $('#CarouselBanner'+id+' .active');
	
	var $next = null;
	//if we should get the previous item
	if(nextItem){
		if($('#CarouselBanner'+id+' .active').next('.CarouselBanner-fadeImage').length < 1){
			$next = $('#CarouselBanner'+id+' .CarouselBanner-fadeImage:first'); 	
		}else{
			$next = $('#CarouselBanner'+id+' .active').next(); 
		}
		
	} else{
		$next = ($('#CarouselBanner'+id+' .active').prev('.CarouselBanner-fadeImage').length < 1) ? $('#CarouselBanner'+id+' .CarouselBanner-fadeImage:last') : $('#CarouselBanner'+id+' .active').prev();
	}

	fadePanels($active, $next, id);
}

function fadePanels(active, next, id){
	if($(next) && $(next)!=null && !window.fading){
		
		window.fading = true;
		$(active).fadeOut(500, function(){
	    	$(active).removeClass('active');
	      	$(next).fadeIn(300);
	      	$(next).addClass('active');
	      	window.fading = false;
	  	});
	}
	updatePagination(id, $(next).find(".index").html());
}
 
function updatePagination(id, index){
	//$("#CarouselBanner"+id+"_Controls .active .index").fadeOut(300);
	$("#CarouselBanner"+id+"_Controls .active").removeClass("active");
	
	$("#CarouselBanner"+id+"_Controls .pagination:eq("+index+")").addClass('active');				
	//$("#CarouselBanner"+id+"_Controls .active .index").fadeIn(400);
}

function pauseAutoFade(id){
	window["interval_Home"] = clearInterval(window["interval_Home"]);
	$("#CarouselBanner"+id+"_Controls .pause").hide()
	$("#CarouselBanner"+id+"_Controls .play").show();
}

function startAutoFade(id){
	window["interval_Home"] = setInterval("rollNext(\""+id+"\", true)", 5000);
	$("#CarouselBanner"+id+"_Controls .play").hide()
	$("#CarouselBanner"+id+"_Controls .pause").show();
}

function rollNext(id, nextItem){
	swapCarouselImages(id, true)
}

function swapFadeTo(id, index){
	var $active = $('#CarouselBanner'+id+' .active');
	var $next = $('#CarouselBanner'+id+' .CarouselBanner-fadeImage:eq('+index+')');
	fadePanels($active, $next, id);
}

function setupPage() {
    //$(".play-pause-control .play").hide();
    $("#CarouselBannerHomePage .CarouselBanner-fadeImage").hide();
    $("#CarouselBannerHomePage .active").show();
    setupControls();
}
   
function setupCarouselBanner(id){
	setupPage(); //Decides on styling for the page
        
	window.fading = false;
	
	// Run our swapCarouselImages() function every 5secs
	startAutoFade(id);
	$("#CarouselBanner"+id+"_Controls .controls").hover(
		function(){$(this).addClass("rollover");},
		function(){$(this).removeClass("rollover");}
	);

	//bind click on pagination
	$("#CarouselBanner"+id+"_Controls .pagination").bind("click", function(){
		pauseAutoFade(id);
		var index = $(this).find('.index').html();
		swapFadeTo(id, index);
	});
	
	//
	$("#CarouselBanner"+id+"_Controls .pause").hover(
		function(){$(this).addClass("pauseRollover");},
		function(){$(this).removeClass("pauseRollover");}
	);
	$("#CarouselBanner"+id+"_Controls .pause").bind('click', function(){
		pauseAutoFade(id);
	});
	
	$("#CarouselBanner"+id+"_Controls .play").hover(
		function(){$(this).addClass("playRollover");},
		function(){$(this).removeClass("playRollover");}
	);
	$("#CarouselBanner"+id+"_Controls .play").bind('click', function(){
                rollNext(id, true);
		startAutoFade(id);
	});
	
	
	/*This next bit of code deals with the specific scenario where the banner is populated with 4 elements, set to size medium 
	and has both images and captions. The requirement is that in this case the icons and captions are aligned left instead of
	being centered */
	
	var $bannerMedium = $('.banner-medium');
	var $deviceAndCaption =  $('.device-and-caption');
	
	if ((($('.pagination').length)==4) && ($bannerMedium.length > 0) && ($deviceAndCaption.length > 0)) {
		$('.centered').css("marginLeft", "0");
		$("#CarouselBanner"+id+"_Controls .pagination:eq(0)").css("marginLeft", "0");
	}
	
	 $('.pagination').bind('mouseenter mouseleave', function() {
        $(this).toggleClass('hover');
    });

}

function setupControls() {
    var $controlsWidth = ($(".pagination").length)*($(".pagination").outerWidth(true));
    $(".centered").width($controlsWidth);
}