/**
 *  class to move and resize div elements
 *
 *  @author   Tobias Hettinger
 *  @version  $Id: div.js 162 2011-12-16 13:34:40Z tobias $
 */


/**
 *  constructor of the div manager
 * 
 *  @param object element  div element to modify
 */
var WATDiv = function(element)
{
  //  initialize the member variables
  this.element = element;
  this.display = new WATDisplay(element);  
  this.onMove = null;
  this.onMoving = null;
  this.onMoved = null;
  this.onAbortMoving = null;
  this.onResize = null;
  this.onResizing = null;
  this.onResized = null;
  this.onAbortResizing = null;
  
  //  user interactive movement
  this.enableMouseMove = false;
  this.enableResizeWidth = false;
  this.enableResizeHeight = false;
  this.eventsRegistered = false;
  this.overlayDiv = null;
  this.overlayOpacity = 0.2;
  this.hasFocus = false;
  this.moving = false;
  this.resize = 0;  // 1: top, 2: top/left, 3: left, 4: bottom:left, 5: bottom, 6: bottom/right, 7: right, 8:top/right
  this.resizeBorderTop = 10;
  this.resizeBorderBottom = 10;
  this.resizeBorderLeft = 10;
  this.resizeBorderRight = 10;
  this.resizeOffsetTop = 0;
  this.moveFrameTop = -1;
  this.moveFrameLeft = -1;
  this.moveFrameHeight = -1;
  this.moveFrameWidth = -1;
  this.moveFrameWidthOffset = 0;
  this.moveFrameHeightOffset = 0;
  this.keepAspectRatio = false;
  this.keepAspectRatioEdge = false;
  this.moveOffsetX = 0;
  this.moveOffsetY = 0;
  this.moveGridX = 0;
  this.moveGridY = 0;
  this.topDiff = 0;
  this.leftDiff = 0;
  this.borderLeftDiff = 0;
  this.borderRightDiff = 0;
  this.borderTopDiff = 0;
  this.borderBottomDiff = 0;
  this.modifyCurrentTop = 0;
  this.modifyCurrentLeft = 0;
  this.modifyCurrentWidth = 0;
  this.modifyCurrentHeight = 0;
  this.minWidth = 30;
  this.minHeight = 30;
  this.maxWidth = null;
  this.maxHeight = null;
  this.minTop = null;
  this.minLeft = null;
  this.maxRight = null;
  this.maxBottom = null;
}


//---------------------------------------------------------------------------------------------------------------------
//  resizing and animation

/**
 *  function to set the width of the div
 *
 *  @param int width  new width of the div
 *  @param int align  alignment: 0 - left - the left position is fixed
 *                               1 - right - the right position is fixed
 *                               2 - center - the left and the right border are moved one half
 */
WATDiv.prototype.SetWidth = function(width, align)
{
  switch(align)
  {
    case 1 :
      this.element.style.left = (this.element.offsetLeft - (width - this.display.GetWidth())) + 'px';
      this.element.style.width = width + 'px';
      break;
  
    case 2 :
      this.element.style.left = (this.element.offsetLeft - ((width - this.display.GetWidth()) / 2)) + 'px';
      this.element.style.width = width + 'px';
      break;
  
    default :
      this.element.style.width = width + 'px';
      break;
  }
}

/**
 *  function to set the height of the div
 *
 *  @param int height  new height of the div
 *  @param int align   alignment: 0 - top - the top position is fixed
 *                                1 - bottom - the bottom position is fixed
 *                                2 - center - the top and the bottom border are moved one half
 *  @param int maxTop  maximum top position
 */
WATDiv.prototype.SetHeight = function(height, align, maxTop)
{
  switch(align)
  {
    case 1 :
      var top = this.element.offsetTop;
      if (top >= maxTop) this.element.style.top = (top - (height-this.GetHeight())) + 'px';
      this.element.style.height = height + 'px';
      break;
  
    case 2 :
      this.element.style.top = (this.element.offsetTop - ((height-this.GetHeight()) / 2)) + 'px';
      this.element.style.height = height + 'px';
      break;
  
    default :
      this.element.style.height = height + 'px';
      break;
  }
}

