var NXC = NXC || {};
NXC.Gallery = new Class
( {
	
	Implements: [Options],
	
	options: {
		'iWidth'               : 240,   // width image	   : in pixels
		'iHeight'              : 180,   // height image    : in pixels
		'ilWidth'              : 240,   // width left image	   : in pixels
		'ilHeight'             : 180,   // height left image   : in pixels
		'centerLR'             : 920,   // transition to the central picture...	   : in pixels
		'shiftRadius'          : 80,    // radius = radius - shiftRadius , order to correct the radius of the circle under the block in which the drawings : in pixels
		'iterationClick'       : 5,     // number of iterations for the click	   : in number
		'iterationScroll'      : 5,     // number of iterations for the scroll	   : in number
		'iterationCenter'      : 3,     // number of iterations for the transition center image	   : in number
		'iterationDraging'     : 6,     // number of iterations for the drag   : in number
		'mouseSpeed'           : 15,     // mouse speed for draging	   : in pixels
		'centerImageMaxSize'   : 100,   // max size of the center image after clicking	   : in percent
		'lossInnertion'        : 0.85   // loss innertion in the image after draging       : in percent
	},

	initialize: function( images , gallery , loader , options)
	{
		this.images           = images;
		this.setOptions( options );
		this.loader           = loader;
		this.gallery          = $( gallery );
		this.all              = this.images.getLength();
		this.tmpImage         = new Array( this.all );
		this.gWidth           = this.gallery.getStyle( 'width' ).toInt();
		this.gHeight          = this.gallery.getStyle( 'height' ).toInt();
		this.top              = ( this.gHeight / 2 ) - ( this.options.iHeight / 2 );
		this.radius           = this.gWidth / 2 - this.options.shiftRadius;
		this.angleForElement  = 15;
		var sinc = Math.sin( ( this.angleForElement / 2 ) * ( Math.PI / 180 ) );
		this.options.centerLR = 1000 - 1000 * Math.abs( sinc );
		this.alpha            = 0;
		this.maxLeftAngle     = ( this.all * this.angleForElement) / 2 - 15;
		this.maxRightAngle    = ( -1 ) * ( this.all * this.angleForElement ) / 2;
		this.draging          = false;
		this.isCenter         = false;
		this.wheel            = 0;
		this.startWheel       = false;
		this.cetnerImageSize  = 100;
		this.centerCurrentTop = 0;
		this.centerCurrentLeft= 0;
		this.imageIsCenter    = false;
		this.centerStartTrans = false;
		this.whileDraging     = 0;
	},
	
	run: function()
	{
		var c         = 0;
		var allImages = new Array( this.all * 4 );
		this.images.each( function( imHash )
		{
			allImages[ c++ ] = imHash.get( 'leftImage' );
			allImages[ c++ ] = imHash.get( 'rightImage' );
			allImages[ c++ ] = imHash.get( 'centerImage' );
			allImages[ c++ ] = imHash.get( 'fullImage' );
		} );
		this.myImages = new Asset.images( allImages , {
			'onProgress': function( counter, index ) {
				var loadPersent = ( counter / this.myImages.length ) * 100;
				this.loader.progress( loadPersent );
			}.bind ( this ),
			'onComplete': function() {
				this.loader.block.get( 'tween', { property: 'opacity', duration: this.loader.options.transitionDuration } ).start( 0 ).chain( function() {
					this.loader.block.destroy();
					this.calculateGalleryComponents();
					this.addEventsForGallery();
				}.bind ( this ) );
			}.bind ( this )
		} );
	},
	
	addEventsForGallery: function()
	{
		this.gallery.addEvent( 'mousewheel', function(event)
		{
			this.wheel = event.wheel;
			this.calculateComponentsForScroll();
		}.bind( this ) );
		var drop = $('gallery');
		for( i = 1 ; i <= ( ( this.all * 4 ) - 1 ) ; i++ )
		{
			var draggeble = new Drag( this.myImages[ i ] , 
			{
				style : false,
				'onDrag': function( el, event ) 
				{
					if (this.draging == false)
					{
						this.previewX = event.page.x;
						this.draging = true;
						this.gallery.set( 'class' , 'closedHand' );
					}
					else
					{
						if ( (this.imageIsCenter == false) && (this.centerStartTrans == false) )
						{
							this.alpha += (event.page.x - this.previewX) / this.options.mouseSpeed;
							this.whileDraging = (event.page.x - this.previewX) / this.options.mouseSpeed;
							this.previewX = event.page.x;
							if (this.alpha > this.maxLeftAngle)
							{
								this.alpha = this.maxLeftAngle;
							}
							if (this.alpha < this.maxRightAngle)
							{
								this.alpha = this.maxRightAngle;
							}
							this.rewriteImage();
						}
						else
						{
							if ( this.centerStartTrans == false )
							{
								this.centerStartTrans = true;
								g = 0;
								var fx = function()
								{
									g++;
									this.cetnerImageSize -= this.options.centerImageMaxSize / this.options.iterationCenter;
									this.calculateCenterImage( this.centerCurrentImg );
									if (g > (this.options.iterationCenter - 1))
									{
										this.cetnerImageSize = 100;
										this.imageIsCenter = false;
										this.centerStartTrans = false;
										$clear(periodical);
									}
								}.bind( this )
								var periodical = fx.periodical(1); 
							}
						}
					}
				}.bind( this ),
				'onComplete': function( el , event ) 
				{
					if (this.centerStartTrans == false)
					{
						this.gallery.set( 'class' , 'openHand' );
						this.centerStartTrans = true;
						hh = 0;
						var fx = function()
						{
							hh++;
							this.whileDraging = this.whileDraging * this.options.lossInnertion;
							this.alpha += this.whileDraging;
							if (this.alpha > this.maxLeftAngle)
							{
								this.alpha = this.maxLeftAngle;
							}
							if (this.alpha < this.maxRightAngle)
							{
								this.alpha = this.maxRightAngle;
							}
							this.rewriteImage();
							if (hh > (this.options.iterationDraging - 1))
							{
								this.whileDraging = 0;
								this.imageIsCenter = false;
								this.centerStartTrans = false;
								$clear(periodical);
							}
						}.bind( this )
						var periodical = fx.periodical(1);
					}
					this.draging = false;
				}.bind( this ),
				onCancel : function( el ) 
				{
					if (this.centerStartTrans == false)
					{
						this.calculateComponentsForClick( el );
					}
				}.bind( this )
			} );
		}
	},
	
	calculateGalleryComponents: function()
	{
		for( i = 1 ; i <= this.all ; i++ )
		{
			this.im = this.images.get( i );
			this.angle = this.maxRightAngle + i * this.angleForElement;
			this.calculateComponentsStyle();
			this.imageId = 'el' + i;
			this.imageClass = 'gallery';
			for ( j = 0 ; j <= 3 ; j++)
			{
				this.myImages[ ( i - 1 ) * 4 + j ].set ( 'id' , this.imageId );
				this.myImages[ ( i - 1 ) * 4 + j ].set ( 'class' , this.imageClass );
				this.myImages[ ( i - 1 ) * 4 + j ].set ( 'angle' , this.angle );
			}
			this.tmpImage[ i ] = this.myImages[ ( i - 1 ) * 4 + this.imageSrc.toInt() ];
			this.tmpImage[ i ].setStyle( 'top' , this.top );
			this.tmpImage[ i ].setStyle( 'left' , this.left );
			this.tmpImage[ i ].setStyle( 'z-index' , this.zindex );
			this.tmpImage[ i ].inject( this.gallery );
		}
	},
	
	calculateComponentsForClick: function( thisImage )
	{
		
		this.thisImage = thisImage;
		if ( (this.imageIsCenter == false) && (this.centerStartTrans == false))
		{

			var k = ( -1 ) * this.thisImage.get( 'angle' ).toFloat();
			var m = k - this.alpha;
			if (Math.abs(m) < ( this.angleForElement - ( this.angleForElement / 2) ) )
			{
				this.im = this.images.get( this.thisImage.id.substring( 2, 4 ).toInt() );
				this.thisImage.set( 'src' , this.im.get( 'fullImage' ) );
				this.thisImage.set( 'width' , this.options.iWidth );
				this.thisImage.set( 'height' , this.options.iHeight );
				this.centerStartTrans = true;
				this.centerCurrentTop = this.thisImage.getStyle( 'top' ).toFloat();
				this.centerCurrentLeft = this.thisImage.getStyle( 'left' ).toFloat();
				var g = 0;
				var fx = function()
				{
					g++;
					this.cetnerImageSize += this.options.centerImageMaxSize / this.options.iterationCenter;
					this.calculateCenterImage( this.thisImage );
					if (g > (this.options.iterationCenter - 1))
					{
						this.centerCurrentImg = this.thisImage;
						this.cetnerImageSize = 200;
						this.imageIsCenter = true;
						this.centerStartTrans = false;
						$clear(periodical);
					}
				}.bind( this )
				var periodical = fx.periodical(1); 
			}
			else
			{
				if (this.centerStartTrans == false)
				{
					this.centerStartTrans = true;
					var h = 0;
					var fx = function()
					{
						h++;
						this.alpha += ( m / this.options.iterationClick );
						this.rewriteImage();
						if (h > (this.options.iterationClick - 1))
						{
							this.centerStartTrans = false;
							$clear(periodical);
						}
					}.bind( this )
					var periodical = fx.periodical(1); 
				}
			}
		}
		else
		{
			if ( this.centerStartTrans == false )
			{
				this.centerStartTrans = true;
				g = 0;
				var fx = function()
				{
					g++;
					
					this.cetnerImageSize -= this.options.centerImageMaxSize / this.options.iterationCenter;
					this.calculateCenterImage( this.centerCurrentImg );
					if (g > (this.options.iterationCenter - 1))
					{
						
						this.cetnerImageSize = 100;
						this.imageIsCenter = false;
						this.centerStartTrans = false;
						this.im = this.images.get( this.thisImage.id.substring( 2, 4 ).toInt() );
						this.thisImage.set( 'src' , this.im.get( 'centerImage' ) );
						$clear(periodical);
					}
				}.bind( this )
				var periodical = fx.periodical(1); 
			}
		}
	},
	
	calculateCenterImage: function( thisImage)
	{
		this.thisImage = thisImage;
		var hMax = this.options.iHeight * (this.cetnerImageSize / 100);
		var wMax = this.options.iWidth * (this.cetnerImageSize / 100);
		this.thisImage.set( 'width' , wMax);
		this.thisImage.set( 'height' , hMax);
		this.thisImage.setStyle( 'top' , (this.centerCurrentTop + (this.options.iHeight / 2) ) - hMax / 2);
		this.thisImage.setStyle( 'left' , (this.centerCurrentLeft + (this.options.iWidth / 2) ) - wMax / 2 );
		
	},
	
	calculateComponentsForScroll: function()
	{
		if ( (this.imageIsCenter == false) && (this.centerStartTrans == false) )
		{
			this.centerStartTrans = true;
			if (this.wheel > 0)
			{
				var k = this.alpha - this.angleForElement;
			}
			if (this.wheel < 0)
			{
				var k = this.alpha + this.angleForElement;
			}
			if (k > this.maxLeftAngle)
			{
				k = this.maxLeftAngle;
			}
			if (k < this.maxRightAngle)
			{
				k = this.maxRightAngle;
			}
			var m = ( k + 720 ) - ( this.alpha + 720 );
			var h = 0;
			if (this.startWheel == false)
			{
				this.startWheel = true;
				var fx = function()
				{
					h++;
					this.alpha += ( m / this.options.iterationScroll );
					this.rewriteImage();
					if (h > (this.options.iterationScroll - 1))
					{
						this.startWheel = false;
						this.centerStartTrans = false;
						$clear(periodical);
					}
				}.bind( this )
				var periodical = fx.periodical(1); 
			}
		}
		else
		{
			if ( this.centerStartTrans == false )
			{
				this.centerStartTrans = true;

				g = 0;
				var fx = function()
				{
					g++;
					this.cetnerImageSize -= this.options.centerImageMaxSize / this.options.iterationCenter;
					this.calculateCenterImage( this.centerCurrentImg );
					if (g > (this.options.iterationCenter - 1))
					{
						this.cetnerImageSize = 100;
						this.imageIsCenter = false;
						this.centerStartTrans = false;
						$clear(periodical);
					}
				}.bind( this )
				var periodical = fx.periodical(1); 
			}
		}
	},
	
	calculateComponentsStyle: function()
	{
		var ang = this.angle;
		if (ang > 90)
		{
			ang = 90;
		}
		if (ang < -90)
		{
			ang = -90;
		}
		var sin = Math.sin( ( this.alpha + ang ) * ( Math.PI / 180 ) );
		this.zindex = 1000 - 1000 * Math.abs( sin );
		if ( sin < 0 )
		{
			this.imageSrc = 0;
			this.left = ( this.gWidth / 2 ) + this.radius * sin - ( this.options.ilWidth / 2 );
		}
		if ( sin > 0 )
		{
			this.imageSrc = 1;
			this.left = ( this.gWidth / 2 ) + this.radius * sin - ( this.options.ilWidth / 2 );
		}
		if ( (this.zindex > this.options.centerLR) && ( this.isCenter == false ) )
		{
			this.isCenter = true;
			this.imageSrc = 2;
			this.left = ( this.gWidth / 2 ) + this.radius * sin - ( this.options.iWidth / 2 );
			this.zindex = 1001;
		}
	},
	
	recalculateComponentsStyle: function( i )
	{
		this.i = i;
		var a = ( this.alpha.toFloat() + this.tmpImage[ this.i ].get( 'angle' ).toFloat() );
		if (a > 90)
		{
			a = 90;
		}
		if (a < -90)
		{
			a = -90;
		}
		var sin = Math.sin( a * ( Math.PI / 180 ) );
		this.zindex = 1000 - 1000 * Math.abs( sin );
		
		if ( sin < 0 )
		{
			this.imageSrc = 0;
			this.left = ( this.gWidth / 2 ) + this.radius * sin - ( this.options.ilWidth / 2 );
		}
		if ( sin > 0 )
		{
			this.imageSrc = 1;
			this.left = ( this.gWidth / 2 ) + this.radius * sin - ( this.options.ilWidth / 2 );
		}
		if ( (this.zindex > this.options.centerLR) && ( this.isCenter == false ) )
		{
			this.isCenter = true;
			this.imageSrc = 2;
			this.left = ( this.gWidth / 2 ) + this.radius * sin - ( this.options.iWidth / 2 );
			this.zindex = 1001;
		}
	},
	
	rewriteImage: function()
	{
		this.isCenter = false;
		for( i = 1 ; i <= this.all ; i++ )
		{
			//this.im = this.images.get( i );
			this.recalculateComponentsStyle( i );
			this.tmpImage[ i ].dispose();
			this.tmpImage[ i ] = this.myImages[ ( i - 1 ) * 4 + this.imageSrc.toInt() ];
			this.tmpImage[ i ].setStyle( 'top' , this.top );
			this.tmpImage[ i ].setStyle( 'left' , this.left );
			this.tmpImage[ i ].setStyle( 'z-index' , this.zindex );
			this.tmpImage[ i ].inject( this.gallery );
		}
		this.isCenter = false;
	}
	
} );