{% load i18n %}
{% load staticfiles %}



{% block content %}

<link rel="stylesheet" href="{% static 'stylesheet.css' %}">

<script src="{% static 'jquery.js' %}"></script>
<script src="{% static 'jquery.interaction.js' %}"></script>
<script src="{% static 'jquery-ui.min.js' %}"></script>

	<div id='header'>
			<div id='leftheader'>0 cents</div>
			<!-- <div style='width:30%; display:inline-block;'>&nbsp;</div> -->
			<div id='rightheader'>0 cents</div>
		</div>

	<div id='buckets'>

			<div class='droppable ui-widget-header bucket' id='rightbucket'>
				<!-- <img src='images/blue_bucket.png' style='width:100%'> -->
			</div>

			<div class='droppable ui-widget-header bucket' id='leftbucket'>
				<!-- <img src='images/yellow_bucket.png' style='width:100%'> -->
			</div>

		</div>

	<div id='balls'>
		<br>
	</div>


	<div class='button' name='button_div' style='margin-top:-2%'>
		<div id='submit'><button id='button_main' name='button'>Proceed</button></div>
	</div>

	<div class='error' id='error' name='error_div'>invalid input</div>

	<div id='results' hidden>
			<input type="number" name="bucket_blue_balls" value="0" />
			<input type="number" name="bucket_yellow_balls" value="0" />
		</div>

	<div id='results' hidden>
		{{ form.errors }}

		{{ form.bucket_blue_balls.errors }}
    {{ form.bucket_yellow_balls.errors }}
	</div>

{% endblock %}





{% block styles %}

<style>

	html,body {
		height:100%;
	}

	#buckets {
		width:55%;
		margin:auto;
		height:100%;
	}

	.bucket {
		width:40%;
		text-align:center;
		height:30vh;
		display:inline-block;
		border-style:solid;
		border-width:14px;
		border-top-width:0px;
	}

	#rightbucket {
		float:right;
		border-color:orange;
	}

	#leftbucket {
		border-color:blue;
	}

	.ball {
		width:12%;
		z-index:-100;
		text-align:center;
	}

	#balls {
		margin-top:5%;
		margin-left:auto;
		margin-right:auto;
		width:25%;
		/*border:1px solid black;*/
		text-align:center;
	}

	#header {
		width:55%;
		margin:auto;
		margin-top:5%;
		margin-bottom:3%;
		/*border:1px solid black;*/
		font-size:120%;
		font-weight:bold;
		font-family: sans-serif;
	}

	#rightheader {
		display:inline-block;
		width:33%;
		float:right;
		text-align:center;
	}

	#leftheader {
		display:inline-block;
		width:33%;
		text-align:center;
	}

	.submit-active {

	     margin-top:50px;
	     background-color:#c0c0c0;
	     border:1px solid #c0c0c0;
	     padding: 5px 17px;

	     display:block;
	     margin:0px auto;


	}

	.submit-inactive {

	     margin-top:50px;
	     background-color:#ebf2f2;
	     border:1px solid #c0c0c0;
	     padding: 5px 17px;

	     display:block;
	     margin:0px auto;

	}

	.hidden {
		visibility: hidden;
	}

	body{
	    -webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}

</style>

{% endblock %}






{% block scripts %}

<script>

$(document).ready(function() {

	left = 0
	right = 0

	position_label = 'part1_stage1'
	$.jgames.timerstart()

	//////
	params = {	ID:ID, parameters:['structure', 'part1'] 	}
	//////


	total = 30
	left_pay = 5
	right_pay = 10

	for(i = 0; i < total; i++) {

		$('#balls').append("<span class='draggable'><img src={% static 'ball.png' %} class='ball'></span> ");
	}

	$(function() {

	    $(".draggable").draggable({ revert: "invalid" });

	    $(".droppable").droppable({

	        activeClass: "ui-state-hover",
	        hoverClass: "ui-state-active",

	        drop: function(event, ui) {

	            var targetElem = $(this).attr("id");

				if(targetElem == 'leftbucket') {
					left = left + 1;
					$('#leftheader').text(left*5 + ' cents');
				}
				if(targetElem == 'rightbucket') {
					right = right + 1;
					$('#rightheader').text(right*10 + ' cents');
				}

				if(left + right == total) {
					elapsed = (new Date() - window.start) / 1000;
					$("[name='button_div']").show()
				}

				//alert(right);
				ui.draggable.draggable("disable", 1);


	            //    //.find("p")
	            //    //.html( "Dropped! inside " + targetElem);
	            //
	            //    //alert(targetElem);
	        }
	    });

	})


})

$('form').on('submit', function(e){

		   	$("input[name='bucket_blue_balls']").val(left);
				$("input[name='bucket_yellow_balls']").val(right);

				this.submit();
				console.log("submit");

});


</script>
{% endblock %}