//open encapsulation wrapper
(function(){


	//### JS configuration ####################################################

	//config object
	var config = {
	
		//time between swaps (seconds)
		//this is in addition to the load and fade time
		//so a single complete transition will be:
		//(swapseed + [load time] + fadespeed + fadespeed)
		'swapspeed' : 5,
		
		//single fade duration (seconds)
		'fadespeed' : 5,
		
		//fade resolution (steps per single fade)
		'fadesteps' : 50
		
		};


	//### [Generated] image data ##############################################

	//define image path (relative to the demo page) and SRCs 
	var path = 'http://www.maxdesign.com.au/wp-content/themes/maxdesign/images/';
	var srcs = ['image1.jpg', 'image2.jpg', 'image4.jpg', 'image3.jpg', 'image5.jpg'];

	//#########################################################################




	//get a reference to the image object
	var image = document.getElementById('swapimage');
	
	//define a counter for tracking through the srcs array
	var swapcounter = 0;
	
	//if the default image already matches the first SRC value
	//then increase the swapcounter to start with the next one
	//we'll need to test it as a substring because the image src property
	//will usually be a fully qualified URI 
	//(and it's not worth the code to qualify the array value)
	if(image.src.indexOf(path + srcs[0]) != -1)
	{
		swapcounter ++;
	}
	
	//define swap timer and fade time objects
	var swaptimer = null, fadetimer = null;
	
	//store the supported form of opacity, defaulting to none
	//since most modern browsers support the w3c syntax now
	//we only need to cater for that and the IE model
	//rather than the moz, khtml and webkit syntaxes as well
	//therefore older versions of firefox and safari that predate
	//standard syntax support will simply have no transitions
	//and just do the image swaps without them
	var otype = 'none';
	if(typeof image.style.opacity != 'undefined') 
	{ 
		otype = 'w3c'; 
	}
	else if(typeof image.filters == 'object')
	{
		otype = (image.filters.length > 0 
					&& typeof image.filters.alpha == 'object' 
					&& typeof image.filters.alpha.opacity == 'number') ? 'ie' : 'none';
	}


	
	//swaptimer start function
	function startswaptimer()
	{
		//start a timer at config speed
		//then call load and swap when it's done
		swaptimer = window.setTimeout(function() 
		{ 
			loadandswap(); 
			
		}, config.swapspeed * 1000);
	}
	
	
	//fade function 
	function fade(fadein, img, oncomplete)
	{
		//if any form of opacity is supported
		if(otype != 'none')
		{
			//create an opacity value counter
			var opacity = fadein ? 0 : 1;

			//then start the fade timer 
			fadetimer = window.setInterval(function()
			{
				//increase or reduce the opacity value
				opacity = fadein 
							? (opacity + (1 / config.fadesteps)) 
							: (opacity - (1 / config.fadesteps));

				//then floor to 2 digits so the browser doesn't have to
				opacity = (Math.floor(opacity * 100) / 100);
				
				//set the new opacity value on the image
				//using whatever method is supported
				switch(otype)
				{
					case 'ie' :
						img.filters.alpha.opacity = opacity * 100;
						break;

					default : 
						img.style.opacity = opacity;
				}
				
				//if we're fading out and the counter has reached the bottom
				//or we're fading in and it's reached the top
				if(
					(fadein && (opacity > (1 - (1 / config.fadesteps)))) 
					|| 
					(!fadein && (opacity < (0 + (1 / config.fadesteps)))) 
					)
				{
					//reset the timer 
					window.clearInterval(fadetimer);
					fadetimer = null;
					
					//round-off the opacity to max or min as applicable
					switch(otype)
					{
						case 'ie' :
							img.filters.alpha.opacity = (fadein ? 100 : 0);
							break;
		
						default : 
							img.style.opacity = (fadein ? 1 : 0);
					}
					
					//then call the callback
					oncomplete();
				}
			
			//config speed over resolution
			}, (config.fadespeed * 1000) / config.fadesteps);
		}
		
		//otherwise if no opacity fade is supported
		//wait for as long as a single fade duration
		//(so that each image appears for the same length overall)
		//then call the callback to do the next swap
		else
		{
			window.setTimeout(function()
			{
				oncomplete();
			
			}, (config.fadespeed * 1000));
		}
	}
	
	
	//image load and swap function
	function loadandswap()
	{
		//define a new image object
		var nextimage = new Image();
		
		//create its load handler
		nextimage.onload = function()
		{
			//fade-out the current image
			fade(false, image, 
			
			//and when that completes
			function()
			{
				//set the image object to the new src
				image.src = nextimage.src;
				
				//fade-in the new image
				fade(true, image, 
				
				//and when that completes
				function()
				{
					//increment the counter, resetting at the end
					if(++swapcounter == srcs.length)
					{
						swapcounter = 0;
					}
			
					//start the next swap timer
					startswaptimer();
				});
				
			});
		};
		
		//preload the next image
		nextimage.src = path + srcs[swapcounter];
	}


			
			
	//start the first timer to kick everything off
	startswaptimer();



//close encapsulation wrapper
})();