(function($){
	$.fn.toplayer = function(offset, callback) {
	   
		var _firstElement = $(this).get(0);
		
		var _maskID			= 'toplayer-mask';
		var _maskHandClass  = 'toplayer-mask-hand';
		var _closeID		= 'toplayer-close-mask';
		var _cloneID		= 'toplayer-body-content';
		var _offset			= offset; 
		
		var _mask  = '<div style="width:' + $(_firstElement).width() + 'px;height:' + $(_firstElement).height() + 'px" id="' + _maskID + '"></div>';
		var _clone = '<div style="width:' + $(_firstElement).width() + 'px;height:' + $(_firstElement).height() + 'px" id="' + _cloneID + '"></div>';
		var _close = '<div id="' + _closeID + '"></div>';
		
		$('body').append(_mask);		
		$('body').append(_clone);
		$('#' + _cloneID).html( $(_firstElement).html() );
		$(_firstElement).remove();
		$('body').append(_close);

		
		if(callback)
		{
			$('#' + _maskID).addClass(_maskHandClass);
			$('#' + _maskID).bind('click', function()
			{
				setTimeout(callback, 0);
			});
		}

		$('#' + _closeID).bind('click', function() {
			$('#' + _closeID).remove();
			$('#' + _maskID).remove();
			$('#' + _cloneID).remove();
		});

		$(window).bind('resize', function() {
			_calculte(_cloneID, _maskID, _closeID, _offset)

		});		

		$(window).bind('scroll', function () { 
			_calculte(_cloneID, _maskID, _closeID, _offset);
	    });

		_calculte(_cloneID, _maskID, _closeID, _offset);
		$('#' + _maskID).show();
		$('#' + _cloneID).show();
		$('#' + _closeID).show();

	};

	function _calculte(_cloneID, _maskID, _closeID, _offset)
	{
		var _left = Math.floor( 
			$(window).scrollLeft()
			+ ($(window).width() / 2)
			- ($('#' + _cloneID).width() / 2)
		);
		
		var _top  = $(window).scrollTop();

		var _marginTolerance = 10;

		if($(window).height() + $(window).scrollTop() < _top + _offset + $('#' + _cloneID).height())
		{
			$('body').height($(window).height() + _offset);
			_top = 0;
		}
		
		if(_offset)
		{
			_top = _top + parseInt(_offset);
		}
		
		$('#' + _maskID).animate({top: _top, left: _left}, 50);
		$('#' + _cloneID).animate({top: _top, left: _left}, 50);
		$('#' + _closeID).animate({top: _top, left: _left + $('#' + _cloneID).width() - $('#' + _closeID).width()}, 50);
		
		/*
			$('#' + _maskID).css('top', _top);
			$('#' + _maskID).css('left', _left);
			$('#' + _closeID).css('top', _top);
			$('#' + _closeID).css('left', _left + $('#' + _cloneID).width() - $('#' + _closeID).width());
			$('#' + _cloneID).css('top', _top);
			$('#' + _cloneID).css('left', _left);
		*/
	}

})(jQuery);