addLoadEvent(ss_init);
addLoadEvent(function() {
  /* more code to run on page load */
});

var ss_container;
var ss_menu;
var ss_items;
var ss_current_slide = 0;

/* Initialisation */
function ss_init() {
  if(!document.getElementById || !document.createTextNode){return;}
  ss_container = document.getElementById('screenshots');
  if (ss_container) {
    ss_items = ss_container.getElementsByTagName('ul')[0].getElementsByTagName('li');
    if (ss_items) {
      //create prev and next buttons
      var prev = createElement('a');
      var next = createElement('a');
      prev.appendChild(document.createTextNode('prev'));
      next.appendChild(document.createTextNode('next'));
      prev.setAttribute("href", "#");
      next.setAttribute("href", "#");
      prev.setAttribute("id", "prev");
      next.setAttribute("id", "next");
      prev.setAttribute("class", "nav");
      next.setAttribute("class", "nav");
      prev.onclick = function() {
        ss_setSelected(ss_current_slide - 1);
        return false;
      }
      next.onclick = function() {
        ss_setSelected(ss_current_slide + 1);
        return false;
      }

      //create screenshot list menu
      ss_menu = createElement('ul');
      for(var j = 0, k = ss_items.length; j < k; j++) {
        var li = createElement('li');
        var a = createElement('a');
        a.appendChild(document.createTextNode(j+1));
        a.setAttribute("href", "#");
        a.setAttribute("title", "Screenshot "+(j+1));
        a.itemNumber = j;
        a.onclick = function() {
          ss_setSelected(this.itemNumber);
          return false;
        }
        j == 0 ? li.className = "selected" : 0;
        li.appendChild(a);
        ss_menu.appendChild(li);
      }
      ss_menu.id = "shotmenu";
      ss_container.appendChild(prev);
      ss_container.appendChild(next);
      ss_container.appendChild(ss_menu);
      ss_setSelected(0);
    }
  }
}

function ss_setSelected(index) {
    // Wrap index if necessary
    index < 0 ? index = ss_items.length - 1 : 0;
    index == ss_items.length ? index = 0 : 0;
    // Set current screenshot menu item
    ss_current_slide = index;
    // Hide all screenshots
    for(var i = 0, j = ss_items.length; i < j; i++) { ss_items[i].style.display = "none"; }
    // Make no screenshot menu item selected
    var links = ss_menu.getElementsByTagName('li');
    for(var l = 0, k = links.length; l < k; l++) {links[l].className = null;}
    // Show the current screenshot
    ss_items[index].style.display = "block";
    // Make the current screenshot menu item selected
    ss_menu.getElementsByTagName('li')[index].className = "selected";
  }

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

function createElement(element) {
  if (typeof document.createElementNS != 'undefined') {
    return document.createElementNS('http://www.w3.org/1999/xhtml', element);
  }
  if (typeof document.createElement != 'undefined') {
    return document.createElement(element);
  }
  return false;
}