<?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.ComboBoxBaseRenderer"
	class="org.richfaces.renderkit.html.ComboBoxRenderer"
	component="org.richfaces.component.UIComboBox"> 
	
	<jsp:directive.page import="org.richfaces.component.util.HtmlUtil" />
	
	<h:styles>css/combobox.xcss</h:styles>
	<h:scripts>
			new org.ajax4jsf.javascript.PrototypeScript(),
			scripts/comboboxUtils.js,
			scripts/combolist.js,
			scripts/combobox.js,
			/org/richfaces/renderkit/html/scripts/utils.js
	</h:scripts>
 
	<f:clientid var="clientId" />
	
	<jsp:scriptlet>
		<![CDATA[
            Boolean directInputSuggestions = (Boolean) component.getAttributes().get("directInputSuggestions");
            variables.setVariable("directInputSuggestions", directInputSuggestions);
            
            Boolean filterNewValues = (Boolean) component.getAttributes().get("filterNewValues");
            variables.setVariable("filterNewValues", filterNewValues);
            
            Boolean disabled = (Boolean) component.getAttributes().get("disabled");
            variables.setVariable("disabled", disabled);
            
            String listHeight = (String) component.getAttributes().get("listHeight");
			if (listHeight == null || listHeight.length() == 0 || listHeight.trim().startsWith("0")) {
				listHeight = "200px";
			} else {
				listHeight = HtmlUtil.qualifySize(listHeight);
			}
			variables.setVariable("listHeight", listHeight);
		
			    	
	    	String width = (String) component.getAttributes().get("width");
	    	String correction = null;
	    	if (width == null || (width.length() == 0) || (width.trim().startsWith("0")) ) {
	    	    width = "150px";
	    	     
	    	} else {
	    		width = HtmlUtil.qualifySize(width);
	    	}
	    	
	    	correction =  width.substring(0,width.indexOf("px"));  
    	    correction = (Integer.parseInt(correction) - 10) + "px";
	    	
	    	variables.setVariable("width", width);
	    	variables.setVariable("correction", correction);
	    	
	    	String listWidth = (String) component.getAttributes().get("listWidth");
	    	
	    	if (listWidth == null || listWidth.length() == 0 || listWidth.trim().startsWith("0")) {
	//    		String listCorrection =  width.substring(0,width.indexOf("px"));  
	//    	    listCorrection = (Integer.parseInt(listCorrection) - 2) + "px";
	    		listWidth = width;	    	   		
	    	} else {
	    		listWidth = HtmlUtil.qualifySize(listWidth);
	    	}
	    	variables.setVariable("listWidth", listWidth);
	    	 
	    	
	    	String inputSize = (String) component.getAttributes().get("inputSize");
	    	variables.setVariable("inputSize", inputSize);
	    	
	    	String defaultLabel = (String) component.getAttributes().get("defaultLabel");
	    	variables.setVariable("defaultLabel", defaultLabel);
	    	
	    	Boolean selectFirstOnUpdate = (Boolean) component.getAttributes().get("selectFirstOnUpdate");
	        variables.setVariable("selectFirstOnUpdate", selectFirstOnUpdate);
	        
			Object value = component.getSubmittedValue();
			if (value == null) {
			    value = component.getAttributes().get("value");    
			}

       		String valueStyle = "rich-combobox-font-inactive";	
	    	value = getConvertedStringValue(context, component,value);
	    	if (value == null || value.equals("")) {
				valueStyle = "rich-combobox-font-disabled";
	    		value = defaultLabel;
	    	}
	    	variables.setVariable("value", value);
			variables.setVariable("valueStyle", valueStyle);

			Object inputStyle = component.getAttributes().get("inputStyle");
	    	variables.setVariable("inputStyle", inputStyle);
	    	
	    	Object inputClass = component.getAttributes().get("inputClass");
	    	if(inputClass!=null && inputClass.equals("")) {
	    		inputClass = null;
	    	}
	    	variables.setVariable("inputClass", inputClass);
	    	
	    	Object inputDisabledStyle = component.getAttributes().get("inputDisabledStyle");
	    	variables.setVariable("inputDisabledStyle", inputDisabledStyle);
	    	
	    	Object inputDisabledClass = component.getAttributes().get("inputDisabledClass");
	    	if(inputDisabledClass!=null && inputDisabledClass.equals("")) {
	    		inputDisabledClass = null;
	    	}
	    	variables.setVariable("inputDisabledClass", inputDisabledClass);
	    	
	    	Object inputInactiveStyle = component.getAttributes().get("inputInactiveStyle");
	    	variables.setVariable("inputInactiveStyle", inputInactiveStyle);
	    	
	    	Object inputInactiveClass = component.getAttributes().get("inputInactiveClass");
	    	if(inputInactiveClass!=null && inputInactiveClass.equals("")) {
	    		inputInactiveClass = null;
	    	}
	    	variables.setVariable("inputInactiveClass", inputInactiveClass);
	    	
	    	
	    	Object buttonInactiveClass = component.getAttributes().get("buttonInactiveClass");
	    	if(buttonInactiveClass!=null && buttonInactiveClass.equals("")) {
	    		buttonInactiveClass = null;
	    	}
	    	variables.setVariable("buttonInactiveClass", buttonInactiveClass);
	    	
	    	Object buttonInactiveStyle = component.getAttributes().get("buttonInactiveStyle");
	    	variables.setVariable("buttonInactiveStyle", buttonInactiveStyle);
	    	
	    	Object buttonDisabledClass = component.getAttributes().get("buttonDisabledClass");
	    	if(buttonDisabledClass!=null && buttonDisabledClass.equals("")) {
	    		buttonDisabledClass = null;
	    	}
	    	variables.setVariable("buttonDisabledClass", buttonDisabledClass);
	    	
	    	Object buttonDisabledStyle = component.getAttributes().get("buttonDisabledStyle");
	    	variables.setVariable("buttonDisabledStyle", buttonDisabledStyle);
	    	
	    	Object buttonClass = component.getAttributes().get("buttonClass");
	    	if(buttonClass!=null && buttonClass.equals("")) {
	    		buttonClass = null;
	    	}
	    	variables.setVariable("buttonClass", buttonClass);
	    	
	    	Object buttonStyle = component.getAttributes().get("buttonStyle");
	    	variables.setVariable("buttonStyle", buttonStyle);
	    	
	    	Object listStyle = component.getAttributes().get("listStyle");
	    	variables.setVariable("listStyle", listStyle);
	    	
	    	Object listClass = component.getAttributes().get("listClass");
	    	if(listClass!=null && listClass.equals("")) {
	    		listClass = null;
	    	}
	    	variables.setVariable("listClass", listClass);
	    	
	      	Object styleClass = component.getAttributes().get("styleClass");
	    	variables.setVariable("styleClass", styleClass);
	    	
	    	Object style = component.getAttributes().get("style");
	    	variables.setVariable("style", style);
	    	
	    	Object itemClass = component.getAttributes().get("itemClass");
	    	if(itemClass!=null && itemClass.equals("")) {
	    		itemClass = null;
	    	}
	    	variables.setVariable("itemClass", itemClass);
	    	
	      	Object itemSelectedClass = component.getAttributes().get("itemSelectedClass");
	    	if(itemSelectedClass!=null && itemSelectedClass.equals("")) {
	    		itemSelectedClass = null;
	    	}
	    	variables.setVariable("itemSelectedClass", itemSelectedClass);
	      	
	    	String buttonIcon = (String)component.getAttributes().get("buttonIcon");
    		if (buttonIcon != null && !buttonIcon.equals("")) {
    			buttonIcon = "url('" + buttonIcon + "')";
    		}
    		variables.setVariable("buttonIcon", buttonIcon);
    		
    		String buttonIconDisabled = (String)component.getAttributes().get("buttonIconDisabled");
    		if (buttonIconDisabled != null && !buttonIconDisabled.equals("")) {
    			buttonIconDisabled = "url('" + buttonIconDisabled + "')";
    		}
    		variables.setVariable("buttonIconDisabled", buttonIconDisabled);
    		
    		String buttonIconInactive = (String)component.getAttributes().get("buttonIconInactive");
    		if (buttonIconInactive != null && !buttonIconInactive.equals("")) {
    			buttonIconInactive = "url('" + buttonIconInactive + "')";
    		}
       		variables.setVariable("buttonIconInactive", buttonIconInactive);
       		variables.setVariable("enableManualInput", !component.isEnableManualInput());
       		
   		
		]]>
    </jsp:scriptlet>
		<f:resource var="spacer" name="images/spacer.gif"/>
