var slider_pat = new Class({
/*
 *METHOD
 */
options : {
//divcontainer du dl
container : null ,
//dl
cible : null ,
//stock les parametres du dl
coo : null ,
//tableau des enfants dt
childrenDt : null ,
//tableau des enfants dd
childrenDd : null ,
//tableau tmp
newDt : null ,
//taille total du dl pour aligner les dd
widthTotal : null ,
//taille des dd
ddSize : null ,
//taille des dt
dtSize : null ,
dtBase : 0 ,
//nb de dd
nb : 0 ,
//stock l'element clique
click : 0 ,
//rajout de largeur pour le dt clique
addWidth : 15 ,
//stock le dernier dt clicke
oldClick : null ,
//stock le periodical
periode : null ,
timer : '7000' ,
setMove : true ,
effectsdd : null ,
effectsdt : null
},
/*
 *CONSTRUCTEUR
 */
initialize : function( o , option)
{

    this.option = $merge( this.options , option);
    
    //div avant de dl
    this.options.container = o;
    this.options.container.setStyle('overflow' , 'hidden' );
    
    //recupere le premier dl
    this.options.cible = this.options.container.getFirst();
    
    //je met le dl en absolute et a 0
    this.options.cible.setStyles({
    'position' : 'absolute' ,
    'top' : '0px' 
    });
    
    //coordonne du dl
    this.options.coo = this.options.cible.getCoordinates();
    
     //nb de dt
    this.options.childrenDt = this.options.cible.getChildren('dt');
    //nb de dd
    this.options.childrenDd = this.options.cible.getChildren('dd');
    
    //recupere les tailles
    this.options.dtSize = this.options.cible.getFirst('dt').getCoordinates();
    this.options.ddSize = this.options.cible.getFirst('dd').getCoordinates();
    
    //nb d'enfants
    this.options.nb = this.options.childrenDd.length; 
    
    //largeur total du dl
    this.options.widthTotal = ( this.options.ddSize.width * this.options.nb );
    
    this.dtBase = this.options.coo.top;
    
    
    
    //new tab pour rcuperer les clones
    this.options.newDt = new Hash();
    //closure
    var p = this;
    
    /**
     *je parcour tous les dt et je les clone pour les mettre
     *dans le div et non dans le dl et ensuite je detruit les originaux
     */
    this.options.childrenDt.each(function(val , key){
    
    var t = p;
    //clone chaque dt
    var n = val.clone();
    //je reinjecte le clone dans le div container
    n.inject(t.options.container);
    //je positionne chaque dt
    var l = 0 + (t.options.dtSize.height * key);
    
    n.setStyles( {
    'position' : 'absolute' ,
    'float' : 'none' ,
    'right' : 0 ,
    'top' : l 
    });
    //je lui assign un nombre
    n.nb =  key;
    //je detruit l'originale
    val.destroy();
    //je lui ajoute un event
    n.addEvent('click' , function(evt){
        //appel de la fonction move
        t.move(this);
        t.stopAuto();
    
    });
    //je le rentre dans un nouveau hash
    t.options.newDt.set('key' , n );
    
    })
    //je remplace le tableau de base par les clone
    this.options.childrenDt = this.options.newDt;
   
    //je passe le dl dans la bonne largeur
    this.options.cible.setStyle( 'width' , this.options.widthTotal );
    
    //je fait un premier effet
    this.move(this.options.container.getFirst('dt'));
    
    
    this.autoMove.periodical(this.options.timer , this );
    
    //detruit le loader
    if($('loader') != null)
    {
        $('loader').fade('out');
        //$('loader').destroy().delay('1500');
    }
    
    

    
},
/*
 * Mouvement des dd et dt
 */
move : function( obj )
{
   //pour eviter de clique sur le meme
   if( obj != this.options.oldClick || this.options.oldClick == null)
   {
   
   //je modifie le largeur de l'objet clicke et je reduit l'objet clicke avant
   obj.tween('width' , (this.options.dtSize.width + this.options.addWidth) + 'px' );
   
   obj.addClass('active' );
   
   //si oldclick n'est pas null ,evite les erreurs
   if(this.options.oldClick != null){
   this.options.oldClick.tween('width' , this.options.dtSize.width + 'px' );
   this.options.oldClick.removeClass('active');
   }
   
   //je deplace le dl  
   //this.options.cible.tween('left' , -(this.options.ddSize.width * obj.nb  )); 
   //creation de l'efft pour la transition
   this.options.effectsdd = new Fx.Morph(this.options.cible, {duration: 'long', transition: 'back:out' });
   this.options.effectsdd.start({
    'left': -(this.options.ddSize.width * obj.nb  )
     });


   
   
   //je stock l'objet clique
   this.options.oldClick = obj; 
   
   //je stock le nb de l'obj clique
   this.options.click = obj.nb ;
   
   }
   
},
/*
 *mouvement auto
 */
autoMove : function()
{   

    if( this.options.setMove )
    {
    
    
    //si je suis au dernier je reprend le premier
    if( this.options.click == (this.options.nb-1) )
    {
       var n =  this.options.container.getFirst('dt');
    }
    else
    {
       var n =  this.options.oldClick.getNext();
    }
    
    //appel de la fonction move
    this.move( n );
    
    }
    

},
stopAuto : function()
{
    
    if(this.options.periode != null)
    {   
        $clear(this.options.periode);
    }
    
     this.options.periode = this.setTrueMove.delay('5000' , this );
     this.options.setMove = false;

},

setTrueMove : function()
{

    this.options.setMove = true;

}






});