<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<xsl:output method="html" indent="yes" encoding="utf-8" doctype-public="-//W3C//DTD HTML 4.0 Transitional//EN"/>
	<xsl:strip-space elements="*"/>

	<xsl:template match="SITEBUILDER-PAGE">
		<xsl:apply-templates select="/SITEBUILDER-PAGE/STATUS" mode="admin"/>
		<xsl:apply-templates select="VIEW-CONTENT"/>
	</xsl:template>

	<xsl:template match="VIEW-CONTENT">
		<xsl:apply-templates/>
	</xsl:template>

	<xsl:template match="SB-CROP">
		<script src='/js/externals/cropper/cropper.js?{$version}.{$build}' type='text/javascript'></script>
		<script type="text/javascript" src="/js/Wizard/Wysiwyg/SbCrop.js?{$version}.{$build}"></script>
		<table cellpadding="0" cellspacing="0" border="0" style="width:100%; height:100%;">
			<tr>
				<td valign="top" style="width:100%; padding-left: 1px;">
					<table border="0" cellpadding="0" cellspacing="0" style="width:100%; height:460px;">
						<tr>
							<td valign="top" width="150px">
								<table cellpadding="0" cellspacing="0" border="0" class="control-title-input">
									<tr>
										<td class="title-block" style="width: 100px; padding-top: 3px;"><xsl:apply-templates select="CONTROL[@NAME='cropLeft']" mode="label"/></td>
										<td class="input-block" style="padding-top: 0;">
											<xsl:apply-templates select="CONTROL[@NAME='cropLeft']" mode="control">
												<xsl:with-param name="size">5</xsl:with-param>
											</xsl:apply-templates>
										</td>
									</tr>
									<tr>
										<td class="title-block" style="width: 100px;"><xsl:apply-templates select="CONTROL[@NAME='cropTop']" mode="label"/></td>
										<td class="input-block">
											<xsl:apply-templates select="CONTROL[@NAME='cropTop']" mode="control">
												<xsl:with-param name="size">5</xsl:with-param>
											</xsl:apply-templates>
										</td>
									</tr>
									<tr>
										<td class="title-block" style="width: 100px;"><xsl:apply-templates select="CONTROL[@NAME='cropWidth']" mode="label"/></td>
										<td class="input-block">
											<xsl:apply-templates select="CONTROL[@NAME='cropWidth']" mode="control">
												<xsl:with-param name="size">5</xsl:with-param>
											</xsl:apply-templates>
										</td>
									</tr>
									<tr>
										<td class="title-block" style="width: 100px;"><xsl:apply-templates select="CONTROL[@NAME='cropHeight']" mode="label"/></td>
										<td class="input-block">
											<xsl:apply-templates select="CONTROL[@NAME='cropHeight']" mode="control">
												<xsl:with-param name="size">5</xsl:with-param>
											</xsl:apply-templates>
										</td>
									</tr>
								</table>

								<table cellpadding="0" cellspacing="0" border="0" class="control-input-title">
									<tr>
										<td class="input-block">
											<xsl:apply-templates select="CONTROL[@NAME='lockAspectRatio']" mode="control"/>
										</td>
										<td class="title-block"><xsl:apply-templates select="CONTROL[@NAME='lockAspectRatio']" mode="label"/></td>
									</tr>
								</table>
							</td>
							<td style="padding: 0px 2px 3px 8px;" align="center">
								<table cellpadding="0" cellspacing="0" border="0"  style="width: 100%; height: 100%;">
									<tr>
										<td align="center">
											<xsl:apply-templates select="IMAGE"/>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td valign="top" style="padding: 5px 0 0 10px;">
					<xsl:call-template name="OK-CANCEL-BUTTONS">
						<xsl:with-param name="okAction">self.sbCropObject.ok();</xsl:with-param>
						<xsl:with-param name="cancelAction">self.sbCropObject.close();</xsl:with-param>
						<xsl:with-param name="cancelblockstyle">padding-right: 0;</xsl:with-param>
					</xsl:call-template>
				</td>
			</tr>
		</table>
		<script type="text/javascript" language="javascript">
			InitSbCrop();
		</script>
	</xsl:template>

	<xsl:template match="SB-CROP/IMAGE">
		<div>
			<xsl:attribute name="style">
				<xsl:choose>
					<xsl:when test="$browserEngine='MSIE'">
						 height: 100%;
					</xsl:when>
					<xsl:otherwise>
						height: 460px;
					</xsl:otherwise>
				</xsl:choose>
				width: 800px; overflow: auto; border: 1px solid #D6D6D6; background-color:#EFEFEF;
			</xsl:attribute>
			<div id="sbCropImageContainer">
				<img id="sbCropImage" src="{.}" width="{@WIDTH}" height="{@HEIGHT}" sbsavedsrc="{.}"/>
			</div>
		</div>
	</xsl:template>

</xsl:stylesheet>