// Selection drag for cut function
var zReObject = null;
var zRatio = 0;
var zRatioLocked = false;
var zDragged = false;
var zStartX = 0;
var zStartY = 0;
var zEndX = 0;
var zEndY = 0;

// get object's offset
function getOffset(o, n)
{
  var w = 0;
  do { w = w + o[n]; } while (o = o.offsetParent);
  return w;
}

// init the Area selection
function AreaInit(w, h, l)
{
  var oDiv = document.getElementById('CutAreaOuter');
  var iDiv = document.getElementById('CutAreaInner');

  // count te areaX & areaY
  var image = document.getElementById('CutDemoImg');
  if (!image || !oDiv || !iDiv) return;

  zStartX = getOffset(image, 'offsetLeft');
  zStartY = getOffset(image, 'offsetTop');
  zEndX = zStartX + image.width;
  zEndY = zStartY + image.height;

  // resize the default value
  oDiv.style.left = zStartX + 'px';
  oDiv.style.top = zStartY  + 'px';
  oDiv.style.width = w + 'px';
  oDiv.style.height = h + 'px';
  zRatio = w / h;
  zRatioLocked = l;
  oDiv.style.display = '';

  // bind the drag event  
  iDiv.onmousedown = function(ev)
  {
	if (zReObject != null) return;
    var cx = getOffset(oDiv, 'offsetLeft');
    var cy = getOffset(oDiv, 'offsetTop');

    if (typeof ev == 'undefined')
    {    
      this.X = window.event.clientX - cx;
      this.Y = window.event.clientY - cy;
      this.setCapture();
    }
    else
    {
      this.X = ev.pageX - cx;
      this.Y = ev.pageY - cy;
    }
    zDragged = true;
  };
  
  iDiv.onmouseup = function(ev)
  {
    zDragged = false;
    if (typeof ev == 'undefined')
      this.releaseCapture();
  };
  
  iDiv.onmousemove = function(ev)
  {
    var dx, dy;
    if (!zDragged) return;
    if (typeof ev == 'undefined')
    {
      dx = window.event.clientX - this.X;
      dy = window.event.clientY - this.Y;
    }
    else
    {
      dx = ev.pageX - this.X;
      dy = ev.pageY - this.Y;
    }

    if (dx > (zEndX - oDiv.offsetWidth)) dx = zEndX - oDiv.offsetWidth;
    if (dx < zStartX) dx = zStartX;
    if (dy > (zEndY - oDiv.offsetHeight)) dy = zEndY - oDiv.offsetHeight;
    if (dy < zStartY) dy = zStartY;

    oDiv.style.left = dx + 'px';
    oDiv.style.top = dy + 'px';
  };

  iDiv.onmouseout = function(ev)
  {
    zDragged = false;
    if (typeof ev == 'undefined')
      this.releaseCapture();
  }
}

// 检查缩小与放大情况
function resizeObject()
{
  this.obj = null;
  this.type = '';
  this.grabx = null;
  this.graby = null;
  this.width = null;
  this.height = null;
  this.left = null;
  this.top = null;
}

function getRealObject(obj, type, value)
{
  var temp = obj;
  while ((temp != null) && (temp.tagName != 'BODY'))
  {
    if (temp.getAttribute(type) == value)
      return temp;
    temp = temp.parentElement;       
  }
  return null;
}

function getResizeType(obj, evt)
{
  var x, y, o, t;

  if (typeof evt.offsetX != 'undefined')
  {
    x = evt.offsetX;
    y = evt.offsetY;
  }
  else
  {
    x = evt.pageX - getOffset(obj, 'offsetLeft');
    y = evt.pageY - getOffset(obj, 'offsetTop');
  }

  o = 8;
  t = '';
  if (y < o) t += 'n';
  else if (y > (obj.offsetHeight - o)) t += 's';
  if (x < o) t+= 'w';
  else if (x > (obj.offsetWidth - o)) t += 'e';
  return t;
}

document.onmousedown = function(evt)
{
  var obj;

  if (typeof evt == 'undefined') { evt = window.event; obj = evt.srcElement; }
  else { obj = evt.target; }
  obj = getRealObject(obj, 'id', 'CutAreaOuter');
  if (obj == null)
  {
    zReObject = null;
    return;
  }
  
  var type = getResizeType(obj, evt);
  if (type == '') return; 
  zReObject = new resizeObject();
  zReObject.obj = obj;
  zReObject.type = type;
  zReObject.grabx = (evt.pageX ? evt.pageX : evt.clientX);
  zReObject.graby = (evt.pageY ? evt.pageY : evt.clientY);
  zReObject.width = parseInt(obj.style.width);
  zReObject.height = parseInt(obj.style.height);
  zReObject.left = obj.offsetLeft;
  zReObject.top = obj.offsetTop;
}

document.onmouseup = function(evt)
{
  zReObject = null;
};

document.onmousemove = function(evt)
{
  // set the cursor
  if (typeof evt == 'undefined') { evt = window.event; obj = evt.srcElement; }
  else { obj = evt.target; }
  obj = getRealObject(obj, 'id', 'CutAreaOuter');
  if (obj != null)
  {
    var type = getResizeType(obj, evt);
    if (type == '') type = 'default';
    else type += '-resize';
    obj.style.cursor = type;
  }

  // resize the object
  var ro = zReObject;
  if (ro == null) return;
  var wMin = 12;
  var hMin = 12;
  var cx = (evt.pageX ? evt.pageX : evt.clientX);
  var cy = (evt.pageX ? evt.pageY : evt.clientY);
  var locked = (zRatioLocked || (ro.type.length == 2 && evt.shiftKey == true));

  if (ro.type.indexOf('e') >= 0)
  {
    ro.obj.style.width = Math.max(wMin, ro.width + cx - ro.grabx) + 'px';
    if (locked)
    {
      ro.obj.style.height = parseInt(parseInt(ro.obj.style.width) / zRatio) + 'px';
      return;
    }
  }
  if (ro.type.indexOf('s') >= 0)
  {
    ro.obj.style.height = Math.max(hMin, ro.height + cy - ro.graby) + 'px';
    if (locked)
    {
      ro.obj.style.width = parseInt(parseInt(ro.obj.style.height) * zRatio) + 'px';
      return;
    }
  }
  if (ro.type.indexOf('w') >= 0)
  {
    ro.obj.style.left = Math.min(ro.left + cx - ro.grabx, ro.left + ro.width - wMin) + 'px';
    ro.obj.style.width = Math.max(wMin, ro.width - cx + ro.grabx) + 'px'; 
    if (locked)
    {
      ro.obj.style.height = parseInt(parseInt(ro.obj.style.width) / zRatio) + 'px';
      return;
    }
  }
  if (ro.type.indexOf('n') >= 0)
  {
    ro.obj.style.top = Math.min(ro.top + cy - ro.graby, ro.top + ro.height - hMin) + 'px';
    ro.obj.style.height = Math.max(hMin, ro.height - cy + ro.graby) + 'px'; 
    if (locked)
    {
      ro.obj.style.width = parseInt(parseInt(ro.obj.style.height) * zRatio) + 'px';
      return;
    }
  }  
};