var galerie = Class.create({

    initialize: function( Galerie_Timing ) {
		this.timing		= Galerie_Timing;
		
		this.divGalerie = "galerie";
		
		this.divImg		= "img";
		this.cntImg		= "imgContent";

		this.divVig		= "divVignettes";
		this.cntVig		= "divContentVignettes";
		this.sldTop		= "sliderTop";
		this.sldBot		= "sliderBottom";
		this.divSld		= "slider";
		this.cntSld		= "div_slider";
		this.btnSld		= "btn_slider";

		this.btnDia		= "btnDiaporama";
		this.btnVig		= "btnVignettes";
		this.galDia		= "galerieDiaporama";
		this.galVig		= "galerieVignettes";

		this.btnRight	= "btnRight";
		this.btnLeft	= "btnLeft";
		this.btnZoom	= "btnZoom";

		this.imgX		= 0;
		this.imgY		= 0;
		this.imgLeft	= 0;
		this.imgTop		= 0;
		this.slider		= false;
		this.activNum	= 1;
		this.nbLinks	= 0;

		this.loadGalerie();
    },

	loadGalerie: function() {
		var idGalerie				= $( this.divGalerie ).title;
		$( this.divGalerie ).title	= '' ;
		var options	  = { 
			asynchronous: false ,
			method: "post" ,
			postBody: 'IdDir=' + idGalerie , 
			onSuccess: function ( xhr ) {
				$( this.divGalerie ).innerHTML = xhr.responseText;
				Cufon.set( 'fontFamily', 'Menu' ).replace( '#galerie div#onglet a' );
				this.initSlider();
				this.initGalerie();
				this.getListLinks() ;
				this.setNbLinks() ;
				this.getInfosDivs() ;
				this.setStyleDivs() ;
				this.observeLinks() ;
			}.bind( this )
		  } 

		var ajaxCall = new Ajax.Request( "galerie.php", options );
	},

	initGalerie: function() {
		Event.observe( this.btnDia, "click", this.initDiaporama.bind( this ) ) ;
		Event.observe( this.btnVig, "click", this.initVignettes.bind( this ) ) ;
	},

	initDiaporama: function() {
		$( this.btnVig ).removeClassName( 'selected' ) ;
		$( this.btnDia ).addClassName( 'selected' ) ;
		$( this.galVig ).hide();
		$( this.galDia ).setStyle({ visibility: 'visible' });
		$( this.galDia ).show();
	},

	initVignettes: function() {
		$( this.btnDia ).removeClassName( 'selected' ) ;
		$( this.btnVig ).addClassName( 'selected' ) ;
		$( this.galDia ).hide();
		$( this.galVig ).show();
	},

	getListLinks: function() {
		this.listLinks	= $A( d.getElementsByClassName( 'imageLien' ) );
	},

	setNbLinks: function() {
		this.nbLinks	= this.listLinks.length;
	},

	stopObserveLinks: function() {
		Event.stopObserving( $( this.btnRight ) ) ;
		Event.stopObserving( $( this.btnLeft ) ) ;

		this.listLinks.each( function( links ) {
			Event.stopObserving( links ) ;
		});
	},

	observeLinks: function() {
		Event.observe( $( this.btnRight ), "click", this.animToNum.bind( this ) ) ;
		Event.observe( $( this.btnLeft ), "click", this.animToNum.bind( this ) ) ;

		this.listLinks.each( function( links ) {
			Event.observe( links, "click", this.animToNum.bind( this ) ) ;
		}.bind( this ));
	},

	getInfosDivs: function() {
		this.DimImg = $( this.divImg ).getDimensions() ;	
	},

	setStyleDivs: function() {
		var widthCntImg = this.nbLinks * this.DimImg.width ;

		$( this.cntImg ).setStyle({ width: widthCntImg + 'px' });
		$( this.cntImg ).setStyle({ left: $( this.cntImg ).offsetLeft + 'px' });
		$( this.cntImg ).setStyle({ top: $( this.cntImg ).offsetTop + 'px' });
		$( this.cntImg ).setStyle({ bottom: 'auto' });
	},
	
	getOffsetLeft: function() {
		this.imgLeft	= $( this.cntImg ).offsetLeft;
		this.imgTop		= $( this.cntImg ).offsetTop;
	},
	
	returnIntLink: function( element ) {
		var idElement	= element.title;
		var tabId		= idElement.split( "_" );
		var intElement	= tabId[ 1 ];

		return intElement;
	},

	animToNum: function(e) {
		if( ! Event.element(e).hasClassName( "linkLock" ) ) {

			this.initDiaporama();
			var intElement = this.returnIntLink( Event.element(e) );
			var lienImage  = $( 'photo_' + intElement ).style.backgroundImage ;
			lienImage	   = lienImage.replace( '"', '' );
			lienImage	   = lienImage.replace( '"', '' );
			lienImage	   = lienImage.replace( 'url(', '' );
			lienImage	   = lienImage.replace( ')', '' );
			lienImage	   = lienImage.replace( '1-105-70-0-', '' );

			$( 'photo_' + this.activNum ).removeClassName( "linkLock" ) ;
			$( 'photo_' + intElement ).addClassName( "linkLock" ) ;
			$( this.btnZoom ).href = lienImage ;

			this.stopObserveLinks();
			this.getOffsetLeft() ;
			this.loadAnimImg( intElement );
			this.animImg();

			this.activNum	= intElement;
			var next		= parseInt( this.activNum ) + 1;
			var prev		= parseInt( this.activNum ) - 1;

			if( next > this.nbLinks ) {
				$( this.btnRight ).title = "" ;
				$( this.btnRight ).addClassName( "linkLock" ) ;
			}
			else {
				$( this.btnRight ).title = "photo_" + next ;
				$( this.btnRight ).removeClassName( "linkLock" ) ;
			}
			
			if( prev <= 0 ) {
				$( this.btnLeft ).title = "" ;
				$( this.btnLeft ).addClassName( "linkLock" ) ;
			}
			else {
				$( this.btnLeft ).title = "photo_" + prev ;
				$( this.btnLeft ).removeClassName( "linkLock" ) ;
			}
		}

	},

	loadAnimImg: function( intElement ) {
		this.imgX = this.imgLeft - ( ( this.activNum - intElement ) * this.DimImg.width );
		this.imgY = 0 ;
	},

	animImg: function() {
		new Effect.Move( this.cntImg, { 
			x: this.imgX, 
			y: this.imgY, 
			mode: 'absolute' ,
			duration: this.timing,
			afterFinish: function() {
				this.observeLinks() ;
			}.bind( this )
		});
	},

	scrollVertical: function( value, element, slider ) {
		element.scrollTop	= Math.round( value / this.slider.maximum * ( element.scrollHeight - element.offsetHeight ) );
	},

	handle: function( delta ) {
		this.slider.setValueBy( -delta );
	},

	wheel: function( event ){
		var delta = 0;
		if ( ! event ) {
			event = w.event;
		}
		if ( event.wheelDelta ) {
			delta = event.wheelDelta / 1200;
			if ( w.opera ) {
				delta = -delta;
			}
		} 
		else if ( event.detail ) { 
			delta = - event.detail / 30;
		}
		if ( delta ) {
			this.handle( delta );
		}
		if ( event.preventDefault ) {
			event.preventDefault();
		}	
		event.returnValue = false;
	},

	sliderTop: function() {
		this.handle( 0.1 );
	},

	sliderBottom: function() {
		this.handle( -0.1 );
	},

	sliderStop: function() {
		this.down = false ;
	},
	
	initSlider: function() {
		if( parseInt( $( this.cntVig ).getHeight() ) > parseInt( $( this.divVig ).getHeight() ) ) {
			new Effect.Appear( this.divSld, { 
				duration: 0.2 ,
				afterFinish: function() {
					this.slider = new Control.Slider( this.btnSld, this.cntSld, {
						axis: 'vertical',
						onSlide: function(v) { this.scrollVertical(v, $( this.divVig ), this.slider );  }.bind( this ),
						onChange: function(v) { this.scrollVertical(v, $( this.divVig ), this.slider ); }.bind( this )
					});
					Event.observe( this.divVig, 'DOMMouseScroll', this.wheel.bind( this ) );
					Event.observe( this.divVig, 'mousewheel', this.wheel.bind( this ) );
					Event.observe( this.sldTop, 'click', this.sliderTop.bind( this ) );
					Event.observe( this.sldBot, 'click', this.sliderBottom.bind( this ) );
				}.bind( this )
			});
		}		
	}
});