<%@ 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"%>
<script type="text/javascript">
function multiply(height,width){
	var tbody = document.getElementById('tbodyID');
	var trs     = tbody.getElementsByTagName('TR');
	var y = parseInt(height);
	var x = parseInt(width);	
	trs[1].innerHTML = 'modalPanel\'s size: ' + x*y + ' px*px';
	return false;	
}
</script>
<style>
.rich-mpnl-mask-div {
	background-color: #fae6b0;
}
</style>

<!-- %@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%-->

<f:subview id="modalPanelSubviewID">

	<h:selectOneMenu value="#{richBean.srcContainer}" onchange="submit();">
		<f:selectItems value="#{richBean.listContainer}" />
	</h:selectOneMenu>

	<rich:modalPanel id="modalPanelID"
		binding="#{modalPanel.htmlModalPanel}"
		visualOptions="#{modalPanel.visualOptions}" left="#{modalPanel.left}"
		top="#{modalPanel.top}" 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}"
		shadowDepth="#{modalPanel.shadowDepth}"
		shadowOpacity="#{modalPanel.shadowOpacity}"
		showWhenRendered="#{modalPanel.showWhenRendered}"
		controlsClass="#{style.controlsClass}"
		headerClass="#{style.headerClass}" styleClass="#{style.styleClass}"
		onhide="#{event.onhide}" onmaskclick="#{event.onmaskclick}"
		onmaskcontextmenu="#{event.onmaskcontextmenu}"
		onmaskdblclick="#{event.onmaskdblclick}"
		onmaskmousedown="#{event.onmaskmousedown}"
		onmaskmousemove="#{event.onmaskmousemove}"
		onmaskmouseout="#{event.onmaskmouseout}"
		onmaskmouseover="#{event.onmaskmouseover}"
		onmaskmouseup="#{event.onmaskmouseup}" onmove="#{event.onmove}"
		onresize="#{event.onresize}" onshow="#{event.onshow}">
		<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>
		<br />
		<br />
		<div style="FONT-WEIGHT: bold;">rich:findComponent</div>
		<h:panelGrid columns="2" id="findComponentID">
		<tbody id="tbodyID">		
			<tr>
				<td>
				<a4j:commandLink value="getSize" reRender="findID" onclick="javascript:multiply(#{rich:findComponent('modalPanelID').height},#{rich:findComponent('modalPanelID').width});"></a4j:commandLink>
				</td>
			</tr>
			<tr>
				<td>
				<h:outputText/>
				</td>
			</tr>
			</tbody>
		</h:panelGrid>
		<br />
		<h:outputText value="This is Modal Panel example" styleClass="text1" />
		<h:selectOneMenu value="#{richBean.srcContainer}" onchange="submit();">
			<f:selectItems value="#{richBean.listContainer}" />
		</h:selectOneMenu>
		<applet code="ArcTest.class" width="400" height="400"
			codebase="http://java.sun.com/applets/jdk/1.4/demo/applets/ArcTest/"
			alt="Your browser understands the &lt;APPLET&gt; tag but isn't running the applet, for some reason.">

			Your browser is completely ignoring the &lt;APPLET&gt; tag! </applet>
		<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>
		<rich:spacer width="20" height="20"></rich:spacer>

		<a4j:commandButton value="submit" onclick="submit"></a4j:commandButton>
		<h:outputLink value="http://www.jboss.com/">
			<f:verbatim>Link</f:verbatim>
		</h:outputLink>

		<f:verbatim>
			<br />
			<br />
		</f:verbatim>

		<a4j:commandLink
			onclick="Richfaces.showModalPanel('modalPanel2ID');return false;"
			value="show ModalPanel 2">
		</a4j:commandLink>
		<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>

	<rich:modalPanel id="modalPanel2ID"
		visualOptions="#{modalPanel.visualOptions}" left="#{modalPanel.left}"
		top="#{modalPanel.top}" minHeight="#{modalPanel.minHeight}"
		minWidth="#{modalPanel.minWidth}" height="550" width="850"
		moveable="false" resizeable="false"
		keepVisualState="#{modalPanel.keepVisualState}"
		rendered="#{modalPanel.rendered}" zindex="#{modalPanel.zindex}"
		autosized="#{modalPanel.autosized}"
		shadowDepth="#{modalPanel.shadowDepth}"
		shadowOpacity="#{modalPanel.shadowOpacity}"
		showWhenRendered="#{modalPanel.showWhenRendered}"
		controlsClass="#{style.controlsClass}"
		styleClass="#{style.styleClass}" onhide="#{event.onhide}"
		onmaskclick="#{event.onmaskclick}"
		onmaskcontextmenu="#{event.onmaskcontextmenu}"
		onmaskdblclick="#{event.onmaskdblclick}"
		onmaskmousedown="#{event.onmaskmousedown}"
		onmaskmousemove="#{event.onmaskmousemove}"
		onmaskmouseout="#{event.onmaskmouseout}"
		onmaskmouseover="#{event.onmaskmouseover}"
		onmaskmouseup="#{event.onmaskmouseup}" onmove="#{event.onmove}"
		onresize="#{event.onresize}" onshow="#{event.onshow}">
		<br />
		<h:inputText value="input"></h:inputText>
		<br />
		<h:outputLink
			onclick="Richfaces.hideModalPanel('modalPanel2ID');return false;"
			value="Close">
			<f:verbatim>Close</f:verbatim>
		</h:outputLink>
		<rich:pickList id="pickListID" value="#{pickList.value}"
			showButtonsLabel="#{pickList.showButtonLabels}"
			valueChangeListener="#{pickList.valueChangeListener}"
			controlClass="#{style.controlClass}" listClass="#{style.listClass}"
			style="#{style.style}" styleClass="#{style.styleClass}"
			copyAllControlLabel="#{pickList.copyAllControlLabel}"
			copyControlLabel="#{pickList.copyControlLabel}"
			disabled="#{pickList.copyControlLabel}"
			immediate="#{pickList.immediate}"
			listsHeight="#{pickList.listsHeight}"
			moveControlsVerticalAlign="#{pickList.moveControlsVerticalAlign}"
			removeAllControlLabel="#{pickList.removeAllControlLabel}"
			removeControlLabel="#{pickList.removeControlLabel}"
			rendered="#{pickList.rendered}"
			sourceListWidth="#{pickList.sourceListWidth}"
			title="#{pickList.title}" switchByClick="#{pickList.switchByClick}"
			targetListWidth="#{pickList.targetListWidth}"
			required="#{pickList.required}"
			requiredMessage="#{pickList.requiredMessage}"
			onclick="#{event.onclick}" ondblclick="#{event.ondblclick}"
			onkeydown="#{event.onkeydown}" onkeypress="#{event.onkeypress}"
			onkeyup="#{event.onkeyup}" onmousedown="#{event.onmousedown}"
			onmousemove="#{event.onmousemove}" onmouseout="#{event.onmouseout}"
			onmouseover="#{event.onmouseover}" onmouseup="#{event.onmouseup}"
			binding="#{pickList.myPickList}">
			<f:selectItem itemValue="selectItem" itemLabel="selectItem" />
			<f:selectItem itemValue="selectItem 1" itemLabel="selectItem 1" />
			<f:selectItem itemValue="selectItem 2" itemLabel="selectItem 2" />
			<f:selectItems value="#{pickList.data}" />
		</rich:pickList>
		<br />
		<a4j:commandButton reRender="pickListTargetID" value="refresh target"></a4j:commandButton>
		<h:dataTable id="pickListTargetID" value="#{pickList.value}"
			var="list" border="1">
			<h:column>
				<h:outputText value="#{list}"></h:outputText>
			</h:column>
		</h:dataTable>
	</rich:modalPanel>

	<rich:modalPanel id="_panel" minHeight="100" minWidth="200"
		moveable="true">
		<f:facet name="header">
			<h:outputText value="Events..." />
		</f:facet>
		<f:facet name="controls">
			<h:graphicImage value="/pics/error.gif"
				onclick="Richfaces.hideModalPanel('_panel');" />
		</f:facet>

		<h:outputText value="Eventsaaaaaaaaaaaaaaaa ..." />
		<rich:calendar popup="true" />
	</rich:modalPanel>
	<a onclick="Richfaces.showModalPanel('modalPanelID');" href="#">Show
	MP</a>
	<br />
	<a4j:commandLink
		onclick="Richfaces.showModalPanel('modalPanel2ID');return false;"
		value="show ModalPanel 2">
	</a4j:commandLink>

	<f:verbatim>
		<br />
		<br />
	</f:verbatim>

	<h:graphicImage value="/pics/info.gif">
		<rich:componentControl event="onclick" for="_panel" operation="show"></rich:componentControl>
	</h:graphicImage>
	<br />
	<br />
	<h:graphicImage value="/pics/warn.gif">
	</h:graphicImage>
	<f:verbatim>
		<br />
		<br />
	</f:verbatim>
	<div id="idDiv1"
		style="position: relative; font-size: 50px; z-index: 2; color: navy">
	z-index1 <rich:componentControl attachTo="idDiv1" event="onclick"
		for="modalPanelID" operation="show"></rich:componentControl></div>
	<br />
	<div id="idDiv2"
		style="position: relative; font-size: 50px; z-index: 2; color: navy">
	z-index2 <rich:componentControl attachTo="idDiv2" event="onclick"
		for="modalPanelID" operation="hide"></rich:componentControl></div>
</f:subview>
