/* =========================================================
// Updated 2009-10-09 by Rob Tyler
// jquery.innerFadePlus.js
// adapted from jquery.innerfade.js
// -------------------------------
// The code now supports a set of links that can be used to
// move between the inidividual frames that are being 
// animated. To so this place a links for every frame in a
// contained marked #innerFade_links
// ========================================================= 
// jquery.innerfade.js
// Datum: 2008-02-14
// Firma: Medienfreunde Hofmann & Baldes GbR
// Author: Torsten Baldes
// Mail: t.baldes@medienfreunde.com
// Web: http://medienfreunde.com
// based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
// and Ralf S. Engelschall http://trainofthoughts.org/
// ========================================================= */

(function($) {
	$.fn.innerFadePlus = function(options) {
			return this.each(function() {   
					$.innerFadePlus ( this, options );
			});
	};
	// Define a global timer object so we're not using one using local
	// to function where its used. This will prevent multiple timers running
	var fadeTimer			= 0;
	var lastFrame			= 0;
	var currentFrame	= 0;

	$.innerFadePlus = function ( container, options ) {
		var settings = {
			'linksContainer':				'#innerFadePlus_links',
			'textContainer':				'#innerFadePlus_text',
			'animType':   					'fade',
			'animSpeed':     	 		  '500',
			'frameType':      		  'sequence',
			'frameDuration':  		  '5000',
			'frameLayerPosition':		'top',
			'frameLayerWidth':			'auto',
			'frameLayerHeight':			'auto',
			'frameLayerColour':			'#fff',
			'frameLayerBgColour':		'#000',
			'frameLayerOpacity':		'1',
			'frameLayerAnimType':		'slide',
			'frameLayerAnimSpeed':	'500',
			'containerHeight': 			'auto',
			'runningclass':   		  'innerFadePlus',
			'children':       			 null,
			'onPreRender':          function(image, content) {}, // fires just before the next image is rendered
			'onLoadEach':           function(image, content) {} // fires during set up
		};
		
		if (options)
				$.extend(settings, options);
		// Get the children of the container so we 
		// have the frames that we're animating
		if (settings.children === null)
				var elements = $(container).children();
		else
				var elements = $(container).children(settings.children);
				

		// Get a list of all the links in the linksContainer
		var link_elements = $(settings.linksContainer).children(settings.children);
		var layer_elements = $(settings.textContainer).children(settings.children);

		if ( elements.length > 1 ) {
				// Set the container size so not all the frames are hidden
				$(container).css('position', 'relative').css('height', settings.containerHeight).addClass(settings.runningclass);
				// Hide the containers for the lines and the text so they don't affect the layout
				$( settings.linksContainer ).css ( 'height', 0 );
				$( settings.textContainer ).css ( 'height', 0 );
				
				for (var i = 0; i < elements.length; i++) {
						$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
				};
				// Add an id to each of the links in the linksContainer
				// so we can reference it later and extract the frame id
				for (var i = 0; i < link_elements.length; i++) {
						$(link_elements[i]).attr( 'id', settings.linksContainer + '_' + i ).show();
				};

				// Get the position of the first elements so we can position the text layer
				var containerTop		= $( container ).position ( ).top;
				var containerBottom = containerTop + $( container ).outerHeight ( true );

				// Add an id to each of the links in the linksContainer
				// so we can reference it later and extract the frame id
				// Hide the elens too as we don't want them displayed
				for (var i = 0; i < layer_elements.length; i++) {
						var element_id = settings.textContainer + '_' + i;
						$(layer_elements[i]).attr ( 'id', element_id );
						$(layer_elements[i]).css ( 'z-index', String ( layer_elements.length + 9) ).css ( 'position', 'absolute' ).hide ( );
						$(layer_elements[i]).css ( 'width', settings.frameLayerWidth ).css ( 'height', settings.frameLayerHeight );
						$(layer_elements[i]).css ( 'color', settings.frameLayerColour ).css ( 'background-color', settings.frameLayerBgColour ).css ( 'opacity', settings.frameLayerOpacity );

						if ( settings.frameLayerPosition == 'bottom' )
						{
							$(layer_elements[i]).css ( 'bottom', containerBottom );
						}
						else
						{
							$(layer_elements[i]).css ( 'top', containerTop );
						}
				};
				
				for(var i = 0; i < elements.length; i++)
					settings.onLoadEach(elements[i], layer_elements[i]);

				// Kick off the timer for each of the frame types
				if (settings.frameType == "random") {
						lastFrame = Math.floor ( Math.random () * ( elements.length ) );
						do { 
								currentFrame = Math.floor ( Math.random ( ) * ( elements.length ) );
						} while ( lastFrame == currentFrame );             
						$.innerFadePlus.setInitialTimer ( elements, settings, link_elements, layer_elements );
				} else if ( settings.frameType == 'random_start' ) {
						settings.frameType = 'sequence';
						lastFrame			= Math.floor ( Math.random () * ( elements.length ) );
						currentFrame	= (currentFrame + 1) % elements.length;
						$.innerFadePlus.setInitialTimer ( elements, settings, link_elements, layer_elements );
				}	else {
						currentFrame = 0;//1; // REALLY?
						$.innerFadePlus.setInitialTimer ( elements, settings, link_elements, layer_elements );
				}
		}

		// Add an onclick event for each of the links in the linkContainer
		$(settings.linksContainer + ' > a').click(function()
		{
			var kiddies = $(this).parent().children();
			var thisId	= $(this).attr( 'id' );
			var frameNo	= 0;
			// Work out which of the links have been clicked
			// so we can extract the frame number from the link's id
			for ( var i = 0; i < kiddies.length; i++ )
			{
				var childId = $(kiddies[i]).attr( 'id' );
				if ( childId == thisId )
				{
					frameNo = i;
				}
			};

			// Update the frame numbers and clear the
			// time if there is one
			lastFrame			= currentFrame;
			currentFrame	= frameNo;

			if ( fadeTimer )
			{
				clearTimeout ( fadeTimer );
			}
			
			// Animate the new current frame
			$.innerFadePlus.animFrame ( elements, settings, link_elements, layer_elements );
			return false;
		});
	};

	// Show the irst frame and set the inital timer when the page loads
	$.innerFadePlus.setInitialTimer = function ( elements, settings, link_elements, layer_elements )
	{
		// Display the current frame
		$(elements[lastFrame]).show();
		// Chenge the link is showing the current frame
		$(link_elements[lastFrame]).addClass( 'current' );
		
		settings.onPreRender(elements[lastFrame], layer_elements[lastFrame]);
		
		// Show the layer
		if ( settings.frameLayerAnimType == 'slide' ) {
			$(layer_elements[lastFrame]).slideDown ( settings.frameLayerAnimSpeed );
		}
		else if ( settings.frameLayerAnimType == 'fade' )
		{
			$(layer_elements[lastFrame]).fadeIn ( settings.frameLayerAnimSpeed, function ( ) {
				if ( $(this)[0].style.removeAttribute ) {
					$(this)[0].style.removeAttribute ( 'filter' );
				}
			});
		}
		else
		{
			$( layer_elements[lastFrame] ).show ( );
		}

		// Set the timer to execute the animation for the next frame
		fadeTimer = setTimeout((function() {
				$.innerFadePlus.nextFrame ( elements, settings, link_elements, layer_elements );
		}), settings.frameDuration );
	};

	// Work out what the next frame needs to be
	$.innerFadePlus.nextFrame = function ( elements, settings, link_elements, layer_elements )
	{
		// Set the last frame to the current one so we can fade it out properly
		lastFrame = currentFrame;

		if (settings.frameType == "random") {
			while (currentFrame == lastFrame)
				currentFrame = Math.floor(Math.random() * elements.length);
		} else {
			if ( currentFrame < elements.length - 1 ) {
					currentFrame++;
			} else {
					currentFrame = 0;
			}
		}

		$.innerFadePlus.animFrame ( elements, settings, link_elements, layer_elements );
	};

	
	$.innerFadePlus.animFrame = function ( elements, settings, link_elements, layer_elements )
	// Work out what animation we're doing between the frames
	// and set the timer for the naext frame to be shown
	{
		var layer_element = $(layer_elements[currentFrame]);
		
		settings.onPreRender(elements[currentFrame], layer_elements[currentFrame]);
		
		// Clear the animimations from the elements
		// so we don't get a load stacked up together
		$(elements[currentFrame]).dequeue();
		$(elements[lastFrame]).dequeue();

		// Chenge the link is showing the current frame
		$(link_elements[lastFrame]).removeClass( 'current' );
		$(link_elements[currentFrame]).addClass( 'current' );

		$('#current_frame').html("'" + currentFrame + "'");
		$('#last_frame').html("'" + lastFrame + "'");

		// Action each of the animation types. default is hide/show
		// The frame animations need to happen concurrently, so any
		// content does not disassappear, but has a transition from one to
		// another. The layer animation does have to happen sequentially
		if ( settings.animType == 'slide' ) {
			$.innerFadePlus.animLayer ( settings, layer_elements );
			$(elements[lastFrame]).slideUp(settings.animSpeed);
			$(elements[currentFrame]).slideDown(settings.animSpeed);
		} else if ( settings.animType == 'fade' ) {
			$.innerFadePlus.animLayer ( settings, layer_elements );
			$(elements[lastFrame]).fadeOut(settings.animSpeed);
			$(elements[currentFrame]).fadeIn(settings.animSpeed, function() {
				if($(this)[0].style.removeAttribute){
					$(this)[0].style.removeAttribute('filter');
				}
			});
		} else {
			$.innerFadePlus.animLayer ( settings, layer_elements );
			$(elements[lastFrame]).hide();
			$(elements[currentFrame]).show();
		}

		//$(layer_elements[currentFrame]).addClass( 'current' );
		
		// Set the timer to animate the next frame
		fadeTimer = setTimeout((function() {
				$.innerFadePlus.nextFrame ( elements, settings, link_elements, layer_elements );
		}), settings.frameDuration );
	};

	// Animate the text alayer
	$.innerFadePlus.animLayer = function ( settings, layer_elements )
	{
		if ( settings.frameLayerAnimType == 'slide' ) {
			$(layer_elements[lastFrame]).slideUp ( settings.frameLayerAnimSpeed,
				function ( ) 
				{
					$(layer_elements[currentFrame]).slideDown ( settings.frameLayerAnimSpeed );
				}	
			 );
		}
		else if ( settings.frameLayerAnimType == 'fade' )
		{
			$( layer_elements[lastFrame] ).fadeOut ( settings.frameLayerAnimSpeed,
				function ( )
				{
					$(layer_elements[currentFrame]).fadeIn ( settings.frameLayerAnimSpeed, function ( ) {
						if ( $(this)[0].style.removeAttribute ) {
							$(this)[0].style.removeAttribute ( 'filter' );
						}
					});
				}
			);
		}
		else
		{
			$( layer_elements[currentFrame] ).show ( );
			$( layer_elements[lastFrame] ).hide ( );
		}
	};


})(jQuery);