{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}


{% block page_js %}
	<script src="{% static 'iconolab/js/dist/bundle.js' %}" type="text/javascript"></script>
{% endblock%}

{% block content %}
	<div id="drawing-zone" style="padding-top: 10px">

		<p class="pullright"><a href='javascript:;'>Retour</a></p>
		<div class='col-md-2'>
			<ul class='form-drawing-wrapper list-inline'>
				<p class='form-drawing pullright'><strong>Type de sélection</strong></p>
				<li @click="setRectangleMode" v-bind:class="{ 'selected': isRect }" class='pull-md-left drawingModeBtn'>Rect.</li>
				<li @click="setFreeMode" v-bind:class="{ 'selected': !isRect }" class='pull-md-left drawingModeBtn'>Libre</li>
			</ul>

			<ul class='form-drawing-wrapper list-inline'>
				<p class='form-drawing pullright'><strong>Actions</strong></p>
				
				<li @click="clear" class='pull-md-left drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li>

				<li @click="save" class='pull-md-left drawingModeBtn'><i class='fa fa-plus'></i> Créer une annotation</li>
				<li @click="showPreview" class='pull-md-left drawingModeBtn'><i class='fa fa-eye'></i> Prévisualiser</li>
			</ul>

			<form v-el:form-fragment id='fragment-form' method='GET' target="{% url 'annotation_create' %}">
				{% csrf_token %}
				<input name="fragmentPath" type="hidden" v-model="normalizePath"></input>
			</form>

		</div>
			
		<div class="col-md-8">

			<div id="iconolab-image-wrapper">
				{% thumbnail annotation.image.media "x800" crop="center" as im %}
    				<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
				{% endthumbnail %}
			</div>

			<div class='row' style='padding-top:10px'>

				<div class='image-item col-xs-4'>
				{% thumbnail annotation.image.media "x100" crop="center" as im %}
    				<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
				{% endthumbnail %}
				</div>
				
				<div class='image-item col-xs-4'>
					{% thumbnail annotation.image.media "x150" crop="center" as im %}
    					<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
					{% endthumbnail %}
				</div>
									
				<div class='image-item col-xs-4'>
					{% thumbnail annotation.image.media "x200" crop="center" as im %}
    					<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
					{% endthumbnail %}
				</div>

				<div class='image-item col-xs-4'>
					{% thumbnail annotation.image.media "x250" crop="center" as im %}
    					<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
					{% endthumbnail %}
				</div>

			</div>

		</div>

		<div class='col-md-2'>
			<div id='action-wrapper' style='display: none'>
				<a class='btn btn-link create'>> Créer le fragment</a>
				<a class='btn btn-link delete'>> Effacer la zone</a>
			</div>
		</div>

	</div>
{% endblock %}

{% block footer_js %}
	<script>
		var drawingVue = new Vue({
			el: '#drawing-zone',
			MODE_RECT: 'RECT',
			MODE_FREE: 'FREE', 

			data: {
				mode:"",
				isRect: true,
				normalizePath: "",
				readOnly: false
			},

			init: function () {
				//this.mode = this.$options.MODE_RECT;
				this.drawingComponent = iconolab.initCutoutComponent({ 
					wrapperId: '#iconolab-image-wrapper',
 					actionWrapper: '#action-wrapper',
 					readOnly: false 
				}); 

				this.drawingComponent.setDrawingMode(this.mode);
				//var rectPath = "M173,101L319,101L319,224L173,224Z;RECT";
				//var relPath = 'M137,62 L155,67 L163,77 L166,99 L161,113 L142,119 L129,114 L120,95 L116,79 L120,64 Z;FREE';
				//var zonePath = "M236,111 L268,112 L293,146 L293,182 L280,215 L254,220 L229,212 L205,198 L210,175 L207,143 L215,123 Z;FREE";
				//var transformMatrix = [];//en fonction de l'échelle

				//this.drawingComponent.setPath(relPath);
			},

			methods: {
				
				setRectangleMode: function () {
					this.mode = this.$options.MODE_RECT;
					this.isRect = true;
				},
				
				showPreview: function () {
					
				},

				setFreeMode:  function () {
					this.mode = this.$options.MODE_FREE;
					this.isRect = false;
					this.drawingComponent.setDrawingMode(this.mode);
				},

				save: function () {
					console.log('drawingPath', this.drawingComponent.getPath());
					this.normalizePath = this.drawingComponent.getPath();
					console.log(this.normalizePath)
					//this.$els.formFragment.submit();
				},

				clear: function () {
					this.drawingComponent.clear();
				}
			}
		}); 
	</script>
{% endblock %}