yui-rails-asset 2.8.1

data/vendor/assets/javascripts/yui-2.8.1/build/imagecropper/imagecropper-min.js

@@ -0,0 +1,8 @@
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 2.8.1
+*/
+(function(){var C=YAHOO.util.Dom,A=YAHOO.util.Event,D=YAHOO.lang;var B=function(F,E){var G={element:F,attributes:E||{}};B.superclass.constructor.call(this,G.element,G.attributes);};B._instances={};B.getCropperById=function(E){if(B._instances[E]){return B._instances[E];}return false;};YAHOO.extend(B,YAHOO.util.Element,{CSS_MAIN:"yui-crop",CSS_MASK:"yui-crop-mask",CSS_RESIZE_MASK:"yui-crop-resize-mask",_image:null,_active:null,_resize:null,_resizeEl:null,_resizeMaskEl:null,_wrap:null,_mask:null,_createWrap:function(){this._wrap=document.createElement("div");this._wrap.id=this.get("element").id+"_wrap";this._wrap.className=this.CSS_MAIN;var F=this.get("element");this._wrap.style.width=F.width?F.width+"px":C.getStyle(F,"width");this._wrap.style.height=F.height?F.height+"px":C.getStyle(F,"height");var E=this.get("element").parentNode;E.replaceChild(this._wrap,this.get("element"));this._wrap.appendChild(this.get("element"));A.on(this._wrap,"mouseover",this._handleMouseOver,this,true);A.on(this._wrap,"mouseout",this._handleMouseOut,this,true);A.on(this._wrap,"click",function(G){A.stopEvent(G);},this,true);},_createMask:function(){this._mask=document.createElement("div");this._mask.className=this.CSS_MASK;this._wrap.appendChild(this._mask);},_createResize:function(){this._resizeEl=document.createElement("div");this._resizeEl.className=YAHOO.util.Resize.prototype.CSS_RESIZE;this._resizeEl.style.position="absolute";this._resizeEl.innerHTML='<div class="'+this.CSS_RESIZE_MASK+'"></div>';this._resizeMaskEl=this._resizeEl.firstChild;this._wrap.appendChild(this._resizeEl);this._resizeEl.style.top=this.get("initialXY")[1]+"px";this._resizeEl.style.left=this.get("initialXY")[0]+"px";this._resizeMaskEl.style.height=Math.floor(this.get("initHeight"))+"px";this._resizeMaskEl.style.width=Math.floor(this.get("initWidth"))+"px";this._resize=new YAHOO.util.Resize(this._resizeEl,{knobHandles:true,handles:"all",draggable:true,status:this.get("status"),minWidth:this.get("minWidth"),minHeight:this.get("minHeight"),ratio:this.get("ratio"),autoRatio:this.get("autoRatio"),height:this.get("initHeight"),width:this.get("initWidth")});this._setBackgroundImage(this.get("element").getAttribute("src",2));this._setBackgroundPosition(-(this.get("initialXY")[0]),-(this.get("initialXY")[1]));this._resize.on("startResize",this._handleStartResizeEvent,this,true);this._resize.on("endResize",this._handleEndResizeEvent,this,true);this._resize.on("dragEvent",this._handleDragEvent,this,true);this._resize.on("beforeResize",this._handleBeforeResizeEvent,this,true);this._resize.on("resize",this._handleResizeEvent,this,true);this._resize.dd.on("b4StartDragEvent",this._handleB4DragEvent,this,true);},_handleMouseOver:function(F){var E="keydown";if(YAHOO.env.ua.gecko||YAHOO.env.ua.opera){E="keypress";}if(!this._active){this._active=true;if(this.get("useKeys")){A.on(document,E,this._handleKeyPress,this,true);}}},_handleMouseOut:function(F){var E="keydown";if(YAHOO.env.ua.gecko||YAHOO.env.ua.opera){E="keypress";}this._active=false;if(this.get("useKeys")){A.removeListener(document,E,this._handleKeyPress);}},_moveEl:function(G,J){var H=0,E=0,I=this._setConstraints(),F=true;switch(G){case"down":H=-(J);if((I.bottom-J)<0){F=false;this._resizeEl.style.top=(I.top+I.bottom)+"px";}break;case"up":H=(J);if((I.top-J)<0){F=false;this._resizeEl.style.top="0px";}break;case"right":E=-(J);if((I.right-J)<0){F=false;this._resizeEl.style.left=(I.left+I.right)+"px";}break;case"left":E=J;if((I.left-J)<0){F=false;this._resizeEl.style.left="0px";}break;}if(F){this._resizeEl.style.left=(parseInt(this._resizeEl.style.left,10)-E)+"px";this._resizeEl.style.top=(parseInt(this._resizeEl.style.top,10)-H)+"px";this.fireEvent("moveEvent",{target:"keypress"});}else{this._setConstraints();}this._syncBackgroundPosition();},_handleKeyPress:function(G){var E=A.getCharCode(G),F=false,H=((G.shiftKey)?this.get("shiftKeyTick"):this.get("keyTick"));switch(E){case 37:this._moveEl("left",H);F=true;break;case 38:this._moveEl("up",H);F=true;break;case 39:this._moveEl("right",H);F=true;break;case 40:this._moveEl("down",H);F=true;break;default:}if(F){A.preventDefault(G);}},_handleB4DragEvent:function(){this._setConstraints();},_handleDragEvent:function(){this._syncBackgroundPosition();this.fireEvent("dragEvent",arguments);this.fireEvent("moveEvent",{target:"dragevent"});},_handleBeforeResizeEvent:function(F){var I=C.getRegion(this.get("element")),J=this._resize._cache,H=this._resize._currentHandle,G=0,E=0;if(F.top&&(F.top<I.top)){G=(J.height+J.top)-I.top;C.setY(this._resize.getWrapEl(),I.top);this._resize.getWrapEl().style.height=G+"px";this._resize._cache.height=G;this._resize._cache.top=I.top;this._syncBackgroundPosition();return false;}if(F.left&&(F.left<I.left)){E=(J.width+J.left)-I.left;C.setX(this._resize.getWrapEl(),I.left);this._resize._cache.left=I.left;this._resize.getWrapEl().style.width=E+"px";this._resize._cache.width=E;this._syncBackgroundPosition();return false;}if(H!="tl"&&H!="l"&&H!="bl"){if(J.left&&F.width&&((J.left+F.width)>I.right)){E=(I.right-J.left);C.setX(this._resize.getWrapEl(),(I.right-E));this._resize.getWrapEl().style.width=E+"px";this._resize._cache.left=(I.right-E);this._resize._cache.width=E;this._syncBackgroundPosition();return false;}}if(H!="t"&&H!="tr"&&H!="tl"){if(J.top&&F.height&&((J.top+F.height)>I.bottom)){G=(I.bottom-J.top);C.setY(this._resize.getWrapEl(),(I.bottom-G));this._resize.getWrapEl().style.height=G+"px";this._resize._cache.height=G;this._resize._cache.top=(I.bottom-G);this._syncBackgroundPosition();return false;}}},_handleResizeMaskEl:function(){var E=this._resize._cache;this._resizeMaskEl.style.height=Math.floor(E.height)+"px";this._resizeMaskEl.style.width=Math.floor(E.width)+"px";},_handleResizeEvent:function(E){this._setConstraints(true);this._syncBackgroundPosition();this.fireEvent("resizeEvent",arguments);this.fireEvent("moveEvent",{target:"resizeevent"});},_syncBackgroundPosition:function(){this._handleResizeMaskEl();this._setBackgroundPosition(-(parseInt(this._resizeEl.style.left,10)),-(parseInt(this._resizeEl.style.top,10)));
+},_setBackgroundPosition:function(F,H){var J=parseInt(C.getStyle(this._resize.get("element"),"borderLeftWidth"),10);var G=parseInt(C.getStyle(this._resize.get("element"),"borderTopWidth"),10);if(isNaN(J)){J=0;}if(isNaN(G)){G=0;}var E=this._resize.getWrapEl().firstChild;var I=(F-J)+"px "+(H-G)+"px";this._resizeMaskEl.style.backgroundPosition=I;},_setBackgroundImage:function(F){var E=this._resize.getWrapEl().firstChild;this._image=F;E.style.backgroundImage="url("+F+"#)";},_handleEndResizeEvent:function(){this._setConstraints(true);},_handleStartResizeEvent:function(){this._setConstraints(true);var I=this._resize._cache.height,F=this._resize._cache.width,H=parseInt(this._resize.getWrapEl().style.top,10),E=parseInt(this._resize.getWrapEl().style.left,10),G=0,J=0;switch(this._resize._currentHandle){case"b":G=(I+this._resize.dd.bottomConstraint);break;case"l":J=(F+this._resize.dd.leftConstraint);break;case"r":G=(I+H);J=(F+this._resize.dd.rightConstraint);break;case"br":G=(I+this._resize.dd.bottomConstraint);J=(F+this._resize.dd.rightConstraint);break;case"tr":G=(I+H);J=(F+this._resize.dd.rightConstraint);break;}if(G){}if(J){}this.fireEvent("startResizeEvent",arguments);},_setConstraints:function(J){var H=this._resize;H.dd.resetConstraints();var N=parseInt(H.get("height"),10),F=parseInt(H.get("width"),10);if(J){N=H._cache.height;F=H._cache.width;}var L=C.getRegion(this.get("element"));var G=H.getWrapEl();var O=C.getXY(G);var I=O[0]-L.left;var M=L.right-O[0]-F;var K=O[1]-L.top;var E=L.bottom-O[1]-N;if(K<0){K=0;}H.dd.setXConstraint(I,M);H.dd.setYConstraint(K,E);return{top:K,right:M,bottom:E,left:I};},getCropCoords:function(){var E={top:parseInt(this._resize.getWrapEl().style.top,10),left:parseInt(this._resize.getWrapEl().style.left,10),height:this._resize._cache.height,width:this._resize._cache.width,image:this._image};return E;},reset:function(){this._resize.resize(null,this.get("initHeight"),this.get("initWidth"),0,0,true);this._resizeEl.style.top=this.get("initialXY")[1]+"px";this._resizeEl.style.left=this.get("initialXY")[0]+"px";this._syncBackgroundPosition();return this;},getEl:function(){return this.get("element");},getResizeEl:function(){return this._resizeEl;},getWrapEl:function(){return this._wrap;},getMaskEl:function(){return this._mask;},getResizeMaskEl:function(){return this._resizeMaskEl;},getResizeObject:function(){return this._resize;},init:function(G,E){B.superclass.init.call(this,G,E);var H=G;if(!D.isString(H)){if(H.tagName&&(H.tagName.toLowerCase()=="img")){H=C.generateId(H);}else{return false;}}else{var F=C.get(H);if(F.tagName&&F.tagName.toLowerCase()=="img"){}else{return false;}}B._instances[H]=this;this._createWrap();this._createMask();this._createResize();this._setConstraints();},initAttributes:function(E){B.superclass.initAttributes.call(this,E);this.setAttributeConfig("initialXY",{writeOnce:true,validator:YAHOO.lang.isArray,value:E.initialXY||[10,10]});this.setAttributeConfig("keyTick",{validator:YAHOO.lang.isNumber,value:E.keyTick||1});this.setAttributeConfig("shiftKeyTick",{validator:YAHOO.lang.isNumber,value:E.shiftKeyTick||10});this.setAttributeConfig("useKeys",{validator:YAHOO.lang.isBoolean,value:((E.useKeys===false)?false:true)});this.setAttributeConfig("status",{validator:YAHOO.lang.isBoolean,value:((E.status===false)?false:true),method:function(F){if(this._resize){this._resize.set("status",F);}}});this.setAttributeConfig("minHeight",{validator:YAHOO.lang.isNumber,value:E.minHeight||50,method:function(F){if(this._resize){this._resize.set("minHeight",F);}}});this.setAttributeConfig("minWidth",{validator:YAHOO.lang.isNumber,value:E.minWidth||50,method:function(F){if(this._resize){this._resize.set("minWidth",F);}}});this.setAttributeConfig("ratio",{validator:YAHOO.lang.isBoolean,value:E.ratio||false,method:function(F){if(this._resize){this._resize.set("ratio",F);}}});this.setAttributeConfig("autoRatio",{validator:YAHOO.lang.isBoolean,value:((E.autoRatio===false)?false:true),method:function(F){if(this._resize){this._resize.set("autoRatio",F);}}});this.setAttributeConfig("initHeight",{writeOnce:true,validator:YAHOO.lang.isNumber,value:E.initHeight||(this.get("element").height/4)});this.setAttributeConfig("initWidth",{validator:YAHOO.lang.isNumber,writeOnce:true,value:E.initWidth||(this.get("element").width/4)});},destroy:function(){this._resize.destroy();this._resizeEl.parentNode.removeChild(this._resizeEl);this._mask.parentNode.removeChild(this._mask);A.purgeElement(this._wrap);this._wrap.parentNode.replaceChild(this.get("element"),this._wrap);for(var E in this){if(D.hasOwnProperty(this,E)){this[E]=null;}}},toString:function(){if(this.get){return"ImageCropper (#"+this.get("id")+")";}return"Image Cropper";}});YAHOO.widget.ImageCropper=B;})();YAHOO.register("imagecropper",YAHOO.widget.ImageCropper,{version:"2.8.1",build:"19"});

