var cropimgwidth = 885;
var cropimgheight = 617;
var cropimgtop = 0;
var cropimgleft = 0;
var croparea = new Array(0, 0, 0, 0);
var croparea_o = new Array(0, 0, 0, 0);
var cropstartX = 0;
var cropstartY = 0;
var isCropDrag = false;
var firefox = document.getElementById&&!document.all;
var cropcorner = 0;
var cropratio = 733/100;

document.onmouseup = releaseMouse;

function setCropRatio(w, h, size) {
  cropratio = w/h;
  setCropArea(0, 0, w/2, h/2);
  document.getElementById("crf_size").value = size;
}

function 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 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 initCrop(width, height, ratio) {
  cropimgwidth = width;
  cropimgheight = height;
  cropratio = ratio;

  document.getElementById("croparea").onmousedown = selectMouse;
  document.getElementById("tlcropcorner").onmousedown = selectMouse;
  document.getElementById("trcropcorner").onmousedown = selectMouse;
  document.getElementById("blcropcorner").onmousedown = selectMouse;
  document.getElementById("brcropcorner").onmousedown = selectMouse;
  document.getElementById("cropimg").onmousedown = selectMouse;

  document.getElementById("croparea").onmousemove = mouseMove;
  document.getElementById("cropimg").onmousemove = mouseMove;
  document.getElementById("tlcropcorner").onmousemove = mouseMove;
  document.getElementById("trcropcorner").onmousemove = mouseMove;
  document.getElementById("blcropcorner").onmousemove = mouseMove;
  document.getElementById("brcropcorner").onmousemove = mouseMove;
  document.getElementById("bottomgrey").onmousemove = mouseMove;
  document.getElementById("topgrey").onmousemove = mouseMove;
  document.getElementById("leftgrey").onmousemove = mouseMove;
  document.getElementById("rightgrey").onmousemove = mouseMove;

  cropimgtop = findPosY(document.getElementById("cropimg"));
  cropimgleft = findPosX(document.getElementById("cropimg"));

  setCropArea(0, 0, width, height);
}

function mouseMove(e) {
  if(!firefox){
    e = event;
  }
    if(isCropDrag) {
      var dx = e.clientX-cropstartX;
      var dy = e.clientY-cropstartY;
      setCropArea(croparea_o[0]+dy, croparea_o[1]+dx, croparea_o[2], croparea_o[3]);
    }
    else if(cropcorner == 1) {
      var dx = e.clientX-cropstartX;
      var dy = e.clientY-cropstartY;
      setCropArea(croparea_o[0]+dy, croparea_o[1]+dx, croparea_o[2]-dx, croparea_o[3]-dy);
    }
    else if(cropcorner == 2) {
      var dx = e.clientX-cropstartX;
      var dy = e.clientY-cropstartY;
      setCropArea(croparea_o[0]+dy, croparea_o[1], croparea_o[2]+dx, croparea_o[3]-dy);
    }
    else if(cropcorner == 3) {
      var dx = e.clientX-cropstartX;
      var dy = e.clientY-cropstartY;
      setCropArea(croparea_o[0], croparea_o[1]+dx, croparea_o[2]-dx, croparea_o[3]+dy);
    }
    else if(cropcorner == 4) {
      var dx = e.clientX-cropstartX;
      var dy = e.clientY-cropstartY;
      setCropArea(croparea_o[0], croparea_o[1], croparea_o[2]+dx, croparea_o[3]+dy);
    }
}

function releaseMouse(e) {
  isCropDrag = false;
  cropcorner = 0;
}

