/***************************************************************\
|* FILE: HelpManager.js																				 *|
|* DESC: HelpManager Class.																		 *|
|*																														 *|
|* AUTH: Harel Gruia																					 *|
|* CONTRIBUTORS:																							 *|
|* DATE: 01/01/2008																						 *|
|*									Copyright Tegrity Ltd 2008								 *|
\***************************************************************/

//////////////////////////////////////////////////////////////////////////////////
//															class HelpEntry																	//
//															---------------																	//
// Use:																																					//
//																																							//
//////////////////////////////////////////////////////////////////////////////////
function HelpEntry(sHelpBodyText,oRefObj,eLocation,sHeaderText,sPicUrl,oRefParentFrameObj)
{	 
	// Set members.
	this.sHelpBodyText = IsString(sHelpBodyText) ? sHelpBodyText: "";
	this.oRefObj			 = IsString(oRefObj) ? document.getElementById(oRefObj) : oRefObj; 
	this.eLocation		 = !isNaN(eLocation) ? eLocation : HelpManager.LC_TOP;
	this.sHelpHeadText = IsString(sHeaderText) ? sHeaderText : "Welcome to Tegrity!";
	this.sPicUrl			 = IsString(sPicUrl) ? sPicUrl : "";
	
	this.oRefRect			= new Rect();
	this.oCueRect			= new Rect();
	this.bValid				= false;
	
	this.nCueOffsetX = 0;
	this.nCueOffsetY = 0;
	this.oCueFrameDiv = null;
	
	// Validate input parameters.
	// [1] Existence - The reference object and the help text are mandatory.	
	if( arguments.length < 2 || !IsObject(this.oRefObj) || !IsString(this.sHelpBodyText))
		return;
		
	// [2] Reference Object 	
	if(!IsObject(this.oRefObj.style)) 
		return;
	
	// Get the Reference element in rect in body coordinates. 	
	this.oRefRect		= GetDivRect(this.oRefObj,true,true); 
	/*
	alert(this.oRefRect.top);
	this.oRefRect.top-=283;			
	this.oRefRect.bottom-=283;			
	if(IsObject(oRefParentFrameObj)){
		alert(oRefParentFrameObj.offsetTop);
		var oRefParentFrameRect=GetDivRect(oRefParentFrameObj,true,true);
		this.oRefRect.top+=oRefParentFrameRect.top;
		this.oRefRect.left+=oRefParentFrameRect.left;
		this.oRefRect.bottom+=oRefParentFrameRect.top;
		this.oRefRect.right+=oRefParentFrameRect.left;
	}
	*/

  this.bValid=this.oRefRect.width && this.oRefRect.height;		
  ////this.oCueRect=GetDivRect(this.oRefObj,true,true);
} // HelpEntry

//////////////////////////////////////////////////////////////////////////////////
//															class HelpManager																//
//															-----------------																//
// Use:																																					//
//																																							//
//////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////
//										Class Constants
////////////////////////////////////////////////////////////
// - Show Modes.
HelpManager.SM_HIDE			= 1;
HelpManager.SM_SHOW_ONE = 2;
HelpManager.SM_SHOW_ALL = 3;
HelpManager.SM_SHOW_MAP = 4;
HelpManager.SM_LAST			= HelpManager.SM_SHOW_MAP;

// - Sizes.
HelpManager.POINTER_WIDTH		= 22;
HelpManager.POINTER_HEIGHT	= 14;
////HelpManager.CUE_WIDTH = 325;  -- replaced with constCueWidth param
////HelpManager.CUE_HEIGHT = 190; -- replaced with constCueHeight param
HelpManager.CUE_PAD			= 5;
HelpManager.MASK_PAD		= 1;

// - Cue Location.
HelpManager.LC_INVALID	= 0; 
HelpManager.LC_TOP			= 1;
HelpManager.LC_LEFT			= 2;
HelpManager.LC_RIGHT		= 3;
HelpManager.LC_BOTTOM		= 4;

// - Mask Params.
HelpManager.MASK_ZORDER = GetMaxZOrder()-5;

// - Timeouts.
HelpManager.TO_SHOW_ALL = 10000; // -1 = Infinite.