data/vendor/assets/javascripts/yui-2.8.1/build/imagecropper/imagecropper.js

@@ -0,0 +1,889 @@
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 2.8.1
+*/
+/**
+ * @description <p>Creates a Image Cropper control.</p>
+ * @namespace YAHOO.widget
+ * @requires yahoo, dom, dragdrop, element, event, resize
+ * @module imagecropper
+ * @beta
+ */
+(function() {
+var Dom = YAHOO.util.Dom,
+    Event = YAHOO.util.Event,
+    Lang = YAHOO.lang;
+
+    /**
+     * @constructor
+     * @class ImageCropper
+     * @description <p>Creates a Image Cropper control.</p>
+     * @extends YAHOO.util.Element
+     * @param {String/HTMLElement} el The image element to make croppable.
+     * @param {Object} attrs Object liternal containing configuration parameters.
+    */
+    var Crop = function(el, config) {
+        var oConfig = {
+            element: el,
+            attributes: config || {}
+        };
+
+        Crop.superclass.constructor.call(this, oConfig.element, oConfig.attributes);    
+    };
+
+    /**
+    * @private
+    * @static
+    * @property _instances
+    * @description Internal hash table for all ImageCropper instances
+    * @type Object
+    */ 
+    Crop._instances = {};
+    /**
+    * @static
+    * @method getCropperById 
+    * @description Get's an ImageCropper object by the HTML id of the image associated with the ImageCropper object.
+    * @return {Object} The ImageCropper Object
+    */ 
+    Crop.getCropperById = function(id) {
+        if (Crop._instances[id]) {
+            return Crop._instances[id];
+        }
+        return false;
+    };
+
+    YAHOO.extend(Crop, YAHOO.util.Element, {
+        /**
+        * @private
+        * @property CSS_MAIN
+        * @description The CSS class used to wrap the element 
+        * @type String
+        */
+        CSS_MAIN: 'yui-crop',
+        /**
+        * @private
+        * @property CSS_MASK
+        * @description The CSS class for the mask element
+        * @type String
+        */
+        CSS_MASK: 'yui-crop-mask',
+        /**
+        * @private
+        * @property CSS_RESIZE_MASK
+        * @description The CSS class for the mask inside the resize element
+        * @type String
+        */
+        CSS_RESIZE_MASK: 'yui-crop-resize-mask',
+
+        /**
+        * @private
+        * @property _image
+        * @description The url of the image we are cropping
+        * @type String
+        */
+        _image: null,
+        /**
+        * @private
+        * @property _active
+        * @description Flag to determine if the crop region is active
+        * @type Boolean
+        */
+        _active: null,
+        /**
+        * @private
+        * @property _resize
+        * @description A reference to the Resize Utility used in this Cropper Instance
+        * @type Object
+        */
+        _resize: null,
+        /**
+        * @private
+        * @property _resizeEl
+        * @description The HTML Element used to create the Resize Oject
+        * @type HTMLElement
+        */
+        _resizeEl: null,
+        /**
+        * @private
+        * @property _resizeMaskEl
+        * @description The HTML Element used to create the Resize mask
+        * @type HTMLElement
+        */
+        _resizeMaskEl: null,
+        /**
+        * @private
+        * @property _wrap
+        * @description The HTML Element created to wrap the image
+        * @type HTMLElement
+        */
+        _wrap: null,
+        /**
+        * @private
+        * @property _mask
+        * @description The HTML Element created to "mask" the image being cropped
+        * @type HTMLElement
+        */
+        _mask: null,
+        /**
+        * @private
+        * @method _createWrap
+        * @description Creates the wrapper element used to wrap the image
+        */
+        _createWrap: function() {
+            this._wrap = document.createElement('div');
+            this._wrap.id = this.get('element').id + '_wrap';
+            this._wrap.className = this.CSS_MAIN;
+            var el = this.get('element');
+            this._wrap.style.width = el.width ? el.width + 'px' : Dom.getStyle(el, 'width');
+            this._wrap.style.height = el.height ? el.height + 'px' : Dom.getStyle(el, 'height');
+            
+            var par = this.get('element').parentNode;
+            par.replaceChild(this._wrap, this.get('element'));
+            this._wrap.appendChild(this.get('element'));
+
+            Event.on(this._wrap, 'mouseover', this._handleMouseOver, this, true);
+            Event.on(this._wrap, 'mouseout', this._handleMouseOut, this, true);
+
+            Event.on(this._wrap, 'click', function(ev) { Event.stopEvent(ev); }, this, true);
+        },
+
+        /**
+        * @private
+        * @method _createMask
+        * @description Creates the mask element used to mask the image
+        */
+        _createMask: function() {
+            this._mask = document.createElement('div');
+            this._mask.className = this.CSS_MASK;
+            this._wrap.appendChild(this._mask);
+        },
+
+        /**
+        * @private
+        * @method _createResize
+        * @description Creates the resize element and the instance of the Resize Utility
+        */
+        _createResize: function() {
+            this._resizeEl = document.createElement('div');
+            this._resizeEl.className = YAHOO.util.Resize.prototype.CSS_RESIZE;
+            this._resizeEl.style.position = 'absolute';
+            
+            this._resizeEl.innerHTML = '<div class="' + this.CSS_RESIZE_MASK + '"></div>';
+            this._resizeMaskEl = this._resizeEl.firstChild;
+            this._wrap.appendChild(this._resizeEl);
+            this._resizeEl.style.top = this.get('initialXY')[1] + 'px';
+            this._resizeEl.style.left = this.get('initialXY')[0] + 'px';
+            this._resizeMaskEl.style.height = Math.floor(this.get('initHeight')) + 'px';
+            this._resizeMaskEl.style.width = Math.floor(this.get('initWidth')) + 'px';
+
+            this._resize = new YAHOO.util.Resize(this._resizeEl, {
+                knobHandles: true,
+                handles: 'all',
+                draggable: true,
+                status: this.get('status'),
+                minWidth: this.get('minWidth'),
+                minHeight: this.get('minHeight'),
+                ratio: this.get('ratio'),
+                autoRatio: this.get('autoRatio'),
+                height: this.get('initHeight'),
+                width: this.get('initWidth')
+            });
+
+            this._setBackgroundImage(this.get('element').getAttribute('src', 2));
+            this._setBackgroundPosition(-(this.get('initialXY')[0]),  -(this.get('initialXY')[1]));
+
+            this._resize.on('startResize', this._handleStartResizeEvent, this, true);
+            this._resize.on('endResize', this._handleEndResizeEvent, this, true);
+            this._resize.on('dragEvent', this._handleDragEvent, this, true);
+            this._resize.on('beforeResize', this._handleBeforeResizeEvent, this, true);
+            this._resize.on('resize', this._handleResizeEvent, this, true);
+            this._resize.dd.on('b4StartDragEvent', this._handleB4DragEvent, this, true);
+        },
+
+        /**
+        * @private
+        * @method _handleMouseOver
+        * @description Handles the mouseover event
+        */
+        _handleMouseOver: function(ev) {
+            var evType = 'keydown';
+            if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) {
+                evType = 'keypress';
+            }
+            if (!this._active) {
+                this._active = true;
+                if (this.get('useKeys')) {
+                    Event.on(document, evType, this._handleKeyPress, this, true);
+                }
+            }
+        },
+        /**
+        * @private
+        * @method _handleMouseOut
+        * @description Handles the mouseout event
+        */
+        _handleMouseOut: function(ev) {
+            var evType = 'keydown';
+            if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) {
+                evType = 'keypress';
+            }
+            this._active = false;
+            if (this.get('useKeys')) {
+                Event.removeListener(document, evType, this._handleKeyPress);
+            }
+        },
+
+        /**
+        * @private
+        * @method _moveEl
+        * @description Moves the resize element based on the arrow keys
+        */
+        _moveEl: function(dir, inc) {
+            var t = 0, l = 0,
+                region = this._setConstraints(),
+                resize = true;
+
+            switch (dir) {
+                case 'down':
+                    t = -(inc);
+                    if ((region.bottom - inc) < 0) {
+                        resize = false;
+                        this._resizeEl.style.top = (region.top + region.bottom) + 'px';
+                    }
+                    break;
+                case 'up':
+                    t = (inc);
+                    if ((region.top - inc) < 0) {
+                        resize = false;
+                        this._resizeEl.style.top = '0px';
+                    }
+                    break;
+                case 'right':
+                    l = -(inc);
+                    if ((region.right - inc) < 0) {
+                        resize = false;
+                        this._resizeEl.style.left = (region.left + region.right) + 'px';
+                    }
+                    break;
+                case 'left':
+                    l = inc;
+                    if ((region.left - inc) < 0) {
+                        resize = false;
+                        this._resizeEl.style.left = '0px';
+                    }
+                    break;
+            }
+
+            if (resize) {
+                this._resizeEl.style.left = (parseInt(this._resizeEl.style.left, 10) - l) + 'px';
+                this._resizeEl.style.top = (parseInt(this._resizeEl.style.top, 10) - t) + 'px';
+                this.fireEvent('moveEvent', { target: 'keypress' });
+            } else {
+                this._setConstraints();
+            }
+            this._syncBackgroundPosition();
+        },
+
+        /**
+        * @private
+        * @method _handleKeyPress
+        * @description Handles the keypress event
+        */
+        _handleKeyPress: function(ev) {
+            var kc = Event.getCharCode(ev),
+                stopEvent = false,
+                inc = ((ev.shiftKey) ? this.get('shiftKeyTick') : this.get('keyTick'));
+
+            switch (kc) {
+                case 0x25: // left
+                    this._moveEl('left', inc);
+                    stopEvent = true;
+                    break;
+                case 0x26: // up
+                    this._moveEl('up', inc);
+                    stopEvent = true;
+                    break;
+                case 0x27: // right
+                    this._moveEl('right', inc);
+                    stopEvent = true;
+                    break;
+                case 0x28: // down
+                    this._moveEl('down', inc);
+                    stopEvent = true;
+                    break;
+                default:
+            }
+            if (stopEvent) {
+                Event.preventDefault(ev);
+            }
+        },
+
+        /**
+        * @private
+        * @method _handleB4DragEvent
+        * @description Handles the DragDrop b4DragEvent event
+        */
+        _handleB4DragEvent: function() {
+            this._setConstraints();
+        },
+
+        /**
+        * @private
+        * @method _handleDragEvent
+        * @description Handles the DragDrop DragEvent event
+        */
+        _handleDragEvent: function() {
+            this._syncBackgroundPosition();
+            this.fireEvent('dragEvent', arguments);
+            this.fireEvent('moveEvent', { target: 'dragevent' });
+        },
+
+        /**
+        * @private
+        * @method _handleBeforeResizeEvent
+        * @description Handles the Resize Utilitys beforeResize event
+        */
+        _handleBeforeResizeEvent: function(args) {
+            var region = Dom.getRegion(this.get('element')),
+                c = this._resize._cache,
+                ch = this._resize._currentHandle, h = 0, w = 0;
+
+            if (args.top && (args.top < region.top)) {
+                h = (c.height + c.top) - region.top;
+                Dom.setY(this._resize.getWrapEl(), region.top);
+                this._resize.getWrapEl().style.height = h + 'px';
+                this._resize._cache.height = h;
+                this._resize._cache.top = region.top;
+                this._syncBackgroundPosition();
+                return false;
+            }
+            if (args.left && (args.left < region.left)) {
+                w = (c.width + c.left) - region.left;
+                Dom.setX(this._resize.getWrapEl(), region.left);
+                this._resize._cache.left = region.left;
+                this._resize.getWrapEl().style.width = w + 'px';
+                this._resize._cache.width = w;
+                this._syncBackgroundPosition();
+                return false;
+            }
+            if (ch != 'tl' && ch != 'l' && ch != 'bl') {
+                if (c.left && args.width && ((c.left + args.width) > region.right)) {
+                    w = (region.right - c.left);
+                    Dom.setX(this._resize.getWrapEl(), (region.right - w));
+                    this._resize.getWrapEl().style.width = w + 'px';
+                    this._resize._cache.left = (region.right - w);
+                    this._resize._cache.width = w;
+                    this._syncBackgroundPosition();
+                    return false;
+                }
+            }
+            if (ch != 't' && ch != 'tr' && ch != 'tl') {
+                if (c.top && args.height && ((c.top + args.height) > region.bottom)) {
+                    h = (region.bottom - c.top);
+                    Dom.setY(this._resize.getWrapEl(), (region.bottom - h));
+                    this._resize.getWrapEl().style.height = h + 'px';
+                    this._resize._cache.height = h;
+                    this._resize._cache.top = (region.bottom - h);
+                    this._syncBackgroundPosition();
+                    return false;
+                }
+            }
+        },
+        /**
+        * @private
+        * @method _handleResizeMaskEl
+        * @description Resizes the inner mask element
+        */
+        _handleResizeMaskEl: function() {
+            var a = this._resize._cache;
+            this._resizeMaskEl.style.height = Math.floor(a.height) + 'px';
+            this._resizeMaskEl.style.width = Math.floor(a.width) + 'px';
+        },
+        /**
+        * @private
+        * @method _handleResizeEvent
+        * @param Event ev The Resize Utilitys resize event.
+        * @description Handles the Resize Utilitys Resize event
+        */
+        _handleResizeEvent: function(ev) {
+            this._setConstraints(true);
+            this._syncBackgroundPosition();
+            this.fireEvent('resizeEvent', arguments);
+            this.fireEvent('moveEvent', { target: 'resizeevent' });
+        },
+
+        /**
+        * @private
+        * @method _syncBackgroundPosition
+        * @description Syncs the packground position of the resize element with the resize elements top and left style position
+        */
+        _syncBackgroundPosition: function() {
+            this._handleResizeMaskEl();
+            this._setBackgroundPosition(-(parseInt(this._resizeEl.style.left, 10)), -(parseInt(this._resizeEl.style.top, 10)));
+        },
+
+        /**
+        * @private
+        * @method _setBackgroundPosition
+        * @param Number l The left position
+        * @param Number t The top position
+        * @description Sets the background image position to the top and left position
+        */
+        _setBackgroundPosition: function(l, t) {
+            var bl = parseInt(Dom.getStyle(this._resize.get('element'), 'borderLeftWidth'), 10);
+            var bt = parseInt(Dom.getStyle(this._resize.get('element'), 'borderTopWidth'), 10);
+            if (isNaN(bl)) {
+                bl = 0;
+            }
+            if (isNaN(bt)) {
+                bt = 0;
+            }
+            var mask = this._resize.getWrapEl().firstChild;
+            var pos = (l - bl) + 'px ' + (t - bt) + 'px';
+            this._resizeMaskEl.style.backgroundPosition = pos;
+        },
+
+        /**
+        * @private
+        * @method _setBackgroundImage
+        * @param String url The url of the image
+        * @description Sets the background image of the resize element
+        */
+        _setBackgroundImage: function(url) {
+            var mask = this._resize.getWrapEl().firstChild;
+            this._image = url;
+            mask.style.backgroundImage = 'url(' + url + '#)';
+        },
+        
+        /**
+        * @private
+        * @method _handleEndResizeEvent
+        * @description Handles the Resize Utilitys endResize event
+        */
+        _handleEndResizeEvent: function() {
+            this._setConstraints(true);
+        },
+        /**
+        * @private
+        * @method _handleStartResizeEvent
+        * @description Handles the Resize Utilitys startResize event
+        */
+        _handleStartResizeEvent: function() {
+            this._setConstraints(true);
+
+            var h = this._resize._cache.height,
+                 w = this._resize._cache.width,
+                 t = parseInt(this._resize.getWrapEl().style.top, 10),
+                 l = parseInt(this._resize.getWrapEl().style.left, 10),
+                 maxH = 0, maxW = 0;
+ 
+            switch (this._resize._currentHandle) {
+                case 'b':
+                    maxH = (h + this._resize.dd.bottomConstraint);
+                    break;
+                case 'l':
+                    maxW = (w + this._resize.dd.leftConstraint);
+                    break;
+                case 'r':
+                    maxH = (h + t);
+                    maxW = (w + this._resize.dd.rightConstraint);
+                    break;
+                 case 'br':
+                     maxH = (h + this._resize.dd.bottomConstraint);
+                     maxW = (w + this._resize.dd.rightConstraint);
+                     break;
+                 case 'tr':
+                     maxH = (h + t);
+                     maxW = (w + this._resize.dd.rightConstraint);
+                     break;
+
+             }
+            
+             if (maxH) {
+                 //this._resize.set('maxHeight', maxH);
+             }
+             if (maxW) {
+                 //this._resize.set('maxWidth', maxW);
+             }
+
+            this.fireEvent('startResizeEvent', arguments);
+        },
+        
+        /**
+        * @private
+        * @method _setConstraints
+        * @param Boolean inside Used when called from inside a resize event, false by default (dragging)
+        * @description Set the DragDrop constraints to keep the element inside the crop area.
+        * @return {Object} Object containing Top, Right, Bottom and Left constraints
+        */
+        _setConstraints: function(inside) {
+            var resize = this._resize;
+            resize.dd.resetConstraints();
+            var height = parseInt(resize.get('height'), 10),
+                width = parseInt(resize.get('width'), 10);
+            if (inside) {
+                //Called from inside the resize callback
+                height = resize._cache.height;
+                width = resize._cache.width;
+            }
+
+            //Get the top, right, bottom and left positions
+            var region = Dom.getRegion(this.get('element'));
+            //Get the element we are working on
+            var el = resize.getWrapEl();
+
+            //Get the xy position of it
+            var xy = Dom.getXY(el);
+
+            //Set left to x minus left
+            var left = xy[0] - region.left;
+
+            //Set right to right minus x minus width
+            var right = region.right - xy[0] - width;
+
+            //Set top to y minus top
+            var top = xy[1] - region.top;
+
+            //Set bottom to bottom minus y minus height
+            var bottom = region.bottom - xy[1] - height;
+
+            if (top < 0) {
+                top = 0;
+            }
+            
+            resize.dd.setXConstraint(left, right); 
+            resize.dd.setYConstraint(top, bottom);
+
+            return {
+                top: top,
+                right: right,
+                bottom: bottom,
+                left: left
+            };
+
+            
+            
+        },
+        /**
+        * @method getCropCoords
+        * @description Returns the coordinates needed to crop the image
+        * @return {Object} The top, left, height, width and image url of the image being cropped
+        */
+        getCropCoords: function() {
+            var coords = {
+                top: parseInt(this._resize.getWrapEl().style.top, 10),
+                left: parseInt(this._resize.getWrapEl().style.left, 10),
+                height: this._resize._cache.height,
+                width: this._resize._cache.width,
+                image: this._image
+            };
+            return coords;
+        },
+        /**
+        * @method reset
+        * @description Resets the crop element back to it's original position
+        * @return {<a href="YAHOO.widget.ImageCropper.html">YAHOO.widget.ImageCropper</a>} The ImageCropper instance
+        */
+        reset: function() {
+            this._resize.resize(null, this.get('initHeight'), this.get('initWidth'), 0, 0, true);
+            this._resizeEl.style.top = this.get('initialXY')[1] + 'px';
+            this._resizeEl.style.left = this.get('initialXY')[0] + 'px';
+            this._syncBackgroundPosition();
+            return this;
+        },
+
+        /**
+        * @method getEl
+        * @description Get the HTML reference for the image element.
+        * @return {HTMLElement} The image element
+        */      
+        getEl: function() {
+            return this.get('element');
+        },
+        /**
+        * @method getResizeEl
+        * @description Get the HTML reference for the resize element.
+        * @return {HTMLElement} The resize element
+        */      
+        getResizeEl: function() {
+            return this._resizeEl;
+        },
+        /**
+        * @method getWrapEl
+        * @description Get the HTML reference for the wrap element.
+        * @return {HTMLElement} The wrap element
+        */      
+        getWrapEl: function() {
+            return this._wrap;
+        },
+
+        /**
+        * @method getMaskEl
+        * @description Get the HTML reference for the mask element.
+        * @return {HTMLElement} The mask element
+        */      
+        getMaskEl: function() {
+            return this._mask;
+        },
+
+        /**
+        * @method getResizeMaskEl
+        * @description Get the HTML reference for the resizable object's mask element.
+        * @return {HTMLElement} The resize objects mask element.
+        */      
+        getResizeMaskEl: function() {
+            return this._resizeMaskEl;
+        },
+
+        /**
+        * @method getResizeObject
+        * @description Get the Resize Utility object.
+        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
+        */      
+        getResizeObject: function() {
+            return this._resize;
+        },
+
+        /** 
+        * @private
+        * @method init
+        * @description The ImageCropper class's initialization method
+        */        
+        init: function(p_oElement, p_oAttributes) {
+            Crop.superclass.init.call(this, p_oElement, p_oAttributes);
+
+            var id = p_oElement;
+
+            if (!Lang.isString(id)) {
+                if (id.tagName && (id.tagName.toLowerCase() == 'img')) {
+                    id = Dom.generateId(id);                    
+                } else {
+                    return false;
+                }
+            } else {
+                var el = Dom.get(id);
+                if (el.tagName && el.tagName.toLowerCase() == 'img') {
+                    //All good
+                } else {
+                    return false;
+                }
+            }
+            
+
+
+            Crop._instances[id] = this;
+            this._createWrap();
+            this._createMask();
+            this._createResize();
+            this._setConstraints();
+
+        },
+        /**
+        * @private
+        * @method initAttributes
+        * @description Initializes all of the configuration attributes used to create a croppable element.
+        * @param {Object} attr Object literal specifying a set of 
+        * configuration attributes used to create the widget.
+        */      
+
+        initAttributes: function(attr) {
+            Crop.superclass.initAttributes.call(this, attr);
+
+            /**
+            * @attribute initialXY
+            * @description Array of the XY position that we need to set the crop element to when we build it. Defaults to [10, 10]
+            * @type Array
+            */
+            this.setAttributeConfig('initialXY', {
+                writeOnce: true,
+                validator: YAHOO.lang.isArray,
+                value: attr.initialXY || [10, 10]
+            });
+            /**
+            * @attribute keyTick
+            * @description The pixel tick for the arrow keys, defaults to 1
+            * @type Number
+            */
+            this.setAttributeConfig('keyTick', {
+                validator: YAHOO.lang.isNumber,
+                value: attr.keyTick || 1
+            });
+
+            /**
+            * @attribute shiftKeyTick
+            * @description The pixel tick for shift + the arrow keys, defaults to 10
+            * @type Number
+            */
+            this.setAttributeConfig('shiftKeyTick', {
+                validator: YAHOO.lang.isNumber,
+                value: attr.shiftKeyTick || 10
+            });
+
+            /**
+            * @attribute useKeys
+            * @description Should we use the Arrow keys to position the crop element, defaults to true
+            * @type Boolean
+            */
+            this.setAttributeConfig('useKeys', {
+                validator: YAHOO.lang.isBoolean,
+                value: ((attr.useKeys === false) ? false : true)
+            });
+
+            /**
+            * @attribute status
+            * @description Show the Resize Utility status, defaults to true
+            * @type Boolean
+            */
+            this.setAttributeConfig('status', {
+                validator: YAHOO.lang.isBoolean,
+                value: ((attr.status === false) ? false : true),
+                method: function(status) {
+                    if (this._resize) {
+                        this._resize.set('status', status);
+                    }
+                }
+            });
+
+            /**
+            * @attribute minHeight
+            * @description MinHeight of the crop area, default 50
+            * @type Number
+            */
+            this.setAttributeConfig('minHeight', {
+                validator: YAHOO.lang.isNumber,
+                value: attr.minHeight || 50,
+                method: function(h) {
+                    if (this._resize) {
+                        this._resize.set('minHeight', h);
+                    }
+                }
+            });
+
+            /**
+            * @attribute minWidth
+            * @description MinWidth of the crop area, default 50.
+            * @type Number
+            */
+            this.setAttributeConfig('minWidth', {
+                validator: YAHOO.lang.isNumber,
+                value: attr.minWidth || 50,
+                method: function(w) {
+                    if (this._resize) {
+                        this._resize.set('minWidth', w);
+                    }
+                }
+            });
+
+            /**
+            * @attribute ratio
+            * @description Set the ratio config option of the Resize Utlility, default false
+            * @type Boolean
+            */
+            this.setAttributeConfig('ratio', {
+                validator: YAHOO.lang.isBoolean,
+                value: attr.ratio || false,
+                method: function(r) {
+                    if (this._resize) {
+                        this._resize.set('ratio', r);
+                    }
+                }
+            });
+
+            /**
+            * @attribute ratio
+            * @description Set the autoRatio config option of the Resize Utlility, default true
+            * @type Boolean
+            */
+            this.setAttributeConfig('autoRatio', {
+                validator: YAHOO.lang.isBoolean,
+                value: ((attr.autoRatio === false) ? false : true),
+                method: function(a) {
+                    if (this._resize) {
+                        this._resize.set('autoRatio', a);
+                    }
+                }
+            });
+
+            /**
+            * @attribute initHeight
+            * @description Set the initlal height of the crop area, defaults to 1/4 of the image height
+            * @type Number
+            */
+            this.setAttributeConfig('initHeight', {
+                writeOnce: true,
+                validator: YAHOO.lang.isNumber,
+                value: attr.initHeight || (this.get('element').height / 4)
+            });
+
+            /**
+            * @attribute initWidth
+            * @description Set the initlal width of the crop area, defaults to 1/4 of the image width
+            * @type Number
+            */
+            this.setAttributeConfig('initWidth', {
+                validator: YAHOO.lang.isNumber,
+                writeOnce: true,
+                value: attr.initWidth || (this.get('element').width / 4)
+            });
+
+        },
+        /**
+        * @method destroy
+        * @description Destroys the ImageCropper object and all of it's elements & listeners.
+        */        
+        destroy: function() {
+            this._resize.destroy();
+            this._resizeEl.parentNode.removeChild(this._resizeEl);
+            this._mask.parentNode.removeChild(this._mask);
+            Event.purgeElement(this._wrap);
+            this._wrap.parentNode.replaceChild(this.get('element'), this._wrap);
+            
+            //Brutal Object Destroy
+            for (var i in this) {
+                if (Lang.hasOwnProperty(this, i)) {
+                    this[i] = null;
+                }
+            }
+                       
+        },
+        /**
+        * @method toString
+        * @description Returns a string representing the ImageCropper Object.
+        * @return {String}
+        */        
+        toString: function() {
+            if (this.get) {
+                return 'ImageCropper (#' + this.get('id') + ')';
+            }
+            return 'Image Cropper';
+        }
+    });
+
+    YAHOO.widget.ImageCropper = Crop;
+
+/**
+* @event dragEvent
+* @description Fires when the DragDrop dragEvent
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event startResizeEvent
+* @description Fires when when a resize action is started.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event resizeEvent
+* @description Fires on every element resize.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event moveEvent
+* @description Fires on every element move. Inside these methods: _handleKeyPress, _handleDragEvent, _handleResizeEvent
+* @type YAHOO.util.CustomEvent
+*/
+
+})();
+
+YAHOO.register("imagecropper", YAHOO.widget.ImageCropper, {version: "2.8.1", build: "19"});