﻿var infoBalloon;
var infoBalloonTop;
var infoBalloonBtm;
var infoBalloonContent;
var balloonOffsetX = -16;
var balloonOffsetY = 0;
var balloonOpacity = 0.95;

function createInfoBalloon(html){
    infoBalloon = createDiv({id:'infoBalloon', css:'infoBalloon'});
    infoBalloon.style.position = 'absolute';
    infoBalloon.style.display = 'none';
    infoBalloon.style.zIndex = '100';
    setOpacity(infoBalloon, balloonOpacity);
    if(document.body){ document.body.appendChild(infoBalloon); }
    else{ addEvent(window, 'load', function(){ document.body.appendChild(infoBalloon); }); }
    infoBalloonTop = createDiv({css:'bubTop'});
    infoBalloonBtm = createDiv({css:'bubBtm'});
    infoBalloonContent = createDiv({css:'infoBalloonContent',html:html});
    infoBalloon.appendChild(infoBalloonTop);
    infoBalloon.appendChild(infoBalloonBtm);
    infoBalloonBtm.appendChild(infoBalloonContent);
    addEvent(document, 'click', hideInfoBalloon);
}

if(!infoBalloon){
	createInfoBalloon(TXT_CONVERTED_INFO);
}

function showInfoBalloon(elem, e, replaceText){
    if(!infoBalloon){
        createInfoBalloon(TXT_CONVERTED_INFO);
    }

    cancelEventBubble(e);
    if(infoBalloonContent){
        if(replaceText){
            var infoText = replace(TXT_CONVERTED_INFO,'%1',replaceText);
            infoBalloonContent.innerHTML = infoText;
        }
        var pos = findPos(elem);
        infoBalloon.style.display = '';
        var x = balloonOffsetX + elem.offsetWidth;
        var y = balloonOffsetY + (infoBalloon.offsetHeight*-1);
        infoBalloon.style.top = (pos.top + y) + 'px';
        infoBalloon.style.left = (pos.left + x) + 'px';
    }
}

function hideInfoBalloon(){
	if(infoBalloon){ infoBalloon.style.display = 'none'; }
}