<?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(),
	/org/richfaces/renderkit/html/scripts/jquery/jquery.js,
	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");
		   	value = getConvertedStringValue(context, component,value);
		}	
		String fieldLabel = getSelectedItemLabel(context, component);
	   	String fieldValue = (String)value;
	  
	   	if (value == null || value.equals("")) {
	   		fieldValue = "";
	   	}
	   	
	   	 
	   	String encodedFieldValue = encodeValue(fieldValue);
	   	
	   	variables.setVariable("fieldLabel", fieldLabel);
	   	variables.setVariable("fieldValue", fieldValue);
	   	variables.setVariable("encodedFieldValue", encodedFieldValue);
	   	
	   	String saveIcon =  (String)component.getAttributes().get("saveControlIcon");
	   	if (saveIcon != null && saveIcon.length() != 0 ) {
	   	 	variables.setVariable("saveIcon", getResource(saveIcon).getUri(context, component));
	   	}
	   	
	   	String cancelIcon =  (String)component.getAttributes().get("cancelControlIcon");
	   	if (cancelIcon != null && cancelIcon.length() != 0 ) {
	   	 	variables.setVariable("cancelIcon", getResource(cancelIcon).getUri(context, component));
	   	}

	   	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 #{component.attributes['viewClass']}"  x:passThruWithExclusions="id,styleClass,class" style="zoom: 1; #{component.attributes['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="zoom: 1; #{component.attributes['style']}">
<jsp:scriptlet>
	} 	
</jsp:scriptlet>	  
	<input id="#{clientId}inplaceTmpValue" 
			   type="text"
			   style='clip:rect(0px 0px 0px 0px)' 
			   value="#{fieldLabel}" 
			   autocomplete="off"
			   maxlength='#{component.attributes["inputMaxLength"]}'
			   readonly="readonly"
			   class="rich-inplace-select-field"
			   onselect='#{component.attributes["onselect"]}'
			   onblur='#{component.attributes["oninputblur"]}'
			   onfocus='#{component.attributes["oninputfocus"]}'
			   onclick='#{component.attributes["oninputclick"]}'
			   ondblclick='#{component.attributes["oninputdblclick"]}'
			   onkeydown='#{component.attributes["oninputkeydown"]}'
			   onkeypress='#{component.attributes["oninputkeypress"]}'
			   onkeyup='#{component.attributes["oninputkeyup"]}'
			   onmousedown='#{component.attributes["oninputmousedown"]}'
			   onmousemove='#{component.attributes["oninputmousemove"]}'
			   onmouseout='#{component.attributes["oninputmouseout"]}'
			   onmouseover='#{component.attributes["oninputmouseover"]}'
			   onmouseup='#{component.attributes["oninputmouseup"]}'
			   
			   />
		<input id="#{clientId}inselArrow" readonly="readonly" type="Text" value="" class="rich-inplace-select-arrow" style='display:none;'/>
		<input id='#{clientId}inplaceValue' name='#{clientId}' type='hidden' value='#{fieldValue}'
			   onchange='#{component.attributes["onchange"]}'>
		</input>
	<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; width: 1px">		
			<input id="#{clientId}ok" type="image" src="#{saveIcon}" 
				   class="rich-inplace-select-control #{controlClass}" 
				   onmousedown="this.className='rich-inplace-select-control-press #{controlPressedClass}'" 
				   onmouseout="this.className='rich-inplace-select-control #{controlClass}'" 
				   onmouseup="this.className='rich-inplace-select-control #{controlClass}'"
				   onmouseover="this.className='rich-inplace-select-control #{controlHoverClass}'"/>
			<input id="#{clientId}cancel" type="image" src="#{cancelIcon}" 
				   class="rich-inplace-select-control #{controlClass}" 
				   onmousedown="this.className='rich-inplace-select-control-press #{controlPressedClass}'" 
				   onmouseout="this.className='rich-inplace-select-control #{controlClass}'" 
				   onmouseup="this.className='rich-inplace-select-control #{controlClass}'"
				   onmouseover="this.className='rich-inplace-select-control #{controlHoverClass}'"
				   />
		</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; z-index:1000;">
			<div class="rich-inplace-select-list-shadow">
				<!-- TODO welcome magic numbers! -->
				<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">
						<c:object type="java.util.List" var="items" value="#{this:encodeItems(context,component)}">
						</c:object>
					</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-view 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,items)}, null, 
																 								'#{clientId}inplaceTmpValue', 'shadow#{clientId}', 0, 0, #{encodedFieldValue}), 
																	'#{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"]},
																	  closeOnSelect: true}, 
																	 {oneditactivation : #{this:getAsEventHandler(context, component, "oneditactivation")}, 
							  										 onviewactivation : #{this:getAsEventHandler(context, component, "onviewactivation")}, 
							  										 oneditactivated : #{this:getAsEventHandler(context, component, "oneditactivated")}, 
							  										 onviewactivated : #{this:getAsEventHandler(context, component, "onviewactivated")},
							  										 onchange : #{this:getAsEventHandler(context, component, "onchange")}}, 
																	Richfaces.InplaceSelect.CLASSES, 
																	['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons', '#{clientId}btns_shadow'], '#{clientId}inselArrow');
			</script>
	</div>
		
<jsp:scriptlet>
	if(isEmptyDefaultLabel(convertToString(variables.getVariable("fieldLabel")))) {
		writer.write(convertToString(variables.getVariable("fieldLabel")));
	} else {
		writer.writeText(convertToString(variables.getVariable("fieldLabel")),null);
	}	
	
	if (!layout.equals("inline")) {	
</jsp:scriptlet>
		</div>
<jsp:scriptlet>
	} else {	
</jsp:scriptlet>
		</span>
<jsp:scriptlet>
	} 	
</jsp:scriptlet>

</f:root>	 
