diff --git a/js/autocomplete.js b/js/autocomplete.js
index d7648da..7751bc1 100644
--- a/js/autocomplete.js
+++ b/js/autocomplete.js
@@ -1,142 +1,143 @@
 function autocomplete(inp, obj, act) {
-  /*the autocomplete function takes two arguments,
-  the text field element and an objay of possible autocompleted values:*/
-  var currentFocus;
-  /*execute a function when someone writes in the text field:*/
-  inp.addEventListener("input", function(e) {
-    var a, b, i, val = this.value;
-    /*close any already open lists of autocompleted values*/
-    clearLists();
-    document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none");
-    if (!val || val.length < 3) return false;
-    currentFocus = -1;
-    var is_empty = true;
+	/*the autocomplete function takes two arguments,
+	the text field element and an objay of possible autocompleted values:*/
+	var currentFocus;
+	/*execute a function when someone writes in the text field:*/
+	inp.addEventListener("input", function(e) {
+		var a, b, i, val = this.value;
+		/*close any already open lists of autocompleted values*/
+		clearLists();
+		document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none");
+		if (!val || val.length < 3) return false;
+		currentFocus = -1;
+		var is_empty = true;
 
-    /*for each item in the object...*/
-    for (node in obj) {
-  		var nomNode = obj[node].name;
+		/*for each item in the object...*/
+		for (node in obj) {
+			var nomNode = obj[node].name;
 
-  		if (nomNode.toUpperCase().includes(val.toUpperCase())) {
-        is_empty = false;
-  			var parts = nomNode.toUpperCase().split(val.toUpperCase());
+			if (nomNode.toUpperCase().includes(val.toUpperCase())) {
+				is_empty = false;
+				var parts = nomNode.toUpperCase().split(val.toUpperCase());
+				
+				/*create a DIV element for each matching element:*/
+				b = document.createElement("div");
+				b.setAttribute("class", "autocomplete-item");
 
-			  /*create a DIV element for each matching element:*/
-			  b = document.createElement("div");
-        b.setAttribute("class", "autocomplete-item");
+				/*make the matching letters bold:*/
+				if (parts[0].length == 0) b.innerHTML = "";
+				else b.innerHTML = "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(0, parts[0].length) + "</span>";
+				
+				b.innerHTML += nomNode.substr(parts[0].length, val.length);
+				b.innerHTML += "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(parts[0].length + val.length) + "</span>";
+				b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].year + ")</span>";
 
-			  /*make the matching letters bold:*/
-			  if (parts[0].length == 0) b.innerHTML = "";
-			  else b.innerHTML = "<span style='font-weight: bold;'>" + nomNode.substr(0, parts[0].length) + "</span>";
-			  b.innerHTML += nomNode.substr(parts[0].length, val.length);
-			  b.innerHTML += "<span style='font-weight: bold;'>" + nomNode.substr(parts[0].length + val.length) + "</span>";
-			  b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].year + ")</span>";
+				/*include node id to keep track of which is it*/
+				b.dataset.id = node;
 
-        /*include node id to keep track of which is it*/
-        b.dataset.id = node;
+				/*execute a function when someone clicks on the item value (DIV element):*/
+				b.addEventListener("click", function(e) {
+					/*insert the value for the autocomplete text field:*/
+					var n = this.dataset.id;
+					inp.value = obj[n].name;
 
-			  /*execute a function when someone clicks on the item value (DIV element):*/
-			  b.addEventListener("click", function(e) {
-				  /*insert the value for the autocomplete text field:*/
-				  var n = this.dataset.id;
-				  inp.value = obj[n].name;
+					switch (act) {
+						case "search":
+							// Move camera to desired node
+							cameraGoto(obj[n].x, obj[n].y);
+							break;
+						case "addEdge":
+							// @TODO: Add an edge between A and B
+							alert(obj[n].name);
+							break;
+					}
 
-				  switch (act) {
-  					case "search":
-  					  // Move camera to desired node
-  						cameraGoto(obj[n].x, obj[n].y);
-  						break;
-  					case "addEdge":
-  					  // @TODO: Add an edge between A and B
-  					  alert(obj[n].name);
-  					  break;
-				  }
+					/*close the list of autocompleted values,
+					(or any other open lists of autocompleted values:*/
+					clearLists();
+				});
 
-				  /*close the list of autocompleted values,
-				  (or any other open lists of autocompleted values:*/
-				  clearLists();
-			  });
+				// Set "data-edges" attribute and compare with others
+				var nEdges = Object.keys(s.graph.neighbors(node)).length;
+				b.dataset.edges = nEdges;
+				var inserted = false;
 
-			  // Set "data-edges" attribute and compare with others
-			  var nEdges = Object.keys(s.graph.neighbors(node)).length;
-			  b.dataset.edges = nEdges;
-			  var inserted = false;
+				// Sort nodes by degree
+				for (i in document.querySelector("#autocomplete-list").childNodes) {
+					var child = document.querySelector("#autocomplete-list").childNodes[i];
+					if (!child.dataset) break;
+					if (nEdges > child.dataset.edges) {
+						document.querySelector("#autocomplete-list").insertBefore(b, child);
+						inserted = true;
+						break;
+					}
+				}
 
-			  // Sort nodes by degree
-			  for (i in document.querySelector("#autocomplete-list").childNodes) {
-				  var child = document.querySelector("#autocomplete-list").childNodes[i];
-				  if (!child.dataset) break;
-				  if (nEdges > child.dataset.edges) {
-					  document.querySelector("#autocomplete-list").insertBefore(b, child);
-					  inserted = true;
-					  break;
-				  }
-			  }
+				if (!inserted) {
+					document.querySelector("#autocomplete-list").appendChild(b);
+				}
+			}
+		}
 
-			  if (!inserted) {
-				  document.querySelector("#autocomplete-list").appendChild(b);
-			  }
-		  }
-    }
+		document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");
+	});
 
-    document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");
-  });
+	document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {
+		document.querySelector("#search-input").value = "";
+		this.style.display = "none";
+	});
 
