function XBrowserAddHandler(target,eventName,handlerName) {
    if ( target.addEventListener )
      target.addEventListener(eventName, handlerName, false);
    else if ( target.attachEvent )
      target.attachEvent("on" + eventName, handlerName);
    else
      target["on" + eventName] = handlerName;
}

XBrowserAddHandler(window, "load", onPageLoad);

function onPageLoad() {
  var tables = document.getElementsByTagName("TABLE");
  for (var i=0; i < tables.length; i++) {
    c = tables[i].getAttribute("class") || tables[i].className;
    if (c && typeof c == "string" && c.toLowerCase() == "flipover") {
      var images = tables[i].getElementsByTagName("TD");
      for (var j=0; j < images.length; j++) {
        setFlipOver(images[j]);
      }
    }
  }
}

function setFlipOver(node) {
  var img = node.getElementsByTagName("IMG")[0];
  if (!img) return;
  
  var link = node.getElementsByTagName("A")[0].href;
  var txt = document.createElement("DIV");

  txt.innerHTML = '<table cellspacing="0" cellpadding="0" style="width: '+img.width+'px; height: '+img.height+'px;"><tr valign="middle"><td align="center" id="flipover_txt">'+img.getAttribute("alt")+'</td></tr></table>';
  img.parentNode.insertBefore(txt, img);
  txt.onclick = function() { window.location.href = link; }
  node.node_img = img;
  node.node_txt = txt;

  doFlipEnd(node);
  node.onmouseover = function() { doFlipBegin(node);};
  node.onmouseout  = function() { doFlipEnd(node);};
}

function doFlipBegin(node) {
  if (false) {
    node.node_img.style.visibility = "hidden";
    node.node_txt.style.visibility = "visible";
  } else {
    node.node_img.style.display = "none";
    node.node_txt.style.display = "block";
  }
}

function doFlipEnd(node) {
  if (false) {
    node.node_img.style.visibility = "";
    node.node_txt.style.visibility = "hidden";
  } else {
    node.node_img.style.display = "block";
    node.node_txt.style.display = "none";
  }
}

var pp = null;
var currentphoto = null;
var imgWidth;

function showPhoto(node) {
  var p = node;
  while (p.className != 'photobook') p = p.parentNode;
  closePhoto();
  photos = p.getElementsByTagName("IMG");
  
  pp = [];
  for (i=0; i < photos.length; i++) {
    pp[i] = photos[i];
    photos[i].style.display = "none";
    if (photos[i] == node) currentphoto = i;
  }
  
  l = document.getElementById('bigpicture');
  if (!l) {
    l = document.createElement('DIV');
    l2 = document.createElement('IMG');
    l2.onclick = closePhoto;
    l.appendChild(l2);
    
    var t = document.createElement("TABLE");
    t.id = "photobooknav";
    t.width = "100%";
//    t.border = 1;
    var r = t.appendChild(document.createElement("TBODY")).appendChild(document.createElement("TR"));
    var c;
    c = document.createElement("TD");
    c.align = "left";
    c.innerHTML = '<a href="" onclick="prevPhoto(); return false;">&laquo; vorige</a>';
    r.appendChild(c);

    c = document.createElement("TD");
    c.align = "center";
    c.innerHTML = '<a href="" onclick="closePhoto(); return false;">terug naar overzicht</a>';
    r.appendChild(c);
    
    c = document.createElement("TD");
    c.align = "right";
    c.innerHTML = '<a href="" onclick="nextPhoto(); return false;">volgende &raquo;</a>';
    r.appendChild(c);
    
    l.appendChild(t);
    l.id = "bigpicture";
    p.insertBefore(l, p.childNodes[0]);
  }
  
//  l2.onload = function() {
//    this.style.display = "block";
//  }
  
  imgWidth = l.offsetWidth;
  l2.src = node.src.replace('&w=178&h=178', '&w='+imgWidth+'&h='+imgWidth);
  updateLinks();
}

function updateLinks() {
  var prev = document.getElementById("bigpicture").getElementsByTagName("TD")[0].getElementsByTagName("A")[0];
//  if 
  prev.className = (currentphoto == 0) ? "disabled" : "";
  var next = document.getElementById("bigpicture").getElementsByTagName("TD")[2].getElementsByTagName("A")[0];
  next.className = (currentphoto < pp.length-1) ? "" : "disabled";
}

function closePhoto() {
  if (currentphoto != null) {
    var node = pp[currentphoto];
    for (i=0; i < pp.length; i++) {
      pp[i].style.display = "";
    }
    document.getElementById("bigpicture").parentNode.removeChild(document.getElementById("bigpicture"));
    currentphoto = null;
  }
}

function prevPhoto() {
  if (currentphoto > 0) {
    currentphoto--;
    var node = pp[currentphoto];
    l2 = document.getElementById("bigpicture").getElementsByTagName("IMG")[0];
    l2.src = node.src.replace('&w=178&h=178', '&w='+imgWidth+'&h='+imgWidth);
  }
  updateLinks();
}

function nextPhoto() {
  if (currentphoto < pp.length-1) {
    currentphoto++;
    var node = pp[currentphoto];
    l2 = document.getElementById("bigpicture").getElementsByTagName("IMG")[0];
    l2.src = node.src.replace('&w=178&h=178', '&w='+imgWidth+'&h='+imgWidth);
  }
  updateLinks();
}