var layerObject = {
supported: document.getElementById && (document.addEventListener || document.attachEvent),
obj: null,
zOrder: 1000,
skipClass: "xBox",
init: function(id, rootID, x, y, minX, maxX, minY, maxY) {
if (this.supported) {
      var o = document.getElementById(id);
      o.root = rootID? document.getElementById(rootID): o;
      o.idx = id; 
      if ( isNaN( parseInt(o.root.style.left) ) ) o.root.style.left = x? x + "px": 0 + "px"; 
      if ( isNaN( parseInt(o.root.style.top) ) )  o.root.style.top =  y? y + "px": 0 + "px";
      o.minX = minX; o.maxX = maxX; o.minY = minY; o.maxY = maxY;
      o.root.on_drag_start = function() {}
      o.root.on_drag = function() {}
      o.root.on_drag_end = function() {}
      dw_event.add( o, "mousedown", layerObject.start, false );}},
	  
start: function(e) {
    var o;
    e = dw_event.DOMit(e);
    if (e.tgt.nodeType && e.tgt.nodeType == 3) e.tgt = e.tgt.parentNode; 
    if (e.tgt.className && e.tgt.className == layerObject.skipClass ) return; 
    if (this.idx) o = layerObject.obj = this;
    else {  
     while (!e.tgt.idx) e.tgt = e.tgt.parentNode;
     o = layerObject.obj = e.tgt; }
    o.root.style.zIndex = layerObject.zOrder++;
    o.downX = e.clientX; o.downY = e.clientY;
    o.startX = parseInt(o.root.style.left);
    o.startY = parseInt(o.root.style.top);
    o.root.on_drag_start(o.startX, o.startY);
    dw_event.add( document, "mousemove", layerObject.drag, true );
    dw_event.add( document, "mouseup",   layerObject.end,  true );
    e.preventDefault();},
	
drag: function(e) {
    e = e? e: window.event;
    var o = layerObject.obj; 
    var nx = o.startX + e.clientX - o.downX;
    var ny = o.startY + e.clientY - o.downY;
    if ( o.minX != null ) nx = Math.max( o.minX, nx );
    if ( o.maxX != null ) nx = Math.min( o.maxX, nx );
    if ( o.minY != null ) ny = Math.max( o.minY, ny );
    if ( o.maxY != null ) ny = Math.min( o.maxY, ny );
    o.root.style.left = nx + "px"; o.root.style.top  = ny + "px";
    o.root.on_drag(nx,ny);
    return false;},

end: function() {
    dw_event.remove( document, "mousemove", layerObject.drag, true );
    dw_event.remove( document, "mouseup",   layerObject.end,  true );
    if ( !layerObject.obj ) return; 
    layerObject.obj.root.on_drag_end( parseInt(layerObject.obj.root.style.left), parseInt(layerObject.obj.root.style.top) );
    layerObject.obj = null;}}

var dw_event = {
add: function(obj, etype, fp, cap) {
    cap = cap || false;
    if (obj.addEventListener) obj.addEventListener(etype, fp, cap);
    else if (obj.attachEvent) obj.attachEvent("on" + etype, fp);}, 

remove: function(obj, etype, fp, cap) {
    cap = cap || false;
    if (obj.removeEventListener) obj.removeEventListener(etype, fp, cap);
    else if (obj.detachEvent) obj.detachEvent("on" + etype, fp);}, 

DOMit: function(e) { 
    e = e? e: window.event;
    e.tgt = e.srcElement? e.srcElement: e.target;   
    if (!e.preventDefault) e.preventDefault = function () { return false; }
    if (!e.stopPropagation) e.stopPropagation = function () { if (window.event) window.event.cancelBubble = true; }  
    return e;}}

var schermresolutie = {
getWinWidth: function () {
    this.width = 0;
    if (window.innerWidth) this.width = window.innerWidth - 18;
    else if (document.documentElement && document.documentElement.clientWidth) 
  		this.width = document.documentElement.clientWidth;
    else if (document.body && document.body.clientWidth) 
  		this.width = document.body.clientWidth;},
  
getWinHeight: function () {
    this.height = 0;
    if (window.innerHeight) this.height = window.innerHeight - 18;
  	else if (document.documentElement && document.documentElement.clientHeight) 
  		this.height = document.documentElement.clientHeight;
  	else if (document.body && document.body.clientHeight) 
  		this.height = document.body.clientHeight;},
  
getScrollX: function () {
    this.scrollX = 0;
  	if (typeof window.pageXOffset == "number") this.scrollX = window.pageXOffset;
  	else if (document.documentElement && document.documentElement.scrollLeft)
  		this.scrollX = document.documentElement.scrollLeft;
  	else if (document.body && document.body.scrollLeft) 
  		this.scrollX = document.body.scrollLeft; 
  	else if (window.scrollX) this.scrollX = window.scrollX;},
  
getScrollY: function () {
    this.scrollY = 0;    
    if (typeof window.pageYOffset == "number") this.scrollY = window.pageYOffset;
    else if (document.documentElement && document.documentElement.scrollTop)
  		this.scrollY = document.documentElement.scrollTop;
  	else if (document.body && document.body.scrollTop) 
  		this.scrollY = document.body.scrollTop; 
  	else if (window.scrollY) this.scrollY = window.scrollY;},
  
getAll: function () {
    this.getWinWidth(); this.getWinHeight();
    this.getScrollX();  this.getScrollY();}}