////////////////////////////////////////////////////////////
//											Constructors
////////////////////////////////////////////////////////////
function HelpManager(sHelpXml, fnOnDone, constCueWidth, constCueHeight,maskAll)
{
    this.Init(sHelpXml, fnOnDone, constCueWidth, constCueHeight, maskAll);
	
	/**
	// Call the actual Constructor.
	if( arguments.length == 0 )
		this.Init();
	else if( arguments.length == 1 )
		this.Init(sHelpXml);
 	else if( arguments.length == 2 )
		this.Init(sHelpXml,fnOnDone);
	**/
	
	
} // HelpManager 

////////////////////////////////////////////////////////////
//													Methods
////////////////////////////////////////////////////////////
//-----------------------------------------------------------------------
HelpManager.prototype.Init = function(sHelpXml, fnOnDone, constCueWidth, constCueHeight, maskAll) {
    // The Default Constructor.

    // Public Members.
    this.sHelpXml = IsString(sHelpXml) ? sHelpXml : "";

    this.oHelpArr = new Array();
    this.oMaskDivArry = Array();

    // Sizes.
    this.constCueWidth = constCueWidth;
    this.constCueHeight = constCueHeight;

    this.nCueWidth = Math.min(this.constCueWidth, GetBodyRect().width >> 1);
    this.nCueHeight = Math.min(this.constCueHeight, GetBodyRect().height >> 1);

    //mask
    this.bMaskAll=maskAll;

    this.fnOnDone = fnOnDone;
    ////this.AddHelpIntro();	
}   // HelpManager.Init

//-----------------------------------------------------------------------
HelpManager.prototype.toString = function()
{
	return "HelpManager[size="+this.oHelpArr.length+"]";
} // HelpManager.toString

//-----------------------------------------------------------------------
HelpManager.prototype.RenderHelpCues = function() 
{
	//if(!IsString(this.sHelpXml))
		//this.AddHelpEntries(); // Debug Init.
	if(IsString(this.sHelpXml))
	  this.ParseHelpXml();	 // Init from Help XML file.
	
	// Calculate Cues locations and offsets.
this.CalcCuesLocation();
} // HelpManager.RenderHelpCues

//-----------------------------------------------------------------------
HelpManager.prototype.AddHelpIntro = function() 
{
	var oBodyRect	= GetBodyRect(document.getElementById("frmPlayer"));
	var oHelpIntroDiv = AppendNewDiv(document.body, "HelpIntro_HelpDiv", oBodyRect.width>>1, oBodyRect.height>>1, 0,1,1);	
	this.oHelpArr.push(new HelpEntry("Let's take a brief look at some of the useful tools that Tegrity offers.<BR>We're working hard to make it easy for you.",oHelpIntroDiv,HelpManager.LC_INVALID));
} // HelpManager.AddHelpEntries

//-----------------------------------------------------------------------
HelpManager.prototype.AddHelpEntry = function(sHelpBodyText, oRefObj, eLocation, sHeaderText, sPicUrl, oRefParentFrameObj) {
    

    var H = new HelpEntry(sHelpBodyText, oRefObj, eLocation, sHeaderText, sPicUrl, oRefParentFrameObj);
    if (H.bValid) this.oHelpArr.push(H);

    
    /*
    var H1 = new HelpEntry("Help1 fgfdg oufghfuh sdfuhsdfiuh.","PresentationButton",HelpManager.LC_TOP);
    var H2 = new HelpEntry("Help2 fgfdg oufghfuh sdfuhsdfiuh.","VolumeSliderLine",HelpManager.LC_TOP);
    var H3 = new HelpEntry("Help3 fgfdg oufghfuh sdfuhsdfiuh.","maximize",HelpManager.LC_BOTTOM);
    var H4 = new HelpEntry("Help4 fgfdg oufghfuh sdfuhsdfiuh.","TextBackground",HelpManager.LC_RIGHT);
    var	H5 = new HelpEntry("Help5 fgdfk jijoij ojoijj oijoj ojojo  ;lkjkjlkjl. ","SearchButton",HelpManager.LC_RIGHT);
    var	H6 = new HelpEntry("Help6 ------- -------- -------- ------.","Links",HelpManager.LC_RIGHT);
	  
    if(H1.bValid) this.oHelpArr.push(H1);
    if(H2.bValid) this.oHelpArr.push(H2);
    if(H3.bValid) this.oHelpArr.push(H3);
    if(H4.bValid) this.oHelpArr.push(H4);
    if(H5.bValid) this.oHelpArr.push(H5);
    if(H6.bValid) this.oHelpArr.push(H6);
    */
}  // HelpManager.AddHelpEntries

