/**
 * ContentBox plugin
 *
 * Copyright (c) 2010 Pablo Bossle (http://www.bossle.com.br)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

(function($) {
	
	$.extend({		
		contentBox: {
			defaultSettings: {
				width: 500
			},
			settings: {},
			position: function(containerObj){
				var viewportHeight = $(window).height();
				var viewportWidth = $(window).width();
				var idealLeft = (viewportWidth / 2) - ($.contentBox.settings.width / 2);
				
				if(containerObj.is(':hidden') || parseInt(containerObj.css('top')) == 0)
				{
					containerObj.css({top: 0 - containerObj.height(), left: idealLeft});
				}
				
				// Finally, after set the width properly, we can set the top and left coords
				containerObj
					.stop()
					.animate({
						top: (viewportHeight / 2) - (containerObj.height() / 2),
						left: idealLeft
					});
			},
			create: function(target, opts){
				var targetObj = $(target);
				var containerObj = $('.contentbox-container');
				var overlayObj = $('.contentbox-overlay');
				
				$.contentBox.settings = $.extend($.contentBox.defaultSettings, opts || {});
				
				if($(this).length > 1 || containerObj.length)
				{
					if($.contentBox.settings.force === true)
					{
						containerObj.remove();
						overlayObj.remove();
					}
					else
					{
						return targetObj;
					}
				}
				
					
				var html = '';
				var overlayHtml = '';
				
				
				overlayHtml += '<div class="contentbox-overlay"></div>';
				
				html += '<table cellspacing="0" cellpadding="0" class="contentbox-container png-fix">';
					html += '<tr>';
						html += '<td class="top-left png-fix"></td>';
						html += '<td class="top-center png-fix"></td>';
						html += '<td class="top-right png-fix"></td>';
					html += '</tr>';
					html += '<tr>';
						html += '<td class="center-left png-fix"></td>';
						html += '<td class="center-center png-fix">';
							html += '<div class="content png-fix">';
							html += targetObj.html();
							html += '<a href="#" class="close png-fix">fechar</a>';
							html += '</div>';
						html += '</td>';
						html += '<td class="center-right png-fix"></td>';
					html += '</tr>';
					html += '<tr>';
						html += '<td class="bottom-left png-fix"></td>';
						html += '<td class="bottom-center png-fix"></td>';
						html += '<td class="bottom-right png-fix"></td>';
					html += '</tr>';
				html += '</table>';
				

				containerObj = $(html).appendTo('body');
				overlayObj = $(overlayHtml).appendTo('body');
				
				overlayObj
					.fadeTo('slow', 0.9)
					.click(function(){
						containerObj.remove();
						overlayObj.remove();
						
						return false;
					});
				
				
				
				// First set the width. This will give us the real height of container. 
				containerObj.css({width: $.contentBox.settings.width});
				
				// Init position
				$.contentBox.position(containerObj);
				
				// Add resize listener to reposition container
				$(window).resize(function(){
					$.contentBox.position(containerObj);
				});
				
				var closeObj = containerObj.find('a.close');
				
				closeObj
					.css({
						top: 0, 
						left: $.contentBox.settings.width - closeObj.width() - 40
					})
					.click(function(){
						containerObj.remove();
						overlayObj.remove();
						
						return false;
					});
				
				// Add keyup listener for ESC key
				$('html')
					.unbind('.contentBox')
					.bind("keyup.contentBox", function (c) {
					
					if(c.keyCode == 27) {
						c.preventDefault();
						
						containerObj.remove();
						overlayObj.remove();
					}
				});
				
				return targetObj;
				
				
			}
		}
	});
	
	$.fn.contentBox = function(opts){
		return $.contentBox.create( this[0], opts );		
	};
})(jQuery);