var plaatsen = {
  // xoffset en yoffset: cijfers ofwel "c"
  xoffset: 20,
  yoffset: 20,
  dragId:   "mijnLayer", 
  handleId: "",       
  writeId:  "",  
  draggable: false, 
  hideFlag: true,
  
init: function() { 
    if (this.handleId) layerObject.init(this.handleId, this.dragId);
    else layerObject.init(this.dragId);
    this.draggable = true;
    dw_event.add( document, "click",   plaatsen.checkHide, false );
    dw_event.add( document, "keydown", plaatsen.checkKey,  true );},
  
set: function(e, inhoud, wd, xoffset, yoffset) {
    this.hideFlag = false; 
    var wobj = this.writeId? document.getElementById( this.writeId ): document.getElementById( this.dragId );
    var dobj = document.getElementById( this.dragId );
    if ( !this.draggable ) this.init();
    this.hide();
    wobj.innerHTML = inhoud;
    
    if (wd) {
      var bw = dobj.style.borderWidth? parseInt(dobj.style.borderWidth): 0;
      var pw = wobj.style.padding? parseInt(wobj.style.padding): 0;
      wd += 2 * bw + 2 * pw;
      dobj.style.width = wd + "px"; }
    this.positionIt(e, dobj, xoffset, yoffset);}, 
  
positionIt: function(e, o, xoffset, yoffset) {
    var x=0, y=0; schermresolutie.getAll();
    if ( this.xoffset == "c" ) {
      x = Math.round( (schermresolutie.width - o.offsetWidth)/2 ) + schermresolutie.scrollX;} 
	  else { 
      x = e.pageX? e.pageX: e.clientX + schermresolutie.scrollX;
      xoffset = xoffset || this.xoffset;
      if ( x + o.offsetWidth + xoffset > schermresolutie.width + schermresolutie.scrollX ) 
        x = schermresolutie.width + schermresolutie.scrollX - o.offsetWidth;
      else x = x + xoffset;}
    
    if ( this.yoffset == "c" ) {
      y = Math.round( (schermresolutie.height - o.offsetHeight)/2 ) + schermresolutie.scrollY;} 
	  else {
      y = e.pageY? e.pageY: e.clientY + schermresolutie.scrollY; 
      yoffset = yoffset || this.yoffset; 
      if ( y + o.offsetHeight + yoffset > schermresolutie.height + schermresolutie.scrollY )
        y = schermresolutie.height + schermresolutie.scrollY - o.offsetHeight;
      else y = y + yoffset;}
    o.style.left = x + "px"; o.style.top = y + "px";
    document.getElementById(this.dragId).style.visibility = "visible";
    setTimeout("plaatsen.hideFlag = true",200); },
  
  checkKey: function(e) { // check voor esc toets
    e = e? e: window.event;  if ( e.keyCode == 27 ) plaatsen.hide();
  }, 

  checkHide: function(e) { 
    dw_event.DOMit(e);
   
    if (e.tgt.nodeType && e.tgt.nodeType == 3) e.tgt = e.tgt.parentNode; 
    if ( contained( e.tgt, document.getElementById("mijnLayer") ) ) {
      if ( e.tgt.tagName && e.tgt.tagName == "IMG" ) e.tgt = e.tgt.parentNode; 
      if ( e.tgt.tagName == "A" && e.tgt.href.indexOf("plaatsen.hide") != -1 ) plaatsen.hide();
      else return;
    }
    if (plaatsen.hideFlag) plaatsen.hide();
  },

  hide: function() { document.getElementById(plaatsen.dragId).style.visibility = "hidden"; }
}

function contained(oNode, oCont) {
  while ( oNode.parentNode ) {
    oNode = oNode.parentNode;
    if ( oNode == oCont ) return true;
  }
  return false;
}