$(function(){
	
	var cache;
	var banners;
	var banner;
	var images;
	var currentSet;
	var loopTimer;

	//Make ajax call to grab json object of banners and images
	$.ajax({
		url: 'index.php?a=get-banners&format=json',
		dataType: 'json',
		success: function(data, textStatus) {
			banners = data.banners;
			if (banners.length) {
				startCycle(0);
			}
		}
	});

	//Append next banner button
	$('#banner').append('<a href="#" class="largeArrow next" rel="0">Next</a>');

	//Functionality for next link - just calls startCycle with the passed variable.
	$('#banner a.next').click(function() {
		$(this).hide();
		clearTimeout(loopTimer);
		var slideId = $('#banner .next').attr('rel');
		$('#banner .images').hide('blind', {direction: 'left' }, 700, function() {
			startCycle(slideId);                    
		});
		//replaceBannerText();
		return false;
	});
	
	/*
	*  Takes the set of banners and extracts the images for the currently selected set.
	*
	*	Loops through images and creates relevant html to inject into div
	*	Sets the HTML and fades in the div to be cycled.
	*	Runs the cycle if there is more than one image, otherwise just displays it.
	*	Once cycle, or time elapses, the next set is displayed with the next link updated accordingly.
	*
	*/
	function startCycle(currentSet)
	{
		clearTimeout(loopTimer);
                
		var returnHtml = "";
		banner = banners[parseInt(currentSet)];
		images = banners[parseInt(currentSet)].images;
		$.each(images, function(key, image) {
			var bannerImage = new Image();
			bannerImage.src = '/assets/banners/' + image.image;
			returnHtml = returnHtml + '<img src="' + bannerImage.src + '" />';					
		});
		
		replaceBannerText();
		
		$('#banner .images').html(returnHtml);
		
		$('#banner .images').fadeIn(700, function() {
		
			//Set the rel attr for the next link
			if ((parseInt(currentSet))>=(banners.length-1)) {
				$('#banner .next').attr('rel',0);
					$('#banner .imageWrapper').css('background','transparent url(/assets/banners/' + banners[0].images[0].image + ') no-repeat top left');
			} else {
				$('#banner .next').attr('rel',(currentSet*1)+1);
				$('#banner .imageWrapper').css('background','transparent url(/assets/banners/' + banners[parseInt(currentSet)+1].images[0].image + ') no-repeat top left');
			}

			//Start the cycle or display the image as required.
			if (images.length>1) {
				$('#banner .images').cycle({
					fx: 'scrollLeft',
					speed: 700, 
					timeout: 7000,
					autostop: 1,
					before: function() {
						if (parseInt(currentSet)>=(banners.length-1)) {
							$('#banner .imageWrapper').css('background','transparent url(/assets/banners/' + banners[0].images[images.length-1].image + ') no-repeat top left');
						} else {
							$('#banner .imageWrapper').css('background','transparent url(/assets/banners/' + banners[parseInt(currentSet)+1].images[(banners[parseInt(currentSet)+1].images.length)-1].image + ') no-repeat top left');
						}
					},
					end: function(currSlideElement, nextSlideElement, options, forwardFlag) {
						if (parseInt(currentSet)>=(banners.length-1)) {
							$('#banner .images').hide('slide', { direction: 'left' }, 700, function() {
								startCycle(0);
							});
						} else {
							$('#banner .images').hide('slide', { direction: 'left' }, 700, function() {
								startCycle(parseInt(currentSet)+1);
							});
						}
					}
				});
			} else {
				loopTimer = setTimeout(function() {
					if (parseInt(currentSet)>=(banners.length-1)) {
						$('#banner .imageWrapper').css('background','transparent url(/assets/banners/' + banners[0].images[0].image + ') no-repeat top left');
						$('#banner .images').hide('slide', {direction: 'left' }, 700, function() {
							startCycle(0);
						});
						//replaceBannerText();
					} else {
						$('#banner .imageWrapper').css('background','transparent url(/assets/banners/' + banners[parseInt(currentSet)+1].images[0].image + ') no-repeat top left');
						$('#banner .images').hide('slide', {direction: 'left' }, 700, function() {
							startCycle(parseInt(currentSet)+1);
						});
						//replaceBannerText();
					}
				}, 7000);
			}
		});
	}

	function replaceBannerText() {
		$('#banner .textBlock .wrapper').fadeOut(400, function () {
			$(this).children('.content').html(banner.text);
			$(this).find('.actionButton').attr('href', banner.link).html(banner.linkTitle);
			$(this).fadeIn(400);
			$('#banner a').show();
		});
	}
});