<div id="#{clientId}">		
<div id="#{clientId}combobox" class="rich-combobox-font rich-combobox #{styleClass}" style="width:#{listWidth};#{style}"
	 x:passThruWithExclusions="value,name,type,id,styleClass,class,style,size,autocomplete,disabled,onchange">
	<input id="#{clientId}comboboxValue" name="#{clientId}comboboxValue" type="hidden"/>
	<div class="rich-combobox-list-cord"></div>
	<div class="rich-combobox-font rich-combobox-shell" style="width:#{width};z-index:1;">
		<input id="#{clientId}comboboxField" 
					   name="#{clientId}comboboxField" 
					   disabled="#{disabled}" 
					   class="#{valueStyle} rich-combobox-input-inactive  #{inputDisabledClass}" type="text" 
					   value="#{value}" 
					   size="#{inputSize}"
					   readonly="#{enableManualInput}" 
					   onblur="#{component.attributes['onblur']}"
					   style="width:#{correction}; #{inputStyle}"
					   autocomplete="off"
					   />
		<input id="#{clientId}comboBoxButtonBG" 
			   readonly="true" 
			   type="text" 
			   value="" 
			   class="rich-combobox-font-inactive rich-combobox-button-background rich-combobox-button-inactive"/>
		<input id="#{clientId}comboboxButton" readonly="true" disabled="#{disabled}" type="text" value="" style="#{buttonStyle}; background-image: #{buttonIconNormal};" 
					   class="rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive #{buttonDisabledClass}"/>
		<div class="rich-combobox-strut rich-combobox-font" style="width:#{correction}">Strut</div>		   
	</div>
	
	<div id="#{clientId}listParent" class="rich-combobox-list-cord #{listClass}" style="display:none; #{listStyle};z-index: 3;position:absolute;">
		<div class="rich-combobox-shadow">
			<table id="#{clientId}shadow" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td class="rich-combobox-shadow-tl">
						<img src="#{spacer}" width="10" height="1" alt="" border="0"></img><br></br>
					</td>
					<td class="rich-combobox-shadow-tr">
						<img src="#{spacer}" width="1" height="10" alt="" border="0"></img><br></br>
					</td>
				</tr>
				<tr>
					<td class="rich-combobox-shadow-bl">
						<img src="#{spacer}" width="1" height="10" alt="" border="0"></img><br></br>
					</td>
					<td class="rich-combobox-shadow-br">
						<img src="#{spacer}" width="10" height="10" alt="" border="0"></img><br></br>
					</td>
				</tr>
			</table>
		</div>
		<div id="#{clientId}listPosition" class="rich-combobox-list-position">
			<div id="#{clientId}listDecoration" class="rich-combobox-list-decoration">
				<div id="#{clientId}list" class="rich-combobox-list-scroll">
					<f:call name="encodeItems"/>
				</div>
			</div>
		</div>
	</div>
