Index: trunk/workflow/js/userinterface/processes.js
===================================================================
--- trunk/workflow/js/userinterface/processes.js	(revision 795)
+++ trunk/workflow/js/userinterface/processes.js	(revision 1448)
@@ -61,5 +61,5 @@
 		parag.className = "text_dsp";
 		parag.innerHTML = "Não existem processos disponíveis";
-		content_id_1.appendChild(parag);						
+		content_id_1.appendChild(parag);
 	}
 	else
@@ -82,86 +82,70 @@
 {
 	var content_id_1 = document.getElementById("content_id_1");
-	var available_width = screen.availWidth - 200;
-	var max_columns = Math.floor(available_width / 120);
-	var max_lines = 2;
-	
-	var table_element = document.createElement("TABLE");
-	var tbody_element = document.createElement("TBODY");
-	table_element.setAttribute("id", "table_proc");
-	table_element.setAttribute("cellSpacing", "10");
-	table_element.setAttribute("width", "auto");	
-	tr_element = document.createElement("TR");
-		
-	for (i=1; i <= max_lines * max_columns; i++) {
-		td_element = document.createElement("TD");
-		td_element.setAttribute("id", "td_proc_" + (i -1) );
-		td_element.className = "proc_td_bg";
-		td_element.align = "left";
-  		tr_element.appendChild(td_element);
-		if ((i % max_columns) == 0) {
-			tbody_element.appendChild(tr_element);
-			tr_element = document.createElement("TR");
+
+	var div_conteiner = document.createElement("DIV");
+
+	div_conteiner.style.paddingRight = '100px';
+	content_id_1.appendChild(div_conteiner);
+
+	(function loop(i) {
+
+		if(i < data.length){
+
+			var proc = data[i];
+			var proc_name_dsp = proc.wf_procname;
+
+			if (proc_name_dsp.length > 40) {
+			    proc_name_dsp = proc_name_dsp.substr(0,40) + "...";
+			}
+
+			var div_element = document.createElement("DIV");
+
+			div_element.style.width = '106px';
+
+			if(is_ie) {
+				div_element.style.styleFloat = "left";
+				div_element.style.height = '150px';
+			} else {
+				div_element.style.cssFloat = "left";
+				div_element.style.height = '100px'
+			}
+
+			div_element.style.padding = '7px';
+			div_element.style.paddingTop = "25px";
+			div_element.style.cursor = 'pointer';
+
+			var index = i;
+
+			div_element.onclick = function() { displayProcessMenu(index); };
+			div_element.onmouseover = function() { menuTimer = setTimeout("displayProcessMenu('" + index + "')",400);};
+			div_element.onmouseout = function() { if (menuTimer) clearTimeout(menuTimer); };
+
+			var div_proc_img = document.createElement("DIV");
+			div_proc_img.style.width = "100%";
+			div_proc_img.style.textAlign = 'center';
+			div_proc_img.innerHTML = '<img src="' + proc.wf_iconfile + '" id="processImage_' + i + '" width="32" height="32">';
+
+			var div_proc_txt = document.createElement("DIV");
+			div_proc_txt.style.width = "100%";
+			div_proc_txt.style.textAlign = 'center';
+			div_proc_txt.style.paddingTop = '5px';
+			div_proc_txt.innerHTML = '<span style="font-size: 11px !important;">'+proc_name_dsp+'</span>';
+			div_proc_txt.innerHTML += '<br><span class="version_dsp"> (v' + proc.wf_version + ')</span></p>';
+			div_element.appendChild(div_proc_img);
+			div_element.appendChild(div_proc_txt);
+
+			div_conteiner.appendChild(div_element);
+
+			createProcessMenu(i, data[i]);
+
+			loop(i+1);
 		}
-	}	
-	tbody_element.appendChild(tr_element);
-	table_element.appendChild(tbody_element);
-	content_id_1.appendChild(table_element);
-	
-	for (i=1; i <= data.length; i++) {
-		ind = i -1;
-		proc = data[ind];
-		proc_name_dsp = proc.wf_procname;	
-		if (proc_name_dsp.length > 40) {
-			proc_name_dsp = proc.wf_procname.substr(0,40) + "...";
-		}
-		table_element = document.createElement("TABLE");
-		tbody_element = document.createElement("TBODY");
-		
-		tr_element = document.createElement("TR");
-		td_element = document.createElement("TD");
-		td_element.setAttribute("vAlign", "top");
-		td_element.setAttribute("align", "center");
-		td_element.setAttribute("height", "40");
-		td_element.innerHTML = '<img src="' + proc.wf_iconfile + '" id="processImage_' + ind + '" width="32" height="32">';
-		tr_element.appendChild(td_element);
-		tbody_element.appendChild(tr_element);	
-		eval('tbody_element.onclick = function() { displayProcessMenu(' + ind + '); }');
-		eval('tbody_element.onmouseover = function() { menuTimer = setTimeout("displayProcessMenu(' + ind + ')",400); }');
-		tbody_element.onmouseout = function() { if (menuTimer) clearTimeout(menuTimer); };
-		
-		tr_element = document.createElement("TR");
-		td_element = document.createElement("TD");
-		td_element.setAttribute("width", "106");
-		if (is_ie) {
-			td_element.setAttribute("height", "60");
-		} else {
-			td_element.setAttribute("height", "47");
-		}
-		td_element.setAttribute("vAlign", "top");
-		td_element.setAttribute("align", "center");
-		td_element.innerHTML = proc_name_dsp;
-		td_element.innerHTML += "<br><span class='version_dsp'> (v" + proc.wf_version + ")</span></p>";
-		tr_element.appendChild(td_element);
-		tbody_element.appendChild(tr_element);	
-		tbody_element.style.cursor = 'pointer';
-		
-		table_element.appendChild(tbody_element);
-		td_proc = document.getElementById("td_proc_" + ind);
-		td_proc.appendChild(table_element);
-		td_proc.className = "proc_td";
-		
-		createProcessMenu(ind, data[ind]);
-	}
-	
-	for (ix=data.length; ix < max_lines * max_columns; ix++) {
-		elem = document.getElementById("td_proc_" + ix);
-		elem.setAttribute("width", "112");
-		if (is_ie) {
-			elem.setAttribute("height", "119");
-		} else {
-			elem.setAttribute("height", "106");
-		}		
-		elem.innerHTML = "&nbsp;";		
-	}
+	})(0)
+
+	var div_bottom = document.createElement("DIV");
+	div_bottom.style.width = "100%";
+	div_bottom.style.clear = 'both';
+
+	div_conteiner.appendChild(div_bottom);
 }
 
@@ -245,6 +229,6 @@
 	/* define the menu position */
 	var processImage = $("processImage_" + index);
-	MENU_POS[0]['block_left'] = Position.page(processImage)[0] + processImage.getWidth();
-	MENU_POS[0]['block_top'] = Position.page(processImage)[1];
+	MENU_POS[0]['block_left'] = Position.cumulativeOffset(processImage)[0] + processImage.getWidth();
+	MENU_POS[0]['block_top'] = Position.cumulativeOffset(processImage)[1];
 
 	/* create the menu */
@@ -255,7 +239,30 @@
 {
 	for (var i = 0; i < A_MENUS.length; i++)
-		if (i == id)
+		if (i == id){
+
+			var processImage = $("processImage_" + id);
+			var posX = Position.cumulativeOffset(processImage)[0] + processImage.getWidth();
+			var posY = Position.cumulativeOffset(processImage)[1];
+
+			var firstItem = $("menuDiv_" + id).firstChild;
+
+			var deltaX = (posX - parseFloat(firstItem.style.left));
+			var deltaY = (posY - parseFloat(firstItem.style.top));
+
+			if(deltaX != 0){
+
+				var items = $("menuDiv_" + id).childNodes;
+
+				for(j = 0; j < items.length; j++){
+					if(items[j].style != null) {
+						items[j].style.left = parseFloat(items[j].style.left) + deltaX + 'px';
+						items[j].style.top  = parseFloat(items[j].style.top)  + deltaY + 'px';
+					}
+				}
+			}
+
 			$("menuDiv_" + i).show();
-		else
+
+		} else
 			$("menuDiv_" + i).hide();
 }
@@ -287,5 +294,5 @@
 		border_id = create_border("Sobre - " + data['wf_procname']);
 		content = document.getElementById("content_id_" + border_id);
-		
+
 		var table_proc = document.createElement("TABLE");
 		var tbody_proc = document.createElement("TBODY");
@@ -298,10 +305,10 @@
 		td_element.innerHTML = "Processo " + data['wf_procname'] + " (v" + data['wf_version'] + ")";
 		tr_element.appendChild(td_element);
-		tbody_proc.appendChild(tr_element);			
+		tbody_proc.appendChild(tr_element);
 		tr_element = document.createElement("TR");
 		tr_element.className = "info_tr_simple";
 		td_element = document.createElement("TD");
 		td_element.innerHTML = data['wf_description'];
-		tr_element.appendChild(td_element);		
+		tr_element.appendChild(td_element);
 		tbody_proc.appendChild(tr_element);
 		table_proc.appendChild(tbody_proc);
@@ -310,5 +317,5 @@
 		content.appendChild(table_proc);
 		content.appendChild(document.createElement("BR"));
-	
+
 		var table_activ = document.createElement("TABLE");
 		var tbody_activ = document.createElement("TBODY");
@@ -322,5 +329,5 @@
 		td_element.innerHTML = "Atividades do Processo";
 		tr_element.appendChild(td_element);
-		tbody_activ.appendChild(tr_element);			
+		tbody_activ.appendChild(tr_element);
 
 		for (ix = 0; ix < data['wf_activities'].length; ix++) {
@@ -335,8 +342,8 @@
 			td_element2.innerHTML = data['wf_activities'][ix]['wf_description'];
 			tr_element.appendChild(td_element1);
-			tr_element.appendChild(td_element2);	
+			tr_element.appendChild(td_element2);
 			tbody_activ.appendChild(tr_element);
 		}
-		
+
 		table_activ.appendChild(tbody_activ);
 		content.appendChild(table_activ);
