analytics/templates/ps/logicsheets/presentation/controls/presentation.xsl

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

    IBM Cognos Products: ps

    (C) Copyright IBM Corp. 2005, 2017

    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: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:cm="http://developer.cognos.com/schemas/xts-cm/1/"
    xmlns:utml="http://developer.cognos.com/schemas/xts/logicsheet/xslt/formlogic/"
    exclude-result-prefixes="xsl cp xts xtsext cm utml">
    <xsl:output method="xml" encoding="UTF-8" indent="no"/>
    <xsl:namespace-alias stylesheet-prefix="out" result-prefix="xsl"/>

    <!--
    This stylesheet (presentation.xsl) consists of the following templates:
        cp:dynamicSectionTop
        cp:columnContent
        cp:columnHeader
        cp:columnFooter
        cp:columnHeaderToggleSet
        cp:label
        cp:pathText
        cp:pathSeperator
        cp:pathLeafNode
        cp:pathLink
        cp:pathSeparator
        cp:sortListDisplay
        cp:tab
        cp:select
        cp:tabend
        cp:table
        cp:tabset
        cp:dialog
        cp:flyoutControl
        cp:renderPushButton
        cp:toolbarControl
        cp:tabControl
        cp:colourSelectionDialog
    -->



    <!-- ====================================================================================== -->
    <!-- Path Control - Used by cf:expandingSection -->
    <!-- Generic wrapers used to style path control elements. -->
    <xsl:template match="cp:pathText"><xsl:apply-templates/></xsl:template>
    <xsl:template match="cp:pathTextSeparator"> <xsl:text> </xsl:text><xsl:apply-templates/><xsl:text> </xsl:text></xsl:template>
    <xsl:template match="cp:pathLeafNode"><span class="pathLeafNode"><xsl:apply-templates/></span></xsl:template>
    <xsl:template match="cp:pathLink"><span class="pathLink"><xsl:apply-templates/></span></xsl:template>
    <xsl:template match="cp:pathSeparator"><span class="pathSeparator"> <xsl:text> </xsl:text><xsl:apply-templates/><xsl:text> </xsl:text></span></xsl:template>



    <!-- ====================================================================================== -->
    <!-- Expanding Section Control - Used by cf:dynamicExpandingSection -->
    <!--
    Template - cp:dynamicSectionTop:
        Attributes:
            @indent - if the section is to be indented.
            @title - the title of the section.
            @name - the name of the expanding section.
            @onclick - execution when onclick event fired.
    -->
    <xsl:template match="cp:dynamicSectionTop">
        <table border="0" cellpadding="0" cellspacing="0" style="padding-bottom:5px; padding-top:5px;">
            <tr>
                <td>
                    <xsl:variable name="expanded">
                        <xsl:choose>
                            <xsl:when test="@visible = 'true'">true</xsl:when>
                            <xsl:otherwise>false</xsl:otherwise>
                        </xsl:choose>
                    </xsl:variable>
                    <a id="{@name}_control" onkeypress="javascript:if(event.keyCode==9) return true; toggleDynamicSection('{@name}');{@onclick}" onclick="javascript:toggleDynamicSection('{@name}');{@onclick}" href="#" role="button" aria-controls="{@name}">
                        <xsl:if test="@longDescription">
                            <xsl:attribute name="aria-labelledby">
                                <xsl:value-of select="@longDescription"/>
                            </xsl:attribute>
                        </xsl:if>
                        <xsl:if test="@role">
                            <xsl:attribute name="role">
                                <xsl:value-of select="@role"/>
                            </xsl:attribute>
                        </xsl:if>
                        <div nowrap="nowrap" role="group" aria-labelledby="{@name}_title"> 
                            <xsl:if test="@title">
                                <span style="vertical-align: top; white-space: nowrap" class="formLink" id="{@name}_title">
                                    <xsl:if test="not(@indent) or (@indent='yes')">
                                        <xsl:attribute name="style">padding-left:12px;</xsl:attribute>
                                    </xsl:if>
                                    <xts:string id="{@title}"/>
                                </span>
                            </xsl:if>
                            <span style="padding:left:3px; vertical-align: middle;">
                                <img style="position: relative; top: -8px" name="img{@name}" id="img{@name}" border="0">
                                    <xsl:choose>
                                        <xsl:when test="@visible = 'true'">
                                            <out:attribute name="src"><out:value-of select="$skin_images"/>prompt_option_collapse.gif</out:attribute>
                                            <out:attribute name="alt"><xts:string id="IDS_SECTION_COLLAPSE"/></out:attribute>
                                        </xsl:when>
                                        <xsl:otherwise>
                                            <out:attribute name="src"><out:value-of select="$skin_images"/>prompt_option_expand.gif</out:attribute>
                                            <out:attribute name="alt"><xts:string id="IDS_SECTION_EXPAND"/></out:attribute>
                                        </xsl:otherwise>
                                    </xsl:choose>
                                </img>
                            </span>
                        </div>
                    </a>
                </td>
            </tr>
        </table>
    </xsl:template>


    <!--
    Template - cp:sortListDisplay:
        Render sortListDisplay entry.
        Operation:
            Applies the templates for cp:section1 and cp:section2 within this tag.
    -->
    <xsl:template match="cp:sortListDisplay">
        <table summary="" border="0" cellspacing="0" cellpadding="1" role="presentation">
            <tr>
                <td class="sortSelectContainer" nowrap="nowrap">
                    <xsl:apply-templates select="cp:section1/child::node()"/>
                </td>
                <xsl:if test="cp:section3">
                    <td valign="top">
                        <xsl:apply-templates select="cp:section3/child::node()"/>
                    </td>
                </xsl:if>
            </tr>
            <tr>
                <td  class="formLink" nowrap="nowrap" >
                    <out:attribute name="align">
                        <out:choose>
                            <out:when test="$is-ui-rtl"><out:value-of select="'left'"/></out:when>
                            <out:otherwise><out:value-of select="'right'"/></out:otherwise>
                        </out:choose>

                    </out:attribute>

                    <xsl:apply-templates select="cp:section2/child::node()"/>
                </td>
                <xsl:if test="cp:section3">
                    <td/>
                </xsl:if>
            </tr>
        </table>
    </xsl:template>

    <xsl:template match="cp:fromTo">
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr valign="bottom">
            <td width="100%" align="left">
                <table summary="" role="presentation">
                    <tr>
                        <td>
                            <xsl:choose>
                                <xsl:when test="cp:breadcrumb">
                                    <xsl:attribute name="class">formLink</xsl:attribute>
                                    <xsl:attribute name="style">white-space:nowrap;padding-bottom:5px;padding-right:8px;</xsl:attribute>
                                    <xsl:copy-of select="cp:breadcrumb/child::node()"/>
                                </xsl:when>
                                <xsl:when test="cp:tableLabel">
                                    <xsl:attribute name="class">formLabel</xsl:attribute>
                                    <xsl:attribute name="style">white-space:nowrap;padding-bottom:5px;padding-right:8px;</xsl:attribute>
                                    <xsl:copy-of select="cp:tableLabel/child::node()"/>
                                </xsl:when>
                            </xsl:choose>
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table summary="" role="presentation" cellpadding="0" cellspacing="0" style="padding:1px;height:20px;">
                <tr>
                    <td class="formLabel" style="white-space:nowrap;padding-right:5px;"><xts:string id="IDS_ENTRIES"/></td>
                    <td nowrap="nowrap"><xsl:apply-templates select="cp:collectCount/*"/></td>
                    <td nowrap="nowrap" style="padding-right:8px;padding-left:2px;"><xsl:apply-templates select="cp:goToButton/*"/></td>
                    <td nowrap="nowrap"><div style="height:13px;" class="rowDivider"/></td>
                    <td nowrap="nowrap" style="padding-left:8px;"><xsl:apply-templates select="cp:buttons/*"/></td>
                </tr>
                </table>
            </td>
        </tr>
        </table>
    </xsl:template>

    <xsl:template match="cp:fromToBottom">
        <table summary="" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr valign="bottom">
            <out:attribute name="align">
                <out:choose>
                    <out:when test="$is-ui-rtl"><out:value-of select="'left'"/></out:when>
                    <out:otherwise><out:value-of select="'right'"/></out:otherwise>
                </out:choose>
            </out:attribute>
            <td>
                <table summary="" role="presentation" cellpadding="0" cellspacing="0" style="padding:1px;height:20px;">
                <tr>
                    <td class="formText" style="white-space:nowrap;padding-right:5px;"><xts:string id="IDS_ENTRIES"/></td>
                    <td nowrap="nowrap"><xsl:apply-templates select="cp:collectCountBottom/*"/></td>
                    <td nowrap="nowrap" style="padding-right:8px;padding-left:2px;"><xsl:apply-templates select="cp:goToButton/*"/></td>
                    <td nowrap="nowrap"><div style="height:13px;" class="rowDivider"/></td>
                    <td nowrap="nowrap" style="padding-left:8px;"><xsl:apply-templates select="cp:buttonsBottom/*"/></td>
                </tr>
                </table>
            </td>
        </tr>
        </table>
    </xsl:template>


    <!-- ====================================================================================== -->
    <!-- Tab control -->
    <!--
    Template - cp:tabset:
        Template used to render a set of tabs.
        Attributes:
            @width - the tabset width.
            @inverted - the tabset is drawn upside down
        Operation:
            Renders UI for all tabs in the tab set.
    -->
    <xsl:template match="cp:tabset">
        <!-- define the inverted attributes - we can switch the direction of the tabset -->
        <xsl:variable name="inverted">
            <xsl:choose>
                <xsl:when test="@inverted">true</xsl:when>
                <xsl:otherwise>false    </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <table class="mainHeader3" summary="" height="20" cellspacing="0" cellpadding="0" border="0" role="presentation">
            <xsl:attribute name="width">
                <xsl:choose>
                    <xsl:when test="@width"><xsl:value-of select="@width"/></xsl:when>
                    <xsl:otherwise>100%</xsl:otherwise>
                </xsl:choose>
            </xsl:attribute>
            <tr>
                <out:variable name="df_tab_selected"><xsl:copy-of select="cp:select/child::node()"/></out:variable>
                <!-- create the tabs-->
                <td valign="bottom" align="right">
                    <table summary="" cellspacing="0" cellpadding="0" border="0" role="tablist">
                        <xsl:if test="@id != ''">
                            <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
                        </xsl:if>
                        <tr>
                            <xsl:apply-templates/>
                        </tr>
                    </table>
                </td>
                <td width="100%">
                    <xsl:attribute name="valign">
                        <xsl:choose>
                            <xsl:when test="$inverted = 'true'">top</xsl:when>
                            <xsl:otherwise>bottom</xsl:otherwise>
                        </xsl:choose>
                    </xsl:attribute>
                    <table summary="" border="0" height="1" width="100%" cellpadding="0" cellspacing="0" role="presentation">
                        <xsl:attribute name="class">
                            <xsl:choose>
                                <xsl:when test="$inverted = 'true'">tabBorderInverted</xsl:when>
                                <xsl:otherwise>tabBorder</xsl:otherwise>
                            </xsl:choose>
                        </xsl:attribute>            
                        <tr>
                            <td>
                                <img height="1" width="1" alt="">
                                    <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                </img>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </xsl:template>

    <!--
    Template - cp:tab:
        UI rendering of a tab.
        Attributes:
            @var-name - indicator to use the name unquoted.
            @name - the tab name
            @position - position in the set of tabs.
        Example:
            The General tab on the properties page.
        Operation:
            Render the appropriate lines to display a tab.
    -->
    <xsl:template match="cp:tab">
        <!-- define the inverted attributes - we can switch the direction of the tabset -->
        <xsl:variable name="inverted">
            <xsl:choose>
                <xsl:when test="ancestor::cp:tabset/@inverted">true</xsl:when>
                <xsl:otherwise>false</xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <!-- define the size of the tabs - we can choose the min width -->
        <xsl:variable name="width">
            <xsl:choose>
                <xsl:when test="ancestor::cp:tabset/@tabwidth">
                    <xsl:value-of select="ancestor::cp:tabset/@tabwidth"/>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:value-of select="'80'"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <xsl:variable name="nm">
            <xsl:choose>
                <xsl:when test="@var-name = 'true'">string(<xsl:value-of select="@name"/>)</xsl:when>
                <xsl:otherwise>'<xsl:value-of select="@name"/>'</xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <out:if test="not('{@position}' = 'start' and not({$nm} = $df_tab_selected))">
            <td width="1" height="1">
            
                <xsl:attribute name="class">
                    <xsl:choose>
                        <xsl:when test="$inverted = 'true'">tabBorderInverted</xsl:when>
                        <xsl:otherwise>tabBorder</xsl:otherwise>
                    </xsl:choose>
                </xsl:attribute>            
                <img height="1" width="1" alt="">
                    <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                </img>
            </td>
        </out:if>
        <td height="20" width="{$width}"  class="staticTabPadding">
            <table width="100%" height="20" cellspacing="0" cellpadding="0" border="0" summary="" role="presentation">
                <xsl:choose>
                    <xsl:when test="$inverted = 'true'">                    
                        <out:choose>
                            <out:when test="$df_tab_selected = {$nm}">
                                <out:attribute name="class">tabSelectedInverted</out:attribute>
                            </out:when>
                            <out:otherwise>
                                <out:attribute name="class">tabNormalInverted</out:attribute>
                            </out:otherwise>
                        </out:choose>
                    </xsl:when>
                    <xsl:otherwise>
                        <out:choose>
                            <out:when test="$df_tab_selected = {$nm}">
                                <out:attribute name="class">tabSelected</out:attribute>
                            </out:when>
                            <out:otherwise>
                                <out:attribute name="class">tabNormal</out:attribute>
                            </out:otherwise>
                        </out:choose>
                    </xsl:otherwise>
                </xsl:choose>
                <tr>
                    <td height="18" nowrap="nowrap" align="center">
                        <out:attribute name="class">
                            <out:choose>
                                <out:when test="$df_tab_selected = {$nm}">tabLabel</out:when>
                                <out:otherwise>tabLink</out:otherwise>
                            </out:choose>
                        </out:attribute>
                        <out:if test="$df_tab_selected = {$nm}">
                            <out:attribute name="tabindex">0</out:attribute>
                            <out:attribute name="role">tab</out:attribute>
                            <out:attribute name="aria-selected">true</out:attribute>
                        </out:if>
                        <!-- create the tabs -->
                        <out:choose>
                            <out:when test="$df_tab_selected = {$nm}">
                                <xsl:copy-of select="*[local-name() != 'a']"/>
                                <xsl:copy-of select="descendant::cp:label/node()"/>
                            </out:when>
                            <out:otherwise>
                                <out:if test="true()">
                                    <out:variable name="isTabSelected">
                                       <xsl:choose>
                    						<xsl:when test="$inverted = 'true'">                    
						                        <out:choose>
						                            <out:when test="$df_tab_selected = {$nm}">true</out:when>
						                            <out:otherwise>false</out:otherwise>
						                        </out:choose>
                    						</xsl:when>
						                    <xsl:otherwise>
						                        <out:choose>
						                            <out:when test="$df_tab_selected = {$nm}">true</out:when>
						                            <out:otherwise>false</out:otherwise>
						                        </out:choose>
						                    </xsl:otherwise>
                						</xsl:choose>
                                    </out:variable>
                                	<xsl:choose>
                                           <xsl:when  test=".//a"><xsl:apply-templates mode="tab"/></xsl:when>
                                           <xsl:otherwise><xsl:apply-templates /></xsl:otherwise>
                                    </xsl:choose>
                                </out:if>  
                            </out:otherwise>
                        </out:choose>
                    </td>
                </tr>

            </table>
        </td>
        <out:if test="'{@position}' = 'end' and {$nm} = $df_tab_selected">
            <td width="1" height="1">

            <xsl:attribute name="class">
                    <xsl:choose>
                        <xsl:when test="$inverted = 'true'">tabBorderInverted</xsl:when>
                        <xsl:otherwise>tabBorder</xsl:otherwise>
                    </xsl:choose>
                </xsl:attribute>            
                <img height="1" width="1" alt="">
                    <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                </img>
            </td>
        </out:if>
    </xsl:template>

   <xsl:template match="a" mode="tab">
      <a>
         <xsl:copy-of select="@*[local-name() != 'role']"/>
         <xsl:attribute name="role">tab</xsl:attribute>
         <xsl:attribute name="aria-selected">false</xsl:attribute>
         <xsl:apply-templates select="./*"/>
      </a>   
   </xsl:template>

    <!--
    Template - cp:label:
        <cp:label> is used inside of a <cp:tab> control to wrap a static tab label.
    -->
    <xsl:template match="cp:label">
        <xsl:copy-of select="child::node()"/>
    </xsl:template>

    <!--
    Template - cp:select:
        Used by the tabset control to specify the selected tab.
    -->
    <xsl:template match="cp:select"/>

    <!--
    Template - cp:tabend:
        Render the closing bar on the last display tab, when selected.
    -->
    <xsl:template match="cp:tabend">
        <td width="1" height="1" class="tabBorder">
            <img height="1" width="1" alt="">
                <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
            </img>
        </td>
    </xsl:template>
    <!-- End of Tab control -->
    <!-- ====================================================================================== -->




    <!-- ====================================================================================== -->
    <!-- Table control -->
    <!--
    Template - cp:table:
        Render the table with one or more columns.
        Attributes:
            @name - the table name.
            @iterator - the object that is to be used for iteration
            @listSize - number of line in the table.
            @showControls - display the pager top, page-up, page-down, and bottom controls.
            @width - the table width.
            @role - a role to apply to the table
        Operation:
            Generates the list pager table.
    -->
    <xsl:template match="cp:table">
        <!-- this is the count of items in our list -->
        <out:variable name="cp_{@name}_count">
            <xsl:attribute name="select">
                <xsl:choose>
                    <xsl:when test="@iterate">
                        <xsl:value-of select="@iterate"/>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:value-of select="'NOTHING/NOTHING'"/>
                    </xsl:otherwise>
                </xsl:choose>
            </xsl:attribute>
        </out:variable>

        <out:variable name="cp_{@name}_showEntries">
            <xsl:attribute name="select">
                <xsl:choose>
                    <xsl:when test="string(@showEntries)!=''"><xsl:value-of select="@showEntries"/></xsl:when>
                    <xsl:otherwise>'true'</xsl:otherwise>
                </xsl:choose>
            </xsl:attribute>
        </out:variable>
        <!-- the count of the columns -->
        <out:variable name="cp_{@name}_columnCount">
            <out:variable name="declaredColumnCount">
                <out:value-of select="{(count(cp:tableContent//cp:columnContent) * 2) - 1}"/>
            </out:variable>
            <out:variable name="columnConditionCount">
                <xsl:for-each select="cp:tableContent//cp:columnContent">
                    <xsl:if test="cp:columnCondition">
                        <out:variable name="cc{position()}">
                            <xsl:copy-of select="cp:columnCondition"/>
                        </out:variable>
                        <out:if test="$cc{position()}!='true'">
                            <out:value-of select="'.'"/>
                        </out:if>
                    </xsl:if>
                </xsl:for-each>
            </out:variable>
            
            <out:value-of select="$declaredColumnCount - (string-length($columnConditionCount) * 2)"/>
        </out:variable>
        
        <!-- the count of rows -->
        <out:variable name="cp_{@name}_rowCount" select="(count($cp_{@name}_count))"/>
        <out:variable name="cp_{@name}_listSize">
            <xsl:if test="@listSize"><out:value-of select="{@listSize}"/></xsl:if>
        </out:variable>
        <out:variable name="cp_{@name}_lastLine">
            <xsl:if test="@listSize"><out:value-of select="{@lastLine}"/></xsl:if>
        </out:variable>
        <out:variable name="cp_{@name}_displayItemCount">
            <xsl:if test="@displayItemCount"><out:value-of select="{@displayItemCount}"/></xsl:if>
        </out:variable>
        <out:variable name="cp_{@name}_requestNumberItems">
            <xsl:if test="@requestNumberItems"><out:value-of select="{@requestNumberItems}"/></xsl:if>
        </out:variable>
        <out:variable name="cp_{@name}_endLine">
            <xsl:if test="@endLine"><out:value-of select="{@endLine}"/></xsl:if>
        </out:variable>
        <out:variable name="cp_{@name}_startLine">
            <xsl:if test="@startLine"><out:value-of select="{@startLine}"/></xsl:if>
        </out:variable>

        <!--if non-virtual or not, virtual=true  -->
        <out:variable name="cf_vname_{@name}">
            <xsl:if test="@vname"><xsl:value-of select="@vname"/></xsl:if>
        </out:variable>
        <!--  pager need special check to show bottom buttons -->
        <out:variable name="showBottom_{@name}">
            <out:variable name="fromPgr_{@name}">
                <out:choose>
                    <out:when test="string(/root/env/param[@name='m_pagerfrom{@name}']) != '' ">
                        <!-- in case pagerfrom is out of range -->
                        <out:choose>
                            <out:when test="/root/env/param[@name='m_pagerfrom{@name}'] &lt;= $cp_{@name}_rowCount">
                                <out:value-of select="'true'"/>
                            </out:when>
                            <out:otherwise><out:value-of select="'false'"/></out:otherwise>
                        </out:choose>
                    </out:when>
                    <out:otherwise><out:value-of select="'true'"/></out:otherwise>
                </out:choose>
            </out:variable>
            <out:choose>
                <out:when test="$cf_vname_{@name}='true'">
                    <out:value-of select="'true'"/>
                </out:when>
                <out:otherwise>
                    <out:choose>
                            <out:when test="($cp_{@name}_endLine -$cp_{@name}_startLine +1) >= 26 and $fromPgr_{@name}='true'">
                                <out:value-of select="'true'"/>
                            </out:when>
                        <out:otherwise><out:value-of select="'false'"/></out:otherwise>
                    </out:choose>
                </out:otherwise>
            </out:choose>
        </out:variable>

        <!-- Determine if we are to show horizontal lines between pages rows  -->
        <out:variable name="isGridControl_{@name}">
            <xsl:choose>
                <xsl:when test="cp:tableContent[@style='linedRows']">y</xsl:when>
                <xsl:otherwise>n</xsl:otherwise>
            </xsl:choose>
        </out:variable>
        <out:variable name="isForcedGridControl_{@name}">
            <xsl:choose>
                <xsl:when test="cp:tableContent[@forceGrid='true']">true</xsl:when>
                <xsl:otherwise>false</xsl:otherwise>
            </xsl:choose>
        </out:variable>

        <!-- these are the available text types in a cp:table -->
        <out:variable name="pWidth_{@name}">
            <xsl:choose>
                <xsl:when test="string(@width)!=''"><xsl:value-of select="@width"/></xsl:when>
                <xsl:otherwise>100%</xsl:otherwise>
            </xsl:choose>
        </out:variable>

        <table border="0" cellpadding="1" cellspacing="0" summary="" role="presentation">
            <out:attribute name="width"><out:value-of select="$pWidth_{@name}"/></out:attribute>
            <xsl:choose>
                <xsl:when test="cp:action">
                <!-- To determine whether or not bottom controls should be shown. Shown if the number of lines in the list is >= 26 -->
                <!-- The non-virtual pagers require more conditions: if adding items w/out using pager controls-->
                <out:if test="$showBottom_{@name}='true' and $cp_{@name}_displayItemCount &gt;= 26">
                    <!-- 2nd part of this pertains more to non-virtual pagers -->
                    <out:if test="($cp_{@name}_lastLine &gt;= $cp_{@name}_displayItemCount) or ($cp_{@name}_requestNumberItems=0 and $cp_{@name}_lastLine &lt; $cp_{@name}_displayItemCount and  $cp_{@name}_lastLine &gt;= 26)">
                        <tr>
                            <xsl:if test="@showControls='true'">
                                <td valign="top">
                                    <img height="1" width="1" alt="">
                                        <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                    </img>
                                </td>
                            </xsl:if>
                            <td align="right" class="tabletext" colspan="2">
                                <img height="1" width="10" alt="">
                                    <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                </img>
                                <xsl:for-each select="cp:action">
                                    <img height="1" width="10" alt="">
                                        <out:attribute name="src"><out:value-of select="$webcontent"/>/images/space.gif</out:attribute>
                                    </img>
                                    <xsl:apply-templates/>
                                </xsl:for-each>
                            </td>
                            <xsl:if test="@showControls='true'">
                                <td valign="top">
                                    <img height="1" width="1" alt="">
                                        <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                    </img>
                                </td>
                            </xsl:if>
                        </tr>
                    </out:if>
                </out:if>
            </xsl:when>
            <xsl:when test="cp:actionTop">
                <!-- To determine whether or not bottom controls should be shown. Shown if the number of lines in the list is >= 26 -->
                <!-- The non-virtual pagers require more conditions: if adding items w/out using pager controls-->
                <out:if test="$showBottom_{@name}='true' and $cp_{@name}_displayItemCount &gt;= 26">
                    <!-- 2nd part of this pertains more to non-virtual pagers -->
                    <out:if test="($cp_{@name}_lastLine &gt;= $cp_{@name}_displayItemCount) or ($cp_{@name}_requestNumberItems=0 and $cp_{@name}_lastLine &lt; $cp_{@name}_displayItemCount and  $cp_{@name}_lastLine &gt;= 26)">
                        <tr>
                            <xsl:apply-templates select="cp:actionTop"/>
                        </tr>
                    </out:if>
                </out:if>
            </xsl:when>
            </xsl:choose>
            <xsl:if test="cp:fromTo">
            <tr align="right">
                <td colspan="2" width="100%" nowrap="nowrap">
                    <xsl:apply-templates select="cp:fromTo"/>
                </td>
            </tr>
            </xsl:if>
            <tr>
                <td valign="top" width="100%" colspan="2">
                    <xsl:if test="@showControls='true'">
                        <out:attribute name="rowspan">2</out:attribute>
                    </xsl:if>
                    <div>
                        <xsl:if test="@id != ''">
                             <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
                        </xsl:if>
                        <xsl:if test="string(@is-scrolling) = 'true'">
                            <out:choose>
                                <out:when test="$browser='ie'">
                                    <out:attribute name="style">overflow:auto;width:100%;border:1px solid black</out:attribute>
                                </out:when>
                                <out:otherwise>
                                    <out:attribute name="style">border:1px solid black</out:attribute>
                                </out:otherwise>
                            </out:choose>
                        </xsl:if>
                        <xsl:if test="@role != ''">
                             <xsl:attribute name="role"><xsl:value-of select="@role"/></xsl:attribute>
                        </xsl:if>
                        <!-- Made this a true data table (for accessibility support) by not having role="presentation" and defining each column header as <th scope="col"> rather than <td>. -->
                        <span style="position: absolute;margin-left: -9999px; margin-top: -9999px; " id="lbl_selectAll_deselectAll{@name}"><xts:string id="IDS_SELECT_DESELECT_ALL"/></span>
                        <table width="100%" border="0" cellpadding="1" cellspacing="0">
                            <xsl:if test="not(string(@is-scrolling) = 'true')">
                                <xsl:attribute name="class">cctable</xsl:attribute>
                            </xsl:if>
                            <out:attribute name="summary">
                                <xsl:variable name="summary">
                                        <xsl:copy-of select="cp:tableSummary/*"/>
                                </xsl:variable>
                                <xsl:choose>
                                    <xsl:when test="$summary != ''"><xsl:value-of select="$summary"/></xsl:when>
                                    <xsl:when test="count($summary/*) &gt;= 1"><xsl:copy-of select="cp:tableSummary/*"/></xsl:when>
                                    <xsl:otherwise><xsl:text>Content</xsl:text></xsl:otherwise>
                                </xsl:choose>
                            </out:attribute>
                            <out:if test="/root/env/param[@name='md.callBack']">
                                <out:attribute name="id">pgr</out:attribute>
                            </out:if>
                            <out:attribute name="cellpadding">
                                <out:choose>
                                <out:when test="$isGridControl_{@name} = 'y' or key('session-param', 'listViewSeparator') = 'line'">1</out:when>
                                    <out:otherwise>2</out:otherwise>
                                </out:choose>
                            </out:attribute>
                            <thead id="{concat(string(@id),'Header')}" >
                                <xsl:if test="cp:tableHeader">
                                    <tr class="tableHeader" >
                                        <xsl:if test="string(@is-scrolling) = 'true'">
                                            <out:if test="$browser = 'ie'">
                                                <out:attribute name="style">position:relative;top:expression(this.offsetParent.scrollTop);</out:attribute>
                                            </out:if>
                                        </xsl:if>
                                        
                                        <!-- for each column passed -->
                                        <xsl:apply-templates select="cp:tableHeader/*"/>

                                        <xsl:if test="string(@is-scrolling) = 'true'">
                                            <out:if test="$browser != 'ie'">
                                                <th scope="col">
                                                    <img height="1px" width="18px" alt="">
                                                        <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                                    </img>
                                                </th>
                                            </out:if>
                                        </xsl:if>
                                    </tr>
                                </xsl:if>
                            </thead>
                                
                            <tbody>
                                <xsl:if test="string(@is-scrolling) = 'true'">
                                    <xsl:attribute name="id"><xsl:value-of select="concat(string(@id),'Body')"/></xsl:attribute>
                                    <out:if test="$browser != 'ie'">
                                        <out:attribute name="style">overflow:auto</out:attribute>
                                    </out:if>
                                </xsl:if>
                                <out:variable name="cp_{@name}_table_content">
                                    <xsl:attribute name="select">
                                        <xsl:choose>
                                            <xsl:when test="@iterate">
                                                <xsl:value-of select="@iterate"/>
                                            </xsl:when>
                                            <xsl:otherwise>
                                                <xsl:value-of select="'//root'"/>
                                            </xsl:otherwise>
                                        </xsl:choose>
                                    </xsl:attribute>
                                </out:variable>
                        <out:variable name="tcTest_{@name}">
                            <out:if test="(($isGridControl_{@name} = 'y' and key('session-param', 'listViewSeparator') = 'none') or key('session-param', 'listViewSeparator') = 'line')">true</out:if>
                                </out:variable>
                                <out:if test="string($cp_{@name}_showEntries)='true'">
                                    <out:for-each select="$cp_{@name}_table_content">
                                <out:if test="$tcTest_{@name} != '' or ($isGridControl_{@name} = 'y' and $isForcedGridControl_{@name}='true')">

                                            <tr role="presentation" aria-hidden="true">
                                                <out:attribute name="style">height:1px</out:attribute> <!-- 189822 made the hack apply to all browsers. :Hack for Moz browser 1.x, to fix a problem with gaps between rows in a scrollable table -->
                                                <td class="rowDividerLine">
                                                    <out:attribute name="colspan"><out:value-of select="$cp_{@name}_columnCount"/></out:attribute>
                                                    <img height="1" width="1" alt="">
                                                        <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                                    </img>
                                                </td>
                                            </tr>
                                        </out:if>
                                        <xsl:for-each select="cp:tableContent">
                                            <xsl:apply-templates select="*[local-name() = 'common-render-variables']"/>
                                            <xsl:apply-templates select="*[local-name() != 'common-render-variables']"/>
                                        </xsl:for-each>
                                    </out:for-each>
                                    <tr role="presentation" aria-hidden="true"><td/></tr> <!-- 189822 made the hack apply to all browsers. Hack for Moz browser 1.x, to fix a problem with gaps between rows in a scrollable table -->
                                </out:if>
                                <out:if test="('{@showEmptyMsg}'='true' and $cp_{@name}_rowCount = 0) or ('{@showControls}'='true' and $cp_{@name}_showEntries='false') or ('{@showControls}'='true' and (not($cp_{@name}_listSize = 'small') or $cp_{@name}_rowCount = 0)  and 2 > $cp_{@name}_rowCount)">
                                    <tr>
                                        <td valign="top" width="15">
                                            <out:attribute name="colspan"><out:value-of select="$cp_{@name}_columnCount"/></out:attribute>
                                            <img width="15" alt="">
                                                <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                                <out:choose>
                                                    <out:when test="$cp_{@name}_showEntries='true' and $cp_{@name}_rowCount > 0">
                                                        <out:attribute name="height"><out:value-of select="(2 - $cp_{@name}_rowCount) * 20"/></out:attribute>
                                                    </out:when>
                                                    <out:otherwise>
                                                        <out:attribute name="height">40</out:attribute>
                                                    </out:otherwise>
                                                </out:choose>
                                            </img>
                                        </td>
                                    </tr>
                                </out:if>
                                <out:if test="('{@showEmptyMsg}'='true' and $cp_{@name}_rowCount = 0) or ('{@showControls}'='true' and $cp_{@name}_showEntries!='true') or ('{@showControls}'='true' and (string($cp_{@name}_lastLine) = '0'))">
                                    <tr>
                                        <td valign="bottom" align="center" class="formText" width="100%">
                                            <out:attribute name="colspan"><out:value-of select="$cp_{@name}_columnCount"/></out:attribute>
                                            <out:choose>
                                                <out:when test="$cp_{@name}_showEntries!='true'">
                                                    <xts:string id="IDS_END_OF_LIST"/>
                                                </out:when>
                                                <out:when test="'{@msgID}' != ''">
                                                    <xts:string id="{@msgID}"/>
                                                </out:when>
                                                <out:otherwise>
                                                    <xts:string id="IDS_NO_ITEMS_FOUND"/>
                                                </out:otherwise>
                                            </out:choose>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <img width="15" alt="">
                                                <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                                <out:attribute name="colspan"><out:value-of select="$cp_{@name}_columnCount"/></out:attribute>
                                                <out:choose>
                                                    <out:when test="$cp_{@name}_showEntries='true' and $cp_{@name}_rowCount > 0">
                                                        <out:attribute name="height"><out:value-of select="(2 - $cp_{@name}_rowCount) * 20"/></out:attribute>
                                                    </out:when>
                                                    <out:otherwise>
                                                        <out:attribute name="height">40</out:attribute>
                                                    </out:otherwise>
                                                </out:choose>
                                            </img>
                                        </td>
                                    </tr>
                                </out:if>
                            </tbody>
                            <tfoot>
                                <xsl:if test="cp:tableFooter">
                                    <tr class="tableFooter">
                                        <!-- for each column passed -->
                                        <xsl:apply-templates select="cp:tableFooter/*"/>
                                    </tr>
                                </xsl:if>
                            </tfoot>
                        </table>
                    </div>
                </td>
            </tr>

            <xsl:if test="not(string(@is-scrolling) = 'true')">
                <tr>
                    <td colspan="2">
                        <img height="1" width="1" alt="">
                            <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                        </img>
                    </td>
                </tr>
                <xsl:if test="cp:fromToBottom">
                    <!-- To determine whether or not bottom controls should be shown. Shown if the number of lines in the list is >= 26 -->
                    <!-- The non-virtual pagers require more conditions: if adding items w/out using pager controls-->
                    <out:if test="$showBottom_{@name}='true' and $cp_{@name}_displayItemCount &gt;= 26">
                        <!-- 2nd part of this pertains more to non-virtual pagers -->
                        <out:if test="($cp_{@name}_lastLine &gt;= $cp_{@name}_displayItemCount) or ($cp_{@name}_requestNumberItems=0 and $cp_{@name}_lastLine &lt; $cp_{@name}_displayItemCount and  $cp_{@name}_lastLine &gt;= 26)">
                            <tr align="right">
                                <td colspan="2" width="100%" nowrap="nowrap">
                                    <xsl:apply-templates select="cp:fromToBottom"/>
                                </td>
                            </tr>
                        </out:if>
                    </out:if>
                </xsl:if>
            </xsl:if>

            <xsl:choose>
                <xsl:when test="cp:action">
                    <tr>
                        <td align="right" class="tabletext" colspan="2">
                            <xsl:if test="@showControls='true'">
                                    <img height="1" width="1" alt="">
                                        <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                    </img>
                            </xsl:if>
                            <img height="1" width="10" alt="">
                                <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                            </img>
                            <xsl:for-each select="cp:action">
                                <img height="1" width="10" alt="">
                                    <out:attribute name="src"><out:value-of select="$webcontent"/>/images/space.gif</out:attribute>
                                </img>
                                <xsl:apply-templates/>
                            </xsl:for-each>
                            <xsl:if test="@showControls='true'">
                                    <img height="1" width="1" alt="">
                                        <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                                    </img>
                            </xsl:if>
                        </td>
                    </tr>
                </xsl:when>
                <xsl:when test="cp:actionBottom">
                    <tr>
                        <xsl:apply-templates select="cp:actionBottom"/>
                    </tr>
                </xsl:when>
            </xsl:choose>
        </table>
    </xsl:template>

    <xsl:template match="cp:actionTop">
