-Roo.bootstrap.UploadCropbox=function(A){Roo.bootstrap.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadimage":true});};Roo.extend(Roo.bootstrap.UploadCropbox,Roo.bootstrap.Component,{emptyText:'Click to upload image',scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropImageData:false,minWidth:300,minHeight:300,file:false,exif:{},baseRotate:1,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'div',cls:'roo-upload-cropbox-image-section',cn:[{tag:'div',cls:'roo-upload-cropbox-canvas',cn:[{tag:'img',cls:'roo-upload-cropbox-image'}]},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText}]},{tag:'div',cls:'roo-upload-cropbox-footer-section',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-rotate-left',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-picture',html:'<i class="fa fa-picture-o"></i>'}]},{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-rotate-right',html:'<i class="fa fa-repeat"></i>'}]}]}}]};
-return A;},initEvents:function(){this.imageSection=this.el.select('.roo-upload-cropbox-image-section',true).first();this.imageSection.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.imageCanvas=this.el.select('.roo-upload-cropbox-canvas',true).first();
-this.imageCanvas.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.image=this.el.select('.roo-upload-cropbox-image',true).first();this.image.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumb=this.el.select('.roo-upload-cropbox-thumb',true).first();
-this.thumb.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumb.hide();this.emptyNotify=this.el.select('.roo-upload-cropbox-empty-notify',true).first();this.emptyNotify.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerSection=this.el.select('.roo-upload-cropbox-footer-section',true).first();
-this.footerSection.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerSection.hide();this.rotateLeft=this.el.select('.roo-upload-cropbox-rotate-left',true).first();this.rotateLeft.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
-this.pictureBtn=this.el.select('.roo-upload-cropbox-picture',true).first();this.pictureBtn.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.rotateRight=this.el.select('.roo-upload-cropbox-rotate-right',true).first();this.rotateRight.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
-this.calcThumbBoxSize();this.bind();this.fireEvent('initial',this);},bind:function(){this.image.on('load',this.onLoadCanvasImage,this);if(!this.imageSectionHasOnClickEvent){this.imageSection.on('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=true;
-}if(Roo.isTouch){this.imageSection.on('touchstart',this.onTouchStart,this);this.imageSection.on('touchmove',this.onTouchMove,this);this.imageSection.on('touchend',this.onTouchEnd,this);}if(!Roo.isTouch){this.imageSection.on('mousedown',this.onMouseDown,this);
-this.imageSection.on('mousemove',this.onMouseMove,this);var A=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';this.imageSection.on(A,this.onMouseWheel,this);Roo.get(document).on('mouseup',this.onMouseUp,this);}this.pictureBtn.on('click',this.beforeSelectFile,this);
-this.rotateLeft.on('click',this.onRotateLeft,this);this.rotateRight.on('click',this.onRotateRight,this);},reset:function(){this.scale=0;this.baseScale=1;this.rotate=0;this.dragable=false;this.pinching=false;this.mouseX=0;this.mouseY=0;this.cropImageData=false;
-this.imageCanvas.dom.removeAttribute('style');this.image.dom.removeAttribute('style');this.image.attr('src','');if(!this.imageSectionHasOnClickEvent){this.imageSection.on('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=true;}},beforeSelectFile:function(e){e.preventDefault();
-this.fireEvent('beforeselectfile',this);},loadCanvasImage:function(A){if(this.fireEvent('beforeloadimage',this,A)!=false){this.reset();this.image.attr('src',A);}},onLoadCanvasImage:function(A){this.emptyNotify.hide();this.thumb.show();this.footerSection.show();
-this.placeThumbBox();this.Orientation();if(this.imageSectionHasOnClickEvent){this.imageSection.un('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=false;}this.image.OriginWidth=this.image.getWidth();this.image.OriginHeight=this.image.getHeight();
-this.fitThumbBox();this.image.setWidth(Math.ceil(this.image.OriginWidth*this.getScaleLevel(false)));this.image.setHeight(Math.ceil(this.image.OriginHeight*this.getScaleLevel(false)));this.setCanvasPosition();},setCanvasPosition:function(){var pw=Math.ceil((this.imageSection.getWidth()-this.image.getWidth())/2);
-var ph=Math.ceil((this.imageSection.getHeight()-this.image.getHeight())/2);this.imageCanvas.setLeft(pw);this.imageCanvas.setTop(ph);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false;this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();
-this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.dragable){return;}var A=Math.ceil(this.thumb.getLeft(true));var B=Math.ceil(this.thumb.getTop(true));var C=Math.ceil(A+this.thumb.getWidth()-this.image.getWidth());
-var D=Math.ceil(B+this.thumb.getHeight()-this.image.getHeight());if(this.rotate==90||this.rotate==270){A=Math.ceil(this.thumb.getLeft(true)-(this.image.getWidth()-this.image.getHeight())/2);B=Math.ceil(this.thumb.getTop(true)+(this.image.getWidth()-this.image.getHeight())/2);
-C=Math.ceil(A+this.thumb.getWidth()-this.image.getHeight());D=Math.ceil(B+this.thumb.getHeight()-this.image.getWidth());}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;
-y=y-this.mouseY;var E=Math.ceil(x+this.imageCanvas.getLeft(true));var F=Math.ceil(y+this.imageCanvas.getTop(true));E=(A<E)?A:((C>E)?C:E);F=(B<F)?B:((D>F)?D:F);this.imageCanvas.setLeft(E);this.imageCanvas.setTop(F);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();
-this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();this.scale=(e.getWheelDelta()==1)?(this.scale+1):(this.scale-1);var A=Math.ceil(this.image.OriginWidth*this.getScaleLevel(false));
-var B=Math.ceil(this.image.OriginHeight*this.getScaleLevel(false));if(e.getWheelDelta()==-1&&(((this.rotate==0||this.rotate==180)&&(A<this.thumb.getWidth()||B<this.thumb.getHeight()))||((this.rotate==90||this.rotate==270)&&(B<this.thumb.getWidth()||A<this.thumb.getHeight())))){this.scale=(e.getWheelDelta()==1)?(this.scale-1):(this.scale+1);
-return;}this.image.setWidth(A);this.image.setHeight(B);this.setCanvasPosition();},onRotateLeft:function(e){e.stopEvent();if(((this.rotate==0||this.rotate==180)&&(this.image.getHeight()<this.thumb.getWidth()||this.image.getWidth()<this.thumb.getHeight()))||((this.rotate==90||this.rotate==270)&&(this.image.getWidth()<this.thumb.getWidth()||this.image.getHeight()<this.thumb.getHeight()))){return;
-}this.rotate=(this.rotate<90)?270:this.rotate-90;this.imageCanvas.setStyle({'-ms-transform':'rotate('+this.rotate+'deg)','-webkit-transform':'rotate('+this.rotate+'deg)','transform':'rotate('+this.rotate+'deg)'});this.setCanvasPosition();},onRotateRight:function(e){e.stopEvent();
-if(((this.rotate==0||this.rotate==180)&&(this.image.getHeight()<this.thumb.getWidth()||this.image.getWidth()<this.thumb.getHeight()))||((this.rotate==90||this.rotate==270)&&(this.image.getWidth()<this.thumb.getWidth()||this.image.getHeight()<this.thumb.getHeight()))){return false;
-}this.rotate=(this.rotate>180)?0:this.rotate+90;this.imageCanvas.setStyle({'-ms-transform':'rotate('+this.rotate+'deg)','-webkit-transform':'rotate('+this.rotate+'deg)','transform':'rotate('+this.rotate+'deg)'});this.setCanvasPosition();},crop:function(){var A=this.getBaseRotateLevel();
-Roo.log(A);var B=document.createElement("canvas");var C=B.getContext("2d");B.width=this.minWidth;B.height=this.minHeight;var D=this.minWidth/2;var E=this.minHeight/2;var F=this.thumb.getWidth()*this.getScaleLevel(true);var G=this.thumb.getHeight()*this.getScaleLevel(true);
-var H=Math.ceil(this.thumb.getLeft(true));var I=Math.ceil(this.thumb.getTop(true));var x=(H-this.imageCanvas.getLeft(true))*this.getScaleLevel(true);var y=(I-this.imageCanvas.getTop(true))*this.getScaleLevel(true);if(this.rotate==90){x=I+(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getTop(true);
-y=this.image.getHeight()-this.thumb.getWidth()-(H-(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getLeft(true));x=x*this.getScaleLevel(true);y=y*this.getScaleLevel(true);if(this.image.OriginWidth-G<x){x=this.image.OriginWidth-G;}if(this.image.OriginHeight-F<y){y=this.image.OriginHeight-F;
-}x=x<0?0:x;y=y<0?0:y;F=this.thumb.getHeight()*this.getScaleLevel(true);G=this.thumb.getWidth()*this.getScaleLevel(true);B.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;B.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);
-E=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);C.translate(D,E);C.rotate(this.rotate*Math.PI/180);C.drawImage(this.image.dom,x,y,F,G,D*-1,E*-1,this.minHeight,this.minWidth);var J=document.createElement("canvas");var K=J.getContext("2d");
-J.width=this.minWidth;J.height=this.minHeight;K.drawImage(B,Math.abs(this.minWidth-this.minHeight),0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);this.cropImageData=J.toDataURL(this.file.type);this.fireEvent('crop',this,this.cropImageData);
-return;}if(this.rotate==270){x=I+(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getTop(true);y=H-(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getLeft(true);x=(this.image.getWidth()-this.thumb.getHeight()-x)*this.getScaleLevel(true);
-y=y*this.getScaleLevel(true);if(this.image.OriginWidth-G<x){x=this.image.OriginWidth-G;}if(this.image.OriginHeight-F<y){y=this.image.OriginHeight-F;}x=x<0?0:x;y=y<0?0:y;F=this.thumb.getHeight()*this.getScaleLevel(true);G=this.thumb.getWidth()*this.getScaleLevel(true);
-B.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;B.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);E=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);
-C.translate(D,E);C.rotate(this.rotate*Math.PI/180);C.drawImage(this.image.dom,x,y,F,G,D*-1,E*-1,this.minHeight,this.minWidth);var J=document.createElement("canvas");var K=J.getContext("2d");J.width=this.minWidth;J.height=this.minHeight;K.drawImage(B,0,0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);
-this.cropImageData=J.toDataURL(this.file.type);this.fireEvent('crop',this,this.cropImageData);return;}if(this.rotate==180){x=this.image.OriginWidth-this.thumb.getWidth()*this.getScaleLevel(true)-x;y=this.image.OriginHeight-this.thumb.getHeight()*this.getScaleLevel(true)-y;
-}if(this.image.OriginWidth-F<x){x=this.image.OriginWidth-F;}if(this.image.OriginHeight-G<y){y=this.image.OriginHeight-G;}x=x<0?0:x;y=y<0?0:y;C.translate(D,E);C.rotate(this.rotate*Math.PI/180);C.drawImage(this.image.dom,x,y,F,G,D*-1,E*-1,B.width,B.height);
-this.cropImageData=B.toDataURL(this.file.type);this.fireEvent('crop',this,this.cropImageData);},crop0:function(){var A=document.createElement("canvas");var B=A.getContext("2d");A.width=this.minWidth;A.height=this.minHeight;var C=this.minWidth/2;var D=this.minHeight/2;
-var E=this.thumb.getWidth()*this.getScaleLevel(true);var F=this.thumb.getHeight()*this.getScaleLevel(true);var G=Math.ceil(this.thumb.getLeft(true));var H=Math.ceil(this.thumb.getTop(true));var x=(G-this.imageCanvas.getLeft(true))*this.getScaleLevel(true);
-var y=(H-this.imageCanvas.getTop(true))*this.getScaleLevel(true);if(this.rotate==90){x=H+(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getTop(true);y=this.image.getHeight()-this.thumb.getWidth()-(G-(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getLeft(true));
-x=x*this.getScaleLevel(true);y=y*this.getScaleLevel(true);if(this.image.OriginWidth-F<x){x=this.image.OriginWidth-F;}if(this.image.OriginHeight-E<y){y=this.image.OriginHeight-E;}x=x<0?0:x;y=y<0?0:y;E=this.thumb.getHeight()*this.getScaleLevel(true);F=this.thumb.getWidth()*this.getScaleLevel(true);
-A.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;A.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;C=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);
-B.translate(C,D);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,this.minHeight,this.minWidth);var I=document.createElement("canvas");var J=I.getContext("2d");I.width=this.minWidth;I.height=this.minHeight;J.drawImage(A,Math.abs(this.minWidth-this.minHeight),0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);
-this.cropImageData=I.toDataURL(this.file.type);this.fireEvent('crop',this,this.cropImageData);return;}if(this.rotate==270){x=H+(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getTop(true);y=G-(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getLeft(true);
-x=(this.image.getWidth()-this.thumb.getHeight()-x)*this.getScaleLevel(true);y=y*this.getScaleLevel(true);if(this.image.OriginWidth-F<x){x=this.image.OriginWidth-F;}if(this.image.OriginHeight-E<y){y=this.image.OriginHeight-E;}x=x<0?0:x;y=y<0?0:y;E=this.thumb.getHeight()*this.getScaleLevel(true);
-F=this.thumb.getWidth()*this.getScaleLevel(true);A.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;A.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;C=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);
-B.translate(C,D);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,this.minHeight,this.minWidth);var I=document.createElement("canvas");var J=I.getContext("2d");I.width=this.minWidth;I.height=this.minHeight;J.drawImage(A,0,0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);
-this.cropImageData=I.toDataURL(this.file.type);this.fireEvent('crop',this,this.cropImageData);return;}if(this.rotate==180){x=this.image.OriginWidth-this.thumb.getWidth()*this.getScaleLevel(true)-x;y=this.image.OriginHeight-this.thumb.getHeight()*this.getScaleLevel(true)-y;
-}if(this.image.OriginWidth-E<x){x=this.image.OriginWidth-E;}if(this.image.OriginHeight-F<y){y=this.image.OriginHeight-F;}x=x<0?0:x;y=y<0?0:y;B.translate(C,D);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,A.width,A.height);
-this.cropImageData=A.toDataURL(this.file.type);this.fireEvent('crop',this,this.cropImageData);},crop90:function(){var A=document.createElement("canvas");var B=A.getContext("2d");A.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;A.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;
-var C=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);var D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);var E=this.thumb.getWidth()*this.getScaleLevel(true);var F=this.thumb.getHeight()*this.getScaleLevel(true);var G=Math.ceil(this.thumb.getLeft(true)+this.thumb.getWidth());
-var H=Math.ceil(this.thumb.getTop(true));var x=(H-this.imageCanvas.getTop(true))*this.getScaleLevel(true);var y=(G-this.imageCanvas.getLeft(true))*this.getScaleLevel(true);if(this.image.OriginWidth-E<y){y=this.image.OriginWidth-E;}if(this.image.OriginHeight-F<x){x=this.image.OriginHeight-F;
-}x=x<0?0:x;y=y<0?0:y;B.translate(C,D);B.rotate(this.rotate*Math.PI/180);alert(x);alert(y);alert(E);alert(F);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,this.minHeight,this.minWidth);window.open(A.toDataURL(this.file.type));return;var I=document.createElement("canvas");
-var J=I.getContext("2d");I.width=this.minWidth;I.height=this.minHeight;J.drawImage(A,0,0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);this.cropImageData=I.toDataURL(this.file.type);this.fireEvent('crop',this,this.cropImageData);return;},calcThumbBoxSize:function(){var A,B;
-B=300;A=Math.ceil(this.minWidth*B/this.minHeight);if(this.minWidth>this.minHeight){A=300;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumb.setStyle({width:A+'px',height:B+'px'});return;},placeThumbBox:function(){var x=Math.ceil((this.imageSection.getWidth()-this.thumb.getWidth())/2);
-var y=Math.ceil((this.imageSection.getHeight()-this.thumb.getHeight())/2);this.thumb.setLeft(x);this.thumb.setTop(y);},fitThumbBox:function(){var A=this.thumb.getWidth();var B=this.image.OriginHeight*A/this.image.OriginWidth;this.baseScale=A/this.image.OriginWidth;
-if(this.image.OriginWidth>this.image.OriginHeight){B=this.thumb.getHeight();A=this.image.OriginWidth*B/this.image.OriginHeight;this.baseScale=B/this.image.OriginHeight;}return;},Orientation:function(){this.baseRotate=1;if(typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']])=='undefined'||[1,3,6,8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']])==-1){return;
-}this.baseRotate=this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];},getBaseRotateLevel:function(){return (Roo.isIOS)?Roo.bootstrap.UploadCropbox['Orientation']['iOS'][this.baseRotate]:Roo.bootstrap.UploadCropbox['Orientation']['Android'][this.baseRotate];
-},getScaleLevel:function(A){if(A){return Math.pow(1.1,this.scale*-1)/this.baseScale;}return this.baseScale*Math.pow(1.1,this.scale);},onTouchStart:function(e){e.stopEvent();var A=e.browserEvent.touches;if(!A){return;}if(A.length==1){this.onMouseDown(e);return;
-}if(A.length!=2){return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.startDistance=Math.sqrt(x+y);this.startScale=this.scale;this.pinching=true;this.dragable=false;},onTouchMove:function(e){e.stopEvent();
-if(!this.pinching&&!this.dragable){return;}var A=e.browserEvent.touches;if(!A){return;}if(this.dragable){this.onMouseMove(e);return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.endDistance=Math.sqrt(x+y);
-var D=this.startScale+Math.floor(Math.log(this.endDistance/this.startDistance)/Math.log(1.1));var E=Math.ceil(this.image.OriginWidth*this.baseScale*Math.pow(1.1,D));var F=Math.ceil(this.image.OriginHeight*this.baseScale*Math.pow(1.1,D));if(this.endDistance/this.startDistance<1&&(((this.rotate==0||this.rotate==180)&&(E<this.thumb.getWidth()||F<this.thumb.getHeight()))||((this.rotate==90||this.rotate==270)&&(F<this.thumb.getWidth()||E<this.thumb.getHeight())))){return;
-}this.scale=D;this.image.setWidth(E);this.image.setHeight(F);this.setCanvasPosition();},onTouchEnd:function(e){e.stopEvent();this.pinching=false;this.dragable=false;},prepare:function(A){if(!A.files||!A.files[0]){return;}this.file=A.files[0];var B=!(window.DataView&&this.file&&this.file.size>=12&&this.file.type==='image/jpeg');
-if(B){Roo.log('noMetaData');return;}var C=this;if(this.fireEvent('prepare',this,this.file)!=false){var D=new FileReader();D.onload=function(e){if(e.target.error){Roo.log(e.target.error);return;}var E=e.target.result,F=new DataView(E),G=2,H=F.byteLength-4,I,J;
-if(F.getUint16(0)===0xffd8){while(G<H){I=F.getUint16(G);if((I>=0xffe0&&I<=0xffef)||I===0xfffe){J=F.getUint16(G+2)+2;if(G+J>F.byteLength){Roo.log('Invalid meta data: Invalid segment size.');break;}if(I==0xffe1){C.parseExifData(F,G,J);}G+=J;continue;}break;
-}}var K=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);if(!K){return;}var L=K.createObjectURL(C.file);C.loadCanvasImage(L);return;};D.readAsArrayBuffer(this.file);}},parseExifData:function(A,B,C){var D=B+10,E,F;
-if(A.getUint32(B+4)!==0x45786966){return;}if(A.getUint32(B+4)!==0x45786966){return;}if(D+8>A.byteLength){Roo.log('Invalid Exif data: Invalid segment size.');return;}if(A.getUint16(B+8)!==0x0000){Roo.log('Invalid Exif data: Missing byte alignment offset.');
-return;}switch(A.getUint16(D)){case 0x4949:E=true;break;case 0x4D4D:E=false;break;default:Roo.log('Invalid Exif data: Invalid byte alignment marker.');return;}if(A.getUint16(D+2,E)!==0x002A){Roo.log('Invalid Exif data: Missing TIFF marker.');return;}F=A.getUint32(D+4,E);
-this.parseExifTags(A,D,D+F,E);},parseExifTags:function(A,B,C,D){var E,F,i;if(C+6>A.byteLength){Roo.log('Invalid Exif data: Invalid directory offset.');return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif data: Invalid directory size.');
-return;}for(i=0;i<E;i+=1){this.parseExifTag(A,B,C+2+12*i,D);}return A.getUint32(F,D);},parseExifTag:function(A,B,C,D){var E=A.getUint16(C,D);this.exif[E]=this.getExifValue(A,B,C,A.getUint16(C+2,D),A.getUint32(C+4,D),D);},getExifValue:function(A,B,C,D,E,F){var G=Roo.bootstrap.UploadCropbox.exifTagTypes[D],H,I,J,i,K,c;
-if(!G){Roo.log('Invalid Exif data: Invalid tag type.');return;}H=G.size*E;I=H>4?B+A.getUint32(C+8,F):(C+8);if(I+H>A.byteLength){Roo.log('Invalid Exif data: Invalid data offset.');return;}if(E===1){return G.getValue(A,I,F);}J=[];for(i=0;i<E;i+=1){J[i]=G.getValue(A,I+i*G.size,F);
-}if(G.ascii){K='';for(i=0;i<J.length;i+=1){c=J[i];if(c==='\u0000'){break;}K+=c;}return K;}return J;}});Roo.apply(Roo.bootstrap.UploadCropbox,{tags:{'Orientation':0x0112
-},Orientation:{iOS:{1:0,3:180,6:90,8:270},Android:{1:0,3:180,6:270,8:90}},exifTagTypes:{1:{getValue:function(A,B){return A.getUint8(B);
+Roo.bootstrap.UploadCropbox=function(A){Roo.bootstrap.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true});};Roo.extend(Roo.bootstrap.UploadCropbox,Roo.bootstrap.Component,{emptyText:'Click to upload image',scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,file:false,exif:{},baseRotate:1,cropType:'image/jpeg',getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'div',cls:'roo-upload-cropbox-body',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText}]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-rotate-left',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-picture',html:'<i class="fa fa-picture-o"></i>'}]},{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-rotate-right',html:'<i class="fa fa-repeat"></i>'}]}]}}]};
+return A;},initEvents:function(){this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);this.bodyEl=this.el.select('.roo-upload-cropbox-body',true).first();this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.bodyHasOnClickEvent=false;this.previewEl=this.el.select('.roo-upload-cropbox-preview',true).first();this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.thumbEl.hide();this.notifyEl=this.el.select('.roo-upload-cropbox-empty-notify',true).first();this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerEl=this.el.select('.roo-upload-cropbox-footer',true).first();this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.footerEl.hide();this.rotateLeft=this.el.select('.roo-upload-cropbox-rotate-left',true).first();this.rotateLeft.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.pictureBtn=this.el.select('.roo-upload-cropbox-picture',true).first();this.pictureBtn.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.rotateRight=this.el.select('.roo-upload-cropbox-rotate-right',true).first();this.rotateRight.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.setThumbBoxSize();this.bind();this.fireEvent('initial',this);},bind:function(){var A=this;
+window.addEventListener("resize",function(){A.resize();});if(!this.bodyHasOnClickEvent){this.bodyEl.on('click',this.beforeSelectFile,this);this.bodyHasOnClickEvent=true;}if(Roo.isTouch){this.bodyEl.on('touchstart',this.onTouchStart,this);this.bodyEl.on('touchmove',this.onTouchMove,this);
+this.bodyEl.on('touchend',this.onTouchEnd,this);}if(!Roo.isTouch){this.bodyEl.on('mousedown',this.onMouseDown,this);this.bodyEl.on('mousemove',this.onMouseMove,this);var B=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';this.bodyEl.on(B,this.onMouseWheel,this);
+Roo.get(document).on('mouseup',this.onMouseUp,this);}this.pictureBtn.on('click',this.beforeSelectFile,this);this.rotateLeft.on('click',this.onRotateLeft,this);this.rotateRight.on('click',this.onRotateRight,this);},reset:function(){this.scale=0;this.baseScale=1;
+this.rotate=0;this.baseRotate=1;this.dragable=false;this.pinching=false;this.mouseX=0;this.mouseY=0;this.cropData=false;},resize:function(){this.setThumbBoxPosition();this.setCanvasPosition();},beforeSelectFile:function(e){e.preventDefault();this.fireEvent('beforeselectfile',this);
+},loadCanvas:function(A){if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){if(this.bodyHasOnClickEvent){this.bodyEl.un('click',this.beforeSelectFile,this);
+this.bodyHasOnClickEvent=false;}this.notifyEl.hide();this.thumbEl.show();this.footerEl.show();this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;this.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;this.setThumbBoxPosition();
+this.baseRotateLevel();this.baseScaleLevel();this.draw();},setCanvasPosition:function(){var pw=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);var ph=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);this.previewEl.setLeft(pw);this.previewEl.setTop(ph);
+},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false;this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseMove:function(e){e.stopEvent();
+if(!this.dragable){return;}var A=Math.ceil(this.thumbEl.getLeft(true));var B=Math.ceil(this.thumbEl.getTop(true));var C=Math.ceil(A+this.thumbEl.getWidth()-this.canvasEl.width);var D=Math.ceil(B+this.thumbEl.getHeight()-this.canvasEl.height);var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();
+var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var E=Math.ceil(x+this.previewEl.getLeft(true));var F=Math.ceil(y+this.previewEl.getTop(true));E=(A<E)?A:((C>E)?C:E);F=(B<F)?B:((D>F)?D:F);this.previewEl.setLeft(E);
+this.previewEl.setTop(F);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();
+this.scale=(e.getWheelDelta()==1)?(this.scale+1):(this.scale-1);var A=Math.ceil(this.imageEl.OriginWidth*this.getScaleLevel());var B=Math.ceil(this.imageEl.OriginHeight*this.getScaleLevel());if(e.getWheelDelta()==-1&&(((this.rotate==0||this.rotate==180)&&(A<this.thumbEl.getWidth()||B<this.thumbEl.getHeight()))||((this.rotate==90||this.rotate==270)&&(B<this.thumbEl.getWidth()||A<this.thumbEl.getHeight())))){this.scale=(e.getWheelDelta()==1)?(this.scale-1):(this.scale+1);
+return;}this.draw();},onRotateLeft:function(e){e.stopEvent();if(((this.rotate==0||this.rotate==180)&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight()))||((this.rotate==90||this.rotate==270)&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight()))){return;
+}this.rotate=(this.rotate<90)?270:this.rotate-90;this.draw();},onRotateRight:function(e){e.stopEvent();if(((this.rotate==0||this.rotate==180)&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight()))||((this.rotate==90||this.rotate==270)&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight()))){return false;
+}this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();},draw:function(){this.previewEl.dom.innerHTML='';var A=document.createElement("canvas");var B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();
+var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidth<this.imageEl.OriginHeight){A.width=this.imageEl.OriginHeight*this.getScaleLevel();A.height=this.imageEl.OriginHeight*this.getScaleLevel();C=this.imageEl.OriginHeight/2;}B.scale(this.getScaleLevel(),this.getScaleLevel());
+B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);this.canvasEl=document.createElement("canvas");this.contextEl=this.canvasEl.getContext("2d");
+switch(this.rotate){case 0:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;case 90:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();
+if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;}this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;case 270:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;}this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;default:break;}this.previewEl.appendChild(this.canvasEl);this.setCanvasPosition();
+},crop:function(){var A=document.createElement("canvas");var B=A.getContext("2d");A.width=this.minWidth;A.height=this.minHeight;var C=this.thumbEl.getWidth();var D=this.thumbEl.getHeight();var x=this.thumbEl.getLeft(true)-this.previewEl.getLeft(true);var y=this.thumbEl.getTop(true)-this.previewEl.getTop(true);
+if(this.canvasEl.width-C<x){x=this.canvasEl.width-C;}if(this.canvasEl.height-D<y){y=this.canvasEl.height-D;}x=x<0?0:x;y=y<0?0:y;B.drawImage(this.canvasEl,x,y,C,D,0,0,A.width,A.height);this.cropData=A.toDataURL(this.cropType);this.fireEvent('crop',this,this.cropData);
+},setThumbBoxSize:function(){var A=300;var B=Math.ceil(this.minWidth*A/this.minHeight);if(this.minWidth>this.minHeight){B=300;A=Math.ceil(this.minHeight*B/this.minWidth);}this.thumbEl.setStyle({width:B+'px',height:A+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);
+var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];
+}this.rotate=Roo.bootstrap.UploadCropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getWidth()){B=this.thumbEl.getWidth();
+this.baseScale=B/this.imageEl.OriginHeight;}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getHeight()){A=this.thumbEl.getHeight();
+this.baseScale=A/this.imageEl.OriginWidth;}}return;}A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getHeight()){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;
+}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;
+}}return;},getScaleLevel:function(){return this.baseScale*Math.pow(1.1,this.scale);},onTouchStart:function(e){e.stopEvent();var A=e.browserEvent.touches;if(!A){return;}if(A.length==1){this.onMouseDown(e);return;}if(A.length!=2){return;}var B=[];for(var i=0,C;
+C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.startDistance=Math.sqrt(x+y);this.startScale=this.scale;this.pinching=true;this.dragable=false;},onTouchMove:function(e){e.stopEvent();if(!this.pinching&&!this.dragable){return;
+}var A=e.browserEvent.touches;if(!A){return;}if(this.dragable){this.onMouseMove(e);return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.endDistance=Math.sqrt(x+y);var D=this.startScale+Math.floor(Math.log(this.endDistance/this.startDistance)/Math.log(1.1));
+var E=Math.ceil(this.imageEl.OriginWidth*this.baseScale*Math.pow(1.1,D));var F=Math.ceil(this.imageEl.OriginHeight*this.baseScale*Math.pow(1.1,D));if(this.endDistance/this.startDistance<1&&(((this.rotate==0||this.rotate==180)&&(E<this.thumbEl.getWidth()||F<this.thumbEl.getHeight()))||((this.rotate==90||this.rotate==270)&&(F<this.thumbEl.getWidth()||E<this.thumbEl.getHeight())))){return;
+}this.scale=D;this.draw();},onTouchEnd:function(e){e.stopEvent();this.pinching=false;this.dragable=false;},prepare:function(A){this.file=false;this.exif={};if(typeof(A)==='string'){this.loadCanvas(A);return;}if(!A.files||!A.files[0]||!this.urlAPI){return;
+}this.file=A.files[0];this.cropType=this.file.type;var B=this;if(this.fireEvent('prepare',this,this.file)!=false){var C=new FileReader();C.onload=function(e){if(e.target.error){Roo.log(e.target.error);return;}var D=e.target.result,E=new DataView(D),F=2,G=E.byteLength-4,H,I;
+if(E.getUint16(0)===0xffd8){while(F<G){H=E.getUint16(F);if((H>=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');break;}if(H==0xffe1){B.parseExifData(E,F,I);}F+=I;continue;}break;
+}}var J=B.urlAPI.createObjectURL(B.file);B.loadCanvas(J);return;};C.readAsArrayBuffer(this.file);}},parseExifData:function(A,B,C){var D=B+10,E,F;if(A.getUint32(B+4)!==0x45786966){return;}if(A.getUint32(B+4)!==0x45786966){return;}if(D+8>A.byteLength){Roo.log('Invalid Exif data: Invalid segment size.');
+return;}if(A.getUint16(B+8)!==0x0000){Roo.log('Invalid Exif data: Missing byte alignment offset.');return;}switch(A.getUint16(D)){case 0x4949:E=true;break;case 0x4D4D:E=false;break;default:Roo.log('Invalid Exif data: Invalid byte alignment marker.');return;
+}if(A.getUint16(D+2,E)!==0x002A){Roo.log('Invalid Exif data: Missing TIFF marker.');return;}F=A.getUint32(D+4,E);this.parseExifTags(A,D,D+F,E);},parseExifTags:function(A,B,C,D){var E,F,i;if(C+6>A.byteLength){Roo.log('Invalid Exif data: Invalid directory offset.');
+return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif data: Invalid directory size.');return;}for(i=0;i<E;i+=1){this.parseExifTag(A,B,C+2+12*i,D);}return A.getUint32(F,D);},parseExifTag:function(A,B,C,D){var E=A.getUint16(C,D);this.exif[E]=this.getExifValue(A,B,C,A.getUint16(C+2,D),A.getUint32(C+4,D),D);
+},getExifValue:function(A,B,C,D,E,F){var G=Roo.bootstrap.UploadCropbox.exifTagTypes[D],H,I,J,i,K,c;if(!G){Roo.log('Invalid Exif data: Invalid tag type.');return;}H=G.size*E;I=H>4?B+A.getUint32(C+8,F):(C+8);if(I+H>A.byteLength){Roo.log('Invalid Exif data: Invalid data offset.');
+return;}if(E===1){return G.getValue(A,I,F);}J=[];for(i=0;i<E;i+=1){J[i]=G.getValue(A,I+i*G.size,F);}if(G.ascii){K='';for(i=0;i<J.length;i+=1){c=J[i];if(c==='\u0000'){break;}K+=c;}return K;}return J;}});Roo.apply(Roo.bootstrap.UploadCropbox,{tags:{'Orientation':0x0112
+},Orientation:{1:0,3:180,6:90,8:270},exifTagTypes:{1:{getValue:function(A,B){return A.getUint8(B);