Limb.Class('Cropper',
{
  __construct: function(target)
  {
    this.displayed = false;
    this.ratio = false;
    this.img = Ext.get(target);
    this.imgWidth = this.img.getWidth();
    this.imgHeight  = this.img.getHeight();
    this.left = 0;
    this.top = 0;
    this.right = 0;
    this.bottom = 0;    
  },

  hide: function(target)
  {
    this.displayed = false;
    this.golden_selection = false;
    this.hideCropIntoComment();
    this.ratio = false;

    if(this.visible_region_node)
    {
      var img_clone = Ext.DomQuery.selectNode('#' + this.img.id, 0).cloneNode(true);
      var refNode = this.container.next('', true);

      if (refNode)
        this.container.parent('div', true).insertBefore(img_clone, refNode);
      else
        this.container.parent('div').appendChild(img_clone);
      this.getCrop();
      this.container.remove();
    }    
    
    if(typeof window['setDialogWait'] == 'function') setDialogWait(false);
  },

  show: function(ratio_max)
  {
  	ratio_max = ratio_max || 0;
  	var param = {};
  	
    this.displayed = true;
    this.showCropIntoComment();

    this.img.wrap().addClass('imgCropperContainer').applyStyles({position:'relative'}).setWidth(this.imgWidth).setHeight(this.imgHeight).insertHtml('afterBegin','<div class="cropper"></div><div class="mask"></div>');

    this.visible_region_node = Ext.DomQuery.selectNode('.cropper', 0)

    this.container = Ext.get(Ext.DomQuery.selectNode('.imgCropperContainer', 0));
    this.containerRegion = this.container.getRegion();

    this.mask = Ext.get(Ext.DomQuery.selectNode('.mask', 0));
    this.mask.applyStyles({position:'absolute', zIndex:'10', top:'0', left:'0', backgroundColor:'#fff'}).setOpacity(0.55).setWidth(this.imgWidth).setHeight(this.imgHeight);

    this.visible_region_object = Ext.get(Ext.DomQuery.selectNode('.cropper', 0));
    this.visible_region_object.applyStyles({position:'absolute',top:'0',left:'0',zIndex:'20',background:' url('+ this.img.dom.src +') no-repeat left top', cursor: 'move'});
    
    if (ratio_max){
    	param = {
            handles: 'all',
            width: this.imgWidth,
            height: this.imgHeight,
            maxWidth: ratio_max,
            maxHeight: ratio_max,
    		minWidth: 120,
    		minHeight: 120,            
            preserveRatio: true,
            pinned: true,
            draggable:true,
            dynamic:true,
            resizeRegion: this.containerRegion
    	};
    	this.ratio = true;
    }else{
    	param = {
            handles: 'all',
            width: this.imgWidth,
            height: this.imgHeight,
            maxWidth: this.imgWidth,
            maxHeight: this.imgHeight,
            pinned: true,
            draggable:true,
            dynamic:true,
            resizeRegion: this.containerRegion
    	};
    }

    var resizable_boundaries = new Ext.Resizable(this.visible_region_object, param);

    resizable_boundaries.img = this.img;
    resizable_boundaries.cropper = this.visible_region_object;
    resizable_boundaries.on(
      "beforeresize",
      function()
      {
        // there are no oninit event so we duplicate code for creating overlay and add one more event handler
        if(!this.overlay)
        {
            this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: "&#160;"}, Ext.getBody());
            this.overlay.unselectable();
            this.overlay.enableDisplayMode("block");
            this.overlay.on("mousemove", this.onMouseMove, this);
            this.overlay.on("mouseup", this.onMouseUp, this);
            this.overlay.on('mousemove',
                 function()
                 {
                    this.container = this.cropper.parent('div');
                    this.currentPositionLeft = this.cropper.getLeft() - this.container.getLeft();
                    this.currentPositionTop = this.cropper.getTop() - this.container.getTop();
                    this.cropper.applyStyles({backgroundPosition:'-' + this.currentPositionLeft + 'px -' + this.currentPositionTop + 'px'});
                  }, this)
        }
      },
      resizable_boundaries);

    resizable_boundaries.dd.onDrag =  function(e)
    {
      this.cropper = Ext.get(this.id);
      this.container = this.cropper.parent('div');
      this.currentPositionLeft = this.cropper.getLeft() - this.container.getLeft();
      this.currentPositionTop = this.cropper.getTop() - this.container.getTop();
      this.cropper.applyStyles({backgroundPosition:'-' + this.currentPositionLeft + 'px -' + this.currentPositionTop+'px'});
      this.constrainTo(this.container, 0, false);
    };

    var top = this.img.getTop() + this.top;
    var left = this.img.getLeft() + this.left;
    var height = this.img.getHeight() - this.top - this.bottom;
    var width = this.img.getWidth() - this.left - this.right;

    this.visible_region_object.setTop(this.top).setLeft(this.left).setWidth(width).setHeight(height);

    currentPositionLeft = this.visible_region_object.getLeft() - this.container.getLeft();
    currentPositionTop = this.visible_region_object.getTop() - this.container.getTop();
    this.visible_region_object.applyStyles({backgroundPosition:'-' + currentPositionLeft + 'px -' + currentPositionTop + 'px'});

  },

  toggle: function()
  {
    if(this.displayed)
      this.hide();
    else
      this.show();
  },

  getCrop: function()
  {
    this.left = this.visible_region_object.getLeft() - this.container.getLeft();
    this.top = this.visible_region_object.getTop() - this.container.getTop();
    this.right = this.container.getWidth() - this.visible_region_object.getWidth() - this.left;
    this.bottom = this.container.getHeight() - this.visible_region_object.getHeight() - this.top;
    return {left: this.left, top: this.top, right: this.right, bottom: this.bottom};
  },

  showCropperAt: function(left, top, right, bottom)
  {
    if(this.displayed)
      this.hide();
    this.left = left;
    this.top = top;
    this.right = right;
    this.bottom = bottom;

    this.show();
  },
  
  showRatioCrop: function()
  {
  	var left = 0, top = 0, right = 0, bottom = 0, max = 0;
  	
    if(this.displayed)
      this.hide();
    
    if (this.imgWidth >= this.imgHeight)
    {
    	left = right  = parseInt((this.imgWidth/2) - (this.imgHeight/2));
    	max  = this.imgHeight;
    }else{
    	top  = bottom = parseInt((this.imgHeight/2) - (this.imgWidth/2));
    	max  = this.imgWidth;
    }
          
    this.left = left;
    this.top = top;
    this.right = right;
    this.bottom = bottom;
    
    this.show(max);
  },
  
  hideGoldenSelection: function()
  {
    var goldenSection = Ext.DomQuery.selectNode('.goldenSection', 0);
    if(goldenSection)
      Ext.get(goldenSection).remove();

    this.golden_selection = false;
  },

  showGoldenSelection: function()
  {
    if(!this.displayed)
      this.show();
    var HTML = '<table class="goldenSection"><tr><td width="38%" height="38%"></td><td width="24%"></td><td width="38%"></td></tr>';
    HTML+= '<tr><td height="24%"></td><td></td><td></td></tr><tr><td height="38%"></td><td></td><td></td></tr></table>';

    this.visible_region_object.insertHtml('afterBegin', HTML);
    this.golden_selection = true;
  },

  toggleGoldenSelection: function()
  {
    if(this.golden_selection)
      this.hideGoldenSelection();
    else
      this.showGoldenSelection();
  },

  hideCropIntoComment: function()
  {
    var CropIntoComment = Ext.get('crop_into_comment');
    if(CropIntoComment)
    CropIntoComment.addClass('hidden');
  },

  showCropIntoComment: function()
  {
    var CropIntoComment = Ext.get('crop_into_comment');
    if(CropIntoComment)
      CropIntoComment.removeClass('hidden');
  }
});

function GetCrop()
{
  if(cropper.displayed)
  {
    crop = cropper.getCrop();
    comment_area  = jQuery('#comment');
	if( crop.left < 0 ) crop.left = 0;
	if( crop.top < 0 ) crop.top = 0;
	if( crop.right < 0 ) crop.right = 0;
	if( crop.bottom < 0 ) crop.bottom = 0;
    comment_area.val(comment_area.val() + ' [CROP(' + crop.left + ',' + crop.top + ',' + crop.right + ',' + crop.bottom + ')] ')
  }
}

function GetRatioCrop()
{
  if(!typeof(cropper)=="object")
    return;
  cropper.showRatioCrop();	
  winMiniEl.jqmHide();  
}

function SetCrop(left, top, right, bottom)
{
  if(!typeof(cropper)=="object")
    return;
  cropper.showCropperAt(left, top, right, bottom);
  if (document.imgCropper)
    document.imgCropper.scrollIntoView();
}

function toggleGrayscale(target_id)
{
  var img = jQuery('#' + target_id);
  if (img.css('filter') == null)
    img.css('filter', "Gray");
  else {
    img.css('filter', '');
  }
};