// -----------------------------------------------------------------------------
// Script:  GetActivePopup.js
// Project : NPD/5994 Imperative, Imperative Health Limited.. Scale-up
// Copyright ©2006 Imperative Health Limited. All rights reserved. 
//	
// Description:
//      GetActive's floating help system.
//
//      See notes, below.
//   
//  Modification History
//
//  Version		Date				By			Description
//  V1R1M0		09/02/2006			ADCS		Created.
//  V1R1M1      13/02/2006          ADCS        Define styles using CSS rules; Draggable.
//  V1R1M2      24/02/2006          ADCS        Generalised code for reuse in JuiceBalance; Renamed to GetActivePopup.
//  V1R1M3      27/02/2006          ADCS        Easy to choose whether to display anchor.
//  V1R1M4      07/02/2007          HUND        Updated the rendered HTML on the left and right cells to use CSS styling
//                                                 and to use background image property and background repeat so that the
//                                                 control renders in XHTML1
//                                                 Note: May need to follow up by doing this to all cells if further rendering problems appear
//  V1R1M5      19/04/2007          FLID        Position adjustment modified so that it works in firefox too.
//  V1R1M6      20/06/07            STUT        implemented directional anchors and height/width classes
//
//-------------------------------------------------------------------------------

/* Get Active Help bubbles, based on the IE6 only JSballoon. All unnecessary and
 inherently non-portable portions and features were removed. ADCS 06/02/2006. */

/*----------------------------------------------------------------------------\
|                               JSballoon                                     |
|-----------------------------------------------------------------------------|
|                   Created by Arkady (Alex) Lesniara                         |
|                           (arkady@lesniara.com)                             |
|-----------------------------------------------------------------------------|
|                  Copyright (c) 2005 Arkady Lesniara                         |
|-----------------------------------------------------------------------------|
| This software is provided "as is", without warranty of any kind, express or |
| implied, including  but not limited  to the warranties of  merchantability, |
| fitness for a particular purpose and noninfringement. In no event shall the |
| authors or  copyright  holders be  liable for any claim,  damages or  other |
| liability, whether  in an  action of  contract, tort  or otherwise, arising |
| from,  out of  or in  connection with  the software or  the  use  or  other |
| dealings in the software.                                                   |
\----------------------------------------------------------------------------*/

/*
 * This directory specifies the location of the images used in building the pop-up.
 */
var HelpImagesPath="images/MiLifeHelp/";

