translation.html

{% extends "/layout.html" %}

{% block styles %}

<style type="text/css">

.moveover {
	margin-left:0px;
}

</style>

{% endblock%}

{% block body %}

<script type="text/javascript" src="/static/js/processing-1.4.1.min.js"></script>

<div class="row">
<div id="basic-info" class="span8 offset3" style="margin-top:100px">
	<div class="row-fluid">
		<h2>{{translation.title}}</h2>
		<h3><a href="{{ translation.artist_url }}" target="_blank">{{ translation.artist }}</a></h3>
		</br>
		<p><strong>Based on: </strong><a href="/artwork/{{ orig.slug }}">{{ orig.title }}</a> by {{ orig.artist }}, {{ orig.date }}</p>
		<p><strong>Category: </strong>{{ translation.category }}
		</p>
		</br>
		<p><strong>Description: </strong></p>
		{% for line in descriptionList %}
			<p>{{ line }}</p>
		{% endfor %}
		<hr style="margin:20px 0px 0px 0px">
		</br>
		</br>
	</div>
</div>
</div>

<div id="sketch-block" class="row offset3" >
	{% if translation.js == True %}	
		<script id="script" type="application/processing" target="sketch">{{translation.code|safe}}</script>
		<canvas id="sketch" name="sketch" style="border:1px solid black; image-rendering: -webkit-optimize-contrast	!important;"></canvas>
	{% elif translation.video|length > 5 %} <!-- for first round of translations -->
		{{ translation.video|safe }}
	{% else  %}
		<img src={{ translation.photo_link }} style="align:center">
	{% endif %}
</div>
<br>
<br>

<div id="code-block" class="row-fluid">
		{% if translation.js == True %}
			<div id="orig-code" class="span7 offset2">
				<button id="edit" class="btn pull-right" data-toggle="button">Edit In Browser</button>
				<pre>{{ translation.code }}</pre>
			</div>
		{% else %}
			<div id="orig-code" class="span7 offset2">
				<pre>{{ translation.code }}</pre>
			</div>
		{% endif %}
		
	<div id="new-code" class="span5">
		<button id="run" class="btn" title="run code"><img src="/static/img/play.png"> Run</button>
		<button id="pause" class="btn" title="pause code"><img src="/static/img/pause.png"> Pause</button>
		<button id="reset" class="btn" title="reset code to original"><img src="/static/img/reset.png"> Reset</button>
		<textarea id="code-area" class="lined" rows="100" cols="50">{{translation.code|safe}}</textarea>
	</div>
</div>
<br>
<br>
{% endblock %}



{% block scripts %}

<script type="application/javascript">

$(document).ready(function(){

	var $originalcode = $('textarea').val();
	var $processingInstance = Processing.getInstanceById('sketch');

	$('#new-code').hide();
	$('textarea').css('width', '650px');  	

	$('#edit').toggle(
		function(){
			$('#new-code').show();
			$('#new-code').addClass('lined');
			$('#orig-code').removeClass('span7');
			$('#orig-code').addClass('span5');
			$('#orig-code').removeClass('offset2');
			$('#orig-code').addClass('offset1');
		},
		function(){
			$('#new-code').hide();
			$('#orig-code').removeClass('span5');
			$('#orig-code').addClass('span7');
			$('#orig-code').removeClass('offset1');
			$('#orig-code').addClass('offset2');
			$('#script').html($originalcode);
			Processing.reload();
		});

	$('#run').click(function(id){
		var $newcode = $('textarea').val();
		$('#script').html($newcode);
		Processing.reload();
	});

	$('#reset').click(function(){
		$('#script').html($originalcode);
		$('textarea').val($originalcode);
		Processing.reload()
	});

	$('#pause').toggle(function(){
		var $processingInstance = Processing.getInstanceById('sketch');
		$processingInstance.noLoop();
	}, function() {
		var $processingInstance = Processing.getInstanceById('sketch');
  		$processingInstance.loop();
	});

});

</script>

{% endblock %}