{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% block content %}
	<div id="drawing-zone" class="row" style="padding-top: 10px; border:1px solid red">
		
		<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="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 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 }}">
					{% 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">
				<a @click="showEditor" class="showPointer"> <i class='fa fa-edit'></i> Editer le fragment</a>
				<a v-show="!displayMask" @click="highLightZone" class="showPointer"> <i class='fa fa-eye-slash'></i>Masquer l'image</a>
				<a v-show="displayMask" @click="highLightZone(1)" class="showPointer"> <i class='fa fa-eye-slash'></i>Afficher la zone</a>

				</ul>
			</div>

			<div class='col-xs-6' style="">
				<form>
				  
				  <fieldset class="form-group">
				    <label for="formGroupExampleInput">Titre</label>
				    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Titre">
				  </fieldset>
				  
				  <fieldset class="form-group">
				    <label for="formGroupExampleInput2">Description</label>
				    <textarea></textarea>
				  </fieldset>

				  <fieldset class="form-group">
				    <label for="formGroupExampleInput2">Tags</label>
				  </fieldset>

				    <div class="form-group pull-right">
				    	<button type="submit" class="btn btn-default">Envoyer</button>
				    	<button type="submit" class="btn btn-default">Annuler</button>
				    </div>

				</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 () {
				//this.mode = this.$options.MODE_RECT;
				var self = this;
				self.drawingComponent = iconolab.initCutoutComponent({ 
					wrapperId: '#iconolab-image-wrapper',
						actionWrapper: '#action-wrapper',
						readOnly: false
				}); 	
			},

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

				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";
				},

				setFreeMode:  function () {
					this.mode = this.$options.MODE_FREE;
					this.isRect = false;
					this.drawingComponent.setDrawingMode(this.mode);
				},
				
				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 %}