{{#section 'head'}}
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

	<script id="nurseryRhymeTemplate" type="text/x-handlebars-template">
		Marry had a little <b>\{{animal}}</b>, its <b>\{{bodyPart}}</b>
		was <b>\{{adjective}}</b> as <b>\{{noun}}</b>.
	</script>
{{/section}}

<div id="nurseryRhyme">Click a button....</div>
<hr>
<button id="btnNurseryRhyme">Generate nursery rhyme</button>
<button id="btnNurseryRhymeAjax">Generate nursery rhyme from AJAX</button>

{{#section 'jquery'}}
	<script>
		$(document).ready(function(){

			var nurseryRhymeTemplate = Handlebars.compile(
				$('#nurseryRhymeTemplate').html());

			var $nurseryRhyme = $('#nurseryRhyme');

			$('#btnNurseryRhyme').on('click', function(evt){
				evt.preventDefault();
				$nurseryRhyme.html(nurseryRhymeTemplate({
					animal: 'basilisk',
					bodyPart: 'tail',
					adjective: 'sharp',
					noun: 'a needle'
				}));
			});

			$('#btnNurseryRhymeAjax').on('click', function(evt){
				evt.preventDefault();
				$.ajax('/data/nursery-rhyme', {
					success: function(data){
						$nurseryRhyme.html(nurseryRhymeTemplate(data))
					}
				});
			});

		});	
	</script>
{{/section}}