function showinterface(gotoimage){
  var body = document.getElementsByTagName('body')[0];
  body.style.height='100%'; //Fix for IE6, so that #backdrop and #wrapper fill screen
  window.scrollTo(0,0); //Remove any existing scrolling as we'll be disabling the body scrollbars
  
  var bg = document.createElement('div');
  bg.id = 'backdrop';
  body.appendChild(bg);
  
  var wrapper = document.createElement('div');
  wrapper.id = 'wrapper';
  var th_bar = document.createElement('div');
  th_bar.id = 'thumbnail_bar';
  var gallery = document.getElementById('gallery');
  //not using getElementsByTagName('div') because I specifically only want the first level
  width = 0;
  var t = '';
  for(var i in gallery.childNodes){
    if(typeof gallery.childNodes[i].tagName != "undefined" && gallery.childNodes[i].tagName.toLowerCase() == 'div'){
      width += gallery.childNodes[i].offsetWidth + 15; //Ought to get the margins instead
      t = gallery.childNodes[i].cloneNode(true);
      if(t.getElementsByTagName('span')[0]) t.getElementsByTagName('span')[0].style.display='none';
      th_bar.appendChild(t);
    };
  };
  var th_lnks = th_bar.getElementsByTagName('a');
  for(lnk in th_lnks){
    th_lnks[lnk].onclick = function(){ setimage(this); return false }
  };
  th_bar.style.width = width + 'px';
  var th_bar_scroller = document.createElement('div');
  th_bar_scroller.id = 'thumbnail_scroller';
  th_bar_scroller.appendChild(th_bar);
  wrapper.appendChild(th_bar_scroller);
  
  var footer = document.createElement('div');
  footer.id = 'imgfooter';
  var flnk = document.createElement('a');
  flnk.id = 'lnkfull';
  flnk.setAttribute('target', '_blank');
  var timg = document.createElement('img');
  timg.src = './galleryicons/fullsize.gif';
  timg.alt = 'view full size image';
  flnk.title = timg.alt;
  flnk.appendChild(timg);
  footer.appendChild(flnk);

//  var flnk = document.createElement('a');
//  flnk.id = 'lnkdown';
//  var timg = document.createElement('img');
//  timg.src = './galleryicons/download.gif';
//  timg.alt = 'download image';
//  flnk.appendChild(timg);
//  footer.appendChild(flnk);

  var flnk = document.createElement('a');
  flnk.id = 'lnkplay';
  flnk.href = '#';
  flnk.onclick = function(){ if(typeof playing != "undefined" && playing){ playing = clearInterval(playing); this.getElementsByTagName('img')[0].src = './galleryicons/play.gif'; }else{ playing = setInterval("nextimg()", 5000); nextimg(); this.getElementsByTagName('img')[0].src = './galleryicons/pause.gif'; }; return false }
  var timg = document.createElement('img');
  timg.src = './galleryicons/play.gif';
  timg.alt = 'play slideshow';
  flnk.title = timg.alt;
  flnk.appendChild(timg);
  footer.appendChild(flnk);
  wrapper.appendChild(footer);

  var flnk = document.createElement('a');
  flnk.id = 'lnkprev';
  flnk.href = '#';
  flnk.onclick = previmg;
  var timg = document.createElement('img');
  timg.src = './galleryicons/prev.gif';
  timg.alt = 'previous image';
  flnk.title = timg.alt;
  flnk.appendChild(timg);
  wrapper.appendChild(flnk);

  var flnk = document.createElement('a');
  flnk.id = 'lnknext';
  flnk.href = '#';
  flnk.onclick = nextimg;
  var timg = document.createElement('img');
  timg.src = './galleryicons/next.gif';
  timg.alt = 'next image';
  flnk.title = timg.alt;
  flnk.appendChild(timg);
  wrapper.appendChild(flnk);
  
  var title = document.createElement('div');
  title.id = 'imagetitle';
  wrapper.appendChild(title);

  var mainimg = document.createElement('div');
  mainimg.id = 'mainimage';
  wrapper.appendChild(mainimg);

  var closelnk = document.createElement('a');
  closelnk.href='javascript:closegallery()';
  closelnk.id = 'closelink';
  var timg = document.createElement('img');
  timg.src = './galleryicons/close.gif';
  timg.alt = 'close';
  closelnk.title = timg.alt;
  closelnk.appendChild(timg);
  wrapper.appendChild(closelnk);
  body.appendChild(wrapper);
  body.style.overflow = 'hidden';

  if(document.attachEvent) document.attachEvent("onkeyup", keypressed);
  else if(document.addEventListener) document.addEventListener("keyup", keypressed, false);
  else if(window.addEventListener) window.addEventListener("keyup", keypressed, false);

  if(window.attachEvent) window.attachEvent("onresize", reloadimg);
  else if(window.addEventListener) window.addEventListener("resize", reloadimg, false);
  else if(document.addEventListener) document.addEventListener("resize", reloadimg, false);
  
  //If an image/link has been specified, go straight to it.
  //This block MUST be the last in this function
  if(typeof gotoimage != "undefined"){
    var alist = document.getElementById('thumbnail_bar').getElementsByTagName('a');
    for(var a in alist){
      if(alist[a].href == gotoimage.href) return setimage(alist[a]);
    };
  };
};

