<?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:x=" http://ajax4jsf.org/cdk/x"
	baseclass="org.richfaces.renderkit.OrderingListRendererBase"
	class="org.richfaces.renderkit.html.OrderingListRenderer"
	component="org.richfaces.component.UIOrderingList"
	>
	
	<jsp:directive.page import="org.richfaces.component.util.HtmlUtil" />

	<h:styles>css/orderingList.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
	</h:scripts>
	
	<f:clientId var="clientId"/>
	
    <div id="#{clientId}" class="rich-ordering-list-ds #{component.attributes['styleClass']}" x:passThruWithExclusions="id,class,styleClass">
    	<input id="#{clientId}focusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" />
		
		<table id="#{clientId}table" cellpadding="0" cellspacing="0" class="rich-ordering-list-body">
			<tbody>
				<tr style="#{this:getCaptionDisplay(context, component)}" >
					<td colspan="2" class="rich-ordering-list-caption">
						<f:call name="encodeCaption"/>
					</td>
				</tr>
				<tr>
					<td>
						<div id="#{clientId}headerBox" class="rich-ordering-list-output">
							<jsp:scriptlet><![CDATA[
			                	String contentContainerStyle = "";
			                	
			                	String listWidthValue = (String) component.getAttributes().get("listWidth");
			                	if (listWidthValue != null) {
			                		contentContainerStyle = contentContainerStyle.concat("width:").concat(HtmlUtil.qualifySize(listWidthValue)).concat(";");
			                		variables.setVariable("contentContainerStyle", contentContainerStyle);
		                		}
			                	if (isHeaderExists(context, component)) {
                			]]></jsp:scriptlet>
							<div class="rich-ordering-list-header" style="#{contentContainerStyle}">
								<table id="#{clientId}internal_header_tab" class="rich-ordering-list-items-header" cellpadding="0" cellspacing="0">
									<f:call name="encodeHeader"/>
								</table>
							</div>
							<jsp:scriptlet><![CDATA[
			                	}
								String listHeightValue = (String) component.getAttributes().get("listHeight");
			                	if (listHeightValue != null) {
			                		contentContainerStyle = contentContainerStyle.concat("height:").concat(HtmlUtil.qualifySize(listHeightValue)).concat(";");
			                		variables.setVariable("contentContainerStyle", contentContainerStyle);
			                	}
                			]]></jsp:scriptlet>
							<div id="#{clientId}contentBox" class="rich-ordering-list-content" style="#{contentContainerStyle}">
								<table id="#{clientId}internal_tab" class="rich-ordering-list-items" cellpadding="0" cellspacing="0">
									<tbody id="#{clientId}tbody">
										<vcp:body>
											<f:call name="encodeRows" />
										</vcp:body>
									</tbody>
								</table>
							</div>
						</div>
					</td>
					<td class="rich-ordering-list-button-valign">
						<div class="rich-ordering-list-button-layout">
							<f:call name="encodeControlsFacets" />
						</div>
						<f:clientId var="clientId"/>
					</td>
				</tr>
			</tbody>
		</table>
		
	<f:clientId var="cId"/>		
	<script type="text/javascript">
		var clientId = '#{cId}';
		Event.onReady(function() {
			var cotrolsIdPrefix = [['up', 'disup'], ['down', 'disdown'], ['last', 'dislast'], ['first','disfirst']];
			var shuttle = new Richfaces.OrderingList('#{cId}', '#{cId}internal_tab', '#{cId}internal_header_tab', '#{cId}focusKeeper', cotrolsIdPrefix, '#{cId}sortLabel', #{this:getAsEventHandler(context, component, "onorderchanged")}, Richfaces.OrderingListSelectItem);
			var layoutManager = new LayoutManager('#{clientId}internal_header_tab', '#{clientId}internal_tab');
			layoutManager.widthSynchronization();
		});
		//setTimeout(init, 0);
	</script>
	</div> 
</f:root>