<!--            <td valign="top">
                <img height="1" width="1" alt="">
                    <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                </img>
            </td>
        <td align="right" class="tabletext" colspan="2">
            <img height="1" width="10" alt="">
                <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
            </img>
            <xsl:for-each select="cp:action">
                <img height="1" width="10" alt="">
                    <out:attribute name="src"><out:value-of select="$webcontent"/>/images/space.gif</out:attribute>
                </img>
                <xsl:apply-templates/>
            </xsl:for-each>
        </td>
            <td valign="top">
                <img height="1" width="1" alt="">
                    <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                </img>
            </td>
        <td/>
-->
                    <td align="right" class="tabletext" colspan="2" nowrap="nowrap">
                        <img height="1" width="10" alt="">
                          <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                        </img>
                        <xsl:for-each select="cp:action">
                          <img height="1" width="10" alt=""><out:attribute name="src"><out:value-of select="$webcontent"/>/images/space.gif</out:attribute></img>
                          <xsl:apply-templates/>
                        </xsl:for-each>
                    </td>
                    <xsl:if test="@showControls='true'">
                        <td valign="top">
                            <img height="1" width="1" alt=""><xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute></img>
                        </td>
                    </xsl:if>
                    <td/>

    </xsl:template>
    <xsl:template match="cp:actionBottom">
