function ImageCropperCB(sBaseDivID,iMinWidth,iMinHeight,iRatioX,iRatioY) {
	  this.sBaseDivID=sBaseDivID,
	  this.iTotalWidth=0,
	  this.iTotalHeight=0,
	  this.iLeft=0,
	  this.iTop=0,
	  this.iWidth=0,
	  this.iHeight=0,
	  this.iRight=0,
	  this.iBottom=0,
	  this.iMinWidth=iMinWidth,
	  this.iMinHeight=iMinHeight,
	  this.iRatioX=iRatioX,
	  this.iRatioY=iRatioY,
		this.iDragStartLeft=0,
		this.iDragStartTop=0,
		this.transXY=4,

		this.onDragStart=function(event,ui) {
			this.iDragStartLeft=ui.position.left;
			this.iDragStartTop=ui.position.top;
			return true;
		},

	  this.onDrag=function(event,ui,sWhich) {
	    // Clipping
	    var x=ui.position.left + this.transXY;
	    var y=ui.position.top + this.transXY;

	    if (sWhich != 'Area') {
		    if (x < 0) {
					x=0;
				}
		    if (y < 0) {
					y=0;
				}

		    if (x > (this.iTotalWidth)) {
					x=this.iTotalWidth;
				}

		    if (y > (this.iTotalHeight)) {
					y=this.iTotalHeight;
				}
	    }

	    var oEle=null;
	    switch(sWhich) {
	      case 'NW':
	        this.iLeft=x;
	        this.iTop=y;
	        break;
			 case 'NE':
			  	this.iRight=x;
			  	this.iTop=y;
			    break;
       case 'SW':
	        this.iLeft=x;
	        this.iBottom=y;
					break;
			case 'SE':
			    this.iRight=x;
			    this.iBottom=y;
			    break;
			case 'Area':
			    var offX=parseInt(ui.position.left-this.iDragStartLeft);
			    var offY=parseInt(ui.position.top-this.iDragStartTop);

			    this.iDragStartLeft=ui.position.left;
			    this.iDragStartTop=ui.position.top;

					if ((this.iLeft+offX) < 0 ) offX=-this.iLeft;
					if ((this.iTop+offY) < 0) offY=-this.iTop;

					if ((this.iRight+offX) > this.iTotalWidth) offX=this.iTotalWidth-this.iRight;
					if ((this.iBottom+offY) > this.iTotalHeight) offY=this.iTotalHeight-this.iBottom;

			    this.iLeft+=offX;
			    this.iRight+=offX;
			    this.iTop+=offY;
			    this.iBottom+=offY;
			  break;
	    }

			if (this.iRight <= this.iLeft) this.iRight=this.iLeft + this.iRatioX;
			if (this.iBottom <= this.iTop) this.iBottom=this.iTop + this.iRatioY;

			if (this.iLeft >= this.iRight) this.iLeft=this.iRight - this.iRatioX;
			if (this.iTop >= this.iBottom) this.iTop=this.iBottom - this.iRatioY;

      this.iWidth=this.iRight-this.iLeft;
      this.iHeight=this.iBottom - this.iTop;

			var faktorX=this.iWidth/this.iRatioX;
			var faktorY=this.iHeight/this.iRatioY;

			if (faktorX <= faktorY) {
			  this.iHeight=parseInt(this.iWidth/this.iRatioX*this.iRatioY);
			  this.iBottom=this.iTop + this.iHeight;
			} else {
			  this.iWidth=parseInt(this.iHeight/this.iRatioY*this.iRatioX);
			  this.iRight=this.iLeft + this.iWidth;
			}

			if (this.iWidth < this.iMinWidth) {
				this.iWidth=this.iMinWidth;
				this.iRight=this.iLeft + this.iWidth;
			}

			if (this.iHeight < this.iMinHeight) {
				this.iHeight=this.iMinHeight;
				this.iBottom=this.iTop + this.iHeight;
			}

			this.correctClippedHandle(event,ui,sWhich);

			this.updateHandles();
			this.updateCutArea();
			return true;
	  },

		this.correctClippedHandle=function(event,ui,sWhich) {
			var oDraggable=jQuery(event.target);

			var newLeft,newTop;
		  switch(sWhich) {
		    case 'NW':
		      newLeft=this.iLeft;
		      newTop=this.iTop;
		      break;
				case 'NE':
				  newLeft=this.iRight;
				  newTop=this.iTop;
				  break;
				case 'SW':
					newLeft=this.iLeft;
					newTop=this.iBottom;
				  break;
				case 'SE':
				  newLeft=this.iRight;
				  newTop=this.iBottom;
				  break;
				case 'Area':
		      newLeft=this.iLeft;
		      newTop=this.iTop;
				  break;
		  }
		  newLeft-=this.transXY;
		  newTop-=this.transXY;
	  	oDraggable.css('left',(newLeft)+'px');
	    oDraggable.css('top',(newTop)+'px');
	    ui.position.left=newLeft;
	    ui.position.top=newTop;
		},

		this.update=function() {
	  	var oEle=document.getElementById(this.sBaseDivID+'_currentBigPic');
  		oEle.onload=function() {oImageCropper.updateStart();};
  		oEle.onerror=function() {oImageCropper.imageError();};
  		if (oEle.complete == true) {
  			oImageCropper.updateStart();
  		}
		},

		this.updateHandles=function() {
			jQuery('#'+this.sBaseDivID+'_handleNE').css(
					{left: (this.iRight-this.transXY)+'px',top: (this.iTop-this.transXY)+'px'});

			jQuery('#'+this.sBaseDivID+'_handleNW').css(
					{left: (this.iLeft-this.transXY)+'px',top: (this.iTop-this.transXY)+'px'});

			jQuery('#'+this.sBaseDivID+'_handleSW').css(
					{left: (this.iLeft-this.transXY)+'px',top: (this.iTop+this.iHeight-this.transXY)+'px'});

			jQuery('#'+this.sBaseDivID+'_handleSE').css(
					{left: (this.iRight-this.transXY)+'px',top: (this.iBottom-this.transXY)+'px'});
		},

		this.updateCutArea=function() {
		  var oEle=null;

			jQuery('#'+this.sBaseDivID+'_darkCutAreaN').css(
					{left: '0px',top: '0px',width: this.iTotalWidth+'px',height: this.iTop+'px'});

			jQuery('#'+this.sBaseDivID+'_darkCutAreaS').css(
					{left: '0px',top: this.iBottom+'px',width: this.iTotalWidth+'px',height: (this.iTotalHeight-this.iBottom)+'px'});

			jQuery('#'+this.sBaseDivID+'_darkCutAreaW').css(
					{left: '0px',top: this.iTop+'px',width: this.iLeft+'px',height: this.iHeight+'px'});

			jQuery('#'+this.sBaseDivID+'_darkCutAreaE').css(
					{left: (this.iRight)+'px',top: this.iTop+'px',width: (this.iTotalWidth-this.iRight)+'px',height: this.iHeight+'px'});

			jQuery('#'+this.sBaseDivID+'_cutArea').css(
					{left: this.iLeft+'px',top: this.iTop+'px',width: this.iWidth+'px',height: this.iHeight+'px'});

			oEle=document.getElementById(this.sBaseDivID+'_infoText');
			oEle.innerHTML='Pos: '+this.iLeft+'/'+this.iTop+' Pos2: '+this.iRight+'/'+this.iBottom+' Breite/Höhe: '+this.iWidth+'/'+this.iHeight;
		},

	  this.updateStart=function() {
	  	var oEle=document.getElementById(this.sBaseDivID+'_currentBigPic');
		  this.iTotalWidth=oEle.width;
		  this.iTotalHeight=oEle.height;
			this.iWidth=oEle.width;
			
			var fPasstX=this.iTotalWidth / this.iRatioX;
			var fPasstY=this.iTotalHeight / this.iRatioY;
			var faktor=0;
			if (fPasstX > fPasstY) {
			  faktor=fPasstY;
			} else {
				faktor=fPasstX;
			}

			this.iWidth=Math.floor(faktor * this.iRatioX * 0.8);
			this.iHeight=Math.floor(faktor * this.iRatioY * 0.8);

			this.iLeft=Math.floor((this.iTotalWidth - this.iWidth) /2);
			this.iTop=Math.floor((this.iTotalHeight - this.iHeight) /2);

			this.iRight=this.iLeft + this.iWidth;
			this.iBottom=this.iTop + this.iHeight;


			jQuery('#'+this.sBaseDivID+'_handleNW').draggable({drag: function(event,ui) {oImageCropper.onDrag(event,ui,'NW')},cursor: 'nw-resize'});
			jQuery('#'+this.sBaseDivID+'_handleNE').draggable({drag: function(event,ui) {oImageCropper.onDrag(event,ui,'NE')},cursor: 'ne-resize'});
			jQuery('#'+this.sBaseDivID+'_handleSW').draggable({drag: function(event,ui) {oImageCropper.onDrag(event,ui,'SW')},cursor: 'sw-resize'});
			jQuery('#'+this.sBaseDivID+'_handleSE').draggable({drag: function(event,ui) {oImageCropper.onDrag(event,ui,'SE')},cursor: 'se-resize'});

			jQuery('#'+this.sBaseDivID+'_cutArea').draggable({
					drag: function(event,ui) {oImageCropper.onDrag(event,ui,'Area');},
					start: function(event,ui) {oImageCropper.onDragStart(event,ui);},
					cursor: 'move'
				});

			this.updateCutArea();
			this.updateHandles();
			this.setDisplay(true);
	  },

		this.imageError=function() {
		  this.setDisplay(false);
		  alert("Image error!!");
		},

		this.setDisplay=function(bIsVisible) {
		  var aDivNames=['_handleNW','_handleNE','_handleSW','_handleSE',
										'_darkCutAreaN','_darkCutAreaE','_darkCutAreaS','_darkCutAreaW',
										'_cutArea'];

			var iCount=aDivNames.length;
			var sDisplay=(bIsVisible) ? 'block' : 'none';
			for (var i=0; i<iCount; i++) {
				jQuery('#'+this.sBaseDivID+aDivNames[i]).css('display',sDisplay);
			}
		},

	  this.sendCropDimensions=function(aSendArgs) {
	    aSendArgs['posInfo']={left: this.iLeft,top: this.iTop,width: this.iWidth,height: this.iHeight};
	  	cx_server(aSendArgs);
	  }
	}
var oImageCropper='undefined';