//-----------------------------------------------------------------------
HelpManager.prototype.Show = function(eMode) 
{	
	var oThis = this;
	
	// Set to default mode if not available. 
	eMode = ( isNaN(eMode) || eMode > HelpManager.SM_LAST ) ? HelpManager.SM_SHOW_ONE : eMode;
	
	switch(eMode)
	{
	case HelpManager.SM_HIDE:
		for(var i=0; i<this.oHelpArr.length; i++)
			this.ShowElementCue(eMode,i);

        if (this.fnOnDone!=null)
	        this.fnOnDone();
	break;
	case HelpManager.SM_SHOW_ONE:
		if(this.oHelpArr.length) 
			this.ShowElementCue(eMode,0);
	break;
	case HelpManager.SM_SHOW_ALL:
		for(var i=1; i<this.oHelpArr.length; i++)
			this.ShowElementCue(eMode,i);
		// Show all, only for a limited time.
		if( !isNaN(HelpManager.TO_SHOW_ALL) &&  HelpManager.TO_SHOW_ALL >= 0)
			setTimeout(function(){oThis.Show(HelpManager.SM_HIDE);}, HelpManager.TO_SHOW_ALL);
	break;
	case HelpManager.SM_SHOW_MAP:
			this.ShowHelpMap(true,5000,500);
	break;
	} // switch(eMode)	

} // HelpManager.Show

//-----------------------------------------------------------------------
HelpManager.prototype.CalcCuesLocation = function() {

    for (var i = 0; i < this.oHelpArr.length; i++) {

        var oElementRect = this.oHelpArr[i].oRefRect;
        var oCueRect = this.oHelpArr[i].oCueRect;

        var oCenterPoint = null;
        if (!this.bMaskAll)
            oCenterPoint = new Point(oElementRect.left + (oElementRect.width >> 1), oElementRect.top + (oElementRect.height >> 1));
        else //all cue elements are centered in the screen    
            oCenterPoint = new Point((window.screen.width >> 1) - (this.nCueWidth >> 3), (window.screen.height >> 1) - (this.nCueHeight >> 2));

        try {
            switch (this.oHelpArr[i].eLocation) {
                case HelpManager.LC_TOP:
                    oCueRect.SetRect(oCenterPoint.x - (this.nCueWidth >> 1), 																// Left.
												 oElementRect.top - this.nCueHeight - HelpManager.POINTER_HEIGHT - 1, 		//
												 oCenterPoint.x - (this.nCueWidth >> 1) + this.constCueWidth, 				// Right.
												 oElementRect.top - 1); 																									// Bottom.
                    break;
                case HelpManager.LC_LEFT:
                    oCueRect.SetRect(oElementRect.left - this.nCueWidth - HelpManager.POINTER_HEIGHT - 1, 		// Left.
												 oCenterPoint.y - (this.nCueHeight >> 1), 																// Top.
												 oElementRect.left - 1, 																									// Right.
												 oCenterPoint.y - (this.nCueHeight >> 1) + this.constCueHeight); 			// Bottom.
                    break;
                case HelpManager.LC_RIGHT:
                    oCueRect.SetRect(oElementRect.right + 1, 																								// Left.
												 oCenterPoint.y - (this.nCueHeight >> 1), 																// Top.
												 oElementRect.right + this.nCueWidth + HelpManager.POINTER_HEIGHT + 1, 	// Right.
												 oCenterPoint.y - (this.nCueHeight >> 1) + this.constCueHeight); 			// Bottom.
                    break;
                case HelpManager.LC_BOTTOM:
                    oCueRect.SetRect(oCenterPoint.x - (this.nCueWidth >> 1), 																// Left.
												 oElementRect.bottom + 1, 																								// Top.
												 oCenterPoint.x - (this.nCueWidth >> 1) + this.constCueWidth, 				// Right.
												 oElementRect.bottom + this.nCueHeight + HelpManager.POINTER_HEIGHT + 1); // Bottom.
                    break;
                case HelpManager.LC_INVALID: // Locate the Cue over the Element.
                    oCueRect.SetRect(oCenterPoint.x - (this.nCueWidth >> 1), 																// Left.
												 oCenterPoint.y - (this.nCueHeight >> 1), 																// Top.
												 oCenterPoint.x - (this.nCueWidth >> 1) + this.constCueWidth, 				// Right.
												 oCenterPoint.y - (this.nCueHeight >> 1) + this.constCueHeight); 			// Bottom.
                default:
                    break;
            } // switch
        }
        catch (e) { };

        try {
            // Calculate the offsets.
            if (this.oHelpArr[i].eLocation == HelpManager.LC_TOP || this.oHelpArr[i].eLocation == HelpManager.LC_BOTTOM) {
                if (oCueRect.left - HelpManager.CUE_PAD < 0)
                    this.oHelpArr[i].nCueOffsetX = -1 * (oCueRect.left - HelpManager.CUE_PAD);
                else if (oCueRect.right + HelpManager.CUE_PAD > GetBodyRect().width)
                    this.oHelpArr[i].nCueOffsetX = GetBodyRect().width - oCueRect.right - HelpManager.CUE_PAD;
            }
            else if (this.oHelpArr[i].eLocation == HelpManager.LC_LEFT || this.oHelpArr[i].eLocation == HelpManager.LC_RIGHT) {
                if (oCueRect.top - HelpManager.CUE_PAD < 0)
                    this.oHelpArr[i].nCueOffsetY = -1 * (oCueRect.top - HelpManager.CUE_PAD);
                else if (oCueRect.bottom + HelpManager.CUE_PAD > GetBodyRect().height)
                    this.oHelpArr[i].nCueOffsetY = GetBodyRect().height - oCueRect.bottom - HelpManager.CUE_PAD;
            }

            // Shift the Rect by the offsets.
            oCueRect.Shift(this.oHelpArr[i].nCueOffsetX, this.oHelpArr[i].nCueOffsetY);
        }
        catch (e) { };

    } // for
}        // HelpManager.CalcCuesLocation

