(function($)
{
	$.fn.box = function(options)
  {
		// default configuration properties
		var defaults =
    {
      trigger:         '#trigger',
      auto:         false
    };

		var options        = $.extend(defaults, options);

    //  gestion du masque gris
    var mask    = $('#mask');

    mask.css('position', 'absolute');
    mask.css('display', 'block');
    mask.css('zoom', '1');
    mask.css('left', '0');
    mask.css('top', '0');
    mask.css('width', '100%');
    mask.css('height', '100%');
    mask.css('background-color', '#FFFFFF');
    mask.css('z-index', '500');
    mask.css('display', 'none');
    mask.css('cursor', 'pointer');
    mask.css('-moz-opacity', '0.95');
    mask.css('-webkit-opacity', '0.95');

    function draw()
    {
      var mask = $('#mask');
      $('#contentjs').fadeIn(500);
      mask.fadeIn(500, function(){
        mask.css('filter', 'alpha(opacity = '+ 0.7*100 +')');
        mask.click(function(){
          $(this).fadeOut(500);
          $('#contentjs').css('z-index', '1000');
          $('#contentjs').fadeOut(500);
        })
      })
    }

    if(!options.auto)
    {
      $(options.trigger).click(function(){
        draw();
        return false;
      });
    }
    else
      draw();
    
    $('#close').click(function(){
      var mask = $('#mask');
      $('#contentjs').fadeOut(500);
      mask.fadeOut(500);
      return false;
    });

  };      
})(jQuery);