<html>
<head>
<link id="css" rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="../../lang/javascript/js/jquery-2.1.1.min.js"></script>
<title id=titre>Guido Engine</title>
</head>
<script>
timeout=500;
timehandler=0;
function getscore(value) {
timehandler = 0;
var w = $("#score").attr('width');
var h = $("#score").attr('height');
var p = $("#page").val();
var gmn= value.replace(/\%.*/g, "").replace(/\(\*..*\*\)/g, "").replace(/\n/g, " ").replace(/#/g, "%23").replace(/ +/g, " ").replace(/&/g,"%26");
var url="/?gmn=" + gmn + "&width=" + w + "&height=" + h +"&page=" + p;
$("#score").attr('src', url);
$("#name").html("");
}
function gmn(value) {
if (timehandler) clearTimeout (timehandler);
timehandler = setTimeout ( function() { getscore(value); }, timeout);
}
function cancel(event) {
event.preventDefault();
return false;
}
function dropfile(file) {
var r = new FileReader();
r.onload = function(e) { $("#gmn").val(e.target.result); getscore(e.target.result); $("#name").html(file.name);}
r.onerror = function(e) { console.log("error: ", e); }
r.readAsText(file);
}
function drop(event) {
event.preventDefault();
var file = event.dataTransfer.files.item(0);
if (file) {
dropfile (file);
}
else {
var content = event.dataTransfer.getData('text');
$("#gmn").val(content);
$("#name").html("");
getscore(content);
}
}
</script>
<body>
<center>
<h1>Guido Engine Online</h1>
<br/>
<table>
<tr>
<td id="name" class="file"></td>
<td></td>
</tr>
<tr>
<td>
<textarea id="gmn" rows=43 cols=54 oninput=gmn(this.value)
ondragenter="cancel(event)"
ondragover="cancel(event)"
ondrop="drop(event)" class="code"></textarea></td>
<td><iframe id="score" width="400" height="522">text</iframe></td>
</tr>
<tr>
<td>Type Guido Music Notation code here</td>
<td><input type="range" id=page min=1 max=10 step=1 value=1 onchange='gmn ($("#gmn").val())'></td>
</tr>
</table>
</center>
</body>
</html>