/**
 *  function to move the div in an animated way
 *
 *  @param int top     new top position of the div or -1 if the top position should not be changed
 *  @param int left    new left position of the div or -1 if the left position should not be changed
 *  @param int width   new width of the div or -1 if the width should not be changed
 *  @param int height  new height of the div or -1 if the heigth should not be changed
 *  @param int maxTop  maximum top position
 */
WATDiv.prototype.Move = function(top, left, width, height, maxTop)
{
  var actWidth = this.display.GetWidth();
  var widthDiff = Math.abs(width - actWidth);
  var actHeight = this.display.GetHeight();
  var heightDiff = Math.abs(height - actHeight);

  var msec = 500;
  var timer = 0;
  var speed = Math.round(msec/100);
  var step = 0;
  var heightStep = 0;
  var obj = this;
  
  function __SetWidth()
  {
    var newWidth = width>actWidth ? actWidth+step : actWidth-step;
    obj.SetWidth(newWidth, 0);
    step += 2;
  }
  
  function __SetHeight()
  {
    var newHeight = height>actHeight ? actHeight+heightStep : actHeight-heightStep;
    obj.SetHeight(newHeight, 1, maxTop);
    heightStep += 2;
  }
  
  for (i=0; i<=widthDiff; i=i+2)
  {
    setTimeout(__SetWidth, timer*speed);
    timer++;
  }
  
  for (i=0; i<=heightDiff; i=i+2)
  {
    setTimeout(__SetHeight, timer*speed);
    timer++;
  }  
}

/**
 *  function to estimate the time an animated movement will take
 *
 *  @param int top     new top position of the div or -1 if the top position should not be changed
 *  @param int left    new left position of the div or -1 if the left position should not be changed
 *  @param int width   new width of the div or -1 if the width should not be changed
 *  @param int height  new height of the div or -1 if the heigth should not be changed
 */
WATDiv.prototype.GetMoveTime = function(top, left, width, height)
{
  var actWidth = this.display.GetWidth();
  var widthDiff = Math.abs(width - actWidth);
  var actHeight = this.display.GetHeight();
  var heightDiff = Math.abs(height - actHeight);
  
  var msec = 500;
  var speed = Math.round(msec/100);
  
  return (speed*(widthDiff/2) + speed*(heightDiff/2));
}


//---------------------------------------------------------------------------------------------------------------------
//  mouse interactive movement

/**
 *  function to setup the movement of the div
 *
 *  @param int mouseX  left position of the mouse that should be used to determine the move mode
 *  @param int mouseY  top position of the mouse that should be used to determine the move mode
 */
