document.getElementsByClass = function(needle) {
  var my_array = document.getElementsByTagName("*");
  var retvalue = new Array();
  var i;
  var j;

  for (i = 0, j = 0; i < my_array.length; i++)
  {
    var c = " " + my_array[i].className + " ";
    if (c.indexOf(" " + needle + " ") != -1)
      retvalue[j++] = my_array[i];
  }
  return retvalue;
}

function classaction(act, object, class1, class2)
{
    switch (act) {
    case 'swap':
        object.className = ! classaction('check', object, class1, class2) 
                         ? object.className.replace(class2, class1)
                         : object.className.replace(class1, class2);
    break;
    case 'add':
        if (! classaction('check', object, class1, class2)) {
            object.className += object.className ? ' ' + class1 : class1;
        }
    break;
    case 'remove':
        var repl = object.className.match(' ' + class1) ? ' ' + class1 : class1;
        object.className = object.className.replace(repl, '');
    break;
    case 'check':
        return new RegExp('\\b' + class1 + '\\b').test(object.className);
    break;
    }
}

var pages;

function initialize() {
  pages = document.getElementsByClass('page');
  for (i = 0; i < pages.length; i++) {
    classaction('add', pages[i], 'hidden', '');
  }
  show('title');
}

function show(id) {
  var page = document.getElementById(id);
  hide = document.getElementsByClass('shown');
  for (i = 0; i < hide.length; i++) {
    classaction('swap', hide[i], 'shown', 'hidden');
  }
  classaction('swap', page, 'hidden', 'shown');
}