<%@ 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"%>
<style>
 .panel {
  vertical-align:top;
 }
 .rich-panel-header {
  color:#F00 !important;
 
 }
 .top {
 width:200px !important;height:100px !important;
 }
 .hea {
  color:#FCC !important;
 }
 .bo {
  color:#F00 !important;
 }
 
 .top2 {
 width:200px !important;height:100px !important;
 border:2px solid #4C9600 !important;
 background-color:#E4FFC8 !important;
 }
 
 
.hea2 {
  background-image : url() !important;
  background-color : #4C9600 !important;
  height:18px !important;
  text-align:center !important;
  vertical-align:middle !important;
  color:#CFF !important;
  padding:4px 0 !important;
 }
 
 .bo2 {
  color:#4C9600;
 }
 .bo3 {
  height:100px;
  overflow:auto;
 }
 
</style>
<f:subview id="Panel2ID">

	<h:panelGrid columnClasses="panel" border="0" columns="3">
		<rich:panel styleClass="top">
			<f:facet name="header">
				<h:panelGroup>
					<h:outputText escape="false" value="dsdsdsdsd <br />sdsd" />

				</h:panelGroup>
			</f:facet>
			<h:outputText escape="false" value="This is <b>default</b> panel. content here" />

		</rich:panel>

		<rich:panel styleClass="top" headerClass="hea" bodyClass="bo">
			<f:facet name="header">
				<h:outputText value="Header of the Panel" />
			</f:facet>
			<h:outputText value="This panel contains custom headerClass and bodyClass" />

		</rich:panel>

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

		</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>
					<h:outputText value="Base on the previous layout, but form element and javascript behaviour are added" />
					<f:verbatim>
						<br />
					</f:verbatim>
					<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">
			<h:outputText value="This is a panel without the header" />

		</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>
		<h:outputText escape="false" value="  This is a panel with absolute position on the screen.<br />
    Resize the browser's window for fun." />

	</rich:panel>
	</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>
	<h:form>
		<h:commandLink value="Back to Panel" action="BackP"></h:commandLink>
	</h:form>
</f:subview>

