<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<title>SimpleFM</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	
	<script type="text/javascript" src="../build/Tone.js"></script>
	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
	<script type="text/javascript" src="./scripts/Interface.js"></script>
	<script type="text/javascript" src="./scripts/Logo.js"></script>
	<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>


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

	<script type="text/javascript">
		// jshint ignore: start
	</script>

</head>
<body>
	<div id="Content">
		<div id="Title">FMSynth</div>
		<div id="Explanation">	
			<a href="http://tonejs.org/docs/#SimpleFM">Tone.SimpleFM</a>
			is composed of two 
			<a href="http://tonejs.org/docs/#SimpleSynth">Tone.SimpleSynths</a> 
			where one Tone.SimpleSynth modulates the frequency of a second Tone.SimpleSynth. 
		</div>
	</div>

	<script type="text/javascript">			
		var synth = new Tone.SimpleFM({
			"modulationIndex" : 12.22,
			"carrier" : {
				"envelope" : {
					"attack" : 0.01,
					"decay" : 0.2
				}
			},
			"modulator" : {
				"oscillator" : {
					"type" : "square"
				},
				"envelope" : {
					"attack" : 0.2,
					"decay" : 0.01
				}
			}
		}).toMaster();
	</script>

	<script type="text/javascript">

		$(function(){
		
			new Interface.Slider({
				tone : synth,
				param : "modulationIndex",
				name : "mod index",
				max : 100
			});

			$("<div>", {
				"id" : "Keyboard"
			}).appendTo("#Content");

			var keyboard = new QwertyHancock({
				id: "Keyboard",
				width: $("#Content").width(),
				height: 150,
				octaves: Interface.isMobile ? 1.26 : 3,
				startNote: "C3",
				whiteKeyColour: "white",
				blackKeyColour: "#ECECEC",
				activeColour : "#FFFC0C"
			});

			keyboard.keyDown = function (note) {
			    synth.triggerAttack(note);
			};

			keyboard.keyUp = function (note) {
			    synth.triggerRelease();
			};
		});
	</script>
</body>
</html>