<div>
<!--
	Wrap everything in a div to convert this file's content in a jquery element
	so it is possible to use $.find.
-->

<script type="text/template" id="selector-tpl">
	<div id="upront-image-placeholder" class="upfront-image-section">
		<div class="upfront-image-selector-container">

			<h2>{{ l10n.drop_files }}</h2>
			<p>{{ l10n.max_file_size }}</p>
			<ul>
				<li>
					<a class="select-files" href="#">{{ l10n.select_files }}</a>
				</li>
				<!-- {{ l10n.or_browse }} -->
				<li>
					<a class="open-media-gallery" href="#">{{ l10n.media_gallery }}</a>
				</li>
			</ul>
			<!-- <span class="dragimagehand"></span> -->

		</div>
	</div>
</div>
</script>

<script type="text/template" id="progress-tpl">
	<div id="upfront-image-uploading" class="upfront-image-section">
		<h2>{{ l10n.uploading }}</h2>
		<div class="upfront-progress-container">
			<div id="upfront-progress"></div>
		</div>
	</div>
</script>

<script type="text/template" id="editor-tpl">
	<div id="uimage-cover" style="position:absolute; top:{{maskOffset.top}}px; left:{{maskOffset.left}}px; height: {{maskSize.height}}px; width: {{maskSize.width}}px"></div>
	<div id="uimage-canvas" style="position:absolute; overflow:hidden; top:{{offset.top}}px; left:{{offset.left}}px; height: {{size.height}}px; width: {{size.width}}px">
		<img class="uimage-img {{ rotation }}" src="{{src}}" style="width:100%; height:100%; position:absolute">
	</div>

	<div id="uimage-mask" class="image-edit-mask" style="position:absolute; top:{{maskOffset.top}}px; left:{{maskOffset.left}}px; height: {{maskSize.height}}px; width: {{maskSize.width}}px"></div>

	<div id="uimage-drag-handle" style="width:{{size.width}}px; height:{{size.height}}px;position:absolute; top:{{offset.top}}px; left:{{offset.left}}px">
		<div class="image-edit-resize image-edit-control"><i class="ui-resizable-handle ui-resizable-handle-se"></i></div>
		<!-- <div class="image-edit-rotate image-edit-control"><i class=""></i></div> -->
	</div>

	<div id="image-edit-buttons" style="position: absolute; top:{{maskOffset.top}}px; left: {{maskOffset.left + maskSize.width + 5}}px;">
		{[ for (var i = 0; i < buttons.length; i++) { ]}
		<a class="image-edit-button" id="{{buttons[i].id}}" title="{{buttons[i].tooltip}}">{{buttons[i].text}}</a>
		{[ } ]}
	</div>
	<div id="image-edit-buttons-bottom" style="z-index: 11; position: absolute; top:{{maskSize.width < 200 ? maskOffset.top : maskOffset.top + maskSize.height + 5}}px; left:{{maskSize.width < 200 ? maskOffset.left - 205 : maskOffset.left}}px; width: 200px" class="{{maskSize.width < 200 ? 'image-edit-buttons-toleft' : '' }}">
		<a class="image-edit-button" id="image-edit-button-swap" title="Use a different image">Change IMG</a>
		<a class="image-edit-button" id="image-edit-button-align" title="Align image" ></a>
	</div>
</script>

<script type="text/template" id="upload-form-tpl">
<form id="upfront-upload-image" name="upfront-upload-image" enctype="multipart/form-data" method="post" action="{{url}}" data-url="{{url}}?action=upfront-media-upload">
	<input type="file" name="media" id="upfront-image-file-input" multiple >
	<input type="hidden" name="action" value="upfront-media-upload">
	<input type="submit" value="Upload">
</form>
</script>

<script type="text/template" id="sizehint-tpl">
	<b>w:</b>{{width}}{[ if(width.toString().indexOf("%") === -1){ ]}px{[ } ]}
	<b>h:</b>{{height}}{[ if(height.toString().indexOf("%") === -1){ ]}px{[ } ]}
</div>
</script>

<script type="text/template" id="fullwidth-alert-tpl">
	<div class="uimage-fullwidth-alert">
		<p>{{ l10n.move_image_nag }}</p>
		<div class="clearfix">
			<div class="uimage-fullwidth-info uimage-fullwidth-info-1"></div>
			<div class="uimage-fullwidth-info uimage-fullwidth-info-2"></div>
			<div class="uimage-fullwidth-info uimage-fullwidth-info-3"></div>
		</div>
		<div style="margin-top:10px">
			<input class="upfront-field-checkbox" type="checkbox" id="uimage-fullwidth-noalert" value="1">
			<label for="uimage-fullwidth-noalert">{{ l10n.dont_show_again }}</label>
		</div>
	</div>
</div>
</script>

</div>
