<commit_before>$(document).ready(function() {

	// Load teacher navigation
	loadTeacherNavigation();

	// Load the home form first
	loadForm("Home");
	
	//Bind buttons accordingly
	bindButtons();
	
	// We need to catch what happens when a user presses
	// a navigation tab
	bindClickToTeacherNavigation();

	// Catch what happens when a menu item from the "+ Add Page"
	// button gets pressed
	bindClickToAddPageNavigation();
});

function bindButtons() {
	
	//Make save button do ajax to save form
	$('#save-button').click(function (){
		saveForm();
	});
	
	//Preview button
	$('#preview-button').click(function (){
		previewForm();
	});
	
	//Cancel button
	$('#cancel-button').click(function (){
		cancelForm();
	});
}

/***************************************
 *** Navigation Bar Stuff
 ***************************************/

 function bindClickToTeacherNavigation() {
	$('a[data-toggle="tab"]').unbind('click');
	$('a[data-toggle="tab"]').click(function() {

		// Get the name of the navigation tab we are trying to access
		var nameOfPressedTab = this.id;

		// Change the header title
		$('#page-title').html(nameOfPressedTab);

		// Clean the current HTML form so we can place a new one
		$('div[class="tab-content"]').html("");

		// We need to now load a new form in place of the old one
		loadForm(nameOfPressedTab);
	});
}

function bindClickToAddPageNavigation() {
	$('a[class="addpage-option"]').unbind('click');
	$('a[class="addpage-option"]').click(function() {
	
		var nameOfPressedOption = $(this).html().trim();

		// Adds new tab for left side tab-bar 
		addPage(nameOfPressedOption);

		// Remove the item from add menu
		var liElement = $(this).parent();
		$(liElement).addClass("remove-addpage-option");
		$(".remove-addpage-option").remove();

		// Make sure that the new navigation button that we 
		// added can fire off an event
		bindClickToTeacherNavigation();
	});
}

function addPage(nameOfPage) {

	// Add the item to the teacher navigation
	$("#tab-bar")
			.append(
				$('<li></li>')
				.append(
					$('<a></a>')
					.attr('data-toggle', 'tab')
					.attr('id', nameOfPage)
					.addClass('newTab')
					.append(
						// Need to modify this dynamically
						'<span class="glyphicon glyphicon-list-alt"></span>'
					)
					.append("&nbsp;&nbsp;&nbsp;")
					.append(nameOfPage)
					.append(
						'<button class="remove-button" type="button" onClick="removePage(this)"><span class="glyphicon glyphicon-remove pull-right"></span></button>'
					)
				)
			);

	// Save the new navigation
	//saveTeacherNavigation();

	// TODO: Add page to data store 
}

// Called when remove checkmark is pressed in teacher navigation
function removePage(removeButton) {

	// Remove the item from the teacher navigation
	var aElement = $(removeButton).parent();
	var liElement = aElement.parent();
	$(liElement).addClass("remove-the-element");
	$(".remove-the-element").remove();

	// Get the name of the removed option
	var nameOfRemovedOption = $(aElement).attr('id');

	// Add the element back to add page navigation
	$("#page-dropdown-menu")
			.append(
				$('<li></li>')
				.attr('role', 'presentation')
				.append(
					$('<a></a>')
					.attr('role', 'menuitem')
					.attr('tabindex', '-1')
					.attr('href', '#')
					.addClass('addpage-option')
					.html(nameOfRemovedOption)
				)
			);
	bindClickToAddPageNavigation();

	// Save the new navigation
	//saveTeacherNavigation();

	// TODO: Remove page from data store	
}


function loadTeacherNavigation() {
	
	//Get the tabs
	var tabs = document.getElementsByClassName('tab-pane');
	
	//Try to load tabs
	//Sends ajax request to servlet
	$.ajax({
	    type: 'post',
	    url: '/loadtaborder',
	    dataType: 'json',
	    data: '',
	    success: function(jsonData) {
	    	// So here, we have the jsonData of tabOrder, we need to get the array and push elements to the tab order
	    	// Also, we need to make the select menu for each form to the type of the tab...
	    	console.log(jsonData);
	    },
	    error: function(jsonData) {
	        alert('Error loading teacher navigation');
	    }
	});
}

