/*
	 title: hintmask.js
	 required: jQuery(tested on 1.3.2)
	 copy: copyright 2009 nori(norimania@gmail.com)
	 license: MIT
	 author: 5509 - http://moto-mono.net
	 date: 2009-07-01 23:45
 */

(function($j){

	$j.fn.hintmask = function(options){
		
		var c = $j.extend({
			mask: '*',
			top: 5,
			left: 0
		},options || {});
		
		$j(this).each(function(){
							   
			var that = $j(this),
				passwd = '',
				masked = '',
				lastChar = '',
				hint = $j(document.createElement('div')).addClass('hintmask').hide();
				
			hint.append(Array(
				'<div class="hint-top"></div>',
				'<div class="hint-container">',
					'<div class="hint-left"></div>',
					'<div class="hint-mask"></div>',
					'<div class="hint-right"></div>',
				'</div>'
			).join(''));
		
			$j('body').append(hint);
			
			function showHint(){
				hint.show().css({
					position: 'absolute',
					top: that.offset().top + that.attr('offsetHeight') + c.top,
					left: that.offset().left + c.left
				});
			}
			
			$j(this).focus(function(){
				if($j(this).val().length>0) showHint();
			}).keyup(function(){
				var cont = $j('div.hint-mask',hint);
				passwd = $j(this).val();
				if(passwd.length>0){
					lastChar = passwd.charAt(passwd.length-1);
					for(var i=0;i<passwd.length-1;i++){
						masked += c.mask;
					}
					cont.text(masked+lastChar);
				}else{
					cont.text(passwd);
				}
				masked = '';
				
				if($j(this).val().length>0) showHint();
				else hint.hide();
			}).blur(function(){
				hint.hide();
			});
		});
	}

})(jQuery);