﻿
var showQuotes = new Class( {
	Implements: [Options],
	options: {
		random: true,
		quotesClass: 'quoteBlock',
		startIndex: -1,
		transitionType: 'slide', // slide or fade
		timeDelay: 7500,
		timeTransition: 1500
	},

	initialize: function(options) {
		this.setOptions(options);
		this.addQuotes();
		this.addContainerEvents();
		if(this.quotes.length) {
			if(this.options.startIndex != -1) this.showQuote(this.options.startIndex);
			else this.play();
		}
	},

	cyclePeriodical: null,
	quotes: [],
	quotesN: [],
	currentQuote: -1,
	
	play: function() {
		this.cycle();
		this.cyclePeriodical = this.cycle.periodical(this.options.timeDelay, this);
	},
	
	pause: function() {
		if(this.cyclePeriodical != null) {
			this.cyclePeriodical = $clear(this.cyclePeriodical);
		}
	},
	
	addQuotes: function() {
		$$('.'+this.options.quotesClass).each( function(q) {
			q.setStyles({
				'position':'absolute',
				'opacity': 0,
				'display':'none',
				'visibility': 'hidden'
			});
			this.quotes.include(q.id);
		}, this);
	},
	
	addContainerEvents: function() {
		var container = document.id(this.quotes[0]).getParent();
		container.addEvent('mouseenter', this.pause.bind(this));
		container.addEvent('mouseleave', this.play.bind(this));
	},

	cycle : function() {
		if( this.quotesN.length <= 0 ) this.quotesN = $A(this.quotes);
		iq = (this.options.random) ? this.quotesN.getRandom() : this.quotesN[0];

		this.showQuote(iq);
	},

	showQuote : function(iq) {
		if(this.changing) return;

		this.changing = true;

		var currentQ = document.id(this.currentQuote);
		var nextQ = document.id(iq);
		var nextQ_dimensions = nextQ.getDimensions(true);
		var nextQ_positionLeft = nextQ.getParent().getStyle('padding-left');

		if(this.options.transitionType == 'fade') {
			if(this.currentQuote != -1) {
				var fadeOut = new Fx.Morph(currentQ, {
					duration: this.options.timeTransition,
					transition: Fx.Transitions.Sine.easeOut,
					complete: function() {
						currentQ.setStyles({
							'display': 'none',
							'visibility': 'hidden'
						});
					}
				}).start({
					'opacity' : 0
				});
			}

			var parentSize = new Fx.Morph(nextQ.getParent(), {
				duration: (this.options.timeTransition / 2).toInt(),
				transition: Fx.Transitions.Sine.easeOut
			}).start({
				'height' : nextQ_dimensions.height
			});
			nextQ.setStyles({
				'display': 'block',
				'visibility': 'visible'
			});
			var fadeIn = new Fx.Morph(nextQ, {
				duration: this.options.timeTransition,
				transition: Fx.Transitions.Sine.easeOut
			}).start({
				'opacity' : 1
			});
		} else {
			if(this.currentQuote != -1) {
				var slideOut = new Fx.Morph(currentQ, {
					duration: this.options.timeTransition,
					transition: Fx.Transitions.Sine.easeOut,
					complete: function() {
						currentQ.setStyles({
							'display': 'none',
							'visibility': 'hidden'
						});
						currentQ.setStyle('left', '');
					}
				}).start({
					'left' : nextQ_dimensions.width,
					'opacity' : 0
				});
			}

			var parentSize = new Fx.Morph(nextQ.getParent(), {
				duration: (this.options.timeTransition / 2).toInt(),
				transition: Fx.Transitions.Sine.easeOut
			}).start({
				'height' : nextQ_dimensions.height
			});
			nextQ.setStyles({
				'display': 'block',
				'visibility': 'visible',
				'opacity' : 1,
				'left' : -1 * nextQ_dimensions.width
			});
			var fadeIn = new Fx.Morph(nextQ, {
				duration: this.options.timeTransition,
				transition: Fx.Transitions.Sine.easeOut
			}).start({
				'left' : nextQ_positionLeft
			});
		}

		this.quotesN.erase(iq);
		this.currentQuote = iq;
		this.changing = false;
	}

} );

