/* 

carrousel.js
CarrouselA    ->   Animation en Slide
CarrouselB    ->   Animation en Fade   
    
*/

var carrouselA ={

  nbslideA : 0,
  nbCurrent : 1,
  elemCurrent : null,
  elem: null,
  timer : null,

  init : function(elem){
    this.nbslideA = elem.find('.slideA').length;

    // Creer la pagination
    elem.append('<div class ="navigationA"></div>');
    for (var i=1;i<=this.nbslideA;i++){
      elem.find('.navigationA').append('<span>'+i+'</span>');
    }
    elem.find('.navigationA span').click(function(){ carrouselA.gotoslideA($(this).text());});
   
    // On elargit la div navigation en fonction du nbr de slide
    var cssLargeurNav = {"width":parseInt(this.nbslideA) * 25};
    elem.find('.navigationA').css(cssLargeurNav);
    
    
    // Initialisation du carrouselA
    this.elem = elem;
    elem.find('.slideA').hide();
    elem.find('.slideA:first').show();
    this.elemCurrent = elem.find('.slideA:first');
    this.elem.find(".navigationA span:first").addClass("active");
  
  
    // On cre le timer 
    carrouselA.play();
    
    // Stop quand on passe dessus
    elem.mouseover(carrouselA.stop);
    elem.mouseout(carrouselA.play);
  },

 gotoslideA : function(num){
  if(num==this.nbCurrent){ return false; }
    
    /* Animation en slideA   */	

    var sens = 1;
    if(num<this.nbCurrent){ sens=-1;}
    var cssDeb = {"left":sens*this.elem.width()};
    var cssFin = {"left":-sens*this.elem.width()};
    this.elem.find('#slideA'+num).show().css(cssDeb);
    this.elem.find('#slideA'+num).animate({"top":0,left:0},500);
    this.elemCurrent.animate(cssFin,500);
    
    /* Anime Titre 

    this.elemCurrent.find(".visu").fadeOut();    
    this.elem.find('#slideA'+num).show();
    this.elem.find('#slideA'+num+" .visu").hide().fadeIn();

    var titleHeight = this.elemCurrent.find(".title").height();
 
    this.elemCurrent.find(".title").animate({"bottom": - titleHeight},500);    
    this.elem.find("#slideA"+num+" .title").css("bottom",- titleHeight).animate({"bottom": 0},500);    
    
    */    

    this.elem.find(".navigationA span").removeClass("active");
    this.elem.find(".navigationA span:eq("+ (num-1) +")").addClass("active");
    this.nbCurrent = num;
    this.elemCurrent = this.elem.find('#slideA'+num);
  },

  next : function(){
    var num = parseInt(this.nbCurrent) + 1;
    if (num>this.nbslideA){
      num=1;
    }
    this.gotoslideA(num);
  },

  prev : function(){
    var num = parseInt(this.nbCurrent) - 1;
    if (num<1){
      num=parseInt(this.nbslideA);
    }
    this.gotoslideA(num);
  },

  stop : function(){
    window.clearInterval(carrouselA.timer);
  },  

  play : function(){
    window.clearInterval(carrouselA.timer);
    carrouselA.timer = window.setInterval('carrouselA.next()',5000);
  } 

  
}

$(function(){
  carrouselA.init($('#carrouselA'));
})

var carrouselB ={

  nbslideB : 0,
  nbCurrent : 1,
  elemCurrent : null,
  elem: null,
  timer : null,

  init : function(elem){
    this.nbslideB = elem.find('.slideB').length;

    // Creer la pagination
    elem.append('<div class ="navigationB"></div>');
    for (var i=1;i<=this.nbslideB;i++){
      elem.find('.navigationB').append('<span>'+i+'</span>');
    }
    elem.find('.navigationB span').click(function(){ carrouselB.gotoslideB($(this).text());});
    
    // On cre le next 
    //elem.append('<div class ="navigationBNext"></div>');    
    //elem.find('.navigationBNext').append('<div> </div>');
    //elem.find('.navigationBNext div').click(function(){ carrouselB.next();});
    // On cre le prev
    //elem.append('<div class ="navigationBPrev"></div>');    
    //elem.find('.navigationBPrev').append('<div> </div>');
    //elem.find('.navigationBPrev div').click(function(){ carrouselB.prev();});

    // On elargit la div navigation en fonction du nbr de slide
    var cssLargeurNav = {"width":parseInt(this.nbslideB) * 25};
    elem.find('.navigationB').css(cssLargeurNav);
    
    // Initialisation du carrouselB
    this.elem = elem;
    elem.find('.slideB').hide();
    elem.find('.slideB:first').show();
    this.elemCurrent = elem.find('.slideB:first');
    this.elem.find(".navigationB span:first").addClass("active");
  
  
    // On cre le timer 
    carrouselB.play();
    
    // Stop quand on passe dessus
    elem.mouseover(carrouselB.stop);
    elem.mouseout(carrouselB.play);
  },

 gotoslideB : function(num){
  if(num==this.nbCurrent){ return false; }
    
    /* Animation en fade     */

    this.elemCurrent.fadeOut();
    this.elem.find('#slideB'+num).fadeIn();
    
    /* Animation en slideB   	

    var sens = 1;
    if(num<this.nbCurrent){ sens=-1;}
    var cssDeb = {"left":sens*this.elem.width()};
    var cssFin = {"left":-sens*this.elem.width()};
    this.elem.find('#slideB'+num).show().css(cssDeb);
    this.elem.find('#slideB'+num).animate({"top":0,left:0},500);
    this.elemCurrent.animate(cssFin,500);
    
    */
    /* Anime Titre 

    this.elemCurrent.find(".visuB").fadeOut();    
    this.elem.find('#slideB'+num).show();
    this.elem.find('#slideB'+num+" .visu").hide().fadeIn();

    var titleHeight = this.elemCurrent.find(".titleB").height();
 
    this.elemCurrent.find(".titleB").animate({"bottom": - titleHeight},500);    
    this.elem.find("#slideB"+num+" .titleB").css("bottom",- titleHeight).animate({"bottom": 0},500);    
    
    */    

    this.elem.find(".navigationB span").removeClass("active");
    this.elem.find(".navigationB span:eq("+ (num-1) +")").addClass("active");
    this.nbCurrent = num;
    this.elemCurrent = this.elem.find('#slideB'+num);
  },

  next : function(){
    var num = parseInt(this.nbCurrent) + 1;
    if (num>this.nbslideB){
      num=1;
    }
    this.gotoslideB(num);
  },

  prev : function(){
    var num = parseInt(this.nbCurrent) - 1;
    if (num<1){
      num=parseInt(this.nbslideB);
    }
    this.gotoslideB(num);
  },

  stop : function(){
    window.clearInterval(carrouselB.timer);
  },  

  play : function(){
    window.clearInterval(carrouselB.timer);
    carrouselB.timer = window.setInterval('carrouselB.next()',5000);
  } 

  
}

$(function(){
  carrouselB.init($('#carrouselB'));
});
;