Retina.js swapping out images in an array

Question

I'm using Retina.js to swap out images on my site for retina screens. It's working fine however I have an issue when I am swapping images from an array. I have one image in the middle of the screen and every 3 seconds this changes to a different image stored in the array. Like so:

   <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 1600);
          }

          var images = [], x = -1;

          images[0] = "smallslide2.png";
          images[1] = "smallslide3.png";
          images[2] = "smallslide4.png";
          images[3] = "smallslide5.png";
          images[4] = "smallslide1.png";
      </script>

In my html I have:

 <p class="centeredImage">
                <img id ="img" src="smallslide1.png">
 </p>

The first slide works and shows the retina image, I guess this because it's using the standard image detection i.e replacing image src = " ", for the rest of the images it doesn't work though. Is there a way to get it to work for the images in the array? Any pointers on this would be really appreciated. Thanks!

edit:

 if (document.getElementById("img").src===smallslide1@2x.png){

    images[0] = "smallslide2@2x.png";
  images[1] = "smallslide3@2x.png";
  images[2] = "smallslide4@2x.png";
  images[3] = "smallslide5@2x.png";
  images[4] = "smallslide1@2x.png";

  }
  else {

    images[0] = "smallslide2.png";
  images[1] = "smallslide3.png";
  images[2] = "smallslide4.png";
  images[3] = "smallslide5.png";
  images[4] = "smallslide1.png";



  }