<%@ 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="modalPanelSubviewID">
	<h:messages />		
	<rich:modalPanel id="modalPanelID" minHeight="#{modalPanel.minHeight}" minWidth="#{modalPanel.minWidth}"
		height="#{modalPanel.height}" width="#{modalPanel.width}" moveable="#{modalPanel.moveable}"
		resizeable="#{modalPanel.resizeable}" keepVisualState="#{modalPanel.keepVisualState}"
		rendered="#{modalPanel.rendered}" zindex="#{modalPanel.zindex}" autosized="#{modalPanel.autosized}" left="#{modalPanel.left}"
		top="#{modalPanel.top}" shadowDepth="#{modalPanel.shadowDepth}" shadowOpacity="#{modalPanel.shadowOpacity}"
		showWhenRendered="#{modalPanel.showWhenRendered}" onhide="showEvent('onhideInputID', 'onhide work!')"
		onshow="showEvent('onshowInputID', 'onshow work!')">
		<f:facet name="header">
			<h:outputText value="Heder goes here..." />
		</f:facet>
		<f:facet name="controls">
			<h:graphicImage value="/pics/error.gif" onclick="Richfaces.hideModalPanel('modalPanelID');return false;" />
		</f:facet>
		<h:outputText value="This is Modal Panel example" styleClass="text1" />
		<h:inputText value="#{modalPanel.inputTextTest}" />
		<h:selectOneListbox value="#{modalPanel.selectOneListboxTest}">
			<f:selectItem itemLabel="1" itemValue="1" />
			<f:selectItem itemLabel="2" itemValue="2" />
			<f:selectItem itemLabel="3" itemValue="3" />
		</h:selectOneListbox>
		
		<f:verbatim>
			<br />
			<br />
		</f:verbatim>
		<h:outputLink onclick="Richfaces.hideModalPanel('modalPanelID');return false;" value="Close">
			<f:verbatim>Close</f:verbatim>
		</h:outputLink>
	</rich:modalPanel>

	<a onclick="Richfaces.showModalPanel('modalPanelID');" href="#">Show MP</a>
	
	<f:verbatim> 
		<br />
		<br />
	</f:verbatim>
	
	<h:graphicImage value="/pics/info.gif" onclick="Richfaces.showModalPanel('modalPanelID');" />
	<f:verbatim> 
		<br />
		<br />
	</f:verbatim>
	<div style="position: relative; font-size: 50px; z-index: 2; color: navy">z-index</div>
	
</f:subview>
