<?xml version="1.0" encoding="UTF-8"?>
<f:root 
	xmlns:f="http://ajax4jsf.org/cdk/template" 
	xmlns:c=" http://java.sun.com/jsf/core" 
	xmlns:ui=" http://ajax4jsf.org/cdk/ui"
	xmlns:u=" http://ajax4jsf.org/cdk/u"
	xmlns:jsp=" http://ajax4jsf.org/cdk/jsp"
	xmlns:x=" http://ajax4jsf.org/cdk/x"
	baseclass="org.richfaces.renderkit.ListShuttleRendererBase"
	class="org.richfaces.renderkit.html.ListShuttleRenderer"
	component="org.richfaces.component.UIListShuttle"
	>
	
	<jsp:directive.page import="org.richfaces.renderkit.OrderingComponentRendererBase" />
	<jsp:directive.page import="org.richfaces.component.util.HtmlUtil" />

	<h:styles>css/listShuttle.xcss</h:styles>  
	
   	<h:scripts>
			new org.ajax4jsf.javascript.PrototypeScript(),
			scripts/ShuttleUtils.js
			scripts/SelectItem.js,
			scripts/LayoutManager.js
			scripts/Control.js,
			scripts/ListBase.js,
			scripts/OrderingList.js,
			scripts/ListShuttle.js
	</h:scripts>
	
	<f:clientId var="clientId"/>
	<table id="#{clientId}" class="rich-list-shuttle #{component.attributes['styleClass']}"
			cellspacing="0" cellpadding="0"
			x:passThruWithExclusions="id, class, styleClass">
		<tbody>
			<vcp:body>
				<f:clientId var="clientId"/>
			
				<jsp:scriptlet>
					<![CDATA[
						SelectionState sourceSelectionState = new SelectionState();     
					    variables.setVariable(SELECTION_STATE_VAR_NAME, sourceSelectionState);
					    String encodedSourceRows = encodeRows(context, component, true);
		
					    SelectionState targetSelectionState = new SelectionState();     
					    variables.setVariable(SELECTION_STATE_VAR_NAME, targetSelectionState);
						String encodedTargetRows = encodeRows(context, component, false);
						
						Boolean switchByClick = (Boolean) component.getAttributes().get("switchByClick");
						variables.setVariable("switchByClick", switchByClick);
					]]>
				</jsp:scriptlet>

				<tr style="#{this:getCaptionDisplay(context, component)}" >
					<td class="rich-list-shuttle-caption" colspan="2">
						<f:call name="encodeSLCaption"/>
					</td>
					<td class="rich-list-shuttle-caption" colspan="2">
						<f:call name="encodeTLCaption"/>
					</td>
				</tr>
				<tr>
					<td>
					    <div class="rich-shuttle-source-items #{component.listClass}">
					    	<input id="#{clientId}focusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;"/>
							
							<table id="#{clientId}table" cellpadding="0" cellspacing="0" class="rich-shuttle-body">
								<tbody>
									<tr>
										<td style="border:0px;padding : 0px;">
											<div id="#{clientId}headerBox" class="rich-shuttle-list">
												<jsp:scriptlet>
													<![CDATA[
									                	String contentContainerStyle = "";
									                	String sourceListWidthValue = (String) component.getAttributes().get("sourceListWidth");
									                	if (sourceListWidthValue != null) {
									                		contentContainerStyle = contentContainerStyle.concat("width:").concat(HtmlUtil.qualifySize(sourceListWidthValue)).concat(";");
									                		variables.setVariable("contentContainerStyle", contentContainerStyle);
								                		}
														if (isHeaderExists(context, component)) {
													]]>
		                						</jsp:scriptlet>
												<div class="rich-shuttle-list-header" style="#{contentContainerStyle}">
													<table id="#{clientId}internal_header_tab" class="rich-shuttle-internal-header-tab" cellpadding="0" cellspacing="0">
														<f:call name="encodeSLHeader"/>
													</table>
												</div>
												<jsp:scriptlet>
													<![CDATA[
														}
														String listHeightValue = (String) component.getAttributes().get("listsHeight");
									                	if (listHeightValue != null) {
									                		contentContainerStyle = contentContainerStyle.concat("height:").concat(HtmlUtil.qualifySize(listHeightValue)).concat(";");
									                		variables.setVariable("contentContainerStyle", contentContainerStyle);
									                	}
	                								]]>
	                							</jsp:scriptlet>
												<div id="#{clientId}contentBox" class="rich-shuttle-list-content" style="#{contentContainerStyle}">
													<table id="#{clientId}internal_tab" class="rich-shuttle-internal-tab" cellpadding="0" cellspacing="0">
														<tbody id="#{clientId}tbody">
															<jsp:scriptlet><![CDATA[
																writer.write(encodedSourceRows);
																encodedSourceRows = null;															
															]]></jsp:scriptlet>
														</tbody>
													</table>
												</div>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div> 
					</td>
					<td style="vertical-align: #{component.moveControlsVerticalAlign};" >
						<div class="rich-shuttle-controls">
							<jsp:scriptlet><![CDATA[
								encodeShuttleControlsFacets(context, component, sourceSelectionState, targetSelectionState);
							]]></jsp:scriptlet>
						</div>
	
					</td>
					<td>
						<div class="rich-shuttle-target-items #{component.listClass}" >
					    	<input type="hidden" value=":" style="display: none;" name="#{clientId}" />
	
					    	<input id="#{clientId}tlFocusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;"/>
							
							<table id="#{clientId}tlTable" cellpadding="0" cellspacing="0" class="rich-shuttle-body">
								<tbody>
									<tr>
										<td style="border:0px;padding : 0px;">
											<div id="#{clientId}tlHeaderBox" class="rich-shuttle-list">
												<jsp:scriptlet>
													<![CDATA[
									                	String trContentContainerStyle = "";
									                	String targetListWidthValue = (String) component.getAttributes().get("targetListWidth");
									                	if (targetListWidthValue != null) {
									                		trContentContainerStyle = trContentContainerStyle.concat("width:").concat(HtmlUtil.qualifySize(targetListWidthValue)).concat(";");
									                		variables.setVariable("trContentContainerStyle", trContentContainerStyle);
								                		}
														if (isHeaderExists(context, component)) {
													]]>
			                					</jsp:scriptlet>
												<div class="rich-shuttle-list-header" style="#{trContentContainerStyle}">
													<table id="#{clientId}tlInternal_header_tab" class="rich-shuttle-internal-header-tab" cellpadding="0" cellspacing="0">
														<f:call name="encodeTLHeader"/>
													</table>
												</div>
												<jsp:scriptlet>
													<![CDATA[
														}
									                	if (listHeightValue != null) {
									                		trContentContainerStyle = trContentContainerStyle.concat("height:").concat(HtmlUtil.qualifySize(listHeightValue)).concat(";");
									                		variables.setVariable("trContentContainerStyle", trContentContainerStyle);
									                	}
		                							]]>
		                						</jsp:scriptlet>
												<div id="#{clientId}tlContentBox" class="rich-shuttle-list-content" style="#{trContentContainerStyle}">
													<table id="#{clientId}tlInternal_tab" class="rich-shuttle-internal-tab" cellpadding="0" cellspacing="0">
														<tbody id="#{clientId}tlTbody">
															<jsp:scriptlet><![CDATA[
																writer.write(encodedTargetRows);
																encodedTargetRows = null;															
															]]></jsp:scriptlet>
														</tbody>
													</table>
												</div>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div> 
					</td>
					<td style="vertical-align: #{component.orderControlsVerticalAlign};" >
						<div class="rich-shuttle-controls">
							<jsp:scriptlet><![CDATA[
								encodeTLControlsFacets(context, component, targetSelectionState);
							]]></jsp:scriptlet>
						</div>

						<script type="text/javascript">
							var clientId = '#{clientId}';
							Event.onReady(function() {
								var cotrolsIdPrefix = [['up', 'disup'], ['down', 'disdown'], ['last', 'dislast'], ['first','disfirst']];
								var listShuttleCotrolsIdPrefix = [['copy', 'discopy'], ['copyAll', 'discopyAll'], ['remove', 'disremove'], ['removeAll','disremoveAll']];
								
								var sourceLayoutManager = new LayoutManager('#{clientId}internal_header_tab', '#{clientId}internal_tab');
								var targetLayoutManager = new LayoutManager('#{clientId}tlInternal_header_tab', '#{clientId}tlInternal_tab');
								
								var listShuttle = new Richfaces.ListShuttle(new Richfaces.ListShuttle.Target('#{clientId}', '#{clientId}tlInternal_tab', '#{clientId}tlInternal_header_tab', '#{clientId}tlFocusKeeper', cotrolsIdPrefix, '#{clientId}sortLabel', #{this:getAsEventHandler(context, component, "onorderchanged")}, Richfaces.ListShuttle.Target.SelectItem), 
																  			new Richfaces.ListShuttle.Source('#{clientId}', '#{clientId}internal_tab', '#{clientId}internal_header_tab', '#{clientId}focusKeeper', undefined, Richfaces.ListShuttle.Source.SelectItem), 
																  			"#{clientId}", listShuttleCotrolsIdPrefix, "#{switchByClick}", sourceLayoutManager, targetLayoutManager, #{this:getAsEventHandler(context, component, "onlistchanged")});
								var sourceLayoutManager = new LayoutManager('#{clientId}internal_header_tab', '#{clientId}internal_tab');
								var targetLayoutManager = new LayoutManager('#{clientId}tlInternal_header_tab', '#{clientId}tlInternal_tab');
								sourceLayoutManager.widthSynchronization();
								targetLayoutManager.widthSynchronization();
							});
							//setTimeout(init, 0);
						</script>
					</td>
				</tr>
			</vcp:body>
		</tbody>
	</table>
</f:root>