function keypressed(e){
  if(!e) var e = window.event;
  if(e.which) var key = e.which;
  else var key = e.keyCode;
  if(e.target) var target = e.target;
  else var target = e.srcElement;
  switch(key){
    case 100: //numpad: left
    case 37:  //left
      previmg();
      break;
    case 102: //numpad: right
    case 39:  //right
      nextimg();
      break;
    case 27: //escape
    case 90: //ctrl-z (may be handled by browser first)
      closegallery();
      break;
    default:
      return true;
  };
};

function reloadimg(){
  //Function called by an onresize event handler
  //Has 2 roles: keep the selected thumbnail centred & reload main image if size changes beyond the defined boundaries
  var current = false;
  try{
    current = basename(document.getElementById('mainimage').getElementsByTagName('img')[0].src);
  }catch(e) { return false; }
  if(current){
    var alist = document.getElementById('thumbnail_bar').getElementsByTagName('a');
    for(var a in alist){
      if(basename(alist[a].href) == current) return setimage(alist[a]);
    };
  };
};

function setimage(srclnk){
  var m = document.getElementById('mainimage');
  var t = document.getElementById('thumbnail_bar');
  var alist = t.getElementsByTagName('a');
  var u = '';
  for(var a in alist){
    if(alist[a].parentNode && alist[a].parentNode.style){
      alist[a].parentNode.style.border = 'none';
      u = alist[a].parentNode.parentNode.getElementsByTagName('span');
      if(u && u[0]) u[0].style.display='none';
    };
  };
  //Centre the thumbnail
  var w = (t.parentNode.offsetWidth - srclnk.offsetWidth) / 2;
  t.parentNode.scrollLeft = findPosX(srclnk) - w;
  //Highlight current thumbnail (maybe this could be CSS'd; changes to nextimg() and previmg() would be required
  srclnk.parentNode.style.border = '2px #ffffff solid';
  u = srclnk.parentNode.parentNode.getElementsByTagName('span');
  var title = document.getElementById('imagetitle');
  while(title.childNodes && title.childNodes.length > 0) title.removeChild(title.childNodes[0]);
  if(u && u[0]){
    //u[0].style.display='block';
    if(u[0].innerText)
      title.appendChild(document.createTextNode(u[0].innerText));
    else
      title.appendChild(document.createTextNode(u[0].textContent));
    title.style.display = 'block';
  }else{
    title.style.display = 'none';
  };
  
  if(typeof album == "undefined"){
    if(document.getElementById('gallery').getAttribute('data-album')) var album = document.getElementById('gallery').getAttribute('data-album');
    else if(srclnk.getAttribute('data-album')) var album = srclnk.getAttribute('data-album');
    else var album = '';
  };
  var pos = '';
  if(srclnk.getAttribute('data-gps')) pos = srclnk.getAttribute('data-gps');
  else if(srclnk.parentNode.getAttribute('data-gps')) pos = srclnk.parentNode.getAttribute('data-gps');
  else if(srclnk.parentNode.parentNode.getAttribute('data-gps')) pos = srclnk.parentNode.parentNode.getAttribute('data-gps');
  else if(document.getElementById('lnkposition')) document.getElementById('lnkposition').parentNode.removeChild(document.getElementById('lnkposition'));
  if(pos != ''){
    if(document.getElementById('lnkposition')){
      document.getElementById('lnkposition').setAttribute('href', pos);
    }else{
      var lnkbar = document.getElementById('lnkfull').parentNode;
      var poslnk = document.createElement('a');
      poslnk.id = 'lnkposition';
      poslnk.setAttribute('href', pos);
      poslnk.setAttribute('target', '_blank');
      var poslnkimg = document.createElement('img');
      poslnkimg.src = './galleryicons/globe_icon.png';
      poslnk.appendChild(poslnkimg);
      lnkbar.appendChild(poslnk);
    };
  };
  
  if(typeof galleryroot == "undefined"){
    if(document.getElementById('gallery').getAttribute('data-galleryroot')) var galleryroot = document.getElementById('gallery').getAttribute('data-galleryroot');
    else var galleryroot = dirname(srclnk.href);
  };

  document.getElementById('lnkfull').setAttribute('href', srclnk.href);
  if(document.getElementById('lnkdown')) document.getElementById('lnkdown').setAttribute('href', galleryroot + '/dl/' + album + basename(srclnk.href));
  
  var img = document.createElement('img');
  //Choose L or XL image
  if(m.offsetWidth > 800 && m.offsetHeight > 600) var size = '/XL/';
  else var size = '/L/';
  
  img.src = galleryroot + size + album + basename(srclnk.href);
  
  while(m.childNodes.length > 0)
    m.removeChild(m.childNodes[0]);
  m.appendChild(img);
  return false;
};

