(function($) {

    $.fn.WaterMark = function(opt) {
        
        var self = $(this);
        
        self.options = {
            watermarkClass: "watermark",
            watermarkText: "enter text",
            opacity: 1,
            showEffect: "fadeIn",
            hideEffect: "fadeOut",
            speed: "fast"
        };
        
        if(opt) {
            self.options=$.extend(self.options,opt)
        }
        
        return this.each(function() {
         
          var elem = $(this);
          var watermark = null;

	
          // Create and id for this watermark.     
          var waterMarkID = elem.attr("id") + "_watermark";      

       
          watermark = $("<div></div>")      
              .html(self.options.watermarkText)
              .attr({id: waterMarkID})
              .addClass(self.options.watermarkClass)
              .css({position: "absolute", zIndex: 999, opacity: self.options.opacity})                              
              .appendTo("body");             


	  elem.init = function() {
             
              // Get offsets with border and padding included.
              var top = elem.offset({border: true}).top 
              var left = elem.offset({border: true}).left

              //After we have added the watermark. We need to work out its padding and remove that from the width of it.
              var width = elem.innerWidth() - parseInt(watermark.css("padding-left")) - parseInt(watermark.css("padding-right"));
              var height = elem.innerHeight() - parseInt(watermark.css("padding-top")) - parseInt(watermark.css("padding-bottom"));
          
              // Set the height and width of the watermark.
              watermark.height(height)
                .width(width)
		.css({top: top, left: left});

	  }
                  
          elem.hideWatermark = function() {
              watermark[self.options.hideEffect](self.options.speed);
              elem.focus();
          };
          
          elem.showWatermark = function() {
              if(elem.val() == "") {
                  watermark[self.options.showEffect](self.options.speed);
              }        
          };
          
          watermark.bind("click", function() {
              elem.hideWatermark(); 
          });
          
          elem.bind("click", function() {
              elem.hideWatermark();
          });
          
          elem.bind("blur", function() {
              elem.showWatermark(); 
          });  

	  $(document).resize(function() {
	      elem.init();
          });

	  elem.init();
    
        
        });
  
    };
  
})(jQuery);