$.fn.extend({
	maskable:function( opts ){
		return this.each( function(idx, el) { 
			if($("#mask_ifrm").length <= 0 ) {
				$(document.body).append('<iframe id="mask_ifrm" style="position:absolute; border:1px solid #eeeeee; width:0px; height:0px; left:-2000px; top:-2000px; z-index:90; display:none;"></iframe>');
			}
			if($("#mask_div").length <= 0 ) {
				$(document.body).append('<div id="mask_div" style="position:absolute; border:1px solid #eeeeee; width:0px height:0px; left:-2000px; top:-2000px; z-index:91; display:none;"></div>');
			}
			var default_setting = {border:"1px solid #333333", backgroundColor:"#eeeeee", position:"absolute", padding:10, left:-2000, top:-2000, display:"none", width:300, height:70, "z-index":99 };
			$.extend(default_setting, opts);
			$(el).css(default_setting);
			$(document.body).append( $(el) );
			
			$(window).scroll(function(){ 
				if( !$(el).is(":hidden") ) {
					  $("#mask_ifrm").animate({		
											  		top:$(window).scrollTop(), 
												  	left:$(window).scrollLeft(),
												  	width:$(window).width() - 2, 
												  	height: $(window).height() - 2
											  }, 50 );					
					  
					  $("#mask_div").animate({	
											 		top:$(window).scrollTop(), 
												  	left:$(window).scrollLeft(), 
												  	width:$(window).width() - 2, 
												  	height: $(window).height() - 2
											  }, 50 );
					  
					  $(el).animate({
										top: $(window).scrollTop() + Math.round( ( $(window).height() - $(el).height() ) / 2 ) - 40, 
									  	left:$(window).scrollLeft() +  Math.round( ( $(window).width() - $(el).width() ) / 2 )
									}, 50);
				}
				
			});
			
			$(window).resize(function(){ 
				if( !$(el).is(":hidden") ) {
					  $("#mask_ifrm").animate({
											  	left: $(window).scrollLeft(),
												top: $(window).scrollTop(),
											  	width:$(window).width() - 2, 
											  	height: $(window).height() - 2 
											  }, 50 ) ;					
					  $("#mask_div").animate({
											  	left: $(window).scrollLeft(),
												top: $(window).scrollTop(),
											 	width:$(window).width() - 2, 
												height: $(window).height() - 2 
											  }, 50 ) ;					
					  $(el).animate({
						  				top: $(window).scrollTop() + Math.round( ( $(window).height() - $(el).height() ) / 2 ) - 40, 
						  				left:$(window).scrollLeft() +  Math.round( ( $(window).width() - $(el).width() ) / 2 )
						  }, 50 );					
				}
			});
		});
	},
	Show:function(){
		return this.each( function(idx, el) {
			$("#mask_ifrm").css({
				backgroundColor:"#000000",
				opacity: 0.3,
				width: $(window).width() - 2,
				height: $(window).height() - 2,
				left: $(window).scrollLeft(),
				top: $(window).scrollTop()
			});

			$("#mask_div").css({
				backgroundColor:"#000000",
				opacity: 0.3,
				width: $(window).width() - 2,
				height: $(window).height() - 2,
				left: $(window).scrollLeft(),
				top: $(window).scrollTop()
			});
			$("#mask_div").fadeIn(500);
			$("#mask_ifrm").fadeIn(500);
			$(el).css({
				left: $(window).scrollLeft() + Math.round( ( $(window).width() - $(el).width() ) / 2 ),
				top: $(window).scrollTop() + Math.round( ( $(window).height() - $(el).height() ) / 2 ) - 40
			});
			//alert( $(el).html());
			$(el).fadeIn(500);
		});
	},
	
	Hide:function(){
		return this.each( function(idx, el) {
			$("#mask_div").fadeOut(200);
			$("#mask_ifrm").fadeOut(200);
			$(el).fadeOut(200);
			
			$("#mask_ifrm").css({
				display: "none",
				width: 0,
				height: 0,
				left: -2000,
				top: -2000
			});

			$("#mask_div").css({
				display: "none",
				width: 0,
				height: 0,
				left: -2000,
				top: -2000
			});
			
			$(el).css({
				display: "none",
				left: -2000,
				top: -2000
			});
			
		});
	}
});