//-----------------------------------------------------------------------
HelpManager.prototype.ShowElementCue = function(eMode,nIndex) 
{
	// Handle the mask first in order to reduce flickering effect.
	if(eMode == HelpManager.SM_SHOW_ONE)
		this.ShowMask(true,nIndex);
	else	
		this.ShowMask(false);
		
	// Hide/Delete the Cue's div.
	if(eMode == HelpManager.SM_HIDE )
	{
		SafeDeleteElement(this.oHelpArr[nIndex].oCueFrameDiv);
		// Remove the mask.
		this.ShowMask(false);
		return;
	}
	
	var oRefRect = this.oHelpArr[nIndex].oRefRect;
	
	// Debug.
	//alert(this.oHelpArr[nIndex].oRefObj.id + " Element Rect is " + this.oHelpArr[nIndex].oRefRect + ".");
	//var oRefDivHelp = AppendNewDiv(document.body, this.oHelpArr[nIndex].oRefObj.id + "_HelpDiv", oRefRect.left,oRefRect.top,1000,oRefRect.height,oRefRect.width);
	//oRefDivHelp.style.border = "1px dashed red";
	
	// Add the Cue's frame div.
	var nZOrder = GetMaxZOrder() - 2;
	var oCueFrameDiv,oCueMainDiv,oCueArrowDiv;
	var nArrowLeft,nArrowTop,nArrowWidth,nArrowHeight;
	var nArrowShiftX = this.oHelpArr[nIndex].nCueOffsetX;
	var nArrowShiftY = this.oHelpArr[nIndex].nCueOffsetY;
	var sArrowClass;
	var oCueRect = this.oHelpArr[nIndex].oCueRect;
	
	oCueFrameDiv = this.oHelpArr[nIndex].oCueFrameDiv = AppendNewDiv(document.body, this.oHelpArr[nIndex].oRefObj.id + "_CueDiv", oCueRect.left, oCueRect.top, nZOrder, oCueRect.height, oCueRect.width);
	// Add the Cue's main and arrow div.
	switch(this.oHelpArr[nIndex].eLocation)
	{ 	
	case HelpManager.LC_TOP:
		nArrowLeft	 = ((this.constCueWidth - HelpManager.POINTER_WIDTH) >> 1) - nArrowShiftX; 
		nArrowTop		 = this.constCueHeight - nArrowShiftY - 3;
		nArrowHeight = HelpManager.POINTER_HEIGHT;
		nArrowWidth	 = HelpManager.POINTER_WIDTH;
		sArrowClass	 = "Help_TArrow";
		
		oCueArrowDiv = AppendNewDiv(oCueFrameDiv, this.oHelpArr[nIndex].oRefObj.id + "_CueDivArrow", nArrowLeft, nArrowTop, nZOrder+2, nArrowHeight, nArrowWidth);
		oCueMainDiv	 = AppendNewDiv(oCueFrameDiv, this.oHelpArr[nIndex].oRefObj.id + "_CueDivMain", 0, 0, nZOrder+1, this.constCueHeight, this.constCueWidth);break;
    break;
	case HelpManager.LC_LEFT:
		nArrowLeft	 = this.constCueWidth - nArrowShiftX - 3;
		nArrowTop		 = ((this.constCueHeight - HelpManager.POINTER_WIDTH) >> 1) - nArrowShiftY;
		nArrowHeight = HelpManager.POINTER_WIDTH;
		nArrowWidth	 = HelpManager.POINTER_HEIGHT;
		sArrowClass	 = "Help_LArrow";
		
		oCueArrowDiv = AppendNewDiv(oCueFrameDiv, this.oHelpArr[nIndex].oRefObj.id + "_CueDivArrow", nArrowLeft, nArrowTop, nZOrder+2, nArrowHeight, nArrowWidth);
		oCueMainDiv	 = AppendNewDiv(oCueFrameDiv, this.oHelpArr[nIndex].oRefObj.id + "_CueDivMain", 0, 0, nZOrder+1, this.constCueHeight, this.constCueWidth);
		break;
	case HelpManager.LC_RIGHT:
		nArrowLeft	 = 3 - nArrowShiftX;
		nArrowTop		 = ((this.constCueHeight - HelpManager.POINTER_WIDTH) >> 1) - nArrowShiftY;
		nArrowHeight = HelpManager.POINTER_WIDTH;
		nArrowWidth	 = HelpManager.POINTER_HEIGHT;			
		sArrowClass	 = "Help_RArrow";
		
		oCueArrowDiv = AppendNewDiv(oCueFrameDiv, this.oHelpArr[nIndex].oRefObj.id + "_CueDivArrow", nArrowLeft, nArrowTop, nZOrder+2, nArrowHeight, nArrowWidth);
		oCueMainDiv	 = AppendNewDiv(oCueFrameDiv, this.oHelpArr[nIndex].oRefObj.id + "_CueDivMain", HelpManager.POINTER_HEIGHT, 0, nZOrder+1, this.constCueHeight, this.constCueWidth);
		break;
	case HelpManager.LC_BOTTOM:
		nArrowLeft	 = ((this.constCueWidth - HelpManager.POINTER_WIDTH) >> 1) - nArrowShiftX; 
		nArrowTop		 = 3 - nArrowShiftY;
		nArrowHeight = HelpManager.POINTER_HEIGHT;
		nArrowWidth	 = HelpManager.POINTER_WIDTH;
		sArrowClass	 = "Help_BArrow";
		
		oCueArrowDiv = AppendNewDiv(oCueFrameDiv, this.oHelpArr[nIndex].oRefObj.id + "_CueDivArrow", nArrowLeft, nArrowTop, nZOrder+2, nArrowHeight, nArrowWidth);
		oCueMainDiv	 = AppendNewDiv(oCueFrameDiv, this.oHelpArr[nIndex].oRefObj.id + "_CueDivMain", 0, HelpManager.POINTER_HEIGHT, nZOrder+1, this.constCueHeight, this.constCueWidth);
		break; 
	case HelpManager.LC_INVALID:
	default:
		break;
	} // switch
	
	// Debug.
	//oCueFrameDiv.style.border = "1px solid black";
	//if(IsObject(oCueMainDiv))
	 // oCueMainDiv.style.border	= "1px solid blue";
	//oCueArrowDiv.style.border = "1px solid red";
	
	if(IsObject(oCueMainDiv))
		oCueMainDiv.innerHTML	= this.GetCueHtml(eMode,nIndex);
	else
		oCueFrameDiv.innerHTML	= this.GetCueHtml(eMode,nIndex);
	
	if(IsObject(oCueArrowDiv))
		oCueArrowDiv.className = sArrowClass;
} // HelpManager.ShowElementCue

