imgstep = {
  SLIDES: 33,
  init: function() {
    var img = document.getElementById('slide');
    img.onclick = function() {
      imgstep.changeBy(this, 1);
    };
    imgstep.createControls(img);
    imgstep.setAlt(img, 1);
  },
  createControls: function(img) {
    var ul = document.createElement("ul");
    var lip = document.createElement("li");
    imgstep.lii = document.createElement("li");
    var lin = document.createElement("li");
    lip.appendChild(document.createTextNode("<<"));
    imgstep.lii.appendChild(document.createTextNode("1 of " + imgstep.SLIDES));
    lin.appendChild(document.createTextNode(">>"));
    lip.onclick = function() {
      imgstep.changeBy(img, -1);
    };
    lin.onclick = function() {
      imgstep.changeBy(img, 1);
    };
    imgstep.lii.className = "slideof";
    lip.className = "direction";
    lin.className = "direction";
    ul.appendChild(lip);
    ul.appendChild(imgstep.lii);
    ul.appendChild(lin);
    img.parentNode.appendChild(ul);
  },
  changeBy: function(img, inc) {
    var src = img.src;
    var parts = src.split("-");
    var num = parts[parts.length - 1];
    var numlen = num.length - 4; // remove .png;
    var i = parseInt(num, 10); // specify base 10 or it's octal
    i = i + inc;
    if (i > imgstep.SLIDES) {
      i = 1;
    }
    if (i < 1) {
      i = imgstep.SLIDES;
    }
    zeroes = "";
    for (var idx=0; idx < numlen; idx++) {
      zeroes += "0";
    }
    var newnum = zeroes + i;
    newnum = newnum.substr(newnum.length - numlen);
    var first = src.substr(0,src.length - 4 - newnum.length);
    var last = src.substr(src.length - 4);
    var newsrc = first + newnum + last;
    img.src = newsrc;
    imgstep.lii.firstChild.nodeValue = i + " of " + imgstep.SLIDES;
    imgstep.setAlt(img, i);
  },
  setAlt: function(img, idx) {
    var li = document.getElementById("transcript").getElementsByTagName("li")[idx-1];
    img.setAttribute("alt", li.firstChild.firstChild.nodeValue);
  }
};
imgstep.init();