function Browser() {
  var agent;
  var app;
  var i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  agent = navigator.userAgent;

  app = "MSIE";
  if ((i = agent.indexOf(app)) >= 0){
    this.isIE = true;
  } else {
    this.isNS = true;
  }
}

var browser = new Browser();
var dragObj = new Object();
var boardObj = new Object();
var cloneObj = new Object();
var bodyObj = new Object();
var status_text = new Object();
var currentContentID;
var editAllowed;
var editAllowedItem = new Array();
//Both editAllowed's are checked on server-side.
var pageNum;

editAllowed = false;
dragObj.zIndex = 0;
currentContentID = 0;

function setstatus(div,txt){
var divobj;
    if (document.getElementById) {
        divobj = document.getElementById(div);
    } else if (document.all) {
        divobj = document.all[div];
    } else if (document.layers) {
        divobj = document.layers[div];
    } else {
        divobj = document.getElementById(div);
    }
    divobj.innerHTML = txt;
}

function notes_setstatus(txt)
{
    if(!status_text.innerHTML){
        if (document.getElementById) {
            status_text = document.getElementById("dashboard_curstatus");
        } else if (document.all) {
            status_text = document.all["dashboard_curstatus"];
        } else if (document.layers) {
            status_text = document.layers["dashboard_curstatus"];
        } else {
            status_text = document.getElementById("dashboard_curstatus");
        }
    }
    status_text.innerHTML = txt;

}

function notes_setParams(divID)
{
  if(editAllowed || editAllowedItem[divID]){
      notes_setstatus("<img src='images/loading.gif' align='absMiddle'> Wijzigingen opslaan...");
      dragObj.elNode = document.getElementById("postit"+divID);
      dragObj.elNodecontent = document.getElementById("postitcontent"+divID);
      dragObj.elNodeheader = document.getElementById("postitheader"+divID);

      x = dragObj.elNode.style.left;
      y = dragObj.elNode.style.top;
      h = dragObj.elNodecontent.style.height;
      w = dragObj.elNodecontent.style.width;
      z = dragObj.elNode.style.zIndex;
      c = dragObj.elNode.style.backgroundColor;
      b = dragObj.elNode.style.border;
      d = dragObj.elNodeheader.style.display;
      r = dragObj.elNodecontent.style.ratio;

      if(b == ""){
        b = "none";
      }                                                          
      value = x + ";" + y+ ";" + w + ";" + h + ";" + c + ";" + z+ ";"+ b+ ";" + d + ";" + r;
      xajax_xajax_ContentRequestParam(divID, "xajax_updateParams", value, "dashboard_curstatus");

//      formelement = document.getElementById("noteParams"+divID);
//      formelement.value = value;
  } else {
      notes_setstatus("Wijziging niet opgeslagen.");
  }
}

function notes_changeBorder(divID, thickness, style, color)
{
    var borderstring;
    
    notes_setstatus("Wijzig randen...");
    whichLayer = "postit"+divID;
    if (document.getElementById) {
        var style3 = document.getElementById(whichLayer).style;
    } else if (document.all) {
        var style3 = document.all[whichLayer].style;
    } else if (document.layers) {
        var style3 = document.layers[whichLayer].style;
    } else {
        var style3 = document.getElementById(whichLayer).style;
    }

    if(color && (style3.border=="" || style3.borderStyle =="none")){
        style3.border = "1px solid " + color;
    }
    
    if(thickness && (style3.border=="" || style3.borderStyle =="none")){
        style3.border = "solid black " + thickness;
    }
    
    if(style && (style3.border=="" || style3.borderStyle =="none")){
        style3.border = "1px black " + style;
    }
    
    if(thickness){
        style3.borderWidth =  thickness;
    }

    if(style){
        style3.borderStyle = style;
    }

    if(color){
        style3.borderColor = color;
    }
    
    if((!thickness && !style && !color) || style=="none"){
        style3.border = "none";
    } else {
    }
    notes_setParams(divID)
}

function notes_changeBackground(divID, color)
{
    notes_setstatus("Wijzig kleur...");
    whichLayer = "postit"+divID;
    if (document.getElementById) {
        var style3 = document.getElementById(whichLayer).style;
    } else if (document.all) {
        var style3 = document.all[whichLayer].style;
    } else if (document.layers) {
        var style3 = document.layers[whichLayer].style;
    } else {
        var style3 = document.getElementById(whichLayer).style;
    }

    style3.backgroundColor = color;
    
    notes_setParams(divID)
}

function notes_sendToBack(divID)
{
    dragObj.elNode = document.getElementById("postit"+divID);
    dragObj.elNode.style.zIndex = 1;
    notes_setParams(divID)
}

function notes_findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function notes_findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

