/*======================================================================*\
|| #################################################################### ||
|| # Copyright ©2006-2009 Youjoomla LLC. All Rights Reserved.           ||
|| # This file may not be redistributed in whole or significant part. # ||
|| # ---------------- THIS IS NOT FREE SOFTWARE ---------------- #      ||
|| # http://www.youjoomla.com | http://www.youjoomla.com/license.html # ||
|| #################################################################### ||
\*======================================================================*/
/**
 * SlideShow - image slideshow
 * @version		1.0.0
 * @MooTools version 1.1
 * @author		Constantin Boiangiu <info [at] constantinb.com>
 * Copyright Youjoomla LLC
 */

var SlideShow5 = new Class({
	initialize: function (options) {
		this.options = Object.extend({
			container: 'SlideShow5',
			slidesClass: 'SlideShowSlide5',
			effectDuration: 1000,
			autoSlide: 3000,
			stopOnClick: false,
			transition: Fx.Transitions.Sine.easeOut,
			nav: 'fade',
			navigation: true
		},
		options || {});
		this.container = $(this.options.container);
		this.start()
	},
	start: function () {
		this.navContainer = new Element('div').set({
			'class': 'navContainer5'
		}).injectInside(this.container);
		this.elements = this.container.getElements('.' + this.options.slidesClass);
		this.currentSlide = 0;
		this.state = 2;
		if (this.options.nav == 'slide') {
			this.scrollFx = new Fx.Scroll('SlideShowScroll5', {
				wait: false,
				duration: this.options.effectDuration,
				transition: this.options.transition
			})
		}
		this.elements.each(function (element, i) {
			if (this.options.nav == 'fade') {
				var fx = new Fx.Styles(element, {
					duration: this.options.effectDuration,
					wait: false,
					transition: this.options.transition
				});
				element.setStyles({
					'opacity': i > 0 ? 0 : 1,
					'position': 'absolute'
				});
				this.elements[i]['fx'] = fx
			}
			var img = element.getElement('img');
			var url = element.getElement('a');
			var link = new Element('a').set({
				'href': '#',
				'class': i == 0 ? 'selected': 'navigation'
			}).injectInside(this.navContainer);
			this.elements[i]['navigation'] = link;
			new Element('img').set({
				'src': img.src,
				'align': 'left',
				'hspace': 5,
				'vspace': 5
			}).injectInside(link);
			new Element('span').set({
				'class': 'title'
			}).setHTML(url.title).injectInside(link);
			new Element('br').injectInside(link);
			new Element('span').set({
				'class': 'description'
			}).setHTML(img.alt).injectInside(link);
			link.addEvent('click', function (event) {
				new Event(event).stop();
				$clear(this.period);
				this.switchSlide(i);
				if (!this.options.stopOnClick) this.period = this.startRotation();
				if (this.state == 1) {
					this.play.setHTML('pause');
					this.state = 2
				}
			}.bind(this))
		}.bind(this));
		this.period = this.startRotation();
		if (this.options.navigation) {
			this.setNavigation()
		}
	},
	setNavigation: function () {
		var controlsContainer = new Element('div').set({
			'class': 'controlsContainer5'
		}).injectInside(this.container);
		var back = new Element('a').set({
			'href': '#'
		}).set({
			'class': 'slide5prev'
		}).setHTML('').injectInside(controlsContainer);
		this.play = new Element('a').set({
			'href': '#'
		}).setHTML('').injectInside(controlsContainer);
		this.stop = new Element('a').set({
			'href': '#'
		}).setHTML('').injectInside(controlsContainer);
		var forward = new Element('a').set({
			'href': '#'
		}).set({
			'class': 'slide5next'
		}).setHTML('').injectInside(controlsContainer);
		this.stop.addEvent('click', function (event) {
			new Event(event).stop();
			$clear(this.period);
			this.options.stopOnClick = true;
			if (this.state !== 0) this.switchSlide(0);
			this.state = 0;
			this.stop.setHTML('');
			this.play.setHTML('')
		}.bind(this));
		this.play.addEvent('click', function (event) {
			new Event(event).stop();
			if (this.state !== 2) {
				this.period = this.startRotation();
				this.state = 2;
				this.stop.setHTML('');
				this.play.setHTML('')
			} else if (this.state == 2) {
				this.state = 1;
				$clear(this.period);
				this.play.setHTML('')
			}
		}.bind(this));
		back.addEvent('click', function (event) {
			new Event(event).stop();
			$clear(this.period);
			slide = this.currentSlide > 0 ? this.currentSlide - 1 : this.elements.length - 1;
			this.switchSlide(slide);
			if (this.state !== 0) this.period = this.startRotation()
		}.bind(this));
		forward.addEvent('click', function (event) {
			new Event(event).stop();
			$clear(this.period);
			slide = this.currentSlide < this.elements.length - 1 ? this.currentSlide + 1 : 0;
			this.switchSlide(slide);
			if (this.state !== 0) this.period = this.startRotation()
		}.bind(this))
	},
	startRotation: function () {
		return this.rotate.periodical(this.options.autoSlide + this.options.effectDuration, this)
	},
	rotate: function () {
		slide = this.currentSlide < this.elements.length - 1 ? this.currentSlide + 1 : 0;
		this.switchSlide(slide)
	},
	switchSlide: function (slide) {
		if (this.options.nav == 'fade') {
			this.elements[this.currentSlide]['fx'].start({
				'opacity': 0
			});
			this.elements[slide]['fx'].start({
				'opacity': 1
			})
		} else if (this.options.nav == 'slide') {
			this.scrollFx.toElement(this.elements[slide])
		}
		this.elements[slide]['navigation'].removeClass('navigation').addClass('selected');
		this.elements[this.currentSlide]['navigation'].removeClass('selected').addClass('navigation');
		this.currentSlide = slide
	}
});