// Generator, by Geoff
$(document).ready(function(){
		$.getJSON("lessons.json", function(data) {
				var wordsHtml = '';
				var sidebarHtml = '';
				var lessonIndex = 0;
				$.each(data, function(lesson, wordList){
						lessonIndex++;
						$.each(wordList, function(key, word){
								wordsHtml += '                  <div style="display: none;" class="col-md-4 lesson lesson-' + lessonIndex + '">';
								wordsHtml += '                    <div class="service-item">';
								if('img' in word){
								wordsHtml += '                      <div class="icon" onclick="englishSay(\''+ word.name +'\')" style="background-image:url(images/'+ word.img +');"></div>';
								} else if ('url' in word) {
								wordsHtml += '                      <div class="icon" onclick="englishSay(\''+ word.name +'\')" style="background-image:url('+ word.url +');"></div>';
								} else {
								wordsHtml += '                      <div class="icon" onclick="englishSay(\''+ word.name +'\')" style="background-image:url(https://img.icons8.com/'+ word.name +'.png);"></div>';
								}
								wordsHtml += '                      <h4 class="clickSay" onclick="englishSay(\''+ word.name +'\')">'+ word.name +'</h4>';
								if('example' in word){
								wordsHtml += '                      <p class="clickSay" onclick="englishSay(\''+ word.example +'\')">'+ word.example +'</p>';
								}
								wordsHtml += '                    </div>';
								wordsHtml += '                  </div>';
								});
						sidebarHtml += '<li><a href="#" onclick="swapView('+ lessonIndex +')">'+ lesson +'</a></li>';
                    
						});
				$('#words').html(wordsHtml);
				$('#lessonIndex').html(sidebarHtml);
				swapView(1)
		});
});

function swapView(newView){
 $(".lesson").hide(1000);
 $(".lesson-" + newView).show(1000);
}

function englishSay(textToSay) {
				responsiveVoice.speak(textToSay);
}