function notes_startDrag(event, divID) {

  var el;
  var x, y;
  
  notes_setstatus("Verplaatsen...");

  dragObj.elNode = document.getElementById("postit"+divID);
  dragObj.divID = divID;

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  } else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
 
  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  if (browser.isIE) {
    document.attachEvent("onmousemove", notes_drag);
    document.attachEvent("onmouseup",   notes_stopDrag);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  } else {
    document.addEventListener("mousemove", notes_drag,   true);
    document.addEventListener("mouseup",   notes_stopDrag, true);
    event.preventDefault();
  }
  
  if(divID != currentContentID){
    currentContentID = divID;
    xajax_xajax_ContentRequest(divID, "printItemDashboard", "dashboard_form");
  }
}

function notes_drag(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  } else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  dragObj.elNode.style.left =
    (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  =
    (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }else {
    event.preventDefault();
  }
}

function notes_stopDrag(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", notes_drag);
    document.detachEvent("onmouseup",   notes_stopDrag);
  } else {
    document.removeEventListener("mousemove", notes_drag,   true);
    document.removeEventListener("mouseup",   notes_stopDrag, true);
  }
  notes_setParams(dragObj.divID)
}

function notes_startResize(event, divID) {

  var el;
  var x, y;

  notes_setstatus("Wijzig grootte...");
  
  divID1 = "postitcontent"+divID;
  divID2 = "postitbottom"+divID;
  divID3 = "postit"+divID;
  
  dragObj.elNode = document.getElementById(divID1); //  "postitcontent"
  dragObj.elNodebottom = document.getElementById(divID2); // "postitbottom"
  dragObj.elNodecontainer = document.getElementById(divID3); // "postit"
  //dragObj.fixedratio = fixedratio;
  dragObj.divID = divID;

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  } else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
  
  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = notes_findPosX(dragObj.elNode);
  dragObj.elStartTop   = notes_findPosY(dragObj.elNode);
  //dragObj.ratio = dragObj.elNode.style.width / dragObj.elNode.style.height;
 
  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  if (browser.isIE) {
    document.attachEvent("onmousemove", notes_resize);
    document.attachEvent("onmouseup",   notes_stopResize);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  } else {
    document.addEventListener("mousemove", notes_resize,   true);
    document.addEventListener("mouseup",   notes_stopResize, true);
    event.preventDefault();
  }
}

function notes_resize(event) {

  var x, y, w, h;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  } else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  // dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
  
  w = x - dragObj.elStartLeft;
  if(dragObj.elNode.style.ratio > 0){
    h = dragObj.elNode.style.ratio * w;
  } else {
    h = y - dragObj.elStartTop;
  }
  // dragObj.elNode.innerHTML = dragObj.elStartLeft + ":" + dragObj.elStartTop + " |  "+ x + ":" + y + " |  "+ w + " x " + h;
  if( w > 100){
    dragObj.elNode.style.width = w + "px";
    dragObj.elNodebottom.style.width = w + "px";
    dragObj.elNodecontainer.style.width = w + "px";
  }
  if(h > 50){
    dragObj.elNode.style.height = h + "px";
  }
                                
  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }else {
    event.preventDefault();
  }
}

function notes_stopResize(event) {

  // Stop capturing mousemove and mouseup events.
  if (browser.isIE) {
    document.detachEvent("onmousemove", notes_resize);
    document.detachEvent("onmouseup",   notes_stopResize);
  } else {
    document.removeEventListener("mousemove", notes_resize,   true);
    document.removeEventListener("mouseup",   notes_stopResize, true);
  }
  notes_setParams(dragObj.divID)
}

function notes_startBoardResize(event, contentID) {

  var el;
  var x, y;

  notes_setstatus("Wijzig grootte prikbord...");
  
  divID1 = "board"+contentID;
  
  dragObj.elNode = document.getElementById(divID1);
  dragObj.contentID = contentID;

  if (browser.isIE) {
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  } else {
    y = event.clientY + window.scrollY;
  }
  
  dragObj.cursorStartY = y;
  dragObj.elStartTop   = notes_findPosY(dragObj.elNode);

  if (browser.isIE) {
    document.attachEvent("onmousemove", notes_BoardResize);
    document.attachEvent("onmouseup",   notes_stopBoardResize);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  } else {
    document.addEventListener("mousemove", notes_BoardResize,   true);
    document.addEventListener("mouseup",   notes_stopBoardResize, true);
    event.preventDefault();
  }
}

function notes_BoardResize(event) {

  var x, y, w, h;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  } else {
    y = event.clientY + window.scrollY;
  }

  h = y - dragObj.elStartTop;
  if(h > 50){
    dragObj.elNode.style.height = h + "px";
  }
                                
  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }else {
    event.preventDefault();
  }
}

function notes_stopBoardResize(event) {

  // Stop capturing mousemove and mouseup events.
  if (browser.isIE) {
    document.detachEvent("onmousemove", notes_BoardResize);
    document.detachEvent("onmouseup",   notes_stopBoardResize);
  } else {
    document.removeEventListener("mousemove", notes_BoardResize,   true);
    document.removeEventListener("mouseup",   notes_stopBoardResize, true);
  }

  h = dragObj.elNode.style.height;
  xajax_xajax_ContentRequestParam(dragObj.contentID, "xajax_updateHeight", h, "dashboard_curstatus");
}

