document.getElementById('status').textContent = 'Loading...';

custom = false;

function setUrlBox() {
	var pomfclone = document.getElementById('pomfclone').value;
	var urlbox = document.getElementById('urlbox');

	if(custom) {
		customUrl = urlbox.value;
	}

	if(pomfclone != "custom") {
		urlbox.value = pomfclone;
		urlbox.disabled = true;

		custom = false;
	} else {
		urlbox.value = customUrl;
		urlbox.disabled = false;
	
		custom = true;
	}
}

function saveOptions() {
	var pomfclone = document.getElementById('pomfclone').value;
	var url = document.getElementById('urlbox').value;
	var behaviour = document.querySelector('input[name="behaviour"]:checked').value;

	chrome.storage.sync.set({
		pomfclone: pomfclone,
		url: url,
		customUrl: customUrl,
		behaviour: behaviour
	}, function() {
		var status = document.getElementById('status');
		status.textContent = 'Options saved.';
		setTimeout(function() {
			status.textContent = '';
		}, 750);
	});
}

function restoreOptions() {
	var firstPomfclone = document.getElementById('pomfclone').getElementsByTagName('option')[0];

	chrome.storage.sync.get({
		pomfclone: firstPomfclone.innerHTML,
		url: firstPomfclone.value,
		customUrl: '',
		behaviour: document.querySelector('input[name="behaviour"]:checked').value
	}, function(items) {
		document.getElementById('pomfclone').value = items.pomfclone;
		document.getElementById('urlbox').value = items.url;
		customUrl = items.customUrl;
		custom = items.pomfclone == "custom";
		setUrlBox();

		document.getElementById(items.behaviour).checked = true;
	});
	
	document.getElementById('status').textContent = '';
}

document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);
document.getElementById('pomfclone').onchange = setUrlBox;