// imageFadeSet - Handy image rotator which does cross fades on a set of images
// -----------
// By: David Rugendyke
// Ver: 0.1


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

	// Initialise the image fade set
	var fade = new imageFadeSet();

});


// Image Fade Rotator Class
var imageFadeSet = new Class({
	
	// Class vars
	options: {
		fadeSpeed: 0,
		rotateSpeed: 0,
		imageSet: null,
		imageCount: 0,
		imageIndex: 0,
		imageSwitches: null,
		switchActive: null,
		myFxOut: null,
		myFxIn: null
	},
	
	// Initialise the class
    initialize: function(){
		
		// Defaults
		this.fadeSpeed = 3000;
		this.rotateSpeed = 4000;
		this.imageCount = 0;
		this.switchActive = false;
		
		// Now get all the images to fade and apply the correct styles to them so that they overlap each other
		this.imageStyles();
		// If we have some to fade, lets start the cycle
		if(this.imageCount > 0) {
			// Now start crossfading them
			this.imageFadeCycle.delay(this.rotateSpeed, this);
		}
		
		// Get the image switch buttons
		this.imageButtons();
    },
	
	// Init the image switch buttons
	imageButtons: function() {
		
		var Ob = this;
		this.imageSwitches = $$('#image-switch li'); 	
		var count = 0;
		
		this.imageSwitches.each(function(elSwitch) {
			
				$(elSwitch).addEvents({
					// Stop the cycle, show switch image
					'mouseenter': function(){
						Ob.imageIndex = $(this).get('count');
						Ob.imageShowSelected(Ob.imageSet[Ob.imageIndex]);	
					},
					// Active the cycle again now
					'mouseleave': function(){
						 $('heroRollOver').setStyle('display', 'none');
					}
				});

			count++;
		});
				
	},
	
	// Adds styles to all the images in the set
	imageStyles: function(){

		var Ob = this;
		// Get all the images in the container div
		this.imageSet = $$('#heroes .fadeOver'); 
		
		// Attach events to each main menu
		this.imageSet.each(function(elMenu) {
				
			// Now hide each one except the first and apply the styles to them so that they all appear in the same position
			$(elMenu).setStyles({
				position: 'absolute',
				top: 0,
				left: 0,
				display: 'block'
			});
			
			if(Ob.imageCount != 0) {
				$(elMenu).setStyle('opacity', 0); 	
			}
				
			Ob.imageCount++;	
		}); // End Menu Loop
	
	},
	
	// Hides all the the cycle but one to show
	imageShowSelected: function(imageEl) {
		
		// Get the background image
		var bg = $(imageEl).getStyle('background-image');
	    $('heroRollOver').setStyles({'background-image': bg, display: 'block', 'z-index':1});
		
	},
	
	imageFadeCycle: function() {
		
		var Ob = this;
		
		//alert(Ob.switchActive);
		
		// If a mouse is over a switch, stop the cycle
		if(Ob.switchActive == true) {
			return true;
		}

		// Get the current and next image index
		var nextIndex;
		var currentIndex;
		// Set the current image array index or set the default to the start if it doesnt exist yet
		if(Ob.imageIndex) { currentIndex = Ob.imageIndex; }
					 else { currentIndex = 0; }
		
		var nextImageIndex = currentIndex + 1;
		// Now get the next index
		if(Ob.imageSet[nextImageIndex]) {
			nextIndex = nextImageIndex;
		}else{
			nextIndex = 0;	
		}

		Ob.myFxOut = new Fx.Tween(this.imageSet[currentIndex],	{  transition: Fx.Transitions.Quad.easeIn,duration: Ob.fadeSpeed }).start('opacity', 0);
	
		Ob.myFxIn = new Fx.Tween(this.imageSet[nextIndex], 
									{ duration: Ob.fadeSpeed, 
									  transition: Fx.Transitions.Quad.easeIn,
									  onComplete: function(){ 
										  
										  // If a mouse is over a switch, stop the cycle
											if(Ob.switchActive == true) {
												Ob.myFxOut.stop();
												Ob.myFxIn.stop();
												return true;
											}
										  Ob.imageIndex = nextIndex;
										  Ob.imageFadeCycle.delay(Ob.rotateSpeed, Ob);
										  
										  } 
									 }).start('opacity', 1);
		
	}
	
});