/* Nice Slide Show */
var NiceSlideShow = new Class( {
	options: {
		showControls: false,
		showDuration: 3000,
		showTOC: false,
		showCaption: false,
		showThumbs: false,
		sidebarContainer: 'niceslides-sidebar-inner-0',
		tocClass: 'toc',
		tocActiveClass: 'niceslides-toc-active',
		captionContainer: 'niceslides-caption-0',
		captionOpacity: 0.7,
		thumbsContainer: 'niceslides-thumbs-0',
		thumbsContainerInner: 'niceslides-thumbs-inner-0',
		thmClass: 'niceslides-thm-0',
		thmActiveClass: 'niceslides-thm-active-0',
		thumbsOpacity: 0.7,
		nextContainer: 'niceslides-next-0',
		previousContainer: 'niceslides-previous-0'
	},
	Implements: [Options,Events],
	initialize: function( container,elements,options ) {
		
		this.setOptions( options );
		this.container = $( container );
		this.elements = $$( elements );
		this.currentIndex = 0;
		this.interval = '';
		if( this.options.showTOC ) this.toc = [];
		if( this.options.showThumbs ) this.thm = [];
		if( this.options.showCaption ) this.createCaption(  );
		var capHieght = 0;
		
		if( this.options.showTOC ){
				
			this.elements.each( function( img,i ){
			
				if( img.get( 'alt' ) ) {
					var cap = img.get( 'alt' ).split( '::' );
				}
				
				this.toc.push( new Element( 'a',{
					text: cap[0],
					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 )	
					}
				} ).inject( this.options.sidebarContainer ) );
			},this );
		}
		
	if( this.options.showThumbs ) {
		var preview = new Element( 'div',{
			id: this.options.thumbsContainer
		} ).inject( container,'after' );
	
		var thmInner = new Element( 'div',{
			id: this.options.thumbsContainerInner
		} ).inject( preview );
	
	}
	
	if( this.options.showThumbs ){
		
		var thumbsOpacity = this.options.thumbsOpacity;
		var thmActiveClass = this.options.thmActiveClass;
		
		this.elements.each( function( img,i ){
			this.thm.push( new Element( 'img',{
				src: img.get( 'src' ),
				title: img.get( 'alt' ),
				
				styles: {
					opacity: this.options.thumbsOpacity
				},
				events: {
					click: function( e ) {
						if( e ) e.stop(  );
						this.stop(  );
						this.show( i );
						this.start(  );
					}.bind( this ),
					mouseenter: function() {
						this.fade( 1 );
					},
					mouseleave: function() {
						if( !this.hasClass( thmActiveClass ) ) this.fade( thumbsOpacity );
					}
				}
				
			} ).inject( thmInner ) );
			if( i > 0 ) { img.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 )
		} );

	},
	
	show: function(to) {
		
		this.elements[this.currentIndex].fade( 'out' );
		if( this.options.showTOC ) this.toc[this.currentIndex].removeClass( this.options.tocActiveClass );
		if( this.options.showThumbs ) {
			this.thm[this.currentIndex].removeClass( this.options.thmActiveClass );
			this.thm[this.currentIndex].addClass( this.options.thmClass ).fade( this.options.thumbsOpacity );
		}
		this.elements[this.currentIndex = ( $defined( to ) ? to : ( this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0 ) )].fade( 'in' );
		if( this.options.showTOC ) this.toc[this.currentIndex].addClass( this.options.tocActiveClass );
		if( this.options.showThumbs ) {
			this.thm[this.currentIndex].removeClass( this.options.thmClass );
			this.thm[this.currentIndex].addClass( this.options.thmActiveClass ).fade( 1 );
		}
		if( this.options.showCaption ) this.doCaptionFX(  );
		
	},
	
	start: function() {
		if( this.options.showCaption ) this.doCaptionFX(  );
		this.interval = this.show.bind( this ).periodical( this.options.showDuration );
	},
	
	stop: function() {
		$clear( this.interval );
	},

	createControls: function() {
		var next = new Element( 'a',{
			href: '#',
			id: this.options.nextContainer,
			events: {
				click: function( e ) {
					if( e ) e.stop(  );
					this.stop(  ); 
					this.show(  );
				}.bind( this )
			}
		} ).inject( this.container );
		var previous = new Element( 'a',{
			href: '#',
			id: this.options.previousContainer,
			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.container );
	},
	
	createCaption: function() {
		var captionElement = new Element( 'div',{
			id: this.options.captionContainer,
			styles: {
				opacity: this.options.captionOpacity
			}
			
		} ).inject( this.container );
		
		var capSize = captionElement.getSize(  );
		capHieght = capSize.y;
		captionElement.setStyle( 'height',0 );
	},

	doCaptionFX: function(element) {

		var title = '';
		var captionText = '';
		var captionbox = this.options.captionContainer;

		if( this.elements[this.currentIndex].get( 'alt' ) ) {
			var cap = this.elements[this.currentIndex].get( 'alt' ).split( '::' );
			title = cap[0];
			captionText = cap[1];
			}

		$( captionbox ).set( 'tween',{
			onComplete: function() {
				$( captionbox ).set( 'tween',{
					onComplete: $empty
				} ).tween( 'height',capHieght );
				$( captionbox ).set( 'html','<h3>' + title + '</h3>' + ( captionText ? '<p>' + captionText + '</p>' : '' ) );
				
			}
		} ).tween( 'height',0 );
	}

} );
