<%@ 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="panel2SubviewID">
    	<h:panelGrid columnClasses="panel" border="0" columns="3">
			<rich:panel styleClass="top">
				<f:facet name="header">
					<h:panelGroup>
						<f:verbatim>dsdsdsdsd<br />sdsd </f:verbatim>
					</h:panelGroup>

				</f:facet>

				<f:verbatim>This is <b>default</b> panel. content here</f:verbatim>
			</rich:panel>
			<rich:panel styleClass="top" headerClass="hea" bodyClass="bo">
				<f:facet name="header">
					<h:outputText value="Header of the Panel" />
				</f:facet>
				<f:verbatim>This panel contains custom headerClass and bodyClass</f:verbatim>
			</rich:panel>
			<rich:panel styleClass="top2" headerClass="hea2" bodyClass="bo2">
				<f:facet name="header">
					<h:outputText value="Header of the Panel" />
				</f:facet>
				<f:verbatim> This panel also contains custom headerClass and bodyClass. The background is not a 3D anymore.</f:verbatim>
			</rich:panel>

			<h:panelGroup>
				<h:form>
					<rich:panel
						onmouseover="document.getElementById(this.id+'_header').style.background='#60BA01';document.getElementById(this.id+'_body').style.background='#F4FFF8'"
						onmouseout="document.getElementById(this.id+'_header').style.background='#4C9600';document.getElementById(this.id+'_body').style.background='#E4FFC8'"
						style="width:200px;" headerClass="hea2" bodyClass="bo3">
						<f:facet name="header">
							<h:outputText value="Header of the Panel" />
						</f:facet>
						<f:verbatim>Base on the previous layout, but form element and javascript behaviour are added</f:verbatim>
						<br />
						<h:inputText />
					</rich:panel>
				</h:form>
			</h:panelGroup>

			<rich:panel style="width:200px;" headerClass="hea" bodyClass="bo3">
				<f:facet name="header">
					<h:outputText value="Scrolling Text Panel" />
				</f:facet>
				<f:verbatim>
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				     Long Text Long Text Long Text
				 </f:verbatim>
			</rich:panel>

			<rich:panel styleClass="top">
				<f:verbatim>This is a panel without the header</f:verbatim>

			</rich:panel>
		</h:panelGrid>
		<rich:panel style="position: absolute; top: 116px; right: 100px; "
			styleClass="top">
			<f:facet name="header">
				<h:outputText value="Header of the Panel" />
			</f:facet>
			<f:verbatim>
			    This is a panel with absolute position on the screen.<br />
			    Resize the browser's window for fun.
		    </f:verbatim>
		</rich:panel>
		<rich:panel style="width:#{panel.width};height:#{panel.height}">
			<f:facet name="header">
				<f:verbatim>
		      		Test<br />
		      		Test<br />
		      		Test<br />
				</f:verbatim>
			</f:facet>
			<h:form>
				<h:outputText value="inside the form" />
			</h:form>
		</rich:panel>
</f:subview>
