analytics/templates/ps/portal/mypages/common/response/layout.xslt

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

    IBM Cognos Products: ps

    (C) Copyright IBM Corp. 2005, 2015

    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
-->

<!--
   Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
   Cognos (R) is a trademark of Cognos ULC, (formerly Cognos Incorporated).
-->
<xsl:stylesheet version="1.0" 
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
	xmlns:cm="http://developer.cognos.com/schemas/xts-cm/1/" 
	xmlns:pf="http://developer.cognos.com/schemas/xts/pf" 			
	xmlns:lyt="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/layout/"  
	xmlns:dt="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/dialog/templates/"
	xmlns:dp="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/dialog/presentation/"  
	xmlns:df="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/dialog/framework/"  
	xmlns:dc="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/dialog/confirm/1/" 
	xmlns:cp="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/controls/presentation/" 
	xmlns:cf="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/controls/framework/"  			
	xmlns:utml="http://developer.cognos.com/schemas/xts/logicsheet/xslt/formlogic/"
	xmlns:out="dummy-uri"		 
	xmlns:xtsext="xalan://com.cognos.xts.ext.XTSExt" 
	xmlns:xts="http://developer.cognos.com/schemas/xts/" 
	xmlns:rdb="http://developer.cognos.com/schemas/xts/rdb">
	
	<xsl:output method="xml" encoding="UTF-8" indent="no"/>
	<xsl:namespace-alias stylesheet-prefix="out" result-prefix="xsl"/>
	
		
	<xsl:template match="rdb:mypages">
		
		<xsl:variable name="mode">
			<xsl:choose>
				<xsl:when test="@mode = 'properties'">properties</xsl:when>
				<xsl:otherwise>new</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>
		
		<out:variable name="layout" select="/root/layout"/>		
		<out:variable name="firstColumnCount" select="count($layout/column[1]/portlet)"/>
		<out:variable name="secondColumnCount" select="count($layout/column[2]/portlet)"/>
		<out:variable name="thirdColumnCount" select="count($layout/column[3]/portlet)"/>								
		<out:variable name="mp_columns">
			<out:choose>
				<out:when test="key('env-param', 'm_mp_columns')"><out:value-of select="key('env-param', 'm_mp_columns')"/></out:when>
				<out:otherwise>1</out:otherwise>
			</out:choose>
		</out:variable> 	
		
		<!-- When in properties mode, find out if this dialog should be read-only. -->			
		<out:variable name="permissions" select="string(/root/cm:queryResponse/cm:queryReply[1]/*/cm:permissions)"/>
		<out:variable name="canTraverse" select="($permissions != '' and contains(concat(' ',$permissions,' '),' traverse ')) or $permissions = ''"/>
		<out:variable name="readOnly" select="not($canTraverse) or  ($permissions and not(contains(concat(' ',$permissions,' '),' write ')))"/>

		
		<!-- find out how many columns we are displaying -->
		<out:variable name="mp_first_column_width">
			<out:value-of select="$layout/column[1]/@width"/>
		</out:variable>
		<!-- find out the second column size -->
		<out:variable name="mp_second_column_width">
			<out:value-of select="$layout/column[2]/@width"/>
		</out:variable>
		<!-- find out the third column size -->
		<out:variable name="mp_third_column_width">
			<out:value-of select="$layout/column[3]/@width"/>
		</out:variable>
		

		<script language="javascript">
			var g_readOnly = <out:value-of select="$readOnly"/>;
			var g_canTraverse = <out:value-of select="$canTraverse"/>;
			
			var firstColumnOptionList = new Array();		
			<out:for-each select="$layout/column[1]/portlet">
				firstColumnOptionList[<out:value-of select="(position() - 1)"/>] = new Array("<out:value-of select="$firstColumnCount - (position() - 1)"/>", "<out:value-of select="xtsext:javascriptencode(string(/root/portletNames/portlet[./searchPath = /root/env/param[@name = concat('m_mp_portlet_', current()/@id)]]/name))"/>", "<out:value-of select="@id"/>", "");
			</out:for-each>		
			
			var secondColumnOptionList = new Array();		
			<out:for-each select="$layout/column[2]/portlet">
				secondColumnOptionList[<out:value-of select="(position() - 1)"/>] = new Array("<out:value-of select="$secondColumnCount - (position() - 1)"/>", "<out:value-of select="xtsext:javascriptencode(string(/root/portletNames/portlet[./searchPath = /root/env/param[@name = concat('m_mp_portlet_', current()/@id)]]/name))"/>", "<out:value-of select="@id"/>", "");
			</out:for-each>		
			
			var thirdColumnOptionList = new Array();		
			<out:for-each select="$layout/column[3]/portlet">
				thirdColumnOptionList[<out:value-of select="(position() - 1)"/>] = new Array("<out:value-of select="$thirdColumnCount - (position() - 1)"/>", "<out:value-of select="xtsext:javascriptencode(string(/root/portletNames/portlet[./searchPath = /root/env/param[@name = concat('m_mp_portlet_', current()/@id)]]/name))"/>", "<out:value-of select="@id"/>", "");
			</out:for-each>	
			
			var g_columns = <out:value-of select="count($layout/column)"/>;
																							
			//this is the listed browser
			var browser = '<out:value-of select="xtsext:javascriptencode(string($browser))"/>';
			
			// Manage the column layout.  
			// This function is call on "init" or when the user alters the column layout.			
			function setColumns( columns, bRebalance, imageClick )
			{
				<!-- If this is a click on the column layout selector that matches the existing column count then just ignor it --> 
				if (columns == g_columns &amp;&amp; bRebalance)
				{
					return;
				}
								
				var bPerformColumnAlteration = true;
				var bDeletingColumnWithPortlets = false;
				var nOriginalCols = g_columns;
				
				<!-- If the user is removing a column that contains portlet instances, then make sure to prompt first --> 
				if (parseInt(columns, 10) &lt; g_columns)
				{
					bDeletingColumnWithPortlets = confirmRemoveColumns(parseInt(columns, 10)+1, g_columns);
					
					if(!bDeletingColumnWithPortlets)
						bPerformColumnAlteration = false;					
				}
				
				if (bPerformColumnAlteration)
				{
					<!-- If this event came through the image then update the radio button control -->
					if (imageClick)
					{
						if (columns == "1")
							document.pform.m_mp_columns[0].checked = 'true';
						else if (columns == "2")
							document.pform.m_mp_columns[1].checked = 'true';
						else if (columns == "3")
							document.pform.m_mp_columns[2].checked = 'true';
					}
					
					document.pform.m_mp_col1sort.style.width  = calcColWidth(document.pform.m_mp_firstColumnWidth[document.pform.m_mp_firstColumnWidth.selectedIndex].value);
					document.pform.m_mp_col2sort.style.width = calcColWidth(document.pform.m_mp_secondColumnWidth[document.pform.m_mp_secondColumnWidth.selectedIndex].value);
					document.pform.m_mp_col3sort.style.width  = calcColWidth(document.pform.m_mp_thirdColumnWidth[document.pform.m_mp_thirdColumnWidth.selectedIndex].value);											
	
					document.getElementById("arrowOne").style.display         = ((columns == "1") ? "none" : "inline");
					document.getElementById("arrowOne").style.visibility      = ((columns == "1") ? "hidden" : "visible");
					document.getElementById("two").style.display              = ((columns == "1") ? "none" : "inline");
					document.getElementById("two").style.visibility           = ((columns == "1") ? "hidden" : "visible");	
								
					document.getElementById("arrowTwo").style.display         = ((columns == "3") ? "inline" : "none");
					document.getElementById("arrowTwo").style.visibility      = ((columns == "3") ? "visible" : "hidden");									
					document.getElementById("three").style.display            = ((columns == "3") ? "inline" : "none");
					document.getElementById("three").style.visibility         = ((columns == "3") ? "visible" : "hidden");		
					
					<!--  Update the global column count -->
					g_columns = parseInt(columns);
					
					<!-- 
						/* 
							if this is an explicit event to change the column layout then make sure the 
							new column layout is properly distributed on the page.
						*/
					-->					
					if (bRebalance)
						rebalance();
					
					<!-- 
						/* 
							if we are removing a  column that contains portlets then update the page environment context
							(causes a page refresh)
						*/
					-->			
					if(bDeletingColumnWithPortlets)
						removeColumns(parseInt(columns)+1, nOriginalCols);
				}
				
				return;
			}
			
			function rebalance()
			{
				if (g_columns == 1)
				{
					document.pform.m_mp_col1sort.style.width  = calcColWidth("100");
					document.pform.m_mp_firstColumnWidth.value = "100";
				}
				else if (g_columns == 2)
				{
					document.pform.m_mp_col1sort.style.width  = calcColWidth("50");
					document.pform.m_mp_firstColumnWidth.value = "50";
					document.pform.m_mp_col2sort.style.width  = calcColWidth("50");
					document.pform.m_mp_secondColumnWidth.value = "50";
				}
				else
				{
					document.pform.m_mp_col1sort.style.width  = calcColWidth("30");
					document.pform.m_mp_firstColumnWidth.value = "30";
					document.pform.m_mp_col2sort.style.width  = calcColWidth("40");
					document.pform.m_mp_secondColumnWidth.value = "40";
					document.pform.m_mp_col3sort.style.width  = calcColWidth("30");
					document.pform.m_mp_firstColumnWidth.value = "30";
				}				
			}
			
			// move columns	
			function moveColumns( whatFrom, whatTo, arrayFrom, arrayTo ) 
			{
				for (var i = whatFrom.options.length - 1; i >= 0; i--) 
				{
					//if it is selected and the one after this isn't
			        if (whatFrom[i].selected == true){
						arrayFrom[whatFrom[i].value][0] = (0 - i) - 1;
						arrayFrom[whatFrom[i].value][3] = "selected";
						arrayTo.push(arrayFrom[whatFrom[i].value]);
						arrayFrom.splice(i, 1);
					}
				}
				//call the sort the arrays
				sortIndex(whatFrom, arrayFrom);	
				sortIndex(whatTo, arrayTo);	
				//revalue the arrays	
				revalue(arrayFrom);
				revalue(arrayTo);												
			}	
						
			// move all columns	
			function moveAllColumns( whatFrom, whatTo, arrayFrom, arrayTo ) 
			{
				for (var i = whatFrom.options.length - 1; i >= 0; i--) 
				{
					arrayFrom[whatFrom[i].value][0] = (0 - i) - 1;
					arrayFrom[whatFrom[i].value][3] = "selected";								
					arrayTo.push(arrayFrom[whatFrom[i].value]);
					arrayFrom.splice(i, 1);
				}
				//call the sort the arrays
				sortIndex(whatFrom, arrayFrom);	
				sortIndex(whatTo, arrayTo);	
				//revalue the arrays	
				revalue(arrayFrom);
				revalue(arrayTo);										
			}			
			
			// move all columns	
			function switchColumns( whatOne, whatTwo, arrayOne, arrayTwo, widthOne, widthTwo) 
			{
				//switch contents
				var tempArray = new Array();
				tempArray = tempArray.concat(arrayOne);
				arrayOne.splice(0, arrayOne.length)
				for(var i = 0; i &lt; arrayTwo.length; i++)
					arrayOne[i] = arrayTwo[i];
				arrayTwo.splice(0, arrayTwo.length)
				for(var i = 0; i &lt; tempArray.length; i++)
					arrayTwo[i] = tempArray[i];								
				
				//switch the widths
				var tempWidth  = widthOne.value;
				widthOne.value = widthTwo.value;
				widthTwo.value = tempWidth;
				
				var tempWidth2  = whatOne.style.width;
				whatOne.style.width = whatTwo.style.width;
				whatTwo.style.width = tempWidth2;

				//call the sort the arrays
				sortIndex(whatOne, arrayOne);	
				sortIndex(whatTwo, arrayTwo);	
				
				//revalue the arrays	
				revalue(arrayOne);
				revalue(arrayTwo);				
			}			
			
			//unselect all options	
			function unSelectOptions(what) 
			{
				if (what) 
				{
					for (var i = what.options.length - 1; i >= 0; i--) 
						what[i].selected = false;
				}	
			}
			
			//this will set the values for both selectbox
			function setValues() 
			{	
				if (!g_readOnly)
				{
					setList(document.pform.m_mp_col1sort, firstColumnOptionList);
					setList(document.pform.m_mp_col2sort, secondColumnOptionList);
					setList(document.pform.m_mp_col3sort, thirdColumnOptionList);
				}
			}								

			function initPage() 
			{
				var colCount = 1;
				
				if (document.pform.m_mp_columns)
				{
					var columns = document.pform.m_mp_columns;				
					if (columns[1].checked)
	        	colCount = 2;
	    		else if (columns[2].checked)
	        	colCount = 3;
				}
				else
				{
					colCount = parseInt("<out:value-of select="$mp_columns"/>");
				}
						
				if (g_canTraverse)
					setColumns( colCount );
			}
									
			// Submit the form.
			function doSubmit()
			{
				document.pform.m.value = "<out:value-of select="$mname"/>";
				document.pform.submit();
			}
							
			function changeSize(sizeList, sortList)
			{	
				sortList.style.width = calcColWidth(sizeList[sizeList.selectedIndex].value);
			}
			
			function calcColWidth(sWidth)
			{	
				var clientWidth = parseInt(document.body.clientWidth, 10);

				if (clientWidth == 0) {
					if (window.frameElement &amp;&amp; window.frameElement.fragClientWidth) {
						clientWidth = parseInt(window.frameElement.fragClientWidth, 10);
					}
				}
				
				var colWidth = ((parseInt(sWidth, 10) / 100) * clientWidth) - 90;

				return (colWidth > 0) ? colWidth : 0;
			}
			
			function removePortlet(col)
			{
				var colPortlets = null;
				
				switch (col)
				{
					case "m_mp_col1sort":
					colPortlets = firstColumnOptionList;
					break;
				
					case "m_mp_col2sort":
					colPortlets = secondColumnOptionList;
					break;
					
					case "m_mp_col3sort":
					colPortlets = thirdColumnOptionList;
					break;
				}

				for (var i = 0; i &lt; document.pform.elements[col].options.length; i++) 
				{
					if(document.pform.elements[col].options[i].selected)
					{
						var porletID = colPortlets[parseInt(document.pform.elements[col].options[i].value, 10)][2];
						document.pform.elements["m_mp_portlet_" + porletID].value = "";
						
						if (document.pform.elements["m_mp_saved_portlet_" + porletID])
							document.pform.elements["m_mp_saved_portlet_" + porletID].value = "remove";
					}
				}
				document.pform.m_mp_cmd.value = "remove_portlet";
				setValues();
				doSubmit();			
			}

			function confirmRemoveColumns(fromColumn, toColumn)
			{
				var bConfirmed = true;

				for (var col = fromColumn; col &lt;= toColumn; col++) {
					var colPortlets = null;
					
					switch (col)
					{
						case 1:
							colPortlets = firstColumnOptionList;
						break;
					
						case 2:
							colPortlets = secondColumnOptionList;
						break;
						
						case 3:
							colPortlets = thirdColumnOptionList;
						break;
					}

					if (colPortlets != null &amp;&amp; colPortlets[0] != null) {
						bConfirmed = window.confirm("<xts:string id="IDS_PROP_CONFIRM_PORTLET_DELETION" encode="javascript"/>");

						if (!bConfirmed) {
							document.pform.m_mp_columns[fromColumn-1-1].checked = false;
							document.pform.m_mp_columns[toColumn-1].checked = true;
						}

						break;
					}
				}

				return bConfirmed;
			}

			function removeColumns(fromColumn, toColumn)
			{
				var bRemoved = false;

				for (var col = fromColumn; col &lt;= toColumn; col++) {
					var colPortlets = null;
					
					switch (col)
					{
						case 1:
							colPortlets = firstColumnOptionList;
						break;
					
						case 2:
							colPortlets = secondColumnOptionList;
						break;
						
						case 3:
							colPortlets = thirdColumnOptionList;
						break;
					}

					if (colPortlets != null &amp;&amp; colPortlets[0] != null) {
						for (var i = 0; i &lt; colPortlets[0][0]; i++) 
						{
							var porletID = colPortlets[i][2];
							document.pform.elements["m_mp_portlet_" + porletID].value = "";
								
							if (document.pform.elements["m_mp_saved_portlet_" + porletID]) {
								document.pform.elements["m_mp_saved_portlet_" + porletID].value = "remove";
							}

							bRemoved = true;
						}
					}
				}

				if (bRemoved) 
				{
					document.pform.m_mp_cmd.value = "remove_portlet";
					setValues();
					doSubmit();
				}
				
				return bRemoved;
			}
			
			function addPortlet(col)
			{				
				document.pform.m_mp_cmd.value = "add_portlet_" + col;
				document.pform.controller_state.value = "addEntries|navigate";
				setValues();
				doSubmit();
			}
		</script>						

		<div id="l">
			<lyt:layout style="1" title="IDS_MP_NUMBER_COLUMNS">
				<lyt:section>
					<utml:radio-group name="m_mp_columns">
						<utml:default-value>1</utml:default-value>
						<dp:choice>	 								
							<dp:section1 valign="middle" wrap="nowrap">
								<utml:input type="radio" value="1" onclick="setColumns(this.value, true)" style="margin-right:5px;">
									<out:if test="$readOnly">
										<out:attribute name="disabled">disabled</out:attribute>
									</out:if>								
								</utml:input>								
								<img src="{'{$image_root}'}icon_1column_preview.gif" align="absmiddle" >
									<out:if test="not($readOnly)">
										<out:attribute name="style">cursor:pointer</out:attribute>
										<out:attribute name="onclick">setColumns(document.pform.m_mp_columns[0].value, true, true);</out:attribute>
									</out:if>
									<out:attribute name="title"><xts:string id="IDS_MP_ONE_COLUMN"/></out:attribute>
								</img>
								
												
								<utml:input type="radio" value="2" onclick="setColumns(this.value, true)" style="margin-left:10px;margin-right:5px;">
									<out:if test="$readOnly">
										<out:attribute name="disabled">disabled</out:attribute>
									</out:if>								
								</utml:input>
								<img src="{'{$image_root}'}icon_2column_preview.gif" align="absmiddle">
									<out:if test="not($readOnly)">
										<out:attribute name="style">cursor:pointer</out:attribute>
										<out:attribute name="onclick">setColumns(document.pform.m_mp_columns[1].value, true, true);</out:attribute>
									</out:if>
									<out:attribute name="title"><xts:string id="IDS_MP_TWO_COLUMN"/></out:attribute>
								</img>
								
									
								<utml:input type="radio" value="3" onclick="setColumns(this.value, true)" style="margin-left:10px;margin-right:5px;">
									<out:if test="$readOnly">
										<out:attribute name="disabled">disabled</out:attribute>
									</out:if>								
								</utml:input>
								<img src="{'{$image_root}'}icon_3column_preview.gif" align="absmiddle">
									<out:if test="not($readOnly)">
										<out:attribute name="style">cursor:pointer</out:attribute>
										<out:attribute name="onclick">setColumns(document.pform.m_mp_columns[2].value, true, true);</out:attribute>
									</out:if>
									<out:attribute name="title"><xts:string id="IDS_MP_THREE_COLUMN"/></out:attribute>
								</img>								
							</dp:section1>
						</dp:choice>					
					</utml:radio-group>				
				</lyt:section>			
			</lyt:layout>	
			
			<out:variable name="contentLocale" select="string(/root/user/param[@name='contentLocale'])"/>		
					
			<xsl:variable name="colWidthOptions">
				<utml:option value="20"><out:value-of select="xtsext:formatNumber(string(.2),$contentLocale,number(4))"/></utml:option>
				<utml:option value="30"><out:value-of select="xtsext:formatNumber(string(.3),$contentLocale,number(4))"/></utml:option>
				<utml:option value="40"><out:value-of select="xtsext:formatNumber(string(.4),$contentLocale,number(4))"/></utml:option>
				<utml:option value="50"><out:value-of select="xtsext:formatNumber(string(.5),$contentLocale,number(4))"/></utml:option>
				<utml:option value="60"><out:value-of select="xtsext:formatNumber(string(.6),$contentLocale,number(4))"/></utml:option>
				<utml:option value="70"><out:value-of select="xtsext:formatNumber(string(.7),$contentLocale,number(4))"/></utml:option>
				<utml:option value="80"><out:value-of select="xtsext:formatNumber(string(.8),$contentLocale,number(4))"/></utml:option>
				<utml:option value="90"><out:value-of select="xtsext:formatNumber(string(.9),$contentLocale,number(4))"/></utml:option>
				<utml:option value="100"><out:value-of select="xtsext:formatNumber(string(1.0),$contentLocale,number(4))"/></utml:option>
			</xsl:variable>
			
			<lyt:layout style="1" border="yes" title="IDS_MP_CONTENT_ARRANGEMENT" intro="IDS_MP_CONTENT_INTRO">
				<lyt:section>
					<dp:list>
						<dp:section>
							<!-- ==========	Column 1 =============	-->
							<!-- =================================	-->
							<div id="one" style="visibility:visible; display:inline;">
								<table class="pageEditorPortletColumn">
								<tr><td>
								<dp:list>
									<dp:section>
										<dp:input>
											<dp:section1>
												<xts:string id="IDS_MP_COLUMN_WIDTH"/>
											</dp:section1>
											<dp:section2>			
												<utml:select name="m_mp_firstColumnWidth" onchange="changeSize(this, document.pform.m_mp_col1sort)">
													<utml:default-value>
														<out:choose>
															<out:when test="$mp_first_column_width > 0">
																<out:value-of select="$mp_first_column_width"/>
															</out:when>
															<out:otherwise>30</out:otherwise>
														</out:choose>		
													</utml:default-value>		
													<out:if test="$readOnly">
														<out:attribute name="disabled">disabled</out:attribute>
													</out:if>
													<xsl:copy-of select="$colWidthOptions"/>
												</utml:select>																		
											</dp:section2>							
										</dp:input>					
									</dp:section>																		
									<dp:section>	
										<out:choose>
											<out:when test="$canTraverse">
												<cf:sortList class="sortSelectContainer" mode="mypages" name="m_mp_col1sort" form="pform" wide="false" array="firstColumnOptionList" size="12" 
														onClick="unSelectOptions(document.pform.m_mp_col2sort);unSelectOptions(document.pform.m_mp_col3sort);">
													<cf:readOnlyFlag>$readOnly</cf:readOnlyFlag>
													<cf:initContent>
														<out:for-each select="$layout/column[1]/portlet">
															<utml:option>
																<out:attribute name="value"><out:value-of select="(position() - 1)"/></out:attribute>
																<out:value-of select="/root/portletNames/portlet[./searchPath = /root/env/param[@name = concat('m_mp_portlet_', current()/@id)]]/name"/>
															</utml:option>
														</out:for-each>	
													</cf:initContent>												
													<cf:sortAction>																									
														<a href="javascript:addPortlet('1')"><xts:string id="IDS_COMMAND_ADD"/></a>
														&#160;&#160;												
														<a href="javascript:removePortlet('m_mp_col1sort')"><xts:string id="IDS_REMOVE"/></a>
													</cf:sortAction>											
												</cf:sortList>
											</out:when>										
											<out:otherwise>
												<xsl:call-template name="accessDenied"/>
											</out:otherwise>
										</out:choose>									
									</dp:section>
								</dp:list>
								</td></tr>
								</table>
							</div>
							
							
								<div id="arrowOne" style="visibility: visible; display: inline;">
									<out:if test="not($readOnly)">
										<table border="0" cellpadding="0" cellspacing="0" style="width:60px;text-align:center;">
											<tr>
												<td align="center">
													<dp:columnButtonGroup align="center" width="40">
														<dp:columnButton>
															<a href="javascript:switchColumns(document.pform.m_mp_col1sort, document.pform.m_mp_col2sort, firstColumnOptionList, secondColumnOptionList, document.pform.m_mp_firstColumnWidth, document.pform.m_mp_secondColumnWidth)">
																<img height="18" width="18" border="0" src="{'{$image_root}'}move_swap.gif">
																	<out:attribute name="alt"><xts:string id="IDS_NEW_PAGE_LAYOUT_SWAP_COLUMNS"/></out:attribute>
																</img>	
															</a>
														</dp:columnButton>
													</dp:columnButtonGroup>
												</td>									
											</tr>										
											<tr>
												<td height="50"/>								
											</tr>										
											<tr>
												<td align="center">
													<dp:columnButtonGroup align="center" width="40">										
														<dp:columnButton>
															<a href="javascript:moveColumns(document.pform.m_mp_col1sort, document.pform.m_mp_col2sort, firstColumnOptionList, secondColumnOptionList)">
																<img height="18" width="18" border="0" src="{'{$image_root}'}move_right.gif">
																	<out:attribute name="alt"><xts:string id="IDS_MP_MOVE_RIGHT"/></out:attribute>
																</img>	
															</a>
														</dp:columnButton>
														<dp:columnButton>
															<a href="javascript:moveColumns(document.pform.m_mp_col2sort, document.pform.m_mp_col1sort, secondColumnOptionList, firstColumnOptionList)">
																<img height="18" width="18" border="0" src="{'{$image_root}'}move_left.gif">					
																	<out:attribute name="alt"><xts:string id="IDS_MP_MOVE_LEFT"/></out:attribute>																			
																</img>	
															</a>
														</dp:columnButton>
														<dp:columnButton>
															<a href="javascript:moveAllColumns(document.pform.m_mp_col1sort, document.pform.m_mp_col2sort, firstColumnOptionList, secondColumnOptionList)">
																<img height="18" width="18" border="0" src="{'{$image_root}'}move_all_right.gif">
																	<out:attribute name="alt"><xts:string id="IDS_MP_MOVE_ALL_RIGHT"/></out:attribute>																			
																</img>	
															</a>
														</dp:columnButton>
														<dp:columnButton>
															<a href="javascript:moveAllColumns(document.pform.m_mp_col2sort, document.pform.m_mp_col1sort, secondColumnOptionList, firstColumnOptionList)">
																<img height="18" width="18" border="0" src="{'{$image_root}'}move_all_left.gif">								
																	<out:attribute name="alt"><xts:string id="IDS_MP_MOVE_ALL_LEFT"/></out:attribute>																			
																</img>	
															</a>
														</dp:columnButton>
													</dp:columnButtonGroup>	
												</td>										
											</tr>
											<tr>
												<td height="50"/>
											</tr>
										</table>				
									</out:if>																								
								</div>
							
							
															
							
								<!-- ==========	Column 2 =============	-->
								<!-- =================================	-->
								<div id="two" style="visibility: visible; display: inline;">
									<table class="pageEditorPortletColumn">
									<tr><td>
									<dp:list>
										<dp:section>	
											<dp:input>
												<dp:section1>
													<xts:string id="IDS_MP_COLUMN_WIDTH"/>
												</dp:section1>
												<dp:section2>
													<utml:select name="m_mp_secondColumnWidth" onchange="changeSize(this, document.pform.m_mp_col2sort)">
														<utml:default-value>
															<out:choose>
																<out:when test="$mp_second_column_width > 0">
																	<out:value-of select="$mp_second_column_width"/>
																</out:when>
																<out:otherwise>30</out:otherwise>
															</out:choose>		
														</utml:default-value>		
														<out:if test="$readOnly">
															<out:attribute name="disabled">disabled</out:attribute>
														</out:if>															
														<xsl:copy-of select="$colWidthOptions"/>
													</utml:select>											
												</dp:section2>							
											</dp:input>
										</dp:section>										
										<dp:section>	
											<out:choose>
												<out:when test="$canTraverse">
													<cf:sortList class="sortSelectContainer" mode="mypages" name="m_mp_col2sort" colspan="2" form="pform" wide="false" array="secondColumnOptionList" size="12"  
														onClick="unSelectOptions(document.pform.m_mp_col1sort);unSelectOptions(document.pform.m_mp_col3sort);">
														<cf:readOnlyFlag>$readOnly</cf:readOnlyFlag>
														<cf:initContent>
															<out:for-each select="$layout/column[2]/portlet">
																<utml:option>
																	<out:attribute name="value"><out:value-of select="(position() - 1)"/></out:attribute>												
																	<out:value-of select="/root/portletNames/portlet[./searchPath = /root/env/param[@name = concat('m_mp_portlet_', current()/@id)]]/name"/>
																</utml:option>		
															</out:for-each>
														</cf:initContent>													
														<cf:sortAction>																									
															<a href="javascript:addPortlet('2')"><xts:string id="IDS_COMMAND_ADD"/></a>
															&#160;&#160;																									
															<a href="javascript:removePortlet('m_mp_col2sort')"><xts:string id="IDS_REMOVE"/></a>													
														</cf:sortAction>		
													</cf:sortList>
												</out:when>											
												<out:otherwise>
													<xsl:call-template name="accessDenied"/>
												</out:otherwise>
											</out:choose>
										</dp:section>
									</dp:list>					
									</td></tr>
								</table>																				
								</div>
							
							
							
															
								<div id="arrowTwo" style="visibility: visible; display: inline;">
									<out:if test="not($readOnly)">
										<table border="0" cellpadding="0" cellspacing="0" style="width:60px;text-align:center;">
											<tr>
												<td align="center">
													<dp:columnButtonGroup align="center" width="40">										
														<dp:columnButton>
															<a href="javascript:switchColumns(document.pform.m_mp_col2sort, document.pform.m_mp_col3sort, secondColumnOptionList, thirdColumnOptionList, document.pform.m_mp_secondColumnWidth, document.pform.m_mp_thirdColumnWidth)">
																<img height="18" width="18" border="0" src="{'{$image_root}'}move_swap.gif">
																	<out:attribute name="alt"><xts:string id="IDS_NEW_PAGE_LAYOUT_SWAP_COLUMNS"/></out:attribute>
																</img>	
															</a>
														</dp:columnButton>
													</dp:columnButtonGroup>
												</td>									
											</tr>										
											<tr>
												<td height="50"/>								
											</tr>										
											<tr>
												<td align="center">
													<dp:columnButtonGroup align="center" width="40">
														<dp:columnButton>
															<a href="javascript:moveColumns(document.pform.m_mp_col2sort, document.pform.m_mp_col3sort, secondColumnOptionList, thirdColumnOptionList)">
																<img height="18" width="18" border="0">
																	<out:attribute name="src"><out:value-of select="$image_root"/>move_right.gif<out:text/></out:attribute>									
																	<out:attribute name="alt"><xts:string id="IDS_MP_MOVE_RIGHT"/></out:attribute>
																</img>	
															</a>
														</dp:columnButton>
														<dp:columnButton>
															<a href="javascript:moveColumns(document.pform.m_mp_col3sort, document.pform.m_mp_col2sort, thirdColumnOptionList, secondColumnOptionList)">
																<img height="18" width="18" border="0">
																	<out:attribute name="src"><out:value-of select="$image_root"/>move_left.gif<out:text/></out:attribute>									
																	<out:attribute name="alt"><xts:string id="IDS_MP_MOVE_LEFT"/></out:attribute>
																</img>	
															</a>
														</dp:columnButton>
														<dp:columnButton>
															<a href="javascript:moveAllColumns(document.pform.m_mp_col2sort, document.pform.m_mp_col3sort, secondColumnOptionList, thirdColumnOptionList)">
																<img height="18" width="18" border="0">
																	<out:attribute name="src"><out:value-of select="$image_root"/>move_all_right.gif<out:text/></out:attribute>									
																	<out:attribute name="alt"><xts:string id="IDS_MP_MOVE_ALL_RIGHT"/></out:attribute>
																</img>	
															</a>
														</dp:columnButton>
														<dp:columnButton>
															<a href="javascript:moveAllColumns(document.pform.m_mp_col3sort, document.pform.m_mp_col2sort, thirdColumnOptionList, secondColumnOptionList)">
																<img height="18" width="18" border="0">
																	<out:attribute name="src"><out:value-of select="$image_root"/>move_all_left.gif<out:text/></out:attribute>									
																	<out:attribute name="alt"><xts:string id="IDS_MP_MOVE_ALL_LEFT"/></out:attribute>
																</img>	
															</a>
														</dp:columnButton>
													</dp:columnButtonGroup>
												</td>										
											</tr>
											<tr>
												<td height="50"/>								
											</tr>
										</table>
									</out:if>									
								</div>	
							
							
							
							
									
								<!-- ==========	Column 3 =============	-->
								<!-- =================================	-->									
								<div id="three" style="visibility: visible; display: inline;">
									<table class="pageEditorPortletColumn">
									<tr><td>
									<dp:list>
										<dp:section>	
											<dp:input>
												<dp:section1>
													<xts:string id="IDS_MP_COLUMN_WIDTH"/>
												</dp:section1>
												<dp:section2>			
													<utml:select name="m_mp_thirdColumnWidth" onchange="changeSize(this, document.pform.m_mp_col3sort)">
														<utml:default-value>
															<out:choose>
																<out:when test="$mp_third_column_width > 0">
																	<out:value-of select="$mp_third_column_width"/>
																</out:when>
																<out:otherwise>30</out:otherwise>
															</out:choose>		
														</utml:default-value>
														<out:if test="$readOnly">
															<out:attribute name="disabled">disabled</out:attribute>
														</out:if>
													<xsl:copy-of select="$colWidthOptions"/>
												</utml:select>											
												</dp:section2>							
											</dp:input>
										</dp:section>				
										<dp:section>										
											<out:choose>
												<out:when test="$canTraverse">
													<cf:sortList class="sortSelectContainer" mode="mypages" name="m_mp_col3sort" form="pform" array="thirdColumnOptionList" wide="false" size="12"  
														onClick="unSelectOptions(document.pform.m_mp_col1sort);unSelectOptions(document.pform.m_mp_col2sort);">
														<cf:readOnlyFlag>$readOnly</cf:readOnlyFlag>
														<cf:initContent>
															<out:for-each select="$layout/column[3]/portlet">
																<utml:option>
																	<out:attribute name="value"><out:value-of select="(position() - 1)"/></out:attribute>												
																	<out:value-of select="/root/portletNames/portlet[./searchPath = /root/env/param[@name = concat('m_mp_portlet_', current()/@id)]]/name"/>
																</utml:option>		
															</out:for-each>										
														</cf:initContent>
														<cf:sortAction>
															<a href="javascript:addPortlet('3')"><xts:string id="IDS_COMMAND_ADD"/></a>
															&#160;&#160;													
															<a href="javascript:removePortlet('m_mp_col3sort')"><xts:string id="IDS_REMOVE"/></a>
														</cf:sortAction>		
													</cf:sortList>
												</out:when>											
												<out:otherwise>
													<xsl:call-template name="accessDenied"/>
												</out:otherwise>
											</out:choose>										
										</dp:section>
									</dp:list>		
									</td></tr>
								</table>													
								</div>	
							
						</dp:section>
					</dp:list>	
				</lyt:section>
			</lyt:layout>	
			<lyt:layout style="1" border="no" title="IDS_NEW_PAGE_LAYOUT_OPTIONS">
				<lyt:section>
					<dp:choice>
						<dp:section1>
							<utml:input type="checkbox" name="m_mp_flexibleColWidth" value="true"/>
						</dp:section1>
						<dp:section2>
							<xts:string id="IDS_NEW_PAGE_FLEXIBLE_COLUMN_WIDTH"/>
						</dp:section2>									
					</dp:choice>
				</lyt:section>			
			</lyt:layout>							
		</div>
		
		<!-- command -->
		<utml:input type="hidden" name="m_mp_cmd" utml:update="false"/>
		<utml:input type="hidden" name="controller_state" value="" utml:update="false"/>
		<utml:input type="hidden" name="firstColumn"/>
		<utml:input type="hidden" name="secondColumn"/>
		<utml:input type="hidden" name="thirdColumn"/>

		<script language="javascript">
			initPage();		
		</script>	
		
	</xsl:template>
	
	
	
	
	
	<xsl:template match="rdb:newPETest">
		<script language="javascript">			
			function getPageletXML()
			{
				document.pform.pagexml.value = document.getElementById('cpsPageXML').value;
			}							
		</script>
		<p/>		
		<textarea style="width:100%;height:300px;padding:10px;color:red;margin:20px;" id="cpsPageXML">
			<out:value-of select="key('env-param', 'pagexml')" disable-output-escaping="yes"/>
		</textarea>
	</xsl:template>
	
	
	
	
	<xsl:template match="rdb:newPE">
		<!-- only show the editor if creating a new page or if you are editing a page when you have at least read and traverse and execute and write privleges -->
		<out:variable name="pagePermissions" select="/root/cm:queryResponse/cm:queryReply[1]/cm:pagelet/cm:permissions"/>
		<out:choose>
			<out:when test="(not(/root/cm:queryResponse/cm:queryReply)) or (contains($pagePermissions,'traverse') and (contains($pagePermissions,'read')))">
				<script>
					var contextPath="<out:value-of select="$webRoot"/>";
					var GATEWAY_URI="<out:value-of select="$gateway"/>/myportal";	<!-- TODO: myportal is hard-coded -->
					var sGateway="<out:value-of select="$gateway"/>";
				</script>
				<script src="{ '{ $gateway }' }/dashboard/messages/messages/pfmessages?section=JS"/>
				<script src="{ '{ $webRoot }' }/dojo16/dojo/dojo.js"/>
				<script src="{ '{ $webRoot }' }/fragments/xdojo/core.js"/>
				<script src="{ '{ $webRoot }' }/fragments/fragments.js"/>
				<script src="{ '{ $webRoot }' }/common/framework/validator/CValidator.js"/>
				<script src="{ '{ $webRoot }' }/fragments/uicommon.js"/>
				<script src="{ '{ $webRoot }' }/fragments/layout.js"/>
				<script>
					var myfragRoot = null;
					var myfragTree = null;
					var myfragEditor = null;
					var divTree = null;
					var divEditor = null;
					var app_waitdlg = null;
					
					function getPageletXML()
					{
						document.pform.pagexml.value = LAYOUT_EDITOReditorpage.serialize();
					}							
		
					function fragContentDiv(sId)
					{
						var div = document.createElement("DIV");
						div.id = sId;
						div.className = "boxBody";
						div.style.position = "absolute";
						div.style.width = "100%";
						div.style.height = "400px";
						//div.style.border = "1px solid black";
						div.style.overflow = "auto";
						document.body.appendChild(div);
						return div;
					}
		
					function fragResize()
					{
					_F_log("I", "resize");
						var viewArea = $("myfragdisplay");
						var cy = document.body.clientHeight;
						cy = Math.max(cy - 150, 400);
						xHeight(viewArea, cy);
						
						var x = xPageX(viewArea);
						var y = xPageY(viewArea) + 10;
						var w = xWidth(viewArea);
						var h = xHeight(viewArea) - 20;

						var wl = w * 30 / 100;
						var wr = w * 70 / 100;
					
						if (divTree != null){
							xMoveTo(divTree, x, y);
							xResizeTo(divTree, wl, h);
							xShow(divTree);
						}else{
							wl=0;
							wr=w;
						}
					

						xMoveTo(divEditor, x + wl, y);
						xResizeTo(divEditor, wr, h);
						xShow(divEditor);

						if (myfragEditor.onresize)
							myfragEditor.onresize();
					}
		
					function fragInit()
					{
						<out:variable name="hide-string"><xts:string id="IDS_FRAG_HIDE"/></out:variable>
						ui_wait.prototype.template = "\&lt;table cellpadding=\"0\" cellspacing=\"0\"\&gt;\&lt;tr\&gt;\&lt;td\&gt;" + 
							"\&lt;img src=\"$WEB$/fragments/common/images/loading_timed.gif\" border=\"0\" align=\"middle\" \&gt;" + 
							"\&lt;/td\&gt;\&lt;td nowrap\&gt;&#160;" +
							"<xts:string id="IDS_FRAG_WAIT_MESSAGE" encode="javascript"/>" +
							"&#160;&#160;<xts:string id="IDS_FRAG_HIDE_MESSAGE" encode="javascript"><xts:param name="0">\&lt;a id=\"_THIS_hide\"\&gt;<out:value-of select="$hide-string"/>\&lt;/a\&gt;</xts:param></xts:string>" + 
							"\&lt;/td\&gt;\&lt;/tr\&gt;\&lt;/table\&gt;";
						app_waitdlg = new ui_wait({id:"wait"});
						app_waitdlg.create();
		
						ui_error.prototype.template = "\&lt;div id=\"_THIS_errormsg\"\&gt;\&lt;/div\&gt;\&lt;div\&gt;" + 
							"\&lt;a id=\"_THIS_error_showdetails\"\&gt;<xts:string id="IDS_FRAG_ERROR_SHOW_DETAILS" encode="javascript"/>\&lt;/a\&gt; | " + 
							"\&lt;a id=\"_THIS_error_retry\"\&gt;<xts:string id="IDS_FRAG_ERROR_RETRY" encode="javascript"/>\&lt;/a\&gt; | " + 
							"<xts:string id="IDS_FRAG_HIDE_MESSAGE" encode="javascript"><xts:param name="0">\&lt;a id=\"_THIS_error_hide\"\&gt;<out:value-of select="$hide-string"/>\&lt;/a\&gt;</xts:param></xts:string>" + 
							"\&lt;/div\&gt;";
		
						// dummy root
						myfragRoot = new fragment("/", "LAYOUT_EDITOR");
						myfragRoot.setOnloadHandler(ui_init);
		
						_F_init();
						var isReadOnly = <out:value-of select="(/root/cm:queryResponse/cm:queryReply) and not(contains($pagePermissions,'write'))"/>;
					
						divEditor = fragContentDiv("LAYOUT_EDITOReditorcontent");
						if (!isReadOnly)
							divTree = fragContentDiv("LAYOUT_EDITORtreecontent");
					
						myfragEditor = new fragment("/fragments/layout/layoutref.xml", "LAYOUT_EDITOReditor");
						var params = "pagexml=<out:value-of select="xtsext:urlencode(key('env-param', 'pagexml'))" disable-output-escaping="yes"/>";
						params += "&amp;id=<out:value-of select="xtsext:urlencode(/root/cm:queryResponse/cm:queryReply[1]/cm:pagelet/cm:storeID)"/>";
						if (isReadOnly)
							params+="&amp;readonly=true";
						myfragEditor.retrieve(params);
						if (!isReadOnly){
							myfragTree = new fragment("/fragments/layout/portletsref.xml", "LAYOUT_EDITORtree");
							myfragTree.retrieve();
						}

					
						fragResize();
						xAddEventListener(window, "resize", fragResize);

					}
					xAddEventListener(window, "load", fragInit);
		
				</script>
				<div id="myfragdisplay" style="width: 100%; height: 400px;"/>			
			</out:when>
			<out:otherwise>
				<script>
					function getPageletXML()
					{
						//nothing need be done here as in this case there is no fragment 
					}							
				</script>
				<p class="objectNoneFound">
					<xts:string id="IDS_NO_TRAVERSE_PAGELET"/>
				</p>	
			</out:otherwise>
		</out:choose>
	</xsl:template>
	

	<xsl:template name="accessDenied">
		<div style="border:1px #cccccc inset;width:200px;height:200px;text-align:center;vertical-align:middle;padding:10px;">
			<xts:string id="IDS_NO_TRAVERSE_CONTAINER"/>
		</div>
	</xsl:template>
	
	<xsl:template match="*">
		<xsl:copy>
			<xsl:copy-of select="@*"/>
			<xsl:apply-templates/>
		</xsl:copy>
	</xsl:template>	
	
</xsl:stylesheet>