function preload(item) {
  var pics = new Image();
  pics.src = item;
}

function init() {
  var url = ""
  if (document.getElementById("general")) {
    url = "/Data/gallery.xml";
  }
  else if (document.getElementById("veterans")) {
    url = "/Data/veterans.xml";
  }
  else if (document.getElementById("1stPics")) {
    url = "/Data/1stTeamPics.xml";
  }
  request.send("GET", url, setupPage);
}

function setupPage() {
  if (request.getReadyState() == 4) {
    if (request.getStatus() == 200) {
      var xmlDoc = request.getResponseXML();
      var pictures = xmlDoc.getElementsByTagName("picture");
      var thumbNails = document.getElementById("thumbNails");
      for (var count = 0; count < pictures.length; count++) {
        var img = getText(pictures[count]);
        images[count] = new Image();
        images[count].src = "/Images/slideShowPics/thumbnails/" + img;
        images[count].setAttribute("className", "slideShowThumbnails");
        images[count].setAttribute("class", "slideShowThumbnails");
        images[count].setAttribute("alt", "Slideshow");
        images[count].setAttribute("height", 100);
        thumbNails.appendChild(images[count]);
      }
      // ********** If currentPic then picture count when changing galleries, causes an error
      //var temp = readCookie("currentPic");
      //if (temp) {
        //currentPic = parseInt(temp);
      //}
      //else {
        //currentPic = 4;
      //}
      currentPic = 4;
      for (var x = 0; x < images.length; x++) {
        setupOnClick(images[x]);
      }
      var leftArrow = document.getElementById("left");
      var leftEndArrow = document.getElementById("leftEnd");
      var rightArrow = document.getElementById("right");
      var rightEndArrow = document.getElementById("rightEnd");
      leftArrow.onclick = function(evt) {changePic(1);};
      rightArrow.onclick = function(evt) {changePic(0, 0, 1);};
      leftEndArrow.onclick = function(evt) {changePic(0, 1);};
      rightEndArrow.onclick = function(evt) {changePic(0, 0, 0, 1);};
      changeButtons();
      displayThumbs();
    }
    else {
      alert("Error! Request status is " + request.getStatus());
    }
  }
}

function changePic(moveLeft1, moveLeftAll, moveRight1, moveRightAll) {
  if (moveLeft1) {
    currentPic--;
    if (currentPic < 4) currentPic = 4;
  }
  if (moveRight1) {
    currentPic++;
    if (currentPic > images.length) currentPic = images.length;
  }
  if (moveLeftAll) currentPic = 4;
  if (moveRightAll) currentPic = images.length;
  writeCookie("currentPic", currentPic);
  changeButtons();
  displayThumbs();
}

function changeButtons() {
  var leftArrow = document.getElementById("left");
  var leftEndArrow = document.getElementById("leftEnd");
  var rightArrow = document.getElementById("right");
  var rightEndArrow = document.getElementById("rightEnd");
  leftArrow.src = "/Images/arrowLeft.png";
  rightArrow.src = "/Images/arrowRight.png";
  leftEndArrow.src = "/Images/arrowLeftEnd.png";
  rightEndArrow.src = "/Images/arrowRightEnd.png";
  if (currentPic == 4) {
    leftArrow.src = "/Images/arrowLeftGrey.png";
    leftEndArrow.src = "/Images/arrowLeftEndGrey.png";
  }
  if (currentPic == images.length) {
    rightArrow.src = "/Images/arrowRightGrey.png";
    rightEndArrow.src = "/Images/arrowRightEndGrey.png";
  }
}

function setupOnClick(image) {
  image.onclick = function(evt) {displayMedium(image)};
}

function displayThumbs() {
  for (var count = 0; count < images.length; count++) {
    images[count].style.display = "none";
  }
  var count = 4;
  while (count > 0) {
    images[currentPic - count].style.display = "inline";
    count--;
  }
}

function displayMedium(image) {
  var src = replaceSubstring(image.src, "thumbnails", "mediumSize");
  var link = replaceSubstring(src, "/mediumSize", "");
  var mediumSize = document.getElementById("mediumSize");
  mediumSize.innerHTML = '<a href="' + link + '"><img src="' + src + '" alt="Slideshow" /></a>';
  preload(link);
}

var currentPic;
var images = new Array;
var request = new AjaxRequest;

// Onload
if (window.addEventListener) {
  window.addEventListener('load', init, false);
}
else if (window.attachEvent) {
  window.attachEvent('onload', init);
}
else {
  window.onload = init;
}