<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<xsl:strip-space elements="*"/>
	<xsl:output method="html" indent="yes" encoding="utf-8"/>

	<xsl:variable name="blockModuleSettingsFrameId">blockModuleSettingsFrame</xsl:variable>
	<xsl:variable name="blockModuleSettingsDialogId">blockModuleSettings</xsl:variable>

	<xsl:template match="EDITOR-AREA">
		<td  valign="top" style="width: 100%; height: 100%">
			<xsl:apply-templates select="BLOCK-MODULE-SETTINGS" />
			<script type="text/javascript" src="/js/Wizard/modules_drag_and_drop.js?{$version}.{$build}"></script>
			<script type="text/javascript" src="/js/session.js?{$version}.{$build}"></script>
			<script type="text/javascript" language="javascript">
				<xsl:comment>
				self.sbSession = new SbSession('<xsl:value-of select="/SITEBUILDER-PAGE/PROPERTIES/SESSION/@NAME"/>', '<xsl:value-of select="/SITEBUILDER-PAGE/PROPERTIES/SESSION/@VALUE"/>');
				//</xsl:comment>
			</script>
			<xsl:apply-templates select="WYSIWYG"/>
		</td>
		<xsl:call-template name="MODULE-ICON-LIST-PANEL" />
	</xsl:template>

	<xsl:template name="MODULE-ICON-LIST-PANEL">
		<xsl:if test="MODULE-ICON-LIST">
			<td valign="top" class="sb-edit-panel">
				<table style="height:100%;" cellpadding="0" cellspacing="0">
					<tr>
						<td style="height: 100%;" class="sb-edit-panel-showbackground" id="RightPanelDiv_Bar">
							<div id="ButtonHideTree" onclick="toggleRightPanel('{$skinPath}/images/right.gif', '{$skinPath}/images/left.gif');" align="center" style="width: 21px; height: 100%; border: 0px solid #7D7D7D; float: left; cursor: hand; cursor: pointer;">
								<img id="RightPanelDiv_bullet" class="sb-edit-panel-arrow" style="border-width:0px;"><xsl:attribute name="src"><xsl:value-of select="$skinPath"/>/images/<xsl:choose>
											<xsl:when test="MODULE-ICON-LIST/@IS-OPENED='yes'">right</xsl:when>
											<xsl:otherwise>left</xsl:otherwise>
										</xsl:choose>.gif</xsl:attribute></img><br />
								<img id="RightPanelDiv_Text" style="border-width:0px;" src="/localizedimage.php?text="/>
								<script type="text/javascript" language="javascript">
									<xsl:choose>
										<xsl:when test="MODULE-ICON-LIST/@IS-OPENED='yes'">$('RightPanelDiv_Text').src += encodeURIComponent(SbGetLocaleByKey('HIDE-AVAILABLE-MODULES'));</xsl:when>
										<xsl:otherwise>$('RightPanelDiv_Text').src += encodeURIComponent(SbGetLocaleByKey('SHOW-AVAILABLE-MODULES'));</xsl:otherwise>
									</xsl:choose>
								</script>

								<!--<img id="RightPanelDiv_border" src="{$skinPath}/{$skinPath}/images/leftpanel_border_hide.png" style="border-width:0px;" />-->
							</div>
						</td>
						<td>
							<div id="RightPanelDiv">
								<xsl:attribute name="style">height: 100%; display: <xsl:choose>
									<xsl:when test="MODULE-ICON-LIST/@IS-OPENED='yes'">block</xsl:when>
									<xsl:otherwise>none</xsl:otherwise>
								</xsl:choose>;</xsl:attribute>
								<xsl:call-template name="MODULE-ICON-LIST" />
							</div>
						</td>
					</tr>
				</table>
				<input type="hidden" id="RightPanelDiv_hidden">
					<xsl:attribute name="value">
						<xsl:choose>
							<xsl:when test="MODULE-ICON-LIST/@IS-OPENED='yes'">false</xsl:when>
							<xsl:otherwise>true</xsl:otherwise>
						</xsl:choose>
					</xsl:attribute>
				</input>
			</td>
		</xsl:if>
	</xsl:template>

	<xsl:template name="MODULE-ICON-LIST">
		<table cellpadding="0" cellspacing="0" width="135" border="0" style="height:100%;">
			<tr>
				<td valign="top">
					<table style="height:100%; width:100%"  border="0">
						<tr align="center" >
							<td style="padding-top:10px; height:30px">
								<b class="sb-text">
									<xsl:value-of select="MODULE-ICON-LIST/@TITLE"/>
								</b><br />
								<img src="{$skinPath}/images/line.gif" style="border-width:0px;" />
							</td>
						</tr>
						<tr align="center">
							<td valign="top" id="ModulePanel_Td">
								<div id="ModulePanel_Div" style="display: none; overflow: auto; white-space: nowrap; user-select: none; -moz-user-select: none;">
									<xsl:apply-templates select="MODULE-ICON-LIST/MODULE-ICON" />
								</div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<script>initModulePanel();</script>

	</xsl:template>

	<xsl:template match="MODULE-ICON">
		<xsl:variable name="MODULENAME">
			<xsl:text>module_</xsl:text><xsl:value-of select="@CODE"/>
		</xsl:variable>

			<span style="vertical-align:middle;" class="TreeNodeIcon">
				<xsl:attribute name="title"><xsl:value-of select="@NAME"/></xsl:attribute>
				<xsl:attribute name="id">doubleClick_<xsl:value-of select="$MODULENAME"/></xsl:attribute>
				<table border="0">
					<tr align="center">
  						<td>
							<div>
								<xsl:attribute name="id"><xsl:value-of select="$MODULENAME"/></xsl:attribute>

								<img border="0" width='32px' height='32px'>
									<xsl:attribute name="src"><xsl:value-of select="@SRC"/></xsl:attribute>
								</img>
							</div>
						</td>
					</tr>
					<tr align="center">
						<td class="sb-text">
							<span>
								<xsl:value-of select="@NAME"/>
							</span>
						</td>
					</tr>
				</table>
			</span>
		   <table border="0">
				<tr align="center">
					<td>
						<img border="0" src='{$skinPath}/images/line.gif'  width=' 65px ' height=' 1px ' /></td>
				</tr>
				<tr align="center">
					<td >
						<span class="sb-text"></span>
					</td>
				</tr>
			</table>
		<script type="text/javascript" language="javascript">
			<xsl:comment>
				var module = document.getElementById('<xsl:value-of select="$MODULENAME"/>');
				makeDraggable(module, '<xsl:value-of select="@CODE"/>');

				$('doubleClick_<xsl:value-of select="$MODULENAME"/>').observe('dblclick', function(event){
					if ($(Event.element(event)).hasClassName('TreeNodeIcon')) {
						containerElement = $(Event.element(event));
					} else {
						containerElement = $(Event.element(event)).up('.TreeNodeIcon');
					}

					moduleName = containerElement.id.replace(/^doubleClick_module_/, '');
					insertNewBlockModule(moduleName);
				});
			//</xsl:comment>
		</script>
	</xsl:template>

	<xsl:template match="BLOCK-MODULE-SETTINGS">
		<xsl:call-template name="MODAL-FORM">
			<xsl:with-param name="formName" select="$blockModuleSettingsDialogId"/>
			<xsl:with-param name="additionalFormStyle">margin:0px; padding:0px; height:520px; width:640px; display:none;</xsl:with-param>
			<xsl:with-param name="content" select="current()"/>
			<xsl:with-param name="onCloseAction">top.sbBlockModuleEditorDialogObject.hide();</xsl:with-param>
			<xsl:with-param name="showStatus">0</xsl:with-param>
		</xsl:call-template>
		<script type="text/javascript" src="/js/Wizard/BlockModuleEditorDialog.js?{$version}.{$build}"></script>
		<script type="text/javascript" language="javascript">
			<xsl:comment>
				top.sbBlockModuleEditorDialogObject = new SbBlockModuleEditorDialog('<xsl:value-of select="$blockModuleSettingsDialogId"/>', '<xsl:value-of select="$blockModuleSettingsFrameId"/>', '<xsl:value-of select="$blockModuleSettingsFrameId"/>_holder');
			//</xsl:comment>
		</script>
	</xsl:template>

	<xsl:template match="BLOCK-MODULE-SETTINGS" mode="content">
		<script type="text/javascript" src="/js/Wizard/modules_drag_and_drop.js?{$version}.{$build}"></script>
		<script type="text/javascript" src="/js/session.js?{$version}.{$build}"></script>
		<script type="text/javascript" language="javascript">
			<xsl:comment>
			self.sbSession = new SbSession('<xsl:value-of select="/SITEBUILDER-PAGE/PROPERTIES/SESSION/@NAME"/>', '<xsl:value-of select="/SITEBUILDER-PAGE/PROPERTIES/SESSION/@VALUE"/>');
			//</xsl:comment>
		</script>
		<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
			<tr>
				<td id="{$blockModuleSettingsFrameId}_holder">
					<!--<iframe id="{$blockModuleSettingsFrameId}" frameborder="0" allowtransparency="true" style="width:627px;height:486px;overflow:hidden;margin:0px;padding:0px;" scrolling="no" src="/blank.html"></iframe>-->
				</td>
				<!--
				var blockModuleSettingsDialog = document.getElementById('blockModuleSettings');
				this.style.height = blockModuleSettingsDialog.style.height = this.contentWindow.document.body.scrollHeight + this.contentWindow.document.body.scrollTop + 25 + 'px';
				this.style.width = blockModuleSettingsDialog.style.width = this.contentWindow.document.body.scrollWidth  + 'px';-->
			</tr>
		</table>
	</xsl:template>

</xsl:stylesheet>
