<?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.InplaceSelectBaseRenderer"
	class="org.richfaces.renderkit.html.InplaceSelectRenderer"
	component="org.richfaces.component.UIInplaceSelect">

<h:styles>css/inplaceselect.xcss</h:styles>  
	
<h:scripts>
	new org.ajax4jsf.javascript.PrototypeScript(),
	scripts/comboboxUtils.js,
	scripts/combolist.js,
	scripts/inplaceinput.js,
	scripts/inplaceselectlist.js,
	scripts/inplaceselect.js,
	/org/richfaces/renderkit/html/scripts/utils.js
</h:scripts>

<f:clientid var="clientId" />
<f:resource var="saveIcon" name="org.richfaces.renderkit.html.images.SaveControlIcon"/>
<f:resource var="cancelIcon" name="org.richfaces.renderkit.html.images.CancelControlIcon"/>
<jsp:scriptlet>
		<![CDATA[
		         
		Object value = component.getSubmittedValue(); 
		if(value == null) {
			value = component.getAttributes().get("value");
		}	
		Object fieldValue = value;
       		String fieldLabel = getSelectedItemLabel(context, component);
	   	value = getConvertedStringValue(context, component,value);
	   	
	   	if (value == null || value.equals("")) {
	   		fieldValue = "";
	   	}
	   	variables.setVariable("fieldLabel", fieldLabel);
	   	variables.setVariable("fieldValue", fieldValue);
	   	
	   	/*String saveIcon =  (String)component.getAttributes().get("saveControlIcon");
	   	if (saveIcon != null && saveIcon.length() != 0 ) {
	   		variables.setVariable("saveIcon", saveIcon);
	   	}
	   	
	   	String cancelIcon =  (String)component.getAttributes().get("cancelControlIcon");
	   	if (cancelIcon != null && cancelIcon.length() != 0 ) {
	   		variables.setVariable("cancelIcon", cancelIcon);
	   	}
	   	
	   	String controlClass = (String)component.getAttributes().get("controlClass");
	   	variables.setVariable("controlClass", controlClass);
	   	String controlHoveredClass = (String)component.getAttributes().get("controlHoveredClass"); 
	   	variables.setVariable("controlHoveredClass", controlHoveredClass);
	   	String controlPressedClass = (String)component.getAttributes().get("controlPressedClass"); 
	   	variables.setVariable("controlPressedClass", controlPressedClass);*/
	   	String layout = (String)component.getAttributes().get("layout");
	   	
	   	if (layout != null && layout.length() != 0) {
	   		if (!layout.equals("block")) {
	   			layout = "inline";
	   		}
	   	} else {
   			layout = "inline";
	   	}
	   	
	   	]]>
	</jsp:scriptlet>
<f:resource var="spacer" name="images/spacer.gif"/>
	

<jsp:scriptlet>
	if (layout.equals("inline")) {	
</jsp:scriptlet>
		<span id="#{clientId}" class="rich-inplace-select rich-inplace-select-view"  x:passThruWithExclusions="id,styleClass,class,style">
<jsp:scriptlet>
	} else {	
</jsp:scriptlet>
		<div id="#{clientId}" class="rich-inplace-select rich-inplace-select-view #{component.attributes['viewClass']}"  x:passThruWithExclusions="id,styleClass,class,style">
<jsp:scriptlet>
	} 	