//-----------------------------------------------------------------------
HelpManager.prototype.GetCueHtml = function(eMode,nIndex) 
{
	var oHelpEntry = this.oHelpArr[nIndex];
	var nHelpCount = this.oHelpArr.length-1;
	
	//var nImageWidth  = parseInt(this.nCueWidth*0.15);
	//var nImageHeight = parseInt(this.nCueHeight*0.75);
	
	var sCloseFunc = "oHelpManager.Show(HelpManager.SM_HIDE);";
	var sHtml = "";
	
	sHtml += "<table cellpadding='0' cellspacing='0' width='"+this.nCueWidth+"px' height='"+this.nCueHeight+"px'>";
	sHtml += "<tbody>";
	sHtml += "	<tr>";
	sHtml += "		<td class='Help_tl'></td>"; // Top left corner.
	sHtml += "		<td class='Help_t'></td>";	// Top line.
	sHtml += "		<td class='Help_tr'></td>"; // Top right corner.
	sHtml += "	</tr>";
	sHtml += "	<tr>";
	sHtml += "		<td class='Help_l'>";
	sHtml += "			<div></div>";
	sHtml += "		</td>";
	sHtml += "		<td class='Help_body1'>";
	sHtml += "			<table class='Help_body2' cellpadding='0' cellspacing='0'>";
	sHtml += "				<tbody>";
	sHtml += "					<tr>";
	//<!-- image was removed from cue
	sHtml += " 						<td>";
	sHtml += "							&nbsp;";
	sHtml += "						</td>";
	//-->
	sHtml += "						<td style='padding-left: 0px;'>";
	sHtml += "							<div style='padding-top:5px;'>";
	sHtml += "								<span class='Help_textTitle'>"+oHelpEntry.sHelpHeadText;
	


	if(eMode == HelpManager.SM_SHOW_ONE && nIndex)
		sHtml += "								<span class='Help_testTip' id='spnCounter' > "+(nIndex)+" of "+nHelpCount+"</span>";
	
	sHtml += "								</span>";
	sHtml += "								<div class='tegFont'>"+oHelpEntry.sHelpBodyText+"</div>";
	sHtml += "							</div>";
	
	if(eMode == HelpManager.SM_SHOW_ONE)
	{
		sHtml += "						<table cellpadding='0' cellspacing='0' >";
		sHtml += "							<tbody>";
		sHtml += "								<tr>";
		sHtml +=										this.GetButtonsHtml(nIndex,nHelpCount+1);
		sHtml += "								</tr>";
		sHtml += "							</tbody>";
		sHtml += "						</table>";
	}	
	sHtml += "						</td>";
	sHtml += "						<td title='Exit tutorial' style='vertical-align: top; padding-left: 5px;'>";
	sHtml += "							<div class='Help_closeBtn' style='' onmouseover='javascript:this.className=\"Help_closeBtnOver\"'";
	sHtml += "																									onmousedown='javascript:this.className=\"Help_closeBtnDown\"'";
	sHtml += "																									onmouseout='javascript:this.className=\"Help_closeBtn\"'";
	sHtml += "																									onclick='javascript:"+sCloseFunc+"'	>";
	sHtml += "							</div>";
	sHtml += "						</td>";
	sHtml += "					</tr>";
	sHtml += "				</tbody>";
	sHtml += "			</table>";
	sHtml += "		</td>";
	sHtml += "		<td class='Help_r'>";
	sHtml += "			<div></div>";
	sHtml += "		</td>";
	sHtml += "	</tr>";
	sHtml += "	<tr>";
	sHtml += "		<td class='Help_bl'></td>"; // Bottom left corner.
	sHtml += "		<td class='Help_b'></td>";	// Bottom line.
	sHtml += "		<td class='Help_br'></td>"; // Bottom right corner.
	sHtml += "	</tr>";
	sHtml += "</tbody>";
	sHtml += "</table>";
	
	return sHtml;
} // HelpManager.GetCueHtml