<!--            <td valign="top">
                <img height="1" width="1" alt="">
                    <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                </img>
            </td>
        <td align="right" class="tabletext" colspan="2">
            <img height="1" width="10" alt="">
                <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
            </img>
            <xsl:for-each select="cp:action">
                <img height="1" width="10" alt="">
                    <out:attribute name="src"><out:value-of select="$webcontent"/>/images/space.gif</out:attribute>
                </img>
                <xsl:apply-templates/>
            </xsl:for-each>
        </td>
            <td valign="top">
                <img height="1" width="1" alt="">
                    <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                </img>
            </td>
        <td/>
-->
                    <td align="right" class="tableText" colspan="2" nowrap="nowrap">
                        <img height="1" width="10" alt="">
                          <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                        </img>
                        <xsl:for-each select="cp:action">
                          <img height="1" width="10" alt="">
                            <out:attribute name="src"><out:value-of select="$webcontent"/>/images/space.gif</out:attribute>
                          </img>
                          <xsl:apply-templates/>
                        </xsl:for-each>
                    </td>
                    <xsl:if test="@showControls='true'">
                        <td valign="top">
                            <img height="1" width="1" alt="">
                                <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                            </img>
                        </td>
                    </xsl:if>
                    <td/>
    </xsl:template>


    <!--
    Template - cp:common-render-variables:
        Defines xsl variables that belong to a given entry at a row scope
    -->
    <xsl:template match="cp:common-render-variables">
        <xsl:copy-of select="*"/>
    </xsl:template>

    <!--
    Template - cp:columnHeader:
        This template is used to render the column header for particular object contents (usually in the pager).
        Operation:
            Generate html for the columns header.  Provides for column sorting where required:
                Default sorting - render two hollow triangles one right-side up and the other inverted.
                Ascended sorting - render a solid right-side up triangle.
                Descended sorting - render a solid inverted triangle.
    -->
    <xsl:template match="cp:columnHeader">
        <out:if test="true()">
            <out:variable name="columnCondition{position()}">
                <xsl:choose>
                    <xsl:when test="cp:columnCondition"><xsl:copy-of select="cp:columnCondition"/></xsl:when>
                    <xsl:otherwise><xsl:value-of select="true()"/></xsl:otherwise>
                </xsl:choose>
            </out:variable>
            
            <out:if test="$columnCondition{position()} = 'true'">
                <!-- Replaced <td> by <th> in order for tables that include such cp:columnHeader to be represented as true data tables for screen readers. Added onkeypress="keyEvent()" to address a Manual violation). -->
        <th height="10" class="tableTitle" align="left">
               <xsl:choose>
	            <xsl:when test="@scope">
                       <xsl:if test="@scope !=''">
	                      <xsl:attribute name="scope"><xsl:value-of select="@scope"/></xsl:attribute>
	                 </xsl:if>
	            </xsl:when>
	            <xsl:otherwise>
                       <xsl:attribute name="scope">col</xsl:attribute>
	            </xsl:otherwise>
            </xsl:choose>
            <xsl:if test="@tabindex != ''">
                <xsl:attribute name="tabindex"><xsl:value-of select="@tabindex"/></xsl:attribute>
            </xsl:if>
            <xsl:if test="@aria-labelledby">
                <xsl:attribute name="aria-labelledby">
                    <xsl:value-of select="@aria-labelledby"/>
                </xsl:attribute>
            </xsl:if>
            <xsl:if test="@width">
                <xsl:attribute name="width">
                    <xsl:value-of select="@width"/>
                </xsl:attribute>
            </xsl:if>
            <xsl:if test="@title">
                <xsl:attribute name="title">
                    <xsl:value-of select="@title"/>
                </xsl:attribute>
            </xsl:if>
            <xsl:if test="@id">
                <xsl:attribute name="id">
                    <xsl:value-of select="@id"/>
                </xsl:attribute>
            </xsl:if>
            <xsl:choose>
                <xsl:when test="@valign"><xsl:attribute name="valign"><xsl:value-of select="@valign"/></xsl:attribute></xsl:when>
                <xsl:otherwise><xsl:attribute name="valign">middle</xsl:attribute></xsl:otherwise>
            </xsl:choose>
            <xsl:choose>
                <xsl:when test="@wrap">
                    <xsl:attribute name="style">padding-left:2px;padding-top:2px;</xsl:attribute>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:attribute name="style">padding-left:2px;padding-top:2px;white-space:nowrap;</xsl:attribute>
                    <xsl:attribute name="nowrap">nowrap</xsl:attribute>
                </xsl:otherwise>
            </xsl:choose>
            <out:variable name="sortHref">
                <xsl:if test="cp:sortHref">
                    <xsl:copy-of select="cp:sortHref"/>
                </xsl:if>
            </out:variable>
            <xsl:choose>
                <xsl:when test="@sort">
                    <out:variable name="lbl_header">
                        <xsl:apply-templates select="*[not(local-name() = 'sortHref') and not(self::cp:columnCondition)]"/>
                    </out:variable>
                    <out:if test="$lbl_header != ''">
                        <out:attribute name="abbr"><out:value-of select="xtsext:htmlencode($lbl_header)"/></out:attribute>
                    </out:if>
                    <out:variable name="columnSortOrder">
                        <out:choose>
                            <out:when test="key('session-param', 's_so') = 'na' ">ascending</out:when>
                            <out:when test="key('session-param', 's_so') = 'nd' ">descending</out:when>
                            <out:otherwise>none</out:otherwise>
                        </out:choose>
                    </out:variable>
                    <out:variable name="sortOrder">
                        <out:choose>
                            <out:when test="'{ancestor::cp:tableHeader/@session-name}' = 'monitor-sort'">
                                <out:choose>
                                    <out:when test="not (/root/env/param[@name='m_monitor_type']) or /root/env/param[@name='m_monitor_type'] = 'dispatcher'">
                                        <out:choose>
                                            <out:when test="key('session-param', 's_disp') = concat('{@sort}', 'd')">down</out:when>
                                            <out:when test="key('session-param', 's_disp') = concat('{@sort}', 'a')">up</out:when>
                                            <out:otherwise>default</out:otherwise>
                                        </out:choose>
                                    </out:when>
                                    <out:when test="/root/env/param[@name='m_monitor_type'] and /root/env/param[@name='m_monitor_type'] = 'service'">
                                        <out:choose>
                                            <out:when test="key('session-param', 's_serv') = concat('{@sort}', 'd')">down</out:when>
                                            <out:when test="key('session-param', 's_serv') = concat('{@sort}', 'a')">up</out:when>
                                            <out:otherwise>default</out:otherwise>
                                        </out:choose>
                                    </out:when>
                                    <out:otherwise>none</out:otherwise>
                                </out:choose>
                            </out:when>
                            <out:when test="'{ancestor::cp:tableHeader/@sort_track_type}' = 'page' ">
                                <out:choose>
                                    <out:when test="key('env-param', '{ancestor::cp:tableHeader/@session-name}') = concat('{@sort}', 'd')">down</out:when>
                                    <out:when test="key('env-param', '{ancestor::cp:tableHeader/@session-name}') = concat('{@sort}', 'a')">up</out:when>
                                    <out:otherwise>default</out:otherwise>
                                </out:choose>
                            </out:when>
                            <out:when test="key('session-param', '{ancestor::cp:tableHeader/@session-name}') = concat('{@sort}', 'd')">down</out:when>
                            <out:when test="key('session-param', '{ancestor::cp:tableHeader/@session-name}') = concat('{@sort}', 'a')">up</out:when>
                            <out:otherwise>default</out:otherwise>
                        </out:choose>
                    </out:variable>
                    <a class="tableSortTitle" role="button">
                        <out:if test="$sortHref!=''">
                            <out:attribute name="href">
                                <out:value-of select="$sortHref"/>
                            </out:attribute>
                        </out:if>
                        <xsl:apply-templates select="*[not(local-name() = 'sortHref') and not(self::cp:columnCondition)]"/>
                        <xsl:variable name="sortID">sortIndicatorID_<xsl:value-of select="@id"/></xsl:variable>
                        <img height="15" width="15" border="0" style="vertical-align: bottom;">
                            <out:attribute name="alt">
                                <out:choose>
                                    <out:when test="$sortOrder = 'down'"><xts:string id="IDS_DESCENDING_SORT"/></out:when>
                                    <out:when test="$sortOrder = 'up'"><xts:string id="IDS_ASCENDING_SORT"/></out:when>
                                    <out:when test="$sortOrder = 'default'"><xts:string id="IDS_DEFAULT_SORT"/></out:when>
                                </out:choose>
                            </out:attribute>
                            <out:attribute name="src">
                                <out:choose>
                                    <out:when test="$sortOrder = 'down'"><out:value-of select="$skin_images"/>list_sort_descending.gif</out:when>
                                    <out:when test="$sortOrder = 'up'"><out:value-of select="$skin_images"/>list_sort_ascending.gif</out:when>
                                    <out:when test="$sortOrder = 'default'"><out:value-of select="$skin_images"/>list_sort_no.gif</out:when>
                                    <out:otherwise><out:value-of select="$webcontent"/>/images/space.gif</out:otherwise>
                                </out:choose>
                            </out:attribute>
                        </img>
                    </a>
                </xsl:when>
                <xsl:when test="@toggleName">
                    <out:variable name="form">
                        <xsl:choose>
                            <xsl:when test="@form"><xsl:value-of select="@form"/></xsl:when>
                            <xsl:when test="./cp:columnHeaderForm"><xsl:copy-of select="./cp:columnHeaderForm"/></xsl:when>
                        </xsl:choose>
                    </out:variable>
                    <out:variable name="id" >
                        <xsl:choose>
                            <xsl:when test="@id"><xsl:value-of select="@id"/></xsl:when>
                            <xsl:otherwise><xsl:value-of select="concat('control_',@toggleName)"/></xsl:otherwise>
                        </xsl:choose>
                    </out:variable>
                    <out:attribute name="abbr"><xts:string id="{@toggleLabel}" encode="html"/></out:attribute>
                    <input type="checkbox"><out:text/>
                        <out:attribute name="onclick">javascript:toggleChecks(this.checked,<xsl:if test="@toggleName">'<xsl:value-of select="@toggleName"/>'</xsl:if><out:if test="string($form) !=''">,'<out:value-of select="$form"/>'</out:if>)<xsl:if test="@other">;<xsl:value-of select="@other"/></xsl:if></out:attribute><out:text/>
                        <out:attribute name="id">select_deselectALL_<out:value-of select="$id"/></out:attribute>
                        <out:attribute name="aria-labelledby">lbl_selectAll_deselectAll<xsl:value-of select="ancestor::cp:table/@name"/><xsl:if test="not(@noLabel='true')"> lbl_column_header_<out:value-of select="$id"/></xsl:if></out:attribute>
                    </input>
                    <xsl:if test="@toggleLabel"><span id="lbl_column_header_{'{$id}'}"><xts:string id="{@toggleLabel}"/></span></xsl:if>
                    <script language="javascript">
                        function checkControl_<xsl:value-of select="@toggleName"/>(cbName)
                        {
                        <out:choose>
                            <out:when test="string($form) !=''">
                            var formObj = "<out:value-of select="$form"/>";
                            </out:when>
                            <out:otherwise>
                            var formObj = "pform";
                            </out:otherwise>
                        </out:choose>
                            var idObj = "<out:value-of select="$id"/>";
                            resetControlCheck(formObj, idObj, cbName);
                        }
                    </script>
                </xsl:when>
                <xsl:otherwise>
                            <xsl:apply-templates select="*[not(self::cp:columnCondition)]"/>
                    <xsl:choose>
                        <xsl:when test="string(@nonbsp) = 'true'"/>
                        <xsl:otherwise><out:text>&#160;</out:text></xsl:otherwise>
                    </xsl:choose>
                </xsl:otherwise>
            </xsl:choose>
        </th>

        <xsl:if test="position() != last()">

            <!-- Replaced this <td> by a <th> in order to allow the table that includes the current cp:columnHeader to be recognized as a true data table for screen readers. -->
            <th height="15" width="1" class="tableTitle" valign="middle" nowrap="" style="padding-left:1px;padding-top:1px;" scope="col" role="separator" aria-orientation="">
                <table cellpadding="0" cellspacing="0" border="0" summary="" role="presentation">
                    <tr>
                        <td>
                            <xsl:if test="not(@noSep) or @noSep != 'T'">
                                <xsl:attribute name="class"><xsl:value-of select="'tableHeaderDivider'"/></xsl:attribute>
                            </xsl:if>
                            <img width="1" alt="">
                                <xsl:attribute name="height">
                                    <xsl:choose>
                                        <xsl:when test="not(@tallDivider)">15</xsl:when>
                                        <xsl:otherwise>24</xsl:otherwise>
                                    </xsl:choose>
                                </xsl:attribute>
                                <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                            </img>
                        </td>
                            </tr>
                        </table>
                    </th>
                </xsl:if>
            </out:if>
        </out:if>
    </xsl:template>

    <!--
    Template - cp:columnContent:
        This template is used to render an object value in a column (usually in the pager).
        Operation:
            Generate html for the column.
    -->
    <xsl:template match="cp:columnContent">
        <out:if test="true()">
            <out:variable name="columnCondition{position()}">
                <xsl:choose>
                    <xsl:when test="cp:columnCondition"><xsl:copy-of select="cp:columnCondition"/></xsl:when>
                    <xsl:otherwise><xsl:value-of select="true()"/></xsl:otherwise>
                </xsl:choose>
            </out:variable>
        
            <out:if test="$columnCondition{position()} = 'true'">
                <xsl:if test="position() = 1 or @position = 'start'">
                    <out:text disable-output-escaping="yes">&lt;tr</out:text>
                        <out:text/> style="height:1px" <out:text/> <!-- 189822 made the hack apply to all browsers. Hack for Moz browser 1.x, to fix a problem with gaps between rows in a scrollable table -->
                        <out:if test="(position() mod 2) != 1 and key('session-param', 'listViewSeparator') = 'background'"> class="rowHighlight"</out:if>
                    <out:text disable-output-escaping="yes">&gt;</out:text>
                </xsl:if>
                <td height="10" class="tabletext" >
                    <xsl:copy-of select="@*"/>
                    <xsl:choose>
                        <xsl:when test="@wrap"/>
                        <xsl:otherwise><xsl:attribute name="nowrap">nowrap</xsl:attribute></xsl:otherwise>
                    </xsl:choose>
                    <xsl:apply-templates select="*[not(self::cp:columnCondition)]"/>
                </td>
                
                
                <xsl:if test="position() != last() and not(@position = 'end')">
                    <td height="15" width="1" role="separator" aria-orientation="vertical">
                        <img height="15" width="1" alt="">
                            <xsl:attribute name="src"><xsl:value-of select="'{$webcontent}'"/>/images/space.gif</xsl:attribute>
                        </img>
                    </td>
                </xsl:if>
                <xsl:if test="position() = last() or @position = 'end'">
                    <out:text disable-output-escaping="yes">&lt;/tr&gt;</out:text>
                </xsl:if>
            </out:if>
        </out:if>
    </xsl:template>

    <!--
    Template - cp:columnFooter:
        This template is used to render the column footer for particular object contents (usually in the pager).
        Operation:
            Generate html for the columns footer.
    -->
    <xsl:template match="cp:columnFooter">
        <td class="tableFooter" height="10" style="padding-left:2px;padding-top:2px;">
            <xsl:if test="@width">
                <xsl:attribute name="width">
                    <xsl:value-of select="@width"/>
                </xsl:attribute>
            </xsl:if>
            <xsl:if test="@colspan">
                <xsl:attribute name="colspan">
                    <xsl:value-of select="@colspan"/>
                </xsl:attribute>
            </xsl:if>
            <xsl:choose>
                <xsl:when test="@valign"><xsl:attribute name="valign"><xsl:value-of select="@valign"/></xsl:attribute></xsl:when>
                <xsl:otherwise><xsl:attribute name="valign">middle</xsl:attribute></xsl:otherwise>
            </xsl:choose>
            <xsl:choose>
                <xsl:when test="@wrap"/>
                <xsl:otherwise><xsl:attribute name="nowrap">nowrap</xsl:attribute></xsl:otherwise>
            </xsl:choose>
            <xsl:apply-templates/>
        </td>

    </xsl:template>





    <!--
    Template - cp:columnHeaderToggleSet:
    This template generates an inline javascript to ensure that the control toggle reflects the list items state when all are preset to checked.
    -->
    <xsl:template match="cp:columnHeaderToggleSet">
        <script language="javascript">
            checkControl_<xsl:value-of select="@toggleName"/>('<xsl:value-of select="@toggleName"/>');
        </script>
    </xsl:template>

    <!-- End of Table control -->
    <!-- ===================================================================================== -->

    <!-- ====================================================================================== -->
    <!-- Flyout control -->
     <xsl:template match="cp:flyoutControl">


        <out:template name="renderPopup">
            <out:param name="flyoutXML"/>
            <out:param name="controlID" />

            <out:variable name="flyoutID" select="$flyoutXML/flyout/@id"/>

            <script language="javascript">
                var ccPopupMessageStrings = eval("({ 'IDS_CCPOPUP_DOT':'<xts:string id="IDS_CCPOPUP_DOT_ALT"/>' , 'IDS_CCPOPUP_CHECKED':'<xts:string id="IDS_CCPOPUP_CHECKED_ALT"/>' } )");
                with(new CCPopupMenu("<out:value-of select="$flyoutID"/>","<out:value-of select="$controlID"/>", "<out:value-of select="$flyoutXML/flyout/@height"/>","<out:value-of select="$flyoutXML/flyout/@hasCheckbox"/>", ccPopupMessageStrings))
                {
                    
                    <out:if test="$flyoutXML/flyout/label != ''">
                  		setLabel("<out:value-of select="$flyoutXML/flyout/label"/>");
              		</out:if>
		              <out:apply-templates select="$flyoutXML/flyout/items/*">
		                    <out:with-param name="flyoutID"><out:value-of select="$flyoutID"/></out:with-param>
		               </out:apply-templates>
                }
            </script>
        </out:template>

        <out:template match="item[@type='separator']">
            <out:param name="flyoutID"/>
            <out:param name="groupID"/>
            addMenuSeparator();
        </out:template>

        <out:template match="itemGroup">
            <out:param name="flyoutID"/>

            <out:apply-templates select="./*">
                    <out:with-param name="flyoutID"><out:value-of select="$flyoutID"/></out:with-param>
                    <out:with-param name="groupID"><out:value-of select="@id"/></out:with-param>
            </out:apply-templates>
        </out:template>

        <out:template match="item">
            <out:param name="flyoutID"/>
            <out:param name="groupID"/>
                    addMenuItem("<out:value-of select="@id"/>","<out:value-of select="$groupID"/>", "<out:value-of select="xtsext:javascriptencode(./text)"/>", "<out:value-of select="xtsext:javascriptencode(./icon)"/>","<out:value-of select="xtsext:javascriptencode(./action)"/>");
                    <out:choose>
                        <out:when test="@itemSelectedState = 'checked'">
                            setMenuItemChecked("<out:value-of select="@id"/>");
                        </out:when>
                        <out:when test="@itemSelectedState = 'selected'">
                            setMenuItemSelected("<out:value-of select="@id"/>");
                        </out:when>
                    </out:choose>
        </out:template>
    </xsl:template>




