// randomeFadeIcons - Rotates images at random intervals from a table grid
// -----------
// By: David Rugendyke
// Ver: 0.1


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

	if(randomIcons) {
		// We need an array shuffler extension for this class
		Array.implement({
			shuffle: function() {
				//destination array
				for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
				return this;
			}
		});
		// Initialise the image fade set
		var fade = new randomeFadeIcons();
	}

});


// Icon Fade Class
var randomeFadeIcons = new Class({
	
	// Class vars
	options: {
		iconShowCount: 0,
		iconCellArray: 0,
		iconCellCycleArray: 0,
		iconImageArray: 0,
		iconImageCycleArray: 0,
		fadeEachDelay: 0,
		currentCell: null,
		currentImage: null
	},
	
	// Initialise the class
    initialize: function(){
		
		// Defaults
		this.iconShowCount = 6;
		this.fadeSpeed = 2000;
		this.fadeEachDelay = 1000;
		this.fadeCycleDelay = (this.iconShowCount*this.fadeEachDelay);
		this.fadeCycleSetDelay = 11000;
		this.iconCellCycleArray = new Array();
		this.iconImageArray = randomIcons;
		this.iconImageCycleArray = new Array();

		// Get a list of the cells
		this.iconCellArray = $$('#randomIconTable div');
		this.iconCellArray.each(function(cell) {$(cell).setStyle('opacity', 0); });
		
		// Start
		this.fadeCycle();
		
    },
	
	// The main logic controller
	fadeCycle: function() {
		
		// Select the random cells and images to use
		this.selectIconCellsAndImages();
		
		// Now cycle through each and fade them in one at a time
		for(i=0; i<this.iconCellCycleArray.length; i++) {
			// Calc fade times
			var cellFadeTime = this.fadeEachDelay * i;
			// Start fade
			var currentCell = this.iconCellCycleArray[i];
			var currentImage = this.iconImageCycleArray[i];
			var timer = this.fadeImageCellIn.delay(cellFadeTime, this, [currentCell,currentImage]);
		}
		
		// Now cycle
		var cycle = this.fadeCycle.delay(this.fadeCycleSetDelay, this);
		
	},
	
	// Selects a group of icon cells to use for this display
	selectIconCellsAndImages: function() {
		
		// Shuffle the table cell elements
		this.iconCellArray.shuffle();
		this.iconCellCycleArray = Array();
		var count = 0;
		var cycleCount = 0;
		// Select our random ones and assign them images
		while(this.iconCellCycleArray.length < this.iconShowCount) {

			var cell = this.iconCellArray[count];
			
			if(cell) {
				// Only use cells not currently in use by a cycle
				if($(cell).getStyle('opacity') == 0) {
					// Assign the random table cell
					this.iconCellCycleArray[cycleCount] = cell;
					cycleCount++;
				}
			}else{
				count = 0;	
			}
			
			count++;
		}
		
		// Shuffle the available images
		this.iconImageArray.shuffle();
		this.iconImageCycleArray = Array();
		
		// Select our random ones and assign them images
		for(i=0; i<this.iconShowCount; i++) {
			// Assign the random image
			this.iconImageCycleArray[i] = this.iconImageArray[i];
		}
		
	},
	
	// Assign and fade images in then out from the cells
	fadeImageCellIn: function(cell, image) {
		
		var Ob = this;

		// Create an image element to insert
		var image = new Element('img', { 'src': 'images/icons/'+image});
		// Hide the image before we insert
		$(cell).setStyle('opacity', 0);
		// Wipe the cell
		$(cell).empty();
		// Put the image in there
		$(cell).grab(image);
		// Now fade in
		var myFxIn = new Fx.Tween(cell, { duration: Ob.fadeSpeed,
								  onComplete: function(){ 
											// Fade out when required
											Ob.fadeImageCellOut.delay(Ob.fadeCycleDelay, Ob, [cell]);
									  } 
								 }).start('opacity', 1);

		},
		
	// Fade out the image
	fadeImageCellOut: function(cell) {
		
		var Ob = this;
		
		var myFxOut = new Fx.Tween(cell, { duration: Ob.fadeSpeed}).start('opacity', 0);
		
	}
		

	
});