[Summary view] [Print] [Text view]

   1  YUI.add('yui2-imagecropper', function(Y) {
   2      var YAHOO    = Y.YUI2;
   3      /*
   4  Copyright (c) 2011, Yahoo! Inc. All rights reserved.
   5  Code licensed under the BSD License:
   6  http://developer.yahoo.com/yui/license.html
   7  version: 2.9.0
   8  */
   9  /**
  10   * @description <p>Creates a Image Cropper control.</p>
  11   * @namespace YAHOO.widget
  12   * @requires yahoo, dom, dragdrop, element, event, resize
  13   * @module imagecropper
  14   */
  15  (function() {
  16  var Dom = YAHOO.util.Dom,
  17      Event = YAHOO.util.Event,
  18      Lang = YAHOO.lang;
  19  
  20      /**
  21       * @constructor
  22       * @class ImageCropper
  23       * @description <p>Creates a Image Cropper control.</p>
  24       * @extends YAHOO.util.Element
  25       * @param {String/HTMLElement} el The image element to make croppable.
  26       * @param {Object} attrs Object liternal containing configuration parameters.
  27      */
  28      var Crop = function(el, config) {
  29          var oConfig = {
  30              element: el,
  31              attributes: config || {}
  32          };
  33  
  34          Crop.superclass.constructor.call(this, oConfig.element, oConfig.attributes);    
  35      };
  36  
  37      /**
  38      * @private
  39      * @static
  40      * @property _instances
  41      * @description Internal hash table for all ImageCropper instances
  42      * @type Object
  43      */ 
  44      Crop._instances = {};
  45      /**
  46      * @static
  47      * @method getCropperById 
  48      * @description Get's an ImageCropper object by the HTML id of the image associated with the ImageCropper object.
  49      * @return {Object} The ImageCropper Object
  50      */ 
  51      Crop.getCropperById = function(id) {
  52          if (Crop._instances[id]) {
  53              return Crop._instances[id];
  54          }
  55          return false;
  56      };
  57  
  58      YAHOO.extend(Crop, YAHOO.util.Element, {
  59          /**
  60          * @private
  61          * @property CSS_MAIN
  62          * @description The CSS class used to wrap the element 
  63          * @type String
  64          */
  65          CSS_MAIN: 'yui-crop',
  66          /**
  67          * @private
  68          * @property CSS_MASK
  69          * @description The CSS class for the mask element
  70          * @type String
  71          */
  72          CSS_MASK: 'yui-crop-mask',
  73          /**
  74          * @private
  75          * @property CSS_RESIZE_MASK
  76          * @description The CSS class for the mask inside the resize element
  77          * @type {HTML}
  78          */
  79          CSS_RESIZE_MASK: 'yui-crop-resize-mask',
  80  
  81          /**
  82          * @private
  83          * @property _image
  84          * @description The url of the image we are cropping
  85          * @type String
  86          */
  87          _image: null,
  88          /**
  89          * @private
  90          * @property _active
  91          * @description Flag to determine if the crop region is active
  92          * @type Boolean
  93          */
  94          _active: null,
  95          /**
  96          * @private
  97          * @property _resize
  98          * @description A reference to the Resize Utility used in this Cropper Instance
  99          * @type Object
 100          */
 101          _resize: null,
 102          /**
 103          * @private
 104          * @property _resizeEl
 105          * @description The HTML Element used to create the Resize Oject
 106          * @type HTMLElement
 107          */
 108          _resizeEl: null,
 109          /**
 110          * @private
 111          * @property _resizeMaskEl
 112          * @description The HTML Element used to create the Resize mask
 113          * @type HTMLElement
 114          */
 115          _resizeMaskEl: null,
 116          /**
 117          * @private
 118          * @property _wrap
 119          * @description The HTML Element created to wrap the image
 120          * @type HTMLElement
 121          */
 122          _wrap: null,
 123          /**
 124          * @private
 125          * @property _mask
 126          * @description The HTML Element created to "mask" the image being cropped
 127          * @type HTMLElement
 128          */
 129          _mask: null,
 130          /**
 131          * @private
 132          * @method _createWrap
 133          * @description Creates the wrapper element used to wrap the image
 134          */
 135          _createWrap: function() {
 136              this._wrap = document.createElement('div');
 137              this._wrap.id = this.get('element').id + '_wrap';
 138              this._wrap.className = this.CSS_MAIN;
 139              var el = this.get('element');
 140              this._wrap.style.width = el.width ? el.width + 'px' : Dom.getStyle(el, 'width');
 141              this._wrap.style.height = el.height ? el.height + 'px' : Dom.getStyle(el, 'height');
 142              
 143              var par = this.get('element').parentNode;
 144              par.replaceChild(this._wrap, this.get('element'));
 145              this._wrap.appendChild(this.get('element'));
 146  
 147              Event.on(this._wrap, 'mouseover', this._handleMouseOver, this, true);
 148              Event.on(this._wrap, 'mouseout', this._handleMouseOut, this, true);
 149  
 150              Event.on(this._wrap, 'click', function(ev) { Event.stopEvent(ev); }, this, true);
 151          },
 152  
 153          /**
 154          * @private
 155          * @method _createMask
 156          * @description Creates the mask element used to mask the image
 157          */
 158          _createMask: function() {
 159              this._mask = document.createElement('div');
 160              this._mask.className = this.CSS_MASK;
 161              this._wrap.appendChild(this._mask);
 162          },
 163  
 164          /**
 165          * @private
 166          * @method _createResize
 167          * @description Creates the resize element and the instance of the Resize Utility
 168          */
 169          _createResize: function() {
 170              this._resizeEl = document.createElement('div');
 171              this._resizeEl.className = YAHOO.util.Resize.prototype.CSS_RESIZE;
 172              this._resizeEl.style.position = 'absolute';
 173              
 174              this._resizeEl.innerHTML = '<div class="' + this.CSS_RESIZE_MASK + '"></div>';
 175              this._resizeMaskEl = this._resizeEl.firstChild;
 176              this._wrap.appendChild(this._resizeEl);
 177              this._resizeEl.style.top = this.get('initialXY')[1] + 'px';
 178              this._resizeEl.style.left = this.get('initialXY')[0] + 'px';
 179              this._resizeMaskEl.style.height = Math.floor(this.get('initHeight')) + 'px';
 180              this._resizeMaskEl.style.width = Math.floor(this.get('initWidth')) + 'px';
 181  
 182              this._resize = new YAHOO.util.Resize(this._resizeEl, {
 183                  knobHandles: true,
 184                  handles: 'all',
 185                  draggable: true,
 186                  status: this.get('status'),
 187                  minWidth: this.get('minWidth'),
 188                  minHeight: this.get('minHeight'),
 189                  ratio: this.get('ratio'),
 190                  autoRatio: this.get('autoRatio'),
 191                  height: this.get('initHeight'),
 192                  width: this.get('initWidth')
 193              });
 194  
 195              this._setBackgroundImage(this.get('element').getAttribute('src', 2));
 196              this._setBackgroundPosition(-(this.get('initialXY')[0]),  -(this.get('initialXY')[1]));
 197  
 198              this._resize.on('startResize', this._handleStartResizeEvent, this, true);
 199              this._resize.on('endResize', this._handleEndResizeEvent, this, true);
 200              this._resize.on('dragEvent', this._handleDragEvent, this, true);
 201              this._resize.on('beforeResize', this._handleBeforeResizeEvent, this, true);
 202              this._resize.on('resize', this._handleResizeEvent, this, true);
 203              this._resize.dd.on('b4StartDragEvent', this._handleB4DragEvent, this, true);
 204          },
 205  
 206          /**
 207          * @private
 208          * @method _handleMouseOver
 209          * @description Handles the mouseover event
 210          */
 211          _handleMouseOver: function(ev) {
 212              var evType = 'keydown';
 213              if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) {
 214                  evType = 'keypress';
 215              }
 216              if (!this._active) {
 217                  this._active = true;
 218                  if (this.get('useKeys')) {
 219                      Event.on(document, evType, this._handleKeyPress, this, true);
 220                  }
 221              }
 222          },
 223          /**
 224          * @private
 225          * @method _handleMouseOut
 226          * @description Handles the mouseout event
 227          */
 228          _handleMouseOut: function(ev) {
 229              var evType = 'keydown';
 230              if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) {
 231                  evType = 'keypress';
 232              }
 233              this._active = false;
 234              if (this.get('useKeys')) {
 235                  Event.removeListener(document, evType, this._handleKeyPress);
 236              }
 237          },
 238  
 239          /**
 240          * @private
 241          * @method _moveEl
 242          * @description Moves the resize element based on the arrow keys
 243          */
 244          _moveEl: function(dir, inc) {
 245              var t = 0, l = 0,
 246                  region = this._setConstraints(),
 247                  resize = true;
 248  
 249              switch (dir) {
 250                  case 'down':
 251                      t = -(inc);
 252                      if ((region.bottom - inc) < 0) {
 253                          resize = false;
 254                          this._resizeEl.style.top = (region.top + region.bottom) + 'px';
 255                      }
 256                      break;
 257                  case 'up':
 258                      t = (inc);
 259                      if ((region.top - inc) < 0) {
 260                          resize = false;
 261                          this._resizeEl.style.top = '0px';
 262                      }
 263                      break;
 264                  case 'right':
 265                      l = -(inc);
 266                      if ((region.right - inc) < 0) {
 267                          resize = false;
 268                          this._resizeEl.style.left = (region.left + region.right) + 'px';
 269                      }
 270                      break;
 271                  case 'left':
 272                      l = inc;
 273                      if ((region.left - inc) < 0) {
 274                          resize = false;
 275                          this._resizeEl.style.left = '0px';
 276                      }
 277                      break;
 278              }
 279  
 280              if (resize) {
 281                  this._resizeEl.style.left = (parseInt(this._resizeEl.style.left, 10) - l) + 'px';
 282                  this._resizeEl.style.top = (parseInt(this._resizeEl.style.top, 10) - t) + 'px';
 283                  this.fireEvent('moveEvent', { target: 'keypress' });
 284              } else {
 285                  this._setConstraints();
 286              }
 287              this._syncBackgroundPosition();
 288          },
 289  
 290          /**
 291          * @private
 292          * @method _handleKeyPress
 293          * @description Handles the keypress event
 294          */
 295          _handleKeyPress: function(ev) {
 296              var kc = Event.getCharCode(ev),
 297                  stopEvent = false,
 298                  inc = ((ev.shiftKey) ? this.get('shiftKeyTick') : this.get('keyTick'));
 299  
 300              switch (kc) {
 301                  case 0x25: // left
 302                      this._moveEl('left', inc);
 303                      stopEvent = true;
 304                      break;
 305                  case 0x26: // up
 306                      this._moveEl('up', inc);
 307                      stopEvent = true;
 308                      break;
 309                  case 0x27: // right
 310                      this._moveEl('right', inc);
 311                      stopEvent = true;
 312                      break;
 313                  case 0x28: // down
 314                      this._moveEl('down', inc);
 315                      stopEvent = true;
 316                      break;
 317                  default:
 318              }
 319              if (stopEvent) {
 320                  Event.preventDefault(ev);
 321              }
 322          },
 323  
 324          /**
 325          * @private
 326          * @method _handleB4DragEvent
 327          * @description Handles the DragDrop b4DragEvent event
 328          */
 329          _handleB4DragEvent: function() {
 330              this._setConstraints();
 331          },
 332  
 333          /**
 334          * @private
 335          * @method _handleDragEvent
 336          * @description Handles the DragDrop DragEvent event
 337          */
 338          _handleDragEvent: function() {
 339              this._syncBackgroundPosition();
 340              this.fireEvent('dragEvent', arguments);
 341              this.fireEvent('moveEvent', { target: 'dragevent' });
 342          },
 343  
 344          /**
 345          * @private
 346          * @method _handleBeforeResizeEvent
 347          * @description Handles the Resize Utilitys beforeResize event
 348          */
 349          _handleBeforeResizeEvent: function(args) {
 350              var region = Dom.getRegion(this.get('element')),
 351                  c = this._resize._cache,
 352                  ch = this._resize._currentHandle, h = 0, w = 0;
 353  
 354              if (args.top && (args.top < region.top)) {
 355                  h = (c.height + c.top) - region.top;
 356                  Dom.setY(this._resize.getWrapEl(), region.top);
 357                  this._resize.getWrapEl().style.height = h + 'px';
 358                  this._resize._cache.height = h;
 359                  this._resize._cache.top = region.top;
 360                  this._syncBackgroundPosition();
 361                  return false;
 362              }
 363              if (args.left && (args.left < region.left)) {
 364                  w = (c.width + c.left) - region.left;
 365                  Dom.setX(this._resize.getWrapEl(), region.left);
 366                  this._resize._cache.left = region.left;
 367                  this._resize.getWrapEl().style.width = w + 'px';
 368                  this._resize._cache.width = w;
 369                  this._syncBackgroundPosition();
 370                  return false;
 371              }
 372              if (ch != 'tl' && ch != 'l' && ch != 'bl') {
 373                  if (c.left && args.width && ((c.left + args.width) > region.right)) {
 374                      w = (region.right - c.left);
 375                      Dom.setX(this._resize.getWrapEl(), (region.right - w));
 376                      this._resize.getWrapEl().style.width = w + 'px';
 377                      this._resize._cache.left = (region.right - w);
 378                      this._resize._cache.width = w;
 379                      this._syncBackgroundPosition();
 380                      return false;
 381                  }
 382              }
 383              if (ch != 't' && ch != 'tr' && ch != 'tl') {
 384                  if (c.top && args.height && ((c.top + args.height) > region.bottom)) {
 385                      h = (region.bottom - c.top);
 386                      Dom.setY(this._resize.getWrapEl(), (region.bottom - h));
 387                      this._resize.getWrapEl().style.height = h + 'px';
 388                      this._resize._cache.height = h;
 389                      this._resize._cache.top = (region.bottom - h);
 390                      this._syncBackgroundPosition();
 391                      return false;
 392                  }
 393              }
 394          },
 395          /**
 396          * @private
 397          * @method _handleResizeMaskEl
 398          * @description Resizes the inner mask element
 399          */
 400          _handleResizeMaskEl: function() {
 401              var a = this._resize._cache;
 402              this._resizeMaskEl.style.height = Math.floor(a.height) + 'px';
 403              this._resizeMaskEl.style.width = Math.floor(a.width) + 'px';
 404          },
 405          /**
 406          * @private
 407          * @method _handleResizeEvent
 408          * @param Event ev The Resize Utilitys resize event.
 409          * @description Handles the Resize Utilitys Resize event
 410          */
 411          _handleResizeEvent: function(ev) {
 412              this._setConstraints(true);
 413              this._syncBackgroundPosition();
 414              this.fireEvent('resizeEvent', arguments);
 415              this.fireEvent('moveEvent', { target: 'resizeevent' });
 416          },
 417  
 418          /**
 419          * @private
 420          * @method _syncBackgroundPosition
 421          * @description Syncs the packground position of the resize element with the resize elements top and left style position
 422          */
 423          _syncBackgroundPosition: function() {
 424              this._handleResizeMaskEl();
 425              this._setBackgroundPosition(-(parseInt(this._resizeEl.style.left, 10)), -(parseInt(this._resizeEl.style.top, 10)));
 426          },
 427  
 428          /**
 429          * @private
 430          * @method _setBackgroundPosition
 431          * @param Number l The left position
 432          * @param Number t The top position
 433          * @description Sets the background image position to the top and left position
 434          */
 435          _setBackgroundPosition: function(l, t) {
 436              var bl = parseInt(Dom.getStyle(this._resize.get('element'), 'borderLeftWidth'), 10);
 437              var bt = parseInt(Dom.getStyle(this._resize.get('element'), 'borderTopWidth'), 10);
 438              if (isNaN(bl)) {
 439                  bl = 0;
 440              }
 441              if (isNaN(bt)) {
 442                  bt = 0;
 443              }
 444              var mask = this._resize.getWrapEl().firstChild;
 445              var pos = (l - bl) + 'px ' + (t - bt) + 'px';
 446              this._resizeMaskEl.style.backgroundPosition = pos;
 447          },
 448  
 449          /**
 450          * @private
 451          * @method _setBackgroundImage
 452          * @param String url The url of the image
 453          * @description Sets the background image of the resize element
 454          */
 455          _setBackgroundImage: function(url) {
 456              var mask = this._resize.getWrapEl().firstChild;
 457              this._image = url;
 458              mask.style.backgroundImage = 'url(' + url + '#)';
 459          },
 460          
 461          /**
 462          * @private
 463          * @method _handleEndResizeEvent
 464          * @description Handles the Resize Utilitys endResize event
 465          */
 466          _handleEndResizeEvent: function() {
 467              this._setConstraints(true);
 468          },
 469          /**
 470          * @private
 471          * @method _handleStartResizeEvent
 472          * @description Handles the Resize Utilitys startResize event
 473          */
 474          _handleStartResizeEvent: function() {
 475              this._setConstraints(true);
 476  
 477              var h = this._resize._cache.height,
 478                   w = this._resize._cache.width,
 479                   t = parseInt(this._resize.getWrapEl().style.top, 10),
 480                   l = parseInt(this._resize.getWrapEl().style.left, 10),
 481                   maxH = 0, maxW = 0;
 482   
 483              switch (this._resize._currentHandle) {
 484                  case 'b':
 485                      maxH = (h + this._resize.dd.bottomConstraint);
 486                      break;
 487                  case 'l':
 488                      maxW = (w + this._resize.dd.leftConstraint);
 489                      break;
 490                  case 'r':
 491                      maxH = (h + t);
 492                      maxW = (w + this._resize.dd.rightConstraint);
 493                      break;
 494                   case 'br':
 495                       maxH = (h + this._resize.dd.bottomConstraint);
 496                       maxW = (w + this._resize.dd.rightConstraint);
 497                       break;
 498                   case 'tr':
 499                       maxH = (h + t);
 500                       maxW = (w + this._resize.dd.rightConstraint);
 501                       break;
 502  
 503               }
 504              
 505               if (maxH) {
 506                   //this._resize.set('maxHeight', maxH);
 507               }
 508               if (maxW) {
 509                   //this._resize.set('maxWidth', maxW);
 510               }
 511  
 512              this.fireEvent('startResizeEvent', arguments);
 513          },
 514          
 515          /**
 516          * @private
 517          * @method _setConstraints
 518          * @param Boolean inside Used when called from inside a resize event, false by default (dragging)
 519          * @description Set the DragDrop constraints to keep the element inside the crop area.
 520          * @return {Object} Object containing Top, Right, Bottom and Left constraints
 521          */
 522          _setConstraints: function(inside) {
 523              var resize = this._resize;
 524              resize.dd.resetConstraints();
 525              var height = parseInt(resize.get('height'), 10),
 526                  width = parseInt(resize.get('width'), 10);
 527              if (inside) {
 528                  //Called from inside the resize callback
 529                  height = resize._cache.height;
 530                  width = resize._cache.width;
 531              }
 532  
 533              //Get the top, right, bottom and left positions
 534              var region = Dom.getRegion(this.get('element'));
 535              //Get the element we are working on
 536              var el = resize.getWrapEl();
 537  
 538              //Get the xy position of it
 539              var xy = Dom.getXY(el);
 540  
 541              //Set left to x minus left
 542              var left = xy[0] - region.left;
 543  
 544              //Set right to right minus x minus width
 545              var right = region.right - xy[0] - width;
 546  
 547              //Set top to y minus top
 548              var top = xy[1] - region.top;
 549  
 550              //Set bottom to bottom minus y minus height
 551              var bottom = region.bottom - xy[1] - height;
 552  
 553              if (top < 0) {
 554                  top = 0;
 555              }
 556              
 557              resize.dd.setXConstraint(left, right); 
 558              resize.dd.setYConstraint(top, bottom);
 559  
 560              return {
 561                  top: top,
 562                  right: right,
 563                  bottom: bottom,
 564                  left: left
 565              };
 566  
 567              
 568              
 569          },
 570          /**
 571          * @method getCropCoords
 572          * @description Returns the coordinates needed to crop the image
 573          * @return {Object} The top, left, height, width and image url of the image being cropped
 574          */
 575          getCropCoords: function() {
 576              var coords = {
 577                  top: parseInt(this._resize.getWrapEl().style.top, 10),
 578                  left: parseInt(this._resize.getWrapEl().style.left, 10),
 579                  height: this._resize._cache.height,
 580                  width: this._resize._cache.width,
 581                  image: this._image
 582              };
 583              return coords;
 584          },
 585          /**
 586          * @method reset
 587          * @description Resets the crop element back to it's original position
 588          * @return {<a href="YAHOO.widget.ImageCropper.html">YAHOO.widget.ImageCropper</a>} The ImageCropper instance
 589          */
 590          reset: function() {
 591              this._resize.resize(null, this.get('initHeight'), this.get('initWidth'), 0, 0, true);
 592              this._resizeEl.style.top = this.get('initialXY')[1] + 'px';
 593              this._resizeEl.style.left = this.get('initialXY')[0] + 'px';
 594              this._syncBackgroundPosition();
 595              return this;
 596          },
 597  
 598          /**
 599          * @method getEl
 600          * @description Get the HTML reference for the image element.
 601          * @return {HTMLElement} The image element
 602          */      
 603          getEl: function() {
 604              return this.get('element');
 605          },
 606          /**
 607          * @method getResizeEl
 608          * @description Get the HTML reference for the resize element.
 609          * @return {HTMLElement} The resize element
 610          */      
 611          getResizeEl: function() {
 612              return this._resizeEl;
 613          },
 614          /**
 615          * @method getWrapEl
 616          * @description Get the HTML reference for the wrap element.
 617          * @return {HTMLElement} The wrap element
 618          */      
 619          getWrapEl: function() {
 620              return this._wrap;
 621          },
 622  
 623          /**
 624          * @method getMaskEl
 625          * @description Get the HTML reference for the mask element.
 626          * @return {HTMLElement} The mask element
 627          */      
 628          getMaskEl: function() {
 629              return this._mask;
 630          },
 631  
 632          /**
 633          * @method getResizeMaskEl
 634          * @description Get the HTML reference for the resizable object's mask element.
 635          * @return {HTMLElement} The resize objects mask element.
 636          */      
 637          getResizeMaskEl: function() {
 638              return this._resizeMaskEl;
 639          },
 640  
 641          /**
 642          * @method getResizeObject
 643          * @description Get the Resize Utility object.
 644          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 645          */      
 646          getResizeObject: function() {
 647              return this._resize;
 648          },
 649  
 650          /** 
 651          * @private
 652          * @method init
 653          * @description The ImageCropper class's initialization method
 654          */        
 655          init: function(p_oElement, p_oAttributes) {
 656              Crop.superclass.init.call(this, p_oElement, p_oAttributes);
 657  
 658              var id = p_oElement;
 659  
 660              if (!Lang.isString(id)) {
 661                  if (id.tagName && (id.tagName.toLowerCase() == 'img')) {
 662                      id = Dom.generateId(id);                    
 663                  } else {
 664                      return false;
 665                  }
 666              } else {
 667                  var el = Dom.get(id);
 668                  if (el.tagName && el.tagName.toLowerCase() == 'img') {
 669                      //All good
 670                  } else {
 671                      return false;
 672                  }
 673              }
 674              
 675  
 676  
 677              Crop._instances[id] = this;
 678              this._createWrap();
 679              this._createMask();
 680              this._createResize();
 681              this._setConstraints();
 682  
 683          },
 684          /**
 685          * @private
 686          * @method initAttributes
 687          * @description Initializes all of the configuration attributes used to create a croppable element.
 688          * @param {Object} attr Object literal specifying a set of 
 689          * configuration attributes used to create the widget.
 690          */      
 691  
 692          initAttributes: function(attr) {
 693              Crop.superclass.initAttributes.call(this, attr);
 694  
 695              /**
 696              * @attribute initialXY
 697              * @description Array of the XY position that we need to set the crop element to when we build it. Defaults to [10, 10]
 698              * @type Array
 699              */
 700              this.setAttributeConfig('initialXY', {
 701                  validator: YAHOO.lang.isArray,
 702                  value: attr.initialXY || [10, 10]
 703              });
 704              /**
 705              * @attribute keyTick
 706              * @description The pixel tick for the arrow keys, defaults to 1
 707              * @type Number
 708              */
 709              this.setAttributeConfig('keyTick', {
 710                  validator: YAHOO.lang.isNumber,
 711                  value: attr.keyTick || 1
 712              });
 713  
 714              /**
 715              * @attribute shiftKeyTick
 716              * @description The pixel tick for shift + the arrow keys, defaults to 10
 717              * @type Number
 718              */
 719              this.setAttributeConfig('shiftKeyTick', {
 720                  validator: YAHOO.lang.isNumber,
 721                  value: attr.shiftKeyTick || 10
 722              });
 723  
 724              /**
 725              * @attribute useKeys
 726              * @description Should we use the Arrow keys to position the crop element, defaults to true
 727              * @type Boolean
 728              */
 729              this.setAttributeConfig('useKeys', {
 730                  validator: YAHOO.lang.isBoolean,
 731                  value: ((attr.useKeys === false) ? false : true)
 732              });
 733  
 734              /**
 735              * @attribute status
 736              * @description Show the Resize Utility status, defaults to true
 737              * @type Boolean
 738              */
 739              this.setAttributeConfig('status', {
 740                  validator: YAHOO.lang.isBoolean,
 741                  value: ((attr.status === false) ? false : true),
 742                  method: function(status) {
 743                      if (this._resize) {
 744                          this._resize.set('status', status);
 745                      }
 746                  }
 747              });
 748  
 749              /**
 750              * @attribute minHeight
 751              * @description MinHeight of the crop area, default 50
 752              * @type Number
 753              */
 754              this.setAttributeConfig('minHeight', {
 755                  validator: YAHOO.lang.isNumber,
 756                  value: attr.minHeight || 50,
 757                  method: function(h) {
 758                      if (this._resize) {
 759                          this._resize.set('minHeight', h);
 760                      }
 761                  }
 762              });
 763  
 764              /**
 765              * @attribute minWidth
 766              * @description MinWidth of the crop area, default 50.
 767              * @type Number
 768              */
 769              this.setAttributeConfig('minWidth', {
 770                  validator: YAHOO.lang.isNumber,
 771                  value: attr.minWidth || 50,
 772                  method: function(w) {
 773                      if (this._resize) {
 774                          this._resize.set('minWidth', w);
 775                      }
 776                  }
 777              });
 778  
 779              /**
 780              * @attribute ratio
 781              * @description Set the ratio config option of the Resize Utlility, default false
 782              * @type Boolean
 783              */
 784              this.setAttributeConfig('ratio', {
 785                  validator: YAHOO.lang.isBoolean,
 786                  value: attr.ratio || false,
 787                  method: function(r) {
 788                      if (this._resize) {
 789                          this._resize.set('ratio', r);
 790                      }
 791                  }
 792              });
 793  
 794              /**
 795              * @attribute ratio
 796              * @description Set the autoRatio config option of the Resize Utlility, default true
 797              * @type Boolean
 798              */
 799              this.setAttributeConfig('autoRatio', {
 800                  validator: YAHOO.lang.isBoolean,
 801                  value: ((attr.autoRatio === false) ? false : true),
 802                  method: function(a) {
 803                      if (this._resize) {
 804                          this._resize.set('autoRatio', a);
 805                      }
 806                  }
 807              });
 808  
 809              /**
 810              * @attribute initHeight
 811              * @description Set the initlal height of the crop area, defaults to 1/4 of the image height
 812              * @type Number
 813              */
 814              this.setAttributeConfig('initHeight', {
 815                  writeOnce: true,
 816                  validator: YAHOO.lang.isNumber,
 817                  value: attr.initHeight || (this.get('element').height / 4)
 818              });
 819  
 820              /**
 821              * @attribute initWidth
 822              * @description Set the initlal width of the crop area, defaults to 1/4 of the image width
 823              * @type Number
 824              */
 825              this.setAttributeConfig('initWidth', {
 826                  validator: YAHOO.lang.isNumber,
 827                  writeOnce: true,
 828                  value: attr.initWidth || (this.get('element').width / 4)
 829              });
 830  
 831          },
 832          /**
 833          * @method destroy
 834          * @description Destroys the ImageCropper object and all of it's elements & listeners.
 835          */        
 836          destroy: function() {
 837              this._resize.destroy();
 838              this._resizeEl.parentNode.removeChild(this._resizeEl);
 839              this._mask.parentNode.removeChild(this._mask);
 840              Event.purgeElement(this._wrap);
 841              this._wrap.parentNode.replaceChild(this.get('element'), this._wrap);
 842              
 843              //Brutal Object Destroy
 844              for (var i in this) {
 845                  if (Lang.hasOwnProperty(this, i)) {
 846                      this[i] = null;
 847                  }
 848              }
 849                         
 850          },
 851          /**
 852          * @method toString
 853          * @description Returns a string representing the ImageCropper Object.
 854          * @return {String}
 855          */        
 856          toString: function() {
 857              if (this.get) {
 858                  return 'ImageCropper (#' + this.get('id') + ')';
 859              }
 860              return 'Image Cropper';
 861          }
 862      });
 863  
 864      YAHOO.widget.ImageCropper = Crop;
 865  
 866  /**
 867  * @event dragEvent
 868  * @description Fires when the DragDrop dragEvent
 869  * @type YAHOO.util.CustomEvent
 870  */
 871  /**
 872  * @event startResizeEvent
 873  * @description Fires when when a resize action is started.
 874  * @type YAHOO.util.CustomEvent
 875  */
 876  /**
 877  * @event resizeEvent
 878  * @description Fires on every element resize.
 879  * @type YAHOO.util.CustomEvent
 880  */
 881  /**
 882  * @event moveEvent
 883  * @description Fires on every element move. Inside these methods: _handleKeyPress, _handleDragEvent, _handleResizeEvent
 884  * @type YAHOO.util.CustomEvent
 885  */
 886  
 887  })();
 888  
 889  YAHOO.register("imagecropper", YAHOO.widget.ImageCropper, {version: "2.9.0", build: "2800"});
 890  
 891  }, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-event", "yui2-dragdrop", "yui2-element", "yui2-skin-sam-resize", "yui2-resize", "yui2-skin-sam-imagecropper"]});