var bannerCycleTimer = 6000; //Banner change delay in ms.
var currentBanner = 1; //This is auto-calculated
var numberOfBanners = 1; //This is auto-calculated
var jBannerCycler = null;
var previewsOpen = false;

function startBanner() {
	numberOfBanners = $('.jBannerItem').length; // Calculate the number of banner items

	//Add images to the banner
	for (var i = 1; i <= numberOfBanners; i ++) {
		$('.thumbsdesc').before('<a href="#" onclick="jumpToBanner('+i+');" title="'+i+'"><img src="banner/images/banner'+i+'thumb.jpg" /></a>'); 
		$('#bannerImages').append('<img src="banner/images/banner'+i+'.jpg" alt="Cheap Tickets" id="b'+i+'" style="display:none;" />');
	}

	$('#jBanner').css('background','#333');
	$("#jBanner .desc,#b1").show(); //Show Banner
	$("#jBanner .block").html($("#b1content").html()); 
	$("#thumbs a,#jBanner .block,#showbutton,.shader").animate({ opacity: 0.7 }, 1 ); //Set Opacities

	//Start Cycling the banner
	jBannerCycler = setInterval("rotateBanners()", bannerCycleTimer);
	
	$('#thumbs a').hover( function() {hoverThumb($(this));}, function() { unhoverThumb($(this));} );
}

function hoverThumb(thisThumbnail) { 
	thisThumbnail.animate({ opacity: 1 }, 1 );
	$('#jBanner .thumbsdesc').html($('#b'+thisThumbnail.attr('title')+'content h2').html());
}
function unhoverThumb ( thisThumbnail) {
	thisThumbnail.animate({ opacity: 0.7 }, 1 );
	$('#jBanner .thumbsdesc').html('');
}

function showHidePreviews() { 
	if (previewsOpen) {
		previewsOpen = false;
		$('#thumbs').slideUp();
	} else {
		previewsOpen = true;
		$('#thumbs').slideDown();
	}
}

function rotateBanners() {
	//$("#bannerdesc div.block").slideToggle();
	$("#bannerdesc div.block").slideToggle(function() { 
		$("#b" + currentBanner).fadeOut(function() { 
			if (currentBanner == numberOfBanners)
				currentBanner = 1; 
			else 
				currentBanner++;
			$("#b" + currentBanner).fadeIn('fast');
			$("#bannerdesc div.block").html($("#b"+currentBanner+"content").html()).slideToggle();
		});
	});
}

function jumpToBanner(bannerNumber) { 
	clearInterval(jBannerCycler);
	$("#b" + currentBanner).fadeOut(function() {
		$("#b" + bannerNumber).fadeIn('fast');
	});
	$("#bannerdesc div.block").html($("#b"+bannerNumber+"content").html());
	currentBanner = bannerNumber;
	jBannerCycler = setInterval('rotateBanners()', bannerCycleTimer);
}