/*
* The Vaux Website Home Page Graphic Crossfader
* copyright © 2012 The Vaux Condominiums Owners' Association

* jQuery & javascript (based upon Nathan Smith's jQuery Cookbook demo)
* images are packaged in an unordered list element (<ul id="fade_package">)
* images themselves have IDs (e.g., <li id="photo_1">, etc.)
* images also belong to a class (.fade_trigger) to listen for clicks
* this script grabs images by <li>
*/

function init_crossFader()
{
	//does a list of image elements actually exist..?
	if (!$('#fade_package').length)
	{
		// If not, exit script...
		return;
	}

	//SET TIME IMAGE STAYS ONSCREEN IN MILLISECONDS RIGHT HERE...
	var dwell = 6000;

	//SET CROSSFADE TRANSITION SPEED IN MILLISECONDS RIGHT HERE...
	var speed = 2000;

	//SET TOTAL NUMBER OF IMAGES AVAILABLE RIGHT HERE (UP TO 16)...
	var imagetotal = 12;

	//declare vars and pick a random image (from 1 to imagetotal)...
	var randimage = Math.ceil(Math.random() * imagetotal);
	var oldestimage = randimage;
	var olderimage = randimage;
	var oldimage = randimage;
	var currentimage = null;  //picture object to fade out
	var nextimage = null;  //picture object to fade in
	var waitTime = null;
	var nogo = false;  //guardian

	//hide all but a random list element <li>...
	switch(randimage)
	{
		case 1:		
			$('#fade_package li:nth-child(1)').show();
			$('#fade_package li:nth-child(1)').siblings('li').hide();
			break;
		case 2:		
			$('#fade_package li:nth-child(2)').show();
			$('#fade_package li:nth-child(2)').siblings('li').hide();
			break;
		case 3:		
			$('#fade_package li:nth-child(3)').show();
			$('#fade_package li:nth-child(3)').siblings('li').hide();
			break;
		case 4:		
			$('#fade_package li:nth-child(4)').show();
			$('#fade_package li:nth-child(4)').siblings('li').hide();
			break;
		case 5:		
			$('#fade_package li:nth-child(5)').show();
			$('#fade_package li:nth-child(5)').siblings('li').hide();
			break;
		case 6:		
			$('#fade_package li:nth-child(6)').show();
			$('#fade_package li:nth-child(6)').siblings('li').hide();
			break;
		case 7:	
			$('#fade_package li:nth-child(7)').show();
			$('#fade_package li:nth-child(7)').siblings('li').hide();
			break;
		case 8:	
			$('#fade_package li:nth-child(8)').show();
			$('#fade_package li:nth-child(8)').siblings('li').hide();
			break;
		case 9:	
			$('#fade_package li:nth-child(9)').show();
			$('#fade_package li:nth-child(9)').siblings('li').hide();
			break;
		case 10:	
			$('#fade_package li:nth-child(10)').show();
			$('#fade_package li:nth-child(10)').siblings('li').hide();
			break;
		case 11:	
			$('#fade_package li:nth-child(11)').show();
			$('#fade_package li:nth-child(11)').siblings('li').hide();
			break;
		case 12:	
			$('#fade_package li:nth-child(12)').show();
			$('#fade_package li:nth-child(12)').siblings('li').hide();
			break;
		case 13:	
			$('#fade_package li:nth-child(13)').show();
			$('#fade_package li:nth-child(13)').siblings('li').hide();
			break;
		case 14:	
			$('#fade_package li:nth-child(14)').show();
			$('#fade_package li:nth-child(14)').siblings('li').hide();
			break;
		case 15:	
			$('#fade_package li:nth-child(15)').show();
			$('#fade_package li:nth-child(15)').siblings('li').hide();
			break;
		case 16:	
			$('#fade_package li:nth-child(16)').show();
			$('#fade_package li:nth-child(16)').siblings('li').hide();
			break;
		default:
			$('#fade_package li:nth-child(1)').show();
			$('#fade_package li:nth-child(1)').siblings('li').hide();
			break;
	}

	//set up first image...
	currentimage = $('#fade_package li:visible');

	//wait for page load...
	$(window).load(function()
	{

		//wait and hold on first image...
		waitTime = setTimeout(startFade, dwell);

		function startFade()
		{
			//begin cycle...
			crossFade(currentimage);
		}
	});

	//crossfader function...
	function crossFade(element)
	{
		if (nogo == true)
		{
			return;
		}
		nogo = true;

		//remember previous 3 images...
		oldestimage = olderimage;
		olderimage = oldimage;
		oldimage = randimage;

		//now randomly pick a new image that differs...
		while (true)
		{
			randimage = Math.ceil(Math.random() * imagetotal);
			if (randimage != oldimage && randimage != olderimage && randimage != oldestimage)
			{
				break;
			}
		}

		switch (randimage)
		{
			case 1:
				nextimage = $('#fade_package li:nth-child(1)');
				break;
			case 2:
				nextimage = $('#fade_package li:nth-child(2)');
				break;
			case 3:
				nextimage = $('#fade_package li:nth-child(3)');
				break;
			case 4:
				nextimage = $('#fade_package li:nth-child(4)');
				break;
			case 5:
				nextimage = $('#fade_package li:nth-child(5)');
				break;
			case 6:
				nextimage = $('#fade_package li:nth-child(6)');
				break;
			case 7:
				nextimage = $('#fade_package li:nth-child(7)');
				break;
			case 8:
				nextimage = $('#fade_package li:nth-child(8)');
				break;
			case 9:
				nextimage = $('#fade_package li:nth-child(9)');
				break;
			case 10:
				nextimage = $('#fade_package li:nth-child(10)');
				break;
			case 11:
				nextimage = $('#fade_package li:nth-child(11)');
				break;
			case 12:
				nextimage = $('#fade_package li:nth-child(12)');
				break;
			case 13:
				nextimage = $('#fade_package li:nth-child(13)');
				break;
			case 14:
				nextimage = $('#fade_package li:nth-child(14)');
				break;
			case 15:
				nextimage = $('#fade_package li:nth-child(15)');
				break;
			case 16:
				nextimage = $('#fade_package li:nth-child(16)');
				break;
			default:
				nextimage = $('#fade_package li:nth-child(1)');
				break;
		}
		
		//fade OUT current list element <li>...
		$(element).fadeOut(speed);

		//fade IN next list element <li>...
		$(nextimage).fadeIn(speed, function()
		{	
			//update currentimage when fade completes...
			currentimage = nextimage;

			//set up callback delay...
			waitTime = setTimeout(goFade, dwell);
			nogo = false;
		});
	}

	//register click event listener on controlling element...
	$('.fade_trigger').click(function()
	{
		//only advance if no fade is underway...
		if (nogo == true)
		{
			return;
		}

		//immediately advance to next image...
		goFade();

		//nofollow (to get rid of dotted outlines?)...
		this.blur();
		return false;
  	});

	//callback pulse...
	function goFade()
	{
		clearTimeout(waitTime);
		waitTime = null;
		crossFade(currentimage);
	}
}

