$(document).ready(function (){
	simple_tooltip_button(".mail_icon_box","mail_tooltip");
	
	$("#mail_icons_legend").mouseover(function(){
		
		var tableIcons = "<table border='1' cellpading='0' cellspacing='0'>";
		tableIcons = tableIcons + "<tr><th colspan='2'>Tipos de Noticias</th></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_type_1'></div></td><td>NOTICIA</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_type_2'></div></td><td>ERROR EN SISTEMAS</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_type_3'></div></td><td>ERROR EN JUEGOS</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_type_4'></div></td><td>SUGERENCIA</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_type_5'></div></td><td>DUDA</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_type_6'></div></td><td>INFORMACION</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_type_7'></div></td><td>RESPUESTA</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_type_8'></div></td><td>REENVIO</td></tr>";
		tableIcons = tableIcons + "<tr><th colspan='2'>Estatus de Noticias</th></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_status_1'></div></td><td>NO LEIDO</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_status_2'></div></td><td>LEIDO</td></tr>";
		tableIcons = tableIcons + "<tr><th colspan='2'>Estatus de Errores</th></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_status_3'></div></td><td>REPORTADO</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_status_4'></div></td><td>EN PROCESO</td></tr>";
		tableIcons = tableIcons + "<tr><td><div class='mail_icon_status_5'></div></td><td>RESUELTO</td></tr>";
		tableIcons = tableIcons + "</table>";
		
		$("body").append("<div class='mail_tooltip' id='mail_tooltip_h'>"+tableIcons+"</div>");
		
		var my_tooltip = $("#mail_tooltip_h");

		$(this).removeAttr("title").mouseover(function(){
			my_tooltip.css({display:"none"}).fadeIn(500);
		}).mousemove(function(kmouse){
			my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
		}).mouseout(function(){
			my_tooltip.fadeOut(500);
		});
	});
});
function simple_tooltip_button(target_items, name){
	var typOpt = "";
	var indexed = 0;
	var toShow = "";
	$(target_items).each(function(i){
 		typOpt = $(this).attr('id').substring(0,3);
 		indexed = $(this).attr('value');
 		toShow = $(this).attr("title");
 		
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+toShow+"</p></div>");
		var my_tooltip = $("#"+name+i);

		$(this).removeAttr("title").mouseover(function(){
			my_tooltip.css({display:"none"}).fadeIn(500);
			$(this).css({
				'border-bottom': 'none',
				'border-right': 'none',
				'border-top': '2px gray solid',
				'border-left': '2px gray solid'
			});	
		}).mousemove(function(kmouse){
			my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
		}).mouseout(function(){
			my_tooltip.fadeOut(500);
			$(this).css({
				'border-top': 'none',
				'border-left': 'none',
				'border-bottom': '2px gray solid',
				'border-right': '2px gray solid'
			});
		}).click(function(){
			window.location = $(this).children("span").text();
		});
	});
}