//Make the jQuery button action when the user saves the tab order, NEED AJAX again
/// What to send to servlet:
/// Array of JSOs with  (tabName, typeOfForm)
/// ie : [ (tabName:"HomePage", type:"Home") , (tabName : "HW 3", type : File) ... ]
/// You will get either success or failure...
function saveTeacherNavigation() {
	
	//Gets the tab name and type of each tab
	var tabs = document.getElementsByClassName('tab-pane');
	var tabsType = document.getElementsByName('type-of-form');
	
	//Creating json string
	var JSONString = '{"tabOrder":[]}';
	for(var i = 0; i<tabs.length; i++)
	{
		
		//Parses the string into array
		JSONString = JSON.parse(JSONString);
		
		//Second object with next tabs information
		var obj2 = new Object();
		obj2.name = tabs[i].id;
		obj2.type = tabsType[i].options[tabsType[i].selectedIndex].text;
		var JSONString2 = JSON.stringify(obj2);
		
		//Parses second object string into array and pushes it into default string
		obj2 = JSON.parse(JSONString2);
		JSONString['tabOrder'].push(obj2);
		
		//Turns array back into string
		JSONString = JSON.stringify(JSONString);
		console.log(JSONString);
	}
	
	//Sends ajax request to servlet
	$.ajax({
	    type: 'post',
	    url: '/savetab',
	    dataType: 'text',
	    data: JSONString,
	    success: function(data) {
	    	alert('Success saving tab order!')
	    },
	    error: function(data) {
	        alert('Error');<commit_msg>Save/Load works, but Load needs to change frontend<commit_after>$(document).ready(function() {

	// Load teacher navigation
	loadTeacherNavigation();

	// Load the home form first
	loadForm("Home");
	
	//Bind buttons accordingly
	bindButtons();
	
	// We need to catch what happens when a user presses
	// a navigation tab
	bindClickToTeacherNavigation();

	// Catch what happens when a menu item from the "+ Add Page"
	// button gets pressed
	bindClickToAddPageNavigation();
});

function bindButtons() {
	
	//Make save button do ajax to save form
	$('#save-button').click(function (){
		saveForm();
	});
	
	//Preview button
	$('#preview-button').click(function (){
		previewForm();
	});
	
	//Cancel button
	$('#cancel-button').click(function (){
		cancelForm();
	});
}

/***************************************
 *** Navigation Bar Stuff
 ***************************************/

 function bindClickToTeacherNavigation() {
	$('a[data-toggle="tab"]').unbind('click');
	$('a[data-toggle="tab"]').click(function() {

		// Get the name of the navigation tab we are trying to access
		var nameOfPressedTab = this.id;

		// Change the header title
		$('#page-title').html(nameOfPressedTab);

		// Clean the current HTML form so we can place a new one
		$('div[class="tab-content"]').html("");

		// We need to now load a new form in place of the old one
		loadForm(nameOfPressedTab);
	});
}

function bindClickToAddPageNavigation() {
	$('a[class="addpage-option"]').unbind('click');
	$('a[class="addpage-option"]').click(function() {
	
		var nameOfPressedOption = $(this).html().trim();

		// Adds new tab for left side tab-bar 
		addPage(nameOfPressedOption);

		// Remove the item from add menu
		var liElement = $(this).parent();
		$(liElement).addClass("remove-addpage-option");
		$(".remove-addpage-option").remove();

		// Make sure that the new navigation button that we 
		// added can fire off an event
		bindClickToTeacherNavigation();
	});
}

function addPage(nameOfPage) {

	// Add the item to the teacher navigation
	$("#tab-bar")
			.append(
				$('<li></li>')
				.append(
					$('<a></a>')
					.attr('data-toggle', 'tab')
					.attr('id', nameOfPage)
					.addClass('newTab')
					.append(
						// Need to modify this dynamically
						'<span class="glyphicon glyphicon-list-alt"></span>'
					)
					.append("&nbsp;&nbsp;&nbsp;")
					.append(nameOfPage)
					.append(
						'<button class="remove-button" type="button" onClick="removePage(this)"><span class="glyphicon glyphicon-remove pull-right"></span></button>'
					)
				)
			);

	// Save the new navigation
	saveTeacherNavigation();

	// TODO: Add page to data store 
}

// Called when remove checkmark is pressed in teacher navigation
function removePage(removeButton) {

	// Remove the item from the teacher navigation
	var aElement = $(removeButton).parent();
	var liElement = aElement.parent();
	$(liElement).addClass("remove-the-element");
	$(".remove-the-element").remove();

	// Get the name of the removed option
	var nameOfRemovedOption = $(aElement).attr('id');

	// Add the element back to add page navigation
	$("#page-dropdown-menu")
			.append(
				$('<li></li>')
				.attr('role', 'presentation')
				.append(
					$('<a></a>')
					.attr('role', 'menuitem')
					.attr('tabindex', '-1')
					.attr('href', '#')
					.addClass('addpage-option')
					.html(nameOfRemovedOption)
				)
			);
	bindClickToAddPageNavigation();

	// Save the new navigation
	saveTeacherNavigation();

	// TODO: Remove page from data store	
}


function loadTeacherNavigation() {
	
	//Get the tabs
	var tabs = document.getElementsByClassName('tab-pane');
	
	//Try to load tabs
	//Sends ajax request to servlet
	$.ajax({
	    type: 'post',
	    url: '/loadtaborder',
	    dataType: 'text',
	    data: '',
	    success: function(jsonData) {
	    	// So here, we have the jsonData of tabOrder, we need to get the array and push elements to the tab order
	    	// Also, we need to make the select menu for each form to the type of the tab...
	    	alert('Loaded tab order');
	    	console.log(jsonData);
	    },
	    error: function(jsonData) {
	        alert('Error loading teacher navigation');
	    }
	});
}

//Make the jQuery button action when the user saves the tab order, NEED AJAX again
/// What to send to servlet:
/// Array of JSOs with  (tabName, typeOfForm)
/// ie : [ (tabName:"HomePage", type:"Home") , (tabName : "HW 3", type : File) ... ]
/// You will get either success or failure...
function saveTeacherNavigation() {
	
	//Gets the tab name of each tab
	var tabs = $('#tab-bar').children().children();
	
	//Creating json string
	var JSONString = '{"tabOrder":[]}';
	for(var i = 0; i<tabs.length; i++)
	{
		
		//Parses the string into array
		JSONString = JSON.parse(JSONString);
		
		//Second object with next tabs information
		var obj2 = new Object();
		obj2.type = tabs[i].id;
		var JSONString2 = JSON.stringify(obj2);
		
		//Parses second object string into array and pushes it into default string
		obj2 = JSON.parse(JSONString2);
		JSONString['tabOrder'].push(obj2);
		
		//Turns array back into string
		JSONString = JSON.stringify(JSONString);
		
		console.log(tabs[i].id);
	}
	
	//Sends ajax request to servlet
	$.ajax({
	    type: 'post',
	    url: '/savetab',
	    dataType: 'text',
	    data: JSONString,
	    success: function(data) {
	    	alert('Success saving tab order!')
	    },
	    error: function(data) {
	        alert('Error');
{'fraction_non_alphanumeric': 0.16799341202305793, 'fraction_numerical': 0.0019214932747735384, 'mean_word_length': 3.354581673306773, 'pattern_counts': {'":': 2, '<': 33, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '984435', 'n_tokens_mistral': 3804, 'n_tokens_neox': 3313, 'n_words': 984}