/*----------------------------------------------------------------------*\
| Rotator by Michael Hamilton: Requires Mootools 1.2					 |
| To use this, create a container div and give it a class ImageRotator   |
| then apply a style ".ImageRotator img {position:absolute;}" or style   |
| elements to overlap and put those elements in the container.           |
|------------------------------------------------------------------------|
| Options can be given on the container div as properties (prefix data-) |
|------------------------------------------------------------------------|
| Show = time to show the image.  Should be greater than Fade.           |
| Fade = time of transition during which opacities change.               |
| TextId = the id of an element to accept the image data-Text values.    |
|------------------------------------------------------------------------|
| When indicating a TextId each rotate element should define data-Text.  |
|------------------------------------------------------------------------|
| When using buttons, each button element should have data-Index set.    |
\#----------------------------------------------------------------------#/
EXAMPLE:
<div class = 'ImageRotator' data-Show = '2000' data-Fade = '500' data-TextId = 'TextDescription' data-ButtonClass = 'Button'>
   <img src = 'tst1.png' data-Text = 'Image 1'/>
   <img src = 'tst2.png' data-Text = 'Image 2'/>
   <img src = 'tst3.png' data-Text = 'Image 3'/>
</div>
<a href = "#" class = 'Button' data-Index = '0'>1</a>
<a href = "#" class = 'Button' data-Index = '1'>2</a>
<a href = "#" class = 'Button' data-Index = '2'>3</a>
<div id = 'TextDescription'></div>
/*----------------------------------------------------------------------*\
| In the above, images will rotate every 2 seconds fading for .5 seconds |
| and the TextDescription div will contain the text Image 1, then Image 2|
| and finally Image 3 before looping back to the first element.          |
\*----------------------------------------------------------------------*/
window.addEvent('domready', function() {
	//Feel free to edit these values://

	var DefaultImageDisplayTime = 5000;
	var DefaultFadeDurationTime = 1500;

	var ClassName = 'ImageRotator';
	var ActiveButtonClassName = 'ActiveButton';

	//Any elements of these types directly inside an element of ClassName will be rotated
	var RotateElements = ['a', 'img'];

	///////////////////////////////////
	function FlipImagesAround(){
		if(!$defined(FlipImagesAround.counter)){FlipImagesAround.counter = 0;}
		if(FlipImagesAround.counter == 0){
			var rotations = [];
			var rotatorCount = 0;
			$$('.ImageRotator').each(function(element, rotations){
				this.rotations[this.rotatorCount] = element;
				this.rotatorCount++;
			}.bind({'rotations':rotations,'rotatorCount':rotatorCount}));
			rotations.each(function(element, index){
				var randomNumber = $random(0, this.rotatorCount);
				element.inject(this.rotations[randomNumber], 'before');
			}.bind({'rotations':rotations,'rotatorCount':rotatorCount}));
		}
		FlipImagesAround.counter++;
		if(FlipImagesAround.counter>3){FlipImagesAround.counter = 0;}
	}

	function FadeImageRotation(Options){
		Options.currentImage=(Options.currentImage+1)%Options.images.length;
		var fadeImage = Options.currentImage-1;
		if(Options.currentImage == 0){
			fadeImage = Options.images.length-1;
		}
		FlipImagesAround();
		Options.images[fadeImage].set('tween', { duration: Options.FadeDurationTime });
		Options.images[fadeImage].tween('opacity', '0');

		Options.images[Options.currentImage].set('tween', { duration: Options.FadeDurationTime });
		Options.images[Options.currentImage].tween('opacity', '1');

		Options.imageButtons.each(function(button){
			button.removeClass(ActiveButtonClassName);
			if(button.getProperty('data-Index') == Options.currentImage){
				button.addClass(ActiveButtonClassName);
			}
		});

		SetImageDescriptionText($(Options.ImageTextArea), Options.images[Options.currentImage]);
	}

	function SetImageDescriptionText(TextAreaElement, ImageElement){
		if($defined(TextAreaElement) && $defined(ImageElement.getProperty('data-Text'))){
			TextAreaElement.innerHTML = ImageElement.getProperty('data-Text');
		}
		if($defined(ImageElement.getProperty('data-AdName'))){
			DynamicRequest('', ImageElement.getProperty('data-AdName'), 'view', 'CountStats.php');
		}
	}

	var ImageAreas = $$('.'+ClassName);
	if($defined(ImageAreas[0])){
		var ImageList;
		var tmpImageDisplayTime;
		var tmpFadeDurationgTime;
		var imageTextArea;
		var ImageFadeTimers = [];
		var ImageButtons;
		for(var i = 0;i < ImageAreas.length;i++){
			tmpFadeDurationTime = DefaultFadeDurationTime;
			imageTextArea = 'NULL';
			tmpImageDisplayTime = DefaultImageDisplayTime;
			if($defined(ImageAreas[i].getProperty('data-Fade'))){
				tmpFadeDurationTime = ImageAreas[i].getProperty('data-Fade');
			}
			if($defined(ImageAreas[i].getProperty('data-Show'))){
				tmpImageDisplayTime = ImageAreas[i].getProperty('data-Show');
			}
			if($defined(ImageAreas[i].getProperty('data-TextId'))){
				imageTextArea = ImageAreas[i].getProperty('data-TextId');
			}

			ImageList = [];
			for(var j = 0;j < RotateElements.length;j++){
				ImageListTmp = ImageAreas[i].getElements(RotateElements[j]);
				for(var k = 0;k < ImageListTmp.length;k++){
					if(ImageListTmp[k].getParent() == ImageAreas[i]){
						ImageList.push(ImageListTmp[k]);
						if(k > 0){
							ImageListTmp[k].set('tween', { duration: 0 });
							ImageListTmp[k].tween('opacity', '0');
						}else{
							SetImageDescriptionText($(imageTextArea), ImageList[k]);
						}
					}
				}
			}
			imageButtons = [];
			if($defined(ImageAreas[i].getProperty('data-ButtonClass'))){
				imageButtons = $$('.'+ImageAreas[i].getProperty('data-ButtonClass'));
			}

			ImageFadeTimers[i] = FadeImageRotation.periodical(tmpImageDisplayTime, this, {'currentImage':0,'areaIndex':i,'images':ImageList,'FadeDurationTime':tmpFadeDurationTime,'ImageTextArea':imageTextArea,'imageButtons':imageButtons});

			if($defined(ImageAreas[i].getProperty('data-ButtonClass'))){
				var isFirstButton = true;
				imageButtons.each(function(el){
					if(el.getProperty('data-Index') == 0){
						el.addClass(ActiveButtonClassName);
						isFirstButton = false;
					}
					el.addEvent('click', function(ev){
						ev.stop();
						$clear(this.ImageFadeTimer);
						var ImageIndex = this.el.getProperty('data-Index');
						for(var k = 0;k < this.ImageList.length;k++){
							if(k == ImageIndex){
								this.ImageList[k].set('tween', { duration: this.tmpFadeDurationTime });
								this.ImageList[k].tween('opacity', '1');
								SetImageDescriptionText($(this.ImageTextArea), this.ImageList[k]);
							}else{
								this.ImageList[k].set('tween', { duration: this.tmpFadeDurationTime });
								this.ImageList[k].tween('opacity', '0');
							}
						}
						this.ImageButtons.each(function(button){
							button.removeClass(ActiveButtonClassName);
						});
						this.el.addClass(ActiveButtonClassName);
					}.bind({'ImageList':ImageList,'el':el,'tmpFadeDurationTime':tmpFadeDurationTime,'ImageFadeTimer':ImageFadeTimers[i],'ImageTextArea':imageTextArea,'ImageButtons':imageButtons}));
				});
			}
		}
	}
});