var current_drag_id = null;

function item_startDrag(event, div, board) {

  var el;
  var x, y; 
  
  dragObj.elNode = document.getElementById(div);
  boardObj.elNode = document.getElementById(board);
  // cloneObj.elNode = document.getElementById("dragclone");
  bodyObj.elNode = document.getElementById("container");
  dragPos = getPosition(dragObj.elNode);
  
  // set current_drag_id to contentID of object to be dragged;
  current_drag_id = dragObj.elNode.id.replace("photo","");

  cloneObj.elNode = dragObj.elNode.cloneNode(true);
  bodyObj.elNode.appendChild(cloneObj.elNode);
  dragObj.elNode = cloneObj.elNode;
  
  dragObj.elNode = cloneObj.elNode;
  dragObj.elNode.style.position = 'absolute';

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  } else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;

  x = x - 50;
  y = y - 50;

  dragObj.elNode.style.left = x + "px";
  dragObj.elNode.style.top = y + "px";

  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
 
  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  if (browser.isIE) {
    document.attachEvent("onmousemove", item_drag);
    document.attachEvent("onmouseup",   item_stopDrag);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  } else {
    document.addEventListener("mousemove", item_drag,   true);
    document.addEventListener("mouseup",   item_stopDrag, true);
    event.preventDefault();
  }    
}

function item_drag(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  } else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  dragObj.elNode.style.left =
    (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  =
    (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }else {
    event.preventDefault();
  }
}

function item_stopDrag(event) {

  if(inside(dragObj.elNode, boardObj.elNode)){
    notes_setstatus("<img src='images/loading.gif' align='absMiddle'> Nieuw item toevoegen...");
    
    newid = current_drag_id;
    var url = dragObj.elNode.title;
    boardid = boardObj.elNode.id.replace("board","");

    boardPos = getPosition(boardObj.elNode);
    dragPos = getPosition(dragObj.elNode);
    
    x = dragPos.x - boardPos.x;
    y = dragPos.y - boardPos.y;
    
    
    if(url != undefined && url.search("http") != -1){
        value = pageNum + ";" + url + ";" + x + ";" + y;
//        alert("Extern: "+  value);
        xajax_xajax_ContentRequestParam(boardid, "xajax_addItemExtern", value, "dashboard_curstatus");
    } else {
        value = pageNum + ";" + newid + ";" + x + ";" + y;
//        alert("Intern: "+ value);
        xajax_xajax_ContentRequestParam(boardid, "xajax_addItem", value, "dashboard_curstatus");
    }
  } else {
  }
    //hide dragclone
    
    //dragObj.elNode.style.display = "none";
    bodyObj.elNode.removeChild(dragObj.elNode);
  
  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", item_drag);
    document.detachEvent("onmouseup",   item_stopDrag);
  } else {
    document.removeEventListener("mousemove", item_drag,   true);
    document.removeEventListener("mouseup",   item_stopDrag, true);
  }
}

function getPosition(e){
    var left = 0;
    var top  = 0;
    var org = null;
    
    org = e;
    
    while (e.offsetParent){
        left += e.offsetLeft;
        top  += e.offsetTop;
        e     = e.offsetParent;
    }

    left += e.offsetLeft;
    top  += e.offsetTop;
    
    x_end = left + parseInt(org.style.width,10);
    y_end = top + parseInt(org.style.height,10);

    return {x:left, y:top, xx:x_end, yy:y_end};
}

function inside(element, container){
    pos1 = getPosition(element);
    pos2 = getPosition(container);
    
    // linksboven:
    if(pos1.x >= pos2.x && pos1.x <= pos2.xx && pos1.y >= pos2.y && pos1.y <= pos2.yy) return true;
    // rechtsonder:
    // if(pos1.xx >= pos2.x && pos1.xx <= pos2.xx && pos1.yy >= pos2.y && pos1.yy <= pos2.yy) return true;
    // linksonder:
    // if(pos1.x >= pos2.x && pos1.x <= pos2.xx && pos1.yy >= pos2.y && pos1.yy <= pos2.yy) return true;
    // rechtsboven:
    // if(pos1.xx >= pos2.x && pos1.xx <= pos2.xx && pos1.y >= pos2.y && pos1.y <= pos2.yy) return true;
    
    return false;
}


<!--************************************************************************-->
<!--* Drag functions above are inspired by a tutorial:                     *-->
<!--* Generic Drag Demo                                                    *-->
<!--*                                                                      *-->
<!--* Copyright 2001 by Mike Hall                                          *-->
<!--* Please see http://www.brainjar.com for terms of use.                 *-->
<!--************************************************************************-->