{% set question = questions[0] %}

<style type="text/css">
    .pin {
        display: none;
        position: absolute;
		    display: inline-block;
    }

    .containerDiv {
        display: inline-block;
		    position: relative;
		    text-align: center;
    }

	body {
        position: relative;
    }
</style>
<script src="../webcati/_plugins/dragtoscale/web/js/jquery.1.12.4.min.js"></script>
<script src="../webcati/_plugins/dragtoscale/web/js/jquery-ui.min.js"></script>
<script src="../webcati/_plugins/dragtoscale/web/js/jquery-ui-touch.min.js"></script>

<script>
 $( function() {

     //this plugin was designed on jquery 1.12.4 but warpit uses different version.
    //this workaround allow as to use two different versions of jQuery on same page
    //to use newer version you just need to replace $ with $j
    var $j = jQuery.noConflict(true);

     $j("#containerImage").on('click', function( event ) {
         var draggable = $j("#draggable");

		 var pinimage = $j("#pinImage");

		 var percentX = (event.offsetX - $j(this).position().left) / $j(this).outerWidth() * 100;
		 var percentY = (event.offsetY - $j(this).position().top) / $j(this).outerHeight() * 100;


		 draggable.css('left', event.offsetX + 'px');
         draggable.css('top', (event.offsetY - pinimage.get(0).height) + 'px');

		 $j('input[name^=answers]').eq(0).val(percentX);
         $j('input[name^=answers]').eq(1).val(percentY);

         if(!draggable.is(":visible")){
               draggable.show();
           }
        });

     $j("#resetPinPosition").click(function( event ) {
         var draggable = $j("#draggable");
		 draggable.hide();
         $j('input[name^=answers]').eq(0).val("");
         $j('input[name^=answers]').eq(1).val("");

    });

	 var xPos = $j('input[name^=answers]').eq(0).val();
	 var yPos = $j('input[name^=answers]').eq(1).val();

	 var draggable = $j("#draggable");

	if(xPos.length > 0 && yPos.length > 0){

		var containerImage = $j('#containerImage');

		xPos =  Math.round(containerImage.outerWidth() * xPos / 100) +  containerImage.position().left;
		yPos =  Math.round(containerImage.outerHeight() * yPos / 100) +  containerImage.position().top;

		var pinimage = $j("#pinImage");

		draggable.css('left', xPos + 'px');
        draggable.css('top', (yPos - pinimage.get(0).height) + 'px');

        draggable.show();
    }
 });
 </script>
{% for answer in question.answers %}
    <input type="hidden" id='input_{{ answer.questionField }}' name="answers[{{ answer.questionField }}]" value="{{ answer.value }}"  />
{% endfor %}

<div class="containerDiv" id="wrapper">
   <img id="containerImage" src="{{ plugin.path_to_image }}" />
    <div class="pin" id="draggable" >
		<img id="pinImage" src="{{ plugin.path_to_pin_image }}" />
	</div>
</div>

<div>
    <button id="resetPinPosition" type='button' />Reset</button>
</div>