/*	Class: GetActivePopup
	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 its constructor. Set up the object, once instantiated,
	with properties.
	
	Section: Usage
		Examples of the object instantiation.
	
	Examples:
	
	(start code)
	var bl=new GetActivePopup({ width:300});
	var b2=new GetActivePopup();
	var b3=new GetActivePopup({	width:150, 
							autoAway:false, 
							autoHide:false,
							showCloseButton:true});
							
	(end)
	
	Section: Include Setup Notes
		Please read before installing.
		
		Set the global variable HelpImagesPath to the full application path (or URL) where 
		it is located. 
		
		Make sure you included the trailing forward slash.
		
	Examples:
		- var HelpImagesPath="/appname/includes/js/GetActiveBubble/";
		- var HelpImagesPath="http://prodserver/appname/includes/js/GetActiveBubble/";
*/
function MiLifePopup()
{
	var tmrbubblePopup;
	
	var blbWidth=200;
	var titleFontStyle='popupTitleText';
	var messageFontStyle='popupMessageText';
	var popupType='';
	var autoHide=true;
	var autoHideInterval=5000; // 5 seconds
	var autoAway=true;
	var showCloseButton=true;
	var showAnchor=false;
	var defPanelClassHeight = 'helpPopupHeight';
	var defPanelClassWidth = 'helpPopupWidth';
	var defDirection = 'SW';

	
	var isIE = document.all ? true : false;
	
	// Public properties
	
	/*	Property: titleFontStyle
			Sets or retrieves a Cascading Style Sheet formatted value that formats the bubble's title (heading).
		
		Syntax:
			object.titleFontStyle [= sCSS ]
			
		Possible Values:
			sCSS - *variant* that specifies a properly formed Cascading Style Sheet formatting.
			
		Examples:
			bubbleObj.titleFontStyle="font-family:Arial; font-weight:bold; font-size:12pt;";
	*/
	this.titleFontStyle=titleFontStyle;
	
	/*	Property: messageFontStyle
			Sets or retrieves a Cascading Style Sheet formatted value that formats the bubble's main message body.

		Syntax:
			object.messageFontStyle [= sCSS ]
			
		Possible Values:
			sCSS - *variant* that specifies a properly formed Cascading Style Sheet formatting.
			
		Examples:
			bubbleObj.messageFontStyle="font-family:Arial; font-weight:bold; font-size:12pt;";
	*/	
	this.messageFontStyle=messageFontStyle;
	
	/*	Property: popupType
			Sets or retrieves a string defining the type of popup to display.  This type controls the
			image filenames and body CSS.  Default value is "Help".

		Syntax:
			object.popupType [= sType ]
			
		Examples:
			bubbleObj.popupType="Help";
	*/	
    this.popupType=popupType;

	/*	Property: autoHide
			Sets or retrieves a value indicating whether to automatically hide the bubble 
			after s time specified in <autoHideInterval>.
			
		Syntax:
			object.autoHide [= bValue ]
			
		Possible Values:
			bValue - *boolean* true / false
		
		Examples:
			bubbleObj.autoHide=true;
			
		See also:
			<autoHideInterval>
	*/	
	this.autoHide=autoHide;
	
	/*	Property: autoHideInterval
			Sets or retrieves a value indicating how long to wait before executing <autoHide>.
			
		Syntax:
			object.autoHideInterval [= iValue ]
			
		Possible Values:
			iValue - *integer* number of milliseconds to wait before activating <autoHide>.
		
		Examples:
			bubbleObj.autoHideInterval=5000; // 5 Sec
			
		See also:
			<autoHide>
	*/	
	this.autoHideInterval=autoHideInterval;
	
	/*	Property: autoAway
			Sets or retrieves a value of this property. 
			When set to true the bubble will immediately run the <Hide> method on mouse over.
			
			This is particularly useful when the bubble is used only for passive feedback and 
			doesn't have to be dismissed. The user may want to perform some task quickly without having
			to wait the time specified in the <autoHideInterval> while the bubble is obstructing a page
			element.
			
		Syntax:
			object.autoAway [= bValue ]
			
		Possible Values:
			bValue - *boolean* true / false
		
		Examples:
			bubbleObj.autoAway=true;
	*/	
	this.autoAway=autoAway;
	
	/*	Property: width
			Sets or retrieves a value of bubble's width. The height is dynamic, the width has to be specified.
			
		Syntax:
			object.width [= iValue ]
			
		Possible Values:
			iValue - *integer* the number of pixels.
		
		Examples:
			bubbleObj.width=325;
	*/		
	this.width=blbWidth;
	/*	Property: showCloseButton
			Sets or retrieves a value of whether the close bubble (right-upper corner) should be displayed.
			It makes sense to turn <autoHide> off when enabling this feature.
			
		Syntax:
			object.showCloseButton [= bValue ]
			
		Possible Values:
			bValue - *boolean* true / false
		
		Examples:
			bubbleObj.showCloseButton=false;
	*/	
	this.showCloseButton=showCloseButton;
			
	/*	Property: showAnchor
			Sets or retrieves a value of whether the anchor should be displayed.
			
		Syntax:
			object.showAnchor [= bValue ]
			
		Possible Values:
			bValue - *boolean* true / false
		
		Examples:
			bubbleObj.showAnchor=true;
	*/	
	this.showAnchor=showAnchor;
	/*	Property: anchorDirection
			Sets or retrieves a value of the direction of the anchor displayed
			
		Syntax:
			object.anchorDirection [= bValue ]
			
		Possible Values:
			bValue - 'NW','SW','SE','NE'
		
		Examples:
			bubbleObj.showAnchor='NW';
	*/		
	this.anchorDirection=defDirection;
	
	/*	Property: helpPopUpPanelClassHeight
	              helpPopUpPanelClassWidth
			Classes to set width and height of the juice popup
			
		Syntax:
			object.helpPopUpPanelClassHeight [= bValue ]
			
		Possible Values:
			bValue - *string* css class
		
		Examples:
			bubbleObj.helpPopUpPanelClassHeight ="helpPopupPanel3";
	*/	

    this.helpPopUpPanelClassHeight = defPanelClassHeight;
    this.helpPopUpPanelClassWidth =  defPanelClassWidth;
        	
//eventhandler for starting dragging that stops dragging when vertical scroll bar is used
function scrollCheckOnDrag(o,x,y,e)
{
        if(e == null)
            evnt = event;
        else
            evnt = e;
        var widthstr;
        var widthClient;
        var pos;
        var outer = findElementById("outerPanel");
        var scrollPanel = findElementById("scrollPanel");
       
        var isSafari = (navigator.userAgent.indexOf("Safari") > -1)?true:false;
       if(isIE || isSafari)
        {
            
            //detect whether a vertical scrollbar present - if so do not affect drag
            if (scrollPanel.scrollHeight <= scrollPanel.clientHeight || scrollPanel.clientHeight == 0)
            {
                return true;
            } 

            widthClient = outer.scrollWidth;
            
            //sacrifice of the right hand edge for dragging in IE to stop pop-up sticking
            widthClient = widthClient - 60;
            pos = evnt.x;
            
            if (isSafari)
            {
                // Loop up the DOM until the parent window is found
                obj = outer;
                while(obj = obj.offsetParent)
                {
                    pos = pos - obj.offsetLeft;
                }
            }
            
            //switch off dragging on right hand side of panel
            if(pos > widthClient)
              Drag.haltDrag = true; 
            else 
              bubbleDIV.style.cursor="move";
        }
        else
        {
            //detect whether a vertical scrollbar present - if so do not affect drag
            if (scrollPanel.scrollHeight <= scrollPanel.clientHeight)
            {
                return true;
            } 

            widthstr = o.clientWidth;
            widthClient = parseInt(widthstr);
            widthClient = widthClient;
            //on scrollbar layer co-ords give 1-16
            pos = evnt.layerX;
            
            //layer is scrollbar or very edge of pop up panel - must sacrifice edge to make it work
            var targetTag = evnt.target.tagName.toLowerCase();
            if(pos < 17 && targetTag.indexOf('div') > -1)
              Drag.haltDrag = true; 
            else 
              bubbleDIV.style.cursor="move";

            
        }   

    return true;
}

	
	var childID;
	
	// Construct container div element.
	var bubbleDIV = document.createElement("div");
	bubbleDIV.style.width=String(blbWidth);
	bubbleDIV.style.position="absolute";
	bubbleDIV.style.cursor="pointer";
	bubbleDIV.style.visibility="hidden";
	bubbleDIV.style.zIndex=2500;
	bubbleDIV.id = "outerPopUp";
	
	//Make draggable.
	Drag.init(bubbleDIV);
	bubbleDIV.onDragStart = scrollCheckOnDrag;
    bubbleDIV.onDragEnd = function(o, x, y) { bubbleDIV.style.cursor="pointer"; }
		

		
	/*	Property: bubble
			Retrieves the reference to the instantiated bubble object.
			
		Syntax:
			[obj =] object.bubble
			
		Possible Values:
			obj - *object* bubble reference
		
		Examples:
			var obj = bubbleObj.bubble;
	*/
	this.bubble=bubbleDIV;

	// Pulic Methods
	this.Show=Show;
	this.Hide=Hide;
	
	/*	Function: Show
			Makes the instantiated bubble appear.
			
		bubble content note: 
			Because SELECT objects are windowed controls (they ignore zIndex attribute)
			they need to be hidden when bubbles are shown, otherwise they will always be on top.
			It is normally done automatically by this control.
			Sometimes, however, you may want to place a drop-down inside the bubble itself.
			To override this default behaviour add an bubbleMember expand attribute to 
			the SELECT you are placing within.
			
			- e.g. <SELECT id=select1 name=select1 bubbleMember=true>
			
		Syntax:
			(start code)
			object.Show({[title:vTitle]
						 [,message:vMessage]
						 [,top:vTop]
						 [,left:vLeft]
						 [,anchor:vAnchor]
						 [,icon:vIcon]
						 });
			(end)
						 
		Possible Values:
			vTitle - *string* Optional title text for the bubble.
			vMessage - *string* Optional. Message body for the bubble.
			vTop - *integer* Optional. Offset from the top of the screen or top of an anchor.
			vLeft - *integer* Optional. Offset from the left of the screen or left of an anchor.
			vAnchor - *object* Optional. Reference to the object that the bubble should use as reference for location. 
			vIcon - *string* Optional. Possible icon values may include one of the values below (case sensitive):
				 - Exclaim - pre-defined, triangle with an exclamation point.
				 - Stop - pre-defined, red circle with a white x inside.
				 - Info - pre-defined, white bubble with a letter "i" inside *Default*
				 - Help - a question mark inside a blue circle.
				 - a relative path to a custom icon.
			
		Examples:
			
			- bubbleObj.Show({title:'JavaScript bubble Example',message:'This is an example of a GetActiveBubble object. Its primary application is to provide a modeless feedback to DHTML applications.',anchor:tableCellObj, icon:'Info'});
			- bubbleObj1.Show({title:'JavaScript bubble Example',message:'This is an example of a GetActiveBubble object. Its primary application is to provide a modeless feedback to DHTML applications.',anchor:tableCellObj});
			- bubbleObj2.Show({message:'This is an example of a GetActiveBubble object. Its primary application is to provide a modeless feedback to DHTML applications. ',anchor:tableCellObj});
	
	*/
	function Show()
	{
		var title;
		var message='';
		var icon='';
		var btop=0, bleft=0;
		var atop=0, aleft=0;
		var anchor;

		// Updates
		titleFontStyle=this.titleFontStyle;
		messageFontStyle=this.messageFontStyle;
		autoHide=this.autoHide;
		autoHideInterval=this.autoHideInterval;
		autoAway=this.autoAway;
		showAnchor=this.showAnchor;
		
		
		if(Show.arguments.length>0)
		{
			var oArg=Show.arguments[0];
			
			if(oArg.title!=null)
			{
				title=oArg.title;
			}
			
			if(oArg.message!=null)
			{
				message=oArg.message;
			}
			
			if(oArg.icon!=null)
			{
				icon=oArg.icon;
				
				switch(icon)
				{
					case 'Exclaim':
						icon = HelpImagesPath+'exclaim.png';
						break;
						
					case 'Stop':
						icon = HelpImagesPath+'stop.png';
						break;
						
					case 'Info':
						icon = HelpImagesPath+'info.png';
						break;
					
					case 'Help':
						icon = HelpImagesPath+'help.png';
						break;
											
					case 'None':
						icon = '';
						break;
						
					default:
				}
			}
			
			if(oArg.top!=null)
			{
				btop=oArg.top;
			}
			
			if(oArg.left!=null)
			{
				bleft=oArg.left;
			}
			
			if(oArg.anchor!=null)
			{
			    if (typeof oArg.anchor == 'string')
			    {
			        oArg.anchor = eval(oArg.anchor);
			    }
				
				anchor=oArg.anchor;
				atop=getTop(anchor);
				aleft=getLeft(anchor);
			}
		}

		bubbleDIV.style.width=String(this.width);

		// Populate the contents
		var bBody = bubbleBody(title, icon, message, this.titleFontStyle, this.messageFontStyle, 
		    this.showCloseButton, this.helpPopUpPanelClassHeight);
		bubbleDIV.innerHTML = bubbleRender(bBody, this.anchorDirection, this.helpPopUpPanelClassWidth);
		// Check if the object is already initialized
		if(typeof(childID)!='object')
		{
			childID=document.body.appendChild(bubbleDIV);	
		}
        
        // Position the popup
		if(anchor!=null)
		{
		    // Left offset
		    var leftOffset = aleft + bleft;
		    leftOffset = leftOffset.toString() + "px";
			bubbleDIV.style.left = leftOffset;

            // Top offset
            var topOffset = (atop - bubbleDIV.offsetHeight) + btop;

            if (!isIE)
            {
                // Necessary to get popups positioned correctly in Firefox
                topOffset += 20;
            }
		    topOffset = topOffset.toString() + "px";
			bubbleDIV.style.top = topOffset;
		}
		else
		{
			bubbleDIV.style.left = bleft.toString() + "px";
			bubbleDIV.style.top = btop.toString() + "px";	
		}
	
		/* Adjust the position of the popup if it will be off the right of the window */
		var bAdjustedLeft = parseInt(bubbleDIV.style.left, 10);
		var showSW = true;
		var popupWidth = parseInt(bubbleDIV.offsetWidth, 10);
		var windowWidth = parseInt(window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : 0, 10);

		// Does the current position of the popup mean it hangs off the rhs of the browser window
		if (bAdjustedLeft + popupWidth > windowWidth)
		{
		    // Right hand offset, note: vertical scrollbar width not subtracted from window width
		    var rightHandOffset = 20;
		
	        // Move the popup so that fits on the window
	        bubbleDIV.style.left = (windowWidth - popupWidth - rightHandOffset) + "px";
		}
		
		// Adjust the position of the popup if it will be off the top of the window
		var topOffset = parseInt(bubbleDIV.style.top, 10);
		if(topOffset < 0)
		{
			bubbleDIV.style.top = 20 + "px";
		}
		
		if(this.showCloseButton)
		{
            btnClose=findElementById("BClose");
			btnClose.onclick=this.Hide;
		}

		// Hide any overlapping selects
		SuppressSelects();
		
		bubbleDIV.style.visibility='visible';
		bubbleDIV.style.display = "block";
					
		// Init autohide if true
		if(this.autoHide)
		{
			clearTimeout(this.tmrbubblePopup);
			transHide=this.transHide;
			this.tmrbubblePopup=setTimeout(this.Hide, this.autoHideInterval);
		}

		if(this.autoAway)
		{
			bubbleDIV.onmouseover=Hide;
		}
		else
		{
			bubbleDIV.onmouseover='';
		}
	}
	
	/*	Function: Hide
			Hide a visible bubble.
	*/
	function Hide()
	{
				

		if(bubbleDIV.style.visibility=='hidden')
		{
			return;
		}
		
		bubbleDIV.style.visibility='hidden';
		
		//CloseFrames();
		RestoreSelects();
		RemoveTextFocus();
	}
	
	// Private
//    //remove iframes on exercise plan page
//    function CloseFrames()
//    {
//        var selObjects=document.getElementsByTagName("IFRAME");
//		if(selObjects != null)
//		{
//		    for(var i=0;i<selObjects.length;i++)
//		    {
//			    if(selObjects[i].className=="noteFrame")
//			        selObjects[i].style.display = 'none';
//		    }
//		}

//    }

	// Private
    //remove focus from text areas otherwise cursor still visible
    function RemoveTextFocus()
    {
        var selObjects=document.getElementsByTagName("TEXTAREA");
		if(selObjects != null)
		{
		    for(var i=0;i<selObjects.length;i++)
		    {
			    if(selObjects[i].className=="note_text")
			        selObjects[i].blur();
		    }
		}

    }

	function SuppressSelects()
	{
		var selObjects=document.getElementsByTagName("SELECT");
		
		for(var i=0;i<selObjects.length;i++)
		{	
			if(selObjects[i].bubbleMember!='true')
			{
				if(selObjects[i].style.visibility=='visible' || selObjects[i].style.visibility=='')
				{
					//if(ObjectOverlap(bubbleDIV, selObjects[i]))
					//{
						selObjects[i].style.visibility='hidden';
						// Mark as bubblehidden
						selObjects[i].bubbleHidden=true;
					//}
				}
			}
		}
	}
	
	function RestoreSelects()
	{
		var selObjects=document.getElementsByTagName("SELECT");
		
		for(var i=0;i<selObjects.length;i++)
		{	
			if(selObjects[i].bubbleHidden)
			{
				selObjects[i].style.visibility='visible';
				// Mark as bubblehidden
				selObjects[i].bubbleHidden=false;
			}
		}
	}
	
	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 getLeft(anObject) 
	{
        var ret;

        if (anObject.offsetParent)
        {
            // Recursive call
            if (!isIE)
            {
//                if (anObject.className == 'pagePanel0')
//                {
//                    ret = getLeft(anObject.offsetParent);
//                }
//                else 
//                {
		    	    //dont add influence of master page
		    	    //if(!(anObject.id.indexOf("MasterPage") > -1))
		           // {
                        ret = anObject.offsetLeft + getLeft(anObject.offsetParent);
                    //}
//                }
            }
            else
            {
                ret = anObject.offsetLeft + getLeft(anObject.offsetParent);
            }
        }
        else
        {
            ret = anObject.offsetLeft;            
        }

        return ret;	
    }
		 
	function getTop(anObject) 
	{
        var ret;

        if (anObject.offsetParent)
        {
            // Recursive call
            
            if (!isIE)
            {
                if (anObject.className == 'contentPanel0' || anObject.className == 'headerPanel0'
                         || anObject.className == 'pagePanel0')
                {
                    ret = getTop(anObject.offsetParent);
                }
                else 
                {
                    ret = anObject.offsetTop + getTop(anObject.offsetParent);
                }
            }
            else
            {
                ret = anObject.offsetTop + getTop(anObject.offsetParent);
            }
        }
        else
        {         
            ret = anObject.offsetTop;
        }
        //alert("id = "  + anObject.id + " ret = " + ret); 

        return ret;
	}

	// Rendering functions	
	function bubbleRender(body, direction, helpPopUpPanelClassWidth)
	{
		var ret;
		
		if (showAnchor==false)
		{

				ret = '<table class="helpLayoutTable'+popupType+'" cellpadding="0" cellspacing="0">'+
					'  <tr class =' + "'popupRow'"+'>'+
					'    <td class = "cLeftTop"</td>'+
					'    <td class ="cCentreTop" colspan="3"</td>'+
					'    <td class = "cRightTop"</td>'+					
					'  </tr>'+
					'  <tr height="100%">'+
					'    <td class="eLeft"></td>'+
					'    <td valign=top colspan="3">'+ body +'</td>'+
					'    <td class="eRight"></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td height="15" width="15"><img src="'+HelpImagesPath+'cLeftBottom'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="100%" colspan="3"><img src="'+HelpImagesPath+'eBottom'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="15" width="15"><img src="'+HelpImagesPath+'cRightBottom'+popupType+'.png" width="15" height="15"></td>'+
					'  </tr>'+
					'</table>';
		}
		else
		{
    		switch(direction)
	    	{			
		    	case 'SW':
		    	
		    		// South West
					ret = '<table class="helpLayoutTable' + popupType + '" cellpadding="0" cellspacing="0">'+
					'  <tr>'+
					'    <td height="15" width="15"><img src="'+HelpImagesPath+'cLeftTop'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="100%" colspan="3"><img src="'+HelpImagesPath+'eTop'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="15" width="15"><img src="'+HelpImagesPath+'cRightTop'+popupType+'.png" width="15" height="15"></td>'+
					'  </tr>'+
					'  <tr height="100%">'+
					'    <td class="eLeft"></td>'+
					'    <td valign=top colspan="3">'+ body +'</td>'+
					'    <td class="eRight"></td>'+
					'  </tr>'+
					'  <tr>'+
					'    <td height="15" width="15" style="vertical-align: top;"><img src="'+HelpImagesPath+'cLeftBottom'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="10" style="vertical-align: top;"><img src="'+HelpImagesPath+'eBottom'+popupType+'.png" height="15" width="10"></td>'+
					'    <td height="35" width="60" style="vertical-align: top;"><img src="'+HelpImagesPath+'aSouthWest'+popupType+'.gif" height="35" width="60"></td>'+
					'    <td height="15" width="100%" style="vertical-align: top;"><img src="'+HelpImagesPath+'eBottom'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="15" width="15" style="vertical-align: top;"><img src="'+HelpImagesPath+'cRightBottom'+popupType+'.png" height="15" width="15"></td>'+
					'  </tr>'+
					'</table>';
					break;
					
				case 'SE':
			    	// South East
					ret = '<table class="helpLayoutTable'+popupType+'" cellpadding="0" cellspacing="0">'+
					'  <tr>'+
					'    <td height="15" width="15"><img src="'+HelpImagesPath+'cLeftTop'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="100%" colspan="3"><img src="'+HelpImagesPath+'eTop'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="15" width="15"><img src="'+HelpImagesPath+'cRightTop'+popupType+'.png" width="15" height="15"></td>'+
					'  </tr>'+
					'  <tr height="100%">'+
					'    <td class="eLeft"></td>'+
					'    <td valign=top colspan="3">'+ body +'</td>'+
					'    <td class="eRight"></td>'+
					'  </tr>'+
					'  <tr>'+
				    '    <td height="15" width="15" style="vertical-align: top;"><img src="'+HelpImagesPath+'cLeftBottom'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="100%" style="vertical-align: top;"><img src="'+HelpImagesPath+'eBottom'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="35" width="60" style="vertical-align: top;"><img src="'+HelpImagesPath+'aSouthEast'+popupType+'.gif" height="35" width="60"></td>'+
					'    <td height="15" width="10" style="vertical-align: top;"><img src="'+HelpImagesPath+'eBottom'+popupType+'.png" height="15" width="10"></td>'+
					'    <td height="15" width="15" style="vertical-align: top;"><img src="'+HelpImagesPath+'cRightBottom'+popupType+'.png" height="15" width="15"></td>'+
					'  </tr>'+
					'</table>';
					break;
					
		    	case 'NE':
			    	// North East
					ret = '<table class="helpLayoutTable'+popupType+'" cellpadding="0" cellspacing="0">'+
					'  <tr>'+
					'    <td height="15" width="15" style="vertical-align: bottom;"><img src="'+HelpImagesPath+'cLeftTop'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="100%" style="vertical-align: bottom;"><img src="'+HelpImagesPath+'eTop'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="35" width="60"><img src="'+HelpImagesPath+'aNorthEast'+popupType+'.gif" height="35" width="60"></td>'+					
					'    <td height="15" width="10" style="vertical-align: bottom;"><img src="'+HelpImagesPath+'eTop'+popupType+'.png" height="15" width="10"></td>'+
					'    <td height="15" width="15" style="vertical-align: bottom;"><img src="'+HelpImagesPath+'cRightTop'+popupType+'.png" width="15" height="15"></td>'+
					'  </tr>'+
					'  <tr height="100%">'+
					'    <td class="eLeft"></td>'+
					'    <td valign=top colspan="3">'+ body +'</td>'+
					'    <td class="eRight"></td>'+
					'  </tr>'+
					'  <tr>'+
				    '    <td height="15" width="15" style="vertical-align: top;"><img src="'+HelpImagesPath+'cLeftBottom'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="100%" colspan="3" style="vertical-align: top;"><img src="'+HelpImagesPath+'eBottom'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="15" width="15" style="vertical-align: top;"><img src="'+HelpImagesPath+'cRightBottom'+popupType+'.png" height="15" width="15"></td>'+
					'  </tr>'+
					'</table>';
					break;
				case 'NW':
		    		// North West
					ret = '<table class="helpLayoutTable'+popupType+'" cellpadding="0" cellspacing="0">'+
					'  <tr>'+
					'    <td height="15" width="15" style="vertical-align: bottom;"><img src="'+HelpImagesPath+'cLeftTop'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="10" style="vertical-align: bottom;"><img src="'+HelpImagesPath+'eTop'+popupType+'.png" height="15" width="10"></td>'+
					'    <td height="35" width="60"><img src="'+HelpImagesPath+'aNorthWest'+popupType+'.gif" height="35" width="60"></td>'+					
					'    <td height="15" width="100%" style="vertical-align: bottom;"><img src="'+HelpImagesPath+'eTop'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="15" width="15" style="vertical-align: bottom;"><img src="'+HelpImagesPath+'cRightTop'+popupType+'.png" width="15" height="15"></td>'+
					'  </tr>'+
					'  <tr height="100%">'+
					'    <td class="eLeft"></td>'+
					'    <td valign=top colspan="3">'+ body +'</td>'+
					'    <td class="eRight"></td>'+
					'  </tr>'+
					'  <tr>'+
				    '    <td height="15" width="15" style="vertical-align: top;"><img src="'+HelpImagesPath+'cLeftBottom'+popupType+'.png" width="15" height="15"></td>'+
					'    <td height="15" width="100%" colspan="3" style="vertical-align: top;"><img src="'+HelpImagesPath+'eBottom'+popupType+'.png" height="15" width="100%"></td>'+
					'    <td height="15" width="15" style="vertical-align: top;"><img src="'+HelpImagesPath+'cRightBottom'+popupType+'.png" height="15" width="15"></td>'+
					'  </tr>'+
					'</table>';
					break;
		    	default:
				}
		}
		ret = '<div id="outerPanel" class="'+ helpPopUpPanelClassWidth + '">' + ret + '</div>';
		return ret;
	}
	
	function bubbleBody(title, icon, body, titleFontStyle, 
						messageFontStyle, showCloseButton, helpPopUpPanelClassHeight)
	{
		var iconTitle='';
		var bubbleBody=body;
		var headerVisible='';
		
		if(title!=undefined)
		{
			iconTitle=title;
		}
		
		var imgClose = (showCloseButton) ? 'block' : 'none';
		var imgShow = (icon != '') ? 'block' : 'none';
				
		if(imgShow=='none' && imgClose=='none' && iconTitle=='')
		{
			headerVisible='none';
		}
		
		//Removed since this causes Safari to render the Close button left aligned
		/*else
		{
			headerVisible='block';
		}*/
		
		var returnValue = 
				'    <table class="popupBodyTable'+popupType+'" cellpadding="3" cellspacing="0" style="position:relative;" width="100%">' + 
				'      <tr style="display:'+headerVisible+'">' + 
				'        <td id="BTitle" width="100%" class="'+titleFontStyle+'" align=left>';
				
				if (imgShow != 'none') {
				    returnValue = returnValue + '          <img id=BIcon src="'+icon+'" style="display:'+imgShow+'">'+iconTitle+'</td>';
				}
				
		returnValue = returnValue + '        <td id="BClose" width="17" height="17" valign=top align=right><img src="'+HelpImagesPath+'close.png" style="position:relative; display:'+imgClose+'" onmouseover="this.src=\''+HelpImagesPath+'close_active.png\'" onmouseout="this.src=\''+HelpImagesPath+'close.png\'" onmouseup="this.src=\''+HelpImagesPath+'close_active.png\'" onmousedown="this.src=\''+HelpImagesPath+'close_down.png\'" title="Close"></td>' + 
				'      </tr>' + 
				'      <tr>' + 
				'        <td id="BBody" class="'+messageFontStyle+'" width="100%" colspan="2">' +
				'          <div id="scrollPanel" class="'+helpPopUpPanelClassHeight+'">' + bubbleBody + '</div></td>' + 
				'      </tr>' + 
				'    </table>';

		return  returnValue;

	}
}

function ChangeScrollingPanelClass(newClass)
{
    var scroll = findElementById('scrollPanel');
    scroll.className = newClass;
}


function ChangeWidthClass(newClass)
{
    var widthPanel = findElementById('outerPanel');
    widthPanel.className = newClass;
}