//  _____________________________________________________________________________________________________________
// |_| ImageRotator |____________________________________________________________________________________________|
//
//	By: Alexander Trauzzi
//	atrauzzi@gmail.com
//	(c) 2007 Alexander Trauzzi - Initial release.
//	    2010 Converted to Mootools, improved cycling and now use proper CSS.
//
//	Any use, modification or derivative works from this script are strictly prohibited unless authorized in
//	writing by the script author.
//
//  _____________________________________________________________________________________________________________
// |_____________________________________________________________________________________________________________|

var ImageRotator = new Class({

	initialize: function (options) {

		options = options || {};

		// Where should we be injecting the image?
		this.element = $(options.element) || document.body;
		// Path to the images.  This is important for portable sites.
		this.path = options.path || "Images/ImageRotator/";
		// Minimum of two images (otherwise what's the point of rotating?!).  Values starts from 0.
		this.max = options.max || 1;
		// The alt-tag for the image.
		this.alt = options.alt || "";
		// How frequently to cycle the image.
		this.frequency = options.frequency || 12000;
		// CSS Class to give the image.
		this.cssClass = options.cssClass || "ImageRotator";

	},

	// This method randomly chooses an image and returns immediately with the load-handle.
	pickNewImage: function (options) {

		// Pick an image number that isn't the last one we displayed.
		var number;
		if(this.image) {
			do {
				number = (Math.floor(Math.random() * this.max));
			}while(number == this.image.number);
		}
		else {
			number = (Math.floor(Math.random() * this.max));
		}

		// Asynchronously load the image.
		var loadingImage = Asset.image(
			this.path + number + ".jpg",
			{
				title: this.alt,
				// When the image is loaded...
				onload: (function (image, number) {

					// Store the image's number.
					image.number = number;

					// If a callback is desired, run it now.
					if(options.onload) {
						options.onload(image);
					}

				}).bindWithEvent(this, number),

				// If for any reason the image could not be loaded...
				onerror: (function (image, number) {
					// Display an error...
					alert("Error rotating image! #" + number);
					// Stop rotating.
					$clear(this.timer);
				}).bindWithEvent(this, number)

			}
		);

		// Return the image loading handle.
		return(loadingImage);

	},

	fadeIn: function (options) {

		var fadeImageIn = new Fx.Tween(this.image, {
			property: "opacity",
			duration: 1500
			
		});
		fadeImageIn.start(0,1);

	},

	fadeOut: function (options) {


		var fadeImageOut = new Fx.Tween(this.image, {
			property: "opacity",
			duration: 1500
		});

		if(options.onComplete) {
			fadeImageOut.addEvent("complete", options.onComplete);
		}

		fadeImageOut.start(1,0);


	},

	cycle: function () {

		this.pickNewImage({

			onload: (function (image) {

				// Design the image element.
				image.addClass(this.cssClass);

				// Add the image to the target element.
				image.inject(this.element, "top");

				// If there is already an image being displayed, we need to clear it out first.
				if(this.image) {

					this.fadeOut({

						onComplete: function () {

							// We are done with the current image, nuke it.
							this.image.destroy();

							this.image = image;
							this.fadeIn();

						}.bind(this)

					});

				}
				// Otherwise, just bring in the new image.
				else {
					// We have a new image!
					this.image = image;
					this.fadeIn();
				}

			}).bind(this)

		});

	},

	// Controls the cycle.
	run: function () {

		if(!this.image) {
			// If we haven't shown an image yet, pull one right away, then go to running.
			this.cycle();
		}

		// Start a new timer.
		this.timer = this.cycle.periodical(this.frequency, this)

	},

	stop: function (options) {
		// Stop the timer.
		$clear(this.timer);
	}

});