/**
 * Mensagem podem facilmente inseridas utilizando a chamada "mensagem.put("Titulo da mensagem", ["um item de mendagem", "um item de mensagem"], "OK");"
 * 
 * Os tipos de mensagem são: OK, ERRO, ALERTA
 * O tipo default é ALERTA
 * Para mensagem de linha unica, coloque a no titulo.
 */

var Mensagem = function(){
	var PropsMensag = function(complementoClasse){
		var imgP1 = "<img src='"+funcs.baseProjeto+"/fmk/imagem/", 
			imgP2 = ".gif' style='vertical-align: middle;'>";
		this.$ImgAlerta = imgP1+"alerta"+imgP2;
		this.$ImgErro = imgP1+"erro"+imgP2;
		this.$ImgSucesso = imgP1+"sucesso"+imgP2;
		
		this.$mensagemBloco = $("#container_mensagem.container_mensagem"+complementoClasse+"");
		if(this.$mensagemBloco.length == 0){
			var menu = $("#menu_horizontal_conectado"),
			item;
			
			if(menu.length == 0){
				item = $("body").prepend("<div id='container_mensagem"+complementoClasse+"'></div>").find("#container_mensagem"+complementoClasse);
			}else{
				item = menu.after("<div id='container_mensagem"+complementoClasse+"'></div>").siblings("#container_mensagem"+complementoClasse);
			}
			
			item.html("<div hidden='true' id='container_mensagem' class='container_mensagem"+complementoClasse+"' style='text-align: center; width: 100%; display: none; position: relative;'>"
				+"<div style='text-align:center;width:100%;display:table;'>"
					+"<div id='mensagem' style='border-radius: 10px;background-color: #FAFFBD' class='bordaCaixa'>"
					+"<b class='b1'></b><b class='b2'></b><b class='b3'></b><b class='b4'></b>"
						+"<div class='tipo_mensagem mensagemAviso' style='background-color: rgb(250, 255, 189);'>"
							+"<div class='mensagem_acao'>"
								+"<img src='"+funcs.baseProjeto+"/fmk/imagem/fechar.gif' class='mensagem_fechar'>"
							+"</div>"
							+"<span class='imagem'><img src='"+funcs.baseProjeto+"/fmk/imagem/alerta.gif' style='vertical-align: middle;'></span>"
							+"<span class='mensagem-titulo'>Mensagem!</span>"
							+"<span id='itens'></span>"
						+"</div>"
					+"<b class='b4'></b><b class='b3'></b><b class='b2'></b><b class='b1'></b>"
					+"</div>"
				+"</div>"
			+"</div>");
			this.$mensagemBloco = $("#container_mensagem.container_mensagem"+complementoClasse+"");
		}
		
		this.$container = $("#container_mensagem"+complementoClasse);
		this.$mensagemOriginal = $("#container_mensagem.container_mensagem"+complementoClasse+" #mensagem");
		this.$mensagemTipo = $("#container_mensagem.container_mensagem"+complementoClasse+" .tipo_mensagem");
		this.$mensagemAcao = $("#container_mensagem.container_mensagem"+complementoClasse+" .mensagem_acao");
		this.$mensagemImagem = $("#container_mensagem.container_mensagem"+complementoClasse+" .imagem");
		this.$mensagemTitulo = $("#container_mensagem.container_mensagem"+complementoClasse+" .mensagem-titulo");
		this.$mensagemItens = $("#container_mensagem.container_mensagem"+complementoClasse+" #itens");
		this.TIME_TRANSI = 500;
		this.$mensagemOriginal.find("b").css({'border-radius': '10px', 'background-color': '#FAFFBD'});
	
		return this;
	};
	
	this.put = function(titulo, itensMensagensArray, tipo, naoFecha){
		var complementoClasse=new Date().toISOString().replace(/[\D]/g,"");
		var propsMensag = new PropsMensag(complementoClasse);
		
		var classe = "mensagemAviso", img = propsMensag.$ImgAlerta, itens = "", timeSleep = 2000, qtdLinhas = 1;
		
		if(tipo == "ERRO"){
			classe = "mensagemErro";
			img = propsMensag.$ImgErro;
		}
		if(tipo == "OK"){
			classe = "mensagemOk";
			img = propsMensag.$ImgSucesso;
		}
		
		propsMensag.$mensagemTipo.removeAttr("hidden").removeAttr("class").addClass("tipo_mensagem "+classe);
		propsMensag.$mensagemImagem.html(img);
		propsMensag.$mensagemTitulo.html(" "+titulo);
		
		if(itensMensagensArray){
			if($.isArray(itensMensagensArray)){
				$.each(itensMensagensArray ,function(i, item){
					if(item){
						qtdLinhas++;
						itens+="<ul id='errors' class='mensagem_lista_erros'><li>"+item+"</li></ul>";
					}
				});
			}else{
				qtdLinhas++;
				itens+="<ul id='errors' class='mensagem_lista_erros'><li>"+itensMensagensArray+"</li></ul>";
			}
		}
		
		propsMensag.$mensagemItens.html(itens);
		propsMensag.$mensagemBloco.fadeIn(0);
		propsMensag.$mensagemOriginal.fadeIn(0);
		propsMensag.$mensagemBloco.css({position:'relative'});
		propsMensag.$mensagemOriginal.css({'background-color': '#FAFFBD'});
		propsMensag.$mensagemTipo.css({'background-color': '#FAFFBD'});
		
		setTimeout(function(){
			if(!funcs.inScopoVisao(propsMensag.$mensagemTipo)){
				propsMensag.$mensagemBloco.css({top: '3%', left: 0, position:'fixed'});
			}
			if(naoFecha !== true) {
				setTimeout(function() {
					propsMensag.$mensagemBloco.fadeOut(propsMensag.TIME_TRANSI);
					
					//TODO recuperar uma para cada 
					setTimeout(function(){
						propsMensag.$container.remove();
					}, propsMensag.TIME_TRANSI+20);
				}, timeSleep*qtdLinhas+3000);				
			}
			
		}, propsMensag.TIME_TRANSI);
	};
	this.inScopoVisao = function(element) {
		if (typeof jQuery === "function" && element instanceof jQuery) {
			element = element[0];
		}
		var elementBounds = element.getBoundingClientRect();
		return (
				elementBounds.top >= 0 &&
				elementBounds.left >= 0 &&
				elementBounds.bottom <= $(window).height() &&
				elementBounds.right <= $(window).width()
		);
	};
	this.camposObrigatorios = function(){
		$("#popup_container").find("#popup_ok").click();
		this.put("Os campos marcados com asterisco (*) são obrigatórios");
	};
	this.baseProjeto = "/sivisa";
	
	var funcs = this;
	return this;
},
mensagem = undefined;

jQuery(document).ready(function(){
	mensagem = new Mensagem();
	
	$('body').delegate('.mensagem_fechar','click', function() {
		$('div#mensagem').fadeOut("500");
    });
});