/*
Showcase - a Mootools remix of: Image Cross Fader Redux

License:
 MIT-style license.

Credits:
 Inspired by "Image Cross Fader Redux" script By steve@slayeroffice.com ( <http://slayeroffice.com> )
 found here: <http://slayeroffice.com/code/imageCrossFade/xfade2.html>
 and Richard Mannings' "Chaining Functions in Mootools for Dynamic Text Effects" 
 found here: <http://richardimanning.com/wpblog/2009/02/chaining-functions-in-mootools-for-dynamic-text-effects/>
*/ 
var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);
DEBUG=0;

// display variables
var fadeDuration	= 1100;
var displaytime		= 1650;
var whitetime		= 0.3;

var showcase = $('showcase');

var counter = 0;																						if(DEBUG==1)console.log("init     counter:"+counter);

var ml_active		= '380px';	// .text is hidden
var ml_inactive		= '0';		// .text is visible

var fnChain = new Chain();

var teaserElements = $$('.teaserElement');																if(DEBUG==1)console.log("init     teaserElements:"+teaserElements.length);
var teaserImgs;

function xfade( teaserElement, teaserImgs ) {
	
		teaserElement.setStyle('display', 'block');
		teaserElement.fade('in');
		
		var fnChain = new Chain();
		teaserImgs.each(function(teaserImg, index) {
			teaserImg.setStyles({
				'display': 'block', 
				'opacity': 0 
			});
			teaserImg.set('morph', {
				duration: fadeDuration,
				onComplete: function(){
					(function(){fnChain.callChain();}).delay( displaytime );
				}
			});
			fnChain.chain(
				function(){teaserImg.morph({
						opacity: 1
				});
			});
		});
		fnChain.callChain();
}

function showShowcase( teaserElement ) {
	if ( $('showcase-loader') ) $('showcase-loader').setStyles({'display':'none'});

	teaserImgs = $( teaserElement ).getElements('.teaserImg img');									if(DEBUG==1)console.log("init     teaserImgs:"+teaserImgs.length);

	var x = new Chain();
	var rightslide	= new Fx.Morph(teaserElement.getElement('.text'),{duration: displaytime, transition: Fx.Transitions.Quart.easeOut, wait:true});
	var one		= 	function(){
						xfade( teaserElement, teaserImgs );
					};
	var two		= 	function(){ rightslide.start({'margin-left':ml_inactive}); };
	var three	= 	function(){ rightslide.start({'margin-left':ml_active});	};
	var four	=	function(){ 
						teaserElement.fade('out');
					};
	var five	= 	function(){
						counter++;																	if(DEBUG==1)console.log("     counter:"+counter);
						// and now we start to recurse...
						// -> To understand recursion, you must understand recursion!
						startShowcase( counter ); 
					};
	
	x.chain(one);
	x.chain(two);
	x.chain(three);
	x.chain(four);
	x.chain(five);

	x.callChain();
	x.callChain.delay(1*displaytime, x);
	x.callChain.delay((teaserImgs.length-0.3)*(displaytime+fadeDuration), x);
	x.callChain.delay(teaserImgs.length*(displaytime+fadeDuration), x);
	x.callChain.delay((teaserImgs.length+whitetime)*(displaytime+fadeDuration), x);

}

function startShowcase() {
	if ( showcase ) {
		// reset counter for recursion loop
		if (counter > teaserElements.length-1) { counter = 0; }
	

		teaserElements.each(function( teaserElement, index ) {
			if( index == counter ) {
				teaserImgs = $( teaserElement ).getElements('.teaserImg img');
				showShowcase( teaserElement );
			} else {
				teaserElement.setStyle('display', 'none');
			}
		});
	}
}

window.addEvent('domready', function(){
	if( Browser.Engine.trident4!=true ) {
		if ( showcase ) {
			// set position:absolute for Showcase images
			showcase.getElements('.teaserElement').each(function(i) {
				i.setStyle('display', 'none');
			});
			showcase.getElements('.teaserImg img').each(function(i) {
				i.setStyles({
					'display':'none',
					'position':'absolute',
					'top': '0',
					'left':'0'
				});
			});
			// prepare elements for showcase useage:
			// move textarea
			showcase.getElements('.text').each(function(i) {
				i.setStyles({'margin-left':ml_active});
			});
		}
	}
});

window.addEvent('load', function(){
		startShowcase();
});