{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% block content %}

	<div id="drawing-zone" class="row" style="padding-top: 10px; border:1px solid orange">
		
		<div v-show='!formView' style="display:none" class="editor-wrapper col-md-12">
			<div class='col-md-2'>
				<ul class="form-drawing-wrapper list-inline">
					<p class='form-drawing pullright'><strong>Type de dessin</strong></p>
					<li @click="setDrawingMode('RECT')" v-bind:class="{ 'selected': isRect }" class='pull-md-right drawingModeBtn'>Rect.</li>
					<li @click="setDrawingMode('FREE')" v-bind:class="{ 'selected': !isRect }" class='pull-md-right 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-right drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li>

					<li @click="showForm" class='pull-md-right drawingModeBtn infos info'><i class='fa fa-plus'></i> Valider</li>
				</ul>
			</div>
			
			<div class="col-md-8">
				<div v-el:image id="iconolab-image-wrapper">
					{% thumbnail image.media "x800" crop="center" as im %}
	    				<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
	    				<path class="image-path" d="{% if annotation %}{{ annotation.current_revision.fragment }}{% endif %}"></path>
					{% endthumbnail %}
				</div>
			</div>
			
			<div class="col-md-2">
				<a @click="cancel"><i class="fa fa-close"></i> Annuler</a>
			</div>

		</div>

		<div v-show="formView" class="col-md-12">
			
			<div class="col-xs-6">
				<div class="small-image-wrapper" style="position: relative">
					{% thumbnail image.media "x300" crop="center" as im %}
						<img v-el:small-image @click="showEditor" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">

						<svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
							
							<defs>
								<mask xmlns="http://www.w3.org/2000/svg" id="smallImage">
									<rect x="0" y="0" width="{{ im.width }}", height="{{ im.height }}" fill="white"/>
									<g v-bind:transform="transformMatrix">
										<path v-el:current-path v-bind:d="fragmentPath"></path>
									</g>
								</mask>	
							</defs>

							<g v-show="!displayMask" v-bind:transform="transformMatrix">
								<path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
							</g>

							<rect v-show="displayMask" v-el:small-mask x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="{{ im.width }}" height="{{ im.height }}"></rect>
						</svg>
						
					{% endthumbnail %}
				</div>
				<ul class="inline">
					<li @click="showEditor" class="showPointer"> <i class='fa fa-edit'></i> Editer le fragment</li>
					<li v-show="!displayMask" @click="highLightZone" class="showPointer"> <i class='fa fa-eye-slash'></i> Afficher la zone</li>
					<li v-show="displayMask" @click="highLightZone" class="showPointer"> <i class='fa fa-eye-slash'></i> Masquer la zone</li>
				</ul>
			</div>

			<div class='col-xs-6' style="">
				 <form class="form" action="{% if annotation %}{% url 'annotation_edit' collection_name image_guid annotation_guid %}{% else %}{% url 'annotation_create' collection_name image_guid %}{% endif %}" method="POST">
				 	{% csrf_token %}
                    <fieldset class="form-group">
                      <label class="control-label" for="id_{{ form.title.name }}">{{ form.title.label }}</label>
                      <input type="text" class="form-control"
                        name="{{ form.title.name }}"
                        id="id_{{ form.title.name }}" value="{% if form.title.value %}{{ form.title.value}}{% endif %}">
                    </fieldset>
                    <fieldset class="form-group">
                      <label class="control-label" for="id_{{ form.description.name }}">{{ form.description.label }}</label>
                      <textarea class="form-control"
                        name="{{ form.description.name }}"
                        id="id_{{ form.description.name }}" >{% if form.description.value %}{{ form.description.value}}{% endif %}</textarea>
                    </fieldset>
                    <fieldset class="form-group">
                      <label class="control-label" for="id_{{ form.tags.name }}">{{ form.tags.label }}</label>
                    </fieldset>
        			<input v-model="normalizePath" type="hidden" name="fragment"></input>
                    <input id="tags_input" type="hidden" name="tags" value="{{ form.tags_json }}"></input>
        			<button type="submit" class="save btn btn-default">Enregister</button>
    			</form>
			</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,
				formView: true,
				useClipPath: false,
				transformMatrix: "",
				fragmentPath: "",
				displayMask: false

			},

			init: function () {
				var self = this;
				this.initialDrawingMode = null;
				this.drawingComponent = iconolab.initCutoutComponent({ 
					wrapperId: '#iconolab-image-wrapper',
						actionWrapper: '#action-wrapper',
						readOnly: false,
						onDrawingModeChange: function (mode) {
							self.$nextTick(function () {
								self.setDrawingMode(mode, false);
							});
						}
				});

				this.$nextTick(function () {
					this.showForm();	
				});
			},

			methods: {

				setDrawingMode: function (mode, updateComponent) {
					if (!this.initialDrawingMode) {
						this.initialDrawingMode = mode;//useful for cancel
					}
					var updateComponent = (typeof updateComponent === "boolean") ? updateComponent: true;
					this.mode = this.$options['MODE_' + mode];
					this.isRect = (this.mode === this.$options.MODE_RECT) ? true: false;
					if (updateComponent) {
						this.drawingComponent.setDrawingMode(this.mode);
					}
				},
				
				cancel: function () {
					this.formView = true;
					var currentPath = this.$els.currentPath.getAttribute("d");
					if (!currentPath.length || !this.initialDrawingMode) { return; } {
						currentPath += ";" + this.initialDrawingMode; 
						this.drawingComponent.setPath(currentPath);
					}
				},

				showEditor: function () {
					this.formView = false;
				},

				highLightZone: function () {
					if (!this.displayMask) {
						this.displayMask = true;
					}
					else {
						this.displayMask = false;
					}
					//this.maskFill = "orange";
					//this.fragmentFill = "none";
				},

				displayEditedPath: function () {
					/* path to save */
					var normalizePath = this.drawingComponent.getPath();
				},

				showForm: function () {
					this.normalizePath = this.drawingComponent.getPath();
					var smallImage = this.$els.smallImage;
					this.formView = true;
					var xRatio = smallImage.width / 100;
					var yRatio = smallImage.height / 100;
					var transformMatrix = [xRatio, 0, 0, yRatio, 0, 0].join(',');
					this.transformMatrix ="matrix(" + transformMatrix + ")";
					this.fragmentPath = this.normalizePath.split(';')[0];
				},

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