<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>MT Request: draw over the image</title>
        <style media="screen">
            #sample, svg{
            	position:absolute;
            	top: 0;
            	left: 0;
            	bottom: 0;
            	right:0;
            	width:100%;
            	height:100%;
            	font-family: sans-serif;
            	z-index:2;
            }
            img{
          		position:absolute;
          		top:0;
          		bottom:0;
          		right:0;
          		left:0;
          		width:100%;
          		height:100%;
          		z-index:1;
            }

            path {
                fill: none;
                stroke: red;
                stroke-width: 3mm;
            }
            body.submitted path{
            	stroke:darkgray;
            }

            body.submitted .buttons{
            	display:none;
            }

            /*#wrapper {
            	height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%);
            	width: calc({DRAW_WIDTH}/{WIDTH} * 100%);
            	position: absolute;
            	left: calc(({WIDTH} - {DRAW_WIDTH})/2/{WIDTH} * 100%);
            	top: calc(({HEIGHT} - {DRAW_HEIGHT})/2/{HEIGHT} * 100%);
            	background:none;
            	cursor: url(cursor.png) 6 6, auto;
            }*/
            #wrapper {
            	position:absolute;
            	top:0;
            	right:0;
            	bottom:0;
            	left:0;
            	background:none;
            	cursor: url(cursor.png) 6 6, auto;
            }
            .gray{
            	position:absolute;
            	background:rgba(255,255,255,0.7);
            }
            #gray_top{
            	left:0;
            	right:0;
            	top:0;
            	height:calc({TOP_PADDING}/{HEIGHT} * 100%);
            }
            #gray_bottom{
            	left:0;
            	right:0;
            	bottom:0;
            	height:calc(({HEIGHT} - {DRAW_HEIGHT} - {TOP_PADDING})/{HEIGHT} * 100%);
            }
            #gray_left{
            	left:0;
            	top:calc({TOP_PADDING}/{HEIGHT} * 100%);
            	height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%);
            	width: calc({LEFT_PADDING}/{WIDTH} * 100%);
            }
            #gray_right{
            	right:0;
            	top:calc({TOP_PADDING}/{HEIGHT} * 100%);
            	height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%);
            	width: calc(({WIDTH} - {DRAW_WIDTH} - {LEFT_PADDING})/{WIDTH} * 100%);
            }
            html, body{
            	height: 100%;
            	width: 100%;
            	margin:0;
            	background:gray;
            }
            #interface{
            	background:black;
            	height: 0;
				  overflow: hidden;
				  padding-top: calc({HEIGHT}/{WIDTH} * 100%);
				  position: relative;
				  margin: 0 auto;
				background-size: 100% 100%;
            }
            #innerface{
            	position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
            }
            @media (min-aspect-ratio: {WIDTH}/{HEIGHT}) {
			  #interface {
			    height: 100vh;
			    width: calc({WIDTH}/{HEIGHT} * 100vh);
			    padding-top:0;
			  }
			}
			#info{
			position: absolute;
			bottom: 15px;
			width: 600px;
			left: calc(50% - 250px);
			z-index: 999;
			}
			.buttons{
				text-align: center;
			}
			#submit{
			    background: lightblue;
			    border: solid 1px blue;
			    border-radius: 5px;
			    font-size: 110%;
			    padding: 5px 10px;
		    }
        </style>
    </head>
    <body>
        <div id='interface'>
	        <div id='innerface'>
	        	<div id='wrapper'>
	            <!--  <img src="{IMAGE_URL}" id='sample'>-->
	            <svg id="canvas" viewBox="0 0 {WIDTH}0 {HEIGHT}0" width="{WIDTH}mm"  height="{HEIGHT}mm" preserveAspectRatio="none">
	                <path d="" id="stroke" />
	            </svg>
	            <img src='{IMAGE_URL}'>
	            </div>
	            <div id='info'>
				    <ul>
				    	<li>Drag the mouse to trace the lines above.</li>
				    	<li>Try to be as precise as possible: there's only one image per HIT.</li>
				    	<li>Press submit when you're done.</li>
				    	<li><strong>Please watch the clock!</strong> timing is strict because the tracing is live streamed to us. Unfortunately, due to high abandonment rates we have to keep the timer strict.</li>
				    </ul>
		            <div class='buttons'>

			            <button id='submit'>Submit</button>
			            <!--  <button id='reset'>Reset</button>-->
			        <form method='post' action='' id='finishedForm'>
			        <input type='hidden' name='surveycode' id='surveycode'>
		            <input type='hidden' name='assignmentId' value='{ASSIGNMENT}'>
			        </form>
		            </div>
		            <div id='message'></div>
	            </div>
	            <div class='gray' id='gray_top'></div>
	            <div class='gray' id='gray_bottom'></div>
	            <div class='gray' id='gray_left'></div>
	            <div class='gray' id='gray_right'></div>
	        </div>
        </div>
        <script type='text/javascript'>
        var svgWidth = {WIDTH};
        var svgHeight = {HEIGHT};
        var drawWidth = {DRAW_WIDTH};
        var drawHeight = {DRAW_HEIGHT};

        var xPadding = {LEFT_PADDING} / svgWidth;
        var yPadding = {TOP_PADDING} / svgHeight;
        var drawWidthFactor = drawWidth / svgWidth;
        var drawHeightFactor = drawHeight / svgHeight;
        </script>

        {SCRIPT}
    </body>
</html>