var dd_mode = "resize"; //resizing or moving?
var dd_target = null; //the target of mouse-operations - the handles
var dd_connected = null; //the object the handles are associated with

//enabling moving and resizing for the object with the id...
function addItem(id){
  var item = document.getElementById(id);
  if(!item) return;

  //create the handle for resizing (bottom right)
  var handleRe = document.createElement('div');
  handleRe.className = 'handle';
  handleRe.id = id+"_resize";
  handleRe.style.position = "absolute";
  handleRe.style.top = item.offsetTop + item.offsetHeight + "px";
  handleRe.style.left = item.offsetLeft + item.offsetWidth + "px";
  handleRe.style.cursor="se-resize";
  document.getElementsByTagName("body")[0].appendChild(handleRe);

  addEListener(handleRe,"mousedown",beginDrag);

  //create the handle for moving (top left)
  var handleMo = document.createElement('div');
  handleMo.className = 'handle';
  handleMo.id = id+"_move";
  handleMo.style.position = "absolute";
  handleMo.style.top = item.offsetTop - 10 + "px";
  handleMo.style.left = item.offsetLeft - 10 + "px";
  handleMo.style.cursor="move";
  document.getElementsByTagName("body")[0].appendChild(handleMo);
  addEListener(handleMo,"mousedown",beginDrag);

}

//for adding a listener (func) for the given event on the given element
function addEListener(handle, event, func){
        if(handle.addEventListener){
          handle.addEventListener(event,func, false);
  }else if(handle.attachEvent){
                handle.attachEvent("on"+event, func); //ON !!!!!!
  }
}

//removing a listener
function removeEListener(handle, event, func){
        if(handle.removeEventListener){
          handle.removeEventListener(event,func, false);
  }else if(handle.detachEvent){
                handle.detachEvent("on"+event, func); //ON !!!!!!
  }
}

function doDrag(e) {
        // Calculates the difference between the last mouse position
        // and the current position.
  var difX = e.clientX-window.lastX;
  var difY = e.clientY-window.lastY;

        // If mode equals resize... (see beginDrag function)
        if(dd_mode=="resize") {
                // Then the drag operation is just for the resize handle.

                // Retrieves the x and y position for the resize-handle and adding
                // the dif value.
    var newX1 = parseInt(dd_target.style.left)+difX;
                var newY1 = parseInt(dd_target.style.top)+difY;
                // Sets the new position
                dd_target.style.left=newX1+"px";
                dd_target.style.top=newY1+"px";
        } else {
                // The user wants to move the object, not resize it.
                var newX1 = parseInt(dd_target.style.left)+difX;
          var newY1 = parseInt(dd_target.style.top)+difY;

    dd_connected.style.position="absolute";
          dd_connected.style.left=newX1+10+"px";
          dd_connected.style.top=newY1+10+"px";

    dd_target.style.position="absolute";
          dd_target.style.left=newX1+"px";
          dd_target.style.top=newY1+"px";

    posResHandleOf(dd_connected.id);
        }

        // Stores the current mouse position.
  window.lastX=e.clientX;
  window.lastY=e.clientY;
}

function endDrag(e) {
        // Releases the onmousemove event.
  removeEListener(window, "mousemove", doDrag);

        // If the operation is resize then...
        if(dd_mode=="resize") {

                // Stores the x and y position of the handle for resizing and the position of the main object
                var oldX1 = parseInt(dd_target.style.left);
          var oldY1 = parseInt(dd_target.style.top);

    var oldX2 = parseInt(getStyle(dd_connected.id,"left"));
          var oldY2 = parseInt(getStyle(dd_connected.id,"top"));

                // Since user was resizing by dragging the handle for resizing, the
                // oldX1 and oldY1 values represent the new resize position.

                // In this case, the difference between oldX1 and oldX2 is the new width.
                ddx=oldX1-oldX2;

                // And the difference between oldY1 and oldY2 is the new height.
                ddy=oldY1-oldY2;

                // Dynamicallty sets the width and height attributes.
    dd_connected.style.width=ddx + "px";
    dd_connected.style.height=ddy + "px";
        }
}

function beginDrag(e) {
//        e.preventDefault();  //IE does not handle this!?

        // Stores the current mouse position for further use.
        window.lastX=e.clientX;
        window.lastY=e.clientY;

  if(window.event)
    dd_target = window.event.srcElement;
  else
          dd_target = e.target;

        // Register doDrag event handler to receive generic onmousemove events.
  addEListener(window, "mousemove", doDrag);

        // Register endDrag event handler to receive generic onmouseup events.
  addEListener(window, "mouseup", endDrag);

       // Verify the attribute of the event's target.
        myattr=dd_target.getAttribute("ID");

        if(myattr.indexOf("resize")>0) {
                // If the element's id has 'resize' in it,
                // the user clicked over the handle for resizing,
                // and the dd_mode should be resized.
                dd_mode="resize";
        } else {
                // Else the user just clicked over the image, so the mode is set to drag.
                dd_mode="drag";
        }

  //remember the element that should be moved or resized
  //it is easy to determine that element since the id of the handle is derived from the id of that element
  //  just '_resize' or '_move' are appended to the id for the handles.
  dd_connected = document.getElementById(myattr.substr(0, myattr.lastIndexOf("_")));
}

//After moving an element: position it's resizing-handle
function posResHandleOf(id){
  var item = document.getElementById(id);
  if(!item) return;

  var handle = document.getElementById(id+"_resize");
  if(!handle) return;

  handle.style.top = item.offsetTop + item.offsetHeight + "px";
  handle.style.left = item.offsetLeft + item.offsetWidth + "px";
}

//http://www.quirksmode.org/dom/getstyles.html
function getStyle(el,styleProp){
  var x = document.getElementById(el);
  if (window.getComputedStyle)
    var y = window.getComputedStyle(x,null).getPropertyValue(styleProp);
  else if (x.currentStyle)
    var y = eval('x.currentStyle.' + styleProp);
  return y;
}