gallery with background images on body and previous next buttons

gallery with background images on body and previous next buttons

Hello,
I am trying to create a gallery with prev/next buttons for background images on the body tag.
The images are in an array and called by index.
I can't call the first image and my buttons stop working at img 3
Any help would be highly appreciated.
I also created a fiddle here
  1. var Images = ['bg_01, bg_02', 'bg_03', 'bg_04', 'bg_05', 'bg_06', 'bg_07', 'bg_08', 'bg_09', 'bg_10', 'bg_11', 'bg_12'];
  2. var ImgLength = Images.length;
  3. $("body").css("background-image", "url(../img/" + Images[0] + ".jpg)");
  4. $('#panel .left').click(function () {
  5.     if (ImgLength > 0) {
  6.         ImgLength = ImgLength - 1;
  7.     } else {
  8.         ImgLength = 0;
  9.     }
  10.     $("body").css("background-image", "url(../img/" + Images[ImgLength] + ".jpg)");
  11.     return false;
  12. });

  13. $('#panel .right').click(function () {
  14.     if (ImgLength < Images.length - 1) {
  15.         ImgLength = ImgLength + 1;
  16.     } else {
  17.         ImgLength = 0;
  18.     }
  19.     $("body").css("background-image", "url(../img/" + Images[ImgLength] + ".jpg)");
  20.     return false;
  21. });