// Link everything up and generate the initial HTML
function doLoad() {
   document.getElementById("prev").onclick = function() { if(id > 0) { id--; changeImage() } return false; };
   document.getElementById("next").onclick = function() { if(id < data.length - 1) { id++; changeImage() } return false; };
   document.getElementById("total").innerHTML = data.length;
   makeLinks();
   changeImage();
}

function addToOnload(oldfunc, newfunc) {
   return function() { oldfunc(); newfunc(); };
}

// Create a custom onClick routine, currying in the image #
function makeLinkCallback(i) {
   return function() { id = i; changeImage(); return false; };
}

// Create the numbered links and associate a custom onClick routine with each one
function makeLinks() {
   var i = 0;
   document.getElementById("links").innerHTML = "";
   for(i = 0; i < data.length; i++) {
      if(i != 0) {
	 document.getElementById("links").innerHTML += " | ";
      }
      document.getElementById("links").innerHTML += '<a href="#" id="link' + i + '">' + data[i][0] + '</a> ';
   }
   for(i = 0; i < data.length; i++) {
      document.getElementById("link" + i).onclick = makeLinkCallback(i);
   }

}

function changeImage() {
   var i = 0;
   document.getElementById("img").innerHTML = ''
   // Display all the images
   for(i = 0; i < data[id].length - 3; i++) {
      if(i != 0 && i % 2 == 0) {
	 document.getElementById("img").innerHTML += '<br/>';
      }
      document.getElementById("img").innerHTML += '<img src="img_sized/' + ((data[id].length > 4) ? '370_' : '740_') + data[id][i + 3] + '" alt=""/>';
   }
   // Change the colour of the link
   for(i = 0; i < data.length; i++) {
      if(i == id) { 
	 document.getElementById("link" + i).style.color = "#FFFFFF";
	 document.getElementById("link" + i).style.backgroundColor = "#00485c";
      } else {
	 document.getElementById("link" + i).style.color = "#00485c";
	 document.getElementById("link" + i).style.backgroundColor = "#FFFFFF";
      }
   }

   // Set the text, credit text, and image number
   document.getElementById("text").innerHTML = data[id][1];
   document.getElementById("credit").innerHTML = data[id][2];
   document.getElementById("number").innerHTML = id + 1;
}