<?xml version="1.0" encoding="UTF-8"?>
<f:template
	xmlns:f="http:/jsf.exadel.com/template"
	xmlns:c=" http://java.sun.com/jsf/core"
	xmlns:ui=" http://ajax4jsf.org/cdk/ui"
	xmlns:u=" http://ajax4jsf.org/cdk/u"
	xmlns:x=" http://ajax4jsf.org/cdk/x"
	xmlns:h=" http://ajax4jsf.org/cdk/headers"
	xmlns:vcp=" http://ajax4jsf.org/cdk/vcp"
	class="org.richfaces.renderkit.html.ModalPanelRenderer"
	baseclass="org.richfaces.renderkit.ModalPanelRendererBase"
	component="org.richfaces.component.UIModalPanel"
	>

	<h:styles>
		/org/richfaces/renderkit/html/css/modalPanel.xcss
	</h:styles>
	<h:scripts>
		new org.ajax4jsf.javascript.PrototypeScript(),
		/org/richfaces/renderkit/html/scripts/utils.js,
		/org/richfaces/renderkit/html/scripts/modalPanel.js,
		/org/richfaces/renderkit/html/scripts/modalPanelBorders.js,
		/org/richfaces/renderkit/html/scripts/browser_info.js
	</h:scripts>

	<f:clientid var="clientId"/>

	<div id="#{clientId}"
		style="display: none;"
		>

		<f:call name="checkOptions" />
		<f:call name="initializeResources" />

		<input type="hidden" id="#{clientId}OpenedState" name="#{clientId}OpenedState" />
		
		<div id="#{clientId}Container"
		style="position: absolute; display: none; z-index: #{component.zindex}; background-color: inherit;"
		class="rich-modalpanel #{component.attributes['styleClass']}"
		x:passThruWithExclusions="id,style,class,styleClass"
		>
			<div class="dr-mpnl-mask-div rich-mpnl-mask-div" id="#{clientId}Div"
				style="z-index: 1;"></div>
			<div class="dr-mpnl-mask-div rich-mpnl-mask-div" id="#{clientId}CursorDiv"
				style="filter: alpha(opacity=1); opacity: 0.01; z-index: -200"></div>

			<div id="#{clientId}CDiv" class="dr-mpnl-panel rich-mpnl_panel" style="width: 1px; height: 1px; z-index: 2;">

				<jsp:scriptlet>
					<![CDATA[
						if (component.isResizeable()) {
							for (int i = 0; i < RESIZERS.length; i++) {
								variables.setVariable("resizer", RESIZERS[i]);

								boolean isHor = i / 3 % 2 == 0;
								String style = isHor ? "width: 40px; height: 4px;" : "height: 40px; width: 4px;";

								//higher z-index for corner elements
								style += "z-index: " + (i % 3 == 1 ? 0 : 1) + 3 + ";";
								variables.setVariable("resizerStyle", style);
					]]>
				</jsp:scriptlet>
					<div id="#{clientId}Resizer#{resizer}" class="dr-mpnl-resizer rich-mpnl-resizer" style="#{resizerStyle}">
					</div>
				<jsp:scriptlet>
					<![CDATA[
							}
						}
					]]>
				</jsp:scriptlet>

				<div id="#{clientId}ShadowDiv" class="dr-mpnl-shadow rich-mpnl-shadow"
					style="#{component.shadowStyle}" >
			   	</div>

				<div style="position: absolute; overflow: hidden; z-index: 2; #{component.attributes['style']}"
						class="dr-mpnl-pnl" id="#{clientId}ContentDiv">
						
					<a href="#" class="dr-mpnl-pnl-a" id="#{clientId}FirstHref" >_</a>
			        <table style="height: 100%; width: 100%;" border="0" cellpadding="0" cellspacing="0">
						<jsp:scriptlet>
							<![CDATA[if(component.getFacet("header")!=null && component.getFacet("header").isRendered()) {]]>
						</jsp:scriptlet>
				        	<tr style="height: 1%;">
								<td class="dr-mpnl-header rich-mpnl-header-cell" style="position: relative; vertical-align: middle; z-index: 5;" width="100%">
									<jsp:scriptlet>
										<![CDATA[if(component.getFacet("controls")!=null && component.getFacet("controls").isRendered()) {]]>
									</jsp:scriptlet>
										<div style="float:right; padding-top: 3px; padding-right: 3px" class="dr-mpnl-pnl-text rich-mpnl-text rich-mpnl-controls #{component.attributes['controlsClass']}">
			 					           <u:insertFacet name="controls" />
										</div>
									<jsp:scriptlet>
										<![CDATA[}]]>
									</jsp:scriptlet>
									
									<div id="#{clientId}Header" style="white-space: nowrap;" class="dr-mpnl-pnl-text dr-mpnl-pnl-h rich-mpnl-text rich-mpnl-header #{component.attributes['headerClass']}">
		 					           <u:insertFacet name="header" />
									</div>
									
								</td>
				        	</tr>
						<jsp:scriptlet>
							<![CDATA[}]]>
						</jsp:scriptlet>
				        	<tr style="height: 99%">
				        		<td class="dr-mpnl-pnl-b rich-mpnl-body" valign="top">
									<vcp:body>
										<f:call name="renderChildren" />
									</vcp:body>
									<f:clientid var="clientId"/>
							        <a href="#" class="dr-mpnl-pnl-a" id="#{clientId}LastHref" >_</a>
				        		</td>
				        	</tr>
			        </table>
				</div>
			</div>

			<script type="text/javascript">
				new ModalPanel('#{clientId}',
				{
					width: #{component.width},
					height: #{component.height},

					minWidth: #{component.minWidth},
					minHeight: #{component.minHeight},

					resizeable: #{component.resizeable},
					moveable: #{component.moveable},

					left: "#{component.left}",
					top: "#{component.top}",

					zindex: #{component.zindex},
					
					onshow: #{onshow},
					onhide: #{onhide},
					
					keepVisualState: #{component.keepVisualState},
					showWhenRendered: #{component.showWhenRendered},
					selectBehavior: "#{component.tridentIVEngineSelectBehavior}",

					autosized: #{component.autosized}
				});
			</script>
		</div>
	</div>
	<script type="text/javascript" >
		#{this:getShowScript(context, component)}
	</script>
</f:template>
