Event.observe(window,'load',function(){
//alert('chargement du nouvel objet');

	var Gallery= new ScrollObject;
	Gallery.init();
	
	//set scroll options (timeout,step)
	$('img-holder').setFXOptions(30,5);
	
	Gallery.start();
	
	displayPics();
	
	//var myBigPhoto= new BigPhoto;
	//myBigPhoto.init();
	
	//myBigPhoto.start();
	
	//Event.observe("photo","mouseover",function(){	displayPics();});
	

});




//Yes, i adimt, this was bit inspired by moo.fx :]

var MyFX={
	//set some basic options, like timeout and step for scroll
	// (less means smoother scroll)
	setFXOptions: function(element,timeout,step){
		var element=$(element);
		element.fxoptions={
			timeout:timeout,
			step:step,
			timeoutHandler:{},
			active:false
		}

	},

	scrolLeft:function(element,step){
		if(element.fxoptions.active) element.fxoptions.active=false;
		element=$(element);
		var margin=element.getStyle('marginLeft');
		margin=parseInt(margin.replace('px',''));
		if(margin<10)
		{
			margin=margin+element.fxoptions.step;
			element.setStyle({marginLeft:margin+'px'});
		}
 
		element.fxoptions.timeoutHandler=setTimeout(element.scrolLeft.bind(element), element.fxoptions.timeout);

	},
	
	scrolRight:function(element,step){
		element=$(element);
		var margin=element.getStyle('marginLeft');
		margin=parseInt(margin.replace('px',''));
		if(margin>-2400)
		{
		margin=margin-element.fxoptions.step;
		element.setStyle({marginLeft:margin+'px'});
		}

		element.fxoptions.timeoutHandler=setTimeout(element.scrolRight.bind(element), element.fxoptions.timeout);

	},
	stopScroll:function(element){
		element=$(element);
		clearTimeout(element.fxoptions.timeoutHandler);
		element.fxoptions.active=true;
	}

}

//Extend element methods with our FX functions that we use for scrolling
Element.addMethods(MyFX);




var ScrollObject = function(){
	
	this.init=function()
	{
		this.options={};
		this.options['elementsNum']=0;
				
	}	
	
	
	this.start=function()
	{
	
		//$('img-holder').setStyle({width:((this.options['elementsNum']*this.options['width'])+(this.options['elementsNum'])*12)+'px'});
		//$('img-holder').setStyle({marginLeft:-(((this.options['elementsNum']*this.options['width'])+(this.options['elementsNum'])*12))/2+300+'px'});
				
		//Add event listeners on scroll buttons
		$('md').observe('mouseover',function(event){
			$('img-holder').scrolRight();
			
		});	
		$('md').observe('mouseout',function(event){ 
			$('img-holder').stopScroll();
		
		});	

		$('ml').observe('mouseover',function(event){
			$('img-holder').scrolLeft();
		});	
		$('ml').observe('mouseout',function(event){
			$('img-holder').stopScroll();
		});
				
	}

}

var BigPhoto = function(){
	
	this.init=function()
	{
		this.options={};
		this.options['elementsNum']=0;
				
	}	
	
	
	this.start=function()
	{

		var liens = $('galerie_mini').getElementsByTagName('a') ;

		for (var i = 0 ; i < liens.length ; ++i) 
		{
			// Au clique sur ces liens 
			liens[i].onmouseover = function() 
			{
				
				return false; // Et pour finir on inhibe l'action réelle du lien
				
			}
			liens[i].onmouseout = function() 
			{
			
				return false; // Et pour finir on inhibe l'action réelle du lien
			}
		};		
		
		
		
	}

}

function displayPics()
	{
		var photos = $('galerie_mini') ;
		// On récupère l'élément ayant pour id galerie_mini
		var liens = photos.getElementsByTagName('a') ;
		// On récupère dans une variable tous les liens contenu dans galerie_mini
		var big_photo = $('big_pict') ;
		// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
			
		for(var i = 0 ; i < liens.length ; i++)
		// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
		{
			liens[i].onmouseover = function()
			// Au survolsur ces liens
			{
				big_photo.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
				big_photo.alt = this.title ; // On change son titre
				return false ; // Et pour finir on inhibe l'action réelle du lien
			}
			
			liens[i].onclick = function()
			{
				return false;
			}
		}
	}