<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      lang="en"
      metal:use-macro="context/main_template/macros/master"
      i18n:domain="plone">

<head>

</head>

<body>
<metal:main fill-slot="main">
<div id="content-core">

	<h1>abcjs basic demo page</h1>
	<p><b>abcjs</b> is an open source javascript rendering engine for interpreting abc formatted tunes.
		It will render sheet music entirely in your browser.
		It was written in 2009-2011 by Gregory Dyke and Paul Rosen.
		This page demonstrates a simple implementation of it so you can see how to use it in your own pages.
	</p>
 
	<p>Click one of the links below to see it in action.</p>
 <div id="midi"></div>

    <p>
        <a href="#" onclick="ABCJS.renderAbc('notation', cooleys); ABCJS.renderMidi ('midi', cooleys);return false;" >Cooley's</a> |
        <a href="#" onclick="ABCJS.renderAbc('notation', chorus); return false;" >Chorus</a> |
        <a href="#" onclick="ABCJS.renderAbc('notation', bigNotes, {}, { scale: 2.0 }); return false;" >Big Notes</a>
    </p>

<div id="notation"></div>

	<p>For more information, see <a href="http://code.google.com/p/abcjs/" >the project page</a>. There is also an application using this
		<a href="http://drawthedots.com">here</a>.</p>

<script type="text/javascript">
    var cooleys = "X:1\nT: Cooley's\nM: 4/4\nL: 1/8\nR: reel\nK: Emin\n|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\nEBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\neB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|\n";
    var chorus = '%%staffwidth 500\nX: 1\nT: Chorus\nV: T1 clef=treble name="Soprano"\nV: T2 clef=treble name="Alto"\nV: B1 clef=bass name="Tenor"\nV: B2 clef=bass name="Bass"\nL:1/8\nK:G\nP:First Part\n[V: T1]"C"ed"Am"ed "F"cd"G7"gf |\n[V: T2]GGAA- A2BB |\n[V: B1]C3D- DF,3 |\n[V: B2]C,2A,,2 F,,2G,,2 |';
    var bigNotes = "X:1\nM: 4/4\nL: 1/8\nK: Emin\n|:D2|EB{c}BA B2 EB|\n";
</script>
 
<span tal:replace="nothing">
<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
 
<script type="text/javascript">
	try {
	var pageTracker = _gat._getTracker("UA-13012902-1");
	pageTracker._trackPageview();
	} catch(err) {}
</script>
</span>
</div>

<h3>Thanks to http://urdle.free.fr/mediawiki/index.php?title=Testjs for the examples !</h3>

<hr />
<div id="abc-edit"></div>
<table>
<tr>
	<td>
		<div id="slider"></div>
	</td>
	<td >
		&nbsp;&nbsp;Current speed : <span id="slider-value"></span>
	</td>
</tr>
</table>
 
<div id="midi-edit"></div>
<div id="warnings-edit"></div>
<textarea id="abc-text" rows="20" cols="80" onkeyup="updateABC()">
X:1
T: Cooley's
M: 4/4
Q: 230
P: AAAA
L: 1/8
R: reel
K: Emin
P:A
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
P:B
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
</textarea>

<script type="text/javascript">

function getSpeed() {
	abcInput = jq("#abc-text").val();
	lines = abcInput.split('\n');
	i = 0 ;
	for (i ; i < lines.length ; i++) {
		if (lines[i].split(':')[0] == 'Q') {
			return parseInt(lines[i].split(':')[1]) ;
		}
	}
	return 0
}
function setSpeed(q) {
	abcInput = jq("#abc-text").val();
	lines = abcInput.split('\n');
	i = 0 ;
	for (i ; i < lines.length ; i++) {
		if (lines[i].split(':')[0] == 'Q') {
			lines[i] = 'Q: ' + q
			break;
		}
	}
	var abcText = '';
	i = 0 ;
	for (i ; i < lines.length ; i++) {
		abcText = abcText + lines[i] + '\n';
	}
	return abcText
}
function updateSlider() {
	speed = getSpeed() ;
	jq('#slider').slider("option" , "value" , speed) ;
	jq("#slider-value").text(speed);

}
function updateABC() {
	var input = jq("#abc-text").val();
	updateSlider() ;
	ABCJS.renderAbc('abc-edit', input, {}, {scale:0.8});
	ABCJS.renderMidi('midi-edit',input, {});
};
function updateSpeedFromSlider() {
	var speed = jq("#slider").slider("option", "value") ;
	jq("#slider-value").text(jq("#slider").slider("option", "value"));
	abcText = setSpeed(speed) ;
	jq("#abc-text").val(abcText);
	updateABC();
}

minSpeed = 20 ;
maxSpeed = 400 ;
stepSpeed = 5 ;
jq("#slider").slider({
	step : stepSpeed , 
	min: minSpeed , 
	max: maxSpeed , 
	range: false, 
	animate: "fast" ,
	change: function(event,ui){if (event.originalEvent){updateSpeedFromSlider()} }
	});

speed = getSpeed() ;
jq("#slider").width("350px") ;
jq("#slider").slider("option" , "value" , speed);
jq("#slider-value").text(speed);
ABCJS.renderAbc('abc-edit', jq("#abc-text").text() , {}, {scale:0.8});
ABCJS.renderMidi('midi-edit',jq("#abc-text").text(), {}) ;

</script>
</metal:main>

</body>
</html>