function selectMouse(e) {
  if (firefox){
    var p = e.target;
  }
  else {
    var p = event.srcElement;
    e = event;
  }
    if (p.attributes['id'] && (p.attributes['id'].value.indexOf("croparea")!=-1 || p.attributes['id'].value.indexOf("cropimg")!=-1)){
      isCropDrag = true;
    }
    else if (p.attributes['id'] && p.attributes['id'].value.indexOf("tlcropcorner")!=-1){
      cropcorner = 1;
    }
    else if (p.attributes['id'] && p.attributes['id'].value.indexOf("trcropcorner")!=-1){
      cropcorner = 2;
    }
    else if (p.attributes['id'] && p.attributes['id'].value.indexOf("blcropcorner")!=-1){
      cropcorner = 3;
    }
    else if (p.attributes['id'] && p.attributes['id'].value.indexOf("brcropcorner")!=-1){
      cropcorner = 4;
    }
    if(isCropDrag || cropcorner != 0) {
      cropstartX = e.clientX;
      cropstartY = e.clientY;
      croparea_o[0] = croparea[0];
      croparea_o[1] = croparea[1];
      croparea_o[2] = croparea[2];
      croparea_o[3] = croparea[3];
    }
}

function setCropArea(topC, leftC, width, height) {
  if(width < 0)
    width = 0;
  if(height < 0)
    height = 0;
  if(topC < 0) {
    topC = 0;
  }
  if(leftC < 0) {
    leftC = 0;
  }
  if(topC+height >= cropimgheight) {
    topC = cropimgheight-height;
  }
  if(leftC+width >= cropimgwidth) {
    leftC = cropimgwidth-width;
  }
  if(cropratio != 0) {
    if((width/height) < cropratio) {
      if(cropcorner == 1 || cropcorner == 2)
        topC = topC+Math.floor(height-width/cropratio);
      height = Math.floor(width/cropratio);
    }
    else {
      if(cropcorner == 1 || cropcorner == 3)
        leftC = leftC+Math.floor(width-height*cropratio);
      width = Math.floor(height*cropratio);
    }
  }
  if(width >= cropimgwidth)
    width = cropimgwidth-1;
  if(height >= cropimgheight)
    height = cropimgheight-1;

  croparea[0] = topC;
  croparea[1] = leftC;
  croparea[2] = width;
  croparea[3] = height;

  document.getElementById("crf_top").value = topC;
  document.getElementById("crf_left").value = leftC;
  document.getElementById("crf_width").value = width;
  document.getElementById("crf_height").value = height;

  var top = document.getElementById("topgrey");
  var left = document.getElementById("leftgrey");
  var right = document.getElementById("rightgrey");
  var bottom = document.getElementById("bottomgrey");
  var picarea = document.getElementById("croparea");
  var tlcorner = document.getElementById("tlcropcorner");
  var trcorner = document.getElementById("trcropcorner");
  var blcorner = document.getElementById("blcropcorner");
  var brcorner = document.getElementById("brcropcorner");

  picarea.style.height = height+"px";
  picarea.style.width = width+"px";
  picarea.style.top = (topC+cropimgtop)+"px";
  picarea.style.left = (cropimgleft+leftC)+"px";

  left.style.height = (height+1)+"px";
  left.style.width = leftC+"px";
  left.style.top = (topC+cropimgtop)+"px";
  left.style.left = cropimgleft+"px";

  right.style.height = (height+1)+"px";
  right.style.width = (cropimgwidth-leftC-width)+"px";
  right.style.top = (topC+cropimgtop)+"px";
  right.style.left = (cropimgleft+leftC+width+1)+"px";

  top.style.height = topC+"px";
  top.style.width = cropimgwidth+"px";
  top.style.left = cropimgleft+"px";
  top.style.top = cropimgtop+"px";

  bottom.style.height = (cropimgheight-topC-height-1)+"px";
  bottom.style.width = cropimgwidth+"px";
  bottom.style.top = (cropimgtop+topC+height+1)+"px";
  bottom.style.left = cropimgleft+"px";

  tlcorner.style.top = (cropimgtop+topC-3)+"px";
  tlcorner.style.left = (cropimgleft+leftC-3)+"px";
  trcorner.style.top = (cropimgtop+topC-3)+"px";
  trcorner.style.left = (cropimgleft+leftC+width-3)+"px";
  blcorner.style.top = (cropimgtop+topC+height-3)+"px";
  blcorner.style.left = (cropimgleft+leftC-3)+"px";
  brcorner.style.top = (cropimgtop+topC+height-3)+"px";
  brcorner.style.left = (cropimgleft+leftC+width-3)+"px";

}