$(document).ready(function(){

  /* ----- SLIDER ----- */
  $sliderTimer = setInterval(nextImage, 6000);
  $imageWidth = 617;
  $imageActuelle = 1;
  $imageTotal = $(".slider img").length;

  $(".slider").css("width", ($imageTotal + 1) * $imageWidth + "px");

  for ($i = 0; $i < $imageTotal; $i++) {
    $(".slider-boutons").append("<span id='"+($i+1)+"' class='circle'><a href='#' onClick='return false'>&nbsp;</a></span>");
    $("#" + ($i + 1) + " a").click(function(event) { selectImage(event); });
    $("#" + ($i + 1) + " a").css("text-decoration", "none");
  }

  $("#" + $imageActuelle).css("background-color", "#E054AA");

  function nextImage(){
    $("#" + $imageActuelle).css("background-color", "#E2DFD8");
    if ($imageActuelle == $imageTotal) { $imageActuelle = 0; }
    $imageActuelle++;
    $deplacement = -($imageWidth + 4) * ($imageActuelle - 1);
    $(".slider").animate({marginLeft:$deplacement}, {duration:600});
    $("#" + $imageActuelle).css("background-color", "#E054AA");
  };

  function selectImage(event) {
    clearInterval($sliderTimer);
    $id = $(event.target).parent().attr("id");
    $id--;
    $deplacement = -($imageWidth + 4) * $id;
    $(".slider").animate({marginLeft:$deplacement}, {duration:600});
    $("#" + $imageActuelle).css("background-color", "#E2DFD8");
    $("#" + ($id + 1)).css("background-color", "#E054AA");
    $imageActuelle = $id + 1;
    $sliderTimer = setInterval(nextImage, 6000);
  };
  
});