var currentPage = 1;

/* quick prototype.js like shorthand */
function $( id ) {
  return( document.getElementById( id ));
}

function move(modifier, total) {
  /* hide the current page */
  $("page" + currentPage).style.display = "none";

  currentPage += modifier;
  var isFirstPage = (currentPage == 1);
  var isLastPage = (currentPage == total); 
  var back = $("back");
  var next = $("next");


  /* display the next page and set the controls right */
  $("page" + currentPage).style.display = "block";
  $("page").innerHTML = "page " + currentPage + " / " + total;

  back.disabled = isFirstPage;
  next.disabled = isLastPage;
  
  /* Add some style(s) so we can reference the disabled buttons */
  if( isFirstPage ) {
    back.className += " disabled";  
  } else {
    back.className = back.className.replace(/\s*disabled/, "");  
  }

  if( isLastPage ) {
    next.className += " disabled";  
  } else {
    next.className = next.className.replace(/\s*disabled/, "");  
  }
}