$j = jQuery.noConflict();

dPopup = function(){
	
	var html = 	'<div class="dPopup_outerBox">' +
					'<div class="dPopup_contentBox"></div>' +
					'<div class="dPopup_closeBox">Fechar X</div>' +
				'</div>';
	
	var outerBox;
	var contentBox;
	var closeBox;
	
	var generate = function(){
		outerBox = $j(html);
		$j(document.body).append(outerBox);
		
		contentBox = outerBox.find('.dPopup_contentBox');
		closeBox = outerBox.find('.dPopup_closeBox');
		
		closeBox.bind('click', function(){
			outerBox.fadeOut(1000);
			outerBox.draggable('destroy');
			return false;
		});
		
		outerBox.hide();
	};
	
	this.showPopup = function(elementId){
		var content = $j('#' + elementId);
		
		contentBox.append(content);
		contentBox.find('#' + elementId).show();
		
		centerPopup();
		outerBox.draggable({ containment: 'document' });
		outerBox.fadeIn(1000);
	};
	
	var getPopupSize = function(){
		var width = outerBox.width() + 20;
		var height = outerBox.height() + 20;
		
		return {width:width, height:height};
	}
	
	var centerPopup = function(){
		var viewSize = getViewportSize();
		var popSize = getPopupSize();
		
		var x = (viewSize.width - popSize.width) / 2;
		var y = (viewSize.height - popSize.height) / 2;
		
		outerBox.css({
			'top':y + 'px',
			'left':x + 'px'
		});
	}
	
	generate();
	
};

function getViewportSize(){
	var viewportwidth;
	var viewportheight;

	if (typeof window.innerWidth != 'undefined'){
		viewportwidth = window.innerWidth,
		viewportheight = window.innerHeight
	}else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
		viewportwidth = document.documentElement.clientWidth,
		viewportheight = document.documentElement.clientHeight
	}else{
		viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		viewportheight = document.getElementsByTagName('body')[0].clientHeight
	}
	
	return {width:viewportwidth, height:viewportheight};
}