function nextimg(){
  var alist = document.getElementById('thumbnail_bar').getElementsByTagName('a');
  var nextone = false;
  for(var a in alist){
    if(alist[a].parentNode && alist[a].parentNode.style && alist[a].getElementsByTagName('img').length == 1){
      if(nextone){
        setimage(alist[a]);
        nextone = false;
        return;
      };
      if(alist[a].parentNode.style.borderWidth == '2px' || (alist[a].parentNode.style.border != '' && alist[a].parentNode.style.border.indexOf('none') == -1 && alist[a].parentNode.style.border.indexOf('current') == -1)){
        //The nodes we want to exclude report .style.border as: Chrome: 'none'; FF: 'medium none'; IE: ''; opera: 'currentColor'
        nextone = true;
      };
    };
  };
  if(nextone) setimage(alist[0]);
};
function previmg(){
  var alist = document.getElementById('thumbnail_bar').getElementsByTagName('a');
  var previous = alist[alist.length - 1];
  for(var a in alist){
    if(alist[a].parentNode && alist[a].parentNode.style && alist[a].getElementsByTagName('img').length == 1){
      if(alist[a].parentNode.style.borderWidth == '2px' || (alist[a].parentNode.style.border != '' && alist[a].parentNode.style.border.indexOf('none') == -1 && alist[a].parentNode.style.border.indexOf('current') == -1)){
        setimage(previous);
        return;
      };
      previous = alist[a];
    };
  };
  setimage(previous);
};

function findPosX(obj){
  var curleft = 0;
  if(obj.offsetParent){
    while(obj.offsetParent){
      curleft += obj.offsetLeft;
      obj = obj.offsetParent;
    };
  }else if(obj.x) curleft += obj.x;
  return curleft;
}

function closegallery(){
  if(document.detachEvent) document.detachEvent("onkeyup", keypressed);
  else if(document.removeEventListener) document.removeEventListener("keyup", keypressed, false);
  else if(window.removeEventListener) window.removeEventListener("keyup", keypressed, false);
  if(window.detachEvent) window.detachEvent("onresize", reloadimg);
  else if(window.removeEventListener) window.removeEventListener("resize", reloadimg, false);
  else if(document.removeEventListener) document.removeEventListener("resize", reloadimg, false);
  
  if(typeof playing != "undefined" && playing) playing = clearInterval(playing);

  var body = document.getElementsByTagName('body')[0];
  body.removeChild(document.getElementById('wrapper'));
  body.removeChild(document.getElementById('backdrop'));
  body.style.overflow = 'auto';
  body.style.height = 'auto';
};

function basename(path) {
  return path.replace(/^.*[\/\\]/g, '');
}
 
function dirname(path) {
  return path.replace(/\/[^\/]*$/, '');
}

function setlinks(){
//Add the onclick handler for the thumbnails in the gallery.
//Deliberately over-writing anything that may already be there.
  var ds = document.getElementsByTagName('div');
  var a, i = 0;
  for(d in ds){
    if(ds[d].className && ds[d].className.indexOf('gallery_pic') !== -1){
      a = ds[d].getElementsByTagName('a');
      if(a && a.length > 0)
        a[0].onclick=function(){return showinterface(this);};
    };
  };
};

//Tell browser to call setlinks() when content is loaded
if(window.attachEvent) window.attachEvent("onload", setlinks);
else if(window.addEventListener) window.addEventListener("load", setlinks, false);
else if(document.addEventListener) document.addEventListener("load", setlinks, false);