<%@ 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="calendarID">
			<style type="text/css">
			.smallText {
				font-size: xx-small;
			}
			.largeText {
				font-size: xx-large;
			}
			
			.Selecteddayclass {
				background-color: #0087FF;
			}
		</style>
<h:form>	
	<rich:calendar id="calendarID" dataModel="#{calendarDataModel}"
		locale="#{calendarBean.locale}" popup="#{calendarBean.popup}"
		datePattern="#{calendarBean.pattern}"
		preloadDateRangeBegin="#{calendarBean.prDateRangeBegin}"
		preloadDateRangeEnd="#{calendarBean.prDateRangeEnd}"
		weekDayLabels="#{calendarBean.weekDayLabels}"
		weekDayLabelsShort="#{calendarBean.weekDayLabelsShort}" 
		monthLabels="#{calendarBean.monthLabels}"
		monthLabelsShort="#{calendarBean.monthLabelsShort}"
		value="#{calendarBean.selectedDate}"
		currentDate="#{calendarBean.currentDate}"
		jointPoint="#{calendarBean.jointPoint}"
		direction="#{calendarBean.direction}" 
		enableManualInput="#{calendarBean.enableManualInput}"
		showInput="#{calendarBean.showInput}" buttonLabel="#{calendarBean.label}"
		boundaryDatesMode="#{calendarBean.boundary}"
		currentDateChangeListener="#{calendarBean.dcl}"
		valueChangeListener="#{calendarBean.ddd}" reRender="counter"
		inputClass="ic" buttonClass="bc"
		ajaxSingle="#{calendarBean.ajaxSingle}"
		buttonIcon="#{calendarBean.icon}"
		buttonIconDisabled="#{icon.iconFileManagerReject}"
		disabled="#{calendarBean.disabled}"
		bypassUpdates="#{calendarBean.bypassUpdates}"
		height="#{calendarBean.height}"	
		width="#{calendarBean.width}"
		zindex="#{calendarBean.zindex}"
		toolTipMode="#{calendarBean.toolTipMode}"
		scrollMode="#{calendarBean.scrollMode}"
		rendered="#{calendarBean.rendered}" 
		focus="popupModeID"
		timeZone="#{calendarBean.tmZone}"
		required="#{calendarBean.required}"
		requiredMessage="Required Message">
		<f:facet name="optionalHeader">
			<h:outputText value="optionalHeader Facet" />
		</f:facet>
		<f:facet name="optionalFooter">
			<h:outputText value="optionalFooter Facet" />
		</f:facet>
		<f:validator validatorId="org.richfaces.CalendarValidator" />

		<h:panelGrid columns="2">
			<f:verbatim>
				<span style="padding: 2px;">{day}</span>
			</f:verbatim>
			<h:panelGrid>
				<h:outputText styleClass="smallText" value="{data.enLabel}" />
				<h:outputText styleClass="smallText" value="{data.frLabel}" />
				<h:outputText styleClass="smallText" value="{data.deLabel}" />
			</h:panelGrid>
		</h:panelGrid>
	</rich:calendar>

	<h:panelGrid columns="2">
		<h:outputText value="Select Locale:" />
		<h:selectOneRadio onchange="submit()" value="en/US"
			valueChangeListener="#{calendarBean.selectLocale}">
			<f:selectItem itemLabel="US" itemValue="en/US" />
			<f:selectItem itemLabel="DE" itemValue="de/DE" />
			<f:selectItem itemLabel="FR" itemValue="fr/FR" />
			<f:selectItem itemLabel="RU" itemValue="ru/RU" />
		</h:selectOneRadio>
		
		<h:outputText value="Popup Mode:" />
		<h:selectBooleanCheckbox id="popupModeID" value="#{calendarBean.popup}"
			onclick="submit()" />
		
		<h:outputText value="Custom day labels" />
		<h:selectOneRadio valueChangeListener="#{calendarBean.weekDay}"
			onclick="submit()" >
			<f:selectItem itemLabel="none" itemValue="none"/>
			<f:selectItem itemLabel="day labels" itemValue="long"/>	
			<f:selectItem itemLabel="day labels short" itemValue="short"/>
		</h:selectOneRadio>
			
		<h:outputText value="Custom month labels" />
		<h:selectOneRadio valueChangeListener="#{calendarBean.month}"
			onclick="submit()" >
			<f:selectItem itemLabel="none" itemValue="none"/>
			<f:selectItem itemLabel="day labels" itemValue="long"/>	
			<f:selectItem itemLabel="day labels short" itemValue="short"/>
		</h:selectOneRadio>
		
		<h:outputText value="Select Date Pattern:" />
		<h:selectOneMenu value="MMM d, yyyy" onchange="submit()"
			valueChangeListener="#{calendarBean.selectPattern}">
			<f:selectItem itemLabel="d/M/yy" itemValue="d/M/yy" />
			<f:selectItem itemLabel="dd/M/yy" itemValue="dd/M/yy" />
			<f:selectItem itemLabel="d/MMM/y" itemValue="d/MMM/y" />
			<f:selectItem itemLabel="MMM d, yyyy" itemValue="MMM d, yyyy" />
		</h:selectOneMenu>
		
		<h:inputText id="selectdate" />
		<h:commandButton type="button" value="Select Date"
			onclick="$(this.form.id+':calendarID').component.selectDate(this.form[this.form.id+':selectdate'].value);" />
		
		<h:outputText value="Preload date range begin(d.m.y)" />
		<h:inputText value="#{calendarBean.preloadDateRangeBegin}" onchange="submit();"/>
		
		<h:outputText value="Preload date range end(d.m.y)" />
		<h:inputText value="#{calendarBean.preloadDateRangeEnd}" onchange="submit();"/>
		
		<h:outputText value="z-index:" />
		<h:inputText value="#{calendarBean.zindex}">
			<a4j:support event="onchange" reRender="calendarID"></a4j:support>
		</h:inputText>

		<h:outputText value="Height:" />
		<h:inputText value="#{calendarBean.height}">
			<a4j:support event="onchange" reRender="calendarID"></a4j:support>
		</h:inputText>
				
		<h:outputText value="Width:" />
		<h:inputText value="#{calendarBean.width}">
			<a4j:support event="onchange" reRender="calendarID"></a4j:support>
		</h:inputText>
		
		<h:outputText value="reRender (counter):" />				
		<h:outputText id="counter" value="#{calendarBean.counter}" />
		
		<h:outputText value="Required" />
		<h:selectBooleanCheckbox value="#{calendarBean.required}" onclick="submit()"/>
				
		<h:outputText value="Select Popup Joint Point:" />
		<h:selectOneRadio onchange="submit()"
			value="#{calendarBean.jointPoint}"
			valueChangeListener="#{calendarBean.selectJointPoint}">
			<f:selectItem itemLabel="bottom-right" itemValue="bottom-right" />
			<f:selectItem itemLabel="bottom-left" itemValue="bottom-left" />
			<f:selectItem itemLabel="top-right" itemValue="top-right" />
			<f:selectItem itemLabel="top-left" itemValue="top-left" />
		</h:selectOneRadio>
		
		<h:outputText value="Select Popup Direction:" />
		<h:selectOneRadio onchange="submit()"
			value="#{calendarBean.direction}"
			valueChangeListener="#{calendarBean.selectDirection}">
			<f:selectItem itemLabel="bottom-right" itemValue="bottom-right" />
			<f:selectItem itemLabel="bottom-left" itemValue="bottom-left" />
			<f:selectItem itemLabel="top-right" itemValue="top-right" />
			<f:selectItem itemLabel="top-left" itemValue="top-left" />
			<f:selectItem itemLabel="auto" itemValue="auto" />
		</h:selectOneRadio>

		<h:outputText value="Time Zone:" />
		<h:selectOneRadio value="#{calendarBean.timeZone}" onchange="submit();">
			<f:selectItem itemLabel="Eastern European Time" itemValue="Eastern European Time"/> 
			<f:selectItem itemLabel="Turkmenistan Time" itemValue="Turkmenistan Time"/>
			<f:selectItem itemLabel="Korea Standard Time" itemValue="Korea Standard Time"/>
		</h:selectOneRadio>

		
		<h:outputText value="ToolTip Mode:" />
		<h:selectOneRadio value="#{calendarBean.toolTipMode}" onchange="submit();">
			<f:selectItem itemLabel="none" itemValue="none"/> 
			<f:selectItem itemLabel="single" itemValue="single"/>
			<f:selectItem itemLabel="batch" itemValue="batch"/>
		</h:selectOneRadio>

		<h:outputText value="Scroll Mode:" />
		<h:selectOneRadio value="#{calendarBean.scrollMode}" onchange="submit();">
			<f:selectItem itemLabel="client" itemValue="client"/>
			<f:selectItem itemLabel="ajax" itemValue="ajax"/>
		</h:selectOneRadio>
		
		<h:outputText value="BoundaryDatesMode:" />
		<h:selectOneRadio onclick="submit()" value="#{calendarBean.boundary}">
			<f:selectItem itemLabel="inactive" itemValue="inactive" />
			<f:selectItem itemLabel="select" itemValue="select" />
			<f:selectItem itemLabel="scroll" itemValue="scroll" />
		</h:selectOneRadio>
		
		<h:outputText value="EnableManualInput:"></h:outputText>
		<h:selectBooleanCheckbox value="#{calendarBean.enableManualInput}"
			onclick="submit()">
		</h:selectBooleanCheckbox>
		
		<h:outputText value="ShowInput:"></h:outputText>
		<h:selectBooleanCheckbox value="#{calendarBean.showInput}"
			onclick="submit()">
		</h:selectBooleanCheckbox>
		
		<h:outputText value="Disabled:" />
		<h:selectBooleanCheckbox value="#{calendarBean.disabled}" onclick="submit()"/>
		
		<h:outputText value="Rendered:" />
		<h:selectBooleanCheckbox value="#{calendarBean.rendered}" onclick="submit()"/>
		
		<f:verbatim></f:verbatim>
		<h:commandButton action="#{calendarBean.changeIcons}" value="ChangeIcons" />
		
		<h:outputText value="Current date: " />
		<h:outputText value="#{calendarBean.currentDateAsText}" />

		<h:outputText value="Selected date: " />
		<h:outputText value="#{calendarBean.selectedDate}" />
				
		<f:verbatim></f:verbatim>
		<h:commandButton value="Submit" />
		
		<rich:messages showDetail="true"></rich:messages>
	</h:panelGrid>

	<f:verbatim>
		<br />
	</f:verbatim>

	<h:commandLink value="Back" action="main"></h:commandLink>
	</h:form>
</f:subview>	
