var NXC = NXC || {};
NXC.Gallery = new Class( {

	Implements: [Options, Events],

	options: {
		'startImageIndex'   : 0,
		'getCurrentImage'   : function( container ) { return container.getElement( 'img.nxc-gallery-current-image' ); },
		'getLoaderImage'    : function( container ) { return container.getElement( 'img.nxc-gallery-current-image-loader' ); },
		'getDownloadLinks'  : {
			'original' : function( container ) { return container.getElement( 'a.nxc-gallery-current-image-download-original' ); },
			'small'    : function( container ) { return container.getElement( 'a.nxc-gallery-current-image-download-small' ); }
		},
		'getImageInfoBlock' : function( container ) { return container.getElement( 'div.nxc-gallery-current-image-info' ); },
		'getPreviews'       : function( container ) { return container.getElements( 'img.nxc-gallery-preview' ); },
		'slideShowTimeout'  : 3000,
		'previewsTween'     : {
			'duration' : 250,
			'opacity'  : 0.7
		},
		'onShowImage'       : function( imagesIndexToShow, currentImageIndex ) {

		}.bind( this )
	},

	container         : false,
	currentImage      : false,
	loaderImage       : false,
	previews          : [],
	downloadLinks     : {
		'original' : false,
		'small'    : false
	},
	imageInfoBlock    : false,
	currentImageIndex : 0,
	timer             : $empty,

	initialize: function( containerID, options ) {
		this.container = document.id( containerID );

		this.setOptions( options );
		this.currentImageIndex = this.options.startImageIndex;

		this.currentImage           = this.options.getCurrentImage( this.container );
		this.loaderImage            = this.options.getLoaderImage( this.container );
		this.downloadLinks.original = this.options.getDownloadLinks.original( this.container );
		this.downloadLinks.small    = this.options.getDownloadLinks.small( this.container );
		this.imageInfoBlock         = this.options.getImageInfoBlock( this.container );
		this.previews               = this.options.getPreviews( this.container );
		this.previews.setStyle( 'opacity', this.options.previewsTween.opacity );
		this.showImage( this.currentImageIndex, false );

		this.installEvents();
		this.startSlideShow();
	},

	installEvents: function() {
		this.previews.each( function( preview, index ) {
			preview.addEvents( {
				'click'    : function() {
					this.showImage( index );
				}.bind( this ),
				'mouseover': function() {
					preview.get( 'tween', {
							'property' : 'opacity',
							'link'     : 'cancel',
							'duration' : this.options.previewsTween.duration
					} ).start( 1 );
					this.stopSlideShow();
				}.bind( this ),
				'mouseout' : function() {
					this.hidePreviews( this.currentImageIndex );
					this.startSlideShow();
				}.bind( this )
			} );
		}.bind( this ) );

		this.currentImage.addEvents( {
			'mouseover': function() {
				this.stopSlideShow();
			}.bind( this ),
			'mouseout' : function() {
				this.startSlideShow();
			}.bind( this )
		} );
	},

	hidePreviews: function( excludeIndex ) {
		this.previews.each( function( preview, index ) {
			if( ( excludeIndex !== false ) && ( index != excludeIndex ) ) {
				preview.get( 'tween', {
						'property' : 'opacity',
						'link'     : 'cancel',
						'duration' : this.options.previewsTween.duration
				} ).start( this.options.previewsTween.opacity );
			}
		}.bind( this ) );
	},

	startSlideShow: function() {
		if( this.options.slideShowTimeout.toInt() > 0 ) {
			this.timer = function() {
				this.showNextImage();
			}.periodical( this.options.slideShowTimeout, this );
		}
	},

	stopSlideShow: function() {
		$clear( this.timer );
	},

	showNextImage: function() {
		var indexToShow = ( this.currentImageIndex == this.previews.length - 1 ) ? 0 : this.currentImageIndex + 1;
		this.showImage( indexToShow );
	},

	showPreviousImage: function() {
		var indexToShow = ( this.currentImageIndex == 0 ) ? this.previews.length - 1 : this.currentImageIndex - 1;
		this.showImage( indexToShow );
	},

	showImage: function( index ) {
		var preview = this.previews[ index ];
		if( preview.retrieve( 'isLargeImageLoaded', false ) === false ) {
			this.currentImage.setStyle( 'display', 'none' );
			this.loaderImage.setStyle( 'display', 'block' );
			var image = new Asset.image(
				preview.retrieve( 'largeImageURL' ), {
					'onload': function() {
						this.loaderImage.setStyle( 'display', 'none' );
						this.currentImage.setStyle( 'display', 'block' ).set( 'src', image.get( 'src' ) );
						/*
						( function() {
							this.currentImage.setStyle( 'margin-left', ( this.currentImage.getStyle( 'width' ).toInt() / 2 ).toInt() * -1 );
						} );
						*/
						this.currentImage.setStyle.delay(
							50,
							this.currentImage,
							[ 'margin-left', ( this.currentImage.getStyle( 'width' ).toInt() / 2 ).toInt() * -1 ]
						);
						preview.store( 'isLargeImageLoaded', true );
					}.bind( this )
				}
			);
		} else {
			this.currentImage.set( 'src', preview.retrieve( 'largeImageURL' ) );
			this.currentImage.setStyle.delay(
				50,
				this.currentImage,
				[ 'margin-left', ( this.currentImage.getStyle( 'width' ).toInt() / 2 ).toInt() * -1 ]
			);
		}

		this.downloadLinks.original.set( 'href', preview.retrieve( 'originalImageURL' ) );
		this.downloadLinks.small.set( 'href', preview.retrieve( 'smallImageURL' ) );
		this.imageInfoBlock.set( 'html', preview.get( 'alt' ) );

		var previousPreview = this.previews[ this.currentImage ];
		preview.get( 'tween', {
				'property' : 'opacity',
				'link'     : 'cancel',
				'duration' : this.options.previewsTween.duration
		} ).start( 1 );

		this.fireEvent( 'showImage', [ index, this.currentImage ] );

		this.currentImageIndex = index;
		this.hidePreviews( this.currentImageIndex );
	}
} );