var TOTAL_IMAGES  = 9

var currentImageNumber = 1;
var galleryImages = new Array();

function showImage(imageNumber) {
  $('loading_spinner').show();
  
  image = new Image();
  image.src = "images/gallery/" + imageNumber + ".jpg";
  
  setTimeout(showLoader, 100);
  
  $('wrapper').style.background = "url(" + image.src + ")";
  $('wrapper').style.backgroundColor = "#eee";
  $('photo_no').innerHTML = imageNumber;
  $('total_images').innerHTML = TOTAL_IMAGES;
  galleryImages[imageNumber] = image;
}

function showLoader() {
  image = new Image();
  image.src = "images/gallery/" + currentImageNumber + ".jpg";
  
  if (image.complete) {
    $('loading_spinner').hide();
  }
  else {
    setTimeout(showLoader, 100);
  }
}

function nextImage(imageNumber) {
  currentImageNumber++;
  if (currentImageNumber > TOTAL_IMAGES) currentImageNumber = 1;
  showImage(currentImageNumber)
}

function previousImage(imageNumber) {
  currentImageNumber--;
  if (currentImageNumber < 1) currentImageNumber = TOTAL_IMAGES;
  showImage(currentImageNumber);
}