{namespace form=TYPO3\Form\ViewHelpers}
{namespace m=TYPO3\Media\ViewHelpers}
<f:layout name="TYPO3.Form:Field" />
<f:section name="field">
	<form:form.uploadedImage property="{element.identifier}" as="image">
		<div id="{element.uniqueIdentifier}-uploadfields"{f:if(condition:image, then: ' style="display:none"')}>
			<f:form.upload property="{element.identifier}.resource" id="{element.uniqueIdentifier}" class="{element.properties.elementClassAttribute}" />
			<f:if condition="{image}">
				<div class="clearfix">
					<a class="btn small" href="#" onclick="return !disableUpload('{element.uniqueIdentifier}')">Cancel</a>
				</div>
			</f:if>
		</div>
		<f:if condition="{image}">
			<div id="{element.uniqueIdentifier}-preview">
				<a href="{m:uri.image(image: image, maximumWidth: 50)}" rel="lightbox">
					<m:image image="{image}" maximumWidth="250" maximumHeight="500" alt="uploaded image" />
				</a>
				<div class="clearfix">
					<a class="btn small" href="#" onclick="return !enableUpload('{element.uniqueIdentifier}')">Replace Image</a>
				</div>
			</div>
		</f:if>
		<script type="text/javascript">
		//<![CDATA[
			var resourcePointers = [];
			function enableUpload(property) {
				document.getElementById(property + '-preview').style.display = 'none';
				document.getElementById(property + '-uploadfields').style.display = 'block';
				resourcePointers[property] = document.getElementById(property + '-resourcePointer').value;
				document.getElementById(property + '-resourcePointer').value = '';
				return true;
			}
			function disableUpload(property) {
				document.getElementById(property + '-preview').style.display = 'block';
				document.getElementById(property + '-uploadfields').style.display = 'none';
				document.getElementById(property + '-resourcePointer').value = resourcePointers[property];
				return true;
			}
		//]]></script>
	</form:form.uploadedImage>
</f:section>