/*
This is an adapted Script of a slideshow by David Walsh (http://davidwalsh.name/)
Modified by Christjan Grabowski (http://www.2raumwelten.de)
*/

var ZrwSlideshow = new Class({

	options: {
		showControls: true,
		showDuration: 10000,
		transitionDuration: 3000,
		transition: Fx.Transitions.Sine.easeOut,
		showThumbnails: true,
		showCaptions: true,
		tocWidth: 20,
		tocClass: 'inactive',
		tocActiveClass: 'active',
		thumbOpacity: 0.7
	  },
	  
	Implements: [Options,Events],
	
	initialize: function(container,elements,containerMain,containerThumbs,containerController,options) {
		this.setOptions(options);
		this.container = $(container);
		this.containerMain = $(containerMain);
		this.containerThumbs = $(containerThumbs);
		this.containerController = $(containerController);
		this.elements = $$(elements);
		this.currentIndex = 0;
		this.interval = '';
		if(this.options.showThumbnails) this.toc = [];
		
		this.containerCaption = new Element('div',{
				class: 'zrw-slideshow-caption',
				styles: {
				opacity: this.options.thumbOpacity
			}
		}).inject(this.containerMain);
				
		this.elements.each(function(el,i){
			if(this.options.showThumbnails) {
				this.toc.push(new Element('a',{
					text: i+1,
					href: '#',
					'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
					events: {
						click: function(e) {
							if(e) e.stop();
							this.stop();
							this.show(i);
						}.bind(this)
					},
					styles: {
						left: ((i + 1) * (this.options.tocWidth + 10))
					}
				}).inject(this.containerThumbs));
			}
			if(i > 0) el.set('opacity',0);
		},this);
    
    	if(this.options.showControls) {
      		this.createControls();
		}

		
		this.container.addEvents({
			mouseenter: function() { this.stop(); }.bind(this),
			mouseleave: function() { this.start(); }.bind(this)
		});
		
	
		this.setCaption();
		this.start();
	},
	
	show: function(to) {
		if (to == this.currentIndex) return false;

		var fadeOutFx = new Fx.Tween(this.elements[this.currentIndex], {
			duration: this.options.transitionDuration,
			transition: this.options.transition,
		});
		fadeOutFx.start('opacity', 0);	
		
		if(this.options.showThumbnails) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
			var fadeInFx = new Fx.Tween(this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))], {
			duration: this.options.transitionDuration,
			transition: this.options.transition,
		});
		fadeInFx.start('opacity', 1);		
		
		if(this.options.showThumbnails) this.toc[this.currentIndex].addClass(this.options.tocActiveClass);	
		
		this.setCaption();
	},
  
	start: function() {
		this.interval = this.show.bind(this).periodical(this.options.showDuration);
	},

	stop: function() {
		$clear(this.interval);
	},
	
	setCaption: function() {
		var captionText = '';
		if(this.elements[this.currentIndex].get('title') && this.options.showCaptions == true) {
			captionText = this.elements[this.currentIndex].get('title');	
			this.containerCaption.set('html', '<p>' + captionText + '</p>');
		} else {
			this.containerCaption.set('html', '');
		}		
	},

	createControls: function() {
		var previous = new Element('a',{
							href: '#',
							class: 'previous',
							text: '<<',
							events: {
								click: function(e) {
									if(e) e.stop();
									this.stop(); 
									this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
								}.bind(this)
							}
		}).inject(this.containerController);

		var next = new Element('a',{
      						href: '#',
							class: 'next',
							text: '>>',
							events: {
								click: function(e) {
									if(e) e.stop();
          							this.stop(); 
									this.show();
        						}.bind(this)
      						}
		}).inject(this.containerController);
	}
});