koha-tmpl/intranet-tmpl/prog/en/lib/yui/resize/resize.js

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