// highlights crossfader
$(function() {
					 
	var iDisplayDelay = 4000;
	var iFadeSpeed = 1750;
	
// are there any numbered photos?
	var jFeatured = $('.home .region-event-search .flux-image-left');
	if (!jFeatured.length) {
		return;		
	}

	// create the main element + numbering panel + click cover
	$(jFeatured[0]).before('<div id="highlight-photo-cover"></div><div id="highlight-photo-numbers"><div></div></div><div id="highlight-photo-wrapper" class="clearfix"></div>');
	
	// move photos inside it
	jContainer = $('#highlight-photo-wrapper');
	jNumbers = $('#highlight-photo-numbers div');
	
	jContainer.append(jFeatured);

	// create numbered items for highlight photos
	var iClickTicker = null;
	var aoFeatured = [];
	var iCurrent = -1;
	// find and store the featured images and links	
	var iCount = 1;
	jFeatured.show().each(function() {
		jNumbers.append('<div class="number">' + (iCount++) + '</div>');
		aoFeatured.push({
			image: $(this).find('img').css({ opacity: 0 }),
			link: $(this).find('a'),
			caption: $(this).find('.flux-caption').css({ opacity: 0 }),
			preload: null,
			loaded: false
		});
	});
	// setup the click cover
	$('#highlight-photo-cover').click(function() {
		clearInterval(iClickTicker);
		if (aoFeatured[iCurrent] && aoFeatured[iCurrent].link) {
			location.href = aoFeatured[iCurrent].link.attr('href');
		}
	});
	// setup the transition controls, and initiate the first one
	var iCount = 0;
	$($('#highlight-photo-numbers .number').each(function() {
		this.iFeaturedIndex = iCount++;
		$(this).click(ControlClicked) 
	})[0]).click();
		
	function ControlClicked(eEvent) {
		// setup the auto-click
		clearTimeout(iClickTicker);
		iClickTicker = setTimeout(ImageNext, iDisplayDelay );
		
		var iIndex = eEvent.target.iFeaturedIndex;
		Preload(aoFeatured[iIndex], true);
		Preload(aoFeatured[iIndex+1], false);
		ImageTransition();
		return false;
		
		function Preload(oFeatured, bLoadingAnim) {
			// create the image if it has not already been
			if (oFeatured && !oFeatured.preload) {
				// set the loading anim display if it was newly created
				if (bLoadingAnim) {
					$('#highlight-photo-cover').addClass('loading');
				}
				var preload = oFeatured.preload = new Image;
				preload.onload = function() {
					oFeatured.loaded = true;
					this.onload = null;
				}
				preload.src = oFeatured.image.attr('src');
			}
		}
		
		function ImageTransition() {
			if (!aoFeatured[iIndex].loaded) {
				return setTimeout(ImageTransition, 50);
			}
			// clear the loading display
			$('#highlight-photo-cover').removeClass('loading');
			// reset animations, and fade it in and all the others out
			jFeatured.find('img').stop().animate( { opacity: 0 }).show();
			jFeatured.find('.flux-caption').stop().animate( { opacity: 0 }).show();
			aoFeatured[iIndex].image.stop().animate({ opacity: 1.0 });
			aoFeatured[iIndex].caption.stop().animate({ opacity: 1.0 });
			
			// update the current image state to the new index
			iCurrent = iIndex;
			$('#highlight-photo-numbers .number').removeClass('current');
			$(eEvent.target).addClass('current')
		}
	}
	
	function ImageNext() {
		iCurrent++;
		if (iCurrent >= aoFeatured.length) {
			iCurrent = 0;
		}
		$($('#highlight-photo-numbers .number')[iCurrent]).click();
	}
});