// $Id: modal.js,v 1.15 2009/07/22 00:16:08 merlinofchaos Exp $
/**
 * @file 
 *
 * Implement a modal form.
 *
 * @see modal.inc for documentation.
 *
 * This javascript relies on the CTools ajax responder.
 */

// Make sure our objects are defined.
Drupal.CTools = Drupal.CTools || {};
Drupal.CTools.Modal = Drupal.CTools.Modal || {};

/**
 * Display the modal
 */
Drupal.CTools.Modal.show = function() {
  var resize = function(e) {
    // For reasons I do not understand, when creating the modal the context must be
    // Drupal.CTools.Modal.modal but otherwise the context must be more than that.
    var context = e ? document : Drupal.CTools.Modal.modal;
    $('div.ctools-modal-content', context).css({
      'width': $(window).width() * .6 - 25 + 'px'
      //'height': pageHeight[0] * .9 + 'px'
    });
    $('div.ctools-modal-content .modal-content', context).css({
      'width': ($(window).width() * .6 - 45) + 'px' 
      //'height': (pageHeight[0] * .9 - 35) + 'px'
    });
  };

  if (!Drupal.CTools.Modal.modal) {
    Drupal.CTools.Modal.modal = $(Drupal.theme('CToolsModalDialog'));
    $(window).bind('resize', resize);
  }

  resize();
  $('span.modal-title', Drupal.CTools.Modal.modal).html(Drupal.t('Loading...'));
  Drupal.CTools.Modal.modal.modalContent({
    // @todo this should be elsewhere.
    background: '#666'
  });
  $('#modalContent .modal-content').html(Drupal.theme('CToolsModalThrobber'));
};

/**
 * Hide the modal
 */
Drupal.CTools.Modal.dismiss = function() {
  if (Drupal.CTools.Modal.modal) {
    Drupal.CTools.Modal.modal.unmodalContent();
  }
};

/**
 * Provide the HTML to create the modal dialog.
 */
Drupal.theme.prototype.CToolsModalDialog = function () {
  var html = '';
  html += '  <div id="ctools-modal">';
  html += '    <div class="ctools-modal-content">'; // panels-modal-content
  html += '      <div class="modal-header">';
  html += '        <a class="close" href="#">';
  html +=            Drupal.settings.CToolsModal.closeImage;
  html += '        </a>';
  html += '        <span id="modal-title" class="modal-title">&nbsp;</span>';
  html += '      </div>';
  html += '<div id="fancy_bg" style="z-index: -70">';
  html += '	<div class="fancy_bg fancy_bg_n"/>';
  html += '	<div class="fancy_bg fancy_bg_ne"/>';
  html += '	<div class="fancy_bg fancy_bg_e"/>';
  html += '	<div class="fancy_bg fancy_bg_se"/>';
  html += '	<div class="fancy_bg fancy_bg_s"/>';
  html += '	<div class="fancy_bg fancy_bg_sw"/>';
  html += '	<div class="fancy_bg fancy_bg_w"/>';
  html += '	<div class="fancy_bg fancy_bg_nw"/>';
  html += '</div>';
  html += '      <div id="modal-content" class="modal-content">';
  html += '      </div>';
  html += '    </div>';
  html += '  </div>';

  return html;
};

/**
 * Provide the HTML to create the throbber.
 */
Drupal.theme.prototype.CToolsModalThrobber = function () {
  var html = '';
  html += '  <div id="modal-throbber">';
  html += '    <div class="modal-throbber-wrapper">';
  html +=        Drupal.settings.CToolsModal.throbber;
  html += '    </div>';
  html += '  </div>';

  return html;
};

/**
 * Generic replacement click handler to open the modal with the destination
 * specified by the href of the link.
 */
Drupal.CTools.Modal.clickAjaxLink = function() {
  // show the empty dialog right away.
  Drupal.CTools.Modal.show();
  Drupal.CTools.AJAX.clickAJAXLink.apply(this);
  if (!$(this).hasClass('ctools-ajaxing')) {
    Drupal.CTools.Modal.dismiss();
  }

  return false;
};

/**
 * Generic replacement click handler to open the modal with the destination
 * specified by the href of the link.
 */
