Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
// Adds a link to the applications UI at the top of the page 
$('#p-vector-user-menu-overflow > .vector-menu-content > .vector-menu-content-list').prepend('<li style="cursor: pointer; user-select: none;" id="sh-citation-button-container"></li>');
$("#sh-citation-button-container").append('<p id="sh-citation-button" style="color: blue" >citationFixer</p>');

let portletOpen = false;
let jsonData;
// title is the location of the json which holds the recorded cites with their corresponding access levels
let title = "User:Crispyshill/citationtable.json";
// This JQuery function grabs the JSON object from the file
$.getJSON(mw.config.get('wgScriptPath')+'/index.php?action=raw&ctype=application/json&title='+title, function(data){
			    $('#bodyContent').append('<p>Supported Sites:</p>');
			    // Adds to the end of each page each of the url's of the supported cites FOR TESTING ONLY, REMOVE FOR FINAL VERSION
	data.forEach(x=>{
		    $('#bodyContent').append('<p>'+JSON.stringify(x.url)+'</p>');

	})
	// Saves the json object for further use
	jsonData = data;
});


// Controlls functionality when the UI button is pressed
$("#sh-citation-button").click(()=>{
if(portletOpen){
	$(".sh-portlet").remove();
	portletOpen = false;
}
else{
portletOpen = true;
// working on portlet funcitonality
$('#sh-citation-button-container').append('<div style="position: relative; top: 5%; border-style: solid; background: GhostWhite;" class="sh-portlet"></div>');
$('.sh-portlet').append('<form id="sh-form"></form>');
$("#sh-form").append('<p><label for="sh-form-url">Enter new source URL</label>');
$("#sh-form").append('<input type="text" id="sh-form-url"></input></p>');
$("#sh-form").append('<p><label for="sh-form-access">Enter access type</label>');
$("#sh-form").append('<input type="text" id="sh-form-access"></input></p>');
$(".sh-portlet").append('<button id="sh-button-add-to-json">Update Database</button>');




}


});

	function editPage( info ) {
	$.ajax({
		url: mw.util.wikiScript( 'api' ),
		type: 'POST',
		dataType: 'json',
		data: {
			format: 'json',
			action: 'edit',
			title: info.title,
			text: info.text, // will replace entire page content
			summary: info.summary,
			token: mw.user.tokens.get( 'csrfToken' )
		}
	})
	.then (function( data ) {
		if ( data && data.edit && data.edit.result && data.edit.result == 'Success' ) {
			alert( 'Page edited!' );
		} else {
			alert( 'The edit query returned an error. =(' );
		}
	})
	.catch ( function() {
		alert( 'The ajax request failed.' );
	});
}
$("#p-vector-user-menu-overflow > .vector-menu-content > .vector-menu-content-list").on('click', '#sh-button-add-to-json', function () {
		$("#bodyContent").append("<p>Test</p>");
	if(confirm("Do you want to submit?")){
	//	let myInfo = {"title": "This is my title", "text": "This is my new text"};
	
editPage({
	title: mw.config.get('wgScriptPath')+'/index.php?action=raw&ctype=application/json&title='+'User:Crispyshill/sandbox',
	text: 'Cool! It works! :-) ~~' + '~~',
	summary: 'Trying to edit my sandbox [[Project:User scripts/Guide/Ajax|using AJAX]]...'
});
	}
});