<%@ 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/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<f:subview id="ddMenuID">
<h:form>
	<h:panelGrid columns="3">
		<h:panelGrid columns="2">
			<h:outputText value="HideDelay (ms):" />
			<h:inputText value="#{dDMenu.hideDelay}">
				<a4j:support event="onchange" reRender="ddmId" />
			</h:inputText>

			<h:outputText value="ShowDelay (ms):" />
			<h:inputText value="#{dDMenu.showDelay}">
				<a4j:support event="onchange" reRender="ddmId" />
			</h:inputText>

			<h:outputText value="PopupWidth (px):" />
			<h:inputText value="#{dDMenu.popupWidth}">
				<a4j:support event="onchange" reRender="ddmId" />
			</h:inputText>

			<h:outputText value="horizontalOffset (px):" />
			<h:inputText value="#{dDMenu.horizontalOffset}">
				<a4j:support event="onchange" reRender="ddmId" />
			</h:inputText>

			<h:outputText value="verticalOffset (px):" />
			<h:inputText value="#{dDMenu.verticalOffset}">
				<a4j:support event="onchange" reRender="ddmId" />
			</h:inputText>
		
			<h:outputText value="Mode:" />
			<h:selectOneRadio value="#{dDMenu.mode}">
				<f:selectItem itemLabel="none" itemValue="none"/>
				<f:selectItem itemLabel="ajax" itemValue="ajax"/>
				<f:selectItem itemLabel="server" itemValue="server"/>
				<a4j:support event="onclick" reRender="ddmId" />
			</h:selectOneRadio>
			
			<h:outputText value="Direction:" />
			<h:selectOneRadio value="#{dDMenu.direction}">
				<f:selectItem itemLabel="top-right" itemValue="top-right" />
				<f:selectItem itemLabel="top-left" itemValue="top-left" />
				<f:selectItem itemLabel="bottom-right" itemValue="bottom-right" />
				<f:selectItem itemLabel="bottom-left" itemValue="bottom-left" />
				<f:selectItem itemLabel="auto" itemValue="auto" />
				<a4j:support event="onclick" reRender="ddmId" />
			</h:selectOneRadio>

				<h:outputText value="GroupDirection:" />
				<h:selectOneRadio value="#{dDMenu.groupDirection}">
					<f:selectItem itemLabel="top-up" itemValue="top-up" />
					<f:selectItem itemLabel="top-down" itemValue="top-down" />
					<f:selectItem itemLabel="bottom-up" itemValue="bottom-up" />
					<f:selectItem itemLabel="bottom-down" itemValue="bottom-down" />
					<f:selectItem itemLabel="auto" itemValue="auto" />
					<a4j:support event="onclick" reRender="ddmId" />
				</h:selectOneRadio>

				<h:outputText value="JointPoint:" />
				<h:selectOneRadio value="#{dDMenu.jointPoint}">
					<f:selectItem itemLabel="top-right" itemValue="tr" />
					<f:selectItem itemLabel="top-left" itemValue="tl" />
					<f:selectItem itemLabel="bottom-right" itemValue="br" />
					<f:selectItem itemLabel="bottom-left" itemValue="bl" />
					<f:selectItem itemLabel="auto" itemValue="auto" />
					<a4j:support event="onclick" reRender="ddmId" />
				</h:selectOneRadio>
			
			<h:outputText value="Menu appearance event:" />
            <h:selectOneRadio value="#{dDMenu.event}" onclick="submit()">
                <f:selectItem itemLabel="onclick" itemValue="onclick"/>
                <f:selectItem itemLabel="onmouseover" itemValue="onmouseover"/>
                <a4j:support event="onclick" reRender="ddmId" />
            </h:selectOneRadio>

			<h:outputText value="Rendered:" />
			<h:selectBooleanCheckbox value="#{dDMenu.rendered}" onclick="submit()">
				
			</h:selectBooleanCheckbox>

			<h:outputText value="Disable some items:" />
			<h:selectBooleanCheckbox value="#{dDMenu.disabled}">
				<a4j:support reRender="ddmId" event="onclick" />
			</h:selectBooleanCheckbox>
			<h:commandButton action="#{dDMenu.changeIcons}" value="ChangeIcons" />
		</h:panelGrid>
		
		<rich:spacer width="300px"></rich:spacer>

		<rich:panel style="width:200px; height:50px;" >
		<rich:dropDownMenu id="ddmId" value="DropDownMenu" 
				hideDelay="#{dDMenu.hideDelay}" direction="#{dDMenu.direction}"
				horizontalOffset="#{dDMenu.horizontalOffset}"
				jointPoint="#{dDMenu.jointPoint}" popupWidth="#{dDMenu.popupWidth}"
				showDelay="#{dDMenu.showDelay}" rendered="#{dDMenu.rendered}" event="#{dDMenu.event}"
				verticalOffset="#{dDMenu.verticalOffset}" styleClass="panelpos">
				<rich:menuItem icon="#{dDMenu.icon}">
					<h:outputText value="Item1" />
				</rich:menuItem>
				<rich:menuSeparator />
				<rich:menuItem icon="#{dDMenu.icon}" onmousedown="alert('OnMouseDown')" selectClass="mousemove">
					<h:outputText value="OnMouseDown" />
				</rich:menuItem>
				<rich:menuSeparator />
				<rich:menuItem  >
					<h:outputText value="Item2" />
				</rich:menuItem>
				<rich:menuItem icon="#{dDMenu.icon}">
					<h:outputText value="Item3" />
				</rich:menuItem>
				<rich:menuSeparator />
				<rich:menuItem icon="/pics/ajax_process.gif" iconDisabled="/pics/ajax_stoped.gif" disabled="#{dDMenu.disabled}">
					<h:outputText value="Image"></h:outputText>
				</rich:menuItem>
				<rich:menuItem disabled="#{dDMenu.disabled}" icon="#{dDMenu.icon}" >
					<h:outputText value="Image:" />
					<h:graphicImage value="/pics/ajax_process.gif" />
				</rich:menuItem>
				<rich:menuSeparator />
				<rich:menuGroup value="Second level" 
					direction="#{dDMenu.groupDirection}" disabled="#{dDMenu.disabled}" icon="#{dDMenu.icon}" iconFolder="#{dDMenu.iconFolder}">
					<rich:menuItem icon="#{dDMenu.icon}">
						<h:outputText value="Item3" />
					</rich:menuItem>
					<rich:menuItem value="Item4">
							<h:selectOneMenu value="#{dDMenu.selectMenu}">
								<f:selectItem itemLabel="Honda Accord" itemValue="accord" />
								<f:selectItem itemLabel="Toyota 4Runner" itemValue="4runner" />
								<f:selectItem itemLabel="Nissan Z350" itemValue="nissan-z" />
							</h:selectOneMenu>
					</rich:menuItem>
					<rich:menuSeparator />
					<rich:menuItem icon="#{dDMenu.icon}">
						<h:outputText value="Checkbox " />
						<h:selectBooleanCheckbox value="#{dDMenu.check}" onclick="submit()" />
					</rich:menuItem>
				</rich:menuGroup>
			</rich:dropDownMenu>
		</rich:panel>	
	</h:panelGrid>
</h:form>
</f:subview>

