window.onload = function() {
	var curveDiv = document.getElementById('Curve');
	var decBtn = document.getElementById('DecDepth');
	var incBtn = document.getElementById('IncDepth');
	var extraForm = document.getElementById('ExtraForm');
	var thicknessRange = document.getElementById('Thickness');
	var colorField = document.getElementById('Color');
	var submitBtn = document.getElementById('Submit');

	var getURL = function(name, depth, onlySVG) {
		var url = '/' + name + '/' + depth;
		var hasThickness = _thickness !== '3';
		var hasColor = _color !== 'black';

		params = [];
		if (hasThickness) {
			params.push('t=' + encodeURIComponent(_thickness));
		}
		if (hasColor) {
			params.push('c=' + encodeURIComponent(_color));
		}
		if (onlySVG) {
			params.push('svg=1');
		}
		if (params.length > 0) {
			url += '?' + params.join('&');
		}

		return url;
	}

	var updateURL = function() {
		var url = getURL(_NAME, _depth, false);
		window.history.replaceState(null, document.title, url);
	}

	var updateLinks = function() {
		if (_depth > 0) {
			decBtn.className = 'depth';
			decBtn.href = getURL(_NAME, _depth - 1, false);
		} else {
			decBtn.className = 'depth disabled';
			decBtn.href = '#';
		}

		if (_depth < _MAX_DEPTH) {
			incBtn.className = 'depth';
			incBtn.href = getURL(_NAME, _depth + 1, false);
		} else {
			incBtn.className = 'depth disabled';
			incBtn.href = '#';
		}

		// TODO: update navigation links
	}

	var reloadSVG = function() {
		var xhr = new XMLHttpRequest();
		xhr.open('GET', getURL(_NAME, _depth, true), true);
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4 && xhr.status === 200) {
				curveDiv.innerHTML = xhr.responseText;
			}
		}
		xhr.send();
	}

	var setStyle = function(name, value) {
		var svg = curveDiv.firstElementChild;
		var defs = svg.firstElementChild;
		var style = defs.firstElementChild;
		var rule = style.firstChild;
		var regex = new RegExp(name + ':[^;]+');
		rule.nodeValue = rule.nodeValue.replace(regex, name + ': ' + value);
	}

	submitBtn.style.display = 'none';

	decBtn.addEventListener('click', function(e) {
		e.preventDefault();
		_depth -= 1;
		reloadSVG();
		updateURL();
		updateLinks();
	});

	incBtn.addEventListener('click', function(e) {
		e.preventDefault();
		_depth += 1;
		reloadSVG();
		updateURL();
		updateLinks();
	});

	thicknessRange.addEventListener('change', function() {
		_thickness = thicknessRange.value;
		var rect = curveDiv.firstElementChild.viewBox.baseVal;
		var adjusted = _thickness * Math.max(rect.width, rect.height) / 600.0;
		updateURL();
		setStyle('stroke-width', adjusted);
	});

	extraForm.addEventListener('submit', function(e) {
		e.preventDefault();
		_color = colorField.value;
		updateURL();
		setStyle('stroke', _color);
	})
}

@@ -392,16 +392,77 @@
 ubmit');
+%0A%09var navLinks = document.getElementsByClassName('nav-link');
 %0A%0A%09var g
@@ -528,101 +528,60 @@
 name
- + '/' + depth;%0A%09%09var hasThickness = _thickness !== '3';%0A%09%09var hasColor = _color !== 'black';
+;%0A%09%09if (depth !== null) %7B%0A%09%09%09url += '/' + depth;%0A%09%09%7D
 %0A%0A%09%09
@@ -603,20 +603,18 @@
 if (
-hasT
+_t
 hickness
 ) %7B%0A
@@ -609,16 +609,24 @@
 hickness
+ !== '3'
 ) %7B%0A%09%09%09p
@@ -690,16 +690,26 @@
 if (
-hasColor
+_color !== 'black'
 ) %7B%0A
@@ -1038,21 +1038,22 @@
 r update
-Links
+DecInc
  = funct
@@ -1432,43 +1432,171 @@
 %09%09%7D%0A
-%0A%09%09// TODO: update navigation links
+%09%7D%0A%0A%09var updateNavLinks = function() %7B%0A%09%09for (var i = 0; i %3C navLinks.length; i++) %7B%0A%09%09%09link = navLinks%5Bi%5D;%0A%09%09%09link.href = getURL(link.innerHTML, null, false);%0A%09%09%7D
 %0A%09%7D%0A
@@ -2331,37 +2331,38 @@
 eURL();%0A%09%09update
-Links
+DecInc
 ();%0A%09%7D);%0A%0A%09incBt
@@ -2478,21 +2478,22 @@
 %09%09update
-Links
+DecInc
 ();%0A%09%7D);
@@ -2724,32 +2724,52 @@
 %0A%09%09updateURL();%0A
+%09%09updateNavLinks();%0A
 %09%09setStyle('stro
@@ -2910,24 +2910,44 @@
 pdateURL();%0A
+%09%09updateNavLinks();%0A
 %09%09setStyle('

Update links in sidebar to include params when changed