function $(element) {
  if (typeof(element) == 'string')
    element = document.getElementById(element);
  return element;
}

function init (basePath){
  // Preload the background images. This doesn't have the same effect as putting them in the content (flickering when using those img urls). Why? Need to append the images to the document maybe?
//  var preloadableImages = ['_images/bg-contact.jpg', '_images/bg-detail.jpg', '_images/bg-karel.jpg', '_images/bg-links.jpg', '_images/bg-nieuws.jpg', '_images/bg-pers.jpg', '_images/bg-producten.jpg', '_images/bg-projecten.jpg', '_images/bg-studies.jpg', '_images/bg-contact.jpg', '_images/bg-contact.jpg', '_images/bg-contact.jpg', ];
//  for (var i=0; i<preloadableImages.length; i++){
//    var img = document.createElement('IMG');
//    img.src = basePath + '/' + preloadableImages[i];
//  }
  // Vertically center the container div (change it's vertical position if the 
  // browser window is higher than the container).
  var containerEl = document.getElementById('container');
  var windowHeight = getWindowHeight();
  var containerHeight = containerEl.offsetHeight;
  if (windowHeight > containerHeight){
    containerEl.style.top = Math.floor((windowHeight - containerHeight) / 2) + 'px';
  }
}

function getWindowHeight (){
  // From http://www.howtocreate.co.uk/tutorials/javascript/browserwindow.
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

function submitForm(formOrName, validator, elements, formproperties) {
	var form = (typeof(formOrName) == 'object') ? formOrName : document.forms[formOrName];
  for (var name in elements){
    if (form.elements[name]){
      form.elements[name].value = elements[name];
    }
  }
  if (validator == true && typeof(validateForm) == 'function'){ validator = validateForm; }
	if (validator && !validator(form)) {
	  return false;
	}
  for (var name in formproperties){
    form.attributes[name].value = formproperties[name];
  }
  form.submit();
  return false;
}

var originalTitle = null;
var revertTitleTimeout = null;
function showTitle (title){
  if (revertTitleTimeout != null){
    clearTimeout(revertTitleTimeout);
  }
  var el = document.getElementById('section-title');
  if (el == null){ return; }
  if (originalTitle == null){
    originalTitle = el.innerHTML;
  }
  el.innerHTML = title;
  var body = document.getElementsByTagName('body')[0];
  body.className = 'section-' + title;
}

function revertTitle (){
  var el = document.getElementById('section-title');
  if (el == null || originalTitle == null){ return; }
  el.innerHTML = originalTitle;
  var body = document.getElementsByTagName('body')[0];
  revertTitleTimeout = setTimeout(function (){ body.className = 'section-' + originalTitle; }, 150);
}

function scrollUp (id){
  var el = document.getElementById(id);
  var top = parseInt(el.style.top, 10);
  top = (((isNaN(top)) ? 0 : top) + 10)
  if (top > 0){ top = 0; }
  el.style.top = top + 'px';
  displayScrollArrowState(el, top);
}

function scrollDown (id){
  var el = document.getElementById(id);
  var scrollHeight = el.parentNode.clientHeight;
  var bottom = scrollHeight - el.offsetHeight;
  var top = parseInt(el.style.top, 10);
  top = (((isNaN(top)) ? 0 : top) - 10);
  if (el.offsetHeight < scrollHeight){ top = 0; }
  if (top + el.offsetHeight < scrollHeight && el.offsetHeight >  scrollHeight){ top = bottom; }
  el.style.top = top + 'px';
  displayScrollArrowState(el, top, el.offsetHeight, scrollHeight);
}

function displayScrollArrowState(id, top, contentHeight, windowHeight){
  var el = $(id);
  if (top == null){ top = parseInt(el.style.top, 10); top = isNaN(top) ? 0 : top; }
  if (contentHeight == null){ contentHeight = el.offsetHeight; }
  if (windowHeight == null){ windowHeight = el.parentNode.clientHeight; }
  var bottom = windowHeight - contentHeight;

  var arrows = el.parentNode.parentNode.getElementsByTagName('A');
  if (contentHeight <= windowHeight){
    Element.addClass(arrows[0], 'invisible');
    Element.addClass(arrows[arrows.length-1], 'invisible');
  }else{
    Element.removeClass(arrows[0], 'invisible');
    Element.removeClass(arrows[arrows.length-1], 'invisible');
    if (top == 0){
      Element.addClass(arrows[0], 'disabled');
      Element.removeClass(arrows[arrows.length-1], 'disabled');
    }else if (top == bottom){
      Element.removeClass(arrows[0], 'disabled');
      Element.addClass(arrows[arrows.length-1], 'disabled');
    }else{
      Element.removeClass(arrows[0], 'disabled');
      Element.removeClass(arrows[arrows.length-1], 'disabled');
    }
  }
}

var scrollingElements = {};
function startScrolling (id, direction){
  stopScrolling(id);
  var code = 'scroll' + direction + '("' + id + '");';
  eval(code);
  scrollingElements[id] = setInterval(code, 100);
}

function stopScrolling (id){
  if (scrollingElements[id]){
    clearInterval(scrollingElements[id]);
    delete scrollingElements[id];
  }
}

var originalContent = null;
var infoContent = null;
var menuContent = null;
function showInfo (){
  var contentEl = document.getElementById('content');
  if (originalContent == null){
    originalContent = contentEl.innerHTML;
  }
  if (infoContent == null){
    var el = document.getElementById('info-data');
    infoContent = el.innerHTML;
    el.innerHTML = '';
  }
  contentEl.innerHTML = infoContent;
  displayScrollArrowState('scrollingContent');
}

function hideInfo (){
  if (originalContent != null){
    var contentEl = document.getElementById('content');
    contentEl.innerHTML = originalContent;
    originalContent = null;
  }
}

function showMenu (){
  var el = document.getElementById('menu-data');
  if (el != null){
    var contentEl = document.getElementById('content');
    if (originalContent == null){
      originalContent = contentEl.innerHTML;
    }
    if (menuContent == null){
      menuContent = el.innerHTML;
      el.innerHTML = '';
    }
    contentEl.innerHTML = menuContent;
    displayScrollArrowState('children');
    return false;
  }else{
    return true;
  }
}

function hideMenu (){
  hideInfo();
}

var originalSection = null;
function showDetail (){
  // Show the #detail element and insert the detail content.
  var detailEl = document.getElementById('detail');
  detailEl.style.display = 'block';
  var dataEl = document.getElementById('detail-data');
  detailEl.innerHTML = dataEl.innerHTML;
  var glassPaneEl = document.getElementById('glass-pane');
  glassPaneEl.style.display = 'block';
  // Hide the content and change the background image (through body.className).
  var contentEl = document.getElementById('content');
  contentEl.style.display = 'none';
  var body = document.getElementsByTagName('body')[0];
  originalSection = body.className;
  body.className = 'section-detail';
}

function hideDetail (){
  // Hide the #detail element.
  var detailEl = document.getElementById('detail');
  detailEl.style.display = 'none';
  var glassPaneEl = document.getElementById('glass-pane');
  glassPaneEl.style.display = 'none';
  // Show the content again and revert the background image (through body.className).
  var contentEl = document.getElementById('content');
  contentEl.style.display = 'block';
  var body = document.getElementsByTagName('body')[0];
  body.className = originalSection;
}

function chooseChildType (){
  var el = document.getElementById('childTypeChooser');
  el.style.display = 'block';
}

Element = {};
Element.hasClass = function (el, name)
{
  if (!el){return false;}
  el = $(el);
  return (el.className.match(new RegExp("\\b" + name + "\\b", "i")));
}
Element.addClass = function (el, name)
{
  if (!el){return;}
  el = $(el);
  if (el.className.match(new RegExp("\\b" + name + "\\b", "i"))){return;}
  el.className = el.className + " " + name;
}
Element.removeClass = function (el, name)
{
  if (!el){return;}
  el = $(el);
  el.className = (" " + el.className + " ").replace(new RegExp(" " + name + " ", "i"), " ");
}
Element.replaceClass = function (el, oldName, newName)
{
  if (!el){return;}
  el = $(el);
  el.className = (" " + el.className + " ").replace(new RegExp(" " + oldName + " ", "i"), " " + newName + " ");
}
/**
  Toggle between two class names. If neither is present, the first class will
  be added.
*/
Element.toggleClass = function (el, name1, name2)
{
  if (!el){return;}
  el = $(el);
  if (Element.hasClass(el, name1)){ Element.replaceClass(el, name1, name2); }
  else if (Element.hasClass(el, name2)){ Element.replaceClass(el, name2, name1); }
  else { Element.addClass(el, name1); }
}