<?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/browser_info.js,
		/org/richfaces/renderkit/html/scripts/modalPanel.js,
		/org/richfaces/renderkit/html/scripts/modalPanelBorders.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 dr-mpnl-mask-div-opaque rich-mpnl-mask-div" id="#{clientId}Div"
				style="z-index: 1;"
				onclick="#{component.attributes['onmaskclick']}"
				ondblclick="#{component.attributes['onmaskdblclick']}"
				oncontextmenu="#{component.attributes['onmaskcontextmenu']}"
				onmouseup="#{component.attributes['onmaskmouseup']}"
				onmousedown="#{component.attributes['onmaskmousedown']}"
				onmousemove="#{component.attributes['onmaskmousemove']}"
				onmouseover="#{component.attributes['onmaskmouseover']}"
				onmouseout="#{component.attributes['onmaskmouseout']}">
			
				<button class="dr-mpnl-pnl-button" id="#{clientId}FirstHref"></button>
			</div>	

			<div class="dr-mpnl-panel rich-mpnl_panel" >
			<div id="#{clientId}CDiv" style="position: absolute; left: 0px; top: 0px; z-index: 9;">

				<div id="#{clientId}ShadowDiv" class="dr-mpnl-shadow rich-mpnl-shadow"
					style="#{component.shadowStyle}" >
			   	</div>
				
				<c:object var="divClass" type="java.lang.String" />
				<c:object var="tableStyle" type="java.lang.String" />
				
				<jsp:scriptlet>
					<![CDATA[
						if (component.isAutosized()) {
							int minWidth = component.getMinWidth();
							int minHeight = component.getMinHeight();

							int width = component.getWidth();
							int height = component.getHeight();

							if (width < 0 || width < minWidth) {
								width = minWidth;
							}

							if (height < 0 || height < minHeight) {
								height = minHeight;
							}

							tableStyle += "width: " + (width > 0 ? width : 1) + "px;";
							tableStyle += "height: " + (height > 0 ? height : 1) + "px;";

							divClass = "";
							
						} else {
							tableStyle = "height: 100%; width: 100%;";
							/*
							overflow: hidden;
							*/
							divClass = "dr-mpnl-ovf-hd";
							if (component.isTrimOverlayedElements()) {
								/*
								position: relative; 
								z-index: 0;
								*/
								divClass += " dr-mpnl-trim";
							}
						}
					]]>
				</jsp:scriptlet>
				
				<div id="#{clientId}ContentDiv" style="#{component.attributes['style']}" class="#{divClass} dr-mpnl-pnl rich-mp-content">
					<jsp:scriptlet>
						<![CDATA[if(component.getFacet("controls")!=null && component.getFacet("controls").isRendered()) {]]>
					</jsp:scriptlet>
						<div class="dr-mpnl-pnl-text rich-mpnl-text rich-mpnl-controls #{component.attributes['controlsClass']}">
					           <u:insertFacet name="controls" />
						</div>
					<jsp:scriptlet>
						<![CDATA[}]]>
					</jsp:scriptlet>
					
					<table id="#{clientId}ContentTable" style="#{tableStyle}" 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" >
									<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"/>
				        		</td>
				        	</tr>
			        </table>
				</div>

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

								boolean isHor = i % 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>
			</div>
			<div class="dr-mpnl-mask-div dr-mpnl-mask-div-transparent rich-mpnl-mask-div" id="#{clientId}CursorDiv"
				style="z-index: -200;">
				
		        <button class="dr-mpnl-pnl-button" id="#{clientId}LastHref"></button>
			</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},
							
					<f:call name="writeEventHandlerFunction"><f:parameter value="onresize" /></f:call>,
					<f:call name="writeEventHandlerFunction"><f:parameter value="onmove" /></f:call>,
					<f:call name="writeEventHandlerFunction"><f:parameter value="onshow" /></f:call>,
					<f:call name="writeEventHandlerFunction"><f:parameter value="onhide" /></f:call>,
					<f:call name="writeEventHandlerFunction"><f:parameter value="onbeforeshow"/></f:call>,
					<f:call name="writeEventHandlerFunction"><f:parameter value="onbeforehide" /></f:call>,
									
					keepVisualState: #{component.keepVisualState},
					showWhenRendered: #{component.showWhenRendered},
					selectBehavior: "#{component.tridentIVEngineSelectBehavior}",

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