{% extends 'D2CoreBundle::base_admin.html.twig' %}

{% block head_script_extra %}
<script src="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css" type="text/css">
<script type="text/javascript">
	$(document).ready(function(){	
		$('#crop_target').Jcrop({
			setSelect: [ {{ crop['x'] }},{{ crop['y'] }},{{ crop['size'] }},{{ crop['size'] }} ],
			boxWidth: 600,   //Maximum width you want for your bigger images
			boxHeight: 600,  //Maximum Height for your bigger images
			aspectRatio: 1
		});

		var container = $('#crop_target').Jcrop('api').container;
		container.on('cropmove cropend',function(e,s,c){
				  $('#d2_corebundle_imagecroptype_crop_x').val(parseInt(c.x));
				  $('#d2_corebundle_imagecroptype_crop_y').val(parseInt(c.y));
				  $('#d2_corebundle_imagecroptype_crop_w').val(parseInt(c.w));
				  $('#d2_corebundle_imagecroptype_crop_h').val(parseInt(c.h));
		});

		$('.crop_coord').on('change',function(e,s,c){
			$('#crop_target').Jcrop('api').animateTo([
					$('#d2_corebundle_imagecroptype_crop_x').val(),
					$('#d2_corebundle_imagecroptype_crop_y').val(),
					$('#d2_corebundle_imagecroptype_crop_w').val(),
					$('#d2_corebundle_imagecroptype_crop_h').val() 
				]
			);
		});

		$('.crop_aspect').on('change',function(e,s,c){
			$('#crop_target').Jcrop('api').setOptions({ aspectRatio: $('#d2_corebundle_imagecroptype_aspect_ratio').val() });
		});
	});
</script>
{% endblock head_script_extra %}

{% block page_header %}
<div class="row">
	<div class="col-md-12">
		<div class="pull-right">
			<a href="{{ referrer }}" class="btn btn-sm btn-default">Back</a>
		</div>
		<div>
			Crop <code>Image</code>.
		</div>
	</div>
</div>
{% endblock page_header %}

{% block content %}
<div class="row">
	<div class="col-md-offset-1 col-md-7">
		<img id="crop_target" src="{{ item.webPath }}" title="Image" alt="Image"/> </a>
	</div>
	<div class="col-md-3">
		<form action="{{ path('admin_crop_image_update', { 'type': type, 'id': item_id }) }}" {{ form_enctype(form) }} method="POST" class="form-general">
			{{ form_widget(form) }}
			<div class="submit_dev">
				<input class="btn btn-lg btn-primary pull-right" type="submit" value="CROP" />
			</div>
		</form>
	</div>
{% endblock content %}