WATDiv.prototype.__SetupMove = function(mouseX, mouseY)
{
  //  initialize the variables
  var top = this.display.GetTop();
  var left = this.display.GetLeft();
  var width = this.display.GetWidth();
  var height = this.display.GetHeight();
  var moveFrameExists = false;
  var requireOverlay = false;
  
  this.modifyCurrentTop = top;
  this.modifyCurrentLeft = left;
  this.modifyCurrentWidth = width;
  this.modifyCurrentHeight = height;
  this.topDiff = top - this.element.offsetTop;
  this.leftDiff = left - this.element.offsetLeft;
  this.moveOffsetX = mouseX - left;
  this.moveOffsetY = mouseY - top;

  //  get the border width of the element
  if (this.element.style.borderWidth)
  {
    var borderWidth = parseInt(this.element.style.borderWidth.replace('px', ''));
    this.borderLeftDiff = borderWidth;
    this.borderRightDiff = borderWidth;
    this.borderTopDiff = borderWidth;
    this.borderBottomDiff = borderWidth;
  }
  else
  {
    //  no border is set, compare the real width/height and the width/height style properties
    var elementWidth = parseInt(this.element.style.width.replace('px', ''));
    this.borderLeftDiff = (width - elementWidth) / 2;
    this.borderRightDiff = (width - elementWidth) / 2;
    var elementHeight = parseInt(this.element.style.height.replace('px', ''));
    this.borderTopDiff = (height - elementHeight) / 2;
    this.borderBottomDiff = (height - elementHeight) / 2;
  }

  //  move the div if a move frame is defined
  if (this.enableMouseMove && this.moveFrameTop > -1 && this.moveFrameLeft > -1 &&
     (this.moveFrameWidth > -1 || this.moveFrameHeight > -1))
  {
    var moveFrameWidth = this.moveFrameWidth > -1 ? this.moveFrameWidth : width;
    var moveFrameHeight = this.moveFrameHeight > -1 ? this.moveFrameHeight : height;
    moveFrameExists = true;
    
    if (this.moveOffsetX >= this.moveFrameLeft && this.moveOffsetY >= this.moveFrameTop &&
        this.moveOffsetX <= (this.moveFrameLeft + moveFrameWidth - this.moveFrameWidthOffset) &&
        this.moveOffsetY <= (this.moveFrameTop + moveFrameHeight - this.moveFrameHeightOffset))
    {
      this.moving = true;
      requireOverlay = true;
      document.body.style.cursor = 'move';
      if (this.onMove) this.onMove(this);      
    }
  }
  
  //  get the resize mode if resizing is allowed
  if (!this.moving && (this.enableResizeWidth || this.enableResizeHeight))
  {
    if (this.moveOffsetX < this.resizeBorderLeft)
    {
      //  the cursor is in the left resize area
      if (this.moveOffsetY < this.resizeBorderTop)
      {
        //  the cursor is in the top/left resize area
        if (this.enableResizeWidth && this.enableResizeHeight) this.resize = 2;
          else if (this.enableResizeWidth) this.resize = 3;
                 else this.resize = 1;
      }
      else
      {
        if (height - this.moveOffsetY < this.resizeBorderBottom)
        {
          //  the cursor is in the bottom/left resize area
          if (this.enableResizeWidth && this.enableResizeHeight) this.resize = 4;
            else if (this.enableResizeWidth ) this.resize = 3;
                   else this.resize = 5;
        }
        else
        {
          //  the cursor is in the left resize area
          if (this.enableResizeWidth) this.resize = 3;
        }
      }
    }
    else
    {
      if (width - this.resizeBorderRight < this.moveOffsetX)
      {
        //  the cursor is in the right resize area
        if ((this.moveOffsetY + this.resizeOffsetTop) < this.resizeBorderTop)
        {
          //  the cursor is in the top/right resize area
          if (this.enableResizeWidth && this.enableResizeHeight) this.resize = 8;
            else if (this.enableResizeWidth) this.resize = 7;
                   else this.resize = 1;
        }
        else
        {
          if (height - this.moveOffsetY < this.resizeBorderBottom)
          {
            //  the cursor is in the bottom/right resize area
            if (this.enableResizeWidth && this.enableResizeHeight) this.resize = 6;
              else if (this.enableResizeWidth) this.resize = 7;
                     else this.resize = 5;
          }
          else
          {
            //  the cursor is in the right resize area
            if (this.enableResizeWidth && (this.moveOffsetY > this.resizeOffsetTop)) this.resize = 7;
          }
        }
      }
      else
      {
        if ((this.moveOffsetY + this.resizeOffsetTop) < this.resizeBorderTop)
        {
          //  the cursor is in the top resize area
          if (this.enableResizeHeight) this.resize = 1;
        }
        else
        {
          if (this.moveOffsetY > height - this.resizeBorderBottom)
          {
            //  the cursor is in the bottom resize area
            if (this.enableResizeHeight) this.resize = 5;
          }
        }
      }
    }
     
    //  set the mouse cursor
    switch(this.resize)
    {
      case 1 : document.body.style.cursor = 'n-resize'; break;
      case 2 : document.body.style.cursor = 'nw-resize'; break;
      case 3 : document.body.style.cursor = 'w-resize'; break;
      case 4 : document.body.style.cursor = 'sw-resize'; break;
      case 5 : document.body.style.cursor = 's-resize'; break;
      case 6 : document.body.style.cursor = 'se-resize'; break;
      case 7 : document.body.style.cursor = 'e-resize'; break;
      case 8 : document.body.style.cursor = 'ne-resize'; break;
    }
  }
  
  //  require the overlay div
  if (this.resize > 0)
  {
    requireOverlay = true;
    if (this.onResize) this.onResize(this);
  }
        
  //  no resizing, start moving
  if (!moveFrameExists && this.resize == 0 && this.enableMouseMove)
  {
    this.moving = true;
    requireOverlay = true;
    document.body.style.cursor = 'move';
    if (this.onMove) this.onMove(this);
  }
  
  //  show the overlay div if it is required
  if (requireOverlay)
  {
    //  create a new div if it does not yet exist
    if (!this.overlayDiv)
    {
      //  create a new div
      this.overlayDiv = document.createElement('div');
      this.overlayDiv.style.position = 'absolute';
      this.overlayDiv.style.backgroundColor = '#333333';
      this.overlayDiv.style.top = '0px';
      this.overlayDiv.style.left = '0px';
      this.overlayDiv.style.zIndex = 99999;
      
      //  set the opacity
      if (WATBrowserInfo.IsIE)
        this.overlayDiv.style.filter = "Alpha(opacity=" + (this.overlayOpacity * 100) + 
                                       ", finishopacity=" + (this.overlayOpacity * 100) + ", style=1)";
      else
        this.overlayDiv.style.opacity = this.overlayOpacity;
      
      //  add the overlay div to the div element
      var firstElement = this.element.firstChild;
      if (firstElement) this.element.insertBefore(this.overlayDiv, firstElement);
        else this.element.appendChild(this.overlayDiv);
    }
    
    //  show the overlay div
    this.overlayDiv.style.width = width + 'px';
    this.overlayDiv.style.height = height + 'px';
    this.overlayDiv.style.display = 'block';
    this.__PrepareContent(this.element);
    
    //  set the focus on the div
    var obj = this;
    function __SetFocus() { obj.element.focus(); }
    setTimeout(__SetFocus, 50);
  }
}