-  document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {
-    document.querySelector("#search-input").value = "";
-    this.style.display = "none";
-  });
-
-  /*execute a function presses a key on the keyboard:*/
-  inp.addEventListener("keydown", function(e) {
-      var x = document.getElementById("autocomplete-list");
-      if (x) x = x.getElementsByTagName("div");
-      if (x.length == 0) return;
-      if (e.keyCode == 40) {
-        /*If the objow DOWN key is pressed,
-        increase the currentFocus variable:*/
-        currentFocus++;
-        /*and and make the current item more visible:*/
-        addActive(x);
-      } else if (e.keyCode == 38) { //up
-        /*If the objow UP key is pressed,
-        decrease the currentFocus variable:*/
-        currentFocus--;
-        /*and and make the current item more visible:*/
-        addActive(x);
-      } else if (e.keyCode == 13) {
-        /*If the ENTER key is pressed, prevent the form from being submitted,*/
-        e.preventDefault();
-        if (currentFocus > -1) {
-          /*and simulate a click on the "active" item:*/
-          if (x) x[currentFocus].click();
-        }
-      }
-  });
-  function addActive(x) {
-    /*a function to classify an item as "active":*/
-    if (!x) return false;
-    /*start by removing the "active" class on all items:*/
-    removeActive(x);
-    if (currentFocus >= x.length) currentFocus = 0;
-    if (currentFocus < 0) currentFocus = (x.length - 1);
-    /*add class "autocomplete-active":*/
-    x[currentFocus].classList.add("autocomplete-active");
-  }
-  function removeActive(x) {
-    /*a function to remove the "active" class from all autocomplete items:*/
-    for (var i = 0; i < x.length; i++) {
-      x[i].classList.remove("autocomplete-active");
-    }
-  }
-  function clearLists() {
-    /*close all autocomplete lists in the document,
-    except the one passed as an argument:*/
-    var x = document.querySelector("#autocomplete-list");
-    x.innerHTML = "";
-    document.querySelector(".autocomplete-container").style.display = "none";
-  }
-  /*execute a function when someone clicks in the document:*/
-  document.addEventListener("click", function (e) {
-      clearLists();
-  });
+	/*execute a function presses a key on the keyboard:*/
+	inp.addEventListener("keydown", function(e) {
+		var x = document.getElementById("autocomplete-list");
+		if (x) x = x.getElementsByTagName("div");
+		if (x.length == 0) return;
+		if (e.keyCode == 40) {
+			/*If the objow DOWN key is pressed,
+			increase the currentFocus variable:*/
+			currentFocus++;
+			/*and and make the current item more visible:*/
+			addActive(x);
+		} else if (e.keyCode == 38) { //up
+			/*If the objow UP key is pressed,
+			decrease the currentFocus variable:*/
+			currentFocus--;
+			/*and and make the current item more visible:*/
+			addActive(x);
+		} else if (e.keyCode == 13) {
+			/*If the ENTER key is pressed, prevent the form from being submitted,*/
+			e.preventDefault();
+			if (currentFocus > -1) {
+				/*and simulate a click on the "active" item:*/
+				if (x) x[currentFocus].click();
+			}
+		}
+	});
+	function addActive(x) {
+		/*a function to classify an item as "active":*/
+		if (!x) return false;
+		/*start by removing the "active" class on all items:*/
+		removeActive(x);
+		if (currentFocus >= x.length) currentFocus = 0;
+		if (currentFocus < 0) currentFocus = (x.length - 1);
+		/*add class "autocomplete-active":*/
+		x[currentFocus].classList.add("autocomplete-active");
+	}
+	function removeActive(x) {
+		/*a function to remove the "active" class from all autocomplete items:*/
+		for (var i = 0; i < x.length; i++) {
+			x[i].classList.remove("autocomplete-active");
+		}
+	}
+	function clearLists() {
+		/*close all autocomplete lists in the document,
+		except the one passed as an argument:*/
+		var x = document.querySelector("#autocomplete-list");
+		x.innerHTML = "";
+		document.querySelector(".autocomplete-container").style.display = "none";
+	}
+	/*execute a function when someone clicks in the document:*/
+	document.addEventListener("click", function (e) {
+		clearLists();
+	});
 }