//-----------------------------------------------------------------------
HelpManager.prototype.GetButtonsHtml = function(nIndex,nTotal) 
{
	var sHtml = "";
	var bStartBtn = nIndex == 0 && nIndex != nTotal-1;
	var bPrevBtn	= nIndex > 1;
	var bNextBtn	= nIndex > 0 && nIndex < nTotal-1;
	var bDoneBtn = nIndex == nTotal-1; 
	
	// Function.
	var sCloseFunc = "oHelpManager.Show(HelpManager.SM_HIDE);";
	var sPrevFunc	 = "oHelpManager.ShowElementCue(HelpManager.SM_HIDE,"+nIndex+"); oHelpManager.ShowElementCue(HelpManager.SM_SHOW_ONE,"+(nIndex-1)+");";
	var sNextFunc	 = "oHelpManager.ShowElementCue(HelpManager.SM_HIDE,"+nIndex+"); oHelpManager.ShowElementCue(HelpManager.SM_SHOW_ONE,"+(nIndex+1)+");";

	if(bStartBtn)
	{
		sHtml += "<td title='Start tutorial' vAlign='bottom' style='padding-right: 5px; padding-bottom: 5px;padding-left: 80px;'>"
		sHtml += "	<input id='StartHelpBtn' class='Help_btn' value='Start' type='button' onclick='javascript:"+sNextFunc+"'>"
		sHtml += "</td>"
	}	

	if(bPrevBtn)
	{
		sHtml += "<td title='Previous tip' vAlign='bottom' style='padding-right: 5px; padding-bottom: 5px;padding-left: 80px;'>"
		sHtml += "	<input id='PrevHelpBtn' class='Help_btn' value='Prev' type='button' onclick='javascript:"+sPrevFunc+"'>"
		sHtml += "</td>"
	}
	
	if(bNextBtn)
	{
		sHtml += "<td title='Next tip' style='padding-right: 5px; padding-bottom: 5px;";
		if(!bPrevBtn)
		  sHtml += "padding-left: 80px;'>";
		else
		  sHtml += "'>";
		
		sHtml += "	<input id='NextHelpBtn' class='Help_btn' value='Next' type='button' onclick='javascript:"+sNextFunc+"'>"
		sHtml += "</td>"
	}
	
	if(bDoneBtn)
	{
		sHtml += "<td title='Done' style='padding-right: 5px; padding-bottom: 5px;"
	  if(!bPrevBtn)
		  sHtml += "padding-left: 80px;'>";
	  else
		  sHtml += "'>";

       sHtml += "	<input id='DoneHelpBtn' class='Help_btn' value='Done' type='button' onclick='javascript:" + sCloseFunc + "'>"
       sHtml += "</td>"
	}
	
	return sHtml;
} // HelpManager.GetButtonsHtml

