[Summary view] [Print] [Text view]

   1  YUI.add('yui2-resize', 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>Makes an element resizable</p>
  11   * @namespace YAHOO.util
  12   * @requires yahoo, dom, dragdrop, element, event
  13   * @optional animation
  14   * @module resize
  15   */
  16  (function() {
  17  var D = YAHOO.util.Dom,
  18      Event = YAHOO.util.Event,
  19      Lang = YAHOO.lang;
  20  
  21      /**
  22       * @constructor
  23       * @class Resize
  24       * @extends YAHOO.util.Element
  25       * @description <p>Makes an element resizable</p>
  26       * @param {String/HTMLElement} el The element to make resizable.
  27       * @param {Object} attrs Object liternal containing configuration parameters.
  28      */
  29  
  30      var Resize = function(el, config) {
  31          var oConfig = {
  32              element: el,
  33              attributes: config || {}
  34          };
  35  
  36          Resize.superclass.constructor.call(this, oConfig.element, oConfig.attributes);    
  37      };
  38  
  39      /**
  40      * @private
  41      * @static
  42      * @property _instances
  43      * @description Internal hash table for all resize instances
  44      * @type Object
  45      */ 
  46      Resize._instances = {};
  47      /**
  48      * @static
  49      * @method getResizeById 
  50      * @description Get's a resize object by the HTML id of the element associated with the Resize object.
  51      * @return {Object} The Resize Object
  52      */ 
  53      Resize.getResizeById = function(id) {
  54          if (Resize._instances[id]) {
  55              return Resize._instances[id];
  56          }
  57          return false;
  58      };
  59  
  60      YAHOO.extend(Resize, YAHOO.util.Element, {
  61          /**
  62          * @private
  63          * @property CSS_RESIZE
  64          * @description Base CSS class name
  65          * @type String
  66          */ 
  67          CSS_RESIZE: 'yui-resize',
  68          /**
  69          * @private
  70          * @property CSS_DRAG
  71          * @description Class name added when dragging is enabled
  72          * @type String
  73          */ 
  74          CSS_DRAG: 'yui-draggable',
  75          /**
  76          * @private
  77          * @property CSS_HOVER
  78          * @description Class name used for hover only handles
  79          * @type String
  80          */ 
  81          CSS_HOVER: 'yui-resize-hover',
  82          /**
  83          * @private
  84          * @property CSS_PROXY
  85          * @description Class name given to the proxy element
  86          * @type String
  87          */ 
  88          CSS_PROXY: 'yui-resize-proxy',
  89          /**
  90          * @private
  91          * @property CSS_WRAP
  92          * @description Class name given to the wrap element
  93          * @type String
  94          */ 
  95          CSS_WRAP: 'yui-resize-wrap',
  96          /**
  97          * @private
  98          * @property CSS_KNOB
  99          * @description Class name used to make the knob style handles
 100          * @type String
 101          */ 
 102          CSS_KNOB: 'yui-resize-knob',
 103          /**
 104          * @private
 105          * @property CSS_HIDDEN
 106          * @description Class name given to the wrap element to make all handles hidden
 107          * @type String
 108          */ 
 109          CSS_HIDDEN: 'yui-resize-hidden',
 110          /**
 111          * @private
 112          * @property CSS_HANDLE
 113          * @description Class name given to all handles, used as a base for single handle names as well.. Handle "t" will get this.CSS_HANDLE + '-t' as well as this.CSS_HANDLE
 114          * @type String
 115          */ 
 116          CSS_HANDLE: 'yui-resize-handle',
 117          /**
 118          * @private
 119          * @property CSS_STATUS
 120          * @description Class name given to the status element
 121          * @type String
 122          */ 
 123          CSS_STATUS: 'yui-resize-status',
 124          /**
 125          * @private
 126          * @property CSS_GHOST
 127          * @description Class name given to the wrap element when the ghost property is active
 128          * @type String
 129          */ 
 130          CSS_GHOST: 'yui-resize-ghost',
 131          /**
 132          * @private
 133          * @property CSS_RESIZING
 134          * @description Class name given to the wrap element when a resize action is taking place.
 135          * @type String
 136          */ 
 137          CSS_RESIZING: 'yui-resize-resizing',
 138          /**
 139          * @private
 140          * @property _resizeEvent
 141          * @description The mouse event used to resize with
 142          * @type Event
 143          */ 
 144          _resizeEvent: null,
 145          /**
 146          * @private
 147          * @property dd
 148          * @description The <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instance used if draggable is true
 149          * @type Object
 150          */ 
 151          dd: null,
 152          /** 
 153          * @private
 154          * @property browser
 155          * @description A copy of the YAHOO.env.ua property
 156          * @type Object
 157          */
 158          browser: YAHOO.env.ua,
 159          /** 
 160          * @private
 161          * @property _locked
 162          * @description A flag to show if the resize is locked
 163          * @type Boolean
 164          */
 165          _locked: null,
 166          /** 
 167          * @private
 168          * @property _positioned
 169          * @description A flag to show if the element is absolutely positioned
 170          * @type Boolean
 171          */
 172          _positioned: null,
 173          /** 
 174          * @private
 175          * @property _dds
 176          * @description An Object containing references to all of the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instances used for the resize handles
 177          * @type Object
 178          */
 179          _dds: null,
 180          /** 
 181          * @private
 182          * @property _wrap
 183          * @description The HTML reference of the element wrapper
 184          * @type HTMLElement
 185          */
 186          _wrap: null,
 187          /** 
 188          * @private
 189          * @property _proxy
 190          * @description The HTML reference of the element proxy
 191          * @type HTMLElement
 192          */
 193          _proxy: null,
 194          /** 
 195          * @private
 196          * @property _handles
 197          * @description An object containing references to all of the resize handles.
 198          * @type Object
 199          */
 200          _handles: null,
 201          /** 
 202          * @private
 203          * @property _currentHandle
 204          * @description The string identifier of the currently active handle. e.g. 'r', 'br', 'tl'
 205          * @type String
 206          */
 207          _currentHandle: null,
 208          /** 
 209          * @private
 210          * @property _currentDD
 211          * @description A link to the currently active DD object
 212          * @type Object
 213          */
 214          _currentDD: null,
 215          /** 
 216          * @private
 217          * @property _cache
 218          * @description An lookup table containing key information for the element being resized. e.g. height, width, x position, y position, etc..
 219          * @type Object
 220          */
 221          _cache: null,
 222          /** 
 223          * @private
 224          * @property _active
 225          * @description Flag to show if the resize is active. Used for events.
 226          * @type Boolean
 227          */
 228          _active: null,
 229          /** 
 230          * @private
 231          * @method _createProxy
 232          * @description Creates the proxy element if the proxy config is true
 233          */
 234          _createProxy: function() {
 235              if (this.get('proxy')) {
 236                  this._proxy = document.createElement('div');
 237                  this._proxy.className = this.CSS_PROXY;
 238                  this._proxy.style.height = this.get('element').clientHeight + 'px';
 239                  this._proxy.style.width = this.get('element').clientWidth + 'px';
 240                  this._wrap.parentNode.appendChild(this._proxy);
 241              } else {
 242                  this.set('animate', false);
 243              }
 244          },
 245          /** 
 246          * @private
 247          * @method _createWrap
 248          * @description Creates the wrap element if the wrap config is true. It will auto wrap the following element types: img, textarea, input, iframe, select
 249          */
 250          _createWrap: function() {
 251              this._positioned = false;
 252              //Force wrap for elements that can't have children 
 253              if (this.get('wrap') === false) {
 254                  switch (this.get('element').tagName.toLowerCase()) {
 255                      case 'img':
 256                      case 'textarea':
 257                      case 'input':
 258                      case 'iframe':
 259                      case 'select':
 260                          this.set('wrap', true);
 261                          break;
 262                  }
 263              }
 264              if (this.get('wrap') === true) {
 265                  this._wrap = document.createElement('div');
 266                  this._wrap.id = this.get('element').id + '_wrap';
 267                  this._wrap.className = this.CSS_WRAP;
 268                  if (this.get('element').tagName.toLowerCase() == 'textarea') {
 269                      D.addClass(this._wrap, 'yui-resize-textarea');
 270                  }
 271                  D.setStyle(this._wrap, 'width', this.get('width') + 'px');
 272                  D.setStyle(this._wrap, 'height', this.get('height') + 'px');
 273                  D.setStyle(this._wrap, 'z-index', this.getStyle('z-index'));
 274                  this.setStyle('z-index', 0);
 275                  var pos = D.getStyle(this.get('element'), 'position');
 276                  D.setStyle(this._wrap, 'position', ((pos == 'static') ? 'relative' : pos));
 277                  D.setStyle(this._wrap, 'top', D.getStyle(this.get('element'), 'top'));
 278                  D.setStyle(this._wrap, 'left', D.getStyle(this.get('element'), 'left'));
 279                  if (D.getStyle(this.get('element'), 'position') == 'absolute') {
 280                      this._positioned = true;
 281                      D.setStyle(this.get('element'), 'position', 'relative');
 282                      D.setStyle(this.get('element'), 'top', '0');
 283                      D.setStyle(this.get('element'), 'left', '0');
 284                  }
 285                  var par = this.get('element').parentNode;
 286                  par.replaceChild(this._wrap, this.get('element'));
 287                  this._wrap.appendChild(this.get('element'));
 288              } else {
 289                  this._wrap = this.get('element');
 290                  if (D.getStyle(this._wrap, 'position') == 'absolute') {
 291                      this._positioned = true;
 292                  }
 293              }
 294              if (this.get('draggable')) {
 295                  this._setupDragDrop();
 296              }
 297              if (this.get('hover')) {
 298                  D.addClass(this._wrap, this.CSS_HOVER);
 299              }
 300              if (this.get('knobHandles')) {
 301                  D.addClass(this._wrap, this.CSS_KNOB);
 302              }
 303              if (this.get('hiddenHandles')) {
 304                  D.addClass(this._wrap, this.CSS_HIDDEN);
 305              }
 306              D.addClass(this._wrap, this.CSS_RESIZE);
 307          },
 308          /** 
 309          * @private
 310          * @method _setupDragDrop
 311          * @description Setup the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instance on the element
 312          */
 313          _setupDragDrop: function() {
 314              D.addClass(this._wrap, this.CSS_DRAG);
 315              this.dd = new YAHOO.util.DD(this._wrap, this.get('id') + '-resize', { dragOnly: true, useShim: this.get('useShim') });
 316              this.dd.on('dragEvent', function() {
 317                  this.fireEvent('dragEvent', arguments);
 318              }, this, true);
 319          },
 320          /** 
 321          * @private
 322          * @method _createHandles
 323          * @description Creates the handles as specified in the config
 324          */
 325          _createHandles: function() {
 326              this._handles = {};
 327              this._dds = {};
 328              var h = this.get('handles');
 329              for (var i = 0; i < h.length; i++) {
 330                  this._handles[h[i]] = document.createElement('div');
 331                  this._handles[h[i]].id = D.generateId(this._handles[h[i]]);
 332                  this._handles[h[i]].className = this.CSS_HANDLE + ' ' + this.CSS_HANDLE + '-' + h[i];
 333                  var k = document.createElement('div');
 334                  k.className = this.CSS_HANDLE + '-inner-' + h[i];
 335                  this._handles[h[i]].appendChild(k);
 336                  this._wrap.appendChild(this._handles[h[i]]);
 337                  Event.on(this._handles[h[i]], 'mouseover', this._handleMouseOver, this, true);
 338                  Event.on(this._handles[h[i]], 'mouseout', this._handleMouseOut, this, true);
 339                  this._dds[h[i]] = new YAHOO.util.DragDrop(this._handles[h[i]], this.get('id') + '-handle-' + h, { useShim: this.get('useShim') });
 340                  this._dds[h[i]].setPadding(15, 15, 15, 15);
 341                  this._dds[h[i]].on('startDragEvent', this._handleStartDrag, this._dds[h[i]], this);
 342                  this._dds[h[i]].on('mouseDownEvent', this._handleMouseDown, this._dds[h[i]], this);
 343              }
 344              this._status = document.createElement('span');
 345              this._status.className = this.CSS_STATUS;
 346              document.body.insertBefore(this._status, document.body.firstChild);
 347          },
 348          /** 
 349          * @private
 350          * @method _ieSelectFix
 351          * @description The function we use as the onselectstart handler when we start a drag in Internet Explorer
 352          */
 353          _ieSelectFix: function() {
 354              return false;
 355          },
 356          /** 
 357          * @private
 358          * @property _ieSelectBack
 359          * @description We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.
 360          */
 361          _ieSelectBack: null,
 362          /** 
 363          * @private
 364          * @method _setAutoRatio
 365          * @param {Event} ev A mouse event.
 366          * @description This method checks to see if the "autoRatio" config is set. If it is, we will check to see if the "Shift Key" is pressed. If so, we will set the config ratio to true.
 367          */
 368          _setAutoRatio: function(ev) {
 369              if (this.get('autoRatio')) {
 370                  if (ev && ev.shiftKey) {
 371                      //Shift Pressed
 372                      this.set('ratio', true);
 373                  } else {
 374                      this.set('ratio', this._configs.ratio._initialConfig.value);
 375                  }
 376              }
 377          },
 378          /** 
 379          * @private
 380          * @method _handleMouseDown
 381          * @param {Event} ev A mouse event.
 382          * @description This method preps the autoRatio on MouseDown.
 383          */
 384          _handleMouseDown: function(ev) {
 385              if (this._locked) {
 386                  return false;
 387              }
 388              if (D.getStyle(this._wrap, 'position') == 'absolute') {
 389                  this._positioned = true;
 390              }
 391              if (ev) {
 392                  this._setAutoRatio(ev);
 393              }
 394              if (this.browser.ie) {
 395                  this._ieSelectBack = document.body.onselectstart;
 396                  document.body.onselectstart = this._ieSelectFix;
 397              }
 398          },
 399          /** 
 400          * @private
 401          * @method _handleMouseOver
 402          * @param {Event} ev A mouse event.
 403          * @description Adds CSS class names to the handles
 404          */
 405          _handleMouseOver: function(ev) {
 406              if (this._locked) {
 407                  return false;
 408              }
 409              D.removeClass(this._wrap, this.CSS_RESIZE);
 410  
 411              if (this.get('hover')) {
 412                  D.removeClass(this._wrap, this.CSS_HOVER);
 413              }
 414              var tar = Event.getTarget(ev);
 415              if (!D.hasClass(tar, this.CSS_HANDLE)) {
 416                  tar = tar.parentNode;
 417              }
 418              if (D.hasClass(tar, this.CSS_HANDLE) && !this._active) {
 419                  D.addClass(tar, this.CSS_HANDLE + '-active');
 420                  for (var i in this._handles) {
 421                      if (Lang.hasOwnProperty(this._handles, i)) {
 422                          if (this._handles[i] == tar) {
 423                              D.addClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 424                              break;
 425                          }
 426                      }
 427                  }
 428              }
 429  
 430              D.addClass(this._wrap, this.CSS_RESIZE);
 431          },
 432          /** 
 433          * @private
 434          * @method _handleMouseOut
 435          * @param {Event} ev A mouse event.
 436          * @description Removes CSS class names to the handles
 437          */
 438          _handleMouseOut: function(ev) {
 439              D.removeClass(this._wrap, this.CSS_RESIZE);
 440              if (this.get('hover') && !this._active) {
 441                  D.addClass(this._wrap, this.CSS_HOVER);
 442              }
 443              var tar = Event.getTarget(ev);
 444              if (!D.hasClass(tar, this.CSS_HANDLE)) {
 445                  tar = tar.parentNode;
 446              }
 447              if (D.hasClass(tar, this.CSS_HANDLE) && !this._active) {
 448                  D.removeClass(tar, this.CSS_HANDLE + '-active');
 449                  for (var i in this._handles) {
 450                      if (Lang.hasOwnProperty(this._handles, i)) {
 451                          if (this._handles[i] == tar) {
 452                              D.removeClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 453                              break;
 454                          }
 455                      }
 456                  }
 457              }
 458              D.addClass(this._wrap, this.CSS_RESIZE);
 459          },
 460          /** 
 461          * @private
 462          * @method _handleStartDrag
 463          * @param {Object} args The args passed from the CustomEvent.
 464          * @param {Object} dd The <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> object we are working with.
 465          * @description Resizes the proxy, sets up the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> handlers, updates the status div and preps the cache
 466          */
 467          _handleStartDrag: function(args, dd) {
 468              var tar = dd.getDragEl();
 469              if (D.hasClass(tar, this.CSS_HANDLE)) {
 470                  if (D.getStyle(this._wrap, 'position') == 'absolute') {
 471                      this._positioned = true;
 472                  }
 473                  this._active = true;
 474                  this._currentDD = dd;
 475                  if (this._proxy) {
 476                      this._proxy.style.visibility = 'visible';
 477                      this._proxy.style.zIndex = '1000';
 478                      this._proxy.style.height = this.get('element').clientHeight + 'px';
 479                      this._proxy.style.width = this.get('element').clientWidth + 'px';
 480                  }
 481  
 482                  for (var i in this._handles) {
 483                      if (Lang.hasOwnProperty(this._handles, i)) {
 484                          if (this._handles[i] == tar) {
 485                              this._currentHandle = i;
 486                              var handle = '_handle_for_' + i;
 487                              D.addClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 488                              dd.on('dragEvent', this[handle], this, true);
 489                              dd.on('mouseUpEvent', this._handleMouseUp, this, true);
 490                              break;
 491                          }
 492                      }
 493                  }
 494  
 495  
 496                  D.addClass(tar, this.CSS_HANDLE + '-active');
 497  
 498                  if (this.get('proxy')) {
 499                      var xy = D.getXY(this.get('element'));
 500                      D.setXY(this._proxy, xy);
 501                      if (this.get('ghost')) {
 502                          this.addClass(this.CSS_GHOST);
 503                      }
 504                  }
 505                  D.addClass(this._wrap, this.CSS_RESIZING);
 506                  this._setCache();
 507                  this._updateStatus(this._cache.height, this._cache.width, this._cache.top, this._cache.left);
 508                  this.fireEvent('startResize', { type: 'startresize', target: this});
 509              }
 510          },
 511          /** 
 512          * @private
 513          * @method _setCache
 514          * @description Sets up the this._cache hash table.
 515          */
 516          _setCache: function() {
 517              this._cache.xy = D.getXY(this._wrap);
 518              D.setXY(this._wrap, this._cache.xy);
 519              this._cache.height = this.get('clientHeight');
 520              this._cache.width = this.get('clientWidth');
 521              this._cache.start.height = this._cache.height;
 522              this._cache.start.width = this._cache.width;
 523              this._cache.start.top = this._cache.xy[1];
 524              this._cache.start.left = this._cache.xy[0];
 525              this._cache.top = this._cache.xy[1];
 526              this._cache.left = this._cache.xy[0];
 527              this.set('height', this._cache.height, true);
 528              this.set('width', this._cache.width, true);
 529          },
 530          /** 
 531          * @private
 532          * @method _handleMouseUp
 533          * @param {Event} ev A mouse event.
 534          * @description Cleans up listeners, hides proxy element and removes class names.
 535          */
 536          _handleMouseUp: function(ev) {
 537              this._active = false;
 538  
 539              var handle = '_handle_for_' + this._currentHandle;
 540              this._currentDD.unsubscribe('dragEvent', this[handle], this, true);
 541              this._currentDD.unsubscribe('mouseUpEvent', this._handleMouseUp, this, true);
 542  
 543              if (this._proxy) {
 544                  this._proxy.style.visibility = 'hidden';
 545                  this._proxy.style.zIndex = '-1';
 546                  if (this.get('setSize')) {
 547                      this.resize(ev, this._cache.height, this._cache.width, this._cache.top, this._cache.left, true);
 548                  } else {
 549                      this.fireEvent('resize', { ev: 'resize', target: this, height: this._cache.height, width: this._cache.width, top: this._cache.top, left: this._cache.left });
 550                  }
 551  
 552                  if (this.get('ghost')) {
 553                      this.removeClass(this.CSS_GHOST);
 554                  }
 555              }
 556  
 557              if (this.get('hover')) {
 558                  D.addClass(this._wrap, this.CSS_HOVER);
 559              }
 560              if (this._status) {
 561                  D.setStyle(this._status, 'display', 'none');
 562              }
 563              if (this.browser.ie) {
 564                  document.body.onselectstart = this._ieSelectBack;
 565              }
 566  
 567              if (this.browser.ie) {
 568                  D.removeClass(this._wrap, this.CSS_RESIZE);
 569              }
 570  
 571              for (var i in this._handles) {
 572                  if (Lang.hasOwnProperty(this._handles, i)) {
 573                      D.removeClass(this._handles[i], this.CSS_HANDLE + '-active');
 574                  }
 575              }
 576              if (this.get('hover') && !this._active) {
 577                  D.addClass(this._wrap, this.CSS_HOVER);
 578              }
 579              D.removeClass(this._wrap, this.CSS_RESIZING);
 580  
 581              D.removeClass(this._handles[this._currentHandle], this.CSS_HANDLE + '-' + this._currentHandle + '-active');
 582              D.removeClass(this._handles[this._currentHandle], this.CSS_HANDLE + '-active');
 583  
 584              if (this.browser.ie) {
 585                  D.addClass(this._wrap, this.CSS_RESIZE);
 586              }
 587  
 588              this._resizeEvent = null;
 589              this._currentHandle = null;
 590              
 591              if (!this.get('animate')) {
 592                  this.set('height', this._cache.height, true);
 593                  this.set('width', this._cache.width, true);
 594              }
 595  
 596              this.fireEvent('endResize', { ev: 'endResize', target: this, height: this._cache.height, width: this._cache.width, top: this._cache.top, left: this._cache.left });
 597          },
 598          /** 
 599          * @private
 600          * @method _setRatio
 601          * @param {Number} h The height offset.
 602          * @param {Number} w The with offset.
 603          * @param {Number} t The top offset.
 604          * @param {Number} l The left offset.
 605          * @description Using the Height, Width, Top & Left, it recalcuates them based on the original element size.
 606          * @return {Array} The new Height, Width, Top & Left settings
 607          */
 608          _setRatio: function(h, w, t, l) {
 609              var oh = h, ow = w;
 610              if (this.get('ratio')) {
 611                  var orgH = this._cache.height,
 612                      orgW = this._cache.width,
 613                      nh = parseInt(this.get('height'), 10),
 614                      nw = parseInt(this.get('width'), 10),
 615                      maxH = this.get('maxHeight'),
 616                      minH = this.get('minHeight'),
 617                      maxW = this.get('maxWidth'),
 618                      minW = this.get('minWidth');
 619  
 620                  switch (this._currentHandle) {
 621                      case 'l':
 622                          h = nh * (w / nw);
 623                          h = Math.min(Math.max(minH, h), maxH);                        
 624                          w = nw * (h / nh);
 625                          t = (this._cache.start.top - (-((nh - h) / 2)));
 626                          l = (this._cache.start.left - (-((nw - w))));
 627                          break;
 628                      case 'r':
 629                          h = nh * (w / nw);
 630                          h = Math.min(Math.max(minH, h), maxH);                        
 631                          w = nw * (h / nh);
 632                          t = (this._cache.start.top - (-((nh - h) / 2)));
 633                          break;
 634                      case 't':
 635                          w = nw * (h / nh);
 636                          h = nh * (w / nw);
 637                          l = (this._cache.start.left - (-((nw - w) / 2)));
 638                          t = (this._cache.start.top - (-((nh - h))));
 639                          break;
 640                      case 'b':
 641                          w = nw * (h / nh);
 642                          h = nh * (w / nw);
 643                          l = (this._cache.start.left - (-((nw - w) / 2)));
 644                          break;
 645                      case 'bl':
 646                          h = nh * (w / nw);
 647                          w = nw * (h / nh);
 648                          l = (this._cache.start.left - (-((nw - w))));
 649                          break;
 650                      case 'br':
 651                          h = nh * (w / nw);
 652                          w = nw * (h / nh);
 653                          break;
 654                      case 'tl':
 655                          h = nh * (w / nw);
 656                          w = nw * (h / nh);
 657                          l = (this._cache.start.left - (-((nw - w))));
 658                          t = (this._cache.start.top - (-((nh - h))));
 659                          break;
 660                      case 'tr':
 661                          h = nh * (w / nw);
 662                          w = nw * (h / nh);
 663                          l = (this._cache.start.left);
 664                          t = (this._cache.start.top - (-((nh - h))));
 665                          break;
 666                  }
 667                  oh = this._checkHeight(h);
 668                  ow = this._checkWidth(w);
 669                  if ((oh != h) || (ow != w)) {
 670                      t = 0;
 671                      l = 0;
 672                      if (oh != h) {
 673                          ow = this._cache.width;
 674                      }
 675                      if (ow != w) {
 676                          oh = this._cache.height;
 677                      }
 678                  }
 679              }
 680              return [oh, ow, t, l];
 681          },
 682          /** 
 683          * @private
 684          * @method _updateStatus
 685          * @param {Number} h The new height setting.
 686          * @param {Number} w The new width setting.
 687          * @param {Number} t The new top setting.
 688          * @param {Number} l The new left setting.
 689          * @description Using the Height, Width, Top & Left, it updates the status element with the elements sizes.
 690          */
 691          _updateStatus: function(h, w, t, l) {
 692              if (this._resizeEvent && (!Lang.isString(this._resizeEvent))) {
 693                  h = ((h === 0) ? this._cache.start.height : h);
 694                  w = ((w === 0) ? this._cache.start.width : w);
 695                  var h1 = parseInt(this.get('height'), 10),
 696                      w1 = parseInt(this.get('width'), 10);
 697                  
 698                  if (isNaN(h1)) {
 699                      h1 = parseInt(h, 10);
 700                  }
 701                  if (isNaN(w1)) {
 702                      w1 = parseInt(w, 10);
 703                  }
 704                  var diffH = (parseInt(h, 10) - h1);
 705                  var diffW = (parseInt(w, 10) - w1);
 706                  this._cache.offsetHeight = diffH;
 707                  this._cache.offsetWidth = diffW;
 708                  if (this.get('status')) {
 709                      D.setStyle(this._status, 'display', 'inline');
 710                      //This will cause IE8 to crash if the status box is hidden..
 711                      this._status.innerHTML = '<strong>' + parseInt(h, 10) + ' x ' + parseInt(w, 10) + '</strong><em>' + ((diffH > 0) ? '+' : '') + diffH + ' x ' + ((diffW > 0) ? '+' : '') + diffW + '</em>';
 712                      D.setXY(this._status, [Event.getPageX(this._resizeEvent) + 12, Event.getPageY(this._resizeEvent) + 12]);
 713                  }
 714              }
 715          },
 716          /** 
 717          * @method lock
 718          * @description Lock the resize so it can't be resized
 719          * @param {Boolean} dd If the draggable config is set, lock it too
 720          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 721          */
 722          lock: function(dd) {
 723              this._locked = true;
 724              if (dd && this.dd) {
 725                  D.removeClass(this._wrap, 'yui-draggable');
 726                  this.dd.lock();
 727              }
 728              return this;
 729          },
 730          /** 
 731          * @method unlock
 732          * @description Unlock the resize so it can be resized
 733          * @param {Boolean} dd If the draggable config is set, unlock it too
 734          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 735          */
 736          unlock: function(dd) {
 737              this._locked = false;
 738              if (dd && this.dd) {
 739                  D.addClass(this._wrap, 'yui-draggable');
 740                  this.dd.unlock();
 741              }
 742              return this;
 743          },
 744          /** 
 745          * @method isLocked
 746          * @description Check the locked status of the resize instance
 747          * @return {Boolean}
 748          */
 749          isLocked: function() {
 750              return this._locked;
 751          },
 752          /** 
 753          * @method reset
 754          * @description Resets the element to is start state.
 755          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 756          */
 757          reset: function() {
 758              this.resize(null, this._cache.start.height, this._cache.start.width, this._cache.start.top, this._cache.start.left, true);
 759              return this;
 760          },
 761          /** 
 762          * @private
 763          * @method resize
 764          * @param {Event} ev The mouse event.
 765          * @param {Number} h The new height setting.
 766          * @param {Number} w The new width setting.
 767          * @param {Number} t The new top setting.
 768          * @param {Number} l The new left setting.
 769          * @param {Boolean} force Resize the element (used for proxy resize).
 770          * @param {Boolean} silent Don't fire the beforeResize Event.
 771          * @description Resizes the element, wrapper or proxy based on the data from the handlers.
 772          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 773          */
 774          resize: function(ev, h, w, t, l, force, silent) {
 775              if (this._locked) {
 776                  return false;
 777              }
 778              this._resizeEvent = ev;
 779              var el = this._wrap, anim = this.get('animate'), set = true;
 780              if (this._proxy && !force) {
 781                  el = this._proxy;
 782                  anim = false;
 783              }
 784              this._setAutoRatio(ev);
 785              if (this._positioned) {
 786                  if (this._proxy) {
 787                      t = this._cache.top - t;
 788                      l = this._cache.left - l;
 789                  }
 790              }
 791              
 792              
 793              var ratio = this._setRatio(h, w, t, l);
 794              h = parseInt(ratio[0], 10);
 795              w = parseInt(ratio[1], 10);
 796              t = parseInt(ratio[2], 10);
 797              l = parseInt(ratio[3], 10);
 798              
 799              if (t == 0) {
 800                  //No Offset, get from cache
 801                  t = D.getY(el);
 802              }
 803              if (l == 0) {
 804                  //No Offset, get from cache
 805                  l = D.getX(el);
 806              }
 807  
 808              
 809  
 810              if (this._positioned) {
 811                  if (this._proxy && force) {
 812                      if (!anim) {
 813                          el.style.top = this._proxy.style.top;
 814                          el.style.left = this._proxy.style.left;
 815                      } else {
 816                          t = this._proxy.style.top;
 817                          l = this._proxy.style.left;
 818                      }
 819                  } else {
 820                      if (!this.get('ratio') && !this._proxy) {
 821                          t = this._cache.top + -(t);
 822                          l = this._cache.left + -(l);
 823                      }
 824                      if (t) {
 825                          if (this.get('minY')) {
 826                              if (t < this.get('minY')) {
 827                                  t = this.get('minY');
 828                              }
 829                          }
 830                          if (this.get('maxY')) {
 831                              if (t > this.get('maxY')) {
 832                                  t = this.get('maxY');
 833                              }
 834                          }
 835                      }
 836                      if (l) {
 837                          if (this.get('minX')) {
 838                              if (l < this.get('minX')) {
 839                                  l = this.get('minX');
 840                              }
 841                          }
 842                          if (this.get('maxX')) {
 843                              if ((l + w) > this.get('maxX')) {
 844                                  l = (this.get('maxX') - w);
 845                              }
 846                          }
 847                      }
 848                  }
 849              }
 850              if (!silent) {
 851                  var beforeReturn = this.fireEvent('beforeResize', { ev: 'beforeResize', target: this, height: h, width: w, top: t, left: l });
 852                  if (beforeReturn === false) {
 853                      return false;
 854                  }
 855              }
 856  
 857              this._updateStatus(h, w, t, l);
 858  
 859  
 860              if (this._positioned) {
 861                  if (this._proxy && force) {
 862                      //Do nothing
 863                  } else {
 864                      if (t) {
 865                          D.setY(el, t);
 866                          this._cache.top = t;
 867                      }
 868                      if (l) {
 869                          D.setX(el, l);
 870                          this._cache.left = l;
 871                      }
 872                  }
 873              }
 874              if (h) {
 875                  if (!anim) {
 876                      set = true;
 877                      if (this._proxy && force) {
 878                          if (!this.get('setSize')) {
 879                              set = false;
 880                          }
 881                      }
 882                      if (set) {
 883                          el.style.height = h + 'px';
 884                      }
 885                      if ((this._proxy && force) || !this._proxy) {
 886                          if (this._wrap != this.get('element')) {
 887                              this.get('element').style.height = h + 'px';
 888                          }
 889                      }
 890                  }
 891                  this._cache.height = h;
 892              }
 893              if (w) {
 894                  this._cache.width = w;
 895                  if (!anim) {
 896                      set = true;
 897                      if (this._proxy && force) {
 898                          if (!this.get('setSize')) {
 899                              set = false;
 900                          }
 901                      }
 902                      if (set) {
 903                          el.style.width = w + 'px';
 904                      }
 905                      if ((this._proxy && force) || !this._proxy) {
 906                          if (this._wrap != this.get('element')) {
 907                              this.get('element').style.width = w + 'px';
 908                          }
 909                      }
 910                  }
 911              }
 912              if (anim) {
 913                  if (YAHOO.util.Anim) {
 914                      var _anim = new YAHOO.util.Anim(el, {
 915                          height: {
 916                              to: this._cache.height
 917                          },
 918                          width: {
 919                              to: this._cache.width
 920                          }
 921                      }, this.get('animateDuration'), this.get('animateEasing'));
 922                      if (this._positioned) {
 923                          if (t) {
 924                              _anim.attributes.top = {
 925                                  to: parseInt(t, 10)
 926                              };
 927                          }
 928                          if (l) {
 929                              _anim.attributes.left = {
 930                                  to: parseInt(l, 10)
 931                              };
 932                          }
 933                      }
 934  
 935                      if (this._wrap != this.get('element')) {
 936                          _anim.onTween.subscribe(function() {
 937                              this.get('element').style.height = el.style.height;
 938                              this.get('element').style.width = el.style.width;
 939                          }, this, true);
 940                      }
 941  
 942                      _anim.onComplete.subscribe(function() {
 943                          this.set('height', h);
 944                          this.set('width', w);
 945                          this.fireEvent('resize', { ev: 'resize', target: this, height: h, width: w, top: t, left: l });
 946                      }, this, true);
 947                      _anim.animate();
 948  
 949                  }
 950              } else {
 951                  if (this._proxy && !force) {
 952                      this.fireEvent('proxyResize', { ev: 'proxyresize', target: this, height: h, width: w, top: t, left: l });
 953                  } else {
 954                      this.fireEvent('resize', { ev: 'resize', target: this, height: h, width: w, top: t, left: l });
 955                  }
 956              }
 957              return this;
 958          },
 959          /** 
 960          * @private
 961          * @method _handle_for_br
 962          * @param {Object} args The arguments from the CustomEvent.
 963          * @description Handles the sizes for the Bottom Right handle.
 964          */
 965          _handle_for_br: function(args) {
 966              var newW = this._setWidth(args.e);
 967              var newH = this._setHeight(args.e);
 968              this.resize(args.e, newH, newW, 0, 0);
 969          },
 970          /** 
 971          * @private
 972          * @method _handle_for_bl
 973          * @param {Object} args The arguments from the CustomEvent.
 974          * @description Handles the sizes for the Bottom Left handle.
 975          */
 976          _handle_for_bl: function(args) {
 977              var newW = this._setWidth(args.e, true);
 978              var newH = this._setHeight(args.e);
 979              var l = (newW - this._cache.width);
 980              this.resize(args.e, newH, newW, 0, l);
 981          },
 982          /** 
 983          * @private
 984          * @method _handle_for_tl
 985          * @param {Object} args The arguments from the CustomEvent.
 986          * @description Handles the sizes for the Top Left handle.
 987          */
 988          _handle_for_tl: function(args) {
 989              var newW = this._setWidth(args.e, true);
 990              var newH = this._setHeight(args.e, true);
 991              var t = (newH - this._cache.height);
 992              var l = (newW - this._cache.width);
 993              this.resize(args.e, newH, newW, t, l);
 994          },
 995          /** 
 996          * @private
 997          * @method _handle_for_tr
 998          * @param {Object} args The arguments from the CustomEvent.
 999          * @description Handles the sizes for the Top Right handle.
1000          */
1001          _handle_for_tr: function(args) {
1002              var newW = this._setWidth(args.e);
1003              var newH = this._setHeight(args.e, true);
1004              var t = (newH - this._cache.height);
1005              this.resize(args.e, newH, newW, t, 0);
1006          },
1007          /** 
1008          * @private
1009          * @method _handle_for_r
1010          * @param {Object} args The arguments from the CustomEvent.
1011          * @description Handles the sizes for the Right handle.
1012          */
1013          _handle_for_r: function(args) {
1014              this._dds.r.setYConstraint(0,0);
1015              var newW = this._setWidth(args.e);
1016              this.resize(args.e, 0, newW, 0, 0);
1017          },
1018          /** 
1019          * @private
1020          * @method _handle_for_l
1021          * @param {Object} args The arguments from the CustomEvent.
1022          * @description Handles the sizes for the Left handle.
1023          */
1024          _handle_for_l: function(args) {
1025              this._dds.l.setYConstraint(0,0);
1026              var newW = this._setWidth(args.e, true);
1027              var l = (newW - this._cache.width);
1028              this.resize(args.e, 0, newW, 0, l);
1029          },
1030          /** 
1031          * @private
1032          * @method _handle_for_b
1033          * @param {Object} args The arguments from the CustomEvent.
1034          * @description Handles the sizes for the Bottom handle.
1035          */
1036          _handle_for_b: function(args) {
1037              this._dds.b.setXConstraint(0,0);
1038              var newH = this._setHeight(args.e);
1039              this.resize(args.e, newH, 0, 0, 0);
1040          },
1041          /** 
1042          * @private
1043          * @method _handle_for_t
1044          * @param {Object} args The arguments from the CustomEvent.
1045          * @description Handles the sizes for the Top handle.
1046          */
1047          _handle_for_t: function(args) {
1048              this._dds.t.setXConstraint(0,0);
1049              var newH = this._setHeight(args.e, true);
1050              var t = (newH - this._cache.height);
1051              this.resize(args.e, newH, 0, t, 0);
1052          },
1053          /** 
1054          * @private
1055          * @method _setWidth
1056          * @param {Event} ev The mouse event.
1057          * @param {Boolean} flip Argument to determine the direction of the movement.
1058          * @description Calculates the width based on the mouse event.
1059          * @return {Number} The new value
1060          */
1061          _setWidth: function(ev, flip) {
1062              var xy = this._cache.xy[0],
1063                  w = this._cache.width,
1064                  x = Event.getPageX(ev),
1065                  nw = (x - xy);
1066  
1067                  if (flip) {
1068                      nw = (xy - x) + parseInt(this.get('width'), 10);
1069                  }
1070                  
1071                  nw = this._snapTick(nw, this.get('xTicks'));
1072                  nw = this._checkWidth(nw);
1073              return nw;
1074          },
1075          /** 
1076          * @private
1077          * @method _checkWidth
1078          * @param {Number} w The width to check.
1079          * @description Checks the value passed against the maxWidth and minWidth.
1080          * @return {Number} the new value
1081          */
1082          _checkWidth: function(w) {
1083              if (this.get('minWidth')) {
1084                  if (w <= this.get('minWidth')) {
1085                      w = this.get('minWidth');
1086                  }
1087              }
1088              if (this.get('maxWidth')) {
1089                  if (w >= this.get('maxWidth')) {
1090                      w = this.get('maxWidth');
1091                  }
1092              }
1093              return w;
1094          },
1095          /** 
1096          * @private
1097          * @method _checkHeight
1098          * @param {Number} h The height to check.
1099          * @description Checks the value passed against the maxHeight and minHeight.
1100          * @return {Number} The new value
1101          */
1102          _checkHeight: function(h) {
1103              if (this.get('minHeight')) {
1104                  if (h <= this.get('minHeight')) {
1105                      h = this.get('minHeight');
1106                  }
1107              }
1108              if (this.get('maxHeight')) {
1109                  if (h >= this.get('maxHeight')) {
1110                      h = this.get('maxHeight');
1111                  }
1112              }
1113              return h;
1114          },
1115          /** 
1116          * @private
1117          * @method _setHeight
1118          * @param {Event} ev The mouse event.
1119          * @param {Boolean} flip Argument to determine the direction of the movement.
1120          * @description Calculated the height based on the mouse event.
1121          * @return {Number} The new value
1122          */
1123          _setHeight: function(ev, flip) {
1124              var xy = this._cache.xy[1],
1125                  h = this._cache.height,
1126                  y = Event.getPageY(ev),
1127                  nh = (y - xy);
1128  
1129                  if (flip) {
1130                      nh = (xy - y) + parseInt(this.get('height'), 10);
1131                  }
1132                  nh = this._snapTick(nh, this.get('yTicks'));
1133                  nh = this._checkHeight(nh);
1134                  
1135              return nh;
1136          },
1137          /** 
1138          * @private
1139          * @method _snapTick
1140          * @param {Number} size The size to tick against.
1141          * @param {Number} pix The tick pixels.
1142          * @description Adjusts the number based on the ticks used.
1143          * @return {Number} the new snapped position
1144          */
1145          _snapTick: function(size, pix) {
1146              if (!size || !pix) {
1147                  return size;
1148              }
1149              var _s = size;
1150              var _x = size % pix;
1151              if (_x > 0) {
1152                  if (_x > (pix / 2)) {
1153                      _s = size + (pix - _x);
1154                  } else {
1155                      _s = size - _x;
1156                  }
1157              }
1158              return _s;
1159          },
1160          /** 
1161          * @private
1162          * @method init
1163          * @description The Resize class's initialization method
1164          */        
1165          init: function(p_oElement, p_oAttributes) {
1166              this._locked = false;
1167              this._cache = {
1168                  xy: [],
1169                  height: 0,
1170                  width: 0,
1171                  top: 0,
1172                  left: 0,
1173                  offsetHeight: 0,
1174                  offsetWidth: 0,
1175                  start: {
1176                      height: 0,
1177                      width: 0,
1178                      top: 0,
1179                      left: 0
1180                  }
1181              };
1182  
1183              Resize.superclass.init.call(this, p_oElement, p_oAttributes);
1184  
1185              this.set('setSize', this.get('setSize'));
1186  
1187              if (p_oAttributes.height) {
1188                  this.set('height', parseInt(p_oAttributes.height, 10));
1189              } else {
1190                  var h = this.getStyle('height');
1191                  if (h == 'auto') {
1192                      this.set('height', parseInt(this.get('element').offsetHeight, 10));
1193                  }
1194              }
1195              if (p_oAttributes.width) {
1196                  this.set('width', parseInt(p_oAttributes.width, 10));
1197              } else {
1198                  var w = this.getStyle('width');
1199                  if (w == 'auto') {
1200                      this.set('width', parseInt(this.get('element').offsetWidth, 10));
1201                  }
1202              }
1203              
1204              var id = p_oElement;
1205              if (!Lang.isString(id)) {
1206                  id = D.generateId(id);
1207              }
1208              Resize._instances[id] = this;
1209  
1210              this._active = false;
1211              
1212              this._createWrap();
1213              this._createProxy();
1214              this._createHandles();
1215  
1216          },
1217          /**
1218          * @method getProxyEl
1219          * @description Get the HTML reference for the proxy, returns null if no proxy.
1220          * @return {HTMLElement} The proxy element
1221          */      
1222          getProxyEl: function() {
1223              return this._proxy;
1224          },
1225          /**
1226          * @method getWrapEl
1227          * @description Get the HTML reference for the wrap element, returns the current element if not wrapped.
1228          * @return {HTMLElement} The wrap element
1229          */      
1230          getWrapEl: function() {
1231              return this._wrap;
1232          },
1233          /**
1234          * @method getStatusEl
1235          * @description Get the HTML reference for the status element.
1236          * @return {HTMLElement} The status element
1237          */      
1238          getStatusEl: function() {
1239              return this._status;
1240          },
1241          /**
1242          * @method getActiveHandleEl
1243          * @description Get the HTML reference for the currently active resize handle.
1244          * @return {HTMLElement} The handle element that is active
1245          */      
1246          getActiveHandleEl: function() {
1247              return this._handles[this._currentHandle];
1248          },
1249          /**
1250          * @method isActive
1251          * @description Returns true or false if a resize operation is currently active on the element.
1252          * @return {Boolean}
1253          */      
1254          isActive: function() {
1255              return ((this._active) ? true : false);
1256          },
1257          /**
1258          * @private
1259          * @method initAttributes
1260          * @description Initializes all of the configuration attributes used to create a resizable element.
1261          * @param {Object} attr Object literal specifying a set of 
1262          * configuration attributes used to create the utility.
1263          */      
1264          initAttributes: function(attr) {
1265              Resize.superclass.initAttributes.call(this, attr);
1266  
1267              /**
1268              * @attribute useShim
1269              * @description This setting will be passed to the DragDrop instances on the resize handles and for the draggable property.
1270              * This property should be used if you want the resize handles to work over iframe and other elements.
1271              * @type Boolean
1272              */
1273              this.setAttributeConfig('useShim', {
1274                  value: ((attr.useShim === true) ? true : false),
1275                  validator: YAHOO.lang.isBoolean,
1276                  method: function(u) {
1277                      for (var i in this._dds) {
1278                          if (Lang.hasOwnProperty(this._dds, i)) {
1279                              this._dds[i].useShim = u;
1280                          }
1281                      }
1282                      if (this.dd) {
1283                          this.dd.useShim = u;
1284                      }
1285                  }
1286              });
1287              /**
1288              * @attribute setSize
1289              * @description Set the size of the resized element, if set to false the element will not be auto resized,
1290              * the resize event will contain the dimensions so the end user can resize it on their own.
1291              * This setting will only work with proxy set to true and animate set to false.
1292              * @type Boolean
1293              */
1294              this.setAttributeConfig('setSize', {
1295                  value: ((attr.setSize === false) ? false : true),
1296                  validator: YAHOO.lang.isBoolean
1297              });
1298  
1299              /**
1300              * @attribute wrap
1301              * @description Should we wrap the element
1302              * @type Boolean
1303              */
1304              this.setAttributeConfig('wrap', {
1305                  writeOnce: true,
1306                  validator: YAHOO.lang.isBoolean,
1307                  value: attr.wrap || false
1308              });
1309  
1310              /**
1311              * @attribute handles
1312              * @description The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'. Defaults to: ['r', 'b', 'br'].
1313              * Can use a shortcut of All. Note: 8 way resizing should be done on an element that is absolutely positioned.
1314              * @type Array
1315              */
1316              this.setAttributeConfig('handles', {
1317                  writeOnce: true,
1318                  value: attr.handles || ['r', 'b', 'br'],
1319                  validator: function(handles) {
1320                      if (Lang.isString(handles) && handles.toLowerCase() == 'all') {
1321                          handles = ['t', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'];
1322                      }
1323                      if (!Lang.isArray(handles)) {
1324                          handles = handles.replace(/, /g, ',');
1325                          handles = handles.split(',');
1326                      }
1327                      this._configs.handles.value = handles;
1328                  }
1329              });
1330  
1331              /**
1332              * @attribute width
1333              * @description The width of the element
1334              * @type Number
1335              */
1336              this.setAttributeConfig('width', {
1337                  value: attr.width || parseInt(this.getStyle('width'), 10),
1338                  validator: YAHOO.lang.isNumber,
1339                  method: function(width) {
1340                      width = parseInt(width, 10);
1341                      if (width > 0) {
1342                          if (this.get('setSize')) {
1343                              this.setStyle('width', width + 'px');
1344                          }
1345                          this._cache.width = width;
1346                          this._configs.width.value = width;
1347                      }
1348                  }
1349              });
1350  
1351              /**
1352              * @attribute height
1353              * @description The height of the element
1354              * @type Number
1355              */
1356              this.setAttributeConfig('height', {
1357                  value: attr.height || parseInt(this.getStyle('height'), 10),
1358                  validator: YAHOO.lang.isNumber,
1359                  method: function(height) {
1360                      height = parseInt(height, 10);
1361                      if (height > 0) {
1362                          if (this.get('setSize')) {
1363                              this.setStyle('height', height + 'px');
1364                          }
1365                          this._cache.height = height;
1366                          this._configs.height.value = height;
1367                      }
1368                  }
1369              });
1370  
1371              /**
1372              * @attribute minWidth
1373              * @description The minimum width of the element
1374              * @type Number
1375              */
1376              this.setAttributeConfig('minWidth', {
1377                  value: attr.minWidth || 15,
1378                  validator: YAHOO.lang.isNumber
1379              });
1380  
1381              /**
1382              * @attribute minHeight
1383              * @description The minimum height of the element
1384              * @type Number
1385              */
1386              this.setAttributeConfig('minHeight', {
1387                  value: attr.minHeight || 15,
1388                  validator: YAHOO.lang.isNumber
1389              });
1390  
1391              /**
1392              * @attribute maxWidth
1393              * @description The maximum width of the element
1394              * @type Number
1395              */
1396              this.setAttributeConfig('maxWidth', {
1397                  value: attr.maxWidth || 10000,
1398                  validator: YAHOO.lang.isNumber
1399              });
1400  
1401              /**
1402              * @attribute maxHeight
1403              * @description The maximum height of the element
1404              * @type Number
1405              */
1406              this.setAttributeConfig('maxHeight', {
1407                  value: attr.maxHeight || 10000,
1408                  validator: YAHOO.lang.isNumber
1409              });
1410  
1411              /**
1412              * @attribute minY
1413              * @description The minimum y coord of the element
1414              * @type Number
1415              */
1416              this.setAttributeConfig('minY', {
1417                  value: attr.minY || false
1418              });
1419  
1420              /**
1421              * @attribute minX
1422              * @description The minimum x coord of the element
1423              * @type Number
1424              */
1425              this.setAttributeConfig('minX', {
1426                  value: attr.minX || false
1427              });
1428              /**
1429              * @attribute maxY
1430              * @description The max y coord of the element
1431              * @type Number
1432              */
1433              this.setAttributeConfig('maxY', {
1434                  value: attr.maxY || false
1435              });
1436  
1437              /**
1438              * @attribute maxX
1439              * @description The max x coord of the element
1440              * @type Number
1441              */
1442              this.setAttributeConfig('maxX', {
1443                  value: attr.maxX || false
1444              });
1445  
1446              /**
1447              * @attribute animate
1448              * @description Should be use animation to resize the element (can only be used if we use proxy).
1449              * @type Boolean
1450              */
1451              this.setAttributeConfig('animate', {
1452                  value: attr.animate || false,
1453                  validator: function(value) {
1454                      var ret = true;
1455                      if (!YAHOO.util.Anim) {
1456                          ret = false;
1457                      }
1458                      return ret;
1459                  }               
1460              });
1461  
1462              /**
1463              * @attribute animateEasing
1464              * @description The Easing to apply to the animation.
1465              * @type Object
1466              */
1467              this.setAttributeConfig('animateEasing', {
1468                  value: attr.animateEasing || function() {
1469                      var easing = false;
1470                      if (YAHOO.util.Easing && YAHOO.util.Easing.easeOut) {
1471                          easing = YAHOO.util.Easing.easeOut;
1472                      }
1473                      return easing;
1474                  }()
1475              });
1476  
1477              /**
1478              * @attribute animateDuration
1479              * @description The Duration to apply to the animation.
1480              * @type Number
1481              */
1482              this.setAttributeConfig('animateDuration', {
1483                  value: attr.animateDuration || 0.5
1484              });
1485  
1486              /**
1487              * @attribute proxy
1488              * @description Resize a proxy element instead of the real element.
1489              * @type Boolean
1490              */
1491              this.setAttributeConfig('proxy', {
1492                  value: attr.proxy || false,
1493                  validator: YAHOO.lang.isBoolean
1494              });
1495  
1496              /**
1497              * @attribute ratio
1498              * @description Maintain the element's ratio when resizing.
1499              * @type Boolean
1500              */
1501              this.setAttributeConfig('ratio', {
1502                  value: attr.ratio || false,
1503                  validator: YAHOO.lang.isBoolean
1504              });
1505  
1506              /**
1507              * @attribute ghost
1508              * @description Apply an opacity filter to the element being resized (only works with proxy).
1509              * @type Boolean
1510              */
1511              this.setAttributeConfig('ghost', {
1512                  value: attr.ghost || false,
1513                  validator: YAHOO.lang.isBoolean
1514              });
1515  
1516              /**
1517              * @attribute draggable
1518              * @description A convienence method to make the element draggable
1519              * @type Boolean
1520              */
1521              this.setAttributeConfig('draggable', {
1522                  value: attr.draggable || false,
1523                  validator: YAHOO.lang.isBoolean,
1524                  method: function(dd) {
1525                      if (dd && this._wrap && !this.dd) {
1526                          this._setupDragDrop();
1527                      } else {
1528                          if (this.dd) {
1529                              if (dd) {
1530                                  //activating an old DD instance..
1531                                  D.addClass(this._wrap, this.CSS_DRAG);
1532                                  this.dd.DDM.regDragDrop(this.dd, "default");
1533                              } else {
1534                                  D.removeClass(this._wrap, this.CSS_DRAG);
1535                                  this.dd.unreg();
1536                              }
1537                          }
1538                      }
1539                  }
1540              });
1541  
1542              /**
1543              * @attribute hover
1544              * @description Only show the handles when they are being moused over.
1545              * @type Boolean
1546              */
1547              this.setAttributeConfig('hover', {
1548                  value: attr.hover || false,
1549                  validator: YAHOO.lang.isBoolean
1550              });
1551  
1552              /**
1553              * @attribute hiddenHandles
1554              * @description Don't show the handles, just use the cursor to the user.
1555              * @type Boolean
1556              */
1557              this.setAttributeConfig('hiddenHandles', {
1558                  value: attr.hiddenHandles || false,
1559                  validator: YAHOO.lang.isBoolean
1560              });
1561  
1562              /**
1563              * @attribute knobHandles
1564              * @description Use the smaller handles, instead if the full size handles.
1565              * @type Boolean
1566              */
1567              this.setAttributeConfig('knobHandles', {
1568                  value: attr.knobHandles || false,
1569                  validator: YAHOO.lang.isBoolean
1570              });
1571  
1572              /**
1573              * @attribute xTicks
1574              * @description The number of x ticks to span the resize to.
1575              * @type Number or False
1576              */
1577              this.setAttributeConfig('xTicks', {
1578                  value: attr.xTicks || false
1579              });
1580  
1581              /**
1582              * @attribute yTicks
1583              * @description The number of y ticks to span the resize to.
1584              * @type Number or False
1585              */
1586              this.setAttributeConfig('yTicks', {
1587                  value: attr.yTicks || false
1588              });
1589  
1590              /**
1591              * @attribute status
1592              * @description Show the status (new size) of the resize.
1593              * @type Boolean
1594              */
1595              this.setAttributeConfig('status', {
1596                  value: attr.status || false,
1597                  validator: YAHOO.lang.isBoolean
1598              });
1599  
1600              /**
1601              * @attribute autoRatio
1602              * @description Using the shift key during a resize will toggle the ratio config.
1603              * @type Boolean
1604              */
1605              this.setAttributeConfig('autoRatio', {
1606                  value: attr.autoRatio || false,
1607                  validator: YAHOO.lang.isBoolean
1608              });
1609  
1610          },
1611          /**
1612          * @method destroy
1613          * @description Destroys the resize object and all of it's elements & listeners.
1614          */        
1615          destroy: function() {
1616              for (var h in this._handles) {
1617                  if (Lang.hasOwnProperty(this._handles, h)) {
1618                      Event.purgeElement(this._handles[h]);
1619                      this._handles[h].parentNode.removeChild(this._handles[h]);
1620                  }
1621              }
1622              if (this._proxy) {
1623                  this._proxy.parentNode.removeChild(this._proxy);
1624              }
1625              if (this._status) {
1626                  this._status.parentNode.removeChild(this._status);
1627              }
1628              if (this.dd) {
1629                  this.dd.unreg();
1630                  D.removeClass(this._wrap, this.CSS_DRAG);
1631              }
1632              if (this._wrap != this.get('element')) {
1633                  this.setStyle('position', (this._positioned ? 'absolute' : 'relative'));
1634                  this.setStyle('top', D.getStyle(this._wrap, 'top'));
1635                  this.setStyle('left',D.getStyle(this._wrap, 'left'));
1636                  this._wrap.parentNode.replaceChild(this.get('element'), this._wrap);
1637              }
1638              this.removeClass(this.CSS_RESIZE);
1639  
1640              delete YAHOO.util.Resize._instances[this.get('id')];
1641              //Brutal Object Destroy
1642              for (var i in this) {
1643                  if (Lang.hasOwnProperty(this, i)) {
1644                      this[i] = null;
1645                      delete this[i];
1646                  }
1647              }
1648          },
1649          /**
1650          * @method toString
1651          * @description Returns a string representing the Resize Object.
1652          * @return {String}
1653          */        
1654          toString: function() {
1655              if (this.get) {
1656                  return 'Resize (#' + this.get('id') + ')';
1657              }
1658              return 'Resize Utility';
1659          }
1660      });
1661  
1662      YAHOO.util.Resize = Resize;
1663   
1664  /**
1665  * @event dragEvent
1666  * @description Fires when the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> dragEvent is fired for the config option draggable.
1667  * @type YAHOO.util.CustomEvent
1668  */
1669  /**
1670  * @event startResize
1671  * @description Fires when a resize action is started.
1672  * @type YAHOO.util.CustomEvent
1673  */
1674  /**
1675  * @event endResize
1676  * @description Fires when the mouseUp event from the Drag Instance fires.
1677  * @type YAHOO.util.CustomEvent
1678  */
1679  /**
1680  * @event resize
1681  * @description Fires on every element resize (only fires once when used with proxy config setting).
1682  * @type YAHOO.util.CustomEvent
1683  */
1684  /**
1685  * @event beforeResize
1686  * @description Fires before every element resize after the size calculations, returning false will stop the resize.
1687  * @type YAHOO.util.CustomEvent
1688  */
1689  /**
1690  * @event proxyResize
1691  * @description Fires on every proxy resize (only fires when used with proxy config setting).
1692  * @type YAHOO.util.CustomEvent
1693  */
1694  
1695  })();
1696  
1697  YAHOO.register("resize", YAHOO.util.Resize, {version: "2.9.0", build: "2800"});
1698  
1699  }, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-event", "yui2-dragdrop", "yui2-element", "yui2-skin-sam-resize"], "optional": ["yui2-animation"]});