projects / roojs1 / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a60162b)
add missing files
authorAlan <alan@roojs.com>
Thu, 19 Jan 2023 08:03:46 +0000 (16:03 +0800)
committerAlan <alan@roojs.com>
Thu, 19 Jan 2023 08:03:46 +0000 (16:03 +0800)
docs/src/Roo_dialog_UploadCropbox.js.html [new file with mode: 0644] patch | blob
docs/src/Roo_dialog_namespace.js.html [new file with mode: 0644] patch | blob
docs/symbols/Roo.dialog.UploadCropbox.json [new file with mode: 0644] patch | blob
docs/symbols/Roo.dialog.json [new file with mode: 0644] patch | blob

diff --git a/docs/src/Roo_dialog_UploadCropbox.js.html b/docs/src/Roo_dialog_UploadCropbox.js.html
new file mode 100644 (file)
index 0000000..3d65ea4
--- /dev/null
+++ b/docs/src/Roo_dialog_UploadCropbox.js.html
@@ -0,0 +1,1896 @@
+<html><head><title>Roo/dialog/UploadCropbox.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty">
+<span class="jsdoc-comment">/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.dialog.UploadCropbox
+ * @extends Roo.BoxComponent
+ * Dialog UploadCropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * @cfg {Number} outputMaxWidth default 1200
+ * @cfg {Number} windowSize default 300
+ * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
+ * 
+ * @constructor
+ * Create a new UploadCropbox
+ * @param {Object} config The config object
+ */
+
+ </span><span class="jsdoc-var">Roo.dialog.UploadCropbox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">Roo.dialog.UploadCropbox.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+         * @event beforeselectfile
+         * Fire before select file
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        </span><span class="jsdoc-string">&quot;beforeselectfile&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event initial
+         * Fire after initEvent
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        </span><span class="jsdoc-string">&quot;initial&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event crop
+         * Fire after initEvent
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {String} data
+         */
+        </span><span class="jsdoc-string">&quot;crop&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event prepare
+         * Fire when preparing the file data
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {Object} file
+         */
+        </span><span class="jsdoc-string">&quot;prepare&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event exception
+         * Fire when get exception
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {XMLHttpRequest} xhr
+         */
+        </span><span class="jsdoc-string">&quot;exception&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event beforeloadcanvas
+         * Fire before load the canvas
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {String} src
+         */
+        </span><span class="jsdoc-string">&quot;beforeloadcanvas&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event trash
+         * Fire when trash image
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        </span><span class="jsdoc-string">&quot;trash&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event download
+         * Fire when download the image
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        </span><span class="jsdoc-string">&quot;download&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event footerbuttonclick
+         * Fire when footerbuttonclick
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {String} type
+         */
+        </span><span class="jsdoc-string">&quot;footerbuttonclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event resize
+         * Fire when resize
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        </span><span class="jsdoc-string">&quot;resize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event rotate
+         * Fire when rotate the image
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {String} pos
+         */
+        </span><span class="jsdoc-string">&quot;rotate&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event inspect
+         * Fire when inspect the file
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {Object} file
+         */
+        </span><span class="jsdoc-string">&quot;inspect&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event upload
+         * Fire when xhr upload the file
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {Object} data
+         */
+        </span><span class="jsdoc-string">&quot;upload&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event arrange
+         * Fire when arrange the file data
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {Object} formData
+         */
+        </span><span class="jsdoc-string">&quot;arrange&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event loadcanvas
+         * Fire after load the canvas
+         * @param {Roo.dialog.UploadCropbox}
+         * @param {Object} imgEl
+         */
+        </span><span class="jsdoc-string">&quot;loadcanvas&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+
+    </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.dialog.UploadCropbox.footer.STANDARD</span><span class="jsdoc-syntax">;
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.dialog.UploadCropbox</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">,  {
+
+    </span><span class="jsdoc-var">emptyText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Click to upload image'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">rotateNotify </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Image is too small to rotate'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">errorTimeout </span><span class="jsdoc-syntax">: 3000,
+    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">: 0,
+    </span><span class="jsdoc-var">baseScale </span><span class="jsdoc-syntax">: 1,
+    </span><span class="jsdoc-var">rotate </span><span class="jsdoc-syntax">: 0,
+    </span><span class="jsdoc-var">dragable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">pinching </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">mouseX </span><span class="jsdoc-syntax">: 0,
+    </span><span class="jsdoc-var">mouseY </span><span class="jsdoc-syntax">: 0,
+    </span><span class="jsdoc-var">cropData </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">minWidth </span><span class="jsdoc-syntax">: 300,
+    </span><span class="jsdoc-var">minHeight </span><span class="jsdoc-syntax">: 300,
+    </span><span class="jsdoc-var">outputMaxWidth </span><span class="jsdoc-syntax">: 1200,
+    </span><span class="jsdoc-var">windowSize </span><span class="jsdoc-syntax">: 300,
+    </span><span class="jsdoc-var">file </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">exif </span><span class="jsdoc-syntax">: {},
+    </span><span class="jsdoc-var">baseRotate </span><span class="jsdoc-syntax">: 1,
+    </span><span class="jsdoc-var">cropType </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'image/jpeg'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">buttons </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">canvasLoaded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">isDocument </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">method </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'POST'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">paramName </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'imageUpload'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">loadMask </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">loadingText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Loading...'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">maskEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
+            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                {
+                    </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-selector'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'file'
+                </span><span class="jsdoc-syntax">},
+                {
+                    </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-body'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'cursor:pointer'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                        {
+                            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-preview'
+                        </span><span class="jsdoc-syntax">},
+                        {
+                            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-thumb'
+                        </span><span class="jsdoc-syntax">},
+                        {
+                            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-empty-notify'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.emptyText
+                        </span><span class="jsdoc-syntax">},
+                        {
+                            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-error-notify alert alert-danger'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.rotateNotify
+                        </span><span class="jsdoc-syntax">}
+                    ]
+                },
+                {
+                    </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-footer'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group btn-group-justified roo-upload-cropbox-btn-group'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
+                    }
+                }
+            ]
+        };
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">Roo.dialog.UploadCropbox.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">)) {
+                </span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtypex'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">));
+                </span><span class="jsdoc-var">this.el.dom.removeAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
+            }
+        }
+        </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({},  </span><span class="jsdoc-var">this.getAutoCreate</span><span class="jsdoc-syntax">());
+
+            </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.cls</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cfg.cls</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// fixme needs to support more complex style data.
+                </span><span class="jsdoc-var">cfg.style </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.style</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cfg.style</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">'; ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ct.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons.length</span><span class="jsdoc-syntax">) {
+
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bb</span><span class="jsdoc-syntax">) {
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bb</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onFooterButtonClick.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">bb.action</span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.maskEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+        }
+    },
+
+    </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.urlAPI </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">window.createObjectURL </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">) ||
+                                (</span><span class="jsdoc-var">window.URL </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">URL.revokeObjectURL </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">URL</span><span class="jsdoc-syntax">) ||
+                                (</span><span class="jsdoc-var">window.webkitURL </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">webkitURL</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.bodyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-body'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.bodyEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.selectorEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-selector'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.selectorEl.hide</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.previewEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-preview'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.previewEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.thumbEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-thumb'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.thumbEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.thumbEl.hide</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.notifyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-empty-notify'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.notifyEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.errorEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-error-notify'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.errorEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.errorEl.hide</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.footerEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-footer'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.footerEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.footerEl.hide</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.setThumbBoxSize</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.bind</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'initial'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">bind </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">window.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { </span><span class="jsdoc-var">_this.resize</span><span class="jsdoc-syntax">(); } );
+
+        </span><span class="jsdoc-var">this.bodyEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.beforeSelectFile</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.bodyEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchstart'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouchStart</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.bodyEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchmove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouchMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.bodyEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouchEnd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.bodyEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.bodyEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousemove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mousewheel </span><span class="jsdoc-syntax">= (/Firefox/i</span><span class="jsdoc-var">.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">navigator.userAgent</span><span class="jsdoc-syntax">))? </span><span class="jsdoc-string">'DOMMouseScroll' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'mousewheel'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.bodyEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mousewheel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseWheel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-var">this.selectorEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'change'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onFileSelected</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= 1;
+        </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-var">this.baseRotate </span><span class="jsdoc-syntax">= 1;
+        </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.pinching </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.mouseX </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-var">this.mouseY </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-var">this.cropData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.notifyEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.emptyText</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-comment">// this.selectorEl.dom.value = '';
+
+    </span><span class="jsdoc-syntax">},
+
+    </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setThumbBoxPosition</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.setCanvasPosition</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-var">onFooterButtonClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'rotate-left' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.onRotateLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'rotate-right' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.onRotateRight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'picture' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.beforeSelectFile</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'trash' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.trash</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'crop' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.crop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'download' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.download</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.center</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'footerbuttonclick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">beforeSelectFile </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeselectfile'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.selectorEl.dom.click</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-var">onFileSelected </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selectorEl.dom.files</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.selectorEl.dom.files.length</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">file </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.selectorEl.dom.files</span><span class="jsdoc-syntax">[0];
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'inspect'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.prepare</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">);
+        }
+
+    },
+
+    </span><span class="jsdoc-var">trash </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'trash'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">download </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'download'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">this.setCanvasPosition</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-var">loadCanvas </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeloadcanvas'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+
+            </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">this.imageEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-var">this.imageEl.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;load&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){ </span><span class="jsdoc-var">_this.onLoadCanvas</span><span class="jsdoc-syntax">(); });
+
+            </span><span class="jsdoc-var">this.imageEl.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">;
+        }
+    },
+
+    </span><span class="jsdoc-var">onLoadCanvas </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.naturalWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.imageEl.width</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.naturalHeight </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.imageEl.height</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'loadcanvas'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.imageEl</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+
+            </span><span class="jsdoc-var">this.bodyEl.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.beforeSelectFile</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">this.notifyEl.hide</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.thumbEl.show</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.footerEl.show</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">this.baseRotateLevel</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isDocument</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setThumbBoxSize</span><span class="jsdoc-syntax">();
+            }
+
+            </span><span class="jsdoc-var">this.setThumbBoxPosition</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">this.baseScaleLevel</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">this.draw</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">this.canvasLoaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.maskEl.unmask</span><span class="jsdoc-syntax">();
+        }
+
+    },
+
+    </span><span class="jsdoc-var">setCanvasPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newCenterLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">) / 2);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newCenterTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">) / 2);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.previewEl.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newCenterLeft</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.previewEl.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newCenterTop</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">oldScaleLevel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(1.02, </span><span class="jsdoc-var">this.startScale</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">oldCanvasWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">oldScaleLevel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">oldCanvasHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">oldScaleLevel</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">oldCenterLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">oldCanvasWidth</span><span class="jsdoc-syntax">) / 2);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">oldCenterTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">oldCanvasHeight</span><span class="jsdoc-syntax">) / 2);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">leftDiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newCenterLeft </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">oldCenterLeft</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">topDiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newCenterTop </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">oldCenterTop</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newPreviewLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">leftDiff</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newPreviewTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">topDiff</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.previewEl.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newPreviewLeft</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.previewEl.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newPreviewTop</span><span class="jsdoc-syntax">);
+
+    },
+
+    </span><span class="jsdoc-var">onMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.pinching </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isDocument </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() || </span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">())){
+            </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">this.mouseX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">e.browserEvent.touches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.pageX </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">e.getPageX</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.mouseY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">e.browserEvent.touches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.pageY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">e.getPageY</span><span class="jsdoc-syntax">();
+
+    },
+
+    </span><span class="jsdoc-var">onMouseMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.canvasLoaded</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dragable</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxPaddingLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">/ 0.9 * 0.05;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxPaddingTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maxPaddingLeft </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">)) {
+            </span><span class="jsdoc-var">maxPaddingLeft </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">) / 2 + </span><span class="jsdoc-var">maxPaddingLeft</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">)) {
+            </span><span class="jsdoc-var">maxPaddingTop </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">) / 2 + </span><span class="jsdoc-var">maxPaddingTop</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">maxPaddingLeft</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">maxPaddingTop</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">maxPaddingLeft</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) +  </span><span class="jsdoc-var">maxPaddingTop</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">minX </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tempX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">minX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tempX</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tempY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">maxY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tempY</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">e.browserEvent.touches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.pageX </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">e.getPageX</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">e.browserEvent.touches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.pageY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">e.getPageY</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.mouseX</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.mouseY</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+
+        </span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">minX </span><span class="jsdoc-syntax">: ((</span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bgX</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">: ((</span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">maxY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bgY</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.previewEl.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bgX</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.previewEl.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bgY</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.mouseX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">e.browserEvent.touches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.pageX </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">e.getPageX</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.mouseY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">e.browserEvent.touches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.pageY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">e.getPageY</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-var">onMouseUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">onMouseWheel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.startScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.scale</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">e.getWheelDelta</span><span class="jsdoc-syntax">() &gt; 0) ? (</span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">+ 1) : (</span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">- 1);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.zoomable</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startScale</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+
+        </span><span class="jsdoc-var">this.draw</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">zoomable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">minScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">minScale</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">minScale</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newCanvasWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newCanvasHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">oldCenterLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">) / 2);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">oldCenterTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">) / 2);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newCenterLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">newCanvasWidth</span><span class="jsdoc-syntax">) / 2);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newCenterTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">newCanvasHeight</span><span class="jsdoc-syntax">) / 2);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">leftDiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newCenterLeft </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">oldCenterLeft</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">topDiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newCenterTop </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">oldCenterTop</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newPreviewLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">leftDiff</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newPreviewTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">topDiff</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">paddingLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newPreviewLeft </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">paddingTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newPreviewTop </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">paddingRight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">newCanvasWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">newPreviewLeft</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">paddingBottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">newCanvasHeight </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">newPreviewTop</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxPaddingLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newCanvasWidth </span><span class="jsdoc-syntax">/ 0.9 * 0.05;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxPaddingTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maxPaddingLeft </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">)) {
+            </span><span class="jsdoc-var">maxPaddingLeft </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">newCanvasHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">newCanvasWidth</span><span class="jsdoc-syntax">) / 2 + </span><span class="jsdoc-var">maxPaddingLeft</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">)) {
+            </span><span class="jsdoc-var">maxPaddingTop </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">newCanvasWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">newCanvasHeight</span><span class="jsdoc-syntax">) / 2 + </span><span class="jsdoc-var">maxPaddingTop</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
+                </span><span class="jsdoc-var">this.isDocument </span><span class="jsdoc-syntax">&amp;&amp;
+                (</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 0 || </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 180) &amp;&amp;
+                (
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">||
+                    (</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">)
+                )
+        ){
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
+                </span><span class="jsdoc-var">this.isDocument </span><span class="jsdoc-syntax">&amp;&amp;
+                (</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 90 || </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 270) &amp;&amp;
+                (
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">||
+                    (</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">)
+                )
+        ){
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
+                !</span><span class="jsdoc-var">this.isDocument </span><span class="jsdoc-syntax">&amp;&amp;
+                (</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 0 || </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 180) &amp;&amp;
+                (
+                    </span><span class="jsdoc-comment">// for zoom out
+                    </span><span class="jsdoc-var">paddingLeft </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxPaddingLeft </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">paddingRight </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxPaddingLeft </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">paddingTop </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxPaddingTop </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">paddingBottom </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxPaddingTop </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-comment">// for zoom in
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxWidth </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">maxHeight
+                </span><span class="jsdoc-syntax">)
+        ){
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
+                !</span><span class="jsdoc-var">this.isDocument </span><span class="jsdoc-syntax">&amp;&amp;
+                (</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 90 || </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 270) &amp;&amp;
+                (
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">||
+                    </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight
+                </span><span class="jsdoc-syntax">)
+        ){
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+
+    },
+
+    </span><span class="jsdoc-var">onRotateLeft </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isDocument </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() || </span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">())){
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+            </span><span class="jsdoc-var">this.startScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.scale</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &lt; </span><span class="jsdoc-var">minScale</span><span class="jsdoc-syntax">){
+
+                </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">+ 1;
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.zoomable</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
+                        </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bw </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">()) &lt; </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() ||
+                        </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bh </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">()) &lt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">()
+                ){
+                    </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">&lt; 90) ? 270 : </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">- 90;
+
+                </span><span class="jsdoc-var">this.draw</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startScale</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-var">this.onRotateFail</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">&lt; 90) ? 270 : </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">- 90;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isDocument</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setThumbBoxSize</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.setThumbBoxPosition</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.setCanvasPosition</span><span class="jsdoc-syntax">();
+        }
+
+        </span><span class="jsdoc-var">this.draw</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rotate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">);
+
+    },
+
+    </span><span class="jsdoc-var">onRotateRight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isDocument </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() || </span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">())){
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+            </span><span class="jsdoc-var">this.startScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.scale</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &lt; </span><span class="jsdoc-var">minScale</span><span class="jsdoc-syntax">){
+
+                </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">+ 1;
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.zoomable</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
+                        </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bw </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">()) &lt; </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() ||
+                        </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bh </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">()) &lt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">()
+                ){
+                    </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">&gt; 180) ? 0 : </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">+ 90;
+
+                </span><span class="jsdoc-var">this.draw</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startScale</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-var">this.onRotateFail</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">&gt; 180) ? 0 : </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">+ 90;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isDocument</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setThumbBoxSize</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.setThumbBoxPosition</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.setCanvasPosition</span><span class="jsdoc-syntax">();
+        }
+
+        </span><span class="jsdoc-var">this.draw</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rotate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">onRotateFail </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.errorEl.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+
+        (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { </span><span class="jsdoc-var">_this.errorEl.hide</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">); })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.errorTimeout</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">draw </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.previewEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">canvasEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;canvas&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">contextEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">canvasEl.getContext</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;2d&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">canvasEl.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">canvasEl.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">/ 2;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">canvasEl.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">canvasEl.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">/ 2;
+        }
+
+        </span><span class="jsdoc-var">contextEl.scale</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+        </span><span class="jsdoc-var">contextEl.translate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">contextEl.rotate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">Math.PI </span><span class="jsdoc-syntax">/ 180);
+
+        </span><span class="jsdoc-var">contextEl.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">* -1, </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">* -1, </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.canvasEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;canvas&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.contextEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl.getContext</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;2d&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rotate</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">0 :
+
+                </span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-var">this.contextEl.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">90 :
+
+                </span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.contextEl.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">), 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-var">this.contextEl.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">180 :
+
+                </span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.contextEl.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">, 0, </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-var">this.contextEl.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">), 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">270 :
+
+                </span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.contextEl.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-var">this.contextEl.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">, 0, </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.canvasEl.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.canvasEl.height</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">this.previewEl.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.setCanvasPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">crop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.canvasLoaded</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">imageCanvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;canvas&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">imageContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">imageCanvas.getContext</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;2d&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">imageCanvas.width </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">imageCanvas.height </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">imageCanvas.width </span><span class="jsdoc-syntax">/ 2;
+
+        </span><span class="jsdoc-var">imageContext.translate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">imageContext.rotate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">Math.PI </span><span class="jsdoc-syntax">/ 180);
+
+        </span><span class="jsdoc-var">imageContext.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl</span><span class="jsdoc-syntax">, 0, 0, </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">* -1, </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">* -1, </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">canvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;canvas&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">context </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">canvas.getContext</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;2d&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">canvas.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rotate</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">0 :
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) ? 0 : ((</span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) ? 0 : ((</span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">&lt; 0 ? 0 : (</span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">&lt; 0 ? 0 : (</span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.outputMaxWidth</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.outputMaxWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">canvas.width</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">canvas.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">canvas.height </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">context.scale</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">);
+                }
+
+                </span><span class="jsdoc-var">context.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'white'</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">context.fillRect</span><span class="jsdoc-syntax">(0, 0, </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+
+                </span><span class="jsdoc-var">context.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">imageCanvas</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">90 :
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) ? 0 : ((</span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) ? 0 : ((</span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">- 2 * </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">- 2 * </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= 1;
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">== 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">== 0) || (</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">== 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&gt; 0)){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">== 0){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&gt; 0){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+                    }
+                }
+
+                </span><span class="jsdoc-var">context.scale</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+
+                </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">&lt; 0 ? 0 : (</span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">&lt; 0 ? 0 : (</span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">+= (</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) : 0;
+
+                </span><span class="jsdoc-var">context.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">imageCanvas</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">180 :
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) ? 0 : ((</span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) ? 0 : ((</span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">- 2 * </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">- 2 * </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= 1;
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">== 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">== 0) || (</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">== 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&gt; 0)){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">== 0){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&gt; 0){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+                    }
+                }
+
+                </span><span class="jsdoc-var">context.scale</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+
+                </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">&lt; 0 ? 0 : (</span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">&lt; 0 ? 0 : (</span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">+= (</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? 0 : </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">+= (</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) : 0;
+
+                </span><span class="jsdoc-var">context.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">imageCanvas</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">270 :
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">() / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) ? 0 : ((</span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) ? 0 : ((</span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">- 2 * </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">- 2 * </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= 1;
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">== 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">== 0) || (</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">== 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&gt; 0)){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">== 0){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&gt; 0){
+                    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+                    }
+                }
+
+                </span><span class="jsdoc-var">context.scale</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.thumbEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.previewEl.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.canvasEl.height </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.thumbEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.previewEl.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+
+                </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">&lt; 0 ? 0 : (</span><span class="jsdoc-var">sx </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">&lt; 0 ? 0 : (</span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.getScaleLevel</span><span class="jsdoc-syntax">());
+
+                </span><span class="jsdoc-var">sy </span><span class="jsdoc-syntax">+= (</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? 0 : </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-var">context.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">imageCanvas</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">this.cropData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">canvas.toDataURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cropType</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'crop'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cropData</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.process</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.file</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cropData</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+
+    },
+
+    </span><span class="jsdoc-var">setThumbBoxSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isDocument </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 90 || </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">== 270){
+                </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+            }
+        }
+
+        </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.windowSize</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.windowSize</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-var">this.thumbEl.setStyle</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px'
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+
+    },
+
+    </span><span class="jsdoc-var">setThumbBoxPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">()) / 2 );
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.bodyEl.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">()) / 2);
+
+        </span><span class="jsdoc-var">this.thumbEl.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.thumbEl.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+
+    },
+
+    </span><span class="jsdoc-var">baseRotateLevel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.baseRotate </span><span class="jsdoc-syntax">= 1;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
+                </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.exif</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">&amp;&amp;
+                </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.exif</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">Roo.dialog.UploadCropbox</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'tags'</span><span class="jsdoc-syntax">][</span><span class="jsdoc-string">'Orientation'</span><span class="jsdoc-syntax">]]) != </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">&amp;&amp;
+                [1, 3, 6, 8]</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.exif</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">Roo.dialog.UploadCropbox</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'tags'</span><span class="jsdoc-syntax">][</span><span class="jsdoc-string">'Orientation'</span><span class="jsdoc-syntax">]]) != -1
+        ){
+            </span><span class="jsdoc-var">this.baseRotate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.exif</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">Roo.dialog.UploadCropbox</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'tags'</span><span class="jsdoc-syntax">][</span><span class="jsdoc-string">'Orientation'</span><span class="jsdoc-syntax">]];
+        }
+
+        </span><span class="jsdoc-var">this.rotate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.dialog.UploadCropbox</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'Orientation'</span><span class="jsdoc-syntax">][</span><span class="jsdoc-var">this.baseRotate</span><span class="jsdoc-syntax">];
+
+    },
+
+    </span><span class="jsdoc-var">baseScaleLevel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isDocument</span><span class="jsdoc-syntax">){
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.baseRotate </span><span class="jsdoc-syntax">== 6 || </span><span class="jsdoc-var">this.baseRotate </span><span class="jsdoc-syntax">== 8){
+
+                </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.baseRotate </span><span class="jsdoc-syntax">== 6 || </span><span class="jsdoc-var">this.baseRotate </span><span class="jsdoc-syntax">== 8){
+
+            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">;
+                }
+            }
+
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">){
+
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginHeight</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumbEl.getWidth</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.imageEl.OriginWidth</span><span class="jsdoc-syntax">;
+            }
+
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imageEl.OriginWidth </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.imageEl.OriginHeight </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">getScaleLevel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.baseScale </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(1.02, </span><span class="jsdoc-var">this.scale</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">onTouchStart </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.canvasLoaded</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.beforeSelectFile</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">touches </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.browserEvent.touches</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">touches</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">touches.length </span><span class="jsdoc-syntax">== 1){
+            </span><span class="jsdoc-var">this.onMouseDown</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">touches.length </span><span class="jsdoc-syntax">!= 2){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">coords </span><span class="jsdoc-syntax">= [];
+
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">finger</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">finger </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">touches</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">coords.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">finger.pageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">finger.pageY</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">coords</span><span class="jsdoc-syntax">[0] - </span><span class="jsdoc-var">coords</span><span class="jsdoc-syntax">[2], 2);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">coords</span><span class="jsdoc-syntax">[1] - </span><span class="jsdoc-var">coords</span><span class="jsdoc-syntax">[3], 2);
+
+        </span><span class="jsdoc-var">this.startDistance </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.startScale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.scale</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.pinching </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+
+    },
+
+    </span><span class="jsdoc-var">onTouchMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.pinching </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.dragable</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">touches </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.browserEvent.touches</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">touches</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragable</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.onMouseMove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">coords </span><span class="jsdoc-syntax">= [];
+
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">finger</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">finger </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">touches</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">coords.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">finger.pageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">finger.pageY</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">coords</span><span class="jsdoc-syntax">[0] - </span><span class="jsdoc-var">coords</span><span class="jsdoc-syntax">[2], 2);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">coords</span><span class="jsdoc-syntax">[1] - </span><span class="jsdoc-var">coords</span><span class="jsdoc-syntax">[3], 2);
+
+        </span><span class="jsdoc-var">this.endDistance </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startScale </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.endDistance </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.startDistance</span><span class="jsdoc-syntax">) / </span><span class="jsdoc-var">Math.log</span><span class="jsdoc-syntax">(1.1));
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.zoomable</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startScale</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">this.draw</span><span class="jsdoc-syntax">();
+
+    },
+
+    </span><span class="jsdoc-var">onTouchEnd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">this.pinching </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+
+    },
+
+    </span><span class="jsdoc-var">process </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">crop</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.maskEl.mask</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadingText</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-var">this.xhr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">XMLHttpRequest</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">file.xhr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xhr</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.xhr.open</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.method</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">headers </span><span class="jsdoc-syntax">= {
+            </span><span class="jsdoc-string">&quot;Accept&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;application/json&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-string">&quot;Cache-Control&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;no-cache&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-string">&quot;X-Requested-With&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;XMLHttpRequest&quot;
+        </span><span class="jsdoc-syntax">};
+
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">headerName </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">headers</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">headerValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">headers</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">headerName</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">headerValue</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">this.xhr.setRequestHeader</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">headerName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">headerValue</span><span class="jsdoc-syntax">);
+            }
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.xhr.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+        {
+            </span><span class="jsdoc-var">_this.xhrOnLoad</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_this.xhr</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-var">this.xhr.onerror </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+        {
+            </span><span class="jsdoc-var">_this.xhrOnError</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_this.xhr</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">formData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">FormData</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'returnHTML'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'NO'</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">crop</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'crop'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">crop</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">blobBin </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">atob</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">crop.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">','</span><span class="jsdoc-syntax">)[1]);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">array </span><span class="jsdoc-syntax">= [];
+            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">blobBin.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                </span><span class="jsdoc-var">array.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">blobBin.charCodeAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">));
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">croppedFile </span><span class="jsdoc-syntax">=</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Blob</span><span class="jsdoc-syntax">([</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Uint8Array</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">array</span><span class="jsdoc-syntax">)], {</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.cropType</span><span class="jsdoc-syntax">});
+            </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.paramName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">croppedFile</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file.name</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file.filename</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'filename'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file.filename</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file.mimetype</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mimetype'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file.mimetype</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'arrange'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">formData</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.xhr.send</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">formData</span><span class="jsdoc-syntax">);
+        };
+    },
+
+    </span><span class="jsdoc-var">xhrOnLoad </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xhr</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.maskEl.unmask</span><span class="jsdoc-syntax">();
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xhr.readyState </span><span class="jsdoc-syntax">!== 4) {
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'exception'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">xhr</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">response </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.decode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xhr.responseText</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">response.success</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'exception'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">xhr</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">response </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.decode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xhr.responseText</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'upload'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">response</span><span class="jsdoc-syntax">);
+
+    },
+
+    </span><span class="jsdoc-var">xhrOnError </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.maskEl.unmask</span><span class="jsdoc-syntax">();
+        }
+
+        </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xhr on error'</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">response </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.decode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xhr.responseText</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">response</span><span class="jsdoc-syntax">);
+
+    },
+
+    </span><span class="jsdoc-var">prepare </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.maskEl.mask</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadingText</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-var">this.file </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.exif </span><span class="jsdoc-syntax">= {};
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.loadCanvas</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">file </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.urlAPI</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">this.file </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file.type</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">file.type.length </span><span class="jsdoc-syntax">!= 0) {
+            </span><span class="jsdoc-var">this.cropType </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">file.type</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'prepare'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.file</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">FileReader</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">reader.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.target.error</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.target.error</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                }
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">buffer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.target.result</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">dataView </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">DataView</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">buffer</span><span class="jsdoc-syntax">),
+                    </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">= 2,
+                    </span><span class="jsdoc-var">maxOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dataView.byteLength </span><span class="jsdoc-syntax">- 4,
+                    </span><span class="jsdoc-var">markerBytes</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">markerLength</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(0) === 0xffd8) {
+                    </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">maxOffset</span><span class="jsdoc-syntax">) {
+                        </span><span class="jsdoc-var">markerBytes </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">);
+
+                        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">markerBytes </span><span class="jsdoc-syntax">&gt;= 0xffe0 &amp;&amp; </span><span class="jsdoc-var">markerBytes </span><span class="jsdoc-syntax">&lt;= 0xffef) || </span><span class="jsdoc-var">markerBytes </span><span class="jsdoc-syntax">=== 0xfffe) {
+                            </span><span class="jsdoc-var">markerLength </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 2) + 2;
+                            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">markerLength </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">dataView.byteLength</span><span class="jsdoc-syntax">) {
+                                </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid meta data: Invalid segment size.'</span><span class="jsdoc-syntax">);
+                                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                            }
+
+                            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">markerBytes </span><span class="jsdoc-syntax">== 0xffe1){
+                                </span><span class="jsdoc-var">_this.parseExifData</span><span class="jsdoc-syntax">(
+                                    </span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">,
+                                    </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">,
+                                    </span><span class="jsdoc-var">markerLength
+                                </span><span class="jsdoc-syntax">);
+                            }
+
+                            </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">markerLength</span><span class="jsdoc-syntax">;
+
+                            </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+                        }
+
+                        </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                    }
+
+                }
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">url </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_this.urlAPI.createObjectURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_this.file</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-var">_this.loadCanvas</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">reader.readAsArrayBuffer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.file</span><span class="jsdoc-syntax">);
+
+        }
+
+    },
+
+    </span><span class="jsdoc-var">parseExifData </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tiffOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 10,
+            </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">dirOffset</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 4) !== 0x45786966) {
+            </span><span class="jsdoc-comment">// No Exif data, might be XMP data instead
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-comment">// Check for the ASCII code for &quot;Exif&quot; (0x45786966):
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 4) !== 0x45786966) {
+            </span><span class="jsdoc-comment">// No Exif data, might be XMP data instead
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tiffOffset </span><span class="jsdoc-syntax">+ 8 &gt; </span><span class="jsdoc-var">dataView.byteLength</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid Exif data: Invalid segment size.'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-comment">// Check for the two null bytes:
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 8) !== 0x0000) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid Exif data: Missing byte alignment offset.'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-comment">// Check the byte alignment:
+        </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tiffOffset</span><span class="jsdoc-syntax">)) {
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">0x4949:
+            </span><span class="jsdoc-var">littleEndian </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">0x4D4D:
+            </span><span class="jsdoc-var">littleEndian </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid Exif data: Invalid byte alignment marker.'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-comment">// Check for the TIFF tag marker (0x002A):
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tiffOffset </span><span class="jsdoc-syntax">+ 2, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) !== 0x002A) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid Exif data: Missing TIFF marker.'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-comment">// Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+        </span><span class="jsdoc-var">dirOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tiffOffset </span><span class="jsdoc-syntax">+ 4, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.parseExifTags</span><span class="jsdoc-syntax">(
+            </span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">tiffOffset</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">tiffOffset </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dirOffset</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">littleEndian
+        </span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">parseExifTags </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tiffOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dirOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tagsNumber</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">dirEndOffset</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dirOffset </span><span class="jsdoc-syntax">+ 6 &gt; </span><span class="jsdoc-var">dataView.byteLength</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid Exif data: Invalid directory offset.'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">tagsNumber </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dirOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">dirEndOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dirOffset </span><span class="jsdoc-syntax">+ 2 + 12 * </span><span class="jsdoc-var">tagsNumber</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dirEndOffset </span><span class="jsdoc-syntax">+ 4 &gt; </span><span class="jsdoc-var">dataView.byteLength</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid Exif data: Invalid directory size.'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">tagsNumber</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
+            </span><span class="jsdoc-var">this.parseExifTag</span><span class="jsdoc-syntax">(
+                </span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">tiffOffset</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">dirOffset </span><span class="jsdoc-syntax">+ 2 + 12 * </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// tag offset
+                </span><span class="jsdoc-var">littleEndian
+            </span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-comment">// Return the offset to the next directory:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dirEndOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">parseExifTag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tiffOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.exif</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.getExifValue</span><span class="jsdoc-syntax">(
+            </span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">tiffOffset</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 2, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">), </span><span class="jsdoc-comment">// tag type
+            </span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 4, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">), </span><span class="jsdoc-comment">// tag length
+            </span><span class="jsdoc-var">littleEndian
+        </span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">getExifValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tiffOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tagType </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.dialog.UploadCropbox.exifTagTypes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">],
+            </span><span class="jsdoc-var">tagSize</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tagType</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid Exif data: Invalid tag type.'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-var">tagSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tagType.size </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-comment">// Determine if the value is contained in the dataOffset bytes,
+        // or if the value at the dataOffset is a pointer to the actual data:
+        </span><span class="jsdoc-var">dataOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tagSize </span><span class="jsdoc-syntax">&gt; 4 ?
+                </span><span class="jsdoc-var">tiffOffset </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 8, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) : (</span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">+ 8);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">tagSize </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">dataView.byteLength</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Invalid Exif data: Invalid data offset.'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">=== 1) {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tagType.getValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">values </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
+            </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">tagType.getValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">tagType.size</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tagType.ascii</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">str </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-comment">// Concatenate the chars:
+            </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">values.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
+                </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-comment">// Ignore the terminating NULL byte(s):
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'\u0000'</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">str </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">;
+    }
+
+});
+
+</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.dialog.UploadCropbox</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">tags </span><span class="jsdoc-syntax">: {
+        </span><span class="jsdoc-string">'Orientation'</span><span class="jsdoc-syntax">: 0x0112
+    },
+
+    </span><span class="jsdoc-var">Orientation</span><span class="jsdoc-syntax">: {
+            1: 0, </span><span class="jsdoc-comment">//'top-left',
+//            2: 'top-right',
+            </span><span class="jsdoc-syntax">3: 180, </span><span class="jsdoc-comment">//'bottom-right',
+//            4: 'bottom-left',
+//            5: 'left-top',
+            </span><span class="jsdoc-syntax">6: 90, </span><span class="jsdoc-comment">//'right-top',
+//            7: 'right-bottom',
+            </span><span class="jsdoc-syntax">8: 270 </span><span class="jsdoc-comment">//'left-bottom'
+    </span><span class="jsdoc-syntax">},
+
+    </span><span class="jsdoc-var">exifTagTypes </span><span class="jsdoc-syntax">: {
+        </span><span class="jsdoc-comment">// byte, 8-bit unsigned int:
+        </span><span class="jsdoc-syntax">1: {
+            </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dataView.getUint8</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">);
+            },
+            </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: 1
+        },
+        </span><span class="jsdoc-comment">// ascii, 8-bit byte:
+        </span><span class="jsdoc-syntax">2: {
+            </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">String.fromCharCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView.getUint8</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">));
+            },
+            </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: 1,
+            </span><span class="jsdoc-var">ascii</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+        </span><span class="jsdoc-syntax">},
+        </span><span class="jsdoc-comment">// short, 16 bit int:
+        </span><span class="jsdoc-syntax">3: {
+            </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dataView.getUint16</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+            },
+            </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: 2
+        },
+        </span><span class="jsdoc-comment">// long, 32 bit int:
+        </span><span class="jsdoc-syntax">4: {
+            </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+            },
+            </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: 4
+        },
+        </span><span class="jsdoc-comment">// rational = two long values, first is numerator, second is denominator:
+        </span><span class="jsdoc-syntax">5: {
+            </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) /
+                    </span><span class="jsdoc-var">dataView.getUint32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset </span><span class="jsdoc-syntax">+ 4, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+            },
+            </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: 8
+        },
+        </span><span class="jsdoc-comment">// slong, 32 bit signed int:
+        </span><span class="jsdoc-syntax">9: {
+            </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dataView.getInt32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+            },
+            </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: 4
+        },
+        </span><span class="jsdoc-comment">// srational, two slongs, first is numerator, second is denominator:
+        </span><span class="jsdoc-syntax">10: {
+            </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dataView.getInt32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">) /
+                    </span><span class="jsdoc-var">dataView.getInt32</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataOffset </span><span class="jsdoc-syntax">+ 4, </span><span class="jsdoc-var">littleEndian</span><span class="jsdoc-syntax">);
+            },
+            </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: 8
+        }
+    },
+
+    </span><span class="jsdoc-var">footer </span><span class="jsdoc-syntax">: {
+        </span><span class="jsdoc-var">STANDARD </span><span class="jsdoc-syntax">: [
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-rotate-left'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'rotate-left'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-undo&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            },
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-picture'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'picture'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-picture-o&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            },
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-rotate-right'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'rotate-right'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-repeat&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            }
+        ],
+        </span><span class="jsdoc-var">DOCUMENT </span><span class="jsdoc-syntax">: [
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-rotate-left'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'rotate-left'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-undo&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            },
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-download'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'download'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            },
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-crop'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'crop'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-crop&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            },
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-trash'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'trash'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-trash&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            },
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-rotate-right'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'rotate-right'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-repeat&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            }
+        ],
+        </span><span class="jsdoc-var">ROTATOR </span><span class="jsdoc-syntax">: [
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-rotate-left'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'rotate-left'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-undo&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            },
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-rotate-right'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'rotate-right'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-repeat&quot;&gt;&lt;/i&gt;'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            }
+        ],
+        </span><span class="jsdoc-var">CENTER </span><span class="jsdoc-syntax">: [
+            {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group roo-upload-cropbox-center'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    {
+                        </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'CENTER'
+                    </span><span class="jsdoc-syntax">}
+                ]
+            }
+        ]
+    }
+});
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/src/Roo_dialog_namespace.js.html b/docs/src/Roo_dialog_namespace.js.html
new file mode 100644 (file)
index 0000000..feb524b
--- /dev/null
+++ b/docs/src/Roo_dialog_namespace.js.html
@@ -0,0 +1 @@
+<html><head><title>Roo/dialog/namespace.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-var">Roo.dialog </span><span class="jsdoc-syntax">= {};</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/Roo.dialog.UploadCropbox.json b/docs/symbols/Roo.dialog.UploadCropbox.json
new file mode 100644 (file)
index 0000000..f0c1408
--- /dev/null
+++ b/docs/symbols/Roo.dialog.UploadCropbox.json
@@ -0,0 +1,1769 @@
+{
+  "name" : "Roo.dialog.UploadCropbox",
+  "augments" : [
+    "Roo.BoxComponent",
+    "Roo.Component",
+    "Roo.util.Observable"
+  ],
+  "childClasses" : {  },
+  "tree_children" : [],
+  "tree_parent" : [],
+  "desc" : "Dialog UploadCropbox class",
+  "isSingleton" : false,
+  "isStatic" : false,
+  "isBuiltin" : false,
+  "isAbstract" : false,
+  "isBuilderTop" : false,
+  "memberOf" : "UploadCropbox",
+  "example" : "",
+  "deprecated" : "",
+  "since" : "",
+  "see" : "",
+  "params" : [
+    {
+      "name" : "config",
+      "type" : "Object",
+      "desc" : "The config object",
+      "isOptional" : false
+    }
+  ],
+  "returns" : [],
+  "throws" : "",
+  "requires" : "",
+  "config" : [
+    {
+      "name" : "listeners",
+      "type" : "Object",
+      "desc" : "list of events and functions to call for this object, \nFor example :\n<pre><code>\n    listeners :  { \n       'click' : function(e) {\n           ..... \n        } ,\n        .... \n    } \n  </code></pre>",
+      "memberOf" : "Roo.util.Observable",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "errorTimeout",
+      "type" : "Number",
+      "desc" : "default 3000",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "windowSize",
+      "type" : "Number",
+      "desc" : "default 300",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "buttons",
+      "type" : "Array",
+      "desc" : "default ['rotateLeft', 'pictureBtn', 'rotateRight']",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "hideMode",
+      "type" : "String",
+      "desc" : "y)\nHow this component should hidden. Supported values are\n\"visibility\" (css visibility), \"offsets\" (negative offset position) and\n\"display\" (css display) - defaults to \"display",
+      "memberOf" : "Roo.Component",
+      "isOptional" : false,
+      "optvals" : [
+        "display",
+        "visibility"
+      ]
+    },
+    {
+      "name" : "emptyText",
+      "type" : "String",
+      "desc" : "show when image has been loaded",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "minWidth",
+      "type" : "Number",
+      "desc" : "default 300",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "outputMaxWidth",
+      "type" : "Number",
+      "desc" : "default 1200",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "method",
+      "type" : "String",
+      "desc" : "default POST",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "style",
+      "type" : "String",
+      "desc" : "css styles to add to component\neg. text-align:right;",
+      "memberOf" : "Roo.Component",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "allowDomMove",
+      "type" : "Boolean",
+      "desc" : "Whether the component can move the Dom node when rendering (defaults to true).",
+      "memberOf" : "Roo.Component",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "paramName",
+      "type" : "String",
+      "desc" : "default 'imageUpload'",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "minHeight",
+      "type" : "Number",
+      "desc" : "default 300",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "isDocument",
+      "type" : "Boolean",
+      "desc" : "e) default fal",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name" : "loadMask",
+      "type" : "Boolean",
+      "desc" : "e) default tr",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name" : "actionMode",
+      "type" : "String",
+      "desc" : "which property holds the element that used for  hide() / show() / disable() / enable()\ndefault is 'el' for forms you probably want to set this to fieldEl",
+      "memberOf" : "Roo.Component",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "width",
+      "type" : "Number",
+      "desc" : "width (optional) size of component",
+      "memberOf" : "Roo.BoxComponent",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "rotateNotify",
+      "type" : "String",
+      "desc" : "show when image too small to rotate",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "url",
+      "type" : "String",
+      "desc" : "action url",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "height",
+      "type" : "Number",
+      "desc" : "height (optional) size of component",
+      "memberOf" : "Roo.BoxComponent",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "disableClass",
+      "type" : "String",
+      "desc" : "CSS class added to the component when it is disabled (defaults to \"x-item-disabled\").",
+      "memberOf" : "Roo.Component",
+      "isOptional" : false,
+      "optvals" : []
+    },
+    {
+      "name" : "loadingText",
+      "type" : "Boolean",
+      "desc" : "default 'Loading...'",
+      "memberOf" : "",
+      "isOptional" : false,
+      "optvals" : []
+    }
+  ],
+  "methods" : [
+    {
+      "name" : "updateBox",
+      "type" : "function",
+      "desc" : "Sets the current box measurements of the component's underlying element.",
+      "sig" : "(box)",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "box",
+          "type" : "Object",
+          "desc" : "An object in the format {x, y, width, height}",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "setPagePosition",
+      "type" : "function",
+      "desc" : "Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.\nThis method fires the move event.",
+      "sig" : "(x, y)",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "x",
+          "type" : "Number",
+          "desc" : "The new x position",
+          "isOptional" : false
+        },
+        {
+          "name" : "y",
+          "type" : "Number",
+          "desc" : "The new y position",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "syncSize",
+      "type" : "function",
+      "desc" : "Force the component's size to recalculate based on the underlying element's current height and width.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : []
+    },
+    {
+      "name" : "setSize",
+      "type" : "function",
+      "desc" : "Sets the width and height of the component.  This method fires the resize event.  This method can accept\neither width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.",
+      "sig" : "(width, height)",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "width",
+          "type" : "Number/Object",
+          "desc" : "The new width to set, or a size object in the format {width, height}",
+          "isOptional" : false
+        },
+        {
+          "name" : "height",
+          "type" : "Number",
+          "desc" : "The new height to set (not required if a size object is passed as the first arg)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.BoxComponent",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "getPosition",
+      "type" : "function",
+      "desc" : "Gets the current XY position of the component's underlying element.",
+      "sig" : "(local)",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "local",
+          "type" : "Boolean",
+          "desc" : "(optional) If true the element's left and top are returned instead of page XY (defaults to false)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Array",
+          "desc" : "The XY position of the element (e.g., [100, 200])"
+        }
+      ]
+    },
+    {
+      "name" : "onResize",
+      "type" : "function",
+      "desc" : "Called after the component is resized, this method is empty by default but can be implemented by any\nsubclass that needs to perform custom logic after a resize occurs.",
+      "sig" : "(adjWidth, adjHeight, rawWidth, rawHeight)",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "adjWidth",
+          "type" : "Number",
+          "desc" : "The box-adjusted width that was set",
+          "isOptional" : false
+        },
+        {
+          "name" : "adjHeight",
+          "type" : "Number",
+          "desc" : "The box-adjusted height that was set",
+          "isOptional" : false
+        },
+        {
+          "name" : "rawWidth",
+          "type" : "Number",
+          "desc" : "The width that was originally specified",
+          "isOptional" : false
+        },
+        {
+          "name" : "rawHeight",
+          "type" : "Number",
+          "desc" : "The height that was originally specified",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "getBox",
+      "type" : "function",
+      "desc" : "Gets the current box measurements of the component's underlying element.",
+      "sig" : "(local)",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "local",
+          "type" : "Boolean",
+          "desc" : "(optional) If true the element's left and top are returned instead of page XY (defaults to false)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "getSize",
+      "type" : "function",
+      "desc" : "Gets the current size of the component's underlying element.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Object",
+          "desc" : "An object containing the element's size {width: (element width), height: (element height)}"
+        }
+      ]
+    },
+    {
+      "name" : "onPosition",
+      "type" : "function",
+      "desc" : "Called after the component is moved, this method is empty by default but can be implemented by any\nsubclass that needs to perform custom logic after a move occurs.",
+      "sig" : "(x, y)",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "x",
+          "type" : "Number",
+          "desc" : "The new x position",
+          "isOptional" : false
+        },
+        {
+          "name" : "y",
+          "type" : "Number",
+          "desc" : "The new y position",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "setPosition",
+      "type" : "function",
+      "desc" : "Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.\nThis method fires the move event.",
+      "sig" : "(left, top)",
+      "static" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "left",
+          "type" : "Number",
+          "desc" : "The new left",
+          "isOptional" : false
+        },
+        {
+          "name" : "top",
+          "type" : "Number",
+          "desc" : "The new top",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "getId",
+      "type" : "function",
+      "desc" : "Returns the id of this component.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "String",
+          "desc" : ""
+        }
+      ]
+    },
+    {
+      "name" : "render",
+      "type" : "function",
+      "desc" : "If this is a lazy rendering component, render it to its container element.",
+      "sig" : "(container)",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "container",
+          "type" : "String/HTMLElement/Element",
+          "desc" : "(optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "destroy",
+      "type" : "function",
+      "desc" : "Destroys this component by purging any event listeners, removing the component's element from the DOM,\nremoving the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : []
+    },
+    {
+      "name" : "isVisible",
+      "type" : "function",
+      "desc" : "Returns true if this component is visible.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : []
+    },
+    {
+      "name" : "setDisabled",
+      "type" : "function",
+      "desc" : "Convenience function for setting disabled/enabled by boolean.",
+      "sig" : "(disabled)",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "disabled",
+          "type" : "Boolean",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "hide",
+      "type" : "function",
+      "desc" : "Hide this component.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "focus",
+      "type" : "function",
+      "desc" : "Try to focus this component.",
+      "sig" : "(selectText)",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "selectText",
+          "type" : "Boolean",
+          "desc" : "True to also select the text in this component (if applicable)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "show",
+      "type" : "function",
+      "desc" : "Show this component.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "enable",
+      "type" : "function",
+      "desc" : "Enable this component.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "setVisible",
+      "type" : "function",
+      "desc" : "Convenience function to hide or show this component by boolean.",
+      "sig" : "(visible)",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "visible",
+          "type" : "Boolean",
+          "desc" : "True to show, false to hide",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "disable",
+      "type" : "function",
+      "desc" : "Disable this component.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "getEl",
+      "type" : "function",
+      "desc" : "Returns the underlying {@link Roo.Element}.",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.Component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Element",
+          "desc" : "The element"
+        }
+      ]
+    },
+    {
+      "name" : "purgeListeners",
+      "type" : "function",
+      "desc" : "Removes all listeners for this object",
+      "sig" : "()\n{\n\n}",
+      "static" : false,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [],
+      "returns" : []
+    },
+    {
+      "name" : "on",
+      "type" : "function",
+      "desc" : "Appends an event handler to this element (shorthand for addListener)",
+      "sig" : "(eventName, handler, scope, options)",
+      "static" : false,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The method the event invokes",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope in which to execute the handler\nfunction. The handler function's \"this\" context.",
+          "isOptional" : false
+        },
+        {
+          "name" : "options",
+          "type" : "Object",
+          "desc" : "(optional)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "un",
+      "type" : "function",
+      "desc" : "Removes a listener (shorthand for removeListener)",
+      "sig" : "(eventName, handler, scope)",
+      "static" : false,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The handler to remove",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the handler",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "addEvents",
+      "type" : "function",
+      "desc" : "Used to define events on this Observable",
+      "sig" : "(object)",
+      "static" : false,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "object",
+          "type" : "Object",
+          "desc" : "The object with the events defined",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "releaseCapture",
+      "type" : "function",
+      "desc" : "Removes <b>all</b> added captures from the Observable.",
+      "sig" : "(o)",
+      "static" : true,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : true,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "o",
+          "type" : "Observable",
+          "desc" : "The Observable to release",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "removeListener",
+      "type" : "function",
+      "desc" : "Removes a listener",
+      "sig" : "(eventName, handler, scope)",
+      "static" : false,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The handler to remove",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the handler",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "fireEvent",
+      "type" : "function",
+      "desc" : "Fires the specified event with the passed parameters (minus the event name).",
+      "sig" : "(eventName, args)",
+      "static" : false,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "args",
+          "type" : "Object...",
+          "desc" : "Variable number of parameters are passed to handlers",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "returns false if any of the handlers return false otherwise it returns true"
+        }
+      ]
+    },
+    {
+      "name" : "hasListener",
+      "type" : "function",
+      "desc" : "Checks to see if this object has any listeners for a specified event",
+      "sig" : "(eventName)",
+      "static" : false,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The name of the event to check for",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "True if the event is being listened for, else false"
+        }
+      ]
+    },
+    {
+      "name" : "capture",
+      "type" : "function",
+      "desc" : "Starts capture on the specified Observable. All events will be passed\nto the supplied function with the event name + standard signature of the event\n<b>before</b> the event is fired. If the supplied function returns false,\nthe event will not fire.",
+      "sig" : "(o, fn, scope)",
+      "static" : true,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : true,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "o",
+          "type" : "Observable",
+          "desc" : "The Observable to capture",
+          "isOptional" : false
+        },
+        {
+          "name" : "fn",
+          "type" : "Function",
+          "desc" : "The function to call",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the fn",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "addListener",
+      "type" : "function",
+      "desc" : "Appends an event handler to this component",
+      "sig" : "(eventName, handler, scope, options)",
+      "static" : false,
+      "memberOf" : "Roo.util.Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "exceptions" : "",
+      "requires" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The method the event invokes",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope in which to execute the handler\nfunction. The handler function's \"this\" context.",
+          "isOptional" : false
+        },
+        {
+          "name" : "options",
+          "type" : "Object",
+          "desc" : "(optional) An object containing handler configuration\nproperties. This may contain any of the following properties:<ul>\n<li>scope {Object} The scope in which to execute the handler function. The handler function's \"this\" context.</li>\n<li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>\n<li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>\n<li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed\nby the specified number of milliseconds. If the event fires again within that time, the original\nhandler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>\n</ul><br>\n<p>\n<b>Combining Options</b><br>\nUsing the options argument, it is possible to combine different types of listeners:<br>\n<br>\nA normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)\n\t\t<pre><code>\n\t\tel.on('click', this.onClick, this, {\n \t\t\tsingle: true,\n    \t\tdelay: 100,\n    \t\tforumId: 4\n\t\t});\n\t\t</code></pre>\n<p>\n<b>Attaching multiple handlers in 1 call</b><br>\nThe method also allows for a single argument to be passed which is a config object containing properties\nwhich specify multiple handlers.\n<pre><code>\n\t\tel.on({\n\t\t\t'click': {\n        \t\tfn: this.onClick,\n        \t\tscope: this,\n        \t\tdelay: 100\n    \t\t}, \n    \t\t'mouseover': {\n        \t\tfn: this.onMouseOver,\n        \t\tscope: this\n    \t\t},\n    \t\t'mouseout': {\n        \t\tfn: this.onMouseOut,\n        \t\tscope: this\n    \t\t}\n\t\t});\n\t\t</code></pre>\n<p>\nOr a shorthand syntax which passes the same scope object to all handlers:\n     \t<pre><code>\n\t\tel.on({\n\t\t\t'click': this.onClick,\n    \t\t'mouseover': this.onMouseOver,\n    \t\t'mouseout': this.onMouseOut,\n    \t\tscope: this\n\t\t});\n\t\t</code></pre>",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    }
+  ],
+  "events" : [
+    {
+      "name" : "crop",
+      "type" : "function",
+      "desc" : "Fire after initEvent",
+      "sig" : "function (_self, data)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "data",
+          "type" : "String",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "trash",
+      "type" : "function",
+      "desc" : "Fire when trash image",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "download",
+      "type" : "function",
+      "desc" : "Fire when download the image",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "resize",
+      "type" : "function",
+      "desc" : "Fire when resize",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "rotate",
+      "type" : "function",
+      "desc" : "Fire when rotate the image",
+      "sig" : "function (_self, pos)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "pos",
+          "type" : "String",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "beforeloadcanvas",
+      "type" : "function",
+      "desc" : "Fire before load the canvas",
+      "sig" : "function (_self, src)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "src",
+          "type" : "String",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "footerbuttonclick",
+      "type" : "function",
+      "desc" : "Fire when footerbuttonclick",
+      "sig" : "function (_self, type)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "type",
+          "type" : "String",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "beforeselectfile",
+      "type" : "function",
+      "desc" : "Fire before select file",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "inspect",
+      "type" : "function",
+      "desc" : "Fire when inspect the file",
+      "sig" : "function (_self, file)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "file",
+          "type" : "Object",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "initial",
+      "type" : "function",
+      "desc" : "Fire after initEvent",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "upload",
+      "type" : "function",
+      "desc" : "Fire when xhr upload the file",
+      "sig" : "function (_self, data)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "data",
+          "type" : "Object",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "loadcanvas",
+      "type" : "function",
+      "desc" : "Fire after load the canvas",
+      "sig" : "function (, imgEl)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "imgEl",
+          "type" : "Object",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "prepare",
+      "type" : "function",
+      "desc" : "Fire when preparing the file data",
+      "sig" : "function (_self, file)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "file",
+          "type" : "Object",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "arrange",
+      "type" : "function",
+      "desc" : "Fire when arrange the file data",
+      "sig" : "function (_self, formData)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "formData",
+          "type" : "Object",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "exception",
+      "type" : "function",
+      "desc" : "Fire when get exception",
+      "sig" : "function (_self, xhr)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.dialog.UploadCropbox",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "xhr",
+          "type" : "XMLHttpRequest",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "move",
+      "type" : "function",
+      "desc" : "Fires after the component is moved.",
+      "sig" : "function (_self, x, y)\n{\n\n}",
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "x",
+          "type" : "Number",
+          "desc" : "The new x position",
+          "isOptional" : false
+        },
+        {
+          "name" : "y",
+          "type" : "Number",
+          "desc" : "The new y position",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "beforerender",
+      "type" : "function",
+      "desc" : "Fires before the component is rendered. Return false to stop the render.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "disable",
+      "type" : "function",
+      "desc" : "Fires after the component is disabled.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "render",
+      "type" : "function",
+      "desc" : "Fires after the component is rendered.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "destroy",
+      "type" : "function",
+      "desc" : "Fires after the component is destroyed.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "hide",
+      "type" : "function",
+      "desc" : "Fires after the component is hidden.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "beforehide",
+      "type" : "function",
+      "desc" : "Fires before the component is hidden. Return false to stop the hide.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "show",
+      "type" : "function",
+      "desc" : "Fires after the component is shown.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "beforeshow",
+      "type" : "function",
+      "desc" : "Fires before the component is shown.  Return false to stop the show.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "enable",
+      "type" : "function",
+      "desc" : "Fires after the component is enabled.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "beforedestroy",
+      "type" : "function",
+      "desc" : "Fires before the component is destroyed. Return false to stop the destroy.",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/symbols/Roo.dialog.json b/docs/symbols/Roo.dialog.json
new file mode 100644 (file)
index 0000000..4b9a869
--- /dev/null
+++ b/docs/symbols/Roo.dialog.json
@@ -0,0 +1,25 @@
+{
+  "name" : "Roo.dialog",
+  "augments" : [],
+  "childClasses" : {  },
+  "tree_children" : [],
+  "tree_parent" : [],
+  "desc" : "",
+  "isSingleton" : false,
+  "isStatic" : false,
+  "isBuiltin" : false,
+  "isAbstract" : false,
+  "isBuilderTop" : false,
+  "memberOf" : "Roo.dialog",
+  "example" : "",
+  "deprecated" : "",
+  "since" : "",
+  "see" : "",
+  "params" : [],
+  "returns" : [],
+  "throws" : "",
+  "requires" : "",
+  "config" : [],
+  "methods" : [],
+  "events" : []
+}
\ No newline at end of file
RooJS - Version 1