/**
 *  function to prepare the child elements of the passed node in order to make the div movable
 */
WATDiv.prototype.__PrepareContent = function(node)
{
  var node = node.firstChild;
  while(node)
  {
    switch(node.nodeName.toLowerCase())
    {
      //  disable drag'n drop for images that is the automatically done by the browser
      case 'img' :
        if (WATBrowserInfo.IsIE)
          node.ondrag = function() { return false; };
      break;
    }

    //  parse the child elements of the current node
    var child = node.firstChild;
    if (child) this.__PrepareContent(child);
    
    //  get the next element
    node = node.nextSibling;
  }
}

/**
 *  function to enable or disable interactive movement of the div
 *
 *  @param bool enableMouseMove     enable(true) / disable(false) the possibility to move the div
 *  @param bool enableResizeWidth   enable(true) / disable(false) the possibility to resize the width of the div
 *  @param bool enableResizeHeight  enable(true) / disable(false) the possibility to resize the height of the div
 */
WATDiv.prototype.EnableMouseMove = function(enableMouseMove, enableResizeWidth, enableResizeHeight)
{
  //  set the member variables
  var obj = this;
  this.enableMouseMove = enableMouseMove;
  this.enableResizeWidth = enableResizeWidth;
  this.enableResizeHeight = enableResizeHeight;
    
  //  get the sum of horizontal scroll positions of the parent divs 
  function __GetParentScrollLeft(div)
  {
    //  initialize the variables
    var parent = div.parentNode;
    var result = 0;
   
    if (parent)
    {
      //  get the scroll positions of the parent elements
      result += __GetParentScrollLeft(parent);
      if (parent.nodeName.toLowerCase() == 'div') result += parent.scrollLeft;
    }
    
    return result;
  }
  
  //  get the sum of vertical scroll positions of the parent divs 
  function __GetParentScrollTop(div)
  {
    //  initialize the variables
    var parent = div.parentNode;
    var result = 0;
   
    if (parent)
    {
      //  get the scroll positions of the parent elements
      result += __GetParentScrollTop(parent);
      if (parent.nodeName.toLowerCase() == 'div') result += parent.scrollTop;
    }
    
    return result;
  }
  
  //  align the div on the grid
  function __AlignGrid(position, direction)
  {
    //  return the passed position if the grid is not active
    var result = position;
  
    //  vertical alignment
    if (direction == 1 && obj.moveGridY > 0)
    {
      var grid = (position % obj.moveGridY);
      if (grid < (obj.moveGridY / 2)) result = result - grid;
        else result = result + (obj.moveGridY - grid);
    }
    
    //  horizontal alignment
    if (direction == 2 && obj.moveGridX > 0)
    {
      var grid = (position % obj.moveGridX);
      if (grid < (obj.moveGridX / 2)) result = result - grid;
        else result = result + (obj.moveGridX - grid);
    }
    
    //  return the new position
    return result;
  }
  
  //  the OnFocus handler is called when the div gets the focus
  function __Focus()
  {
    obj.hasFocus = true;
  }
  
  //  the OnBlur handler is called when the div looses the focus
  function __Blur()
  {
    obj.hasFocus = false;
  }
  
  //  OnMouseDown handler that is called when the user presses a mouse button
  function __MouseDown(event)
  {
    //  start moving now
    obj.__SetupMove(WAT.GetMouseX() + __GetParentScrollLeft(obj.element),
                    WAT.GetMouseY() + __GetParentScrollTop(obj.element));
  }
  
  //  OnMouseMove handler that is called when the user moves the mouse in order to move the div
  function __MouseMove()
  {
    //  make the input fields selectable (the div may not move if text in an input field is selected)
    if (obj.hasFocus && WATBrowserInfo.IsIE || !obj.hasFocus && !WATBrowserInfo.IsIE)
    {        
      //  get the relative mouse mosition that respects scrolling of parent div elements
      var mousePosX = WAT.GetMouseX() + __GetParentScrollLeft(obj.element);
      var mousePosY = WAT.GetMouseY() + __GetParentScrollTop(obj.element);
      var width = obj.display.GetWidth();
      var height = obj.display.GetHeight();
      
      //  move the element
      if (obj.moving)
      {
        //  get the new position
        var newTop = __AlignGrid((mousePosY - obj.moveOffsetY - obj.topDiff), 1);
        if (obj.minTop != null && newTop < obj.minTop) newTop = obj.minTop;
        if (obj.maxBottom != null && (newTop + height) > obj.maxBottom) newTop = obj.maxBottom - height;
        
        var newLeft = __AlignGrid((mousePosX - obj.moveOffsetX - obj.leftDiff), 2);
        if (obj.minLeft != null && newLeft < obj.minLeft) newLeft = obj.minLeft;
        if (obj.maxRight != null && (newLeft + width) > obj.maxRight) newLeft = obj.maxRight - width;

        //  set the object properties
        obj.element.style.top = newTop + 'px';       
        obj.element.style.left = newLeft + 'px';
        
        //  send an event if the div has been moved
        if (obj.onMoving && (obj.modifyCurrentTop != obj.element.offsetTop ||
            obj.modifyCurrentLeft != obj.element.offsetLeft)) obj.onMoving(obj);    
      }
      
      //  resize the element
      if (obj.resize > 0)
      {
        //  get the current position
        var top = obj.display.GetTop() - obj.topDiff;
        var left = obj.display.GetLeft() - obj.leftDiff;

        //  initialize the new position
        var newTop = top;
        var newLeft = left;
        var newWidth = width;
        var newHeight = height;

        switch(obj.resize)
        {
          //  resize top
          case 1 :
            newTop = mousePosY - obj.moveOffsetY - obj.topDiff;
            if (obj.minTop != null && newTop < obj.minTop) newTop = obj.minTop;
            newHeight = height + (top - newTop);
            if (obj.keepAspectRatio) newWidth = Math.ceil(newHeight / height * width);
            break;
            
          //  resize top/left
          case 2 :
            newTop = mousePosY - obj.moveOffsetY - obj.topDiff;
            if (obj.minTop != null && newTop < obj.minTop) newTop = obj.minTop;
            newLeft = mousePosX - obj.moveOffsetX - obj.leftDiff;
            if (obj.minLeft != null && newLeft < obj.minLeft) newLeft = obj.minLeft;
            newHeight = height + (top - newTop);
            newWidth = width + (left - newLeft);
            if (obj.keepAspectRatio || obj.keepAspectRatioEdge) newWidth = Math.floor(newHeight / height * width);
            break;
            
          //  resize left
          case 3 :
            newLeft = mousePosX - obj.moveOffsetX - obj.leftDiff;
            if (obj.minLeft != null && newLeft < obj.minLeft) newLeft = obj.minLeft;
            newWidth = width + (left - newLeft);
            if (obj.keepAspectRatio) newHeight = Math.ceil(newWidth / width * height);
            break;
            
          //  resize bottom/left
          case 4 :
            newHeight = mousePosY - obj.display.GetTop();
            if (obj.maxBottom != null && (newTop + newHeight) > obj.maxBottom) newHeight = obj.maxBottom - newTop;
            newLeft = mousePosX - obj.moveOffsetX - obj.leftDiff;
            if (obj.minLeft != null && newLeft < obj.minLeft) newLeft = obj.minLeft;
            newWidth = width + (left - newLeft);
            if (obj.keepAspectRatio) newWidth = Math.ceil(newHeight / height * width);
            break;
            
          //  resize bottom
          case 5 :
            newHeight = mousePosY - obj.display.GetTop();
            if (obj.maxBottom != null && (newTop + newHeight) > obj.maxBottom) newHeight = obj.maxBottom - newTop;
            if (obj.keepAspectRatio) newWidth = Math.ceil(newHeight / height * width);
            break;
            
          //  resize bottom/right
          case 6 :
            newHeight = mousePosY - obj.display.GetTop();
            if (obj.maxBottom != null && (newTop + newHeight) > obj.maxBottom) newHeight = obj.maxBottom - newTop;
            newWidth = mousePosX - left + 7 - obj.leftDiff;
            if (obj.maxRight != null && (newLeft + newWidth) > obj.maxRight) newWidth = obj.maxRight - newLeft;
            if (obj.keepAspectRatio || obj.keepAspectRatioEdge) newHeight = Math.ceil(newWidth / width * height);
            break;
            
          //  resize right
          case 7 :
            newWidth = mousePosX - left + 7 - obj.leftDiff;
            if (obj.maxRight != null && (newLeft + newWidth) > obj.maxRight) newWidth = obj.maxRight - newLeft;
            if (obj.keepAspectRatio) newHeight = Math.ceil(newWidth / width * height);
            break;
           
          //  resize right/top
          case 8 :
            newTop = mousePosY - obj.moveOffsetY - obj.topDiff;
            if (obj.minTop != null && newTop < obj.minTop) newTop = obj.minTop;
            newWidth = mousePosX - left + 7 - obj.leftDiff;   
            if (obj.maxRight != null && (newLeft + newWidth) > obj.maxRight) newWidth = obj.maxRight - newLeft;
            newHeight = height + (top - newTop);
            if (obj.keepAspectRatio || obj.keepAspectRatioEdge) newWidth = Math.floor(newHeight / height * width);
            break;
        }

        //  check if the height is smaller than the minimum height
        if (obj.minHeight != null && newHeight < obj.minHeight) newHeight = obj.minHeight;
       
        //  check if the height is larger than the maximum height
        if (obj.maxHeight != null && newHeight > obj.maxHeight) newHeight = obj.maxHeight;
        
        //  check if the width is smaller than the minimum width
        if (obj.minWidth != null && newWidth < obj.minWidth) newWidth = obj.minWidth;
        
        //  check if the width is larger than the maximum width
        if (obj.maxWidth != null && newWidth > obj.maxWidth) newWidth = obj.maxWidth;
        

        //  apply the new position
        obj.element.style.top = __AlignGrid(newTop, 1) + 'px';
        obj.element.style.left = __AlignGrid(newLeft, 2) + 'px';
        obj.element.style.height = __AlignGrid(newHeight - obj.borderTopDiff - obj.borderBottomDiff, 1) + 'px';
        obj.element.style.width = __AlignGrid(newWidth - obj.borderLeftDiff - obj.borderRightDiff, 2) + 'px';

        //  the overlayDiv should never be null but in some cases when the content of the (main) div has
        //  just been replaced by the user it can happen that the overlay div is (accidently) removed
        //  so be sure that it is available
        if (obj.overlayDiv)
        {
          //  adjust the size of the overlayDiv
          obj.overlayDiv.style.width = obj.display.GetWidth() + 'px';
          obj.overlayDiv.style.height = obj.display.GetHeight() + 'px';
        }
        
        //  check if the div has been modified and send an onResizing event 
        if (obj.onResizing && (obj.modifyCurrentTop != obj.display.GetTop() ||
            obj.modifyCurrentLeft != obj.display.GetLeft() || obj.modifyCurrentWidth != obj.display.GetWidth() ||
            obj.modifyCurrentHeight != obj.display.GetHeight())) obj.onResizing(obj);
      }
    }
  }
  
  //  OnMouseUp handler that is called when the user releases the mouse button
  function __MouseUp()
  {
    //  reset the object
    if (obj.moving || obj.resize != 0)
    {
      //  the overlayDiv should never be null but in some cases when the content of the (main) div has
      //  just been replaced by the user it can happen that the overlay div is (accidently) removed
      //  so be sure that it is available
      if (obj.overlayDiv) obj.overlayDiv.style.display = 'none';

      //  check if the div has been modified
      if (obj.modifyCurrentTop != obj.display.GetTop() || obj.modifyCurrentLeft != obj.display.GetLeft() ||
          obj.modifyCurrentWidth != obj.display.GetWidth() || obj.modifyCurrentHeight != obj.display.GetHeight())
      {
        //  send a modification event
        if (obj.moving && obj.onMoved) obj.onMoved(obj);
          else if (obj.resize != 0 && obj.onResized) obj.onResized(obj); 
      }
      else
      {
        //  the div has not been moved or resized but the onMove/onResize event has already been
        //  sent so the application has to know that moving or resizing has been
        //  aborted, send an onAbortMoving/onAbortResizing event
        if (obj.moving && obj.onAbortMoving) obj.onAbortMoving(obj);
          else if (obj.resize != 0 && obj.onAbortResizing) obj.onAbortResizing(obj);
      }
        
      //  reset the div
      document.body.style.cursor = 'default';      
      obj.moving = false;
      obj.resize = 0;      
    }
  }

  //  create the event handlers if it has not been done yet
  if (!this.eventsRegistered)
  {
    if (WATBrowserInfo.IsIE)
    {  
      //  ... for Internet Explorer
      this.element.attachEvent('onfocus', __Focus);
      this.element.attachEvent('onblur', __Blur);
      this.element.attachEvent('onmousedown', __MouseDown);
      document.attachEvent('onmousemove', __MouseMove);
      document.attachEvent('onmouseup', __MouseUp);
    }
    else
    {
      //  ... for other browsers
      this.element.addEventListener('focus', __Focus, true);
      this.element.addEventListener('blur', __Blur, true);
      this.element.addEventListener('mousedown', __MouseDown, true);
      document.addEventListener('mousemove', __MouseMove, true);
      document.addEventListener('mouseup', __MouseUp, true);
    }
  
    //  do not register the events several times
    this.eventsRegistered = true;
  }
}

//  the file must be included in the head section of the document, do not call the ScriptIncluded function