<!DOCTYPE html>

<html><head>
<script type="text/javascript" src="lightgl.js"></script>
<script type="text/javascript" src="csg.js"></script>
<script type="text/javascript" src="openjscad.js"></script>
<script type="text/javascript" src="braille.jscad" charset="utf-8"></script>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style>

	body {
		font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
		max-width: 820px;
		margin: 0 auto;
		padding: 10px;
	}
	canvas {
		border: 1px solid black;
		margin: 0px 8px;
	}
	pre, code {
		font: 12px/20px Monaco, monospace;
		border: 1px solid #CCC;
		border-radius: 3px;
		background: #F9F9F9;
		padding: 0 3px;
		color: #555;
	}
	pre {
		padding: 10px;
		width: 100%;
	}
	textarea {
		font: 12px/20px Monaco, monospace;
		padding: 5px 8px;
		width: 300px;
		height: 100px;
	}
	td {
		vertical-align: top;
	}

	canvas { cursor: move; }

</style>
<link rel="stylesheet" href="openjscad.css" type="text/css" />

<script>

	var gProcessor=null;
	var detailsOffset = 4;
	var detailsAmount = 7;

	// Show all exceptions to the user:
	OpenJsCad.AlertUserOfUncaughtExceptions();

	function onload()
	{
		gProcessor = new OpenJsCad.Processor(document.getElementById("viewer"));
		jQuery.get('braille.jscad', function(data)
		{
			gProcessor.setJsCad(data, "braille.jscad");
			showDetails(false);
		});
		
		adaptControls();
	}
	
	function adaptControls()
	{
		if (gProcessor.viewer != null)
			gProcessor.viewer.gl.clearColor(1, 1, 0.97, 1);
		
		$("#viewer .viewer")[0].style.backgroundColor = "white";
		$("#viewer .parametersdiv button")[0].onclick = parseParameters;
		
		var moreElement = "<hr/><p><a id='more'></a></p>";
		
		$("#viewer .parametersdiv .parameterstable").after(moreElement);
		
		setLanguage("german");
	}
	
	function setLanguage(lang)
	{
		if (lang == "german")
		{
			// var $statusBar = $("#viewer .statusdiv");
			// $statusBar.children("span")[0].innerHTML = "Fertig."
			
			$("#viewer .parametersdiv button")[0].innerHTML = "3D Modell generieren";
		}
	}
	
	function showDetails(show)
	{
		var tableRows = $("#viewer .parametersdiv .parameterstable tr");
		
		for (var i=detailsOffset; i < tableRows.length && i < detailsOffset+detailsAmount; i++)
		{
			tableRows[i].style.display = (show) ? "table-row" : "none";
		}
		
		var moreLink = $("#more")[0];
		moreLink.innerHTML = (show) ? "simple Einstellungen" : "Details einstellen";
		moreLink.href = "javascript:showDetails(" + !show + ");";
	}
	
	function parseParameters()
	{
		var param_form_size = $("#viewer .parametersdiv .parameterstable tr:eq(4) td:eq(1) input")[0];
		param_form_size.value = Math.min(Math.max(param_form_size.value, 0.0), 10.0);
		
		var param_dot_height = $("#viewer .parametersdiv .parameterstable tr:eq(5) td:eq(1) input")[0];
		param_dot_height.value = Math.min(Math.max(param_dot_height.value, 0.5), 0.8);
		
		var param_dot_diameter = $("#viewer .parametersdiv .parameterstable tr:eq(6) td:eq(1) input")[0];
		param_dot_diameter.value = Math.min(Math.max(param_dot_diameter.value, 1.4), 1.6);
		
		var param_plate_thickness = $("#viewer .parametersdiv .parameterstable tr:eq(7) td:eq(1) input")[0];
		param_plate_thickness.value = Math.max(param_plate_thickness.value, 0.0);
		
		var param_resolution = $("#viewer .parametersdiv .parameterstable tr:eq(10) td:eq(1) input")[0];
		var isnumber = !isNaN(parseInt(param_resolution.value)) && isFinite(param_resolution.value);
		var resolution = (isnumber) ? parseInt(param_resolution.value) : 0;
		resolution = Math.min(Math.max(param_resolution.value, 10), 30);
		resolution += (resolution % 2);
		param_resolution.value = resolution;
		
		gProcessor.rebuildSolid();
	}

</script>
<title>Text to 3d printable Braille</title>
</head>
<body onload="onload()">
<h1>Text to 3d printable Braille</h1>
<div id="viewer"></div>
</body>
</html>