<xsl:template match="cp:action"/>



    <!-- End of flyout control -->
    <!-- ===================================================================================== -->




    <!-- ===================================================================================== -->
    <!-- Stand-alone toolbar  -->
    <xsl:template match="cp:toolbarControl">

        <out:template name="renderToolBar">
            <out:param name="toolbarXML"/>
            <out:variable name="toolbar_id" select="$toolbarXML/toolbar/@id"/>
            <script language="JavaScript">
                function disable_<out:value-of select="$toolbar_id"/>(btn)
                {
                    eval("enabled_" + btn + " = false");
                    document.getElementById(btn).className = "toolbarImageUnavailable";
                }

                function enable_<out:value-of select="$toolbar_id"/>(btn)
                {
                    eval("enabled_" + btn + " = true");
                    document.getElementById(btn).className = "toolbarImageNormal";
                    eval("pressed_" + btn + " = false");
                }

                function press_<out:value-of select="$toolbar_id"/>(btn)
                {
                    eval("pressed_" + btn + " = true");
                    if (!eval("disabled_" + btn))
                        document.getElementById(btn).className = "toolbarImagePressed";
                }

                function release_<out:value-of select="$toolbar_id"/>(btn)
                {
                    eval("pressed_" + btn + " = false");
                    if (!eval("disabled_" + btn))
                        document.getElementById(btn).className = "toolbarImageNormal";
                }

                function mouseover_<out:value-of select="$toolbar_id"/>(btn)
                {
                    if (btn.className == 'toolbarImageNormal')
                        btn.className = 'toolbarImageOver';
                    if (btn.className == 'toolbarImagePressed')
                        btn.className = 'toolbarImageOverPressed';
                }

                function mouseout_<out:value-of select="$toolbar_id"/>(btn)
                {
                    if (btn.className == 'toolbarImageOver')
                        btn.className = 'toolbarImageNormal';
                    if (btn.className == 'toolbarImageOverPressed')
                        btn.className = 'toolbarImagePressed';
                }
            </script>

            <table border="0" width="100%" cellpadding="0" cellspacing="3" summary="" role="presentation">
                <tr>
                    <out:for-each select="$toolbarXML/toolbar/*">
                        <out:choose>
                            <out:when test="name() = 'toolbarButton'">
                                <out:call-template name="renderToolBarButton">
                                    <out:with-param name="toolbar_id" select="$toolbar_id"/>
                                    <out:with-param name="button"><out:copy-of select="."/></out:with-param>
                                </out:call-template>
                            </out:when>
                            <out:when test="local-name() = 'toolbarSeparator'">
                                <out:call-template name="renderToolbarSeparator">
                                    <out:with-param name="button" select="."/>
                                </out:call-template>
                            </out:when>
                        </out:choose>
                    </out:for-each>
                </tr>
            </table>
        </out:template>

        <out:template name="renderToolbarSeparator">
            <out:param name="button"/>
            <td style="padding-left:2px;padding-right:2px;" align="middle">
                <out:if test="@style = 'bar'">
                    <div class="toolbarDivider"></div>
                </out:if>
            </td>
        </out:template>

        <out:template name="renderToolBarButton">
            <out:param name="toolbar_id"/>
            <out:param name="button"/>

            <out:variable name="butnID" select="@id"/>
            <out:variable name="disabled" select="@disabled = 'true'"/>
            <out:variable name="pressed" select="@pressed = 'true'"/>
            <out:variable name="image" select="param[@name='image']"/>
            <out:variable name="text" select="param[@name='text']"/>
            <out:variable name="title" select="param[@name='title']"/>
            <td style="width:20px;" id="{'{$butnID}'}" onmouseover="mouseover_{'{$toolbar_id}'}(this)" onmouseout="mouseout_{'{$toolbar_id}'}(this)" align="middle" valign="middle">
                <out:if test="not($disabled)">
                    <out:attribute name="onclick"><out:copy-of select="param[@name='onclick']"/></out:attribute>
                    <out:attribute name="style">cursor:pointer;</out:attribute>
                </out:if>
                <out:attribute name="class">
                    <out:choose>
                        <out:when test="@disabled='true'">toolbarImageUnavailable</out:when>
                        <out:when test="@pressed='true'">toolbarImagePressed</out:when>
                        <out:otherwise>toolbarImageNormal</out:otherwise>
                    </out:choose>
                </out:attribute>
                <out:attribute name="title"><out:value-of select="$title"/></out:attribute>
                <script language="JavaScript">
                    var disabled_<out:value-of select="$butnID"/> = <out:value-of select="$disabled"/>;
                    var pressed_<out:value-of select="$butnID"/> = <out:value-of select="$pressed"/>;

                    function isEnabled_<out:value-of select="$butnID"/>()
                    {   return !disabled_<out:value-of select="$butnID"/>;  }

                    function isPressed_<out:value-of select="$butnID"/>()
                    {   return pressed_<out:value-of select="$butnID"/>;        }
                </script>

                    <out:choose>
                        <out:when test="$image">
                            <img id="img{'{$butnID}'}" src="{'{$image_root}'}{'{$image}'}">
                                <out:attribute name="alt"><out:value-of select="$title"/></out:attribute>
                            </img>
                        </out:when>
                        <out:when test="$text">
                            <out:if test="$browser!='ie'">
                                <img style="height: 1px; width:18px;" src="{'{$webcontent}/images/space.gif'}" alt=""/><br/>
                            </out:if>
                            <span style="width:18px;"><out:copy-of select="$text"/></span>
                        </out:when>
                    </out:choose>
                </td>
        </out:template>
    </xsl:template>

    <!-- Generates an HTML push (command) button from a button spec -->
    <xsl:template name="renderPushButton">
        <xsl:param name="buttonSpec"/>
        <xsl:variable name="btnID" select="$buttonSpec/cp:cmdButton/@id"/>
        <xsl:variable name="btnDefaultState" select="$buttonSpec/cp:cmdButton/@defaultState"/>
        <xsl:variable name="btnType" select="$buttonSpec/cp:cmdButton/@type"/>

        <input id="{$btnID}">
            <xsl:attribute name="type">
                <xsl:choose>
                    <xsl:when test="$btnType = 'submit'">submit</xsl:when>
                    <xsl:otherwise>button</xsl:otherwise>
                </xsl:choose>
            </xsl:attribute>
            <xsl:if test="$btnDefaultState = 'inactive'">
                <xsl:attribute name="disabled">disabled</xsl:attribute>
                <xsl:attribute name="class">cmdButtonInactive</xsl:attribute>
            </xsl:if>
            <xsl:if test="string($btnDefaultState) != 'inactive'">
                <xsl:attribute name="class">cmdButton</xsl:attribute>
                <xsl:attribute name="onmouseover">this.className='cmdButtonOver'</xsl:attribute>
                <xsl:attribute name="onmouseout">this.className='cmdButton'</xsl:attribute>
            </xsl:if>
            <out:attribute name="value"><xsl:copy-of select="$buttonSpec/cp:cmdButton/cp:cmdButtonText"/></out:attribute>
            <xsl:for-each select="$buttonSpec/cp:cmdButton/cp:cmdButtonEvents/cp:cmdButtonEvent">
                <out:attribute name="{@name}"><xsl:copy-of select="."/></out:attribute>
            </xsl:for-each>
        </input>

        <script language="JavaScript">
            var <xsl:value-of select="$btnID"/>_enabled = true;
            function <xsl:value-of select="$btnID"/>_enable()
            {
                <xsl:value-of select="$btnID"/>_enabled = true;
                document.getElementById('<xsl:value-of select="$btnID"/>').disabled = false;
                document.getElementById('<xsl:value-of select="$btnID"/>').className = "cmdButton";
            }
            function <xsl:value-of select="@id"/>_disable()
            {
                <xsl:value-of select="$btnID"/>_enabled = false;
                document.getElementById('<xsl:value-of select="$btnID"/>').disabled = true;
                document.getElementById('<xsl:value-of select="$btnID"/>').className = "cmdButtonInactive";
            }
            function <xsl:value-of select="$btnID"/>_isEnabled()
            {
                return <xsl:value-of select="$btnID"/>_enabled;
            }
            function <xsl:value-of select="$btnID"/>_initSize()
            {
                <!--This is to get around that fact that IE does not support min-width properly in Quirks mode. A min-width of 4.9em is added to the css files for firefox and other browsers -->
                //IE Function only
                <out:if test="$browser = 'ie'">
                var btnID = document.getElementById('<xsl:value-of select="$btnID"/>');
                    if(btnID) {
                        if (btnID.offsetWidth &lt; 70) {
                            btnID.style.width = "4.9em";
                            btnID.style.overflow="visible";
                        }
                    }
                </out:if>
            }

            if (window.addEventListener) {
                window.addEventListener("load", <xsl:value-of select="$btnID"/>_initSize, false);
            } else if (window.attachEvent) {
                window.attachEvent("onload", <xsl:value-of select="$btnID"/>_initSize);
            }

        </script>
    </xsl:template>



    <xsl:template match="cp:cmdButton">
        <xsl:call-template name="renderPushButton">
            <xsl:with-param name="buttonSpec">
                <xsl:copy-of select="."/>
            </xsl:with-param>
        </xsl:call-template>
    </xsl:template>


    <!--
    Template - cp:genericDialog:
        Template used to render information messages
        Attributes:
            @height - the height of the dialog box (default 100).
            @width - the width of the dialog box (default 300).
            @id - id for the dialog box.
            @type - message type to be rendered.
            @action - specifies type of button to be rendered.
            @interactive - should the dialog header be rendered
        Operation:
            Renders simple DHTML dialog
    -->
    <xsl:template match="cp:genericDialog">
        <xsl:variable name="height">
            <xsl:choose>
                <xsl:when test="@height"><xsl:value-of select="@height"/></xsl:when>
                <xsl:otherwise>100</xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name="width">
            <xsl:choose>
                <xsl:when test="@width"><xsl:value-of select="@width"/></xsl:when>
                <xsl:otherwise>300</xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <out:variable name="s" select="concat(' ', /root/system/param[@name='ui_hide']/CC_DIALOG_HEADER_help/@show, ' ')"/>
        <out:variable name="helpBasedOnUser" select="(contains($s , 'Administrators') and $isAdminUser)  or
                (contains($s , 'QSUsers') and $hasFullQSCapability) or
                (contains($s , 'RSUsers') and $hasFullRSCapability) or
                (contains($s , 'Consumers') and $is-named='1') or
                (contains($s , 'Anonymous') and $is-named='0')"/>
        <out:variable name="groupShowHelp" select="key('system-param', 'ui_groups')/group[contains($s, concat(' ', @id, ' ')) and contains(key('session-param', 'uig'), concat(' ', @id, ' '))]"/>
        <out:variable name="dialogHeaderHelp" select="/root/system/param[@name='ui_hide']/CC_DIALOG_HEADER_help[$helpBasedOnUser or $groupShowHelp]"/>
        <out:variable name="systemHelpHide" select="/root/system/param[@name='ui_hide']/CC_DIALOG_HEADER_help"/>
        <out:variable name="showHelp" select="not($systemHelpHide) or $dialogHeaderHelp"/>

        <out:variable name="setHelpFocus">
            <out:choose>
                <out:when test="$showHelp">
                    <xsl:choose>
                        <xsl:when test="string(@helpid)!=''">true</xsl:when>
                        <xsl:otherwise>false</xsl:otherwise>
                    </xsl:choose>
                </out:when>
                <out:otherwise>false</out:otherwise>
            </out:choose>
        </out:variable>

        <script language="JavaScript">
            // Register to hide dialog when the user clicks anywhere on the document
            <xsl:choose>
                <xsl:when test="@rootContainerId and @rootContainerId != ''">
                    attachClickOnPageHandler(document.getElementById('<xsl:value-of select="@rootContainerId"/>'));
                </xsl:when>
                <xsl:otherwise>
                    attachClickOnPageHandler(document);
                </xsl:otherwise>
            </xsl:choose>
            function attachClickOnPageHandler(target) {
                if (target.addEventListener) {
                    target.addEventListener("click", hide_<xsl:value-of select="@id"/>, false);
                } else if (target.attachEvent) {
                    target.attachEvent("onclick", hide_<xsl:value-of select="@id"/>);
                }
            }

            function obj_<xsl:value-of select="@id"/>()
            {
               this.hide = hide_<xsl:value-of select="@id"/>;
               this.position = position_<xsl:value-of select="@id"/>;
               this.resize = resize_<xsl:value-of select="@id"/>;
               this.show = show_<xsl:value-of select="@id"/>;
            }

            var <xsl:value-of select="@id"/> = new obj_<xsl:value-of select="@id"/>();

            function position_<xsl:value-of select="@id"/>()
            {
                div = document.getElementById('<xsl:value-of select="@id"/>');
                innerTable = document.getElementById('<xsl:value-of select="concat('innerTable',@id)"/>');

                <xsl:choose>
                    <xsl:when test="@positionHorizontal='false'"/>
                    <xsl:otherwise>
                      div.style.left = ((document.body.clientWidth - div.scrollWidth) / 2) + "px";
                    </xsl:otherwise>
                </xsl:choose>

                <out:if test="$browser = 'ie'">
                <!-- Position the dummy iframe so that it will appear directly below the pop up dialog to prevent "windowed" controls from showing through.  -->
                dummyFrame = document.getElementById('i<xsl:value-of select="@id"/>');
                dummyFrame.style.top = div.style.top;
                dummyFrame.style.left = div.style.left;
                </out:if>
            }

            function resize_<xsl:value-of select="@id"/>()
            {
                div = document.getElementById('<xsl:value-of select="@id"/>');

                <xsl:choose>
                    <xsl:when test="@height">div.style.height = <xsl:value-of select="@height"/>;</xsl:when>
                    <xsl:otherwise>div.style.height = document.getElementById('innerTable<xsl:value-of select="@id"/>').scrollHeight;</xsl:otherwise>
                </xsl:choose>

                <xsl:choose>
                    <xsl:when test="@width">div.style.width = <xsl:value-of select="@width"/> + "px";</xsl:when>
                    <xsl:otherwise>div.style.width = document.getElementById('innerTable<xsl:value-of select="@id"/>').scrollWidth;</xsl:otherwise>
                </xsl:choose>
            }

            function resizeInsulatingFrame_<xsl:value-of select="@id"/>()
            {
                <out:if test="$browser = 'ie'">
                    <!-- the insulating frame is only needed on ie.  If it is included on mozilla it appears to cause some problems with the scrollbars -->
                    dummyFrame = document.getElementById('i<xsl:value-of select="@id"/>');
                    <!-- for some reason, the iframe height and width were a little to small to cover the entire div, adding
                     5px seemed like the magic number for all the browsers -->
                    dummyFrame.style.height = document.getElementById('innerTable<xsl:value-of select="@id"/>').scrollHeight + 5;
                    dummyFrame.style.width = document.getElementById('innerTable<xsl:value-of select="@id"/>').scrollWidth + 5;
                </out:if>
            }


            function hide_<xsl:value-of select="@id"/>(e)
            {
                // If the mouse click is a right mouse click don't close the window
                if (e) {
                    if (e.button) {
                        if (e.button == 2) {
                            return;
                        }
                    }
                }

                obj = document.getElementById('<xsl:value-of select="@id"/>');
                obj.className = "hidden";

                <!-- need to reset the columns and rows of the insertTablePopup or we might get a CAF error (bug 550539) -->
                if ('<xsl:value-of select="@id"/>'=='insertTablePopup') {
                   <!-- need to only reset defaults if table is not valid (bug 555470.1) -->
                    if (!validateHideTable()) {
                         cancelCreateTable();
                    }
                }

                <out:if test="$browser = 'ie'">
                <!-- hide the dummyFrame -->
                document.getElementById('i<xsl:value-of select="@id"/>').style.display = "none";
                </out:if>
            }

            function show_<xsl:value-of select="@id"/>(wasDelayed)
            {
                if (wasDelayed) {
                    obj = document.getElementById('<xsl:value-of select="@id"/>');

                    resize_<xsl:value-of select="@id"/>();
                    resizeInsulatingFrame_<xsl:value-of select="@id"/>();

                    obj.className = "visible";
                    position_<xsl:value-of select="@id"/>();

                    resizeInsulatingFrame_<xsl:value-of select="@id"/>();

                    <!-- show the dummyFrame -->
                    <out:if test="$browser = 'ie'">
                        document.getElementById('i<xsl:value-of select="@id"/>').style.display = "block";
                    </out:if>
                    <out:choose>
                        <out:when test="$setHelpFocus='true'">
                            document.getElementById('<xsl:value-of select="@helpid"/>').focus();
                        </out:when>
                        <out:otherwise>
                            document.getElementById('innerTable<xsl:value-of select="@id"/>').focus();
                        </out:otherwise>
                    </out:choose>
                } else {
                    <!-- delay 'show' a bit to ensure it gets executed after 'hide' in some instances -->
                    setTimeout('show_<xsl:value-of select="@id"/>("wasDelayed")', 10);
                }
            }
        </script>
        <out:if test="$browser = 'ie'">
            <!-- Dummy iframe below the pop up dialog to prevent "windowed" controls from showing through  -->
            <!-- A11y replaced space.gif with dummy.html to prevent error in an ssl env if the src tag is not there -->
            <iframe id="i{@id}" frameborder="0" style="display:none; border:0px; position: absolute;" src="{'{$webcontent}'}/images/dummy.html" title="i{@id}"/>
        </out:if>
        <div id="{@id}" class="hidden" style="padding:0px;z-index:2;"  aria-labelledby="{@id}dialogTitle">
            <xsl:attribute name="role">
                <xsl:choose>
                    <xsl:when test="@role and @role !=''"><xsl:value-of select="@role"/></xsl:when>
                    <xsl:otherwise>dialog</xsl:otherwise>
                </xsl:choose>
            </xsl:attribute>
            <out:attribute name="onclick">
                <out:choose>
                    <out:when test="$browser = 'ie'">event.cancelBubble='true';</out:when>
                    <out:otherwise>event.stopPropagation();</out:otherwise>
                </out:choose>
            </out:attribute>

            <table class="popup" style="position: absolute;" id="innerTable{@id}" border="0" width="100%" cellpadding="0" cellspacing="0" summary="" tabindex="0" role="presentation">
                <tr>
                    <td>
                        <!-- If this is supposed to be an interactive dialog then show a standard header -->
                        <xsl:if test="@interactive">
                            <table id="t{@id}1" border="0" width="100%" cellpadding="0" cellspacing="0" class="dialogHeader" summary="" role="presentation">
                                <tr>
                                    <td width="100%" valign="middle"><span class="dialogHeaderTitle" id="{@id}dialogTitle"><xsl:copy-of select="cp:param[@name = 'title']/*"/></span></td>
                                    <td valign="middle" nowrap="nowrap" class="dialogHeaderLink" >
                                    <out:if test="$showHelp">
                                        <a class="dialogHeaderLinkColor" href="#" onclick="javascript:help()">
                                            <xsl:if test="@helpid"><xsl:attribute name="id"><xsl:value-of select="@helpid"/></xsl:attribute></xsl:if>
                                            <out:attribute name="onkeypress">javascript:if (event.keyCode==13 || event.keyCode==32 || event.charCode==32) <xsl:text>{</xsl:text> this.onclick(); return false; <xsl:text>}</xsl:text> return true;</out:attribute>
                                            <xsl:if test="@focusidOnShiftTab">
                                                <out:attribute name="onkeydown">javascript:if(event.keyCode==9) <xsl:text>{</xsl:text> if(event.shiftKey==false) return true; else <xsl:text>{</xsl:text> if(document.getElementById("<xsl:value-of select="@focusidOnShiftTab"/>")) <xsl:text>{</xsl:text>document.getElementById("<xsl:value-of select="@focusidOnShiftTab"/>").focus(); return false; <xsl:text>}</xsl:text> <xsl:text>}</xsl:text> <xsl:text>}</xsl:text> return true;</out:attribute>
                                            </xsl:if>
                                            <xts:string id="IDS_HELP"/>
                                        </a>
                                    </out:if>
                                    </td>
                                    <td valign="middle" style="padding-right:3px;">
                                    <a id="close_{@id}" href="#" onclick="{@closeOnClick}{@id}.hide()" role="button" onmouseover="this.className = 'dialogCloseOver'" onmouseout="this.className = 'dialogClose'"  onmouseup="this.className = 'dialogClose'">
                                        <out:attribute name="onkeypress">javascript:if(event.keyCode==13||event.keyCode==32||event.charCode==32)<xsl:text>{</xsl:text>this.onclick(); return false;<xsl:text>}</xsl:text> return true;</out:attribute>
                                        <out:if test="not($showHelp)">
                                                <xsl:if test="@focusidOnShiftTab">
                                                    <out:attribute name="onkeydown">javascript:if(event.keyCode==9) <xsl:text>{</xsl:text> if(event.shiftKey==false) return true; else <xsl:text>{</xsl:text> if(document.getElementById("<xsl:value-of select="@focusidOnShiftTab"/>")) <xsl:text>{</xsl:text>document.getElementById("<xsl:value-of select="@focusidOnShiftTab"/>").focus(); return false; <xsl:text>}</xsl:text> <xsl:text>}</xsl:text> <xsl:text>}</xsl:text> return true;</out:attribute>
                                                </xsl:if>
                                        </out:if>
                                        <img height="16" width="16" border="0" src="{'{$skin_images}'}close.gif" class="dialogClose" >
                                        <out:attribute name="title"><xts:string id="IDS_CLOSE"/></out:attribute>
                                        <out:attribute name="alt"><xts:string id="IDS_CLOSE"/></out:attribute>
                                        </img></a>
                                    </td>
                                </tr>
                            </table>
                        </xsl:if>
                        <table id="t{@id}2" border="0" width="100%" cellpadding="0" cellspacing="0" class="dialogWindowPopup" summary="" role="presentation">
                            <xsl:if test="cp:param[@name = 'message']">
                                <tr>
                                    <xsl:if test="@type">
                                        <td valign="top" align="middle">
                                            <img src="{'{$image_root}'}msg_information.gif">
                                                <xsl:attribute name="alt"><xts:string id="IDS_ICON_INFORMATION" encode="html"/></xsl:attribute>
                                            </img>
                                        </td>
                                    </xsl:if>
                                    <td valign="middle" class="formText" >
                                        <xsl:attribute name="align">
                                            <xsl:choose>
                                                <xsl:when test="@align"><xsl:value-of select="@align"/></xsl:when>
                                                <xsl:when test="@type or @action">left</xsl:when>
                                                <xsl:otherwise>middle</xsl:otherwise>
                                            </xsl:choose>
                                        </xsl:attribute>
                                        <xsl:copy-of select="cp:param[@name = 'message']/*"/>
                                    </td>
                                </tr>
                            </xsl:if>
                            <!-- user specified a custom body -->
                            <xsl:if test="cp:param[@name = 'body']">
                                <tr>
                                    <td colspan="2"  class="body_dialog_modal">
                                        <xsl:attribute name="align">
                                            <xsl:choose>
                                                <xsl:when test="cp:param[@name = 'body' and @align]"><xsl:value-of select="cp:param[@name = 'body']/@align"/></xsl:when>
                                                <xsl:otherwise>left</xsl:otherwise>
                                            </xsl:choose>
                                        </xsl:attribute>
                                        <xsl:apply-templates select="cp:param[@name = 'body']/*"/>
                                    </td>
                                </tr>
                            </xsl:if>
                        </table>

                        <xsl:if test="cp:param[@name = 'footer']">
                            <xsl:apply-templates select="cp:param[@name = 'footer']/*"/>
                        </xsl:if>
                    </td>
                </tr>
            </table>
        </div>
    </xsl:template>



    <!--
            Colour Selection Dialog
            =======================
            Usage:
            1- Add the colour picker dialog to your morphlet once by inserting a reference to it outside ou anu UTML form.
            2- Call it by invoking the showColourSelectionDlg(fnc, nXPos, nYPos) function where:
                    - fnc [required]:   (string) The name of the function to call (with the colour selection) once a colour has been selected.
                    -   nXPos, nYPos [optional]: (Integers) The screen coordinates where the colour picker is to be displayed.
    -->
    <xsl:template match="cp:colourSelectionDialog">
        <iframe id="iColourPicker"  frameborder="0" style="display:none; position:absolute; width:1px; height:1px;" src="{'{$webcontent}'}/images/space.gif"/>
        <div id="divColourPicker" class="colourPicker" style="display:none;">
            <out:attribute name="onclick">
                <out:choose>
                    <out:when test="$browser = 'ie'">event.cancelBubble='true';</out:when>
                    <out:otherwise>event.stopPropagation();</out:otherwise>
                </out:choose>
            </out:attribute>

            <!-- The container for the colour palette -->
            <div class="CPCaptionBar">
                <select id="paletteMode" type="select" name="paletteMode" onchange="loadPalette(this.options[this.selectedIndex].value)">
                    <option value="namedColours"><xts:string id="IDS_CON_CP_NAMED"/></option>
                    <option value="weSafePalette"><xts:string id="IDS_CON_CP_WEBSAFE"/></option>
                    <out:if test="$browser != 'safari'">
                    <option value="customColour"><xts:string id="IDS_CON_CP_CUSTOM"/></option>
                    </out:if>
                </select>
                <!-- Allow IE users to use the windows colour picker
                <out:if test="$browser = 'ie'">
                    &#160;<span class="formLink"><a href="javascript:moreColours()"><xts:string id="IDS_CON_CP_MORE_COLOURS"/></a></span>
                </out:if>
                -->
            </div>

            <div id="divPaletteContainer" class="paletteContainer"/>

            <!-- Place holder for the custom colour palette -->
            <div id="divCustomColours" style="display:none;">
                <table class="palletContainer" cellpadding="0" cellspacing="0">
                    <tr>
                        <td valign="top">
                            <table cellpadding="0" cellspacing="0">
                                <tr><td/><td class="formLabel"><xts:string id="IDS_CON_CP_RED"/></td></tr>
                                <tr>
                                    <td style="padding-right:2px;" class="formText">#</td>
                                    <td><input type="text" id="red" style="width: 65px;" maxlength="2" value="00" onkeyup="previewColour()"/></td>
                                </tr>
                                <tr><td/><td class="formLabel" style="padding-top:8px;"><xts:string id="IDS_CON_CP_GREEN"/></td></tr>
                                <tr>
                                    <td style="padding-right:2px;" class="formText">&#160;</td>
                                    <td><input type="text" id="green" style="width: 65px;" maxlength="2" value="00" onkeyup="previewColour()"/></td>
                                </tr>
                                <tr><td/><td class="formLabel" style="padding-top:8px;"><xts:string id="IDS_CON_CP_BLUE"/></td></tr>
                                <tr>
                                    <td style="padding-right:2px;" class="formText">&#160;</td>
                                    <td><input type="text" id="blue" style="width: 65px;" maxlength="2" value="00" onkeyup="previewColour()"/></td>
                                </tr>
                            </table>
                        </td>
                        <td width="100%" style="padding-left: 5px;">
                            <table cellpadding="0" cellspacing="0">
                                <tr><td class="formLabel"><xts:string id="IDS_CON_CP_PREVIEW"/></td></tr>
                                <tr>
                                    <td class="formLabel">
                                        <div id="x" class="colourPreviewContainer">
                                            <div id="colourPreview" class="colourPreviewPane"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr><td align="right" class="formLink" height="20" valign="middle"><a href="javascript:selectColour(calculateCustomColourInHexFormat())"><xts:string id="IDS_CON_CP_APPLYNOW"/></a></td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>

            <script language="JavaScript">
                var setFunction = null; // Stores the function name that will get called when a colour is selected.

                // The colour picker dialog
                var CP = document.getElementById('divColourPicker');
                var iframe = document.getElementById('iColourPicker');

                // Make the CP disappear when the user clicks anywhere on the document
                document.onclick = hideColourPicker;
                window.onresize = hideColourPicker;

                /*
                        This is the main entry point to this dialog.
                        fnc [mandatory]:    The name of the function that will be call upon colour selection
                        nXPos, nYPos [optional] screen coordinates where the caller wants to place the colour picker
                */
                function showColourSelectionDlg(fnc, nXPos, nYPos)
                {
                    setFunction = fnc;
                    var colourOptions = document.getElementById('paletteMode').options[document.getElementById('paletteMode').selectedIndex].value;
                    loadPalette(colourOptions);
                    CP.style.display = "block";
                    positionColourPicker(nXPos, nYPos);
                }

                function loadPalette(palette)
                {
                    var sPaletteMarckup = "";
                    switch (palette)
                    {
                        case 'namedColours':
                            sPaletteMarckup = buildNamedColourPalette();
                        break;

                        case 'customColour':
                            sPaletteMarckup = buildCustomColourPalette();
                        break;

                        default:
                            sPaletteMarckup = buildWebSafePalette();
                    }
                    document.getElementById('divPaletteContainer').innerHTML = sPaletteMarckup;
                }

                function positionColourPicker(x,y)
                {
                    // if explicit position is specified then use it otherwise center on the screen.
                    if (x)
                    {
                        CP.style.top = y;
                        CP.style.left = x;
                    }
                    else
                    {
                        CP.style.top = ((document.body.clientHeight - CP.scrollHeight) / 2) + document.body.scrollTop;
                        CP.style.left =((document.body.clientWidth - CP.scrollWidth) / 2) + document.body.scrollLeft;
                    }

                    iframe.style.height = CP.scrollHeight;
                    iframe.style.width = CP.scrollWidth;
                    iframe.style.top = CP.style.top;
                    iframe.style.left = CP.style.left;
                    iframe.style.display = "block";
                }

                function hideColourPicker()
                {
                    CP.style.display = "none";
                    iframe.style.display = "none";
                }

                function selectColour(colour)
                {
                    eval( setFunction + "('" + colour + "')" );
                    hideColourPicker();
                }







                <!--
                /* =============================================================================== */
                /* Web-Safe Colours and Helper Functions */
                /* =============================================================================== */
                -->
                function buildWebSafePalette()
                {
                    var rows = "";
                    var paletteCount = 216;
                    var swatchPerRow = 18;
                    var aBC = new Array ("00", "33", "66", "99", "cc", "ff");
                    var aColours = new Array(paletteCount);
                    var aR = aBC;
                    var aG = aBC;
                    var aB = aBC;

                    var count = 0;
                    // generate the colour array
                    for (var b=0; b &lt; 6; b++)
                    {
                        for (var g=0; g &lt; 6; g++)
                        {
                            for (var r=0; r &lt; 6; r++)
                            {
                                aColours[count] = "#" + aR[b] + aG[g] + aB[r];
                                count++;
                            }
                        }
                    }
                    // Define a table cell template to generate colour swatches from
                    var sCS = '';
                    sCS  = '<td>';
                    sCS += '<img class="CPcolourSwatch" style="background-color:###;" onclick="selectColour(\'###\')" onmousedown="WSSPress(this)" onmouseover="WSSOver(this)" onmouseout="WSSOut(this)" title="ttt" src="{'{$webcontent}'}/images/space.gif" alt=""/>';
                    sCS += '</td>';

                    var re1 = /###/g;  //places we will drop the named colour
                    var re2 = /ttt/g;  //places we will drop the named colour

                    var i = 0;
                    do
                    {
                        var cell = "";
                        var cells = "";
                        for (var c=0; c &lt; swatchPerRow; c++)
                        {
                            cells += sCS.replace(re1,aColours[i]).replace(re2,aColours[i]);
                            i++;
                        }
                        rows += '<tr>' + cells + '</tr>';
                    }
                    while (i &lt; paletteCount);

                    return '<table class="paletteContainer">' + rows + '</table>';
                }

                function WSSPress(swatch)
                {
                    swatch.className = 'CPcolourSwatchPress';
                }
                function WSSOver(swatch)
                {
                    swatch.className = 'CPcolourSwatchOver';
                }

                function WSSOut(swatch)
                {
                    swatch.className = 'CPcolourSwatch';
                }



                <!--
                /* =============================================================================== */
                /* Named Colours and Helper Functions */
                /* =============================================================================== */
                -->
                function buildNamedColourPalette()
                {
                    var aColours = new Array (
                    "Black", "Fuchsia",
                    "Silver", "Green",
                    "Gray", "Lime",
                    "White", "Olive",
                     "Maroon", "Yellow",
                     "Red", "Navy",
                     "Purple", "Blue",
                     "Teal", "Aqua");
                    var rows = "";
                    // Named Colour Panel Template
                    sNCPT1  = '<td><div class="namedColourPanel" onclick="selectColour(\'###\')" onmousedown="NCMPress(this,\'###\')" onmouseover="NCMOver(this, \'###\')" onmouseout="NCMOut(this, \'###\')" width="50%">';
                    sNCPT2 = '<img  id="sw###" class="CPnamedColourSwatch" style="background-color:###;" title="ttt" width="15" height="15" src="{'{$webcontent}'}/images/space.gif"/>';
                    sNCPT3 = '<span class="namedColourPanelText" >zzz</span>';
                    sNCPT4 = '</div></td>';

                    var re1 = /###/g;  // places we will drop the named colour
                    var re2 = /ttt/g;  // places we will drop the hex colour
                    var re3 = /zzz/g;  // places we will drop the named colour
                    var nCC = aColours.length;  // colour count

                    var i = 0;
                    do
                    {
                        rows += '<tr>';
                        rows += sNCPT1.replace(re1,aColours[i]) + sNCPT2.replace(re1,aColours[i]).replace(re2,namedToHex(aColours[i]));
                        rows += sNCPT3.replace(re3,getLocalizedName(aColours[i]));
                        rows += sNCPT4;
                        i++;
                        rows += sNCPT1.replace(re1,aColours[i]) + sNCPT2.replace(re1,aColours[i]).replace(re2,namedToHex(aColours[i]));
                        rows += sNCPT3.replace(re3,getLocalizedName(aColours[i]));
                        rows += sNCPT4;
                        rows += '</tr>';
                        i++
                    }
                    while (i &lt; nCC);
                    return '<table class="paletteContainer">' + rows + '</table>';
                }

                function NCMPress(panel, colour)
                {
                    panel.className = 'namedColourPanelOver';
                    document.getElementById('sw'+colour).className = 'CPnamedColourSwatchPress';
                }

                function NCMOver(panel, colour)
                {
                    panel.className = 'namedColourPanelOver';
                    document.getElementById('sw'+colour).className = 'CPnamedColourSwatchOver';
                }

                function NCMOut(panel, colour)
                {
                    panel.className = 'namedColourPanel';
                    document.getElementById('sw'+colour).className = 'CPnamedColourSwatch';
                }

                function getLocalizedName(sNamedColour)
                {
                    switch (sNamedColour)
                    {
                        case 'Black':       return "<xts:string encode="javascript" id="IDS_CON_CP_NC_BLACK"/>";        break;
                        case 'Silver':  return "<xts:string encode="javascript" id="IDS_CON_CP_NC_SILVER"/>";       break;
                        case 'Gray':        return "<xts:string encode="javascript" id="IDS_CON_CP_NC_GRAY"/>";         break;
                        case 'White':       return "<xts:string encode="javascript" id="IDS_CON_CP_NC_WHITE"/>";        break;
                        case 'Maroon':  return "<xts:string encode="javascript" id="IDS_CON_CP_NC_MAROON"/>";       break;
                        case 'Red':         return "<xts:string encode="javascript" id="IDS_CON_CP_NC_RED"/>";          break;
                        case 'Purple':  return "<xts:string encode="javascript" id="IDS_CON_CP_NC_PURPLE"/>";       break;
                        case 'Fuchsia': return "<xts:string encode="javascript" id="IDS_CON_CP_NC_FUCHSIA"/>";  break;
                        case 'Green':       return "<xts:string encode="javascript" id="IDS_CON_CP_NC_GREEN"/>";        break;
                        case 'Lime':        return "<xts:string encode="javascript" id="IDS_CON_CP_NC_LIME"/>";         break;
                        case 'Olive':       return "<xts:string encode="javascript" id="IDS_CON_CP_NC_OLIVE"/>";        break;
                        case 'Yellow':  return "<xts:string encode="javascript" id="IDS_CON_CP_NC_YELLOW"/>";       break;
                        case 'Navy':        return "<xts:string encode="javascript" id="IDS_CON_CP_NC_NAVY"/>";         break;
                        case 'Blue':        return "<xts:string encode="javascript" id="IDS_CON_CP_NC_BLUE"/>";         break;
                        case 'Teal':        return "<xts:string encode="javascript" id="IDS_CON_CP_NC_TEAL"/>";         break;
                        case 'Aqua':        return "<xts:string encode="javascript" id="IDS_CON_CP_NC_AQUA"/>";         break;
                        default:                return "";
                    }
                }

                function namedToHex(sNamedColour)
                {
                    switch (sNamedColour)
                    {
                        case 'Black':       return "#000000";   break;
                        case 'Silver':  return "#c0c0c0";   break;
                        case 'Gray':        return "#808080";   break;
                        case 'White':       return "#ffffff";   break;
                        case 'Maroon':  return "#800000";   break;
                        case 'Red':         return "#ff0000";   break;
                        case 'Purple':  return "#800080";   break;
                        case 'Fuchsia': return "#ff00ff";   break;
                        case 'Green':       return "#008000";   break;
                        case 'Lime':        return "#00ff00";   break;
                        case 'Olive':       return "#808000";   break;
                        case 'Yellow':  return "#ffff00";   break;
                        case 'Navy':        return "#000080";   break;
                        case 'Blue':        return "#0000ff";   break;
                        case 'Teal':        return "#008080";   break;
                        case 'Aqua':        return "#00ffff";   break;
                        default:                return "";
                    }
                }



                <!--
                /* =============================================================================== */
                /* Custom Colours and Helper Functions */
                /* =============================================================================== */
                -->
                function buildCustomColourPalette()
                {
                    return document.getElementById('divCustomColours').innerHTML;
                }

                function previewColour()
                {
                    document.getElementById('colourPreview').style.backgroundColor = calculateCustomColourInHexFormat();
                }

                function calculateCustomColourInHexFormat()
                {
                    var red = convertToHexColour(document.getElementById('red').value);
                    var green = convertToHexColour(document.getElementById('green').value);
                    var blue = convertToHexColour(document.getElementById('blue').value);
                    return "#" + red + green + blue;
                }

                function convertToHexColour(colour)
                {
                    var s1 = charToHEX(colour.charAt(0));
                    var s2 = charToHEX(colour.charAt(1));
                    return s1 + s2;
                }

                /* takes a char and converts it to a hex value 0-9,a,b,c,d,e,f */
                function charToHEX(c)
                {
                    var s1 = parseInt(c,16);
                    if(s1 &gt; 9 || isNaN(s1))
                    {
                        switch (s1)
                            {
                                case 10: return "a"; break;
                                case 11: return "b"; break;
                                case 12: return "c"; break;
                                case 13: return "d"; break;
                                case 14: return "e"; break;
                                case 15: return "f"; break;
                                default: return "0";
                            }
                    }
                    else
                        return s1.toString();
                }





                <!--
                    /* =============================================================================== */
                    /* Windows Colour Dialog - IE browsers only  */
                    /* =============================================================================== */

                <out:if test="$browser = 'ie'">
                    function moreColours(sInitColour)
                    {
                        var IEDom = document.all; //IE only
                        if (sInitColour == null)
                            //display color dialog box
                            var sColor = IEDom.dlgHelper.ChooseColorDlg();
                        else
                            var sColor = IEDom.dlgHelper.ChooseColorDlg(sInitColour);

                        //change decimal to hex
                        sColor = sColor.toString(16);
                        //add extra zeroes if hex number is less than 6 digits
                        if (sColor.length &lt; 6)
                        {
                            var sTempString = "000000".substring(0,6-sColor.length);
                        sColor = sTempString.concat(sColor);
                        }

                        selectColour("#" + sColor);
                    }
                </out:if>
                -->
            </script>

            <!-- Create the Dialog Helper Object
            <OBJECT id="dlgHelper" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
            -->
        </div>
    </xsl:template>


    <!--
        Simple template that can walk through a set of elements and render them as tabs.
    -->
    <xsl:template match="cp:tabControl">
        <out:template name="renderTabs">
            <out:param name="tabs"/>
            <out:param name="schedule" select="false()"/>
            <out:param name="scroll" select="false()"/>

            <!-- the tabs -->
            <out:variable name="daTabs">
                <table summary="" cellpadding="0" cellspacing="0" border="0" width="100%" id="tabs" role="tablist">
                    <tr>
                        <out:for-each select="$tabs/*">
                            <!-- left tab decor -->
                            <td>
                                <out:choose>
                                    <out:when test="@selected='true'">
                                        <out:attribute name="class">tabSelectedEdgeBorder</out:attribute>
                                        <div class="tabLeftSelected flippingImages">&#160;</div>
                                    </out:when>
                                    <out:otherwise>
                                        <out:attribute name="class">tabNormalEdgeBorder</out:attribute>
                                        <div class="tabLeftNormal flippingImages">&#160;</div>
                                    </out:otherwise>
                                </out:choose>
                            </td>
                            <!-- the tab -->
                            <out:choose>
                                <out:when test="@selected='true'">
                                    <td nowrap="nowrap" class="tabSelected">
                                        <div id="selectedTab" style="position:relative;" aria-selected="true" role="tab" onkeydown="actionTabs(event);">
                                            <out:if test="$isBidiEnabled = 'true'">
                                                <out:attribute name="dir"><out:value-of select="xtsext:getBTD(string(.), $baseTextDirection, $productLocale)"/></out:attribute>
                                            </out:if>
                                            <out:copy-of select="./*|text()"/>
                                        </div>
                                    </td>
                                </out:when>
                                <out:otherwise>
                                    <td nowrap="nowrap" class="tabNormal" >
                                        <div id="nonSelectedTab_{'{position()}'}" role="tab" aria-selected="false" onkeydown="actionTabs(event);">
                                        <out:if test="$isBidiEnabled = 'true'">
                                            <out:attribute name="dir"><out:value-of select="xtsext:getBTD(string(.), $baseTextDirection, $productLocale)"/></out:attribute>
                                        </out:if>
                                        <out:copy-of select="./*|text()"/>
                                        </div>
                                    </td>
                                </out:otherwise>
                            </out:choose>
                            <!-- right tab decor -->
                            <td>
                                <out:choose>
                                    <out:when test="@selected='true'">
                                        <out:attribute name="class">tabSelectedEdgeBorder</out:attribute>
                                        <div class="tabRightSelected flippingImages">&#160;</div>
                                    </out:when>
                                    <out:otherwise>
                                        <out:attribute name="class">tabNormalEdgeBorder</out:attribute>
                                        <div class="tabRightNormal flippingImages">&#160;</div>
                                    </out:otherwise>
                                </out:choose>
                            </td>
                            <!-- tab spacer -->
                            <out:if test="position() != last()">
                                <td valign="bottom"><div class="tabSpacer"/></td>
                            </out:if>
                        </out:for-each>

                        <out:if test="not($schedule)">
                            <td class="tabTail">&#160;</td>
                        </out:if>

                    </tr>
                </table>
            </out:variable>


            <!-- Render tabs with scroll control -->
            <div>
                <out:if test="not($schedule)">
                    <out:attribute name="class">tabBarContainer</out:attribute>
                </out:if>
                <script language="javascript">
                    function actionTabs(evt) {
                        evt = evt != null ? evt : window.event;
                        var e = evt.srcElement ? evt.srcElement : evt.target;
                        if (evt.keyCode == 37 || evt.keyCode == 38) {
                            var tabbar = e.parentNode.parentNode;
                            var tds = tabbar.childNodes;
                            var newTab = null;
                            for (var i = 0, len = tds.length; i &lt; len; i++) {
                                if (tds[i].className == "tabSelected") {
                                    if (newTab == null) {
                                        return;
                                    } else {
                                        location.href = newTab.childNodes[0].childNodes[0].href;
                                    }
                                 } else if (tds[i].className == "tabNormal") {
                                    newTab = tds[i];
                                 }
                            }
                        } else if (evt.keyCode == 39 || evt.keyCode == 40) {
                            var tabbar = e.parentNode.parentNode;
                            var tds = tabbar.childNodes;
                            var newTab = null;
                            for (var i = tds.length; --i;) {
                                if (tds[i].className == "tabSelected") {
                                    if (newTab == null) {
                                        return;
                                    } else {
                                        location.href = newTab.childNodes[0].childNodes[0].href;
                                    }
                                 } else if (tds[i].className == "tabNormal") {
                                    newTab = tds[i];
                                 }
                            }
                        }
                    }
                </script>
                <table summary="" cellspacing="0" cellpadding="0" width="100%" role="presentation">
                    <tr>
                        <out:choose>
                            <out:when test="$scroll">
                                <td valign="bottom" style="position:relative;width:100%;top:0px;">
                                    <div id="tabWindow" onresize="tabEvalScroll();" role="tablist">
                                        <out:attribute name="style">
                                            <out:text/>overflow:hidden;width:100%<out:text/>
                                            <out:if test="$browser='ie'">;position:absolute</out:if>
                                        </out:attribute>
                                        <out:copy-of select="$daTabs"/>
                                    </div>
                                </td>
                            </out:when>
                            <out:otherwise>
                                <td valign="bottom">
                                    <out:copy-of select="$daTabs"/>
                                </td>
                            </out:otherwise>
                        </out:choose>
                        <out:if test="$scroll">
                            <script language="JavaScript">
                                var g_sImageRoot = "<out:value-of select="xtsext:javascriptencode(string($skin_shared_images))"/>";
                            </script>
                            <script language="javascript" src="{'{$webcontent}'}/{'{$app}'}/js/tabs.js"></script>
                            <td>
                                <div    id="tabControlLeftContainer" tabindex="0" accesskey="1"
                                            class="tabScrollButton"
                                            onkeypress="if(event.keyCode==9)return true; else if (event.keyCode==13 || event.keyCode==32 || event.charCode==32) tabControlDBLClick('left', event); return false;"
                                            onmouseover = "tabControlMouseOver(this)"
                                            onmouseout  = "tabControlMouseOut(this)"
                                            ondblclick  = "tabControlDBLClick('left', event); return true;"
                                            onmousedown = "tabControlPress('left', event); return true;"
                                            onmouseup       = "tabControlRelease(); return true;"
                                            role="button">
                                    <out:attribute name="title"><xts:string id="IDS_SCROLL_LEFT"/></out:attribute>
                                    <img id="tabControlLeft" src="{'{$skin_shared_images}'}action_scroll_left.gif" class="flippingImages">
                                        <out:attribute name="alt"><xts:string id="IDS_SCROLL_LEFT"/></out:attribute>
                                    </img>
                                </div>
                            </td>
                            <td>
                                <div    id="tabControlRightContainer" tabindex="0" accesskey="2"
                                            class="tabScrollButton"
                                            onkeypress="if(event.keyCode==9)return true; else if (event.keyCode==13 || event.keyCode==32 || event.charCode==32) tabControlDBLClick('right', event); return true;"
                                            onmouseover = "tabControlMouseOver(this)"
                                            onmouseout  = "tabControlMouseOut(this)"
                                            ondblclick  = "tabControlDBLClick('right', event); return true;"
                                            onmousedown = "tabControlPress('right', event); return true;"
                                            onmouseup       = "tabControlRelease(); return true;"
                                            role="button">
                                    <out:attribute name="title"><xts:string id="IDS_SCROLL_RIGH"/></out:attribute>
                                    <img id="tabControlRight" src="{'{$skin_shared_images}'}action_scroll_right.gif" class="flippingImages">
                                        <out:attribute name="alt"><xts:string id="IDS_SCROLL_RIGH"/></out:attribute>
                                    </img>
                                </div>
                            </td>
                        </out:if>
                    </tr>
                </table>
            </div>
        </out:template>
    </xsl:template>

    <!-- the main engine -->
    <xsl:template match="*">
        <xsl:copy>
            <xsl:copy-of select="@*"/>
            <xsl:apply-templates/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>