//innerfade
(function($) {

$.fn.innerfade = function(options) {

	this.each(function(){ 	
		
		var settings = {
			animationtype: 'fade',
			speed: 'normal',
			timeout: 2000,
			type: 'random',
			containerheight: 'auto',
			runningclass: 'innerfade'
		};
		
		if(options)
			$.extend(settings, options);
		
		var container = this;
		var slideCount = settings.slideContents.length;
		slideArray = new Array();
		for( var i = 0; i < settings.slideContents.length; i++ )
		{
			var tmpArray = new Array( settings.slideContents[i][0], settings.slideContents[i][1], settings.slideContents[i][2] );
			slideArray.push( tmpArray );
		}
		
		//should contain only one element, the default which would show if no javascript was present...
		elements = $(this).children();
		
		if( slideArray.length > 1 )
		{
			$.innerfade.chainload( container, slideArray, 1 );
		}
		
	
		if( settings.slideContents.length > 1 )
		{
		
			$(container).css('position', 'relative');
	
			$(container).css('height', settings.containerheight);
			
			for ( var i = 0; i < elements.length; i++ ) {
				$(elements[i]).css('z-index', String(9999+i)).css('position', 'absolute');
				$(elements[i]).hide();
			};
		

				setTimeout(function(){
					$.innerfade.next( container, settings, 1, 0);
				}, settings.timeout);
				$(elements[0]).show();

		}
		
	});
};


$.innerfade = function() {}

$.innerfade.chainload = function( container, slideArray, current )
{
	if( current <= slideArray.length-1 )
	{
		$(container).append('<li class="slideImage"></li>');
		els = $(container).children();
		//append the latest slide
		//alert(slideArray[current][1]+","+slideArray[current][2]);
		$(els[els.length-1]).html( slideArray[current][0] );
		$(els[els.length-1]).css("display", "block");
		$(els[els.length-1]).css("position", "absolute");
		$(els[els.length-1]).data( "w", slideArray[current][1] );
		$(els[els.length-1]).data( "l", slideArray[current][2] );
	
		$(els[els.length-1]).hide();
		//$(els[els.length-1]).append("<span></span>");
		//$(els[els.length-1]).children("span").text( $(els[els.length-1]).children("img").attr("alt") );
		//if an image is found in the current slide, defer adding the next slide until this slide is loaded. Otherwise, load the next
		//so the first case will be the one fired for most slideshows.
		if( $(els[els.length-1]).find( "img" ) )
		{		
			$(els[els.length-1]).show();
			$(els[els.length-1]).find( "img" ).load( function() { $.innerfade.chainload( container, slideArray, current + 1) } );
		}
		else
		{
			$.innerfade.chainload( container, slideArray, current + 1);
		}
	}
}
$.innerfade.next = function ( slideshowContainer, settings, current, last) {

	//get accurate list of container's children, based on # successfully loaded.
	var elements = $(slideshowContainer).children();
	
	for( var i = 0; i < elements.length; i++ )
	{
	
				w = $(elements[i]).data( "w" );
				l = $(elements[i]).data( "l" );
					
				z = 9999 + i;
				if( w == undefined )
				{
					w = 0;
				}
				if( l == undefined )
				{
					l = 0;
				}
				$(elements[i]).css('z-index', z ).css('position', 'absolute').css("width", w + "px").css("left", l + "px");
				
				
				if( current != 0 && i >= current )
				{
					$(elements[i]).hide();
				}
				
			};

	if( elements.length > 1 )
	{
		
			
		//$(elements[last]).fadeOut(settings.speed);
		//alert( $(elements[current]).data( "w" ) );
		if( current != 0 )
		{
			$(elements[current]).fadeIn(settings.speed);
		}
		else
		{
			for( i = 1; i < elements.length; i++ )
			{
				$(elements[i]).fadeOut(settings.speed);
				$(elements[current]).fadeIn(settings.speed);
			}
		}	

		if ( ( current + 1 ) < elements.length ) {
			current = current + 1;
			last = current - 1;
		} else {
			current = 0;
			last = elements.length - 1;
		};

		
		setTimeout((function(){$.innerfade.next(slideshowContainer, settings, current, last);}), settings.timeout);
		
	}
	else
		{
			
			setTimeout(function(){
					$.innerfade.next( slideshowContainer, settings, 1, 0);
				}, 1000);
		}
};
})(jQuery);

//the first element in this list needs to be included explicitly in the HTML, for more graceful degrading...
var contents = new Array(
['<img src="/image/front/image1.jpg" width="948" height="439" alt="Tyne Replogle">', 948, 0],
['<img src="/image/front/image5.jpg" width="195" height="439" alt="Tyne and the Fastlyne">', 195, 0],
['<img src="/image/front/image8.jpg" width="158" height="439" alt="Tyne and the Fastlyne">', 158, 790],
['<img src="/image/front/image6.jpg" width="257" height="439" alt="Tyne and the Fastlyne">', 257, 203],
['<img src="/image/front/image7.jpg" width="313" height="439" alt="Tyne and the Fastlyne">', 312, 469],
['<img src="/image/front/image2.jpg" width="195" height="439" alt="Tyne Replogle">', 195, 0],
['<img src="/image/front/image3.jpg" width="158" height="439" alt="Tyne Replogle">', 158, 790],
['<img src="/image/front/image4.jpg" width="577" height="439" alt="Tyne Replogle">', 577, 204]
);

$(document).ready(
	function(){

		 $(document).pngFix(); 
  // Every six seconds execute the switchSlide() function
  $('ul#slideshow').innerfade(
  {
		speed: 2000,
		timeout: 8000,
		type: 'sequence',
		containerheight: '439px',
		slideContents: contents
	});
	$(".video").hide();
	$("#video1").show();
	$(".videothumbs img").click( function(){
	blockid = $(this).attr("rel");
	$(".video").hide();
;
	$("#video"+blockid).show();
});	

	
});