// JavaScript Document
var infinite_image_slider = new Class({ 
						   
	JQuery : "infinite_image_slider", 
	
   	initialize : function(div, duree){
	
		this.id = div;
		this.div = jQuery('#'+div);
		this.conteneur = jQuery('#'+div+' .conteneur');
		
		this.encours = 0;
		
		if(duree == undefined){
			this.duree = 500;
		} else {
			this.duree = duree;
		}
		
		// largeur auto
		larg = 0;
		jQuery('#'+div+' img').each(function(){
			larg += jQuery(this).width();
		});
		jQuery('#'+div+' .conteneur').width(larg);
		
		// alignements
		jQuery('#'+div+' .conteneur img').css({'margin' : '0px', 'padding' : '0px', 'float' : 'left'});
		
		// images
		this.first_img = jQuery('#'+div+' img:first');
		
		// scroll
		this.scrollRank = 0;
		this.scrollPas = this.first_img.width();
	},
	
	update_first : function(){
		this.first_img = jQuery('#'+this.id+' img:first');
	},
	
	scrollLeft : function(duree){
		if(this.encours == 0){
			this.encours = 1;
			if(duree == undefined){
				duree = this.duree;
			}
			// on scrolle d'un cran
			slider = this;
			this.conteneur.animate({marginLeft: -1*slider.scrollPas}, duree, function(){
				// on met à jour la 1ère image
				slider.update_first();
				// une fois scrollé on remet l'image à la fin
				slider.first_img.detach().appendTo(slider.conteneur);
				// et on rétablit le scroll 0
				jQuery(this).css('marginLeft', '0px');
				
				slider.encours = 0;
			});
		}
	},
	
	autoplay : function(periode){
		if(periode == undefined){
			if(this.periode == undefined){
				this.periode = 3000;
			}
		} else {
			this.periode = periode;
		}
		this.scrollLeft();
		this.autoplay.delay(this.periode, this);
	}
});

var gendrot_carroussel = new Class({ 
						   
	JQuery : "gendrot_carroussel", 
	
   	initialize : function(div, duree){
		
		this.id = div;
		this.div = jQuery('#'+div);
		this.conteneur = jQuery('#'+div+' .conteneur');
		
		if(duree == undefined){
			this.duree = 500;
		} else {
			this.duree = duree;
		}
		
		this.L = jQuery('#'+div+' img:first').width();
		this.H = jQuery('#'+div+' img:first').height();
		
		// largeur auto
		larg = 0;
		jQuery('#'+div+' img').each(function(){
			larg += jQuery(this).width();
		});
		jQuery('#'+div+' .conteneur').width(larg);
		jQuery('#'+div+' .conteneur div').width(jQuery('#'+div+' img:first').width());
		jQuery('#'+div+' .conteneur div').height(jQuery('#'+div+' img:first').height());
		
		// alignements
		jQuery('#'+div+' .conteneur img').css({'margin': '0px', 'padding': '0px', 'vertical-align': 'bottom', 'position': 'relative', 'z-index': '1'});
		jQuery('#'+div+' .conteneur div').css({'margin': '0px', 'padding': '0px', 'float': 'left', 'vertical-align': 'bottom'});
		
		// images
		this.images = new Array();
		i = 1;
		car = this;
		jQuery('#'+div+' img').each(function(){
			jQuery(this).attr('id', 'img'+i);
			car.images.push(jQuery(this));
		});
		this.central_img = this.images[2];
		
		// scroll
		this.scrollRank = 0;
		this.scrollPas = this.images[0].width();
		
		// init all images
		jQuery('#'+div+' img').each(function(){
			jQuery(this).width('0%');
			jQuery(this).height('0%');
			jQuery(this).css('margin-top', '100%');
		});
		
		this.encours = 0;
		//this.scrollLeft();
	},
	
	update_images : function(){
		this.images = new Array();
		i = 1;
		car = this;
		jQuery('#'+this.id+' img').each(function(){
			jQuery(this).attr('id', 'img'+i);
			car.images.push(jQuery(this));
		});
		this.central_img = this.images[2];
	},
	
	scrollLeft : function(duree){
		if(this.encours == 0){
			if(duree == undefined){
				duree = this.duree;
			}
			car = this;
			car.update_images();
			
			this.encours = 1;
			
			// img 0 -> nada
			this.images[0].animate({width: '0%', height: '0%', marginTop: (car.H)+'px'}, duree);
			//this.images[0].parent().animate({marginLeft: (0.85*car.L)+'px'}, duree);
			
			// img 1 -> mini
			this.images[1].animate({width: '35%', height: '35%', opacity: 0.1, marginTop: (0.65*car.H)+'px'}, duree);
			this.images[1].parent().animate({marginLeft: '0px'}, duree);
			
			// img 2 -> moy
			this.images[2].animate({width: '60%', height: '60%', opacity: 0.5, marginTop: (0.4*car.H)+'px'}, duree);
			this.images[2].parent().animate({marginLeft: (-1*(0.9)*car.L)+'px'}, duree);
			
			// img 3 -> normal
			this.images[3].animate({width: '100%', height: '100%', opacity: 1, marginTop: '0px'}, duree);
			this.images[3].parent().animate({marginLeft: (-1*0.6*car.L)+'px'}, duree);
			
			// img 4 -> moy
			this.images[4].animate({width: '60%', height: '60%', opacity: 0.5, marginTop: (0.4*car.H)+'px'}, duree);
			this.images[4].parent().animate({marginLeft: (-1*0.2*car.L)+'px'}, duree);
			
			// img 5 -> mini
			this.images[5].animate({width: '35%', height: '35%', opacity: 0.1, marginTop: (0.65*car.H)+'px'}, duree);	
			this.images[5].parent().animate({marginLeft: (-1*(0.65)*car.L)+'px'}, duree);	
			
			// z-index
			this.images[1].css('z-index', '1');
			this.images[2].css('z-index', '2');
			this.images[3].css('z-index', '3');
			this.images[4].css('z-index', '2');
			this.images[5].css('z-index', '1');
			
			// on scrolle l'ensemble d'un cran
			car = this;
			this.conteneur.animate({marginLeft: -1*car.scrollPas}, duree, function(){
				// on met à jour la 1ère image
				car.update_images();
				// une fois scrollé on remet l'image à la fin
				car.images[0].parent().detach().appendTo(car.conteneur);
				// et on rétablit le scroll 0
				jQuery(this).css('marginLeft', '0px');
				
				car.encours = 0;
			});
			
			// légende
			titre = this.images[3].parent().find('h3').html();
			texte = this.images[3].parent().find('p').html();
			
			this.div.find('#legende').fadeOut(duree/2, function(){
				$(this).find('h3').html(titre);
				$(this).find('p').html(texte);
				$(this).fadeIn(duree/2);
			});
		}
	},
	
	autoplay : function(periode){
		if(periode == undefined){
			if(this.periode == undefined){
				this.periode = 3000;
			}
		} else {
			this.periode = periode;
		}
		this.scrollLeft();
		this.autoplay.delay(this.periode, this);
	}
});