(function($){
  $.fn.showLayer = function(options) {

    var opts = jQuery.extend({
      topHeight: 0,
      className: '',
      data: ''
    }, options);
    
    // do nothing if no data
    if ('' == opts.data) {
      return this;
    }
    
         $(document.body).hideLayer();
    
    // create container
    var container = $('<div id="layer"><div class="opacity"></div></div>');
    
    // create layer
    if ('' != opts.className) {
      opts.className = ' ' + opts.className;
    }
    
    var layer = $('<div class="layer' + opts.className + '"></div>');

    $(window).resize(function() {
      $.showLayer.fixPosition(layer);
    });

    // create close button and add hide event  
    var close = $('<a href="javascript:;" class="close">x</a>');

    close.click(function () { 
      $(document.body).hideLayer();
    });
    
    // mixed all    
    layer.append(close).append($('<div id="layer_data_tmp"/>'));
    this.append(container.append(layer));
    
    // added data (eval js)
    $('#layer_data_tmp').replaceWith(opts.data);
    
    // position top and left position
    $.showLayer.fixPosition(layer);
    
    return this;
  };
        
  $.showLayer = {
    
    fixPosition: function(layer) {
      
      var calculatedTop = $(document).scrollTop() + (($(window).height() - $(layer).outerHeight()) / 2);
      calculatedTop = calculatedTop < 0 ? 0 : calculatedTop;
      
      var calculatedLeft = $(document).scrollLeft() + (($(window).width() - $(layer).outerWidth()) / 2);
      calculatedLeft = calculatedLeft < 0 ? 0 : calculatedLeft;
      
      layer.css('top', calculatedTop).css('left', calculatedLeft);
    }
  };
  
  $.fn.hideLayer = function() {    
    var layer = this.find('div#layer');
         if (layer)
         {
            layer.remove();
         }
        
    return this;
  };

})(jQuery);