// cycleFade - Fades a bunch of images randomly using an array generated in javascript on the page
// -----------
// By: David Rugendyke
// Ver: 0.1


window.addEvent('domready', function() {

	// Initialise the set
	var fade = new cycleFade();
});


// Fade the set class
var cycleFade = new Class({
	
	// Class vars
	options: {
		fadeSpeed: 0,
		fadePauseBetween: 0,
		fadeImageArray: null,
		fadeDivArray: null,
		fadeDivIgnore: null,
		fadeIgnore: null,
		fadeRun: 0,
		divArray: null,
		imageArray: null
	},
	
	// Initialise the class
    initialize: function(){
		
		// Defaults
		this.fadeRotateSpeed = 1200;
		this.fadePauseBetween = 350;
		// Fadearray is created in a seperate js file 
		this.fadeImageArray = Array();

		this.fadeMaxCycles = 2;
		this.fadeMaxCyclesCount = 0;
		
		this.fadeDivArray = $$('#fadeBlock div');
		// DivIgnore refers to elements to not fade
		this.fadeDivIgnore = ignoreArray;
		
		this.fadeIgnore = false;
		this.cycleFadeFilter();
		//this.cycleFadeInsertImages(this.fadeDivArray);
    },
	
	
	// The initial function which fades each image in from left to right
	cycleFadeFilter: function() {
		
		var Ob = this;
		var divArray = this.fadeDivArray;
		
		// Create a new array and remove the divs to be ignored if its on
		if(this.fadeIgnore == true) {
			// Now loop thru and remove the ones we want to ignore
			this.fadeDivIgnore.each(function(item, index){
					var element = $(item);
					divArray.erase(element)
			});						   			   
		}
		
		this.cycleFadeInsertImages(divArray);
		
	},
	
	// Insert images into the available divs
	cycleFadeInsertImages: function(divArray) {
		
		var Ob = this;
		var imageArray = new Array();	
		var count = 0;
		
		this.fadeImageArray = fadeTreeArray[this.fadeMaxCyclesCount];
	
		
		// Count the loop cycles
		this.fadeMaxCyclesCount++;
		
		
		while(imageArray.length < divArray.length) {
		
			var image = this.fadeImageArray[count];
			// Check for duplicates - also if the image array has less elements than div array, it will loop forever, check for that
			if(!imageArray.contains(image) ||  imageArray.length >=  this.fadeImageArray.length) {
					// Add the image
					imageArray.push(image);
			}
			
			count++;
			
		}
		
		
		
		
		this.divArray = divArray;
		this.imageArray = imageArray;
		
		this.cycleFadeInEach(0);
				
	},
	
	// Fade an image in
	cycleFadeInEach: function(index) {
			
			var Ob = this;
			
			var divArray = this.divArray;
			var imageArray = this.imageArray;
			
			if(!index) { index = 0; }
		
			// Loop thru the remaining items 
			if(index <  divArray.length) {
				
				
				var elId = $(divArray[index]).get('id');
			
				// They are always hidden when the page loads initially
				if($(elId).getStyle('display') == 'none') {
						$(elId).setStyles({display: 'block', opacity: 0});
				}

				if(this.fadeIgnore == true || !this.fadeDivIgnore.contains(elId)) {
							
							$(elId).set('html', '<img src="'+imagePath+imageArray[index]+'" alt="Kitchen Connection" />');
					}

			
				var myFxOut = new Fx.Tween($(divArray[index]),	{ 
												  transition: Fx.Transitions.Quad.easeIn,duration: Ob.fadePauseBetween,
												  onComplete: function(){ 
											  		  
													  index++;
													  Ob.cycleFadeInEach(index);
											  
										  } }).start('opacity', 1);
	
			
			}else{
				
				// This version only cycles through a set number of times before stopping.
				if(this.fadeMaxCyclesCount >= this.fadeMaxCycles) {
						return false;
				}
			
				// Loops finished, delay it and start fading them out
				this.cycleFadeOutEach.delay(this.fadeRotateSpeed, this);
				
			}
	},
	
	// Fade an image out
	cycleFadeOutEach: function(index) {
		
		
			
			var Ob = this;
			
			var divArray = this.divArray;
			var imageArray = this.imageArray;
			
			if(!index) { index = 0; }
		
			// Loop thru the remaining items 
			if(index <  divArray.length) {
				
				
				var elId = $(divArray[index]).get('id');
				
							
				// They are always hidden when the page loads initially
				if(!this.fadeDivIgnore.contains(elId)) {
							
						var myFxOut = new Fx.Tween($(divArray[index]),	{ 
												  transition: Fx.Transitions.Quad.easeOut,duration: Ob.fadePauseBetween,
												  onComplete: function(){ 
											  		  
													  index++;
													  Ob.cycleFadeOutEach(index);
											  
										  } }).start('opacity', 0);
					}else{
						  index++;
						  this.cycleFadeOutEach(index);
					}


			}else{
			
				// Loops finished, delay it and start again
				 this.cycleFadeFilter();
				
			}
	}
	
	
	
	
}) // End class