analytics/templates/ps/ags/logicsheets/menu.xslt

<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed Materials - Property of IBM

IBM Cognos Products: AGS

(C) Copyright IBM Corp. 2005, 2014


US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dp="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/dialog/presentation/" xmlns:dt="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/dialog/templates/" xmlns:cp="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/controls/presentation/" xmlns:out="dummy-uri" xmlns:xtsext="xalan://com.cognos.xts.ext.XTSExt" xmlns:xts="http://developer.cognos.com/schemas/xts/" xmlns:utml="http://developer.cognos.com/schemas/xts/logicsheet/xslt/formlogic/" xmlns:alm="http://developer.cognos.com/schemas/xts/alm" xmlns:cm="http://developer.cognos.com/schemas/xts-cm/1/" xmlns:cf="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/controls/framework/" exclude-result-prefixes="xsl dp dt cp xtsext xts utml alm cm cf">
    <xsl:output method="xml" encoding="UTF-8" indent="no"/>
    <xsl:namespace-alias stylesheet-prefix="out" result-prefix="xsl"/>
    <xsl:template match="alm:doMenu">
        <out:template match="/">
            <script language="javascript"><![CDATA[
				if (window.attachEvent) {
					window.attachEvent("onresize", cf.setInsertableObjectsTabContainerHeight);
				}
				else {
					window.addEventListener("resize", cf.setInsertableObjectsTabContainerHeight, false);
				}
	            
    			function mouseOverHideButton(item) {	
                      item.className='hide_show_hover';
                      window.status='';
                      return true;                      
    			}
    			function mouseOutHideButton(item,normalClass) {	
    			    if (normalClass == undefined) {
                          item.className='';
                      }
                      else {
                          item.className=normalClass
                      }

                      window.status='';
                      return true;                      
    			}
    			function mouseDownHideButton(item) {
                      item.className='hide_show_pressed';
                      window.status='';
                      return true;    			
    			}
    			function mouseUpHideButton(item) {
        		    item.className='hide_show_hover';
                      window.status='';
    			}
                  function toggleTasksPane()
                  {
                    	// get the element
                    	var tableElement = document.getElementById("taskContents_tableID");
                    	var imageElement = document.getElementById("taskMinMax");
                    	var taskDiv = document.getElementById("taskDiv");
						//It is used to fix the persentage UI issue of IE browser in Standards mode.
						var insertableObjElement = document.getElementById("l2");
						var metadataContainerElement = document.getElementById("meta_container");
                    	
                    	// are we hidden or not
                    	if (tableElement.style.display == "none") {
                    		if (browserCheck.isIE5Up()) {
                    			tableElement.style.display="block";
								//It is used to fix the persentage UI issue of IE browser in Standards mode.
								insertableObjElement.style.height="80%";
								metadataContainerElement.style.height="80%";
                    		} else {
                    			tableElement.style.display="table";
                    		}
                    		taskDiv.style.height = 110 + "px";

                    		// we also want to swap the image
                    		imageElement.src="../ags/images/hide_area.gif";
                    		imageElement.title = taskpanehidetooltip_string;
                    	}
                    	else {
                    		// we want to hide it
                    		tableElement.style.display="none";
							//It is used to fix the persentage UI issue of IE browser in Standards mode.
							if (browserCheck.isIE5Up()) {
								insertableObjElement.style.height="88%";
								metadataContainerElement.style.height="100%";
							}
                    		
                    		taskDiv.style.height = 0 + "px";
                    		// we also want to swap the image
                    		imageElement.src="../ags/images/show_area.gif";
                    		imageElement.title = taskpaneopentooltip_string;
                    	}
                    }
                    function toggleTasksandInserts() {
                    	
                    	var label = "menuTabs_and_Props";
                    	var doc = document.getElementById(label);
                    	var state;
                    	
                    	var menuItem = menuItemMap['taskObjMenuItem'];
                    	
                    	var iconPath = '../ags/images/menu/check.gif';
                    	if(menuItem.m_icon.getPath()=='../ags/images/menu/check.gif'){
                    	    iconPath = '../common/images/spacer.gif';
                    	}
                    	menuItem.m_icon.setPath(iconPath);

                    	if (doc.style.visibility == "visible" || doc.style.visibility =='')
                    		state = true;
                    	else state = false;
                    	
                    	if (!state) {
                    		doc.style.visibility = "visible";
                    		expandMenu();
                    		}
                    	else {
                    		doc.style.visibility = "hidden";
                    		collapseMenu();
                    		}
                    
                    }
                    // This checks for the schedule changes to dynamically change the UI icon for
                    // Schedule the agent task , we pass the state of the schedule(boolean value) and status string
                   // to update when leaving the saved agent.
                    function toggleScheduleState(state, status) {
						var imageElement = document.getElementById("schedule_img");
						var imageLink = null;
						if (!status) {
							if (!state || state == "false") {
								imageLink = "../ags/images/tasks/action_edit_disabled_schedule.gif";
							}
							else {
								imageLink = "../ags/images/tasks/action_edit_enabled_schedule.gif";
							}
						}  else {
								imageLink = "../ags/images/tasks/action_edit_schedule.gif"; 
						}
						imageElement.style.background = 'url('+imageLink+') no-repeat center';
						
						var schMenuItem = menuItemMap['scheduleMenuItem'];
						var tooltip = schMenuItem.m_icon.m_tooltip;
						schMenuItem.m_icon = new CIcon(imageLink, tooltip);
						//schMenuItem.draw();
						
					}
						
    			]]>
    			</script>
        
            <!-- The frame that holds the 'Tasks' list and the  'Insertable items' pane (which includes the Model, Agent Items and Functions tabs)-->
            <table border="0" role="presentation" cellpadding="0" cellspacing="0" style="width:100%;height:100%;padding: 2px 0px 0px 0px;" class="insertableItemsPaneBorder">
                <tr>
                    <td class="taskHideButton">
                        <!-- the expand frame button which is not shown at startup-->
                        <table id="menuExpand_button" cellpadding="0" cellspacing="0" border="0" role="presentation" height="100%" style="display:none;padding 2px 0px 0px 2px" >
                            <tr valign="top">
                                <td height="50" align="center">
                                    <a href="#" onmouseover="window.status='';return true;">                                   
                                        <img src="../ags/images/show_pane.gif" class="hide_show_leftpane" height="48" width="6" border="0" role="button" onmouseover="mouseOverHideButton(this);" onmouseout="mouseOutHideButton(this,'hide_show_leftpane');" onmousedown="mouseDownHideButton(this);" onmouseup="mouseUpHideButton(this); toggleTasksandInserts(); " >
                                            <out:attribute name="alt">
                                                <xts:string id="MENU_PANE_EXPAND_TIP"/>
                                            </out:attribute>
                                        </img>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td height="100%" class="agsResizeDivider">&#160;</td>
                            </tr>
                        </table>
                        <!-- this table holds the Tasks pane and Insertable Items pane-->
                        <table id="menuTabs_and_Props" role="presentation" style="width:100%;height:100%;" cellpadding="0" cellspacing="0" class="insertableItemsPaneBorder">
                            <tr>
                                <td width="100%" height="100%">
                                <!-- start of table -->
                                    <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" role="presentation">
                                        <tr>                                        
                                            <td style="width:100%; height:20px" onhelp="viewCSHelp('ug_cr_as_ovrvw_es_wndw');">
                                                <table border="0" cellpadding="0" cellspacing="0" class="area_header" role="presentation" style="height:15px;width:100%">
                                                    <tr>
                                                        <td style="display:block;"><xts:string id="TASK_TITLE"/></td>
                                                        <td align="right"><img style="display:block;" align="middle" class="hide_show_taskspane" id="taskMinMax" role="button" src="../ags/images/hide_area.gif" onclick="toggleTasksPane();"     onmouseover="mouseOverHideButton(this);" onmouseout="mouseOutHideButton(this,'hide_show_taskspane');" onmousedown="mouseDownHideButton(this);"     onmouseup="mouseUpHideButton(this);">
                                                        <out:attribute name="title"><xts:string id="TASK_PANE_COLLAPSE_TIP"/></out:attribute>
														<out:attribute name="alt"><xts:string id="TASK_PANE_COLLAPSE_TIP"/></out:attribute>
														</img>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="area">
                                                <div id="taskDiv" style="overflow:none; scrollbars=no; z-index:-10;">
                                                    <!-- build the menu for the default task list and the wizard task list-->
                                                    <out:for-each select="/root/menuList">
                                                        <out:call-template name="doTaskDiv"/>
                                                    </out:for-each>
                                                </div>
                                           </td>
                                        </tr>
                                        <!-- Horizontal resize spacer image - to separate header from body -->
                                        <tr>
                                            <out:if test="/root/browserInfo/isIE='true'">
                                                <out:attribute name="ondrag">return false;</out:attribute>
                                            </out:if>
                                            <td role="presentation" class="resize" style="cursor:n-resize;" onmousedown="enableResize(true,'height'); return false;" onmousemove="moveHorizPane(event); return false;" onmouseup="enableResize(false,'height')">
                                                <img style="display:block;" border="0" src="../ags/images/resize_area.gif" alt="" width="100%" height="3px"/>
                                            </td>                                            
                                        </tr>
                                        <tr>
                                            <td id="insertableObjectsHeader" class="area_header" style="width:100%;height:23px;" onhelp="viewCSHelp('ug_cr_as_ovrvw_insrt_obj');">
                                                <xts:string id="TREE_INSERTABLE_ITEMS"/>
                                            </td>
                                        </tr>
                                        
                                        <!-- put the contents of the insertable items in there -->
                                        <tr>
											<out:choose>
												<out:when test="/root/browserInfo/isIE='true'">
													<td style="height:80%;" id="l2">
														<out:call-template name="doTreeItems"/>
													</td>
												</out:when>
												<out:otherwise>
													<td style="height:100%;" id="l2">
														<out:call-template name="doTreeItems"/>
													</td>
												</out:otherwise>
											</out:choose>
                                        </tr>
                                    </table>
                                <!-- end of table-->
                                </td>
                                <td>
                                    <img border="0" alt=" " src="../ags/images/spacer.gif" height="100%" width="1"/>
                                </td>
                                <!-- Vertical resize -->
								<td>
									<out:choose>
										<out:when test="/root/browserInfo/isIE='true'">
											<out:attribute name="style">width:3px; cursor:w-resize;</out:attribute>
											<out:attribute name="onmousedown">enableResize(true,'width'); return false;</out:attribute>
											<out:attribute name="onmousemove">resizeMenuPane(event); return false;</out:attribute>
											<out:attribute name="onmouseup">enableResize(false,'width');</out:attribute>
											<out:attribute name="ondrag">return false;</out:attribute>
											<out:element name="img">
												<out:attribute name="border">0</out:attribute>
												<out:attribute name="alt"></out:attribute>
												<out:attribute name="src">../ags/images/spacer.gif</out:attribute>
												<out:attribute name="width">1</out:attribute>
												<out:attribute name="height">100%</out:attribute>
											</out:element>
										</out:when>
										<out:otherwise>
											<out:element name="div">
												<out:attribute name="id">splitter</out:attribute>
											</out:element>
										</out:otherwise>
									</out:choose>
                                </td>
                                <td style="height: 100%" valign="top">
                                    <table border="0" cellpadding="0" cellspacing="0" height="100%" role="presentation">
                                        <tr valign="top">
                                            <td height="50" align="center" colspan="2">
                                                <a href="#" tabindex="-1" onmouseover="window.status='';return true;">                                   
                                                	<img src="../ags/images/hide_pane.gif" class="hide_show_leftpane" border="0" height="48" width="6" role="button" onmouseover="mouseOverHideButton(this);" onmouseout="mouseOutHideButton(this,'hide_show_leftpane');" onmousedown="mouseDownHideButton(this);" onmouseup="mouseUpHideButton(this); toggleTasksandInserts(); " >
                                                        <out:attribute name="alt">
                                                            <xts:string id="MENU_PANE_COLLAPSE_TIP"/>
                                                        </out:attribute>
                                                    </img>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td  class="agsResizeDivider" height="95%">&#160;</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!-- the hide frame button -->
                </tr>
            </table>
        </out:template>
        <out:template name="doTaskDiv">
            <!-- render the menu and meta data tree-->
            <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                <out:choose>
                    <out:when test="@alias='task2'">
                        <out:attribute name="style">
                            <out:text>width:100%;</out:text>
                        </out:attribute>
                    </out:when>
                    <out:otherwise>
                        <out:attribute name="style">
                            <out:text>width:100%;display:none</out:text>
                        </out:attribute>
                    </out:otherwise>
                </out:choose>            
                <out:attribute name="id">div_taskmenu_<out:value-of select="@alias"/>
                </out:attribute>
                <tr>
                    <!-- The content of the table -->
                    <td style="height:100% ; width:100%">
                        <!-- do the content for the menu -->
                        <table role="presentation" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout:fixed">
                            <tr>
                                <td>
                                    <table width="100%" height="100%" cellpadding="0" cellspacing="0" role="menubar">
                                        <!-- Distinguish IDs of tags when different style. Used for A11Y -->
										<out:choose>
											<out:when test="@alias='task2'">
												<out:attribute name="id">taskContents_tableID</out:attribute>
											</out:when>
											<out:otherwise>
												<out:attribute name="id">taskContents</out:attribute>
											</out:otherwise>
										</out:choose>
                                        <!-- do the for the items in the menu in the order in which they are defined - doing this means we can pick them out in document order -->
                                        <out:apply-templates select="./*[local-name()='task' or local-name()='agentTask' or local-name()='wtask']"/>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            
        </out:template>
        
        <out:template name="doTreeItems">
            <out:for-each select="/root/menu">
                <!-- render the menu and meta data tree-->
                <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                    <out:attribute name="id">div_menu_<out:value-of select="@alias"/>
                    </out:attribute>
                    <out:choose>
                        <out:when test="@default and @default='true' ">
                            <out:attribute name="style">
                                <out:text>height:100%;width:100%;</out:text>
                            </out:attribute>
                        </out:when>
                        <out:otherwise>
                            <out:attribute name="style">
                                <out:text>height:100%;width:100%;display:none</out:text>
                            </out:attribute>
                        </out:otherwise>
                    </out:choose>
                    <out:attribute name="id">div_menu_<out:value-of select="@alias"/>
                    </out:attribute>
                    <tr>
                        <!-- The content of the table -->
                        <td class="taskFullFill">
                            <!--<table  class="menuContent" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">-->
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" role="presentation">
                                <!-- do the content for the menu -->
                                <tr>
									<out:choose>
										<out:when test="/root/browserInfo/isIE='true'">
											<td id="meta_container" style="height:80%;" valign="top">
												<table role="presentation" class="treeBorder" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout:fixed">
													<out:apply-templates select="./content"/>
												</table>
											</td>
										</out:when>
										<out:otherwise>
											<td style="height:100%;" valign="top">
												<table role="presentation" class="treeBorder" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout:fixed">
													<out:apply-templates select="./content"/>
												</table>
											</td>
										</out:otherwise>
									</out:choose>
                                </tr>
                                <!-- do the tabs -->
                                <tr>
                                    <td>
                                        <cp:tabset inverted="true" tabwidth="25">
                                            <cp:select>
                                                <out:value-of select="./menutab/@id"/>
                                            </cp:select>
                                            <!-- Added for Metadata tree tab's ID unique.(A11Y) -->
                                            <out:variable name="current_tab">
												<out:value-of select="@alias"/>
											</out:variable>
                                            <out:for-each select="/root/menu/menutab">
                                                <out:choose>
                                                    <out:when test="position() = 1 and position() != last()">
                                                        <cp:tab name="@id" position="start" var-name="true">
                                                        <a href="#" tabindex="-1" onclick="{'cf=getConfigFrame(); if (cf!=null) cf.changeTabMenu(&quot;{../@alias}&quot;);'}" >
                                                            <cp:label>
                                                            <img id="id_{'{$current_tab}'}_{'{@tip}'}" tabindex="0" role="tab" alt="{'{@tip}'}" align="middle" border="0" src="{'{@href}'}" onmouseover="status=''; return true;"/>
                                                            </cp:label>
                                                            </a>
                                                        </cp:tab>
                                                    </out:when>
                                                    <out:when test="position() = last()">
                                                        <cp:tab name="@id" position="end" var-name="true">
                                                        <a href="#" tabindex="-1" onclick="{'cf=getConfigFrame(); if (cf!=null) cf.changeTabMenu(&quot;{../@alias}&quot;);'}" onmouseover="status=''; return true;">
                                                            <cp:label>
                                                            <img id="id_{'{$current_tab}'}_{'{@tip}'}" tabindex="-1" role="tab" alt="{'{@tip}'}" align="middle" border="0" src="{'{@href}'}" onmouseover="status=''; return true;"/>
                                                            </cp:label>
                                                            </a>
                                                        </cp:tab>
                                                    </out:when>
                                                    <out:otherwise>
                                                        <cp:tab name="@id" var-name="true">
                                                        <a href="#" tabindex="-1" onclick="{'cf=getConfigFrame(); if (cf!=null) cf.changeTabMenu(&quot;{../@alias}&quot;);'}" onmouseover="status=''; return true;">
                                                            <cp:label>
                                                            <img id="id_{'{$current_tab}'}_{'{@tip}'}" tabindex="-1" role="tab" alt="{'{@tip}'}" align="middle" border="0" src="{'{@href}'}" onmouseover="status=''; return true;"/>
                                                            </cp:label>
                                                            </a>
                                                        </cp:tab>
                                                    </out:otherwise>
                                                </out:choose>
                                            </out:for-each>
                                        </cp:tabset>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </out:for-each>
        </out:template>
        
        <!-- a normal task item -->
        <out:template match="task">
            <tr id="{'{@alias}'}_topSpacer">
                <td colspan="4">
                	<!-- "Alt" attribute should same with title for A11Y. -->
                    <img style="display: block;" border="0" title="{'{./text}'}" height="3px" width="0px" alt="{'{./text}'}" src="../ags/images/spacer.gif" />
                </td>
            </tr>
            <tr class="task_inactive" id="{'{@alias}'}" name="{'{@alias}'}" onclick="{'{./link}'}">
            	<out:choose>
					<out:when test="@alias='condition'">
						<out:attribute name="role">
							<out:text>menuitem</out:text>
						</out:attribute>
					</out:when>
					<out:otherwise>
						<out:attribute name="role">
							<out:text>menuitem</out:text>
						</out:attribute>
					</out:otherwise>
				</out:choose>
                <!-- we can't make style an attribute value template - we only want it if we're making a hidden element initially -->
                <out:choose>
                    <out:when test="./style='hidden'">
                        <out:attribute name="style">
                            <out:text>display:none; cursor:hand;</out:text>
                        </out:attribute>
                    </out:when>
                    <out:otherwise>
                        <out:attribute name="style">
                            <out:text>cursor:hand;</out:text>
                        </out:attribute>
                    </out:otherwise>
                </out:choose>
                <td>
               	 	<!-- "Alt" attribute should same with title for A11Y. -->
                    <img border="0" title="{'{./text}'}" height="16px" width="3px" alt="{'{./text}'}" src="../ags/images/spacer.gif" />
                </td>
                <!-- Background style will not work in the High Contrast mode. The only fixing way is putting background img into a <img> tag. -->
                <td width="16px" valign="middle" align="center" title="{'{./text}'}" style="cursor:hand;">
                    <img id= "{concat('{@alias}',  '_img')}" alt="" src="{'{./icon}'}" width="16px"/>
                </td>
                <td>
                    <img border="0" title="{'{./text}'}" height="16px" width="3px" alt="{'{./text}'}" src="../ags/images/spacer.gif" />
                </td>
                <td title="{'{./text}'}"  align="justify" width="100%">
                    <out:value-of select="./text"/>
                </td>
            </tr>
            <out:if test="./style='hidden'">
                <tr id="{'{@alias}'}_spacer" style="display:none;cursor:hand;">
                    <td colspan="4">
                        <img style="display: block;" border="0" title="{'{./text}'}" height="3px" width="0px" alt="{'{./text}'}" src="../ags/images/spacer.gif" />
                    </td>
                </tr>
            </out:if>
        </out:template>
    
        <!-- a task which is really a cp flyout -->
        <out:template match="agentTask">
            <out:variable select="string(/root/http/param[@name=&apos;SCRIPT_NAME&apos;])" name="gateway"/>
            <out:variable select="key(&apos;system-param&apos;, &apos;app&apos;)" name="app"/>
            <out:variable name="back-url">
                <out:value-of select="$gateway"/>?b_action=xts.run&amp;m=<out:value-of select="key(&apos;env-param&apos;,&apos;m&apos;)"/>
            </out:variable>
            <out:variable name="encoded-back-url">
                <out:value-of select="xtsext:protect(xtsext:urlencode(string($back-url)),'url','url','getdata')"/>
            </out:variable>

            <out:variable name="containerName" select="@alias"/>
            <tr>
                <td colspan="4">
                    <img style="display: block;" border="0" height="3px" width="0px" alt="" src="../ags/images/spacer.gif" />
                </td>
            </tr>
            <tr title="{'{./text}'}" class="task_inactive" id="{'{$containerName}'}" name="{'{$containerName}'}" app="{'{$app}'}" url="{'{$back-url}'}">
                <td>
                    <img border="0" height="16px" width="3px" alt="" src="../ags/images/spacer.gif" />
                </td>
                <td align="center" valign="middle" width="16px" style="cursor:hand;">
                    <img  title="{'{./text}'}" border="0" alt="{'{./text}'}" role="button" src="{'{./icon}'}" width="16px" ondragstart="return false;" onkeypress="showTaskMenu();taskArea_cancelBub(event);return false;" onmouseup="showTaskMenu();taskArea_cancelBub(event);event.returnValue=false;return false;"/>
                </td>
                <td>
                    <img border="0" height="16px" width="3px" alt="" src="../ags/images/spacer.gif" />
                </td>
                <td align="justify" width="100%" height="0px">
                    <table unselectable="on" border="0" cellpadding="0" cellspacing="0" role="menuitem" style="cursor:hand" aria-label="{'{$containerName}'}" tabindex="-1">
                        <tr role="menuitem" class="task_inactive" id="{'{$containerName}'}Button">
                            <td valign="bottom" align="right" id="taskMenuDropDownDiv" style="padding:0px;margin:0px;height:0px;"/>
                            <td role="button" unselectable="on" onkeypress="showTaskMenu();taskArea_cancelBub(event);return false;" onmouseup="showTaskMenu();taskArea_cancelBub(event);return false;">
                                <out:value-of select="./text"/>
                            </td>
                            <td>
                                <img border="0" height="16px" width="3px" alt="" src="../ags/images/spacer.gif" />
                            </td>
                            <td role="button" onkeypress="showTaskMenu();taskArea_cancelBub(event);return false;" onmouseup="showTaskMenu();taskArea_cancelBub(event);return false;">
                                <img  border="0" height="16px" width="7px" alt="{'{./text}'}" src="{{$skin_images}}dropdown_arrow_narrow.gif"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <script language="Javascript">
                //Hold the menus with capablities only.
                var tasksMenuMap = new Object();

                var menuItemStyle = new CUIStyle('menuItem_normal', 'menuItem_hover', '', '', '');
                var menuStyle = new CUIStyle('menuContainer', '', '', '', '');

                var taskMenu = new CMenu('taskMenu',menuStyle);
                taskMenu.setHTMLContainer(document.getElementById('taskMenuDropDownDiv'));

                <out:apply-templates select="atask">
                    <out:with-param name="parent">taskMenu</out:with-param>
                </out:apply-templates>

                <out:apply-templates select="cascadedAgentTask"/>

                function showTaskMenu() {
                    if (taskMenu &amp;&amp; taskMenu.isVisible()) {
        				taskMenu.remove();
        			} else {
        				taskMenu.draw();
        				taskMenu.show();
						if(taskMenu.get(0) != null) {
							taskMenu.get(0).setFocus();
						}
        				if(document.body.getWndObserver) {
    				        //Notify that mouseup occured. And orginitated from here.
    				        document.body.getWndObserver().notify(taskMenu,"mouseup");
    				    }
        			}
                }

                //prevent the event from bubbling to other elements
                function taskArea_cancelBub(evt)
                {
                    //get the event in a cross-browser fashion
                    evt = (evt) ? evt : ((event) ? event : null);
                
                    //prevent the click from proceeding to other nodes
                    if (typeof evt.cancelBubble != 'undefined')
                    {
                        evt.cancelBubble = true;
                    }
                
                    if (typeof evt.stopPropagation != 'undefined')
                    {
                        evt.stopPropagation();
                    }
                }

                function getPageOffsetLeft(el) {	
                    var x=0;
                    
                    // Return the x coordinate of an element relative to the page.
                    if(el != null) {	
                        x = el.offsetLeft;
                        if (el.offsetParent != null)
                            x += getPageOffsetLeft(el.offsetParent);
                    }
                    return x;
                }
                
                function getPageOffsetTop(el) {	
                    var y=0;
                    
                    // Return the y coordinate of an element relative to the page.
                    if(el != null) {	
                        y = el.offsetTop;
                        if (el.offsetParent != null)
                            y += getPageOffsetTop(el.offsetParent);
                    }
                    return y;
                }
                
                function showTaskItem( id, x)
                {	
                    var doc = document.getElementById(id);
                    if (doc == null) {
                        alert("something wrong in menu");
                    }
                
                    switch(x) {
                        case 0: doc.className='task_inactive'; break;
                        case 1: doc.className='task_active';break;
                        case 2: doc.className='taskItemLast'; break;
                        case 3: doc.className='taskItemLast'; break;
                        case 4: doc.className='taskItemCurrent'; break;
                        case 5: doc.className='taskItemCurrent'; break;
                        case 6: doc.className='taskItemSelected'; break;
                        case 7: doc.className='taskItemHidden'; break;
                        case 8: doc.className='taskItemHidden'; break;
                        otherwise: doc.className='taskItemCurrent';
                    }
                }
	        </script>   
        </out:template>
        
        <!-- atask template -->
        <out:template match="atask">
            <out:param name="parent"/>
            <out:variable name="command"><out:value-of select="link"/></out:variable>
            <out:variable name="menuName" select="concat('item',generate-id())"/>
                var <out:value-of select="$menuName"/> = new CMenuItem(<out:value-of select="$parent"/>, &quot;<out:value-of select="xtsext:javascriptencode(string(./text))"/>&quot;, &quot;<out:value-of select="xtsext:javascriptencode(string(./id))"/>&quot;, &quot;<out:value-of select="xtsext:javascriptencode(string($command))"/>&quot;, &quot;<out:value-of select="./icon"/>&quot;, menuItemStyle, &quot;<out:value-of select="xtsext:javascriptencode(string(./text))"/>&quot;, "", "<out:value-of select="xtsext:javascriptencode(string(userCapability))"/>");
            <out:if test="./userCapability">
                tasksMenuMap[&quot;<out:value-of select="$menuName"/>&quot;] = <out:value-of select="$menuName"/>;
            </out:if>                
        </out:template>
        
        <!-- cascadedAgentTask template -->
        <out:template match="cascadedAgentTask">
            <out:variable name="command"><out:value-of select="link"/></out:variable>
            <out:variable name="menuName" select="concat('taskItem_',generate-id())"/>
                var <out:value-of select="$menuName"/> = new CMenuItem(taskMenu, &quot;<out:value-of select="xtsext:javascriptencode(string(./text))"/>&quot;, &quot;<out:value-of select="xtsext:javascriptencode(string(./id))"/>&quot;, '', '', menuItemStyle, '');
                var <out:value-of select="$menuName"/>_menu = <out:value-of select="$menuName"/>.createCascadedMenu(menuStyle,5);
            <out:apply-templates select="atask">
                <out:with-param name="parent"><out:value-of select="$menuName"/>_menu</out:with-param>
            </out:apply-templates>
        </out:template>
        
        <!-- in wizard task -->
        <out:template match="wtask">
            <tr class="task_inactive" name="{'{@alias}'}">
                <!--Distinguish IDs of tags when different style. Used for A11Y. 2014-->
				<out:choose>
					<out:when test="./style='normal'">
						<out:attribute name="id"><out:value-of select="@alias"/>
						</out:attribute>
					</out:when>
					<out:otherwise>
						<out:attribute name="id"><out:value-of select="@alias"/>_wtask
						</out:attribute>
					</out:otherwise>
				</out:choose>
                <td align="center" valign="middle" width="3px" cellpadding="3px">
                    <img alt="" src="{'{./icon}'}" width="16px"/>
                </td>
                <td align="justify" width="100%">
                    <out:value-of select="./text"/>
                </td>
            </tr>
        </out:template>
        
        <!-- content template -->
        <out:template match="content">
            <out:copy-of select="./*"/>
                <out:if test="./tr/td/div[@id='agentItemsTreeContainer']">           
                   <out:apply-templates select="/root/context"></out:apply-templates>
                </out:if>
        </out:template>
      
    </xsl:template>
    <!-- 
	* - This next template is required to copy all other elements into the result. 
	-->
    <xsl:template match="*">
        <xsl:copy>
            <xsl:copy-of select="@*"/>
            <xsl:apply-templates/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>