// Pixelsilk Modal
// version 1.0.2
// Last update: 01/13/2011

jQuery.fn.pixelsilkModal = function(options) {

  var defaults = {
    loadMethod:        'onclick', // onclick|onload
    modalContainerClass:  'boxModal', // The modal container class.
    modalWrapperClass:  'boxModalContentOuter', // The modal wrapper class.
    closeButtonClass:    'close', // The css class of the close button.
    contentType:      'ajax', // ajax|iframe|html(passed from options)|image
    contentSource:      '', // URL: force the content source.
    iframeScrollX:      true, // true|false - 'overflow-x-auto'
    iframeScrollY:      true, // true|false - 'overflow-y-auto'
    showCloseButton:    true, // true|false - display the close button?
    keepInView:        true, // true|false - keep the modal in view even if the browser window is scrolled?
    closeOnBGClick:    true, // true|false - close the modal if the background of the site is clicked?
    closeOnEscapeKey:    true, // true|false - close the modal on escape key press?
    modalWidth:        500, // Default width of the modal.
    modalHeight:      500, // Default height of the modal.
    content:          '<p>Pixelsilk Modal</p>', // The default content for the modal if none is found or passed to the plugin.
    fadeInSpeed:      500, // Fade in speed.
    fadeOutSpeed:      500, // Fade out speed.
    closeButtonHTML:    'X', // The default close button HTML content.
    offsetTop:        100, // Amount, in pixels, to offset from the top of the window.
    bodyOverlayOpacity:  0.45, // Overall Modal BG transparency.
    modalBorderOpacity:  0.45,  // "border" around Modal BG transparency.
    modalBorder:      '10px' // In pixels. This can also be done in CSS but the option is here as well.
  };
  
  var options =  $.extend(defaults, options);
  
  return this.each(function() {
    var anchor = $(this).attr('href');
    
    function showModal() {
      
      // Create the modal HTML:
      if ( !$("div."+options.modalContainerClass).length ) {
        $('body').append('<div class="'+options.modalContainerClass+'"><div class="'+options.modalWrapperClass+'"><div class="marginFix"></div><div class="modalContent"></div><div class="modalContentBG"></div><div class="marginFix"></div></div><div class="boxModalBG"></div></div>');
      }
      
      var mainModal = $('.'+options.modalWrapperClass);
      var modal = $('.'+options.modalContainerClass);
      var modalBG = $('.boxModalBG');
      var modalContentBG = $('.modalContentBG');
      
      modalBG.css({'opacity':options.bodyOverlayOpacity});
      modalContentBG.css({'opacity':options.modalBorderOpacity});
      
      mainModal
        .hide()
        .css({'margin-top':Number(options.offsetTop+$(window).scrollTop())});
      
      modal.hide();
      modal.css({'height':'100%'});
      
      var contentArea = modal.find('.modalContent');
      
      if (options.contentType == 'iframe') {
        // create iFrame with link's href as src:
        contentArea.html('<iframe src="'+anchor+'" frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>');
        if (options.contentSource != '') {
          contentArea.find('iframe').attr('src', options.contentSource);
        } else
          contentArea.find('iframe').attr('src', anchor);
      } else if (options.contentType == 'html') {
        // stuff the 'content' into the content area:
        contentArea.html(options.content);
      } else if (options.contentType == 'ajax') {
        // do sweet ajax:
        if (options.contentSource != '') {
          contentArea.load(options.contentSource);
        } else {
          contentArea.load(anchor);
        }
      } else if (options.contentType == 'image') {
        contentArea.append('<img src="'+anchor+'" />', function() {
          
        });
      }
      
      if (options.contentType == 'iframe' && options.iframeScrollX) {
        contentArea.find('iframe').css({'overflow-x':'auto'});
      } else if (options.contentType == 'iframe' && !options.iframeScrollX){
        contentArea.find('iframe').css({'overflow-x':'hidden'});
      }
      
      if (options.contentType == 'iframe' && options.iframeScrollY) {
        contentArea.find('iframe').css({'overflow-y':'auto'});
      } else if (options.contentType == 'iframe' && !options.iframeScrollY){
        contentArea.find('iframe').css({'overflow-y':'hidden'});
      }
      
      if (options.showCloseButton) {
        mainModal.append('<div class="'+options.closeButtonClass+'" style="display:none;">'+options.closeButtonHTML+'</div>');
      }
      
      // Apply styles to the modal:
      if (options.modalBorder != '') {
        contentArea.css({'margin':options.modalBorder});
      }
      
      // resize modal:
      mainModal.animate({'width':options.modalWidth});
      if (options.modalHeight != '') {
        mainModal.animate({'height':options.modalHeight});
      }
      
      // resize modal inside content area:
      // top and bottom padding:
      var cPaddingY = Number(contentArea.css('padding-top').replace('px',''));
      cPaddingY += Number(contentArea.css('padding-top').replace('px',''));
      // top and bottom margin:
      var cMarginY = Number(contentArea.css('margin-top').replace('px',''));
      cMarginY += Number(contentArea.css('margin-bottom').replace('px',''));
      
      // fix the 'marginFix' for chrome:
      var marginFix = $('.marginFix');
      var fixedMargins;
      if (marginFix.size() >0 ){
        fixedMargins = marginFix.size()+marginFix.height();
        //alert(fixedMargins);
      }
      
      // Apply the final height to the contentArea:
      contentArea.height(Number(options.modalHeight-cPaddingY-cMarginY-fixedMargins));
      
      // start the animating:
      modal.fadeIn(options.fadeInSpeed, function() {
        mainModal.fadeIn(options.fadeInSpeed, function() {
          mainModal.find('.'+options.closeButtonClass).fadeIn();
        });
      });
      
      if (options.closeOnBGClick) {
        $(modalBG).click(function() {
          removeModal(options.fadeOutSpeed);
        });
      }
      $('.'+options.closeButtonClass).click(function() {
        removeModal(options.fadeOutSpeed);
      });
      if (options.closeOnEscapeKey) {
        $(window).keyup(function(e) {
          if (e.keyCode == 27) {
            removeModal(75);
          }
        });
      }
      
      if (options.keepInView) {
        $(window).scroll(function() {
          mainModal.css({'margin-top':Number(options.offsetTop+$(window).scrollTop())});
        });
      }
      
      function removeModal(speed) {
        var fadeOutSpeed;
        if (!speed || speed == null || speed == undefined || speed == '') {
          fadeOutSpeed = 50;
        } else {
          fadeOutSpeed = speed;
        }
        
        mainModal.fadeOut(fadeOutSpeed, function() {
          modal.fadeOut(fadeOutSpeed, function() {
            modal.remove();
          });
        });
        return false;
      }
      
    }
    
    if (options.loadMethod == 'onclick') {
      $(this).click(function() {
        showModal();
        return false;
      });
    } else if (options.loadMethod == 'onload') {
      showModal();
    }
    
  });
};