Index: trunk/prototype/modules/attach_message/attach_message.css
===================================================================
--- trunk/prototype/modules/attach_message/attach_message.css	(revision 5188)
+++ trunk/prototype/modules/attach_message/attach_message.css	(revision 5263)
@@ -25,12 +25,16 @@
 
 /* geral */
-#dfd72 {font-size:11px; width:875px;height:510px;padding:5px;border:1px solid #777;-moz-border-radius:3px;border-radius:3px;}
-.empty-conteiner { background-color:#f7f7e7; border:2px dashed #DDD; }
-.empty-conteiner .message{width:100%;display:block;margin-top:70px;text-align:center;text-transform:uppercase;font-weight:bolder; font-size:20px;color:#CCC;}
+/*#dfd72 {font-size:11px; width:875px;height:510px;padding:5px;border:1px solid #777;-moz-border-radius:3px;border-radius:3px;}*/
+.empty-container { background-color:#f7f7e7; border:2px dashed #DDD; }
+.empty-container .message{width:100%;display:block;margin-top:70px;text-align:center;text-transform:uppercase;font-weight:bolder; font-size:20px;color:#CCC;}
+#mailpreview_tabs_default_empty.empty-container.ui-tabs-panel { background-color:#f7f7e7; border:none; }
+/*#mailpreview_tabs_default_empty.empty-container.ui-tabs-panel.message {margin-top:70px;text-align:center;text-transform:uppercase;font-weight:bolder; font-size:20px;color:#CCC;}*/
 
 /* especifico */
 #foldertree-container { width:220px;height:240px; display:inline-block;margin:5px 0px 5px 5px;overflow:auto;}
 #mailgrid-container {width:650px;/*height:240px;*/ margin:5px 5px 5px 0px; float:right; overflow:auto;}
-#mailpreview-container {margin:5px;padding:5px;height:200px;overflow:auto;border:2px dashed #DDD;}
+#mailpreview_container {margin:5px;padding:0px;height:200px;}
+#mailpreview_container .ui-tabs-panel {height:145px;overflow:auto;padding:5px;}
+/*#mailpreview_tabs { max-height: 20px; }*/
 #buttons-container {text-align: right;margin:5px;}
 #selected_messages_counter {text-align:right;padding:0;}
@@ -49,6 +53,13 @@
 .flagged { }
 
-mailpreview-tabs {max-height: 15px; height: 15px; display: none; visibility: hidden;}
-#mailpreview-message-info {display: block; margin:0; padding: 0; width: 100%;height: 15px; font-weight: bolder; overflow:hidden;}
+/*#mailpreview_tabs {max-height: 15px; height: 15px; display: none; visibility: hidden;}*/
+.mailpreview-message-info {display: block; margin:0; padding: 0; width: 100%;height: 15px; font-weight: bolder; overflow:hidden;}
 
 #loading-content .image {width: 32px; height: 32px; background-image: url(images/loading.gif);}
+
+#mailpreview_container li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 -0.2em; cursor: pointer; }
+#mailpreview_container .ui-tabs-nav { margin: 0; padding:0;  border-left:none; border-right: none; border-top: none; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0;}
+#mailpreview_container .ui-tabs-nav li { padding:0; }
+#mailpreview_container .ui-tabs-nav li a { padding: 0.6em 0.4em 0.3em 0.6em; font-size: 11px;}
+
+#mailpreview_container .ui-tabs-nav .preview-message-unselected { color:#993333; }
Index: trunk/prototype/modules/attach_message/attach_message.js
===================================================================
--- trunk/prototype/modules/attach_message/attach_message.js	(revision 5188)
+++ trunk/prototype/modules/attach_message/attach_message.js	(revision 5263)
@@ -67,8 +67,8 @@
 		}
 
-		( options.success || options.complete )( { "rows": msgs, 
+		( options.success || options.complete )( {"rows": msgs, 
 							   "records": msgs.length,
 							   "page": params["page"], 
-							   "total": Math.ceil( msgs.num_msgs / params["rows"] ) } );
+							   "total": Math.ceil( msgs.num_msgs / params["rows"] )} );
 	    }
 	  }
@@ -158,29 +158,4 @@
 }
 
-      function dump(arr,level) {
-	      var dumped_text = "";
-	      if(!level) level = 0;
-
-	      //The padding given at the beginning of the line.
-	      var level_padding = "";
-	      for(var j=0;j<level+1;j++) level_padding += "    ";
-
-	      if(typeof(arr) == 'object') { //Array/Hashes/Objects
-		      for(var item in arr) {
-			      var value = arr[item];
-
-			      if(typeof(value) == 'object') { //If it is an array,
-				      dumped_text += level_padding + "'" + item + "' ...\n";
-				      dumped_text += dump(value,level+1);
-			      } else {
-				      dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
-			      }
-		      }
-	      } else { //Stings/Chars/Numbers etc.
-		      dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
-	      }
-	      return dumped_text;
-      }
-
 var msgAttacherGrid = $("#message_attacher_grid"), msgsTotal = $("#selected_messages_number");
 var lastLoadedMessages = [];
