function ImageCropperLogoCB(sBaseDivID,sImageSrc,iDestWidth,iDestHeight,iTemporaryUploadID) {
		this.sBaseDivID=sBaseDivID,
		this.sImageSrc=sImageSrc,
		this.iDestWidth=iDestWidth, // Zielbreite
		this.iDestHeight=iDestHeight, // Zielhöhe
		this.iDragStartLeft=0,
		this.iDragStartTop=0,
    this.iLeft=0,
    this.iTop=0,
	  this.iWidth=0,
	  this.iHeight=0,
	  this.iRight=0,
	  this.iBottom=0,
    this.mode=0,  // mode=0: kleines Bild, mode=1: großes Bild
		//this.oSrcImageElement=null,
		this.oMyImageElement=null,
		this.transXY=4,
		this.moveMaxWidth=0,
		this.moveMaxHeight=0,
		this.iMinWidth=0,
		this.iMinHeight=0,
		this.faktor=1,
		this.iTemporaryUploadID=iTemporaryUploadID,

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

		this.moveMoverImage=function(oDraggable,x,y,bWasClipped) {
		  // ggf. Clipping
	    if (x < 0) {
				x=0;
				bWasClipped=true;
			}
	    if (y < 0) {
				y=0;
				bWasClipped=true;
			}
	    if (x > this.moveMaxWidth) {
				x=this.moveMaxWidth;
				bWasClipped=true;
			}

	    if (y > this.moveMaxHeight) {
				y=this.moveMaxHeight;
				bWasClipped=true;
			}

			this.iLeft=x;
			this.iTop=y;
			if (bWasClipped) {
				oDraggable.css({left: this.iLeft+'px',top: this.iTop});
				oDraggable.data('draggable').position.left=this.iLeft;
				oDraggable.data('draggable').position.top=this.iTop;
	    }
		},

	  this.onDrag=function(event,ui,sWhich) {
	    // Clipping
	    var x=ui.position.left;
	    var y=ui.position.top;
	    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;

			switch(sWhich) {
			case 'Area':
					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;

					this.updateCutArea();
					this.updateHandles();
			  	break;
      case 'move':
		    var oDraggable=jQuery(event.target);
		    this.moveMoverImage(oDraggable,x,y,false);
        break;
			default:
			  break;
	    }
	    return true;
		},

		this.onDragHandle=function(event,ui,sWhich) {
	    var x=ui.position.left;
	    var y=ui.position.top;
	    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;

			x+=this.transXY;
			y+=this.transXY;
	    switch(sWhich) {
	      case 'NW':
	        if ((x >= 0) && (x <= (this.iRight - this.iDestWidth))) {
	          this.iLeft=x;
	        }
	        if ((y >= 0) && (y <= (this.iBottom - this.iDestHeight))) {
	          this.iTop=y;
	        }
					this.calcDim(sWhich);
	        break;
			 case 'NE':
			    if ((x >= (this.iLeft+this.iDestWidth)) && ( x <= this.iTotalWidth)) {
			    	this.iRight=x;
			    }
			    if ((y >= 0) && ( y <= (this.iBottom - this.iDestHeight))) {
			    	this.iTop=y;
			    }
					this.calcDim(sWhich);
			    break;
       case 'SW':
	        if ((x >= 0) && (x <= (this.iRight - this.iDestWidth))) {
	          this.iLeft=x;
	        }
					if ((y >= (this.iTop + this.iDestHeight)) && (y <= this.iTotalHeight)) {
					  this.iBottom=y;
					}
					this.calcDim(sWhich);
					break;
			case 'SE':
			    if ((x >= (this.iLeft+this.iDestWidth)) && ( x <= this.iTotalWidth)) {
			    	this.iRight=x;
			    }
					if ((y >= (this.iTop + this.iDestHeight)) && (y <= this.iTotalHeight)) {
					  this.iBottom=y;
					}
					this.calcDim(sWhich);
			    break;
			}
			this.updateCutArea();
			this.updateHandles();
			return true;
		},

		this.calcDim=function(sWhich) {
      this.iWidth=this.iRight - this.iLeft;
      this.iHeight=this.iBottom - this.iTop;
      
			var faktorX=this.iWidth/this.iDestWidth;
			var faktorY=this.iHeight/this.iDestHeight;

			if (faktorX <= faktorY) {
			  //this.iHeight=parseInt(this.iWidth/this.iDestWidth*this.iDestHeight);
			  this.iHeight=Math.round(this.iWidth/this.iDestWidth*this.iDestHeight);
			  this.iBottom=this.iTop + this.iHeight;
			} else {
			  //this.iWidth=parseInt(this.iHeight/this.iDestHeight*this.iDestWidth);
			  this.iWidth=Math.round(this.iHeight/this.iDestHeight*this.iDestWidth);
			  this.iRight=this.iLeft + this.iWidth;
			}
		},

		this.getAnElementById=function(sExtDivID) {
		  var oEle=document.getElementById(this.sBaseDivID+'_'+sExtDivID);
		  if (!oEle) alert("element not found with id: "+this.sBaseDivID+'_'+sExtDivID);
		  return oEle;
		},

		this.update=function() {
	  	this.oMyImageElement=new Image();
  		this.oMyImageElement.onload=function() {oImageCropperLogo.updateStart();};
  		this.oMyImageElement.onerror=function() {oImageCropperLogo.imageError();};
  		
  		this.oMyImageElement.src=this.sImageSrc;
  		if (this.oMyImageElement.complete == true) {
  			oImageCropperLogo.updateStart();
  		}
		},

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

		this.updateStart=function() {
		  if ((this.oMyImageElement.width > this.iDestWidth) || (this.oMyImageElement.height > this.iDestHeight)) {
		  	this.initCropper();
		  	return;
		  }
		  this.initMover();
		},

		this.initMover=function() {
		  this.mode=0;

		  var oEle=this.getAnElementById('ImageCropperOuterDiv');
		  oEle.style.display='none';
		  oEle=this.getAnElementById('ImageMoverOuterDiv');
		  oEle.style.display='block';

			oEle=this.getAnElementById('Mover_img');
			oEle.src=this.oMyImageElement.src;
			//while (!this.oMyImageElement.complete)
			{
			  //console.log("initMover: waiting for img to load!");
			}

		  var oDestDiv=this.getAnElementById('ImageMoverDiv');
		  oDestDiv.style.width=this.iDestWidth+'px';
		  oDestDiv.style.height=this.iDestHeight+'px';

	    this.iLeft=parseInt((this.iDestWidth - this.oMyImageElement.width) /2);
	    this.iTop=parseInt((this.iDestHeight - this.oMyImageElement.height) /2);


		  var oDestImg=this.getAnElementById('Mover_img');
		  oDestImg.style.left=this.iLeft+'px';
		  oDestImg.style.top=this.iTop+'px';
		  //oDestImg.src=this.oMyImageElement.src;

			this.moveMaxWidth=parseInt(this.iDestWidth - oDestImg.width - 1);
			this.moveMaxHeight=parseInt(this.iDestHeight - oDestImg.height - 1);
			this.iWidth=this.iDestWidth;
			this.iHeight=this.iDestHeight;

			oEle.style.left=0+'px';
			oEle.style.top=0+'px';

			var oImage=jQuery('#'+this.sBaseDivID+'_Mover_img');
			oImage.draggable({
					drag: function(event,ui) {oImageCropperLogo.onDrag(event,ui,'move');},
					start: function(event,ui) {oImageCropperLogo.onDragStart(event,ui);},
					cursor: 'move'
				});
		},

		this.initCropper=function() {
		  this.mode=1;
		  var oEle=this.getAnElementById('ImageMoverOuterDiv');
		  oEle.style.display='none';
		  var oEle=this.getAnElementById('ImageCropperOuterDiv');
		  oEle.style.display='block';

			oEle=this.getAnElementById('Cropper_img');
			oEle.src=this.oMyImageElement.src;

		  this.iTotalWidth=this.oMyImageElement.width;
		  this.iTotalHeight=this.oMyImageElement.height;
		  
		  this.faktor=this.iDestHeight / this.iDestWidth; // Zielverhältnis breite Höhe

			var fPasstX=this.iTotalWidth / this.iDestWidth;
			var fPasstY=this.iTotalHeight / this.iDestHeight;
			var bestFaktor=0;
			if (fPasstX > fPasstY) {
			  bestFaktor=fPasstY;
			} else {
				bestFaktor=fPasstX;
			}


			// maximale Breite von width/height des ausgewählten Rahmens zwecks clipping
			// ist hier die Zielgröße des Logos/Avatars
			this.moveMaxWidth=Math.round(this.iDestWidth * bestFaktor);
			this.moveMaxHeight=Math.round(this.iDestHeight * bestFaktor);

			// Anfangsgröße auf 95%
			this.iWidth=Math.round(this.moveMaxWidth * 0.95);
			this.iHeight=Math.round(this.moveMaxHeight * 0.95);
			
			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) {oImageCropperLogo.onDragHandle(event,ui,'NW')},cursor: 'nw-resize'});
			jQuery('#'+this.sBaseDivID+'_handleNE').draggable({drag: function(event,ui) {oImageCropperLogo.onDragHandle(event,ui,'NE')},cursor: 'ne-resize'});
			jQuery('#'+this.sBaseDivID+'_handleSW').draggable({drag: function(event,ui) {oImageCropperLogo.onDragHandle(event,ui,'SW')},cursor: 'sw-resize'});
			jQuery('#'+this.sBaseDivID+'_handleSE').draggable({drag: function(event,ui) {oImageCropperLogo.onDragHandle(event,ui,'SE')},cursor: 'se-resize'});

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

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

		this.updateHandles=function() {
			var oHandle;
			var temp;
			oHandle=jQuery('#'+this.sBaseDivID+'_handleNE');
			oHandle.css(
			{left: (this.iRight-this.transXY)+'px',top: (this.iTop-this.transXY)+'px'});
			try {
				temp=oHandle.data('draggable').position;
				temp.left=this.iRight-this.transXY;
				temp.top=this.iTop-this.transXY;
			}
			catch(e) {}
			
			oHandle=jQuery('#'+this.sBaseDivID+'_handleNW');
			oHandle.css(
					{left: (this.iLeft-this.transXY)+'px',top: (this.iTop-this.transXY)+'px'});
			try {
				temp=oHandle.data('draggable').position;
				temp.left=this.iLeft-this.transXY;
				temp.top=this.iTop-this.transXY;
			}
			catch(e) {}

			oHandle=jQuery('#'+this.sBaseDivID+'_handleSW');
			oHandle.css(
					{left: (this.iLeft-this.transXY)+'px',top: (this.iBottom-this.transXY)+'px'});
			try {
				temp=oHandle.data('draggable').position;
				temp.left=this.iLeft-this.transXY;
				temp.top=this.iBottom-this.transXY;
			}
			catch(e) {}

			oHandle=jQuery('#'+this.sBaseDivID+'_handleSE');
			oHandle.css(
					{left: (this.iRight-this.transXY)+'px',top: (this.iBottom-this.transXY)+'px'});
			try {
				temp=oHandle.data('draggable').position;
				temp.left=this.iRight-this.transXY;
				temp.top=this.iBottom-this.transXY;
			}
			catch(e) {}
		},

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

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

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

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

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


			oHandle=jQuery('#'+this.sBaseDivID+'_cutArea');
			oHandle.css(
					{left: this.iLeft+'px',top: this.iTop+'px',width: this.iWidth+'px',height: this.iHeight+'px'});
			try {
				var temp=oHandle.data('draggable').position;
				temp.left=this.iLeft;
				temp.top=this.iTop;
			}
			catch(e) {
			}

			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.centerImage=function() {
		  if (this.mode == 0) {
				var oDraggable=jQuery('#'+this.sBaseDivID+'_Mover_img');
				var x=parseInt((this.iDestWidth - this.oMyImageElement.width) / 2);
				var y=parseInt((this.iDestHeight - this.oMyImageElement.height) / 2);
			  this.moveMoverImage(oDraggable,x,y,true);
			}
		},

		this.sendValues=function(aSendArgs) {
		  aSendArgs['TemporaryUploadID']=this.iTemporaryUploadID;
		  aSendArgs['posInfo']={left: this.iLeft,top: this.iTop,width: this.iWidth,height: this.iHeight};
		  cx_server(aSendArgs);
		},

		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.destroy=function() {
		  var oEle=this.getAnElementById('ImageCropperOuterDiv');
		  oEle.style.display='none';
		  oEle=this.getAnElementById('ImageMoverOuterDiv');
		  oEle.style.display='none';

			this.sImageSrc.src='';
			this.sImageSrc=null;
			if (this.mode == 1) {
			  this.setDisplay(false);
			}
			oImageCropperLogo='undefined';
		}
}
var oImageCropperLogo='undefined';