text: /*
  Copyright (c) 2008, Yahoo! Inc. All rights reserved.
  Code licensed under the BSD License:
  http://developer.yahoo.net/yui/license.txt
  version: 2.5.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) {
          YAHOO.log('Initializing', 'log', 'ImageCropper');
          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() {
              YAHOO.log('Creating the wrap element', 'log', 'ImageCropper');
              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() {
              YAHOO.log('Creating the Mask', 'log', 'ImageCropper');
              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() {
              YAHOO.log('Creating the Resize element', 'log', 'ImageCropper');
              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('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) {
              YAHOO.log('Moving the element', 'log', 'ImageCropper');
              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) {
                  YAHOO.log('Moving via Key Listener: ' + dir, 'log', 'ImageCropper');
                  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) {
              //YAHOO.log('Setting the image background position of the mask to: (' + l + ', ' + t + ')', 'log', 'ImageCropper');
              var bl = parseInt(Dom.getStyle(this._resize.get('element'), 'borderLeftWidth'), 10);
              var bt = parseInt(Dom.getStyle(this._resize.get('element'), 'borderTopWidth'), 10);
              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) {
              YAHOO.log('Setting the background image', 'log', 'ImageCropper');
              var mask = this._resize.getWrapEl().firstChild;
              this._image = url;
              mask.style.backgroundImage = 'url(' + url + '#)';
          },
          
          /**
          * @private
          * @method _handleStartResizeEvent
          * @description Handles the Resize Utilitys startResizeEvent 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) {
                  YAHOO.log('Setting the maxHeight on the resize object to: ' + maxH, 'log', 'ImageCropper');
                   //this._resize.set('maxHeight', maxH);
               }
               if (maxW) {
                  YAHOO.log('Setting the maxWidth on the resize object to: ' + maxW, 'log', 'ImageCropper');
                   //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) {
              YAHOO.log('Setting Contraints', 'log', 'ImageCropper');
              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);
  
              YAHOO.log('Constraints: ' + top + ',' + right + ',' + bottom + ',' + left, 'log', 'ImageCropper');
  
              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
              };
              YAHOO.log('Getting the crop coordinates: ' + Lang.dump(coords), 'log', 'ImageCropper');
              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() {
              YAHOO.log('Resetting the control', 'log', 'ImageCropper');
              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) {
              YAHOO.log('init', 'info', 'ImageCropper');
              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 {
                      YAHOO.log('Element is not an image.', 'error', 'ImageCropper');
                      return false;
                  }
              } else {
                  var el = Dom.get(id);
                  if (el.tagName && el.tagName.toLowerCase() == 'img') {
                      //All good
                  } else {
                      YAHOO.log('Element is not an image.', 'error', 'ImageCropper');
                      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() {
              YAHOO.log('Destroying the ImageCropper', 'info', 'ImageCropper');
              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.5.1", build: "984"});
  