var nextTimeout;

function showUsTheNth(lenombre, showthenextone){
  $(".currentone").css("zIndex", 0);
  if(!$("#backnum" + lenombre).is(".currentone")){
    $("#backnum" + lenombre).css("zIndex", 1).fadeIn("slow",
    function(){
      $(".currentone").hide().removeClass("currentone");
      $(this).addClass("currentone");
      $(".shown").removeClass("shown")
      $(".showback-" + lenombre).addClass("shown");
      if(showthenextone){
        window.clearTimeout(nextTimeout);
        nextTimeout = window.setTimeout(function(){showUsTheNth(lenombre+1, true);}, 1000);
      }
    });
  }
}

$(document).ready(function(){
  $(".porte").find(".grised").animate({opacity: 1}, "slow");
  $(".porte").hover(function(){
    $(this).find(".colored").stop().animate({opacity: 1}, "slow");
    $(this).find(".grised").stop().animate({opacity: 0}, "slow");
  }, function(){
    $(this).find(".colored").stop().animate({opacity: 0}, "slow");
    $(this).find(".grised").stop().animate({opacity: 1}, "slow");
  });

  $(".showback").click(function(){
    var lenombre = $(this).text();
    showUsTheNth(lenombre, false);
  });

  $(".showandanimate").click(function(){
    if(!$("#backnum1").is(".currentone"))
      showUsTheNth(1, true);
    else
      showUsTheNth(2, true);
  })
});