resources/lib/jquery.ui/jquery.ui.dialog.js

   1 /*!
   2  * jQuery UI Dialog 1.9.2
   3  * http://jqueryui.com
   4  *
   5  * Copyright 2012 jQuery Foundation and other contributors
   6  * Released under the MIT license.
   7  * http://jquery.org/license
   8  *
   9  * http://api.jqueryui.com/dialog/
  10  *
  11  * Depends:
  12  *      jquery.ui.core.js
  13  *      jquery.ui.widget.js
  14  *  jquery.ui.button.js
  15  *      jquery.ui.draggable.js
  16  *      jquery.ui.mouse.js
  17  *      jquery.ui.position.js
  18  *      jquery.ui.resizable.js
  19  */
  20 (function( $, undefined ) {
  21
  22 var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ",
  23         sizeRelatedOptions = {
  24                 buttons: true,
  25                 height: true,
  26                 maxHeight: true,
  27                 maxWidth: true,
  28                 minHeight: true,
  29                 minWidth: true,
  30                 width: true
  31         },
  32         resizableRelatedOptions = {
  33                 maxHeight: true,
  34                 maxWidth: true,
  35                 minHeight: true,
  36                 minWidth: true
  37         };
  38
  39 $.widget("ui.dialog", {
  40         version: "1.9.2",
  41         options: {
  42                 autoOpen: true,
  43                 buttons: {},
  44                 closeOnEscape: true,
  45                 closeText: "close",
  46                 dialogClass: "",
  47                 draggable: true,
  48                 hide: null,
  49                 height: "auto",
  50                 maxHeight: false,
  51                 maxWidth: false,
  52                 minHeight: 150,
  53                 minWidth: 150,
  54                 modal: false,
  55                 position: {
  56                         my: "center",
  57                         at: "center",
  58                         of: window,
  59                         collision: "fit",
  60                         // ensure that the titlebar is never outside the document
  61                         using: function( pos ) {
  62                                 var topOffset = $( this ).css( pos ).offset().top;
  63                                 if ( topOffset < 0 ) {
  64                                         $( this ).css( "top", pos.top - topOffset );
  65                                 }
  66                         }
  67                 },
  68                 resizable: true,
  69                 show: null,
  70                 stack: true,
  71                 title: "",
  72                 width: 300,
  73                 zIndex: 1000
  74         },
  75
  76         _create: function() {
  77                 this.originalTitle = this.element.attr( "title" );
  78                 // #5742 - .attr() might return a DOMElement
  79                 if ( typeof this.originalTitle !== "string" ) {
  80                         this.originalTitle = "";
  81                 }
  82                 this.oldPosition = {
  83                         parent: this.element.parent(),
  84                         index: this.element.parent().children().index( this.element )
  85                 };
  86                 this.options.title = this.options.title || this.originalTitle;
  87                 var that = this,
  88                         options = this.options,
  89
  90                         title = options.title || "&#160;",
  91                         uiDialog,
  92                         uiDialogTitlebar,
  93                         uiDialogTitlebarClose,
  94                         uiDialogTitle,
  95                         uiDialogButtonPane;
  96
  97                         uiDialog = ( this.uiDialog = $( "<div>" ) )
  98                                 .addClass( uiDialogClasses + options.dialogClass )
  99                                 .css({
 100                                         display: "none",
 101                                         outline: 0, // TODO: move to stylesheet
 102                                         zIndex: options.zIndex
 103                                 })
 104                                 // setting tabIndex makes the div focusable
 105                                 .attr( "tabIndex", -1)
 106                                 .keydown(function( event ) {
 107                                         if ( options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
 108                                                         event.keyCode === $.ui.keyCode.ESCAPE ) {
 109                                                 that.close( event );
 110                                                 event.preventDefault();
 111                                         }
 112                                 })
 113                                 .mousedown(function( event ) {
 114                                         that.moveToTop( false, event );
 115                                 })
 116                                 .appendTo( "body" );
 117
 118                         this.element
 119                                 .show()
 120                                 .removeAttr( "title" )
 121                                 .addClass( "ui-dialog-content ui-widget-content" )
 122                                 .appendTo( uiDialog );
 123
 124                         uiDialogTitlebar = ( this.uiDialogTitlebar = $( "<div>" ) )
 125                                 .addClass( "ui-dialog-titlebar  ui-widget-header  " +
 126                                         "ui-corner-all  ui-helper-clearfix" )
 127                                 .bind( "mousedown", function() {
 128                                         // Dialog isn't getting focus when dragging (#8063)
 129                                         uiDialog.focus();
 130                                 })
 131                                 .prependTo( uiDialog );
 132
 133                         uiDialogTitlebarClose = $( "<a href='#'></a>" )
 134                                 .addClass( "ui-dialog-titlebar-close  ui-corner-all" )
 135                                 .attr( "role", "button" )
 136                                 .click(function( event ) {
 137                                         event.preventDefault();
 138                                         that.close( event );
 139                                 })
 140                                 .appendTo( uiDialogTitlebar );
 141
 142                         ( this.uiDialogTitlebarCloseText = $( "<span>" ) )
 143                                 .addClass( "ui-icon ui-icon-closethick" )
 144                                 .text( options.closeText )
 145                                 .appendTo( uiDialogTitlebarClose );
 146
 147                         uiDialogTitle = $( "<span>" )
 148                                 .uniqueId()
 149                                 .addClass( "ui-dialog-title" )
 150                                 .html( title )
 151                                 .prependTo( uiDialogTitlebar );
 152
 153                         uiDialogButtonPane = ( this.uiDialogButtonPane = $( "<div>" ) )
 154                                 .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" );
 155
 156                         ( this.uiButtonSet = $( "<div>" ) )
 157                                 .addClass( "ui-dialog-buttonset" )
 158                                 .appendTo( uiDialogButtonPane );
 159
 160                 uiDialog.attr({
 161                         role: "dialog",
 162                         "aria-labelledby": uiDialogTitle.attr( "id" )
 163                 });
 164
 165                 uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection();
 166                 this._hoverable( uiDialogTitlebarClose );
 167                 this._focusable( uiDialogTitlebarClose );
 168
 169                 if ( options.draggable && $.fn.draggable ) {
 170                         this._makeDraggable();
 171                 }
 172                 if ( options.resizable && $.fn.resizable ) {
 173                         this._makeResizable();
 174                 }
 175
 176                 this._createButtons( options.buttons );
 177                 this._isOpen = false;
 178
 179                 if ( $.fn.bgiframe ) {
 180                         uiDialog.bgiframe();
 181                 }
 182
 183                 // prevent tabbing out of modal dialogs
 184                 this._on( uiDialog, { keydown: function( event ) {
 185                         if ( !options.modal || event.keyCode !== $.ui.keyCode.TAB ) {
 186                                 return;
 187                         }
 188
 189                         var tabbables = $( ":tabbable", uiDialog ),
 190                                 first = tabbables.filter( ":first" ),
 191                                 last  = tabbables.filter( ":last" );
 192
 193                         if ( event.target === last[0] && !event.shiftKey ) {
 194                                 first.focus( 1 );
 195                                 return false;
 196                         } else if ( event.target === first[0] && event.shiftKey ) {
 197                                 last.focus( 1 );
 198                                 return false;
 199                         }
 200                 }});
 201         },
 202
 203         _init: function() {
 204                 if ( this.options.autoOpen ) {
 205                         this.open();
 206                 }
 207         },
 208
 209         _destroy: function() {
 210                 var next,
 211                         oldPosition = this.oldPosition;
 212
 213                 if ( this.overlay ) {
 214                         this.overlay.destroy();
 215                 }
 216                 this.uiDialog.hide();
 217                 this.element
 218                         .removeClass( "ui-dialog-content ui-widget-content" )
 219                         .hide()
 220                         .appendTo( "body" );
 221                 this.uiDialog.remove();
 222
 223                 if ( this.originalTitle ) {
 224                         this.element.attr( "title", this.originalTitle );
 225                 }
 226
 227                 next = oldPosition.parent.children().eq( oldPosition.index );
 228                 // Don't try to place the dialog next to itself (#8613)
 229                 if ( next.length && next[ 0 ] !== this.element[ 0 ] ) {
 230                         next.before( this.element );
 231                 } else {
 232                         oldPosition.parent.append( this.element );
 233                 }
 234         },
 235
 236         widget: function() {
 237                 return this.uiDialog;
 238         },
 239
 240         close: function( event ) {
 241                 var that = this,
 242                         maxZ, thisZ;
 243
 244                 if ( !this._isOpen ) {
 245                         return;
 246                 }
 247
 248                 if ( false === this._trigger( "beforeClose", event ) ) {
 249                         return;
 250                 }
 251
 252                 this._isOpen = false;
 253
 254                 if ( this.overlay ) {
 255                         this.overlay.destroy();
 256                 }
 257
 258                 if ( this.options.hide ) {
 259                         this._hide( this.uiDialog, this.options.hide, function() {
 260                                 that._trigger( "close", event );
 261                         });
 262                 } else {
 263                         this.uiDialog.hide();
 264                         this._trigger( "close", event );
 265                 }
 266
 267                 $.ui.dialog.overlay.resize();
 268
 269                 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
 270                 if ( this.options.modal ) {
 271                         maxZ = 0;
 272                         $( ".ui-dialog" ).each(function() {
 273                                 if ( this !== that.uiDialog[0] ) {
 274                                         thisZ = $( this ).css( "z-index" );
 275                                         if ( !isNaN( thisZ ) ) {
 276                                                 maxZ = Math.max( maxZ, thisZ );
 277                                         }
 278                                 }
 279                         });
 280                         $.ui.dialog.maxZ = maxZ;
 281                 }
 282
 283                 return this;
 284         },
 285
 286         isOpen: function() {
 287                 return this._isOpen;
 288         },
 289
 290         // the force parameter allows us to move modal dialogs to their correct
 291         // position on open
 292         moveToTop: function( force, event ) {
 293                 var options = this.options,
 294                         saveScroll;
 295
 296                 if ( ( options.modal && !force ) ||
 297                                 ( !options.stack && !options.modal ) ) {
 298                         return this._trigger( "focus", event );
 299                 }
 300
 301                 if ( options.zIndex > $.ui.dialog.maxZ ) {
 302                         $.ui.dialog.maxZ = options.zIndex;
 303                 }
 304                 if ( this.overlay ) {
 305                         $.ui.dialog.maxZ += 1;
 306                         $.ui.dialog.overlay.maxZ = $.ui.dialog.maxZ;
 307                         this.overlay.$el.css( "z-index", $.ui.dialog.overlay.maxZ );
 308                 }
 309
 310                 // Save and then restore scroll
 311                 // Opera 9.5+ resets when parent z-index is changed.
 312                 // http://bugs.jqueryui.com/ticket/3193
 313                 saveScroll = {
 314                         scrollTop: this.element.scrollTop(),
 315                         scrollLeft: this.element.scrollLeft()
 316                 };
 317                 $.ui.dialog.maxZ += 1;
 318                 this.uiDialog.css( "z-index", $.ui.dialog.maxZ );
 319                 this.element.attr( saveScroll );
 320                 this._trigger( "focus", event );
 321
 322                 return this;
 323         },
 324
 325         open: function() {
 326                 if ( this._isOpen ) {
 327                         return;
 328                 }
 329
 330                 var hasFocus,
 331                         options = this.options,
 332                         uiDialog = this.uiDialog;
 333
 334                 this._size();
 335                 this._position( options.position );
 336                 uiDialog.show( options.show );
 337                 this.overlay = options.modal ? new $.ui.dialog.overlay( this ) : null;
 338                 this.moveToTop( true );
 339
 340                 // set focus to the first tabbable element in the content area or the first button
 341                 // if there are no tabbable elements, set focus on the dialog itself
 342                 hasFocus = this.element.find( ":tabbable" );
 343                 if ( !hasFocus.length ) {
 344                         hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
 345                         if ( !hasFocus.length ) {
 346                                 hasFocus = uiDialog;
 347                         }
 348                 }
 349                 hasFocus.eq( 0 ).focus();
 350
 351                 this._isOpen = true;
 352                 this._trigger( "open" );
 353
 354                 return this;
 355         },
 356
 357         _createButtons: function( buttons ) {
 358                 var that = this,
 359                         hasButtons = false;
 360
 361                 // if we already have a button pane, remove it
 362                 this.uiDialogButtonPane.remove();
 363                 this.uiButtonSet.empty();
 364
 365                 if ( typeof buttons === "object" && buttons !== null ) {
 366                         $.each( buttons, function() {
 367                                 return !(hasButtons = true);
 368                         });
 369                 }
 370                 if ( hasButtons ) {
 371                         $.each( buttons, function( name, props ) {
 372                                 var button, click;
 373                                 props = $.isFunction( props ) ?
 374                                         { click: props, text: name } :
 375                                         props;
 376                                 // Default to a non-submitting button
 377                                 props = $.extend( { type: "button" }, props );
 378                                 // Change the context for the click callback to be the main element
 379                                 click = props.click;
 380                                 props.click = function() {
 381                                         click.apply( that.element[0], arguments );
 382                                 };
 383                                 button = $( "<button></button>", props )
 384                                         .appendTo( that.uiButtonSet );
 385                                 if ( $.fn.button ) {
 386                                         button.button();
 387                                 }
 388                         });
 389                         this.uiDialog.addClass( "ui-dialog-buttons" );
 390                         this.uiDialogButtonPane.appendTo( this.uiDialog );
 391                 } else {
 392                         this.uiDialog.removeClass( "ui-dialog-buttons" );
 393                 }
 394         },
 395
 396         _makeDraggable: function() {
 397                 var that = this,
 398                         options = this.options;
 399
 400                 function filteredUi( ui ) {
 401                         return {
 402                                 position: ui.position,
 403                                 offset: ui.offset
 404                         };
 405                 }
 406
 407                 this.uiDialog.draggable({
 408                         cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
 409                         handle: ".ui-dialog-titlebar",
 410                         containment: "document",
 411                         start: function( event, ui ) {
 412                                 $( this )
 413                                         .addClass( "ui-dialog-dragging" );
 414                                 that._trigger( "dragStart", event, filteredUi( ui ) );
 415                         },
 416                         drag: function( event, ui ) {
 417                                 that._trigger( "drag", event, filteredUi( ui ) );
 418                         },
 419                         stop: function( event, ui ) {
 420                                 options.position = [
 421                                         ui.position.left - that.document.scrollLeft(),
 422                                         ui.position.top - that.document.scrollTop()
 423                                 ];
 424                                 $( this )
 425                                         .removeClass( "ui-dialog-dragging" );
 426                                 that._trigger( "dragStop", event, filteredUi( ui ) );
 427                                 $.ui.dialog.overlay.resize();
 428                         }
 429                 });
 430         },
 431
 432         _makeResizable: function( handles ) {
 433                 handles = (handles === undefined ? this.options.resizable : handles);
 434                 var that = this,
 435                         options = this.options,
 436                         // .ui-resizable has position: relative defined in the stylesheet
 437                         // but dialogs have to use absolute or fixed positioning
 438                         position = this.uiDialog.css( "position" ),
 439                         resizeHandles = typeof handles === 'string' ?
 440                                 handles :
 441                                 "n,e,s,w,se,sw,ne,nw";
 442
 443                 function filteredUi( ui ) {
 444                         return {
 445                                 originalPosition: ui.originalPosition,
 446                                 originalSize: ui.originalSize,
 447                                 position: ui.position,
 448                                 size: ui.size
 449                         };
 450                 }
 451
 452                 this.uiDialog.resizable({
 453                         cancel: ".ui-dialog-content",
 454                         containment: "document",
 455                         alsoResize: this.element,
 456                         maxWidth: options.maxWidth,
 457                         maxHeight: options.maxHeight,
 458                         minWidth: options.minWidth,
 459                         minHeight: this._minHeight(),
 460                         handles: resizeHandles,
 461                         start: function( event, ui ) {
 462                                 $( this ).addClass( "ui-dialog-resizing" );
 463                                 that._trigger( "resizeStart", event, filteredUi( ui ) );
 464                         },
 465                         resize: function( event, ui ) {
 466                                 that._trigger( "resize", event, filteredUi( ui ) );
 467                         },
 468                         stop: function( event, ui ) {
 469                                 $( this ).removeClass( "ui-dialog-resizing" );
 470                                 options.height = $( this ).height();
 471                                 options.width = $( this ).width();
 472                                 that._trigger( "resizeStop", event, filteredUi( ui ) );
 473                                 $.ui.dialog.overlay.resize();
 474                         }
 475                 })
 476                 .css( "position", position )
 477                 .find( ".ui-resizable-se" )
 478                         .addClass( "ui-icon ui-icon-grip-diagonal-se" );
 479         },
 480
 481         _minHeight: function() {
 482                 var options = this.options;
 483
 484                 if ( options.height === "auto" ) {
 485                         return options.minHeight;
 486                 } else {
 487                         return Math.min( options.minHeight, options.height );
 488                 }
 489         },
 490
 491         _position: function( position ) {
 492                 var myAt = [],
 493                         offset = [ 0, 0 ],
 494                         isVisible;
 495
 496                 if ( position ) {
 497                         // deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
 498         //              if (typeof position == 'string' || $.isArray(position)) {
 499         //                      myAt = $.isArray(position) ? position : position.split(' ');
 500
 501                         if ( typeof position === "string" || (typeof position === "object" && "0" in position ) ) {
 502                                 myAt = position.split ? position.split( " " ) : [ position[ 0 ], position[ 1 ] ];
 503                                 if ( myAt.length === 1 ) {
 504                                         myAt[ 1 ] = myAt[ 0 ];
 505                                 }
 506
 507                                 $.each( [ "left", "top" ], function( i, offsetPosition ) {
 508                                         if ( +myAt[ i ] === myAt[ i ] ) {
 509                                                 offset[ i ] = myAt[ i ];
 510                                                 myAt[ i ] = offsetPosition;
 511                                         }
 512                                 });
 513
 514                                 position = {
 515                                         my: myAt[0] + (offset[0] < 0 ? offset[0] : "+" + offset[0]) + " " +
 516                                                 myAt[1] + (offset[1] < 0 ? offset[1] : "+" + offset[1]),
 517                                         at: myAt.join( " " )
 518                                 };
 519                         }
 520
 521                         position = $.extend( {}, $.ui.dialog.prototype.options.position, position );
 522                 } else {
 523                         position = $.ui.dialog.prototype.options.position;
 524                 }
 525
 526                 // need to show the dialog to get the actual offset in the position plugin
 527                 isVisible = this.uiDialog.is( ":visible" );
 528                 if ( !isVisible ) {
 529                         this.uiDialog.show();
 530                 }
 531                 this.uiDialog.position( position );
 532                 if ( !isVisible ) {
 533                         this.uiDialog.hide();
 534                 }
 535         },
 536
 537         _setOptions: function( options ) {
 538                 var that = this,
 539                         resizableOptions = {},
 540                         resize = false;
 541
 542                 $.each( options, function( key, value ) {
 543                         that._setOption( key, value );
 544
 545                         if ( key in sizeRelatedOptions ) {
 546                                 resize = true;
 547                         }
 548                         if ( key in resizableRelatedOptions ) {
 549                                 resizableOptions[ key ] = value;
 550                         }
 551                 });
 552
 553                 if ( resize ) {
 554                         this._size();
 555                 }
 556                 if ( this.uiDialog.is( ":data(resizable)" ) ) {
 557                         this.uiDialog.resizable( "option", resizableOptions );
 558                 }
 559         },
 560
 561         _setOption: function( key, value ) {
 562                 var isDraggable, isResizable,
 563                         uiDialog = this.uiDialog;
 564
 565                 switch ( key ) {
 566                         case "buttons":
 567                                 this._createButtons( value );
 568                                 break;
 569                         case "closeText":
 570                                 // ensure that we always pass a string
 571                                 this.uiDialogTitlebarCloseText.text( "" + value );
 572                                 break;
 573                         case "dialogClass":
 574                                 uiDialog
 575                                         .removeClass( this.options.dialogClass )
 576                                         .addClass( uiDialogClasses + value );
 577                                 break;
 578                         case "disabled":
 579                                 if ( value ) {
 580                                         uiDialog.addClass( "ui-dialog-disabled" );
 581                                 } else {
 582                                         uiDialog.removeClass( "ui-dialog-disabled" );
 583                                 }
 584                                 break;
 585                         case "draggable":
 586                                 isDraggable = uiDialog.is( ":data(draggable)" );
 587                                 if ( isDraggable && !value ) {
 588                                         uiDialog.draggable( "destroy" );
 589                                 }
 590
 591                                 if ( !isDraggable && value ) {
 592                                         this._makeDraggable();
 593                                 }
 594                                 break;
 595                         case "position":
 596                                 this._position( value );
 597                                 break;
 598                         case "resizable":
 599                                 // currently resizable, becoming non-resizable
 600                                 isResizable = uiDialog.is( ":data(resizable)" );
 601                                 if ( isResizable && !value ) {
 602                                         uiDialog.resizable( "destroy" );
 603                                 }
 604
 605                                 // currently resizable, changing handles
 606                                 if ( isResizable && typeof value === "string" ) {
 607                                         uiDialog.resizable( "option", "handles", value );
 608                                 }
 609
 610                                 // currently non-resizable, becoming resizable
 611                                 if ( !isResizable && value !== false ) {
 612                                         this._makeResizable( value );
 613                                 }
 614                                 break;
 615                         case "title":
 616                                 // convert whatever was passed in o a string, for html() to not throw up
 617                                 $( ".ui-dialog-title", this.uiDialogTitlebar )
 618                                         .html( "" + ( value || "&#160;" ) );
 619                                 break;
 620                 }
 621
 622                 this._super( key, value );
 623         },
 624
 625         _size: function() {
 626                 /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
 627                  * divs will both have width and height set, so we need to reset them
 628                  */
 629                 var nonContentHeight, minContentHeight, autoHeight,
 630                         options = this.options,
 631                         isVisible = this.uiDialog.is( ":visible" );
 632
 633                 // reset content sizing
 634                 this.element.show().css({
 635                         width: "auto",
 636                         minHeight: 0,
 637                         height: 0
 638                 });
 639
 640                 if ( options.minWidth > options.width ) {
 641                         options.width = options.minWidth;
 642                 }
 643
 644                 // reset wrapper sizing
 645                 // determine the height of all the non-content elements
 646                 nonContentHeight = this.uiDialog.css({
 647                                 height: "auto",
 648                                 width: options.width
 649                         })
 650                         .outerHeight();
 651                 minContentHeight = Math.max( 0, options.minHeight - nonContentHeight );
 652
 653                 if ( options.height === "auto" ) {
 654                         // only needed for IE6 support
 655                         if ( $.support.minHeight ) {
 656                                 this.element.css({
 657                                         minHeight: minContentHeight,
 658                                         height: "auto"
 659                                 });
 660                         } else {
 661                                 this.uiDialog.show();
 662                                 autoHeight = this.element.css( "height", "auto" ).height();
 663                                 if ( !isVisible ) {
 664                                         this.uiDialog.hide();
 665                                 }
 666                                 this.element.height( Math.max( autoHeight, minContentHeight ) );
 667                         }
 668                 } else {
 669                         this.element.height( Math.max( options.height - nonContentHeight, 0 ) );
 670                 }
 671
 672                 if (this.uiDialog.is( ":data(resizable)" ) ) {
 673                         this.uiDialog.resizable( "option", "minHeight", this._minHeight() );
 674                 }
 675         }
 676 });
 677
 678 $.extend($.ui.dialog, {
 679         uuid: 0,
 680         maxZ: 0,
 681
 682         getTitleId: function($el) {
 683                 var id = $el.attr( "id" );
 684                 if ( !id ) {
 685                         this.uuid += 1;
 686                         id = this.uuid;
 687                 }
 688                 return "ui-dialog-title-" + id;
 689         },
 690
 691         overlay: function( dialog ) {
 692                 this.$el = $.ui.dialog.overlay.create( dialog );
 693         }
 694 });
 695
 696 $.extend( $.ui.dialog.overlay, {
 697         instances: [],
 698         // reuse old instances due to IE memory leak with alpha transparency (see #5185)
 699         oldInstances: [],
 700         maxZ: 0,
 701         events: $.map(
 702                 "focus,mousedown,mouseup,keydown,keypress,click".split( "," ),
 703                 function( event ) {
 704                         return event + ".dialog-overlay";
 705                 }
 706         ).join( " " ),
 707         create: function( dialog ) {
 708                 if ( this.instances.length === 0 ) {
 709                         // prevent use of anchors and inputs
 710                         // we use a setTimeout in case the overlay is created from an
 711                         // event that we're going to be cancelling (see #2804)
 712                         setTimeout(function() {
 713                                 // handle $(el).dialog().dialog('close') (see #4065)
 714                                 if ( $.ui.dialog.overlay.instances.length ) {
 715                                         $( document ).bind( $.ui.dialog.overlay.events, function( event ) {
 716                                                 // stop events if the z-index of the target is < the z-index of the overlay
 717                                                 // we cannot return true when we don't want to cancel the event (#3523)
 718                                                 if ( $( event.target ).zIndex() < $.ui.dialog.overlay.maxZ ) {
 719                                                         return false;
 720                                                 }
 721                                         });
 722                                 }
 723                         }, 1 );
 724
 725                         // handle window resize
 726                         $( window ).bind( "resize.dialog-overlay", $.ui.dialog.overlay.resize );
 727                 }
 728
 729                 var $el = ( this.oldInstances.pop() || $( "<div>" ).addClass( "ui-widget-overlay" ) );
 730
 731                 // allow closing by pressing the escape key
 732                 $( document ).bind( "keydown.dialog-overlay", function( event ) {
 733                         var instances = $.ui.dialog.overlay.instances;
 734                         // only react to the event if we're the top overlay
 735                         if ( instances.length !== 0 && instances[ instances.length - 1 ] === $el &&
 736                                 dialog.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
 737                                 event.keyCode === $.ui.keyCode.ESCAPE ) {
 738
 739                                 dialog.close( event );
 740                                 event.preventDefault();
 741                         }
 742                 });
 743
 744                 $el.appendTo( document.body ).css({
 745                         width: this.width(),
 746                         height: this.height()
 747                 });
 748
 749                 if ( $.fn.bgiframe ) {
 750                         $el.bgiframe();
 751                 }
 752
 753                 this.instances.push( $el );
 754                 return $el;
 755         },
 756
 757         destroy: function( $el ) {
 758                 var indexOf = $.inArray( $el, this.instances ),
 759                         maxZ = 0;
 760
 761                 if ( indexOf !== -1 ) {
 762                         this.oldInstances.push( this.instances.splice( indexOf, 1 )[ 0 ] );
 763                 }
 764
 765                 if ( this.instances.length === 0 ) {
 766                         $( [ document, window ] ).unbind( ".dialog-overlay" );
 767                 }
 768
 769                 $el.height( 0 ).width( 0 ).remove();
 770
 771                 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
 772                 $.each( this.instances, function() {
 773                         maxZ = Math.max( maxZ, this.css( "z-index" ) );
 774                 });
 775                 this.maxZ = maxZ;
 776         },
 777
 778         height: function() {
 779                 var scrollHeight,
 780                         offsetHeight;
 781                 // handle IE
 782                 if ( $.ui.ie ) {
 783                         scrollHeight = Math.max(
 784                                 document.documentElement.scrollHeight,
 785                                 document.body.scrollHeight
 786                         );
 787                         offsetHeight = Math.max(
 788                                 document.documentElement.offsetHeight,
 789                                 document.body.offsetHeight
 790                         );
 791
 792                         if ( scrollHeight < offsetHeight ) {
 793                                 return $( window ).height() + "px";
 794                         } else {
 795                                 return scrollHeight + "px";
 796                         }
 797                 // handle "good" browsers
 798                 } else {
 799                         return $( document ).height() + "px";
 800                 }
 801         },
 802
 803         width: function() {
 804                 var scrollWidth,
 805                         offsetWidth;
 806                 // handle IE
 807                 if ( $.ui.ie ) {
 808                         scrollWidth = Math.max(
 809                                 document.documentElement.scrollWidth,
 810                                 document.body.scrollWidth
 811                         );
 812                         offsetWidth = Math.max(
 813                                 document.documentElement.offsetWidth,
 814                                 document.body.offsetWidth
 815                         );
 816
 817                         if ( scrollWidth < offsetWidth ) {
 818                                 return $( window ).width() + "px";
 819                         } else {
 820                                 return scrollWidth + "px";
 821                         }
 822                 // handle "good" browsers
 823                 } else {
 824                         return $( document ).width() + "px";
 825                 }
 826         },
 827
 828         resize: function() {
 829                 /* If the dialog is draggable and the user drags it past the
 830                  * right edge of the window, the document becomes wider so we
 831                  * need to stretch the overlay. If the user then drags the
 832                  * dialog back to the left, the document will become narrower,
 833                  * so we need to shrink the overlay to the appropriate size.
 834                  * This is handled by shrinking the overlay before setting it
 835                  * to the full document size.
 836                  */
 837                 var $overlays = $( [] );
 838                 $.each( $.ui.dialog.overlay.instances, function() {
 839                         $overlays = $overlays.add( this );
 840                 });
 841
 842                 $overlays.css({
 843                         width: 0,
 844                         height: 0
 845                 }).css({
 846                         width: $.ui.dialog.overlay.width(),
 847                         height: $.ui.dialog.overlay.height()
 848                 });
 849         }
 850 });
 851
 852 $.extend( $.ui.dialog.overlay.prototype, {
 853         destroy: function() {
 854                 $.ui.dialog.overlay.destroy( this.$el );
 855         }
 856 });
 857
 858 }( jQuery ) );