function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}
function Popup(elementName, options, message) {
// attributes
this.element = elementName;
this.message = message;
this.options = options;
// methods
this.show = show;
this.hide = hide;
this.toggle = toggle;
this.createPopup = createPopup;
this.createPopup();
}
function createPopup() {
var coord = findPos(this.element);
var elementX = coord[0]; //+ this.element.offsetWidth; //anas
var elementY = coord[1];
// popupDiv
var pDiv = document.createElement('div');
pDiv.style.width = 'auto';
pDiv.style.height = 'auto';
pDiv.style.padding = '10px';
pDiv.style.position = 'absolute';
pDiv.style.zIndex = 520;
var moreLeft = 0;
if(this.options && this.options.left) {
moreLeft = this.options.left;
}
pDiv.style.left = (elementX+moreLeft)+'px';
// top
var moreTop = 0;
if(this.options && this.options.top) {
moreTop = this.options.top;
}
pDiv.style.top = (elementY+moreTop)+'px';
if(this.message) {
pDiv.innerHTML = this.message;
}
pDiv.style.display = 'none';
pDiv.id = 'popup_tooltip';
this.pDiv = pDiv;
document.body.appendChild(this.pDiv);
}
function show() {
this.pDiv.style.display = 'inline';
var coord = findPos(this.element);
if(this.options.xLocation == 'left') {
var moreLeft = 0;
if(this.options && this.options.left) {
moreLeft = this.options.left;
}
this.pDiv.style.left = coord[0] + moreLeft + this.element.offsetWidth - this.pDiv.offsetWidth+'px';
}
if(this.options.yLocation == 'top') {
var moreTop = 0;
if(this.options && this.options.top) {
moreTop = this.options.top;
}
this.pDiv.style.top = coord[1] + moreTop + this.element.offsetHeight - this.pDiv.offsetHeight+'px';
}
}
function hide() {
//this.pDiv.style.display = 'none';
document.body.removeChild(this.pDiv);
}
function toggle() {
if(this.pDiv.style.display == 'none') {
this.pDiv.style.display = 'inline';
} else {
//this.pDiv.style.display = 'none';
document.body.removeChild(this.pDiv);
}
}
var x = new Array();
var pWindow = new Array();
var prevElement;
function hideWindow(element) {
if(x[element]) {
if(x[element].pDiv.style.display != 'none') {
x[element].hide();
x[element] = null;
}
} else if(pWindow[element]) {
if(pWindow[element].pDiv.style.display != 'none') {
pWindow[element].hide();
pWindow[element] = null;
}
}
}
function toolTipWindow(element, message, windowXLocation, windowYLocation, topValue, leftValue) {
if(!x[element]) {
x[element] = new Popup(document.getElementById(element), {'xLocation':windowXLocation,'yLocation':windowYLocation, 'top': topValue, 'left': leftValue}, message);
x[element].pDiv.onmouseout = function(e) {
if(x[element]) {
var posx = 0;
var posy = 0;
var saveSpace = 10;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
var coord = findPos(x[element].pDiv);
var elementRangeX = coord[0] + x[element].pDiv.offsetWidth;
var elementRangeY = coord[1] + x[element].pDiv.offsetHeight;
if(posx <= coord[0] + saveSpace || posx >= elementRangeX - saveSpace || posy <= coord[1] + saveSpace || posy >= elementRangeY - saveSpace - 10) {
hideWindow(element);
}
}
};
}
if(prevElement != element) {
if(prevElement) {
hideWindow(prevElement);
}
prevElement = element;
}
x[element].show();
}
function popupWindow(element, message, windowXLocation, windowYLocation, topValue, leftValue) {
if(!pWindow[element]) {
pWindow[element] = new Popup(document.getElementById(element), {'xLocation':windowXLocation,'yLocation':windowYLocation, 'top': topValue, 'left': leftValue}, message);
}
if(prevElement != element) {
if(prevElement) {
hideWindow(prevElement);
}
prevElement = element;
}
pWindow[element].show();
}
function balloon(element, message, direction, margin, withClose, width, duration) {
var style='';
if(margin) {
if(direction == 'rtl') {
style = 'margin-right:'+margin+'px;';
} else {
style = 'margin-left:'+margin+'px;';
}
}
if(width) {
style += ' width:'+width+'px;';
}
balloonHtml =
'' +
'
' +
'' +
' | ' +
' | ' +
' | ' +
' | '+
'
' ;
if(withClose) {
balloonHtml +=
''+
' | ' +
' | ' +
'X | ' +
' | ' +
'
';
}
balloonHtml +='' +
' | ' +
' | ' +
''+message+' | ' +
' | ' +
'
' +
'';
if(direction == 'rtl') {
balloonHtml = balloonHtml + ' | ' +
' | '+
' | ';
} else {
balloonHtml = balloonHtml + ' | ' +
' | ' +
' | ';
}
balloonHtml = balloonHtml + '
' +
'' +
' | ' +
' | ' +
' | ' +
' | ' +
'
' +
'
' +
'
' +
'
' +
'' +
' | ' +
' | ' +
' | ' +
' | '+
'
' ;
if(withClose) {
balloonHtml +=
''+
' | ' +
' | ' +
'X | ' +
' | ' +
'
';
}
balloonHtml +='' +
' | ' +
' | ' +
''+message+' | ' +
' | ' +
'
' +
'';
if(direction == 'rtl') {
balloonHtml = balloonHtml + ' | ' +
' | '+
' | ';
} else {
balloonHtml = balloonHtml + ' | ' +
' | ' +
' | ';
}
balloonHtml = balloonHtml + '
' +
'' +
' | ' +
' | ' +
' | ' +
' | ' +
'
' +
'
' +
'
' +message+'
';
if(direction == 'rtl') {
if(withClose || duration) {
popupWindow(element, balloonHtml, 'left', 'top', 38, 219);
} else {
toolTipWindow(element, balloonHtml, 'left', 'top', 41, 219);
}
} else {
if(withClose || duration) {
popupWindow(element, balloonHtml, 'right', 'top', 41, 207);
} else {
toolTipWindow(element, balloonHtml, 'right', 'top', 41, 207);
}
}
if(duration) {
setTimeout('hideWindow(\''+element+'\');', duration);
}
}
// this function is a clone from balloon edited by Mohamed for the need of
// post need big popup message
function balloon2_modification(element, message, direction, margin, withClose, width, duration) {
var style='';
if(margin) {
if(direction == 'rtl') {
style = 'margin-right:'+margin+'px;';
} else {
style = 'margin-left:'+margin+'px;';
}
}
if(width) {
style += ' width:'+width+'px;';
}
balloonHtml =
'' +message+'
';
if(direction == 'rtl') {
if(withClose || duration) {
popupWindow(element, balloonHtml, 'left', 'top', -7, 604);
} else {
toolTipWindow(element, balloonHtml, 'left', 'top', 26, 604);
}
} else {
if(withClose || duration) {
popupWindow(element, balloonHtml, 'right', 'top', 26, 592);
} else {
toolTipWindow(element, balloonHtml, 'right', 'top', 26, 592);
}
}
if(duration) {
setTimeout('hideWindow(\''+element+'\');', duration);
}
}
function balloon2(element, message, direction, margin, withClose, width, duration) {
var style='';
if(margin) {
if(direction == 'rtl') {
style = 'margin-right:'+margin+'px;';
} else {
style = 'margin-left:'+margin+'px;';
}
}
if(width) {
style += ' width:'+width+'px;';
}
balloonHtml =
'' +message+'
';
if(direction == 'rtl') {
if(withClose || duration) {
popupWindow(element, balloonHtml, 'left', 'top', 25, 5);
} else {
toolTipWindow(element, balloonHtml, 'left', 'top', 25, 5);
}
} else {
if(withClose || duration) {
popupWindow(element, balloonHtml, 'right', 'top', 25, -5);
} else {
toolTipWindow(element, balloonHtml, 'right', 'top', 25, -5);
}
}
if(duration) {
setTimeout('hideWindow(\''+element+'\');', duration);
}
}