function changeImg(change) {

  // figure out which image we're going to
  if (isNaN(change)) {
    if (change == 'next') {
      start_img = 0;
      img++;
      if (img > total)
        img = 1;
    } else if (change == "prev") {
      start_img = 0;
      img--;
      if (img == 0)
        img = total;
    }
  } else {
    start_img = 0;
    img = change;
  }
  
  //change the main image and image number
  if (img != start_img) {
    url = gs_img_url + screen_path[img];
    document.getElementById('image_num').innerHTML = img;
    document.getElementById('main_image').src = url;
  }
  
  // build the thumbnails
  buildThumbs();
}
    
function addEvent(elm, evType, fn, useCapture) {
  // cross-browser even handling for IE5+, NS6+ and Mozilla/Gecko
  // By Scott Andrew
  if (elm.addEvenListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  } else {
    elm['on' + evType] = fn;
  }
}

// build thumbnails
function buildThumbs() {
  if (!document.getElementById) return;
  var thumbs = document.getElementById('thumbs');
  
  // remove all thumbnails
  while (thumbs.childNodes[0]) {
    thumbs.removeChild(thumbs.childNodes[0]);
  }
  
  // if more than 8 images, build all 8
  if (total >= 8) {
    for (i = img-2; i <= img+5; i++) {
      n = i <= 0 ? n = total + i : i > total ? n = i - total : i;

      var newLink = document.createElement('a');
      newLink.id = 'link_' + n;
      newLink.style.cursor = 'pointer';

      var newThumb = document.createElement('img');
      newThumb.src = gs_img_url + screen_path[n].replace('_screen','_thumb');
      newThumb.style.border = n == img ? '2px solid #F96909' : '1px solid #C7C7C7' ;
      newThumb.style.margin = i == img - 2 ? '0px 5px 0px 0px' : '0px 4px';
      newThumb.style.width = n == img ? '60px' : '60px';
      newThumb.style.height = n == img ? '45px' : '45px';
      newThumb.align = 'middle';

      thumbs.appendChild(newLink);
      link = document.getElementById('link_' + n);
      link.appendChild(newThumb);
    }
  
  // if less than 8 images, build up to the number
  } else {
    for (n = 1; n <= total; n++) {

      var newLink = document.createElement('a');
      newLink.id = 'link_' + n;
      newLink.style.cursor = 'pointer';

      var newThumb = document.createElement('img');
      newThumb.src = gs_img_url + screen_path[n].replace('_screen','_thumb');
      newThumb.style.border = n == img ? '2px solid #F96909' : '1px solid #C7C7C7' ;
      newThumb.style.margin = '0px 8px 0px 0px';
      // newThumb.style.margin = n == img - 2 ? '0px 5px 0px 0px' : '0px 4px';
      newThumb.style.width = n == img ? '60px' : '60px';
      newThumb.style.height = n == img ? '45px' : '45px';
      newThumb.align = 'middle';

      thumbs.appendChild(newLink);
      link = document.getElementById('link_' + n);
      link.appendChild(newThumb);
    }
  }
  addListeners();
  window.focus();
}

// add listeners to all thumb links, when clicked on do handLink function
function addListeners() {
  if (!document.getElementsByTagName) return;
  var thumb_links = document.getElementById('thumbs').getElementsByTagName('a');
  for (var i = 0; i < thumb_links.length; i++) {
    addEvent(thumb_links[i], 'click', handleLink, false);
  }
}

// when a link is clicked on, you get its id# and send that to changeImg function
function handleLink(e) {
  var target = window.event ? window.event.srcElement : e ? e.target : null;
  if (!target) return;
  while (target.nodeName.toLowerCase() != 'a' && target.nodeName.toLowerCase() != 'body')
    target = target.parentNode;
  
  //get the id of the link, remove the link_ part and send to changeImg
  changeImg(parseInt(target.id.replace('link_','')));
}

// rewrite the page location so you can refresh the image that you're currently on (only seems to work in FF right now)
function changeUrl() {
  window.location.replace(window.location.href.replace(/img=[0-9]+/, 'img=' + img));
}