var displayImg = document.getElementById('display');
var thumbs = document.getElementById("thumbs").getElementsByTagName("a");
var lastHighlight = null;
var index = 0;

function show() {
  var thumb = thumbs[index];
  var img = thumb.getElementsByTagName("img")[0];
  if (lastHighlight && lastHighlight != img) lastHighlight.src = lastHighlight.out.src;
  lastHighlight = img;
  img.src = img.over.src;
  displayImg.src = img.full.src;
}

function prep(i) {
  var thumb = thumbs[i];
  var img = thumb.getElementsByTagName("img")[0];
  img.out = new Image();
  img.out.src = img.src;
  img.over = new Image();
  var dot = img.src.lastIndexOf(".");
  img.over.src = img.src.substring(0, dot) + "_Over" + img.src.substring(dot);
  img.full = new Image();
  img.full.src = thumb.href;
    
  thumb.href = "#";
  thumb.onmouseover = function() {clearInterval(interval); index=i; show();};
}

function make_gallery() {
  for (var i=0; i<thumbs.length; i++) {
    prep(i);
  }
}


function slideshow() {
  show();
  if (++index >= thumbs.length) index = 0;
}


make_gallery();
var interval = setInterval(slideshow, 5000);
slideshow();