</div>

	<script type="text/javascript">
		Richfaces.ComboBox.CLASSES = {
			BUTTON : {CLASSES :
						 {NORMAL : "rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive  #{buttonInactiveClass}", 
					  	  ACTIVE : "rich-combobox-font rich-combobox-button-icon rich-combobox-button #{buttonClass}", 
						  DISABLED : "rich-combobox-font-disabled rich-combobox-button-icon-disabled rich-combobox-button-disabled #{buttonDisabledClass}",
						  HOVERED : "rich-combobox-button-hovered"},
					  STYLE : 
					  	 {NORMAL: "#{buttonInactiveStyle}",
					  	  ACTIVE: "#{buttonStyle}",
					  	  DISABLED:	"#{buttonDisabledStyle}"}
					  },	 
			BUTTONBG : {CLASSES :
			           	 {NORMAL:"rich-combobox-font-inactive rich-combobox-button-background-inactive rich-combobox-button-inactive", 
                          ACTIVE: "rich-combobox-font rich-combobox-button-background rich-combobox-button",
			           	  DISABLED : "rich-combobox-font-disabled rich-combobox-button-background-disabled rich-combobox-button-disabled"}
			         },    
			BUTTONICON : {STYLE : 
							{NORMAL: "#{buttonIconInactive}",
							 ACTIVE: "#{buttonIcon}",
							 DISABLED: "#{buttonIconDisabled}"}
					  },	 	                 	 	   		   	  
			FIELD : {CLASSES: 
						{NORMAL : "rich-combobox-font-inactive rich-combobox-input-inactive #{inputInactiveClass}", 
			 		 	ACTIVE : "rich-combobox-font rich-combobox-input #{inputClass}", 
			 		 	DISABLED : "rich-combobox-font-disabled rich-combobox-input-disabled #{inputDisabledClass}"},
			 		 STYLE : 	
			 		 	{NORMAL : "#{inputStyle}",
					  	  ACTIVE : "#{inputStyle}",
					  	  DISABLED : "#{inputDisabledStyle}"}
			 		 },	
			COMBO_LIST : {
				LIST : {CLASSES :{ACTIVE : "rich-combobox-list-cord rich-combobox-list-scroll rich-combobox-list-decoration rich-combobox-list-position #{listClass}"},
					    STYLE : {ACTIVE: "#{listStyle}"}
					   },  	  		 	  
				ITEM : {NORMAL : "rich-combobox-item #{itemClass}", 
				    	SELECTED : "rich-combobox-item rich-combobox-item-selected #{itemSelectedClass}"
				}
			}
		}
		
		var combobox = new Richfaces.ComboBox( "#{clientId}", 
							   				   "#{clientId}list", 
							   				   "#{clientId}listParent",
							   				   "#{clientId}comboboxValue",
											   "#{clientId}comboboxField", 
											   "#{clientId}comboboxButton", 
											   "#{clientId}comboBoxButtonBG",
											   "#{clientId}shadow",
											   Richfaces.ComboBox.CLASSES, 
											   "#{listWidth}", "#{listHeight}",
											   #{this:getItemsTextAsJSArray(context, component)}, 
											   #{directInputSuggestions}, 
											   #{filterNewValues}, 
											   #{selectFirstOnUpdate},
											   #{this:getAsEventHandler(context, component, "onlistcall")}, 
											   #{this:getAsEventHandler(context, component, "onselect")},
											   "#{defaultLabel}",
											   #{disabled}, "#{value}", 
											   #{component.attributes["showDelay"]},  #{component.attributes["hideDelay"]});
	</script>
</div>
</f:root>	