// JScript File

//showComents(ico, idComent, content) - Mostra o balão com o comentário
function showComents(ico, idComent, content){    
    var divComent = document.getElementById(idComent);
    var divBalao = '';
    var divTop = '';
    var divMid = '';
    var divBot = '';    
    var idDivTop = '';
    var idDivMid = '';
    var idDivBot = '';
    var topElem = 0;
    var leftElem = 0;

    //Verifica se o div ja foi criado anteriormente
    if(divComent != null){
        divComent.style.display = 'block';
        
        idDivTop = 'divBalaoTop'+idComent;
        idDivMid = 'divBalaoMid'+idComent;
        idDivBot = 'divBalaoBot'+idComent;
        
        topElem = getElementPosition(ico).top;
        topElem -= getElementPosition(idDivTop).height;
        topElem -= getElementPosition(idDivMid).height;
        topElem -= getElementPosition(idDivBot).height;
        topElem += 'px';
             
        divComent.style.top = topElem;
    }else{

        //Verifica o browser para criar os divs
	    if(browser == 'Microsoft Internet Explorer'){
		    divBalao = document.createElement("<div></div>");
		    divTop = document.createElement("<div></div>");  
		    divMid = document.createElement("<div></div>");
		    divBot = document.createElement("<div></div>");

	    }else if(browser == 'Netscape'){
	        divBalao = document.createElement("div");	
		    divTop = document.createElement("div");	
		    divMid = document.createElement("div");  
		    divBot = document.createElement("div");	
	    }

        //Atribui as classes e estilos aos divs
        divBalao.id = idComent;
        divBalao.className = 'divBalao';        
        divBalao.style.display = 'block';        

        //define os atributos do div top
        idDivTop = 'divBalaoTop'+idComent
        divTop.id = idDivTop;
	    divTop.className = 'divBalaoTop';

	    //insere o div
	    divBalao.appendChild(divTop);	    

    	//define os atributos do div mid
    	idDivMid = 'divBalaoMid'+idComent;
    	divMid.id = idDivMid;
	    divMid.className = 'divBalaoMid';
	    divMid.innerHTML = content;

	    //insere o div
	    divBalao.appendChild(divMid);

    	//define os atributos do div bot
    	idDivBot = 'divBalaoBot'+idComent;
    	divBot.id = idDivBot;
	    divBot.className = 'divBalaoBot';

	    //insere o div
	    divBalao.appendChild(divBot);
	    
	    //insere o div
	    document.getElementById('divBaloes').appendChild(divBalao); 
	    
	    //Pega o top do icone(?)
        topElem = getElementPosition(ico).top;
        
        //Define o style.top do balão        
        topElem -= getElementPosition(idDivTop).height;
        topElem -= getElementPosition(idDivMid).height;
        topElem -= getElementPosition(idDivBot).height;
        topElem += 'px';
        
        //Pega o left do icone(?)
        leftElem = getElementPosition(ico).left;
        
        //Define o style.left do balão
        leftElem -= 140;
        leftElem += 'px';
        
        //define os atributos do div balao
        divBalao.style.top = topElem;
        divBalao.style.left = leftElem;
    }
	
}

//hidComent(idComent) - Oculta o balão do comentário
function hidComent(idComent){
    document.getElementById(idComent).style.display = 'none';
}

//getPosicaoElemento(elementId) - Retorna a posição do elemento
function getElementPosition(elementId){
    var offsetTrail = document.getElementById(elementId);
    var offsetLeft = 0;
    var offsetTop = 0;
    var offsetHeight = 0;
	
    while(offsetTrail){
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
	
    if(navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined"){
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    
    offsetHeight = document.getElementById(elementId).offsetHeight;    
	
    return {left:offsetLeft, top:offsetTop, height:offsetHeight};
}