var JSBalloonPath  = null; ///will be overwritten
var js_isNav = (window.navigator.appName.toLowerCase().indexOf("netscape")>=0);
var js_isIE = (window.navigator.appName.toLowerCase().indexOf("microsoft")>=0);


/*	Class: JSBalloon
	Provides a flexible, encapsulated way to implement a passive feedback mechanism
	in a DHTML environment. Define and initialize this object globally, otherwise it will create a new instance 
	each time you call it's constructor. Set up the object with an object array passed to the constructor or, once instantiated,
	with properties.
*/
function JSBalloon()
{
	var tmrBalloonPopup;
	var imagePath;
	var blbWidth=250;;
	var titleFontStyle='font-family: MS Sans Serif;font-weight: bold; font-size:10pt;';
	var messageFontStyle='font-family: MS Sans Serif\; font-size:10pt\;';
	var footerFontStyle='font-family: MS Sans Serif\; font-size:10pt\;';
	var headerFontStyle='font-family: MS Sans Serif\; font-size:10pt\;';
	var transShow=true;
	var transHide=true;
	var transShowFilter='progid:DXImageTransform.Microsoft.Fade(Overlap=1.00)';
	var transHideFilter='progid:DXImageTransform.Microsoft.Fade(Overlap=1.00)';
	var autoHide=true;
	var autoHideInterval=4000; // 4 sec
	var autoAway=true;
	var showCloseBox=false;
	this.left;
	this.top;
	this.title;
	this.message;
	this.header;
	this.CloseButtonFunction;
	
	this.titleFontStyle=titleFontStyle;	
	this.messageFontStyle=messageFontStyle;
	this.footerFontStyle=footerFontStyle;
	this.headerFontStyle=headerFontStyle;
	this.transShowFilter=transShowFilter;
	this.transHideFilter=transHideFilter;	
	this.transShow=transShow;	
	this.transHide=transHide;	
	this.autoHide=autoHide;
	this.autoHideInterval=autoHideInterval;	
	this.autoAway=autoAway;
	this.width=blbWidth;		
	this.showCloseBox=showCloseBox;
	
	var childID;
	
	// Constructor
	var balloonDIV = document.createElement("DIV");
	balloonDIV.style.width=String(blbWidth) + "px";
	balloonDIV.style.position="absolute";
	balloonDIV.style.visibility="hidden";
	balloonDIV.style.left = 0;
	balloonDIV.style.top = 0;
	balloonDIV.style.filter=transShowFilter+' '+transHideFilter;
	balloonDIV.style.zIndex=2001;
	
	this.balloon=balloonDIV;

	// Pulic Methods
	this.Show=Show;
	this.Hide=Hide;
	
	this.GetTop = getTop;
	this.GetLeft = getLeft;
	
	function Show()
	{
		var title = this.title;
		var message= this.message;
		var icon='';
		var footer=this.footer;
		var header=this.header;
		var btop=0, bleft=0;
		var atop=0, aleft=0;
		var anchor;
		var direction='SE';
        
		// Updates
		blbWidth=String(this.width);
		titleFontStyle=this.titleFontStyle;
		messageFontStyle=this.messageFontStyle;		
		footerFontStyle=this.footerFontStyle;
		headerFontStyle = this.headerFontStyle;
		transShowFilter=this.transShowFilter;
		transHideFilter=this.transHideFilter;
		transShow=this.transShow;
		transHide=this.transHide;
		autoHide=this.autoHide;
		autoHideInterval=this.autoHideInterval;
		autoAway=this.autoAway;

    
		if(js_isIE && document.readyState!='complete')
		{
			alert('Document needs to fully load before you may show JSBalloons.');
			return;
		}
		
		// Figure out the best direction for the pointer
		var messageHTML = balloonBody(	title, 
													icon, 
													message, 
													footer, 
													this.titleFontStyle,
													this.messageFontStyle,
													this.footerFontStyle,
													this.showCloseBox, header, this.headerFontStyle, this.CloseButtonFunction);
				
		// Assume SE
		var ret=balloonInfrastructure(messageHTML, direction);
			
		// Populate the contents
		balloonDIV.innerHTML=ret;
		
		bleft = this.left;
		btop = this.top;
				
		// check if the object is already initialized
		if(typeof(childID)!='object')
		{
			childID=document.body.appendChild(balloonDIV);	
		}
		var balloonDIVTop;
		var balloonDIVLeft;
		
		balloonDIVLeft = bleft;
		balloonDIVTop  = (btop-balloonDIV.offsetHeight);
		
		
		var bAdjustedLeft=parseInt(balloonDIVLeft, 10);
		var showSE;
        
		if(document.body.offsetWidth < (bAdjustedLeft+balloonDIV.offsetWidth+20))
		{		
			direction='SW';
			
			ret=balloonInfrastructure(messageHTML, direction);
			balloonDIV.innerHTML=ret;
		
			balloonDIVLeft= bAdjustedLeft-balloonDIV.offsetWidth+20;
			showSE=false;
		}
		else
		{
			direction='SE';
			showSE=true;
		} 
		
		if(parseInt(balloonDIVTop, 10)<0)
		{
			if(showSE)
			{
				direction='NE';
				ret=balloonInfrastructure(messageHTML, direction);
				balloonDIV.innerHTML=ret;
			}
			else
			{
				direction='NW';
				ret=balloonInfrastructure(messageHTML, direction);
				balloonDIV.innerHTML=ret;
			}
			
			balloonDIVTop = parseInt(balloonDIVTop, 10)+balloonDIV.offsetHeight;
			
		}	
		
		// Adjust all srollers
		var scrollOffsets=ScrollOffsets();
		balloonDIVTop=parseInt(balloonDIVTop, 10)+scrollOffsets[0];
		balloonDIVLeft=parseInt(balloonDIVLeft, 10)+scrollOffsets[1];
		
		/*
		// Show balloon
		if(this.transShow)
		{
			balloonDIV.style.filter=this.transShowFilter+' '+this.transHideFilter;
			if(balloonDIV.filters(0).status==2 || balloonDIV.filters(0).status==1)
			{
				balloonDIV.filters(0).Stop();
			}
			balloonDIV.filters(0).Apply();
			balloonDIV.style.visibility='visible';
			balloonDIV.filters(0).Play();
		}
		else
		{
			balloonDIV.style.visibility='visible';
		}
		*/
		
		balloonDIV.style.top = balloonDIVTop + "px";

		if (window.htmlDir)
		{
	    if(htmlDir=="RTL" && js_isIE)
		    balloonDIVLeft=balloonDIVLeft-20;
		}
        balloonDIV.style.left = balloonDIVLeft + "px";
        
		balloonDIV.style.visibility='visible';
        
		
		//
		//alert("top: " + balloonDIV.style.top + ": Left: " + balloonDIV.style.left);
		//
		// Init autohide if true
		if(this.autoHide)
		{		    		    
			clearTimeout(this.tmrBalloonPopup);
			transHide=this.transHide;
			this.tmrBalloonPopup=setTimeout(this.Hide, this.autoHideInterval);
		}
		
		if(this.autoAway)
		{
			balloonDIV.onmouseover=Hide;
		}
		else
		{
			balloonDIV.onmouseover='';
		}
	}
	
	/*	Function: Hide
			Hide a visible balloon.
			Call this function to immediately initiate the hiding of the instantiated balloon 
			with the predefined transition in <transHideFilter> depending on the setting of <transHide>.
	*/
	function Hide()
	{	    
		if(balloonDIV.style.visibility=='hidden')
		{
			return;
		}
		       
		/*if(transHide) 
		{
			if(balloonDIV.filters(1).status==2 || balloonDIV.filters(1).status==1)
			{
				balloonDIV.filters(1).Stop();
			}
			balloonDIV.filters(1).Apply();
			balloonDIV.style.visibility='hidden';
			balloonDIV.filters(1).Play();
		}
		else*/
		{
			balloonDIV.style.visibility='hidden';
		}	
		

	}
	
	// Private
	
	function ObjectOverlap(obj1, obj2)
	{
		var obj1TopX = getLeft(obj1);
		var obj1TopY = getTop(obj1);
		var obj1BottomX = getLeft(obj1)+obj1.offsetWidth;
		var obj1BottomY = getTop(obj1)+obj1.offsetHeight;
		
		var obj2TopX = getLeft(obj2);
		var obj2TopY = getTop(obj2);
		var obj2BottomX = getLeft(obj2)+obj2.offsetWidth;
		var obj2BottomY = getTop(obj2)+obj2.offsetHeight;
		
		var overlapOnX = (obj1TopX < obj2BottomX && obj2TopX < obj1BottomX);
		var overlapOnY = (obj1TopY < obj2BottomY && obj2TopY < obj1BottomY);
		
		return (overlapOnX && overlapOnY);
	}

	//Positioning functions
	function getObjLeft(anObject) 
	{
	  return(anObject.offsetParent ? (getObjLeft(anObject.offsetParent) + anObject.offsetLeft) : anObject.offsetLeft);
	}
		 
	function getObjTop(anObject) 
	{
	  return(anObject.offsetParent ? (getObjTop(anObject.offsetParent) + anObject.offsetTop) : anObject.offsetTop); 
	}
		 
		 
	function getLeft(anObject) 
	{
	    return(getObjLeft(anObject));
	}
		 
	function getTop(anObject) 
	{
	    return(getObjTop(anObject));
	}
	
//	function ScrollOffsets1(anchor)
//	{
//		var aryScrolls = new Array(0,0);

//		try
//		{
//			var parentElem=anchor.parentElement;

//			while(parentElem!=null)
//			{
//				if(parentElem.scrollTop!=null)
//				{
//					aryScrolls[0]+=parseInt(parentElem.scrollTop, 10);
//					aryScrolls[1]+=parseInt(parentElem.scrollLeft, 10);
//				}
//	
//				parentElem=parentElem.parentElement;
//			}
//		}
//		catch(ex)
//		{
//			// continue
//		}
//		return aryScrolls;
//	}

	function ScrollOffsets() {
      var scrOfX = 0, scrOfY = 0;
     
      
      if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
      } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
      } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
      }
      
       if(window.htmlDir)
         {
         if (htmlDir=="RTL")
            scrOfX=0;
        }
     return [ scrOfY, scrOfX ];
}

	// Rendering functions
	function balloonInfrastructure(body, direction)
	{
		var ret;
		
		switch(direction)
		{
		
			case 'SE':
				// South East	
				
				ret ='<table class="JSBalloon" border="0" bordercolor="black" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width:100%;direction:ltr;" >'+
					'  <tr>'+					
					'    <td height="1" width="3">'+'<img border="0" src="'+JSBalloonPath+'/cLeftTop.gif" width="67" height="10" /></td>'+
					'    <td height="7" width="100%" style="border-top:1px solid #999999; border-left-width:1; border-right-width:1; border-bottom-width:1; background-color:#FFFFEA" colspan="4"></td>'+
					'    <td height="7"  width="10">'+'<img border="0" src="'+JSBalloonPath+'/cRightTop.gif" width="10" height="10" /></td>'+					
					'  </tr>'+
					'  <tr>'+
					'    <td valign=top colspan="6" style="border-left: 1px solid #999999; border-right: 1px solid #999999; background-color: #FFFFEA">'+
					body +
					'    </td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td width="10" height="7" style="background-color:Transparent;direction:ltr;float:left">'+
					'    <img border="0" src="'+JSBalloonPath+'/cLeftBottomBig.gif" width="67" height="10" /></td>'+
					'    <td height="7" style="background-color: #FFFFEA" colspan="4" width="280"></td>'+
					'    <td width="10" height="7" >'+
					'    <img border="0" src="'+JSBalloonPath+'/cRightBottom.gif" width="10" height="10" /></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td height="10">'+'<img border="0" src="'+JSBalloonPath+'/aSouthEast.gif" /></td>'+'<td width=100% height="10" style="border-top: 1px solid #999999; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"></td>'+
					'    <td width="70" height="10" style="border-top: 1px solid #999999; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"></td>'+
					'    <td width="10" height="10"></td>'+
					'    <td width="1" style="border-top: 1px solid #999999; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1" height="10"></td>'+ //
					'    <td width="10" height="10"></td>'+ //					
					'  </tr>'+
					'</table>'
					//document.write(ret);
					break;

			case 'SW':					
				// South West
				ret ='<div style="width:250px"><table class="JSBalloon" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width:100%;direction:ltr;" bordercolor="#111111" id="AutoNumber1" >'+
					'  <tr>'+
					'    <td height="1" width="3">'+'<img border="0" src="'+JSBalloonPath+'/cLeftTop1.gif" width="10" height="10" /></td>'+
					'    <td height="7" width="100%" style="border-top:1px solid #999999; border-left-width:1; border-right-width:1; border-bottom-width:1; background-color:#FFFFEA" colspan="4"></td>'+
					'    <td height="7"  width="10">'+'<img border="0" src="'+JSBalloonPath+'/cRightTop.gif" width="10" height="10" /></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td valign=top colspan="6" style="border-left: 1px solid #999999; border-right: 1px solid #999999;  background-color: #FFFFEA"">'+
					body +
					'    </td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td width="10" height="7">'+
					'    <img border="0" src="'+JSBalloonPath+'/cLeftBottom.gif" width="10" height="10" /></td>'+
					'    <td height="7" style="background-color: #FFFFEA" colspan="4" width="179"></td>'+
					'    <td width="11" height="7">'+
					'    <img border="0" src="'+JSBalloonPath+'/cRightBottom.gif" width="10" height="10" /></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td width="10" height="10"></td>'+
					'    <td width="70" style="border-top: 1px solid #999999; border-left-width:1; border-right-width:1; border-bottom-width:1" height="10"></td>'+
					'    <td  height="10" style="border-left-width: 1; border-right-width: 1; border-top: 1px solid #999999; border-bottom-width: 1" width="100%">'+
					'    </td>'+
					'    <td  align="right">'+
					'    <img border="0" src="'+JSBalloonPath+'/aSouthWest.gif" width="67" height="18" /></td>'+
					'    <td width="1" height="10" style="border-top: 1px solid #999999;"></td>'+
					'    <td width="10" height="10"></td>'+
					'  </tr>'+
					'</table></div>'
					break;
					
			case 'NE':	
					// North East
					ret ='<div style="width:250px"><table class="JSBalloon" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;width:100%;direction:ltr;" bordercolor="#111111" id="AutoNumber1" >'+
					'   <tr>'+
					'    <td width="10" height="9"></td>'+
					'    <td width="1" style="border-bottom:1px solid #999999; " height="9"></td>'+
					'    <td  height="9" valign="bottom">'+
					'    <img border="0" src="'+JSBalloonPath+'/aNorthEast.gif" width="67" height="18" /></td>'+
					'    <td width=100% height="9" style="border-bottom:1px solid #999999; "></td>'+
					'    <td width="70" height="9" style="border-bottom:1px solid #999999;"></td>'+
					'    <td width="10" height="9"></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td height="1" width="10">'+
					'    <img border="0" src="'+JSBalloonPath+'/cLeftTop1.gif" width="10" height="10" /></td>'+
					'    <td height="7" width=100% colspan="4" bgcolor="#FFFFEA"></td>'+
					'    <td height="7"  width="10">'+
					'    <img border="0" src="'+JSBalloonPath+'/cRightTop.gif" width="10" height="10" /></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td valign=top colspan="6" style="border-left: 1px solid #999999; border-right: 1px solid #999999; background-color: #FFFFEA">'+
					body +
					'    </td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td width="10" height="7">'+
					'    <img border="0" src="'+JSBalloonPath+'/cLeftBottom.gif" width="10" height="10" /></td>'+
					'    <td height="7" style="border-bottom:1px solid #999999; border-left-width:1; border-right-width:1; border-top-width:1" colspan="4" width="280" bgcolor="#FFFFEA"></td>'+
					'    <td width="10" height="7">'+
					'    <img border="0" src="'+JSBalloonPath+'/cRightBottom.gif" width="10" height="10" /></td>'+
					'  </tr>'+
					'</table></div>'
					break;
					
			case 'NW':	
					// North West			
					ret ='<div style="width:250px"><table class="JSBalloon" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;width:100%;direction:ltr;" bordercolor="#111111" id="AutoNumber1" >'+
					'  <tr>'+
					'    <td width="10" height="10"></td>'+
					'    <td width="70" style="border-bottom:1px solid #999999;  border-left-width:1; border-right-width:1; " height="10"></td>'+
					'    <td  height="10" style="border-bottom:1px solid #999999; border-left-width: 1; border-right-width: 1; " width="100%">'+
					'    </td>'+
					'    <td  align="right" valign="bottom">'+
					'    <img border="0" src="'+JSBalloonPath+'/aNorthWest.gif" width="67" height="18" /></td>'+
					'    <td width="1" height="10" style="border-bottom:1px solid #999999;"></td>'+
					'    <td width="10" height="10"></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td height="1" width="10">'+
					'    <img border="0" src="'+JSBalloonPath+'/cLeftTop1.gif" width="10" height="10" /></td>'+
					'    <td height="7" width=179 colspan="4" bgcolor="#FFFFEA"></td>'+
					'    <td height="7"  width="11">'+
					'    <img border="0" src="'+JSBalloonPath+'/cRightTop.gif" width="10" height="10" /></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td valign=top colspan="6" style="border-left: 1px solid #999999; border-right: 1px solid #999999;  background-color: #FFFFEA">'+
					body +
					'    </td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td width="10" height="7">'+
					'    <img border="0" src="'+JSBalloonPath+'/cLeftBottom.gif" width="10" height="10" /></td>'+
					'    <td height="7" style="border-bottom:1px solid #999999; border-left-width:1; border-right-width:1; border-top-width:1" colspan="4" width="179" bgcolor="#FFFFEA"></td>'+
					'    <td width="11" height="7">'+
					'    <img border="0" src="'+JSBalloonPath+'/cRightBottom.gif" width="10" height="10" /></td>'+
					'  </tr>'+
					'</table></div>'
					break;
		}
		
		
		return ret;
	}
	
	function balloonBody(title, icon, body, footer, titleFontStyle, 
						messageFontStyle, footerFontStyle,
						showCloseBox, header, headerFontStyle, closeButtonFunction)
	{
		var imgShow='none';
		var iconTitle='';
		var ballonBody=body;
		var imgClose='none';
		var headerVisible='block';
		var offsetParent="-7";
		
		if(title!=undefined)
		{
			iconTitle=title;
		}
				
		if(showCloseBox)
		{
			imgClose='block';
		}
		else
		{
			imgClose='none';
		}
		
		if(icon != '')
		{
			imgShow='block';
		}
		else
		{
			imgShow='none';
		}
		
		if(imgShow=='none' && imgClose=='none' && iconTitle=='')
		{
			headerVisible='none';
			offsetParent="0";
		}
		else
		{
			headerVisible='block';
			offsetParent="-7";
		}
 
		return '    <table border="0" cellpadding="3" cellspacing="0" style="cursor:default;border-collapse: collapse; position:relative; top: '+offsetParent+';left:3;direction:ltr;" width="100%">' + 
				'      <tr style="display:'+headerVisible+'">' + 
				'        <td id="BIcon" width="3%" align=left><img id=BIcon src="'+icon+'" style="display:'+imgShow+'" /></td>' + 
				'        <td id="BTitle" UNSELECTABLE="on" width="90%" style="'+titleFontStyle+'" align=left>'+iconTitle+'</td>' + 
				'        <td id="BClose" width="3%" valign=top align=right><img src="'+JSBalloonPath+'/close.jpg" style="position:relative; top: 4;left:-5;display:'+imgClose+'" onmouseover="this.src=\''+JSBalloonPath+'/closeActive.jpg\'" onmouseout="this.src=\''+JSBalloonPath+'/close.jpg\'" onmouseup="this.src=\''+JSBalloonPath+'/closeActive.jpg\'" onmousedown="this.src=\''+JSBalloonPath+'/closeDown.jpg\'" title="Close" onclick="eval(' + closeButtonFunction + ');" />&nbsp;</td>' + 
				'      </tr>' + 				
				'       <tr>' + 
				'        <td id="BFooter" UNSELECTABLE="on" style="'+headerFontStyle+'" width="100%" colspan="3">' + header +'</td>' + 
				'      </tr>' + 				
				'      <tr>' + 
				'        <td id="BBody" UNSELECTABLE="on" style="'+messageFontStyle+'" width="100%" colspan="3">' + ballonBody +'</td>' + 
				'      </tr>' + 
				'       <tr>' + 
				'        <td id="BFooter" UNSELECTABLE="on" style="'+footerFontStyle+'" width="100%" colspan="3">' + footer +'</td>' + 
				'      </tr>' + 
				'    </table>'
	}
}