@@ -205,7 +180,7 @@
 	      var parts = stripParents.exec( id );
 	  
-	      data[data.length] = { 'id' : id,
+	      data[data.length] = {'id' : id,
 				    'commonName' : parts[2],
-				    'parentFolder' : parts[1] };
+				    'parentFolder' : parts[1]};
 	});
     }
@@ -253,5 +228,5 @@
 
 		var firstFolder = jQuery("#foldertree-container")
-		.removeClass('empty-conteiner')
+		.removeClass('empty-container')
 		.html(BASE_PATH + 'app/templates/foldertree.ejs', {folders: [tree1, tree2, tree3]})
 		.find("#foldertree").treeview()
@@ -301,5 +276,5 @@
 		//jqgrid
 		jQuery("#mailgrid-container")
-		.removeClass('empty-conteiner')
+		.removeClass('empty-container')
 		.html(BASE_PATH + 'app/templates/messagegrid.ejs', {data: {}})
 		.find("#message_attacher_grid")
@@ -360,13 +335,15 @@
 			},
 			onSelectRow: function (id, selected) {
-				if (selected) {
-					var message = false;
-					for (var i=0; i<lastLoadedMessages.length; i++){
-						if (lastLoadedMessages[i].msg_number == id) {
-							message = lastLoadedMessages[i];
-							break;
-						}
+				var message = false;
+				for (var i=0; i<lastLoadedMessages.length; i++){
+					if (lastLoadedMessages[i].msg_number == id) {
+						message = lastLoadedMessages[i];
+						break;
 					}
-					
+				}
+				
+				var tabPanelTemplateId    = 'mailpreview_tab_' + selectedFolder.id.replace('/', '_') + '_' + message.msg_number;
+				
+				if (selected) {				
 					if (onceOpenedMessages[selectedFolder.id] && onceOpenedMessages[selectedFolder.id][message.msg_number]) {
 						if (!selectedMessages[selectedFolder.id])
@@ -374,13 +351,22 @@
 							
 						selectedMessages[selectedFolder.id][message.msg_number] = true;
-						$('#mailpreview-container').removeClass('empty-conteiner').unblock()
-						.find('.message')
-						.html(onceOpenedMessages[selectedFolder.id][message.msg_number].body).end()
-						.find('#mailpreview-message-info').html(onceOpenedMessages[selectedFolder.id][message.msg_number].subject)
-						//$('#mailpreview-container').removeClass('empty-conteiner').html(onceOpenedMessages[selectedFolder.id][message.msg_number].body);
+						$('#mailpreview-container').unblock();						
+
+						/**
+						 * TODO: limitar o tamanho da string de título da tab 
+						 */
+						var tabPanelTemplateLabel = onceOpenedMessages[selectedFolder.id][message.msg_number].subject;
+						if ($('#' + tabPanelTemplateId).length == 0) {								
+							$mailpreview_tabs.tabs("add", '#' + tabPanelTemplateId, tabPanelTemplateLabel)
+							.find('.message.empty-container').hide().end()
+							.find('#' + tabPanelTemplateId).html(onceOpenedMessages[selectedFolder.id][message.msg_number].body);
+						} else {
+							$mailpreview_tabs.tabs('select', '#' + tabPanelTemplateId)
+							.find('#' + tabPanelTemplateId + ', [href="#' + tabPanelTemplateId + '"]').removeClass('preview-message-unselected');
+						}
 						
 						selectedMessagesCount();
 					} else {
-						jQuery('#mailpreview-container').block({  
+						jQuery('#mailpreview_container').block({  
 							message: '<div id="loading-content"><div class="image"> </div></div>',  
 							css: {  
@@ -416,9 +402,25 @@
 								onceOpenedMessages[selectedFolder.id][message.msg_number] = jQuery.extend(true, message, mail_preview);
 
-								$('#mailpreview-container').removeClass('empty-conteiner').unblock()
-								.find('.message')
-								.html(onceOpenedMessages[selectedFolder.id][message.msg_number].body).end()
-								.find('#mailpreview-message-info').html(onceOpenedMessages[selectedFolder.id][message.msg_number].subject);
+								$('#mailpreview_container').unblock();
 								
+								/**
+								 * TODO: limitar o tamanho da string de título da tab 
+								 */
+								var tabPanelTemplateLabel = onceOpenedMessages[selectedFolder.id][message.msg_number].subject;
+								if ($('#' + tabPanelTemplateId).length == 0) {								
+									$mailpreview_tabs.tabs("add", '#' + tabPanelTemplateId, tabPanelTemplateLabel)
+									.find('.message.empty-container').hide().end()
+									.find('#' + tabPanelTemplateId).html(onceOpenedMessages[selectedFolder.id][message.msg_number].body)
+									.prepend(
+										'<div class="mailpreview-message-info">' + 
+											get_lang('Subject') + ': ' +
+											onceOpenedMessages[selectedFolder.id][message.msg_number].subject + 
+										'</div>'
+									);
+								} else {
+									$mailpreview_tabs.tabs('select', '#' + tabPanelTemplateId)
+									.find('#' + tabPanelTemplateId + ', [href="#' + tabPanelTemplateId + '"]').removeClass('preview-message-unselected');
+								}
+
 								selectedMessagesCount();
 							}
@@ -426,9 +428,13 @@
 					}
 				} else {
-					$('#mailpreview-container').addClass('empty-conteiner').unblock()
-					.find('.message')
-					.html("selecione uma mensagem para pre-visualizar").end()
-					.find('#mailpreview-message-info').html("");
-					selectedMessages[selectedFolder.id][id] = false;
+					/**
+					 * if you wants to remove tab on unselect message
+					 */
+					/*
+					if ($('#' + tabPanelTemplateId).length) {
+						$mailpreview_tabs.tabs('remove', '#' + tabPanelTemplateId);
+					}
+					 */
+					$mailpreview_tabs.find('#' + tabPanelTemplateId + ', [href="#' + tabPanelTemplateId + '"]').addClass('preview-message-unselected');
 				}
 			},
@@ -438,2 +444,30 @@
 	}
 });
+
+
+var $mailpreview_tabs = $( "#mailpreview_container").tabs({
+	tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'> Fechar </span></li>",
+	panelTemplate: '<div class="message mailpreview-message-body"></div>',
+	add: function( event, ui ) {
+		$mailpreview_tabs.tabs('select', '#' + ui.panel.id);
+		if ($('#mailpreview_tabs_default_empty').length && $mailpreview_tabs.tabs("length") > 1) {	
+			$mailpreview_tabs.tabs('remove', '#mailpreview_tabs_default_empty');
+		}
+	},
+	remove: function(event, ui) {
+		if (!$mailpreview_tabs.tabs("length") && !$('#mailpreview_tabs_default_empty').length) {
+			/**
+			 * TODO: internacionalizar a string 'Nenhuma mensagem selecionada'
+			 */
+			$mailpreview_tabs.tabs('add', '#mailpreview_tabs_default_empty', 'Nenhuma mensagem selecionada')
+			.find('#mailpreview_tabs_default_empty').removeClass('mailpreview-message-body').addClass('empty-container')
+			.html('<span class="message">' + get_lang('select a message to preview') + '</span>').end()
+			.find('.ui-tabs-nav li:first .ui-icon-close').remove();
+		}
+	}
+});
+
+$( "#mailpreview_container span.ui-icon-close" ).live( "click", function() {
+	var index = $("li", $mailpreview_tabs).index($(this).parent());
+	$mailpreview_tabs.tabs("remove", index);
+});
Index: trunk/prototype/modules/attach_message/attach_message.ejs
===================================================================
--- trunk/prototype/modules/attach_message/attach_message.ejs	(revision 5136)
+++ trunk/prototype/modules/attach_message/attach_message.ejs	(revision 5263)
@@ -1,14 +1,15 @@
 <link rel="stylesheet" href="../prototype/modules/attach_message/attach_message.css" type="text/css" />	
 <div class="expresso-window-container" title="<%=get_lang('Select messages to attach...')%>">
-	<div id="foldertree-container" class="empty-conteiner">
+	<div id="foldertree-container" class="empty-container">
 		<span class="message"><%=get_lang('no folder found')%></span>
 	</div>
-	<div id="mailgrid-container" class="empty-conteiner">
+	<div id="mailgrid-container" class="empty-container">
 		<span class="message"><%=get_lang('no folder selected')%></span>
 	</div>
-	<div id="mailpreview-container" class="empty-conteiner">
-		<div id="mailpreview-tabs"></div>
-		<div id="mailpreview-message-info"></div>
-		<span class="message"><%=get_lang('select a message to preview')%></span>
+	<div id="mailpreview_container">
+		<ul id="mailpreview_tabs">
+			<li><a href="#mailpreview_tabs_default_empty">Nenhuma mensagem selecionada</a></li>
+		</ul>
+		<div id="mailpreview_tabs_default_empty" class="empty-container"><span class="message" ><%=get_lang('select a message to preview')%></span></div>
 	</div>
 	<div id="buttons-container">