</jsp:scriptlet>	  
	<input id="#{clientId}tabber" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" tabindex='#{component.attributes["tabindex"]}'	/>
	<input id="#{clientId}inplaceTmpValue" 
			   type="text"
			   style='display:none;' 
			   value="#{fieldLabel}" 
			   autocomplete="off"
			   maxlength='#{component.attributes["inputMaxLength"]}'
			   readonly="readonly"
			   class="rich-inplace-select-field"/>
		<input id="#{clientId}inselArrow" readonly="readonly" type="Text" value="" class="rich-inplace-select-arrow" style='display:none;'/>
		<input id='#{clientId}inplaceValue' name='#{clientId}inplaceValue' type='hidden' value='#{fieldValue}'/>
	<div id="#{clientId}bar" class="rich-inplace-select-control-set" style="display:none;">
		<jsp:scriptlet>
				<![CDATA[
				 if (isControlsFacetExists(context, component)) {
				     encodeControlsFacet(context, component);
				 } else {
				]]>
			</jsp:scriptlet>
		<div class="rich-inplace-select-shadow" id="#{clientId}btns_shadow">
			<table cellpadding="0" cellspacing="0" border="0" class="rich-inplace-select-shadow-size">
				<tr>
					<td class="rich-inplace-select-shadow-tl">
						<img src="#{spacer}" width="10" height="1" alt="" border="0"/><br/>
					</td>
					<td class="rich-inplace-select-shadow-tr">
						<img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/>
					</td>
				</tr>
				<tr>
					<td class="rich-inplace-select-shadow-bl">
						<img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/>
					</td>
					<td class="rich-inplace-select-shadow-br">
						<img src="#{spacer}" width="10" height="1" alt="" border="0"/><br/>
					</td>
				</tr>
			</table>
		</div>
		<div id="#{clientId}buttons" style="position : relative">		
			<input id="#{clientId}ok" type="image" src="#{saveIcon}" class="rich-inplace-select-control" onmousedown="this.className='rich-inplace-select-control-press'" onmouseout="this.className='rich-inplace-select-control'" onmouseup="this.className='rich-inplace-select-control'"/>
			<input id="#{clientId}cancel" type="image" src="#{cancelIcon}" class="rich-inplace-select-control" onmousedown="this.className='rich-inplace-select-control-press'" onmouseout="this.className='rich-inplace-select-control'" onmouseup="this.className='rich-inplace-select-control'"/>
		</div>
		
		<jsp:scriptlet>
				<![CDATA[
				 }
				 ]]>
		</jsp:scriptlet>
	</div>
		<div id="listParent#{clientId}" class="rich-inplace-select-width-list" style="display: none; position : absolute; height : 100px; left : 0px; top: 13px">
			<div class="rich-inplace-select-list-shadow">
				<table id="shadow#{clientId}" cellpadding="0" cellspacing="0" border="0" width="257" height="109">
					<tr>
						<td class="rich-inplace-select-shadow-tl">
							<img src="#{spacer}" width="10" height="1" alt="" border="0"/><br/>
						</td>
						<td class="rich-inplace-select-shadow-tr">
							<img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/>
						</td>
					</tr>
					<tr>
						<td class="rich-inplace-select-shadow-bl">
							<img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/>
						</td>
						<td class="rich-inplace-select-shadow-br">
							<img src="#{spacer}" width="10" height="10" alt="" border="0"/><br/>
						</td>
					</tr>
				</table>
			</div>
			<div id="listPosition#{clientId}" class="rich-inplace-select-list-position">
				<div id="listDecoration#{clientId}" class="rich-inplace-select-list-decoration">
					<div id="list#{clientId}" class="rich-inplace-select-list-scroll">
						<f:call name="encodeItems"/>
					</div>
				</div>
			</div>
			<script type="text/javascript">
				Richfaces.InplaceSelect.CLASSES = {
						COMBO_LIST : {
							LIST : {CLASSES :{ACTIVE : "rich-inplace-select-list-scroll rich-inplace-select-list-decoration rich-inplace-select-list-position #{listClass}"
								   }
							},  	  		 	  
							ITEM : {NORMAL : "rich-inplace-select-item rich-inplace-select-font #{itemClass}", 
							    	SELECTED : 'rich-inplace-select-item rich-inplace-select-font rich-inplace-select-selected-item #{itemSelectedClass}'
									}
							},
						COMPONENT : {CHANGED : {NORMAL : 'rich-inplace-select rich-inplace-select-view rich-inplace-select-changed #{component.attributes["changedClass"]}', HOVERED : 'rich-inplace-select-changed-hover #{component.attributes["changedHoverClass"]}'},  
							 		 VIEW : {NORMAL : 'rich-inplace-select rich-inplace-select-view #{component.attributes["viewClass"]}', HOVERED : 'rich-inplace-select-view-hover #{component.attributes["viewHoverClass"]}'}, 
							 		 EDITABLE : 'rich-inplace-select rich-inplace-select-edit #{component.attributes["editClass"]}'
						}
				};
				
									 new Richfaces.InplaceSelect(new Richfaces.InplaceSelectList('list#{clientId}', 'listParent#{clientId}', true, 
																 								 Richfaces.InplaceSelect.CLASSES.COMBO_LIST, '#{component.attributes["listWidth"]}', '#{component.attributes["listHeight"]}', #{this:getItemsTextAsJSArray(context, component)}, null, 
																 								'#{clientId}inplaceTmpValue', 'shadow#{clientId}', 0, 0, '#{fieldValue}'), 
																	'#{clientId}', '#{clientId}inplaceTmpValue', 
																	'#{clientId}inplaceValue', '#{clientId}tabber',
																	 {defaultLabel : '#{component.attributes["defaultLabel"]}', 
								  									  showControls : #{component.attributes["showControls"]},
																	  editEvent : '#{component.attributes["editEvent"]}',
																	  verticalPosition : '#{component.attributes["controlsVerticalPosition"]}',
																	  horizontalPosition : '#{component.attributes["controlsHorizontalPosition"]}',
																	  inputWidth : '#{component.attributes["selectWidth"]}',
																	  minInputWidth : '#{component.attributes["minSelectWidth"]}',
																	  maxInputWidth : '#{component.attributes["maxSelectWidth"]}',
																	  openOnEdit:#{component.attributes["openOnEdit"]}}, 
																	 {oneditactivation : #{this:getAsEventHandler(context, component, "oneditactivation")}, 
							  										 onviewactivation : #{this:getAsEventHandler(context, component, "onviewactivation")}, 
							  										 oneditactivated : #{this:getAsEventHandler(context, component, "oneditactivated")}, 
							  										 onviewactivated : #{this:getAsEventHandler(context, component, "onviewactivated")}}, 
																	Richfaces.InplaceSelect.CLASSES, 
																	['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons', '#{clientId}btns_shadow'], '#{clientId}inselArrow');
			</script>
	</div>
	#{fieldLabel}
	
		
<jsp:scriptlet>
	if (layout.equals("block")) {	
</jsp:scriptlet>
		</div>
<jsp:scriptlet>
	} else {	
</jsp:scriptlet>
		</span>
<jsp:scriptlet>
	} 	
</jsp:scriptlet>

</f:root>	 
