<%@ 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="tabPanelID">
	<h:form>
		<rich:tabPanel id="tabPanelId" headerAlignment="#{tabPanel.headerAlignment}" width="#{tabPanel.width}" height="#{tabPanel.height}"
			rendered="#{tabPanel.rendered}" title="#{tabPanel.title}" switchType="#{tabPanel.switchType}" headerSpacing="#{tabPanel.headerSpacing}"
			selectedTab="#{tabPanel.selectedTab}" activeTabClass="#{tabPanel.activeTabStyle}" disabledTabClass="#{tabPanel.disabledTabStyle}"
			inactiveTabClass="#{tabPanel.inactiveTabStyle}" contentClass="#{tabPanel.contentStyle}">
			<rich:tab id="tab1" labelWidth="#{tabPanel.labelWidth}" label="#{tabPanel.label}">
				<h:outputText value="This is tab panel test example" styleClass="text1"></h:outputText>
			</rich:tab>
			<rich:tab id="tab2" label="Tab with image" disabled="#{tabPanel.disabledTab}">
				<f:facet name="header">
					<h:outputText value="client switchType from facet" />
				</f:facet>
				<f:facet name="openMarker">
					<h:graphicImage value="/pics/ajax_process.gif"></h:graphicImage>
				</f:facet>
				<f:facet name="closeMarker">
					<h:graphicImage value="/pics/ajax_stoped.gif"></h:graphicImage>
				</f:facet>
				<h:graphicImage value="/pics/masshtaby_01.jpg" width="560" height="383"></h:graphicImage>
			</rich:tab>
			<rich:tab id="tab3" label="Tab with some text" disabled="#{tabPanel.disabledTab}">
				<f:verbatim>
					Some text... Some text...  Some text... Some text... Some text... Some text... Some text... Some text...
    				Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... 
    				Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text...
				   	Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text...
				   	Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text...
				   	Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text...
				</f:verbatim>
			</rich:tab>
		</rich:tabPanel>
		<rich:spacer height="20px"></rich:spacer>

		<h:panelGrid columns="2" cellspacing="10px">
			<h:outputText value="Width (px or %):"></h:outputText>
			<h:inputText value="#{tabPanel.width}">
				<a4j:support event="onchange" reRender="tabPanelId"></a4j:support>
			</h:inputText>

			<h:outputText value="Height (px or %):"></h:outputText>
			<h:inputText value="#{tabPanel.height}">
				<a4j:support event="onchange" reRender="tabPanelId"></a4j:support>
			</h:inputText>

			<h:outputText value="Title:"></h:outputText>
			<h:inputText value="#{tabPanel.title}">
				<a4j:support event="onchange" reRender="tabPanelId"></a4j:support>
			</h:inputText>

			<h:outputText value="LabelWidth:"></h:outputText>
			<h:inputText value="#{tabPanel.labelWidth}">
				<a4j:support event="onchange" reRender="tabPanelId"></a4j:support>
			</h:inputText>

			<h:outputText value="SwitchType:"></h:outputText>
			<h:selectOneRadio value="#{tabPanel.switchType}">
				<f:selectItem itemLabel="client" itemValue="client" />
				<f:selectItem itemLabel="server" itemValue="server" />
				<f:selectItem itemLabel="ajax" itemValue="ajax" />
				<a4j:support event="onchange" reRender="tabPanelId"></a4j:support>
			</h:selectOneRadio>

			<h:outputText value="Header Alignment:"></h:outputText>
			<h:selectOneRadio value="#{tabPanel.headerAlignment}">
				<f:selectItem itemLabel="left" itemValue="left" />
				<f:selectItem itemLabel="center" itemValue="center" />
				<f:selectItem itemLabel="right" itemValue="right" />
				<a4j:support event="onchange" reRender="tabPanelId"></a4j:support>
			</h:selectOneRadio>

			<h:outputText value="Header Spacing:"></h:outputText>
			<h:inputText value="#{tabPanel.headerSpacing}">
				<a4j:support event="onchange" reRender="tabPanelId"></a4j:support>
			</h:inputText>

			<h:outputText value="Selected Tab:"></h:outputText>
			<h:selectOneRadio value="#{tabPanel.selectedTab}">
				<f:selectItem itemLabel="1" itemValue="tab1" />
				<f:selectItem itemLabel="2" itemValue="tab2" />
				<f:selectItem itemLabel="3" itemValue="tab3" />
				<a4j:support event="onchange" reRender="tabPanelId"></a4j:support>
			</h:selectOneRadio>

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

			<h:outputText value="Disable Tab"></h:outputText>
			<h:selectBooleanCheckbox value="#{tabPanel.disabledTab}" onclick="submit()">
			</h:selectBooleanCheckbox>
			<h:outputText value="Switch Styles:" />
			<h:commandButton action="#{tabPanel.doStyles}" value="#{tabPanel.btnLabel}" />


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