Drupal.CTools.Modal.clickAjaxButton = function() {
  if ($(this).hasClass('ctools-ajaxing')) {
    return false;
  }

  Drupal.CTools.Modal.show();
  Drupal.CTools.AJAX.clickAJAXButton.apply(this);
  if (!$(this).hasClass('ctools-ajaxing')) {
    Drupal.CTools.Modal.dismiss();
  }

  return false;
};

/**
 * Submit responder to do an AJAX submit on all modal forms.
 */
Drupal.CTools.Modal.submitAjaxForm = function() {
  if ($(this).hasClass('ctools-ajaxing')) {
    return false;
  }

  url = $(this).attr('action');
  $(this).addClass('ctools-ajaxing');
  var object = $(this);
  try {
    url.replace('/nojs/', '/ajax/');

    var ajaxOptions = {
      type: 'POST',
      url: url,
      data: '',
      global: true,
      success: Drupal.CTools.AJAX.respond,
      error: function() { 
        alert("An error occurred while attempting to process " + url); 
      },
      complete: function() {
        object.removeClass('ctools-ajaxing');
        $('.ctools-ajaxing', object).removeClass('ctools-ajaxing');
      },
      dataType: 'json'
    };

    // If the form requires uploads, use an iframe instead and add data to
    // the submit to support this and use the proper response.
    if ($(this).attr('enctype') == 'multipart/form-data') {
      $(this).append('<input type="hidden" name="ctools_multipart" value="1">');
      ajaxIframeOptions = {
        success: Drupal.CTools.AJAX.iFrameJsonRespond,
        iframe: true
      };
      ajaxOptions = $.extend(ajaxOptions, ajaxIframeOptions);
    }

    $(this).ajaxSubmit(ajaxOptions);
  }
  catch (err) {
    alert("An error occurred while attempting to process " + url); 
    $(this).removeClass('ctools-ajaxing');
    $('div.ctools-ajaxing', this).remove();
    return false;
  }
  return false;
}

/**
 * Wrapper for handling JSON responses from an iframe submission
 */
Drupal.CTools.AJAX.iFrameJsonRespond = function(data) {
  var myJson = eval(data);
  Drupal.CTools.AJAX.respond(myJson);
}

/**
 * Bind links that will open modals to the appropriate function.
 */
Drupal.behaviors.CToolsModal = function(context) {
  // Bind links
  $('a.ctools-use-modal:not(.ctools-use-modal-processed)', context)
    .addClass('ctools-use-modal-processed')
    .click(Drupal.CTools.Modal.clickAjaxLink);

  // Bind buttons
  $('input.ctools-use-modal:not(.ctools-use-modal-processed), button.ctools-use-modal:not(.ctools-use-modal-processed)', context)
    .addClass('ctools-use-modal-processed')
    .click(Drupal.CTools.Modal.clickAjaxButton);

  if ($(context).attr('id') == 'modal-content') {
    // Bind submit links in the modal form.
    $('form:not(.ctools-use-modal-processed)', context)
      .addClass('ctools-use-modal-processed')
      .submit(Drupal.CTools.Modal.submitAjaxForm);
    // add click handlers so that we can tell which button was clicked,
    // because the AJAX submit does not set the values properly.

    $('input[type="submit"]:not(.ctools-use-modal-processed), button:not(.ctools-use-modal-processed)', context)
      .addClass('ctools-use-modal-processed')
      .click(function() {
        // Make sure it knows our button.
        if (!$(this.form).hasClass('ctools-ajaxing')) {
          this.form.clk = this;
          $(this).after('<div class="ctools-ajaxing"> &nbsp; </div>');
        }
      });

  }
};

// The following are implementations of AJAX responder commands.

/**
 * AJAX responder command to place HTML within the modal.
 */
Drupal.CTools.AJAX.commands.modal_display = function(command) {
  $('#modal-title').html(command.title);
  $('#modal-content').html(command.output);
  Drupal.attachBehaviors($('#modal-content'));
}

/**
 * AJAX responder command to dismiss the modal.
 */
Drupal.CTools.AJAX.commands.modal_dismiss = function(command) {
  Drupal.CTools.Modal.dismiss();
}