var Rotations = new Class({
	Implements: Options,

	morphOptions: { wait: false, duration: 400 },

	version: 1.0,
	options: {
		autoCycle: true,
		thumbsOpacity: 0.3,
		startIndex: 0,
		delay: 3000
	},
	initialize: function(element, options) {
		this.setOptions(options);
		this.element = $$(element)[0] || null;
		if (!this.element)
			return;

		this.timer = null;
		this.pause = false;
		this.currentIndex = this.options.startIndex;

		this.large = this.element.getElements('#displayContent img');
		this.small = this.element.getElements('#displayNav img');
		this.descs = this.element.getElements('#displayCopy .homeText');
		if (this.large.length != this.small.length || this.large.length != this.descs.length)
			return;
		this.length = this.large.length;

		this.largeParent = this.large[0].getParent();
		this.smallParent = this.small[0].getParent();
		this.descsParent = this.descs[0].getParent();

		this.largeFx = [];
		this.smallFx = [];
		this.descsFx = [];

		this.largeParentFx = new Fx.Morph(this.largeParent, this.morphOptions);
		this.smallParentFx = new Fx.Morph(this.smallParent, this.morphOptions);
		this.descsParentFx = new Fx.Morph(this.descsParent, this.morphOptions);

		// Initialize the page elements.
		this.initializeLargeImages();
		this.initializeSmallImages();
		this.initializeDescriptions();

		var self = this;

		if (this.options.autoCycle) {
			this.element.addEvents(
				{
					mouseenter: function() {
						$clear(self.timer);
						self.pause = true;
					},
					mouseleave: function() {
						$clear(self.timer);
						self.pause = false;
						self.timer = self.next.periodical(self.options.delay, self);
					}
				}
				);
		}

		// Initialize the appearance.
		this.smallFx[this.options.startIndex].set({ opacity: 1 });
		this.largeFx[this.options.startIndex].set({ opacity: 1 });
		this.descsFx[this.options.startIndex].set({ opacity: 1 });

		if (self.options.autoCycle)
			self.timer = self.next.periodical(self.options.delay, self);
	},
	initializeLargeImages: function() {
		var self = this;

		var f = function(l, i) {
			self.largeFx.push(new Fx.Morph(l, self.morphOptions).set({ opacity: 0 }));
		};

		this.large.each(f);
	},
	initializeSmallImages: function() {
		var self = this;

		var f = function(s, i) {
			self.smallFx.push(new Fx.Morph(s, self.morphOptions).set({ opacity: self.options.thumbsOpacity }));

			s.addEvents(
				{
					click: function() {
						$clear(self.timer);
						self.load(i, true);
					},
					mouseenter: function() {
						if (i != self.currentIndex)
							self.smallFx[i].start({ opacity: 1 });
					},
					mouseleave: function() {
						if (i != self.currentIndex)
							self.smallFx[i].start({ opacity: self.options.thumbsOpacity });
					}
				}
				);
		};

		this.small.each(f);
	},
	initializeDescriptions: function() {
		var self = this;

		var f = function(d, i) {
			self.descsFx.push(new Fx.Morph(d, self.morphOptions).set({ opacity: 0 }));
		};

		this.descs.each(f);
	},
	load: function(i, clicked) {
		this.transition(i, clicked);
	},
	transition: function(i, clicked) {
		var self = this;

		if (i == this.currentIndex)
			return;

		this.smallFx[this.currentIndex].cancel().start({ opacity: this.options.thumbsOpacity });
		this.largeFx[this.currentIndex].cancel().start({ opacity: 0 });
		this.descsFx[this.currentIndex].cancel().start({ opacity: 0 });

		this.smallFx[i].cancel().start({ opacity: 1 });
		this.largeFx[i].cancel().start({ opacity: 1 });
		this.descsFx[i].cancel().start({ opacity: 1 });

		this.currentIndex = i;

		if (self.options.autoCycle && !self.pause) {
			$clear(self.timer);
			self.timer = self.next.periodical(self.options.delay * (clicked ? 2 : 1), self);
		}
	},
	next: function(force) {
		var current = (force != null) ? force : this.currentIndex + 1;
		if (current >= this.length)
			current = 0;
		this.load(current, false);
	}
});

window.addEvent(
	"domready",
	function() {
		new Rotations(
			"#display",
			{
				autoCycle: true,
				thumbsOpacity: 0.5,
				startIndex: 0,
				delay: 3000
			}
			);
	}
);