<%@ 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:spacer height="10" width="10"></rich:spacer>
		<h:outputLink
			onclick="Richfaces.showModalPanel('modalPanelID2');return false;"
			value="Show">
			<f:verbatim>Show 2nd MP</f:verbatim>
		</h:outputLink>

	</rich:modalPanel>

	<a onclick="Richfaces.showModalPanel('modalPanelID');" href="#">Show
	MP</a>
	<br>
	<a onclick="Richfaces.showModalPanel('modalPanelID3');" href="#">Show
	MP #3</a>

	<rich:modalPanel id="modalPanelID2" height="415" width="1131"
		autosized="true" resizeable="false" moveable="false" zindex="2000"
		minHeight="415" minWidth="1131">
		<f:facet name="header">
			<h:outputText value="Header of the 2nd modal panel" />
		</f:facet>
		<h:outputText value="Some text for the 2nd modal Panel" />
		<rich:spacer height="10" width="10"></rich:spacer>
		<h:outputLink
			onclick="Richfaces.hideModalPanel('modalPanelID2');return false;"
			value="Close">
			<f:verbatim>Close</f:verbatim>
		</h:outputLink>
	</rich:modalPanel>

	<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>

	<rich:modalPanel id="modalPanelID3" resizeable="false" autosized="true"
		minHeight="10" moveable="true">
		<f:facet name="header">
			<a4j:outputPanel ajaxRendered="true">
				<h:outputText value="modal panel" />
			</a4j:outputPanel>
		</f:facet>

		<f:facet name="controls">
			<a4j:outputPanel ajaxRendered="true">
				<h:outputLink
					onclick="Richfaces.hideModalPanel('modalPanelID3');return false;"
					value="Close" style="cursor:pointer">
					<f:verbatim>Close</f:verbatim>
				</h:outputLink>
			</a4j:outputPanel>
		</f:facet>

		<a4j:outputPanel id="modalView">
			<a4j:include id="includeModals"
				viewId="/Panel/Panel.jsp" />
		</a4j:outputPanel>		
		</rich:modalPanel>
</f:subview>
