/**
 * modalContent jQuery Plugin
 *
 * @version   0.9.x
 * @since     2006-12-19
 * @copyright Copyright (c) 2006 Glyphix Studio, Inc. http://www.glyphix.com
 * @author    Gavin M. Roy <gmr@glyphix.com>
 * @license   MIT http://www.opensource.org/licenses/mit-license.php
 * @requires  >= jQuery 1.0.3 http://jquery.com/
 * @requires  dimensions.js http://jquery.com/dev/svn/trunk/plugins/dimensions/dimensions.js?format=raw
 *
 * Call modalContent() on a DOM object and it will make a centered modal box over a div overlay preventing access to the page.
 * Create an element (anchor/img/etc) with the class "close" in your content to close the modal box on click.
 */

/**
 * modalContent
 * @param content string to display in the content box
 * @param css obj of css attributes
 * @param animation (fade, slide, show)
 * @param speed (valid animation speeds slow, medium, fast or # in ms)
 */
jQuery.modalContent = function(content, css, animation, speed) {

  // if we already ahve a modalContent, remove it
  if ( $('#modalBackdrop') ) $('#modalBackdrop').remove();
  if ( $('#modalContent') ) $('#modalContent').remove();

  // position code lifted from http://www.quirksmode.org/viewport/compatibility.html
  if (self.pageYOffset) { // all except Explorer
  var wt = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
    var wt = document.documentElement.scrollTop;
  } else if (document.body) { // all other Explorers
    var wt = document.body.scrollTop;
  }

  // Get our dimensions
  var docHeight = $(document).outerHeight();
  var winHeight = $(window).height();
  var winWidth = $(window).innerWidth();
  if( docHeight < winHeight ) docHeight = winHeight;

  // Create our divs
  $('body').append('<div id="modalBackdrop" style="z-index: 1000; display: none;"></div><div id="modalContent" style="z-index: 1001; position: absolute;">' + $(content).html() + '</div>');

  // Keyboard and focus event handler ensures focus stays on modal elements only
  modalEventHandler = function( event ) {
    target = null;
    if( event ) { //Mozilla
      target = event.target;
    }
    else { //IE
      event = window.event;
      target = event.srcElement;
    }
    if( $(target).filter('*:visible').parents('#modalContent').size() ) {
      // allow the event only if target is a visible child node of #modalContent
      return true;
    }
    $('#modalContent .focus').get(0).focus();
    return false;
  }
  $('body').bind( 'focus', modalEventHandler );
  $('body').bind( 'keypress', modalEventHandler );

  // Create our content div, get the dimensions, and hide it
  var modalContent = $('#modalContent').top('-1000px');
  var mdcTop = wt + ( winHeight / 2 ) - (  modalContent.outerHeight() / 2);
  var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
  modalContent.hide();

  // Apply our css and positioning, then show
  if ( animation == 'fade' )
  {
    $('#modalBackdrop').top(wt).css(css).height(docHeight + 'px').width(winWidth + 'px').show();
     modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').fadeIn(speed);
  } else {
    if ( animation == 'slide' )
    {
      $('#modalBackdrop').top(wt).css(css).height(docHeight + 'px').width(winWidth + 'px').show();
      modalContent.hide().top(mdcTop + 'px').left(mdcLeft + 'px').slideDown(speed);
    } else {
      if ( animation == 'show')
      {
        $('#modalBackdrop').top(wt).css(css).height(docHeight + 'px').width(winWidth + 'px').show();
        modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').show();
      }
    }
  }

  // Bind a click for closing the modalContent
  $('#modalContent .close').click(function(){close(); return false});

  // Close the open modal content and backdrop
  function close() {
    $(window).unbind('resize');
    $('body').unbind( 'focus', modalEventHandler );
    $('body').unbind( 'keypress', modalEventHandler );

    if ( animation == 'fade' ) {
      $('#modalContent').fadeOut(speed,function(){$('#modalBackdrop').fadeOut(speed, function(){$(this).remove();});$(this).remove();});
    } else {
      if ( animation == 'slide' ) {
        $('#modalContent').slideUp(speed,function(){$('#modalBackdrop').slideUp(speed, function(){$(this).remove();});$(this).remove();});
      } else {
        $('#modalContent').remove();$('#modalBackdrop').remove();
      }
    }
  };

  // Move and resize the modalBackdrop and modalContent on resize of the window
  $(window).resize(function(){
    // Get our heights
    var docHeight = $(document).outerHeight();
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    if( docHeight < winHeight ) docHeight = winHeight;

    // Get where we should move content to
    var modalContent = $('#modalContent');
    var mdcTop = ( winHeight / 2 ) - (  modalContent.outerHeight() / 2);
    var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);

    // Apply the changes
    $('#modalBackdrop').height(docHeight + 'px').width(winWidth + 'px').show();
    modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').show();
  });

  $('#modalContent .focus').focus();
};

/**
 * jQuery function init
 */
jQuery.fn.modalContent = function(css, animation, speed)
{
  // If our animation isn't set, make it just show/pop
  if (!animation) { var animation = 'show'; } else {
    // If our animation isn't "fade" then it always is show
    if ( ( animation != 'fade' ) && ( animation != 'slide') ) animation = 'show';
  }
  if ( !speed ) var speed = 'fast';

  // Build our base attributes and allow them to be overriden
  css = jQuery.extend({
    position: 'absolute',
    left: '0px',
    margin: '0px',
    background: '#000',
    opacity: '.55'
  }, css);

  // jQuery mojo
  this.each(function(){
    $(this).hide();
    new jQuery.modalContent($(this), css, animation, speed);
  });

  // return this object
  return this;
};

/**
 * unmodalContent
 * @param animation (fade, slide, show)
 * @param speed (valid animation speeds slow, medium, fast or # in ms)
 */
jQuery.fn.unmodalContent = function(animation, speed)
{
  // If our animation isn't set, make it just show/pop
  if (!animation) { var animation = 'show'; } else {
    // If our animation isn't "fade" then it always is show
    if ( ( animation != 'fade' ) && ( animation != 'slide') ) animation = 'show';
  }
  // Set a speed if we dont have one
  if ( !speed ) var speed = 'fast';

  // Unbind the resize we bound
  $(window).unbind('resize');
  $('body').unbind( 'focus', modalEventHandler );
  $('body').unbind( 'keypress', modalEventHandler );

  // jQuery magic loop through the instances and run the animations or removal.
  this.each(function(){
    if ( animation == 'fade' ) {
      $('#modalContent').fadeOut(speed,function(){$('#modalBackdrop').fadeOut(speed, function(){$(this).remove();});$(this).remove();});
    } else {
      if ( animation == 'slide' ) {
        $('#modalContent').slideUp(speed,function(){$('#modalBackdrop').slideUp(speed, function(){$(this).remove();});$(this).remove();});
      } else {
        $('#modalContent').remove();$('#modalBackdrop').remove();
      }
    }
  });
};