//-----------------------------------------------------------------------
HelpManager.prototype.ShowHelpMap = function(bShow,nTTime,nFTime) // nTTime = total show time, nFTime = fade out time.
{
	var oThis = this;
	var oHelpMapImageDiv	 = null;
	var sHelpMapImageDivId = "HelpMap";
	var sHelpMapImage			 =  "HelpMap.png";

	// Validate IN params and set defaults.
	bShow  = typeof bShow  == "boolean"	? bShow  : true;
	nTTime = typeof nTTime == "number"	? nTTime : 5000;
	nFTime = typeof nFTime == "number"	? (nFTime > nTTime) ? nTTime : nFTime : 0;

	if(bShow)
	{
		// In IE version 5.5 to 7 transparent png images are supported by applying AlphaImageLoader filter only.
		var bApplyIeFilter = (GetBrowser() == "IExplorer") &&
												 (parseFloat(GetBrowserVer()) >= 5.5) &&
												 (parseFloat(GetBrowserVer()) < 7);
		
		// Main/Bacground Div.
		var oRect =  GetBodyRect();
		oHelpMapImageDiv = AppendNewDiv(document.body,sHelpMapImageDivId,oRect.left+1,oRect.top+1,GetMaxZOrder(),oRect.height-1,oRect.width-1);

		// Load the Image.
		oHelpMapImageDiv.innerHTML = '<img id="'+sHelpMapImageDivId+"_Img"+'" src="'+sHelpMapImage+'" width="100%" height="100%" >';
		
		// Add support for Alpha transparency. 
		if(bApplyIeFilter)
			ApplyIeFilter(sHelpMapImageDivId+"_Img");
	
		// Start the fade out process.
		if(nFTime)
			setTimeout(function(){FadeOut(sHelpMapImageDivId,60,nFTime,oThis.ShowHelpMap);}, nTTime-nFTime);
		else
			setTimeout(function(){ShowHelpMap(false);},nTTime);
	}
	else // bShow = false.
		SafeDeleteElement(sHelpMapImageDivId);
		
} // HelpManager.ShowHelpMap

