danielebarchiesi@0: /**
danielebarchiesi@0:  * @file
danielebarchiesi@0:  *
danielebarchiesi@0:  * Implement a modal form.
danielebarchiesi@0:  *
danielebarchiesi@0:  * @see modal.inc for documentation.
danielebarchiesi@0:  *
danielebarchiesi@0:  * This javascript relies on the CTools ajax responder.
danielebarchiesi@0:  */
danielebarchiesi@0: 
danielebarchiesi@0: (function ($) {
danielebarchiesi@0:   // Make sure our objects are defined.
danielebarchiesi@0:   Drupal.CTools = Drupal.CTools || {};
danielebarchiesi@0:   Drupal.CTools.Modal = Drupal.CTools.Modal || {};
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Display the modal
danielebarchiesi@0:    *
danielebarchiesi@0:    * @todo -- document the settings.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.show = function(choice) {
danielebarchiesi@0:     var opts = {};
danielebarchiesi@0: 
danielebarchiesi@0:     if (choice && typeof choice == 'string' && Drupal.settings[choice]) {
danielebarchiesi@0:       // This notation guarantees we are actually copying it.
danielebarchiesi@0:       $.extend(true, opts, Drupal.settings[choice]);
danielebarchiesi@0:     }
danielebarchiesi@0:     else if (choice) {
danielebarchiesi@0:       $.extend(true, opts, choice);
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     var defaults = {
danielebarchiesi@0:       modalTheme: 'CToolsModalDialog',
danielebarchiesi@0:       throbberTheme: 'CToolsModalThrobber',
danielebarchiesi@0:       animation: 'show',
danielebarchiesi@0:       animationSpeed: 'fast',
danielebarchiesi@0:       modalSize: {
danielebarchiesi@0:         type: 'scale',
danielebarchiesi@0:         width: .8,
danielebarchiesi@0:         height: .8,
danielebarchiesi@0:         addWidth: 0,
danielebarchiesi@0:         addHeight: 0,
danielebarchiesi@0:         // How much to remove from the inner content to make space for the
danielebarchiesi@0:         // theming.
danielebarchiesi@0:         contentRight: 25,
danielebarchiesi@0:         contentBottom: 45
danielebarchiesi@0:       },
danielebarchiesi@0:       modalOptions: {
danielebarchiesi@0:         opacity: .55,
danielebarchiesi@0:         background: '#fff'
danielebarchiesi@0:       }
danielebarchiesi@0:     };
danielebarchiesi@0: 
danielebarchiesi@0:     var settings = {};
danielebarchiesi@0:     $.extend(true, settings, defaults, Drupal.settings.CToolsModal, opts);
danielebarchiesi@0: 
danielebarchiesi@0:     if (Drupal.CTools.Modal.currentSettings && Drupal.CTools.Modal.currentSettings != settings) {
danielebarchiesi@0:       Drupal.CTools.Modal.modal.remove();
danielebarchiesi@0:       Drupal.CTools.Modal.modal = null;
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     Drupal.CTools.Modal.currentSettings = settings;
danielebarchiesi@0: 
danielebarchiesi@0:     var resize = function(e) {
danielebarchiesi@0:       // When creating the modal, it actually exists only in a theoretical
danielebarchiesi@0:       // place that is not in the DOM. But once the modal exists, it is in the
danielebarchiesi@0:       // DOM so the context must be set appropriately.
danielebarchiesi@0:       var context = e ? document : Drupal.CTools.Modal.modal;
danielebarchiesi@0: 
danielebarchiesi@0:       if (Drupal.CTools.Modal.currentSettings.modalSize.type == 'scale') {
danielebarchiesi@0:         var width = $(window).width() * Drupal.CTools.Modal.currentSettings.modalSize.width;
danielebarchiesi@0:         var height = $(window).height() * Drupal.CTools.Modal.currentSettings.modalSize.height;
danielebarchiesi@0:       }
danielebarchiesi@0:       else {
danielebarchiesi@0:         var width = Drupal.CTools.Modal.currentSettings.modalSize.width;
danielebarchiesi@0:         var height = Drupal.CTools.Modal.currentSettings.modalSize.height;
danielebarchiesi@0:       }
danielebarchiesi@0: 
danielebarchiesi@0:       // Use the additionol pixels for creating the width and height.
danielebarchiesi@0:       $('div.ctools-modal-content', context).css({
danielebarchiesi@0:         'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px',
danielebarchiesi@0:         'height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px'
danielebarchiesi@0:       });
danielebarchiesi@0:       $('div.ctools-modal-content .modal-content', context).css({
danielebarchiesi@0:         'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px',
danielebarchiesi@0:         'height': (height - Drupal.CTools.Modal.currentSettings.modalSize.contentBottom) + 'px'
danielebarchiesi@0:       });
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     if (!Drupal.CTools.Modal.modal) {
danielebarchiesi@0:       Drupal.CTools.Modal.modal = $(Drupal.theme(settings.modalTheme));
danielebarchiesi@0:       if (settings.modalSize.type == 'scale') {
danielebarchiesi@0:         $(window).bind('resize', resize);
danielebarchiesi@0:       }
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     resize();
danielebarchiesi@0: 
danielebarchiesi@0:     $('span.modal-title', Drupal.CTools.Modal.modal).html(Drupal.CTools.Modal.currentSettings.loadingText);
danielebarchiesi@0:     Drupal.CTools.Modal.modalContent(Drupal.CTools.Modal.modal, settings.modalOptions, settings.animation, settings.animationSpeed);
danielebarchiesi@0:     $('#modalContent .modal-content').html(Drupal.theme(settings.throbberTheme));
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Hide the modal
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.dismiss = function() {
danielebarchiesi@0:     if (Drupal.CTools.Modal.modal) {
danielebarchiesi@0:       Drupal.CTools.Modal.unmodalContent(Drupal.CTools.Modal.modal);
danielebarchiesi@0:     }
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Provide the HTML to create the modal dialog.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.theme.prototype.CToolsModalDialog = function () {
danielebarchiesi@0:     var html = ''
danielebarchiesi@0:     html += '  <div id="ctools-modal">'
danielebarchiesi@0:     html += '    <div class="ctools-modal-content">' // panels-modal-content
danielebarchiesi@0:     html += '      <div class="modal-header">';
danielebarchiesi@0:     html += '        <a class="close" href="#">';
danielebarchiesi@0:     html +=            Drupal.CTools.Modal.currentSettings.closeText + Drupal.CTools.Modal.currentSettings.closeImage;
danielebarchiesi@0:     html += '        </a>';
danielebarchiesi@0:     html += '        <span id="modal-title" class="modal-title">&nbsp;</span>';
danielebarchiesi@0:     html += '      </div>';
danielebarchiesi@0:     html += '      <div id="modal-content" class="modal-content">';
danielebarchiesi@0:     html += '      </div>';
danielebarchiesi@0:     html += '    </div>';
danielebarchiesi@0:     html += '  </div>';
danielebarchiesi@0: 
danielebarchiesi@0:     return html;
danielebarchiesi@0:   }
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Provide the HTML to create the throbber.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.theme.prototype.CToolsModalThrobber = function () {
danielebarchiesi@0:     var html = '';
danielebarchiesi@0:     html += '  <div id="modal-throbber">';
danielebarchiesi@0:     html += '    <div class="modal-throbber-wrapper">';
danielebarchiesi@0:     html +=        Drupal.CTools.Modal.currentSettings.throbber;
danielebarchiesi@0:     html += '    </div>';
danielebarchiesi@0:     html += '  </div>';
danielebarchiesi@0: 
danielebarchiesi@0:     return html;
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Figure out what settings string to use to display a modal.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.getSettings = function (object) {
danielebarchiesi@0:     var match = $(object).attr('class').match(/ctools-modal-(\S+)/);
danielebarchiesi@0:     if (match) {
danielebarchiesi@0:       return match[1];
danielebarchiesi@0:     }
danielebarchiesi@0:   }
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Click function for modals that can be cached.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.clickAjaxCacheLink = function () {
danielebarchiesi@0:     Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
danielebarchiesi@0:     return Drupal.CTools.AJAX.clickAJAXCacheLink.apply(this);
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Handler to prepare the modal for the response
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.clickAjaxLink = function () {
danielebarchiesi@0:     Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
danielebarchiesi@0:     return false;
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Submit responder to do an AJAX submit on all modal forms.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.submitAjaxForm = function(e) {
danielebarchiesi@0:     var $form = $(this);
danielebarchiesi@0:     var url = $form.attr('action');
danielebarchiesi@0: 
danielebarchiesi@0:     setTimeout(function() { Drupal.CTools.AJAX.ajaxSubmit($form, url); }, 1);
danielebarchiesi@0:     return false;
danielebarchiesi@0:   }
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Bind links that will open modals to the appropriate function.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.behaviors.ZZCToolsModal = {
danielebarchiesi@0:     attach: function(context) {
danielebarchiesi@0:       // Bind links
danielebarchiesi@0:       // Note that doing so in this order means that the two classes can be
danielebarchiesi@0:       // used together safely.
danielebarchiesi@0:       /*
danielebarchiesi@0:        * @todo remimplement the warm caching feature
danielebarchiesi@0:        $('a.ctools-use-modal-cache', context).once('ctools-use-modal', function() {
danielebarchiesi@0:          $(this).click(Drupal.CTools.Modal.clickAjaxCacheLink);
danielebarchiesi@0:          Drupal.CTools.AJAX.warmCache.apply(this);
danielebarchiesi@0:        });
danielebarchiesi@0:         */
danielebarchiesi@0: 
danielebarchiesi@0:       $('area.ctools-use-modal, a.ctools-use-modal', context).once('ctools-use-modal', function() {
danielebarchiesi@0:         var $this = $(this);
danielebarchiesi@0:         $this.click(Drupal.CTools.Modal.clickAjaxLink);
danielebarchiesi@0:         // Create a drupal ajax object
danielebarchiesi@0:         var element_settings = {};
danielebarchiesi@0:         if ($this.attr('href')) {
danielebarchiesi@0:           element_settings.url = $this.attr('href');
danielebarchiesi@0:           element_settings.event = 'click';
danielebarchiesi@0:           element_settings.progress = { type: 'throbber' };
danielebarchiesi@0:         }
danielebarchiesi@0:         var base = $this.attr('href');
danielebarchiesi@0:         Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
danielebarchiesi@0:       });
danielebarchiesi@0: 
danielebarchiesi@0:       // Bind buttons
danielebarchiesi@0:       $('input.ctools-use-modal, button.ctools-use-modal', context).once('ctools-use-modal', function() {
danielebarchiesi@0:         var $this = $(this);
danielebarchiesi@0:         $this.click(Drupal.CTools.Modal.clickAjaxLink);
danielebarchiesi@0:         var button = this;
danielebarchiesi@0:         var element_settings = {};
danielebarchiesi@0: 
danielebarchiesi@0:         // AJAX submits specified in this manner automatically submit to the
danielebarchiesi@0:         // normal form action.
danielebarchiesi@0:         element_settings.url = Drupal.CTools.Modal.findURL(this);
danielebarchiesi@0:         element_settings.event = 'click';
danielebarchiesi@0: 
danielebarchiesi@0:         var base = $this.attr('id');
danielebarchiesi@0:         Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
danielebarchiesi@0: 
danielebarchiesi@0:         // Make sure changes to settings are reflected in the URL.
danielebarchiesi@0:         $('.' + $(button).attr('id') + '-url').change(function() {
danielebarchiesi@0:           Drupal.ajax[base].options.url = Drupal.CTools.Modal.findURL(button);
danielebarchiesi@0:         });
danielebarchiesi@0:       });
danielebarchiesi@0: 
danielebarchiesi@0:       // Bind our custom event to the form submit
danielebarchiesi@0:       $('#modal-content form', context).once('ctools-use-modal', function() {
danielebarchiesi@0:         var $this = $(this);
danielebarchiesi@0:         var element_settings = {};
danielebarchiesi@0: 
danielebarchiesi@0:         element_settings.url = $this.attr('action');
danielebarchiesi@0:         element_settings.event = 'submit';
danielebarchiesi@0:         element_settings.progress = { 'type': 'throbber' }
danielebarchiesi@0:         var base = $this.attr('id');
danielebarchiesi@0: 
danielebarchiesi@0:         Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
danielebarchiesi@0:         Drupal.ajax[base].form = $this;
danielebarchiesi@0: 
danielebarchiesi@0:         $('input[type=submit], button', this).click(function(event) {
danielebarchiesi@0:           Drupal.ajax[base].element = this;
danielebarchiesi@0:           this.form.clk = this;
danielebarchiesi@0:           // An empty event means we were triggered via .click() and
danielebarchiesi@0:           // in jquery 1.4 this won't trigger a submit.
danielebarchiesi@0:           if (event.bubbles == undefined) {
danielebarchiesi@0:             $(this.form).trigger('submit');
danielebarchiesi@0:             return false;
danielebarchiesi@0:           }
danielebarchiesi@0:         });
danielebarchiesi@0:       });
danielebarchiesi@0: 
danielebarchiesi@0:       // Bind a click handler to allow elements with the 'ctools-close-modal'
danielebarchiesi@0:       // class to close the modal.
danielebarchiesi@0:       $('.ctools-close-modal', context).once('ctools-close-modal')
danielebarchiesi@0:         .click(function() {
danielebarchiesi@0:           Drupal.CTools.Modal.dismiss();
danielebarchiesi@0:           return false;
danielebarchiesi@0:         });
danielebarchiesi@0:     }
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0:   // The following are implementations of AJAX responder commands.
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * AJAX responder command to place HTML within the modal.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.modal_display = function(ajax, response, status) {
danielebarchiesi@0:     if ($('#modalContent').length == 0) {
danielebarchiesi@0:       Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(ajax.element));
danielebarchiesi@0:     }
danielebarchiesi@0:     $('#modal-title').html(response.title);
danielebarchiesi@0:     // Simulate an actual page load by scrolling to the top after adding the
danielebarchiesi@0:     // content. This is helpful for allowing users to see error messages at the
danielebarchiesi@0:     // top of a form, etc.
danielebarchiesi@0:     $('#modal-content').html(response.output).scrollTop(0);
danielebarchiesi@0:     Drupal.attachBehaviors();
danielebarchiesi@0:   }
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * AJAX responder command to dismiss the modal.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.modal_dismiss = function(command) {
danielebarchiesi@0:     Drupal.CTools.Modal.dismiss();
danielebarchiesi@0:     $('link.ctools-temporary-css').remove();
danielebarchiesi@0:   }
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Display loading
danielebarchiesi@0:    */
danielebarchiesi@0:   //Drupal.CTools.AJAX.commands.modal_loading = function(command) {
danielebarchiesi@0:   Drupal.CTools.Modal.modal_loading = function(command) {
danielebarchiesi@0:     Drupal.CTools.Modal.modal_display({
danielebarchiesi@0:       output: Drupal.theme(Drupal.CTools.Modal.currentSettings.throbberTheme),
danielebarchiesi@0:       title: Drupal.CTools.Modal.currentSettings.loadingText
danielebarchiesi@0:     });
danielebarchiesi@0:   }
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Find a URL for an AJAX button.
danielebarchiesi@0:    *
danielebarchiesi@0:    * The URL for this gadget will be composed of the values of items by
danielebarchiesi@0:    * taking the ID of this item and adding -url and looking for that
danielebarchiesi@0:    * class. They need to be in the form in order since we will
danielebarchiesi@0:    * concat them all together using '/'.
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.findURL = function(item) {
danielebarchiesi@0:     var url = '';
danielebarchiesi@0:     var url_class = '.' + $(item).attr('id') + '-url';
danielebarchiesi@0:     $(url_class).each(
danielebarchiesi@0:       function() {
danielebarchiesi@0:         var $this = $(this);
danielebarchiesi@0:         if (url && $this.val()) {
danielebarchiesi@0:           url += '/';
danielebarchiesi@0:         }
danielebarchiesi@0:         url += $this.val();
danielebarchiesi@0:       });
danielebarchiesi@0:     return url;
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * modalContent
danielebarchiesi@0:    * @param content string to display in the content box
danielebarchiesi@0:    * @param css obj of css attributes
danielebarchiesi@0:    * @param animation (fadeIn, slideDown, show)
danielebarchiesi@0:    * @param speed (valid animation speeds slow, medium, fast or # in ms)
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.modalContent = function(content, css, animation, speed) {
danielebarchiesi@0:     // If our animation isn't set, make it just show/pop
danielebarchiesi@0:     if (!animation) {
danielebarchiesi@0:       animation = 'show';
danielebarchiesi@0:     }
danielebarchiesi@0:     else {
danielebarchiesi@0:       // If our animation isn't "fadeIn" or "slideDown" then it always is show
danielebarchiesi@0:       if (animation != 'fadeIn' && animation != 'slideDown') {
danielebarchiesi@0:         animation = 'show';
danielebarchiesi@0:       }
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     if (!speed) {
danielebarchiesi@0:       speed = 'fast';
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     // Build our base attributes and allow them to be overriden
danielebarchiesi@0:     css = jQuery.extend({
danielebarchiesi@0:       position: 'absolute',
danielebarchiesi@0:       left: '0px',
danielebarchiesi@0:       margin: '0px',
danielebarchiesi@0:       background: '#000',
danielebarchiesi@0:       opacity: '.55'
danielebarchiesi@0:     }, css);
danielebarchiesi@0: 
danielebarchiesi@0:     // Add opacity handling for IE.
danielebarchiesi@0:     css.filter = 'alpha(opacity=' + (100 * css.opacity) + ')';
danielebarchiesi@0:     content.hide();
danielebarchiesi@0: 
danielebarchiesi@0:     // if we already ahve a modalContent, remove it
danielebarchiesi@0:     if ( $('#modalBackdrop')) $('#modalBackdrop').remove();
danielebarchiesi@0:     if ( $('#modalContent')) $('#modalContent').remove();
danielebarchiesi@0: 
danielebarchiesi@0:     // position code lifted from http://www.quirksmode.org/viewport/compatibility.html
danielebarchiesi@0:     if (self.pageYOffset) { // all except Explorer
danielebarchiesi@0:     var wt = self.pageYOffset;
danielebarchiesi@0:     } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
danielebarchiesi@0:       var wt = document.documentElement.scrollTop;
danielebarchiesi@0:     } else if (document.body) { // all other Explorers
danielebarchiesi@0:       var wt = document.body.scrollTop;
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     // Get our dimensions
danielebarchiesi@0: 
danielebarchiesi@0:     // Get the docHeight and (ugly hack) add 50 pixels to make sure we dont have a *visible* border below our div
danielebarchiesi@0:     var docHeight = $(document).height() + 50;
danielebarchiesi@0:     var docWidth = $(document).width();
danielebarchiesi@0:     var winHeight = $(window).height();
danielebarchiesi@0:     var winWidth = $(window).width();
danielebarchiesi@0:     if( docHeight < winHeight ) docHeight = winHeight;
danielebarchiesi@0: 
danielebarchiesi@0:     // Create our divs
danielebarchiesi@0:     $('body').append('<div id="modalBackdrop" style="z-index: 1000; display: none;"></div><div id="modalContent" style="z-index: 1001; position: absolute;">' + $(content).html() + '</div>');
danielebarchiesi@0: 
danielebarchiesi@0:     // Keyboard and focus event handler ensures focus stays on modal elements only
danielebarchiesi@0:     modalEventHandler = function( event ) {
danielebarchiesi@0:       target = null;
danielebarchiesi@0:       if ( event ) { //Mozilla
danielebarchiesi@0:         target = event.target;
danielebarchiesi@0:       } else { //IE
danielebarchiesi@0:         event = window.event;
danielebarchiesi@0:         target = event.srcElement;
danielebarchiesi@0:       }
danielebarchiesi@0: 
danielebarchiesi@0:       var parents = $(target).parents().get();
danielebarchiesi@0:       for (var i = 0; i < parents.length; ++i) {
danielebarchiesi@0:         var position = $(parents[i]).css('position');
danielebarchiesi@0:         if (position == 'absolute' || position == 'fixed') {
danielebarchiesi@0:           return true;
danielebarchiesi@0:         }
danielebarchiesi@0:       }
danielebarchiesi@0:       if( $(target).filter('*:visible').parents('#modalContent').size()) {
danielebarchiesi@0:         // allow the event only if target is a visible child node of #modalContent
danielebarchiesi@0:         return true;
danielebarchiesi@0:       }
danielebarchiesi@0:       if ( $('#modalContent')) $('#modalContent').get(0).focus();
danielebarchiesi@0:       return false;
danielebarchiesi@0:     };
danielebarchiesi@0:     $('body').bind( 'focus', modalEventHandler );
danielebarchiesi@0:     $('body').bind( 'keypress', modalEventHandler );
danielebarchiesi@0: 
danielebarchiesi@0:     // Create our content div, get the dimensions, and hide it
danielebarchiesi@0:     var modalContent = $('#modalContent').css('top','-1000px');
danielebarchiesi@0:     var mdcTop = wt + ( winHeight / 2 ) - (  modalContent.outerHeight() / 2);
danielebarchiesi@0:     var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
danielebarchiesi@0:     $('#modalBackdrop').css(css).css('top', 0).css('height', docHeight + 'px').css('width', docWidth + 'px').show();
danielebarchiesi@0:     modalContent.css({top: mdcTop + 'px', left: mdcLeft + 'px'}).hide()[animation](speed);
danielebarchiesi@0: 
danielebarchiesi@0:     // Bind a click for closing the modalContent
danielebarchiesi@0:     modalContentClose = function(){close(); return false;};
danielebarchiesi@0:     $('.close').bind('click', modalContentClose);
danielebarchiesi@0: 
danielebarchiesi@0:     // Bind a keypress on escape for closing the modalContent
danielebarchiesi@0:     modalEventEscapeCloseHandler = function(event) {
danielebarchiesi@0:       if (event.keyCode == 27) {
danielebarchiesi@0:         close();
danielebarchiesi@0:         return false;
danielebarchiesi@0:       }
danielebarchiesi@0:     };
danielebarchiesi@0: 
danielebarchiesi@0:     $(document).bind('keydown', modalEventEscapeCloseHandler);
danielebarchiesi@0: 
danielebarchiesi@0:     // Close the open modal content and backdrop
danielebarchiesi@0:     function close() {
danielebarchiesi@0:       // Unbind the events
danielebarchiesi@0:       $(window).unbind('resize',  modalContentResize);
danielebarchiesi@0:       $('body').unbind( 'focus', modalEventHandler);
danielebarchiesi@0:       $('body').unbind( 'keypress', modalEventHandler );
danielebarchiesi@0:       $('.close').unbind('click', modalContentClose);
danielebarchiesi@0:       $('body').unbind('keypress', modalEventEscapeCloseHandler);
danielebarchiesi@0:       $(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
danielebarchiesi@0: 
danielebarchiesi@0:       // Set our animation parameters and use them
danielebarchiesi@0:       if ( animation == 'fadeIn' ) animation = 'fadeOut';
danielebarchiesi@0:       if ( animation == 'slideDown' ) animation = 'slideUp';
danielebarchiesi@0:       if ( animation == 'show' ) animation = 'hide';
danielebarchiesi@0: 
danielebarchiesi@0:       // Close the content
danielebarchiesi@0:       modalContent.hide()[animation](speed);
danielebarchiesi@0: 
danielebarchiesi@0:       // Remove the content
danielebarchiesi@0:       $('#modalContent').remove();
danielebarchiesi@0:       $('#modalBackdrop').remove();
danielebarchiesi@0:     };
danielebarchiesi@0: 
danielebarchiesi@0:     // Move and resize the modalBackdrop and modalContent on resize of the window
danielebarchiesi@0:      modalContentResize = function(){
danielebarchiesi@0:       // Get our heights
danielebarchiesi@0:       var docHeight = $(document).height();
danielebarchiesi@0:       var docWidth = $(document).width();
danielebarchiesi@0:       var winHeight = $(window).height();
danielebarchiesi@0:       var winWidth = $(window).width();
danielebarchiesi@0:       if( docHeight < winHeight ) docHeight = winHeight;
danielebarchiesi@0: 
danielebarchiesi@0:       // Get where we should move content to
danielebarchiesi@0:       var modalContent = $('#modalContent');
danielebarchiesi@0:       var mdcTop = ( winHeight / 2 ) - (  modalContent.outerHeight() / 2);
danielebarchiesi@0:       var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
danielebarchiesi@0: 
danielebarchiesi@0:       // Apply the changes
danielebarchiesi@0:       $('#modalBackdrop').css('height', docHeight + 'px').css('width', docWidth + 'px').show();
danielebarchiesi@0:       modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').show();
danielebarchiesi@0:     };
danielebarchiesi@0:     $(window).bind('resize', modalContentResize);
danielebarchiesi@0: 
danielebarchiesi@0:     $('#modalContent').focus();
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * unmodalContent
danielebarchiesi@0:    * @param content (The jQuery object to remove)
danielebarchiesi@0:    * @param animation (fadeOut, slideUp, show)
danielebarchiesi@0:    * @param speed (valid animation speeds slow, medium, fast or # in ms)
danielebarchiesi@0:    */
danielebarchiesi@0:   Drupal.CTools.Modal.unmodalContent = function(content, animation, speed)
danielebarchiesi@0:   {
danielebarchiesi@0:     // If our animation isn't set, make it just show/pop
danielebarchiesi@0:     if (!animation) { var animation = 'show'; } else {
danielebarchiesi@0:       // If our animation isn't "fade" then it always is show
danielebarchiesi@0:       if (( animation != 'fadeOut' ) && ( animation != 'slideUp')) animation = 'show';
danielebarchiesi@0:     }
danielebarchiesi@0:     // Set a speed if we dont have one
danielebarchiesi@0:     if ( !speed ) var speed = 'fast';
danielebarchiesi@0: 
danielebarchiesi@0:     // Unbind the events we bound
danielebarchiesi@0:     $(window).unbind('resize', modalContentResize);
danielebarchiesi@0:     $('body').unbind('focus', modalEventHandler);
danielebarchiesi@0:     $('body').unbind('keypress', modalEventHandler);
danielebarchiesi@0:     $('.close').unbind('click', modalContentClose);
danielebarchiesi@0:     $(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
danielebarchiesi@0: 
danielebarchiesi@0:     // jQuery magic loop through the instances and run the animations or removal.
danielebarchiesi@0:     content.each(function(){
danielebarchiesi@0:       if ( animation == 'fade' ) {
danielebarchiesi@0:         $('#modalContent').fadeOut(speed, function() {
danielebarchiesi@0:           $('#modalBackdrop').fadeOut(speed, function() {
danielebarchiesi@0:             $(this).remove();
danielebarchiesi@0:           });
danielebarchiesi@0:           $(this).remove();
danielebarchiesi@0:         });
danielebarchiesi@0:       } else {
danielebarchiesi@0:         if ( animation == 'slide' ) {
danielebarchiesi@0:           $('#modalContent').slideUp(speed,function() {
danielebarchiesi@0:             $('#modalBackdrop').slideUp(speed, function() {
danielebarchiesi@0:               $(this).remove();
danielebarchiesi@0:             });
danielebarchiesi@0:             $(this).remove();
danielebarchiesi@0:           });
danielebarchiesi@0:         } else {
danielebarchiesi@0:           $('#modalContent').remove();
danielebarchiesi@0:           $('#modalBackdrop').remove();
danielebarchiesi@0:         }
danielebarchiesi@0:       }
danielebarchiesi@0:     });
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0: $(function() {
danielebarchiesi@0:   Drupal.ajax.prototype.commands.modal_display = Drupal.CTools.Modal.modal_display;
danielebarchiesi@0:   Drupal.ajax.prototype.commands.modal_dismiss = Drupal.CTools.Modal.modal_dismiss;
danielebarchiesi@0: });
danielebarchiesi@0: 
danielebarchiesi@0: })(jQuery);