{% 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' 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="save" class='pull-md-right drawingModeBtn'><i class='fa fa-plus'></i> Créer le fragment</li>
				</ul>
			</div>
			
			<div class="col-md-8">
				<div v-el:image id="iconolab-image-wrapper">
					{% thumbnail annotation.image.media "x800" crop="center" as im %}
	    				<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
	    				<path class="image-path" d="{{ annotation.fragment }}"></path>
					{% endthumbnail %}
				</div>
			</div>

		</div>

		<div v-show="formView" class="col-md-12">
			
			<div class="col-xs-6">
				<div class="small-image-wrapper" style="position: relative">
					{% thumbnail annotation.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-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 method="POST" class="post-form">
				 	{% csrf_token %}
        			{{ form.as_p }}
        			<input v-model="normalizePath" type="hidden" name="fragment"></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: false,
				useClipPath: false,
				transformMatrix: "",
				fragmentPath: "",
				displayMask: false

			},

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

			methods: {

				setDrawingMode: function (mode, updateComponent) {
					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);
					}
				},

				showEditor: function () {
					this.formView = false;
					console.log(this.$els.smallImage);
				},

				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();
				},

				save: function () {
					this.normalizePath = this.drawingComponent.getPath();
					var smallImage = this.$els.smallImage;
					this.formView = true;
					/* 100x = smallImageHeight && 100x=smallImageWidth | 100 = ViewBoxBound */
					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];
					console.log(this.fragmentPath);
					console.log(this.transformMatrix);
				},

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