{% extends 'layout/default.html' %}
{% block body %}


<link rel="stylesheet" type="text/css" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">

	<h1>{{_("Utilities")}}</h1>

<!-- Chrono -->

<div class="row">
<div class="col s12">
<h3>{{_("Chronometre")}}</h3>

<div class='row'>
				<div class='col-md-3'>
					<input type='text' name='timer' class='form-control timer' placeholder='0 sec' readonly="readonly" />
				</div>
				<div class='col-md-9'>
					<button class='btn btn-success start-timer-btn'>Start</button>
					<button class='btn btn-success resume-timer-btn hidden'>Resume</button>
					<button class='btn pause-timer-btn hidden'>Pause</button>
					<button class='btn btn-danger remove-timer-btn hidden'>Remove Timer</button>
				</div>
			</div>

</div>



<!-- Random -->

<div class="col s12">
<h3>{{_("Randomizer")}}</h3>

	<iframe src="https://www.random.org/widgets/integers/iframe.php" style="border:0px #FFFFFF none;" name="random" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="200px" width="160px"></iframe>

</div>
<!-- Converter -->
<div class="col s12">
<h3>{{_("Converter")}}</h3>

<div id='gcw_mainFrtIe0oOc' class='gcw_mainFrtIe0oOc'></div>
<script>function reloadFrtIe0oOc(){ var sc = document.getElementById('scFrtIe0oOc');if (sc) sc.parentNode.removeChild(sc);sc = document.createElement('script');sc.type = 'text/javascript';sc.charset = 'UTF-8';sc.async = true;sc.id='scFrtIe0oOc';sc.src = 'http://freecurrencyrates.com/fr/widget-horizontal-editable?iso=EURGBP&df=2&p=FrtIe0oOc&v=it&source=yahoo&width=600&width_title=200&firstrowvalue=1&thm=cccccc,F9F9F9,A3A3A3,333333,eeeeee,cccccc,ffffff,222222,000000&title=Currency%20Converter&tzo=-120';var div = document.getElementById('gcw_mainFrtIe0oOc');div.parentNode.insertBefore(sc, div);} reloadFrtIe0oOc(); </script>
</div>

<!-- Calculator -->

<div class="col s12">
<h3>{{_("Calculator")}}</h3>
	<div id="calculator">
	<!-- Screen and clear key -->
	<div class="top">
		<span class="clear">C</span>
		<div class="screen"></div>
	</div>
	
	<div class="keys">
		<!-- operators and other keys -->
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<span class="operator">+</span>
		<span>4</span>
		<span>5</span>
		<span>6</span>
		<span class="operator">-</span>
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span class="operator">÷</span>
		<span>0</span>
		<span>.</span>
		<span class="eval">=</span>
		<span class="operator">x</span>
	</div>
</div>

<!-- PrefixFree -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
</div>

</div>


{% endblock %}

{% block script %}

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
	<script src='http://jquerytimer.com/timer.jquery.min.js'></script>
	<script>
	    (function(){
			var hasTimer = false;
			// Init timer start
			$('.start-timer-btn').on('click', function() {
				hasTimer = true;
				$('.timer').timer({
					editable: true
				});
				$(this).addClass('hidden');
				$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
			});

			// Init timer resume
			$('.resume-timer-btn').on('click', function() {
				$('.timer').timer('resume');
				$(this).addClass('hidden');
				$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
			});


			// Init timer pause
			$('.pause-timer-btn').on('click', function() {
				$('.timer').timer('pause');
				$(this).addClass('hidden');
				$('.resume-timer-btn').removeClass('hidden');
			});

			// Remove timer
			$('.remove-timer-btn').on('click', function() {
				hasTimer = false;
				$('.timer').timer('remove');
				$(this).addClass('hidden');
				$('.start-timer-btn').removeClass('hidden');
				$('.pause-timer-btn, .resume-timer-btn').addClass('hidden');
			});

			// Additional focus event for this demo
			$('.timer').on('focus', function() {
				if(hasTimer) {
					$('.pause-timer-btn').addClass('hidden');
					$('.resume-timer-btn').removeClass('hidden');
				}
			});

			// Additional blur event for this demo
			$('.timer').on('blur', function() {
				if(hasTimer) {
					$('.pause-timer-btn').removeClass('hidden');
					$('.resume-timer-btn').addClass('hidden');
				}
			});
		})();
	</script>

{% endblock %}