jQuery.fn.extend({
  storeRealData: function() {
    var real = this.val();
    this.data("real",real);
  },
  getRealData: function() {
    return this.data("real");
  },
  clearData:function(){
	this.data("real","");
  },
  displayMock: function() {
    this.val("XXXX");
  },
  displayReal:function(){
	this.val(this.getRealData());
  },
  initialize:function(className){
	if(!this.val()==''){
		this.storeRealData();
		this.displayMock();
		this.bindClickToDispalyReal(className);
	}
  },
  bindClickToDispalyReal:function(className){
	  if(!this.val()==''){
		this.bind("click", function(e){
				$("."+className).each(function() {
					$(this).displayReal();
					$(this).unbind("click");
				});
		  });
	  }else{
		  this.bind("click", function(e){
				$(this).displayReal();
				$(this).unbind("click");
		  });
	  }

	  
  },
  saveCreditCardValue:function()
  {
     $("#realCreditCardNumber").val($("#inputMock1").getRealData()+$("#inputMock2").getRealData()+$("#inputMock3").getRealData()+$("#inputMock4").val());
  },
  initAll:function(className){
	$("."+className).each(function() {
		$(this).initialize(className);
	});
	$(this).change( function(){
	  $(this).storeRealData();
	  $(this).saveCreditCardValue();
	 });

	$("#inputMock4").change( function(){ 
	  $("#inputMock4").saveCreditCardValue();
	});
  }
});