function showStuff(id) {
    var element = document.getElementById(id)
    element.parentNode.removeChild(element);
    var body = document.getElementsByTagName('body')[0];
    body.insertBefore(element, body.firstChild);
    element.style.display = 'block';
    zentrieren(element, body);
}
function hideStuff(id) {
    var element = document.getElementById(id)
    element.style.display = 'none';
}

function zentrieren(element, relativElement)
{
    var dimElement = getDimension(element);
    var dimRelativ = getDimension(relativElement);
    var scrollPos = getScrollXY();

    var top  = (dimRelativ.y + dimRelativ.height - dimElement.height)/2 + scrollPos[1];
    var left = (dimRelativ.x + dimRelativ.width  - dimElement.width)/2  + scrollPos[0];
    element.style.top  = "" + top  + "px";
    element.style.left = "" + left + "px";
}

function getDimension(element)
{
    var x = y = 0;
    var node = element;
    if(node.nodeName != 'IFRAME'){
      while (node) {
          x += node.offsetLeft;
          y += node.offsetTop;
          node = node.offsetParent;
      }
    }
    var dimension=new Object();
    dimension.x=x;
    dimension.y=y;
    dimension.width  = element.offsetWidth;
    dimension.height = element.offsetHeight;
    return dimension;
}

function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;

	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	return [ scrOfX, scrOfY ];
}