Problème d'animation en boucle en jquery...

Salut tout le monde,
Je suis entraîne de développer un site web et j'ai trouvé comment changer mon arrière-plan ("Background") de mon site web. J'ai un petit problème c'est que l'animation n'est pas en boucle. Quand elle arrive à la dernière image qui a l'id 5, la function AutoBackground() ne se relance pas. :(

Voici les cinq images qui font l'arrière-plan de mon site web :

<!-- Begin of Bacground Img -->
<img src="/app/webroot/img/Templates/main/bg.jpg" class="BodyBackground" id="bg1">
<img src="/app/webroot/img/Templates/main/bg2.jpg" class="BodyBackground" id="bg2">
<img src="/app/webroot/img/Templates/main/bg3.jpg" class="BodyBackground" id="bg3">
<img src="/app/webroot/img/Templates/main/bg4.jpg" class="BodyBackground" id="bg4">
<img src="/app/webroot/img/Templates/main/bg5.jpg" class="BodyBackground" id="bg5">
<!-- Begin of Bacground Img -->

Voici la function qui s'occupe d'animer les images de fonds de mom site web.

/*
      * Background change (automatic)
      */

      var compteur = 0;

      function AutoBackground() {
          compteur++;
          if(compteur<=5) {
              $(".BodyBackground:not('#bg" + compteur + "')").fadeOut(500);
              $("#bg" + compteur).fadeIn(500);
          } else {
              compteur = 0;
              clearInterval(arakiri);
          }

      }

        var arakiri = setInterval(AutoBackground,10000);

J'ai beau le chercher, mais j'y arrive pas à le trouver la source du petit problème technique.

Merci de votre aide! :)