/* google api load */
google.setOnLoadCallback(function() {
	/* mootools secure */
	(function($){
		/* dom ready event */
		window.addEvent('domready', function() {
/* ########## */

/**
 * Class imagePuzzleFader
 * realized with mootools 1.2.4
 * @author Markus Brunner <markus.brunner(at)netformic(dot)de>
 */
var imagePuzzleFader = new Class({
	Implements: [Events,Options,Chain],
	layers: null,
	currentLayer: 0,
	nextLayer: 1,
	lastLayer: 0,
	currentIter: 0,
	itemChain: null,
	options: {
		startingID: 'imagepuzzle',
		layerClass: 'imagepuzzle-layer',
		layerClassWithPrefix: '',
		puzzleClass: 'imagepuzzle-item',
		puzzleClassWithPrefix: '',
		numberOfImageItemsPerLayer: 8,
		enableChaining: false,
		changingOrder: null,
		maxIter: 50,
		fadeTimeImage: 2000,
		delayTimeImage: 2000,
		delayTimeLayer: 10000,
		startDelay: 1000,
		startingLayer: 0
	},
	initialize: function(options){
		// set options
		this.setOptions(options);
		
		// chaining obj
		this.itemChain = new Chain();
		
		// set classNames for selection
		this.options.layerClassWithPrefix = '.'+this.options.layerClass;
		this.options.puzzleClassWithPrefix = '.'+this.options.puzzleClass;
		
		// set iterators
		this.currentLayer = this.options.startingLayer;
		this.nextLayer = this.currentLayer+1;
		this.currentIter = 0;
		
		// get layers
		this.layers = $$(this.options.layerClassWithPrefix);
		
		// do Layer fade iteration
		if($defined(this.layers) && this.layers.length > 1) {
			(function(){ 
				this.doLayerFadeIteration();
			}).delay(this.options.startDelay,this);
		}
	},
	doLayerFadeIteration: function(){
		// if max iteration limit is not reached, do fade iteration
		if(this.currentIter < this.options.maxIter) {
			// layer fade
			this.doLayerFade();
			
			// set lastLayer and currentIter for camparison with maxIter for next iteration
			this.currentIter = this.currentIter+1;
			this.lastLayer = this.currentLayer;
			this.currentLayer = this.currentLayer+1;
			this.nextLayer = this.nextLayer+1;
			
			// delayed fade
			(function(){ 
				this.doLayerFadeIteration();
			}).delay(this.options.delayTimeLayer,this);
		}
	},
	doLayerFade: function(){
		// determine last layer
		if(!$defined(this.layers[this.lastLayer])) {
			this.lastLayer = 0;
		}
		
		// determine current layer
		if(!$defined(this.layers[this.currentLayer])) {
			this.currentLayer = 0;
		}
		
		// determine next layer
		if(!$defined(this.layers[this.nextLayer])) {
			this.nextLayer = 0;
		}
		
		// do fade
		if($defined(this.layers[this.currentLayer]) && $defined(this.layers[this.nextLayer]) && this.currentLayer != this.nextLayer) {
		
			// get last image items
			var imageItemsToFadeLast = this.layers[this.lastLayer].getChildren(this.options.puzzleClassWithPrefix);
		
			// get current image items
			var imageItemsToFade = this.layers[this.currentLayer].getChildren(this.options.puzzleClassWithPrefix);
			
			// get next image items
			var imageItemsToFadeNext = this.layers[this.nextLayer].getChildren(this.options.puzzleClassWithPrefix);
			
			// set layer indizes
			this.layers[this.lastLayer].setStyles({'z-index':'0'});
			imageItemsToFadeLast.setStyles({'z-index':'0','opacity':'1'});
			this.layers[this.currentLayer].setStyles({'z-index':'20'});
			imageItemsToFade.setStyles({'z-index':'20','opacity':'1'});
			this.layers[this.nextLayer].setStyles({'z-index':'10'});
			imageItemsToFadeNext.setStyles({'z-index':'20','opacity':'1'});
			
			// do image fade
			if($defined(this.options.changingOrder)) {
				var temp_changingOrder = this.options.changingOrder[this.currentLayer];
			} else {
				var temp_changingOrder = new Array();
				for(i=0; i<this.options.numberOfImageItemsPerLayer; i++) {
					temp_changingOrder[i] = i;
				}
				temp_changingOrder.shuffle();
			}
			
			temp_changingOrder.each((function(item, index){
				if(this.options.enableChaining === true) {
					// chained item fades
					this.itemChain.chain((function(){	
						var imageFadeTransition = new Fx.Tween(this.imageItemsToFade[item], {duration: this.obj.options.fadeTimeImage});
						var imageFadeTransitionNext = new Fx.Tween(this.imageItemsToFadeNext[item], {duration: this.obj.options.fadeTimeImage, onComplete: (function(){this.obj.itemChain.callChain();}).bind({obj:this.obj})});
						imageFadeTransition.start('opacity','1','0');
						imageFadeTransitionNext.start('opacity','0','1');
					}).bind({obj:this, imageItemsToFade:imageItemsToFade, imageItemsToFadeNext:imageItemsToFadeNext, item:item}));
				} else {
					// unchained item fades
					(function(){ 
						this.obj.doItemFade(this.imageItemsToFade, this.imageItemsToFadeNext, this.item);
					}).delay(this.options.delayTimeImage,{obj:this, imageItemsToFade:imageItemsToFade, imageItemsToFadeNext:imageItemsToFadeNext, item:item});
				}
			}).bind(this));
			this.itemChain.callChain();
		}
	},
	doItemFade: function(imageItemsToFade, imageItemsToFadeNext, item){	
		var imageFadeTransition = new Fx.Tween(imageItemsToFade[item], {duration: this.options.fadeTimeImage});
		var imageFadeTransitionNext = new Fx.Tween(imageItemsToFadeNext[item], {duration: this.options.fadeTimeImage});	
		imageFadeTransition.start('opacity','1','0');
		imageFadeTransitionNext.start('opacity','0','1');
	},
	complete: function(){
		 this.fireEvent('complete');
	}
});

/**
 * initialization of imagePuzzleFader
 */
var myImagePuzzleFader = new imagePuzzleFader({
	startingID: 'imagepuzzle',
	layerClass: 'imagepuzzle-layer',
	layerClassWithPrefix: '',
	puzzleClass: 'imagepuzzle-item',
	puzzleClassWithPrefix: '',
	numberOfImageItemsPerLayer: 8,
	changingOrder: null,
	maxIter: 24,
	startDelay: 1000,
	fadeTimeImage: 2000,
	delayTimeImage: 2000,
	enableChaining: false,
	delayTimeLayer: 10000,
	/*
	enableChaining: true,
	delayTimeLayer: 20000,
	*/
	startingLayer: 0
});
/* ########## */
		});
	})(document.id);
});