<%@ 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="panelID">
			<h:form>
		<h:messages></h:messages>
    	<h:outputText value="Panel 1, rendered: #{!panel.rendered}; Panel 2, rendered #{panel.rendered};"></h:outputText>
   
       	<rich:panel rendered="#{!panel.rendered}" id="p1" style="width:#{panel.width};height:#{panel.height};overflow:auto;">
			<f:facet name="header"><h:outputText id="t1" value="#{panel.title[0]} &nbsp; (Panel 1)" /></f:facet>
	      		
      		<rich:panel>
				<f:facet name="header"><h:outputText id="t2" value="#{panel.title[1]}" /></f:facet>
	   				<h:panelGrid columns="2">
	   					<h:outputText id="o1" value="width #{panel.title[2]}, eg. 250px"></h:outputText>
	   					<h:inputText value="#{w}"><a4j:support event="onchange" reRender="p3"></a4j:support></h:inputText>
	   					
	   					<h:outputText id="o2" value="height #{panel.title[2]}, eg. 200px"></h:outputText>
	  					<h:inputText value="#{h}"><a4j:support event="onchange" reRender="p3"></a4j:support></h:inputText>
	   				</h:panelGrid>
	   			
	   			<rich:panel id="p3" style="width:#{w};height:#{h};overflow:auto;">
	     				<f:facet name="header"><h:outputText id="t3" value="#{panel.title[2]}" /></f:facet>
					<h:graphicImage value="/pics/asus.jpg" width="150" height="100"></h:graphicImage>	
	   			</rich:panel>
	      	</rich:panel>
	   	</rich:panel>
	      	
		<rich:panel onmousedown="alert('OnMouseDown');" id="panelId" onclick="submit()"
			rendered="#{panel.rendered}"
			style="width:#{panel.width};height:#{panel.height}" >
     	 	<f:verbatim>
     	 		This is panel 2 example...
     	 	</f:verbatim>
      	</rich:panel>

	  	<h:panelGrid columns="2" cellpadding="10px" >
			<h:outputText value="Title"></h:outputText>
			<h:inputText valueChangeListener="#{panel.makeTitle}">
				<a4j:support event="onchange" reRender="t1,t2,t3,o1,o2"></a4j:support>
			</h:inputText> 
			
			<h:outputText value="Width: "></h:outputText>
			<h:inputText value="#{panel.width}" >
			<a4j:support event="onchange" reRender="panelId,p1"></a4j:support>
			</h:inputText>

			<h:outputText value="Height:  "></h:outputText>
			<h:inputText value="#{panel.height}" >
				<a4j:support event="onchange" reRender="panelId,p1"></a4j:support>
			</h:inputText>

			<h:outputText value="Rendered:"></h:outputText>
			<h:selectBooleanCheckbox value="#{panel.rendered}" onclick="submit()"></h:selectBooleanCheckbox>
		</h:panelGrid>
		<h:commandLink value="Sample 2" action="Sample2"></h:commandLink>
		<br/>
		<h:commandLink value="Back" action="main"></h:commandLink>
	</h:form>
	</f:subview>

