var ImageCropper = Class.create();

ImageCropper.prototype = {
  element: null,
  image: null,

  initialize: function(id, props) {
    this.props = Object.extend({
      borderColor: '#ff0000',
      dragColor: '#ffff00'
    }, props || {});
    this.element = $(id);
    this.image = document.getElementsByClassName('cropImg', this.element)[0];
    this.borderColor=this.props.borderColor;
    this.dragColor=this.props.dragColor;
    Element.cleanWhitespace(this.element);
    var rect = this.rect = $(id).appendChild(document.createElement('DIV'));
    var box = this.box = $(id).appendChild(document.createElement('DIV'));
    Element.setStyle(rect, {
      border:'1px solid #ff0000',
      background: '#fff',
      position:'absolute',
      overflow:'visible',
      lineHeight:'1px',
      fontSize:'1px',
      top:'0px',
      left:'0px',
      width:'5px',
      height:'5px'
    });
    Element.setOpacity(rect, 0.5);
    this.img_offsets = Position.cumulativeOffset(this.image);
    Element.setStyle(this.box, {
      background: 'url(this.image.src)',
      border:'1px solid #000',
      position:'absolute',
      cursor:'crosshair',
      top: this.img_offsets[1] + 'px',
      left: this.img_offsets[0] + 'px',
      width: this.image.width + 'px',
      height: this.image.height + 'px',
      zIndex:50
    });
    Element.hide(rect);
    this.x1=0;
    this.y1=0;
    this.x2=1;
    this.y2=1;
    this.mdownkey=false;
    Event.observe(this.box, 'mousedown', function(event) {
      this.x1=Event.pointerX(event);
      this.y1=Event.pointerY(event);
      this.btop=Math.max((this.y1+5), this.img_offsets[1]);
      this.bleft=Math.max((this.x1+5), this.img_offsets[0]);
      this.bwidth=Math.min((this.x1+5), this.image.width+this.img_offsets[0])-this.bleft;
      this.bheight=Math.min((this.y1+5), this.image.height+this.img_offsets[1])-this.btop;
      Element.show(rect);
      Element.setStyle(rect, {
        borderColor:'#ff0000',
        top:this.y1 + 'px',
        left:this.x1 + 'px',
        width:'5px',
        height:'5px'
      });
      this.mdownkey=true;
    }.bindAsEventListener(this));
    Event.observe($(id), 'mousemove', function(event) {
      if(this.mdownkey) {
        this.x2=Event.pointerX(event);
        this.y2=Event.pointerY(event);
        this.btop=Math.max(Math.min(this.y2, this.y1), this.img_offsets[1]);
        this.bleft=Math.max(Math.min(this.x2, this.x1), this.img_offsets[0]);
        this.bwidth=Math.min(Math.max(this.x2, this.x1), this.image.width+this.img_offsets[0])-this.bleft;
        this.bheight=Math.min(Math.max(this.y2, this.y1), this.image.height+this.img_offsets[1])-this.btop;
        Element.setStyle(rect, {
          top:this.btop + 'px',
          left:this.bleft + 'px',
          width:this.bwidth + 'px',
          height:this.bheight + 'px'
        });
      }
    }.bindAsEventListener(this));
    Event.observe(document, 'mouseup', function(event) {
      if(this.mdownkey) {
        Element.setStyle(rect, {
          borderColor:'#ffff00'
        });
        this.mdownkey=false;
        if(this.bwidth<5||this.bheight<5)
          alert(ALERT_CONFIG[15]);
        else
          //this.onCropped();
          this.onCropped();
      }
    }.bindAsEventListener(this));
  },

  onCropped: function() {
    var wnd = this;
    var imgw = this.image.width;
    var imgh = this.image.height;
    this.bleft-=this.img_offsets[0];
    this.btop-=this.img_offsets[1];
    pictureX1=this.bleft/imgw; // L
    pictureY1=this.btop/imgh; // T
    pictureX2=(this.bwidth+this.bleft)/imgw; // R
    pictureY2=(this.bheight+this.btop)/imgh; // D
    if(needTurnImage==0) {
      cropPos1 = pictureY1 * image.imageSizeY;
      cropPos2 = image.imageSizeX - pictureX2 * image.imageSizeX;
      cropPos3 = image.imageSizeY - pictureY2 * image.imageSizeY;
      cropPos4 = pictureX1 * image.imageSizeX;
    } else {
      cropPos1 = pictureY1 * image.imageSizeX;
      cropPos2 = image.imageSizeY - pictureX2 * image.imageSizeY;
      cropPos3 = image.imageSizeX - pictureY2 * image.imageSizeX;
      cropPos4 = pictureX1 * image.imageSizeY;
    }
    update();
  }
}
//Restore the image
restore = function() {
  if(typeof(cropper) != 'undefined') Element.hide(cropper.rect);
  if(isCFramePresent() && 
    (frame.cFrameSpaceT-cropPos1<0 || 
    frame.cFrameSpaceR-cropPos2<0 || 
    frame.cFrameSpaceB-cropPos3<0 || 
    frame.cFrameSpaceL-cropPos4<0))
  {
    cropPos1 = cropPos1 - frame.cFrameSpaceT;
    cropPos2 = cropPos2 - frame.cFrameSpaceR;
    cropPos3 = cropPos3 - frame.cFrameSpaceB;
    cropPos4 = cropPos4 - frame.cFrameSpaceL;
    cropPos1 = cropPos1 < 0 ? 0 : cropPos1;
    cropPos2 = cropPos2 < 0 ? 0 : cropPos2;
    cropPos3 = cropPos3 < 0 ? 0 : cropPos3;
    cropPos4 = cropPos4 < 0 ? 0 : cropPos4;
    glass=null;
    update();
    return;
  }
  cropPos1 = 0;
  cropPos2 = 0;
  cropPos3 = 0;
  cropPos4 = 0;
  update();
}

OnCrop = function() {
    if(controlCrop)
        return;

      var myAjax = new Ajax.Request('../framer/frame_to_image.php', {
        parameters: 'src=' + image.src,
        onSuccess: function(t) {
          eval(t.responseText);
          update();
      }});
}