var width = 600;
var height = 430;

var Popin = {
  oRoot: null,
  sTitle: null,
  sText: null,
  sImage: null,

  init:function(title,text,image,bg) {
    this.sTitle = title;
    this.sText = text;
    this.sImage = image;
    this.sBg = bg;
    this.oDiv = null;

    var docDim = document.viewport.getDimensions();
    var docScroll = document.viewport.getScrollOffsets();
    this.oRoot = document.getElementById('popindiv');
    this.oRoot.style.position = 'absolute';
    if(document.selection) {
      w = GetDocumentWidth();
      xoff = GetXOffset();
      h = GetDocumentHeight();
      yoff = 200;
      this.oRoot.style.left = (Math.ceil(w/2+xoff)-Math.ceil(width/2)) + 'px';
      this.oRoot.style.top = 200 + 'px';
    }
    else
    {
      this.oRoot.style.left = (Math.ceil(docDim.width / 2 + docScroll.left)-Math.ceil(width/2)) + 'px';
      this.oRoot.style.top = (Math.ceil(docDim.height / 2 + docScroll.top)-Math.ceil(height/2)) + 'px';
    }
    this.oRoot.style.width=width+'px';
    this.oRoot.style.height=height+'px';
    this.oRoot.style.background = 'url(art/'+this.sBg+')';
    this.oRoot.style.border='1px solid #bbbbbb';

    // Create black background
    div = document.createElement('div');
    div.id = 'popinbackground';
    div.style.position='absolute';
    div.style.top = '0px';
    div.style.left = '0px';
    div.style.width= '100%';
    div.style.height= '100%';
    div.style.background = '#000000';
    div.setOpacity(0.5);
    div.style.zIndex = '3';
    this.oDiv = div;

    document.body.appendChild(div);
    Effect.Appear('popinbackground',{duration:1.0,from:0.0,to:0.5} );

    Effect.Grow('popindiv', {
	afterFinish:function(){Popin.drawTable();}
	});
//    Event.observe(p,'click',Popin.close.bindAsEventListener(Popin));
    Event.observe(window,'load', function() {alert('dus');});
  },
  showbg: function() {
  },
  drawTable:function() {

    var table = document.createElement('table');
    table.className = 'popin';
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);

    tr = document.createElement('tr');
    td = document.createElement('th');
    td.className = 'title';
    td.colSpan=2;
    td.appendChild(document.createTextNode(this.sTitle));
    tr.appendChild(td);
    tbody.appendChild(tr);
    tr = document.createElement('tr');
    td = document.createElement('td');
    td.className = 'text';
    //td.appendChild(document.createTextNode(this.sText));
    td.innerHTML = this.sText;
    tr.appendChild(td);
    td = document.createElement('td');
    td.className = 'img';
    if(this.sImage != "")
      td.innerHTML = "<img src=\""+this.sImage+"\"/>";
    tr.appendChild(td);
    tbody.appendChild(tr);


    var p = document.createElement('p');
    p.style.cursor = 'pointer';
    p.appendChild(document.createTextNode('Sluiten'));
    // Create button
    tr = document.createElement('tr');
    td = document.createElement('td');
    td.className = 'popinbottom';
    td.colSpan=2;
    td.appendChild(p);
    tr.appendChild(td);
    tbody.appendChild(tr);
    Event.observe(p,'click',Popin.close.bindAsEventListener(Popin));

    this.oRoot.appendChild(table);
  },
  close: function () {
    document.getElementById('popindiv').shrink();
    document.getElementById('popinbackground').fade();
  }
}

function GetDocumentWidth()
{
  var w = document.body.scrollWidth;
  if(w == 0)
    w = document.body.clientWidth;
  return w;
}

function GetDocumentHeight()
{
  var h = document.body.scrollHeight;
  if(h == 0)
    h = document.body.clientHeight;
  return h;
}

function GetXOffset()
{
  if(window.pageXOffset)
    return window.pageXOffset;
  else
    return document.body.scrollLeft;
}

function GetYOffset()
{
  if(window.pageYOffset)
    return window.pageYOffset;
  else
    return document.body.scrollTop;
}