//-----------------------------------------------------------------------
HelpManager.prototype.ShowMask = function(bShow, nIndex) {

    // Create the mask rectangulars. (First time only)   
    if (!IsObject(this.oMaskDivT)) {


        this.oMaskDivT = AppendNewDiv(document.body, "Help_Mask_T", 0, 0, HelpManager.MASK_ZORDER, 0, 0);
        this.oMaskDivL = AppendNewDiv(document.body, "Help_Mask_L", 0, 0, HelpManager.MASK_ZORDER, 0, 0);
        this.oMaskDivR = AppendNewDiv(document.body, "Help_Mask_R", 0, 0, HelpManager.MASK_ZORDER, 0, 0);
        this.oMaskDivB = AppendNewDiv(document.body, "Help_Mask_B", 0, 0, HelpManager.MASK_ZORDER, 0, 0);
        this.oMaskDivE = AppendNewDiv(document.body, "Help_Mask_E", 0, 0, HelpManager.MASK_ZORDER, 0, 0);

        this.oMaskDivT.className = "Help_Mask";
        this.oMaskDivL.className = "Help_Mask";
        this.oMaskDivR.className = "Help_Mask";
        this.oMaskDivB.className = "Help_Mask";
        this.oMaskDivE.className = "Help_Element_Mask";

    }

    // Hide the mask first.
    this.oMaskDivT.style.visibility = "hidden";
    this.oMaskDivL.style.visibility = "hidden";
    this.oMaskDivR.style.visibility = "hidden";
    this.oMaskDivB.style.visibility = "hidden";
    this.oMaskDivE.style.visibility = "hidden";


    if (!bShow)
        return;



    // Add some padding to the actual rect.	
    var oRefRect = this.oHelpArr[nIndex].oRefRect;
    var oBodyRect = GetBodyRect();


    // Inflating the element rect by HelpManager.MASK_PAD.	
    var nLeft = Math.max(0, oRefRect.left - HelpManager.MASK_PAD);
    var nTop = Math.max(0, oRefRect.top - HelpManager.MASK_PAD);
    var nRight = Math.min(oBodyRect.right, oRefRect.right + HelpManager.MASK_PAD);
    var nBottom = Math.min(oBodyRect.bottom, oRefRect.bottom + HelpManager.MASK_PAD);


    if (!this.bMaskAll) {
        
        SetDivRect(this.oMaskDivT, new Rect(0, 0, oBodyRect.right, nTop));
        SetDivRect(this.oMaskDivL, new Rect(0, nTop, nLeft, nBottom));
        SetDivRect(this.oMaskDivR, new Rect(nRight, nTop, oBodyRect.right, nBottom));
        SetDivRect(this.oMaskDivB, new Rect(0, nBottom, oBodyRect.right, oBodyRect.bottom));
    }
    else { // mask all document body except help slide - (yossi birenboim 25/11/2009)
        SetDivRect(this.oMaskDivT, new Rect(0, 0, oBodyRect.right, oBodyRect.bottom));
    }

    SetDivRect(this.oMaskDivE, oRefRect);

    // Show the mask.		
    this.oMaskDivT.style.visibility = "visible";
    this.oMaskDivL.style.visibility = "visible";
    this.oMaskDivR.style.visibility = "visible";
    this.oMaskDivB.style.visibility = "visible";
    this.oMaskDivE.style.visibility = "visible";



}      // HelpManager.ShowMask

/*
//-----------------------------------------------------------------------
HelpManager.prototype.XXX = function() 
{
	// TBD Write your function code here.
} // HelpManager.XXX
*/