var isDOM = (document.getElementById ? true : false); 
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);

function getRef(id) {
  if (isDOM) return document.getElementById(id);
  if (isIE4) return document.all[id];
  if (isNS4) return document.layers[id];
}

function updateImageCount() {
  x = getRef("imageCount");
  x.innerHTML = (imageIndex + 1) + ":" + (imageList.length);
}

function updateInterface() {
  // update the image count
  updateImageCount();
  // if we are at the start then disable the move first and move prev buttons
  if (imageIndex == 0) {
    getRef("nav_move_first").src="images/enlarged_images/move_first_disabled.gif";
    getRef("nav_move_previous").src="images/enlarged_images/move_previous_disabled.gif";
  } else {
    getRef("nav_move_first").src="images/enlarged_images/move_first.gif";
    getRef("nav_move_previous").src="images/enlarged_images/move_previous.gif";
  }

  if (imageIndex == imageList.length - 1) {
    getRef("nav_move_last").src="images/enlarged_images/move_last_disabled.gif";
    getRef("nav_move_next").src="images/enlarged_images/move_next_disabled.gif";
  } else {
    getRef("nav_move_last").src="images/enlarged_images/move_last.gif";
    getRef("nav_move_next").src="images/enlarged_images/move_next.gif";
  }
}

function moveNext() {
  if (imageIndex < imageList.length-1) imageIndex++;
  updateImage();
  updateInterface();
}

function movePrevious() {
  if (imageIndex > 0) imageIndex--;
  updateImage();
  updateInterface();
}

function moveFirst() {
  imageIndex = 0;
  updateImage();
  updateInterface();
}

function moveLast() {
  imageIndex = imageList.length-1;
  updateImage();
  updateInterface();
}

function updateImage() {
  // loads the appropriate image according to the index
  getRef("photoMain").src="images/optimised_images/" + imageList[imageIndex];
}