function Gallerie(){
	
	this.defaults = {
		id_conteneur : '',
		width : 550,
		height: 470,
		deplacement : 252
	}
	
	this.conteneur;
	this.slideshow;
	this.s_w;
	this.s_h;
	this.nav;
	this.thumbs;
	this.prev;
	this.next;
	this.pos;
	this.ratio;
	

	this.init = function ( options ) {
		options = options || {};
		$.extend( this.defaults, options );
		this.settings = this.defaults ;
		
		this.conteneur = $( '#' + this.settings.id_conteneur );
		this.thumbs = this.conteneur.find('.thumbs');
		this.nav = this.conteneur.find('.scroller_nav');

		this.slideshow = this.conteneur.find('.slideshow');
		
		this.pos = 0;
		
		this.prev = this.conteneur.find('.prev');
		this.next = this.conteneur.find('.next');
	
		var width = 0;
		var gal = this;
		
		this.thumbs.find( 'li' ).each( function( key , item ){
			width += $( item ).innerWidth() + 18;
			$( item ).find('a img').css('opacity' , '0.5');
		});
		
		this.s_w = this.settings.width;
		this.s_h = this.settings.height - 70;
		
		var slideshow = this.slideshow;
		
		this.ratio = this.s_h / this.s_w;			
		
		this.thumbs.find( 'a' ).hover( function(){
			if( !$(this).hasClass( 'selected_thumb' ) )
				$( this ).children().css('opacity' , '1');
		},function(){
			if( !$(this).hasClass( 'selected_thumb' ) )
				$( this ).children().css('opacity' , '0.6');		
		});
		
		this.thumbs.find( 'a' ).click( { conteneur : this.conteneur } , function(event) {
				event.preventDefault();
				
				event.data.conteneur.find('.thumb img').css('opacity' , '0.6');
				event.data.conteneur.find('.thumb').removeClass('selected_thumb');
				
				$(this).addClass('selected_thumb');
				$(this).children().css('opacity' , '1');
				
				var url = $(this).attr('href');
				var img = $('<img/>',{ src : url , css: { 'display': 'none'} } );
				slideshow.find('img').fadeOut(200 , function(){
					$(this).replaceWith( img );
					gal.resize(img);
					img.fadeIn(200);
				}); 
				
			});
		
		this.thumbs.css('width' , width );
		
		var pos = this.pos;
		this.next.click({ dep : this.settings.deplacement , nav : this.thumbs  }, function( ev ){
			ev.preventDefault();
			if(  parseInt( ev.data.nav.css('left') ) > ( -1 * ( width - ev.data.dep ) ) ){
				ev.data.nav.animate({ 'left' : "-=" + ev.data.dep + "px"} , 'normal' );
			}
		});
		
		this.prev.click({ dep : this.settings.deplacement ,nav : this.thumbs  }, function( ev ){
			ev.preventDefault();
			if( parseInt( ev.data.nav.css('left') )  < 0 ){
				ev.data.nav.animate({ 'left' : "+=" + ev.data.dep + "px"} , 'normal' );
			}
		});
		
		setTimeout( function(){ gal.thumbs.find( 'a' ).first().click() }, 200 );
	}
	
	this.resize = function( img ){
		var ratio_image = parseInt( img.height() ) / parseInt(  img.width() );

		if(  ratio_image  <  this.ratio ){
			img.css('width', this.s_w);
			img.css('height', Math.round( this.s_w *  ratio_image ) );
		}else{
			img.css('width', Math.round( this.s_h  / ratio_image ) );
			img.css('height', this.s_h);
		}
		img.css('margin-top', Math.round( (  this.s_h - parseInt( img.height() ) ) / 2 ) );
	}
	
}
function Gallerie2(){
	
	this.defaults = {
		id_conteneur : '',
		width : 550,
		height: 470,
		deplacement : 252
	}
	
	this.conteneur;
	this.slideshow;
	this.s_w;
	this.s_h;
	this.nav;
	this.thumbs;
	this.prev;
	this.next;
	this.pos;
	this.ratio;
	

	this.init = function ( options ) {
		options = options || {};
		$.extend( this.defaults, options );
		this.settings = this.defaults ;
		
		this.conteneur = $( '#' + this.settings.id_conteneur );
		this.thumbs = this.conteneur.find('.thumbs2');
		this.nav = this.conteneur.find('.scroller_nav');

		this.slideshow = this.conteneur.find('.slideshow2');
		
		this.pos = 0;
		
		this.prev = this.conteneur.find('.prev2');
		this.next = this.conteneur.find('.next2');
	
		var width = 0;
		var gal = this;
		
		this.thumbs.find( 'li' ).each( function( key , item ){
			width += $( item ).find('a img').attr('width') + 100;
			$( item ).find('a img').css('opacity' , '0.5');
		});
		
		this.s_w = this.settings.width;
		this.s_h = this.settings.height - 70;
		
		var slideshow = this.slideshow;
		
		this.ratio = this.s_h / this.s_w;			
		
		this.thumbs.find( 'a' ).hover( function(){
			if( !$(this).hasClass( 'selected_thumb2' ) )
				$( this ).children().css('opacity' , '1');
		},function(){
			if( !$(this).hasClass( 'selected_thumb2' ) )
				$( this ).children().css('opacity' , '0.6');		
		});
		
		this.thumbs.css('width' , width );
		
		var pos = this.pos;
		this.next.click({ dep : this.settings.deplacement , nav : this.thumbs  }, function( ev ){
			ev.preventDefault();
			if(  parseInt( ev.data.nav.css('left') ) > ( -1 * ( width - ev.data.dep ) ) ){
				ev.data.nav.animate({ 'left' : "-=" + ev.data.dep + "px"} , 'normal' );
			}
		});
		
		this.prev.click({ dep : this.settings.deplacement ,nav : this.thumbs  }, function( ev ){
			ev.preventDefault();
			if( parseInt( ev.data.nav.css('left') )  < 0 ){
				ev.data.nav.animate({ 'left' : "+=" + ev.data.dep + "px"} , 'normal' );
			}
		});
		
	}
	
	this.resize = function( img ){
		var ratio_image = parseInt( img.height() ) / parseInt(  img.width() );

		if(  ratio_image  <  this.ratio ){
			img.css('width', this.s_w);
			img.css('height', Math.round( this.s_w *  ratio_image ) );
		}else{
			img.css('width', Math.round( this.s_h  / ratio_image ) );
			img.css('height', this.s_h);
		}
		img.css('margin-top', Math.round( (  this.s_h - parseInt( img.height() ) ) / 2 ) );
	}
	
}