<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<f:subview id="suggestionBoxID">
	<h:form id="suggestionbox_form">

		<f:verbatim>Suggestion Box will suggest you Town's names if it's started with the "a" or
        "A" letter</f:verbatim>
		<f:verbatim>
			<br />
		</f:verbatim>
		<h:inputText id="text" />
		<rich:suggestionbox id="suggestionBoxId" for="text"
			zindex="#{sb.zindex}" rules="#{sb.rules}"
			suggestionAction="#{sb.autocomplete}" var="result"
			width="#{sb.width}" height="#{sb.height}" border="#{sb.border}"
			cellpadding="#{sb.cellpadding}" cellspacing="#{sb.cellspacing}"
			first="#{sb.first}" minChars="#{sb.minchars}" tokens=", ]"
			bgcolor="#{sb.bgColor}" focus="#{sb.forcus}" title="#{result.text}"
			summary="summary" shadowOpacity="#{sb.shadowOpacity}"
			shadowDepth="#{sb.shadowDepth}" selectValueClass="mousemove" rendered="#{sb.reRender}">
			<h:column>
				<h:outputText value="#{result.text}" />
			</h:column>
		</rich:suggestionbox>
		<f:verbatim>
			<div style="position:relative; font-size:50px; z-index:2; color: navy">z-index</div>
		</f:verbatim>
		
		<f:verbatim>
			<br />
			<br />
		</f:verbatim>
		<h:panelGrid columns="2" cellpadding="5px">

			<h:outputText value="z-index (1 or 3)"></h:outputText>
			<h:selectOneRadio value="#{sb.zindex}">
				<f:selectItem itemLabel="1" itemValue="1" />
				<f:selectItem itemLabel="3" itemValue="3" />
				<a4j:support event="onclick" reRender="suggestionBoxId"></a4j:support>
			</h:selectOneRadio>


			<f:verbatim>Border</f:verbatim>
			<h:inputText value="#{sb.border}">
				<a4j:support event="onchange" reRender="suggestionBoxId"></a4j:support>
			</h:inputText>

			<f:verbatim>Width</f:verbatim>
			<h:inputText value="#{sb.width}">
				<a4j:support event="onchange" reRender="suggestionBoxId"></a4j:support>
			</h:inputText>

			<f:verbatim>Height</f:verbatim>
			<h:inputText value="#{sb.height}">
				<a4j:support event="onchange" reRender="suggestionBoxId"></a4j:support>
			</h:inputText>

			<f:verbatim>Cellpadding</f:verbatim>
			<h:inputText value="#{sb.cellpadding}">
				<a4j:support event="onchange" reRender="suggestionBoxId"></a4j:support>
			</h:inputText>

			<f:verbatim>Cellspacing</f:verbatim>
			<h:inputText value="#{sb.cellspacing}">
				<a4j:support event="onchange" reRender="suggestionBoxId"></a4j:support>
			</h:inputText>

			<f:verbatim>First</f:verbatim>
			<h:inputText value="#{sb.first}">
				<a4j:support event="onchange" reRender="suggestionBoxId"></a4j:support>
			</h:inputText>

			<f:verbatim>MinChars</f:verbatim>
			<h:inputText value="#{sb.minchars}">
				<a4j:support event="onchange" reRender="suggestionBoxId"></a4j:support>
			</h:inputText>

			<h:outputText value="Background Colour"></h:outputText>
			<h:selectOneMenu value="#{sb.bgColor}">
				<f:selectItem itemLabel="none" itemValue="none" />
				<f:selectItem itemLabel="aqua" itemValue="aqua" />
				<f:selectItem itemLabel="blue" itemValue="blue" />
				<f:selectItem itemLabel="fuchsia" itemValue="fuchsia" />
				<f:selectItem itemLabel="gray" itemValue="gray" />
				<f:selectItem itemLabel="lime" itemValue="lime" />
				<f:selectItem itemLabel="maroon" itemValue="maroon" />
				<f:selectItem itemLabel="purple" itemValue="purple" />
				<f:selectItem itemLabel="red" itemValue="red" />
				<f:selectItem itemLabel="silver" itemValue="silver" />
				<f:selectItem itemLabel="teal" itemValue="teal" />
				<f:selectItem itemLabel="yellow" itemValue="yellow" />
				<f:selectItem itemLabel="white" itemValue="white" />
				<a4j:support event="onclick" reRender="suggestionBoxId"></a4j:support>
			</h:selectOneMenu>

			<h:outputText value="Shadow Opacity"></h:outputText>
			<h:selectOneRadio value="#{sb.shadowOpacity}">
				<f:selectItem itemLabel="1" itemValue="1" />
				<f:selectItem itemLabel="3" itemValue="2" />
				<f:selectItem itemLabel="5" itemValue="3" />
				<f:selectItem itemLabel="7" itemValue="4" />
				<f:selectItem itemLabel="9" itemValue="5" />
				<f:selectItem itemLabel="11" itemValue="6" />
				<f:selectItem itemLabel="13" itemValue="7" />
				<f:selectItem itemLabel="15" itemValue="8" />
				<a4j:support event="onclick" reRender="suggestionBoxId"></a4j:support>
			</h:selectOneRadio>

			<h:outputText value="Shadow Depth"></h:outputText>
			<h:selectOneRadio value="#{sb.shadowDepth}">
				<f:selectItem itemLabel="3" itemValue="3" />
				<f:selectItem itemLabel="4" itemValue="4" />
				<f:selectItem itemLabel="5" itemValue="5" />
				<f:selectItem itemLabel="6" itemValue="6" />
				<f:selectItem itemLabel="7" itemValue="6" />
				<a4j:support event="onclick" reRender="suggestionBoxId"></a4j:support>
			</h:selectOneRadio>

			<h:outputText value="Render"></h:outputText>
			<h:selectBooleanCheckbox value="#{sb.reRender}" onchange="submit();"></h:selectBooleanCheckbox>
		</h:panelGrid>
		<h:commandLink value="Back" action="main"></h:commandLink>
	</h:form>
</f:subview>