diff --git a/js/camera.js b/js/camera.js
new file mode 100644
index 0000000..ac4894f
--- /dev/null
+++ b/js/camera.js
@@ -0,0 +1,22 @@
+window.addEventListener('load', initCamera);
+
+function cameraGoto(nodeX, nodeY) {
+	sigma.misc.animation.camera( s.camera,
+		{ x: nodeX, y: nodeY, ratio: 1 },
+		{ duration: s.settings('animationsTime') || 300 }
+	);
+}
+
+function initCamera() {
+	document.querySelector("#zoomin").addEventListener("click", function() {
+		s.camera.goTo({
+			ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2))
+		});
+	});
+
+	document.querySelector("#zoomout").addEventListener("click", function() {
+		s.camera.goTo({
+			ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2))
+		});
+	});
+}
diff --git a/js/circle-mode.js b/js/circle-mode.js
new file mode 100644
index 0000000..ea5f423
--- /dev/null
+++ b/js/circle-mode.js
@@ -0,0 +1,32 @@
+window.addEventListener("load", initCircleMode);
+
+circleMode = false;
+
+function initCircleMode() {
+	document.querySelector("#circle-mode").addEventListener('click', function() {
+		if(circleMode) {
+			circleMode = false;
+			document.querySelector("#circle-mode i").innerText = "trip_origin";
+
+			s.graph.nodes().forEach(function(n) {
+				n.x = n.originalX;
+				n.y = n.originalY;
+				n.size = 10;
+			});
+			
+			s.refresh();
+			
+		}
+		else {	
+			circleMode = true;
+			document.querySelector("#circle-mode i").innerText = "shuffle";
+			
+			s.graph.nodes().forEach(function(n) {
+				n.x = n.circleX;
+				n.y = n.circleY;		
+			});
+			
+			s.refresh();
+		}
+	});
+}
\ No newline at end of file
diff --git a/js/dialog.js b/js/dialog.js
new file mode 100644
index 0000000..275fb0c
--- /dev/null
+++ b/js/dialog.js
@@ -0,0 +1,82 @@
+window.addEventListener("load", initDialog);
+
+var dialog = {
+	fill: function(data, text, html=false) {
+		var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");
+		for (var i in el) {
+			if (html === true) {
+				el[i].innerHTML = text;
+			} else {
+				el[i].innerText = text;
+			}
+		}
+	},
+	show: function(id, neighbors) {
+		var neighbors = Object.values(neighbors);
+
+		this.fill("name", graf.nodes[id].name);
+		this.fill("year", graf.nodes[id].year);
+		this.fill("sex", graf.nodes[id].sex);
+		this.fill("id", "#"+id);
+		this.fill("n-edges", neighbors.length);
+
+		var list = "";
+		neighbors.forEach(function (a) {
+			list += "<li><b>"+graf.nodes[id].name+" - "+a.label+":</b> "+(graf.edges[id+"_"+a.id] ? graf.edges[id+"_"+a.id].votes : graf.edges[a.id+"_"+id].votes)+" vots</li>";
+		});
+		this.fill("edges", list, true);
+
+		if (window.innerWidth > 700) {
+			document.querySelector("#dialog").style.display = "block";
+			document.querySelector("#backdrop-container").style.display = "block";
+		} else {
+			document.querySelector("#summary-dialog").style.display = "block";
+		}
+	},
+	close: function() {
+		document.querySelector("#dialog").style.display = "none";
+		document.querySelector("#summary-dialog").style.display = "none";
+		document.querySelector("#backdrop-container").style.display = "none";
+
+		s.graph.nodes().forEach(function(n) {
+			n.color = n.originalColor;
+		});
+
+		s.graph.edges().forEach(function(e) {
+			e.color = e.originalColor;
+		});
+
+		if(circleMode) {
+			s.graph.nodes().forEach(function (n) {
+				n.x = n.circleX;
+				n.y = n.circleY;
+				n.size = 10;
+			});
+		}
+		else {
+			s.graph.nodes().forEach(function (n) {
+				n.x = n.originalX;
+				n.y = n.originalY;
+				n.size = 10;
+			});
+		}
+		s.refresh();
+
+	},
+	max: function() {
+		document.querySelector("#summary-dialog").style.display = "none";
+		document.querySelector("#dialog").style.display = "block";
+	},
+	min: function() {
+		document.querySelector("#dialog").style.display = "none";
+		document.querySelector("#summary-dialog").style.display = "block";
+	}
+};
+
+
+function initDialog() {
+	document.querySelector("#quit-dialog").addEventListener("click", dialog.close);
+	document.querySelector("#quit2-dialog").addEventListener("click", dialog.close);
+	document.querySelector("#max-dialog").addEventListener("click", dialog.max);
+	document.querySelector("#min-dialog").addEventListener("click", dialog.min);
+}
diff --git a/js/easter-egg.js b/js/easter-egg.js
new file mode 100644
index 0000000..ac73b2a
--- /dev/null
+++ b/js/easter-egg.js
@@ -0,0 +1,40 @@
+window.addEventListener("load", initEasterEgg);
+
+var seq = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66, 13];
+var cur = 0;
+
+function justdoit() {
+	s.graph.nodes().forEach(function(n) {
+		switch(n.color) {
+			case "#d61c08":
+			n.color = "#0159aa";
+			break;
+
+			case "#0159aa":
+			n.color = "#0ca80a";
+			break;
+
+			case "#0ca80a":
+			n.color = "#d61c08";
+			break;
+		}
+	});
+
+	s.refresh();
+	setTimeout(justdoit, 333);
+}
+
+
+function initEasterEgg() {
+	document.addEventListener("keydown", function() {
+		if (event.key == "f" && event.target.getAttribute("id") != "search-input") altSearchBar();
+		if (event.which == seq[cur]) {
+			if (cur < seq.length) {
+				++cur;
+				if (cur == seq.length) {
+					justdoit();
+				}
+			}
+		} else cur = 0;
+	});
+}
diff --git a/js/graf.js b/js/graf.js
new file mode 100644
index 0000000..feab604
--- /dev/null
+++ b/js/graf.js
@@ -0,0 +1,181 @@
+window.addEventListener("load", initGraf);
+
+// s is the sigma graph
+// graf is the JSON graph
+var s, graf;
+
+// query dario JSON for the graph information
+function xhr(method, url, params, callback) {
+	var http = new XMLHttpRequest();
+	if (method == "POST") {
+		http.open(method, url, true);
+	} else {
+		if (params != "") {
+			http.open(method, url+"?"+params, true);
+		} else {
+			http.open(method, url, true);
+		}
+	}
+	http.onload = function() {
+		if(this.status != 200) {
+			console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
+		}
+		callback(this.responseText, this.status);
+	};
+	if (method == "POST") {
+		http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+		http.send(params);
+	} else {
+		http.send();
+	}
+}
+
+
+function initGraf() {
+	// create new methods for sigma library
+	updateSigma();
+	
+	// create graf, s is the sigma graf
+	s = new sigma({
+		renderers: [{
+			container: "graf",
+			type: "webgl"
+		}],
+		settings: {
+			defaultEdgeColor: "#fff",
+			edgeColor: "default",
+			defaultLabelColor: "#fff",
+			autoRescale: false,
+			zoomMax: 10,
+			// enableEdgeHovering: true,
+			font: "Roboto",
+			labelThreshold: 5
+		}
+	});
+
+	
+	// query for JSON for graph data
+	xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
+		// graf is the JSON data
+		graf = JSON.parse(responseText);
+
+		// does graf.nodes have a size attribute?
+		var sizegraf = 0;
+		for (var i in graf.nodes) {
+			sizegraf++;
+		}
+		
+		var nnode = 0;
+		for (var i in graf.nodes) {
+			var ncolor = null;
+			
+			if(graf.nodes[i].sex =="F") ncolor = "#d61c08";
+			else if(graf.nodes[i].sex == "M") ncolor = "#0159aa";
+			else ncolor = "#0ca80a";
+			
+			// post-processing for year corrections
+			if(1970 < graf.nodes[i].year && graf.nodes[i].year < 2004) graf.nodes[i].year += 18;
+			
+			var newX = 5000*Math.cos( 2*Math.PI*nnode/sizegraf );
+			var newY = 5000*Math.sin( 2*Math.PI*nnode/sizegraf );	
+			
+			s.graph.addNode({
+				// we add color, originalColor, size, originalX..Y, circleX..Y atributes
+				id: graf.nodes[i].id,
+				year: graf.nodes[i].year,
+				sex: graf.nodes[i].sex,
+				label: graf.nodes[i].name,
+				x: graf.nodes[i].x,
+				y: graf.nodes[i].y, 
+				circleX: newX,
+				circleY: newY,
+				originalX: graf.nodes[i].x,
+				originalY: graf.nodes[i].y, 
+				size: 10,
+				color: ncolor,
+				originalColor: ncolor
+			});
+			nnode++;
+		}
+
+		for (var i in graf.edges) {
+			
+			s.graph.addEdge({
+				id: i,
+				source: graf.edges[i].a,
+				target: graf.edges[i].b,
+				size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
+			});
+		
+		}
+
+		s.bind('clickNode', function(e) {			
+			var nodeId = e.data.node.id,
+				toKeep = s.graph.neighbors(nodeId);
+				// toKeep[nodeId] = e.data.node;
+	
+			s.graph.nodes().forEach(function(n) {
+				if (toKeep[n.id] || n.id == nodeId) {
+					n.color = n.originalColor;
+				} else {
+					n.color = '#333';
+				}
+			});
+
+			s.graph.edges().forEach(function(e) {
+				if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
+					e.color = '#fff';
+				} else {
+					e.color = '#333';
+				}
+			});
+			
+			if (circleMode) {
+				e.data.node.x = 0;
+				e.data.node.y = 0;
+				e.data.node.size = 30;
+			}
+			
+			s.refresh();
+
+			dialog.show(nodeId, toKeep);
+		});
+
+
+		s.refresh();
+		initSearchBar();
+
+		autocomplete(document.querySelector("#search-input"), graf.nodes, "search");
+	});
+}
+
+function updateSigma() {
+	// returns set of neighouts
+	sigma.classes.graph.addMethod("neighbors", function(nodeId) {
+		var k,
+		neighbors = {},
+		index = this.allNeighborsIndex[nodeId] || [];
+
+		for (k in index) {
+			neighbors[k] = this.nodesIndex[k];
+		}
+
+		return neighbors;
+	});
+	
+	// returns number of neighbours from a set of years
+	sigma.classes.graph.addMethod("numNeighborsFromYears", function(nodeId, showYearsCopy) {
+		var k,
+		neighbors = 0,
+		index = this.allNeighborsIndex[nodeId] || [];
+
+		for (k in index) {
+			if(this.nodesIndex){
+				if (showYearsCopy.has("" + this.nodesIndex[k].year)) neighbors++;
+				else if (this.nodesIndex[k].year == 0) neighbors++;
+			}
+		}
+		
+		return neighbors;
+	});
+}
\ No newline at end of file
diff --git a/js/limit-years.js b/js/limit-years.js
new file mode 100644
index 0000000..6d99c37
--- /dev/null
+++ b/js/limit-years.js
@@ -0,0 +1,89 @@
+window.addEventListener("load", addYearList);
+
+var limitYears = false;
+var showYears = new Set();
+
+function repaint() {
+	//targetYear: graf.nodes[e.source].year,
+	if(limitYears) {
+		var added = new Set();
+		
+		s.graph.nodes().forEach(function(n) {
+			var numNeig = s.graph.numNeighborsFromYears(n.id, showYears);
+			
+			if ((n.year == 0 && (n.sex == 'F' || n.sex == 'M') )
+					|| numNeig == 0
+					|| (!showYears.has("" + n.year) && (n.year != 0) )) {
+				n.hidden = true;
+			}
+			else {
+				n.hidden = false;
+				added.add(n.id);
+			}
+		});
+		
+		s.graph.edges().forEach(function(e) {
+			if(!added.has(e.source) && !added.has(e.target)){
+				e.hidden = true;
+			}
+			else e.hidden = false;
+		}); 
+	}
+	else {
+		s.graph.nodes().forEach(function(n) {
+			n.hidden = false;
+		});
+		
+		s.graph.edges().forEach(function(e) {
+			e.hidden = false;
+		});
+	}
+}
+
+function altYearList() {
+	var yearlist = document.querySelector("#year-list");
+	
+	if(yearlist.style.display == "none"){
+		yearlist.style.display = "block";
+		yearLimits = true;
+	}
+	else{
+		yearlist.style.display = "none";
+		yearLimits = true;
+	}
+}
+
+function addYearList() {	
+	var ylistspan = document.querySelector("#year-list-span")
+	for(var year=2006; year<2019; year++) {
+		var yin = document.createElement("input");
+		yin.type = "checkbox";
+		yin.class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored";
+		yin.name = "" + year;
+		yin.addEventListener("change", function(){ 
+			limitYears = true;
+			
+			if(this.checked) {
+				showYears.add(this.name);
+			}
+			else {
+				showYears.delete(this.name);
+			}
+			
+			if(showYears.size == 0) limitYears = false;
+			
+			repaint();
+			
+			s.refresh();
+		});
+		
+		var lab = document.createElement("label");
+		lab.innerHTML = "" + year + "<br>";
+		
+		ylistspan.appendChild(yin);
+		ylistspan.appendChild(lab);
+	}
+	
+	document.querySelector("#settings").addEventListener("click", altYearList);
+}
+
diff --git a/js/search-bar.js b/js/search-bar.js
new file mode 100644
index 0000000..a52ee65
--- /dev/null
+++ b/js/search-bar.js
@@ -0,0 +1,15 @@
+function altSearchBar() {
+	if (document.querySelector(".md-google-search__metacontainer").style.display == "none") {
+		document.querySelector(".md-google-search__metacontainer").style.display = "block";
+		document.querySelector("#search i").innerText = "fullscreen";
+	} else {
+		document.querySelector(".md-google-search__metacontainer").style.display = "none";
+		document.querySelector(".autocomplete-container").style.display = "none";
+		document.querySelector("#search i").innerText = "search";
+	}
+}
+
+function initSearchBar() {
+	document.querySelector("#search").addEventListener("click", altSearchBar);
+	if (window.innerWidth > 700) altSearchBar();
+}