//jsonPath in host html for easy reuse

$(function() {

	// ****************************** start properties
	var mainTitle;
	var subtitle;

	var body = $("body");
	
	var sections;
	var main;
	var listData;
	var textboxData;
	
	// ****************************** end properties


	// ****************************** start data and templates

	$.getJSON(jsonPath, parseJSON);

	function parseJSON(loadedData) {
		mainTitle = loadedData.title;
		subtitle = loadedData.subtitle;
		sections = loadedData.sections;
		$.get("../templates/list_template.html", listTemplate);
	}


	function listTemplate(data) {
		listData = $(data);
		$.get("../templates/textbox_template.html", textboxTemplate);
	}


	function textboxTemplate(data) {
		textboxData = $(data);
		$.get("../templates/design_template.html", mainTemplate);
	}
	// ****************************** end data and templates


	// ****************************** start page builds
	function mainTemplate(data) {
		main = $(data);

		buildHeader();
		buildSections();
		
		//button doesn't do anything. exercise is layout only
		var buttonBar = main.find("form").append("<div class='cntr'>");
		main.find(".cntr").append("<input type='submit' />");
		
		body.append(main);
	}


	function buildHeader() {
		main.find("#mainTitle").html(mainTitle);
		main.find("#subtitle").html(subtitle);
	}


	function buildSections() {
		var content = main.find("#content");

		//create section template and remove for duplication varying number of times
		//when appending, clones of templates will be used
		sectionTemplate = content.find("#s1").detach();

		for (var i = 0; i < sections.length; i++) {
			//create unique copy of section template
			var section = sectionTemplate.clone();
			//apply unique id name to section
			section.attr("id", ("s" + i));
			//use html() instead of text() to allow HTML elements in JSON
			section.find("h2").html(sections[i].label);
			section.find("div").html(sections[i].text);
			
			var info = sections[i].info;
			//only add a subsection if one exists in a section's JSON
			if (info != "") {
				if (info.type == "list") {
					section.append(listData.clone());
					buildList(("s" + i), section, info.data);
				} else if (info.type == "textboxes") {
					section.append(textboxData.clone());
					buildTextboxes(("s" + i), section, info.data);
				}
				section.find(".bodyText").html(info.text);
			}
			content.append(section);
		}
	}
	

	function buildList(sectionID, sectionData, sectionListData) {		
		var bulletItemT = sectionData.find(".bulletItem").detach();
		var bulletListT = sectionData.find(".bulletList").detach();
		var numItemT = sectionData.find(".numItem").detach();
		var numList = sectionData.find(".numList");

		for (var i = 0; i < sectionListData.length; i++) {
			//create entire question li
			var numItem = numItemT.clone().appendTo(numList);
			//add question text to span. span used to allow retrieval of HTML 
			//  to retain formatting when submitting. otherwise, other items in li
			//  will be collected with the HTML
			var numItemSpan = numItem.find(".numItemContent");
			numItemSpan.append(sectionListData[i].text);
			
			//create entire ul
			var bulletList = bulletListT.clone().appendTo(numItem);
			for (var j = 0; j < sectionListData[i].sublist.length; j++) {
				//clone bulleted item
				var bulletItem = bulletItemT.clone();
				bulletItem.append(sectionListData[i].sublist[j].label + " " + sectionListData[i].sublist[j].text);
				bulletList.append(bulletItem);
			}
		}
	}


	function buildTextboxes(sectionID, sectionData, sectionTextboxData) {
		//clone and remove question li
		var itemT = sectionData.find(".textItem").clone();
		sectionData.find(".textItem").detach();
		//reference question ol
		var textNumList = sectionData.find(".textNumList");

		for (var i = 0; i < sectionTextboxData.length; i++) {
			//create question clone
			var item = textNumList.append(itemT.clone());
			//reference and add to question span to allow simple retrieval of HTML
			//:last selector identifies most recent question added only
			var itemHTML = item.find(".textItem:last .textItemHTML");
			itemHTML.append(sectionTextboxData[i].text);
		}
	}
	// ****************************** end page builds
	
});