Minor bug fixes and code formatting, and limit-years style modified a little bit
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..6241a8a
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,22 @@
+#Contributing
+For the sake of safe and understandable code, we divide our JS scripts and CSS styles into multiples files. But, to make the page load faster, before committing, please run `sh concatenate.sh` so all those files are concatenated.
+
+This will concatenate the files in the following way:
+
+The file script.js will be created with the concatenation of the following files: (in this order)
+1. circle-mode.js
+2. graf.js
+3. limit-years.js
+4. search-bar.js
+5. dialog.js
+6. camera.js
+7. just-do-it.js
+8. init.js
+
+The file styles.css will be created with the concatenation of the following files: (in this order)
+1. general.css
+2. graf.css
+3. dialog.css
+4. option-buttons.css
+5. year-list.css
+6. search-bar.css
diff --git a/README.md b/README.md
index 27b3fd4..6cd7bdd 100644
--- a/README.md
+++ b/README.md
@@ -1,74 +1,10 @@
 # Graf Alternatiu de la FME

 ## Independent interface for FME's graph

 

-This project is an alternative read-only user-interface for FME's graph. It is compatible and user-friendly with mobile devices.

+This project is an alternative read-only user-interface for the FME's graph. It is compatible and user-friendly with mobile devices.

 

 ## How to contibute

-For the sake of safe and understandable code, we divide our JS scripts and CSS styles into multiples files. But, to make the page load faster, before a pull request, you should concatenate these files in the following manner. <br><br>

-

-In the file script.js, concatenate: (order is important!)

-<ol>

-	<li>circle-mode.js</li>

-	<li>graf.js</li>

-	<li>limit-years.js</li>

-	<li>search-bar.js</li>

-	<li>dialog.js</li>

-	<li>camera.js</li>

-	<li>easter-eg.js</li>

-</ol>

-<br><br>

-

-In the file styles.css, concatenate: (order is important!)

-<ol>

-	<li>general.css</li>

-	<li>graf.css</li>

-	<li>dialog.css</li>

-	<li>option-buttons.css</li>

-	<li>year-list.css</li>

-	<li>search-bar.css</li>

-</ol>

+Check out [CONTRIBUTING.md](CONTRIBUTING.md).

 

 ## Things to do

-<ul>

-	<li>

-		Make limit-years prettier and incluse/exclusive with double check-boxes

-	</li>

-	<li>

-		Make statistics about the graph: biggest K_n, diameter, etc...

-	</li>

-	<li>

-		Make circle-mode + year-limit = smaller-circle-mode

-	</li>

-	<li>

-		Modify the autocomplete so that eliminated nodes don't appear

-	</li>

-	<li>

-		Separate non-connex nodes in circle-mode

-	</li>

-</ul>

-

-

-## Things done

-<ul>

-	<li>

-		Search bar with autocomplete

-	</li>

-	<li>

-		Dialog for nodes

-	</li>

-	<li>

-		Easter egg 

-	</li>

-	<li>

-		Limit years to a specific range

-	</li>

-	<li>

-		Circle visualization

-	</li>

-	<li>

-		Hide nodes inside erasing rectangle and very far from origin

-	</li>

-	<li>

-		Hide zoom buttons for tactile devices

-	</li>

-</ul>

+Check out [TODO.md](TODO.md).

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..a796ab7
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,14 @@
+# TODO
+1. Make limit-years prettier and inclusive/exclusive with double check-boxes
+2. Make statistics about the graph: biggest K_n, diameter, etc...
+3. Make circle-mode + year-limit = smaller-circle-mode
+4. Modify the autocomplete so that eliminated nodes don't appear
+5. Separate non-connex nodes in circle-mode
+
+## Things done
+1. Search bar with autocomplete
+2. Dialog for nodes
+3. Limit years to a specific range
+4. Circle visualization
+5. Hide nodes inside erasing rectangle and very far from origin
+6. Hide zoom buttons for tactile devices
diff --git a/concatenate.sh b/concatenate.sh
new file mode 100644
index 0000000..e8e72c3
--- /dev/null
+++ b/concatenate.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+(cd css && rm -f styles.css && cat general.css graf.css dialog.css option-buttons.css year-list.css search-bar.css > styles.css)
+(cd js && rm -f script.js && cat circle-mode.js graf.js limit-years.js search-bar.js dialog.js camera.js just-do-it.js init.js > script.js)
diff --git a/css/dialog.css b/css/dialog.css
index 313ec29..70d7ff7 100644
--- a/css/dialog.css
+++ b/css/dialog.css
@@ -75,4 +75,4 @@
 	font-weight: bold;

 	font-size: 20px;

 	margin: 0;

-}
\ No newline at end of file
+}

diff --git a/css/general.css b/css/general.css
index eda32ac..27e07e1 100644
--- a/css/general.css
+++ b/css/general.css
@@ -10,4 +10,3 @@
 	user-select: none !important;

 	font-family: 'Roboto';

 }

-

diff --git a/css/graf.css b/css/graf.css
index de6a5a6..d977170 100644
--- a/css/graf.css
+++ b/css/graf.css
@@ -8,4 +8,4 @@
 span {

 	position: relative;

 	z-index: -1;

-}
\ No newline at end of file
+}

diff --git a/css/option-buttons.css b/css/option-buttons.css
index f23168b..2c4ddff 100644
--- a/css/option-buttons.css
+++ b/css/option-buttons.css
@@ -40,4 +40,4 @@
 

 #zoomout.touch {

 	display: none;

-}
\ No newline at end of file
+}

diff --git a/css/search-bar.css b/css/search-bar.css
index 46d121e..48da607 100644
--- a/css/search-bar.css
+++ b/css/search-bar.css
@@ -102,6 +102,8 @@
 	color: black;

 	box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0

 		rgba(255, 255, 255, 0.156863) !important;

+	max-height: 510px;

+  overflow-y: auto;

 }

 

 .autocomplete-item {

@@ -117,7 +119,7 @@
 .autocomplete-year {

 	position: relative;

 	z-index: 120;

-	

+

 	color: #222;

 }

 

@@ -133,4 +135,4 @@
 	#min-dialog {

 		display: block !important;

 	}

-}
\ No newline at end of file
+}

diff --git a/css/styles.css b/css/styles.css
index 29a342a..cb36762 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,304 +1,303 @@
-/* ********** HERE STARTS general.css ****** */
-
-html, body {
-	margin: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #060606;
-	color: white;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	user-select: none !important;
-	font-family: 'Roboto';
-}
-
-
-/* ********** HERE STARTS graf.css ****** */
-
-#graf {
-	width: 100%;
-	height: 100%;
-}
-
-span {
-	position: relative;
-	z-index: -1;
-}
-
-
-/* ********** HERE STARTS dialog.css ****** */
-
-#dialog {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 300px;
-	height: 100%;
-	background-color: white;
-	color: black;
-	z-index: 120;
-	overflow-y: auto;
-}
-
-#backdrop {
-	display: none;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, .5);
-	z-index: 110;
-}
-
-#dialog-vertex, #dialog-edge {
-	padding: 8px;
-	user-select: auto;
-}
-
-#dialog h2 {
-	font-weight: bold;
-	font-size: 20px;
-}
-
-#dialog h3 {
-	font-weight: bold;
-	font-size: 16px;
-	margin-bottom: 0;
-}
-
-#quit-dialog, #quit2-dialog {
-	position: absolute;
-	top: 8px;
-	right: 8px;
-}
-
-#min-dialog, #max-dialog {
-	position: absolute;
-	top: 8px;
-	right: 48px;
-}
-
-#min-dialog {
-	display: none;
-}
-
-#summary-dialog {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100px;
-	background-color: white;
-	color: black;
-	z-index: 120;
-}
-
-#summary-vertex {
-	padding: 8px;
-	user-select: auto;
-}
-
-#summary-dialog h2 {
-	font-weight: bold;
-	font-size: 20px;
-	margin: 0;
-}
-
-/* ********** HERE STARTS search-bar.css ****** */
-#circle-mode {
-	position: absolute;
-	right: 10px;
-	bottom: 210px;
-	z-index: 100;
-}
-
-#settings {
-	position: absolute;
-	right: 10px;
-	bottom: 160px;
-	z-index: 100;
-}
-
-#search {
-	position: absolute;
-	right: 10px;
-	bottom: 110px;
-	z-index: 100;
-}
-
-#zoomin {
-	position: absolute;
-	right: 10px;
-	bottom: 60px;
-	z-index: 100;
-}
-
-#zoomout {
-	position: absolute;
-	right: 10px;
-	bottom: 10px;
-	z-index: 100;
-}
-
-#zoomin.touch {
-	display: none;
-}
-
-#zoomout.touch {
-	display: none;
-}
-
-/* ********** HERE STARTS year-list.css ****** */
-#year-list {
-	padding: 10px;
-	padding-top: 0px;
-	float: right;
-	position:relative;
-	z-index:10;
-	display:none
-}
-
-#year-list-span {
-	position:relative;
-	z-index:10;
-}
-
-
-/* ********** HERE STARTS search-bar.css ****** */
-.md-google-search__metacontainer {
-	position: absolute;
-	top: 10px;
-	height: 48px;
-	width: 100%;
-	z-index: 100;
-}
-
-.md-google-search__container {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	height: 48px;
-	width: Calc(100% - 66px);
-	max-width: 720px;
-	white-space: nowrap;
-}
-
-.md-google-search {
-	height: 48px;
-	background-color: rgba(245, 245, 245, 1);
-	border: 1px solid rgba(0, 0, 0, 0);
-	-webkit-border-radius: 4px;
-	border-radius: 4px;
-	max-width: 720px;
-	position: relative;
-	-webkit-transition: background-color 100ms ease-in, width 100ms ease-out;
-	transition: background-color 100ms ease-in, width 100ms ease-out;
-}
-
-.md-google-search:focus-within {
-	border: 1px solid rgba(0, 0, 0, 0.45);
-	background-color: rgba(255, 255, 255, 1);
-	-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
-	box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
-}
-
-.md-google-search__search-btn {
-	float: left;
-	background: none;
-	border: none;
-	opacity: .54;
-	outline: none;
-	padding: 0 4px;
-	line-height: 0;
-	color: #212121;
-}
-
-.md-google-search__search-btn svg, .md-google-search__empty-btn svg {
-	padding: 7px;
-	margin: 4px;
-}
-
-.md-google-search__field-container {
-	height: 46px;
-	padding: 0 11px;
-	margin-right: 48px;
-}
-
-.md-google-search__field {
-	border: none;
-	font: normal 16px Roboto, sans-serif;
-	height: 24px;
-	outline: none;
-	padding: 11px 0 11px 16px;
-	width: 100%;
-	background: transparent;
-}
-
-.md-google-search__empty-btn {
-	position: absolute;
-	right: 0;
-	top: 0;
-	background: none;
-	border: none;
-	opacity: .54;
-	outline: none;
-	padding: 0 4px;
-	line-height: 0;
-	color: #212121;
-	cursor: pointer;
-}
-
-/**
-  * Search Box Autocomplete
-  */
-.autocomplete-container {
-	z-index: 110;
-	position: absolute;
-	top: 60px;
-	width: 100%;
-}
-
-.autocomplete-items {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	width: Calc(100% - 66px);
-	max-width: 720px;
-	background-color: white;
-	color: black;
-	box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0
-		rgba(255, 255, 255, 0.156863) !important;
-  max-height: 510px;
-  overflow-y: auto;
-}
-
-.autocomplete-item {
-	font-size: 16px;
-	padding: 12px 14px;
-	cursor: pointer;
-}
-
-.autocomplete-item:hover, .autocomplete-active {
-	background: #eee;
-}
-
-.autocomplete-year {
-	position: relative;
-	z-index: 120;
-	
-	color: #222;
-}
-
-@media ( max-width : 700px) {
-	#dialog {
-		width: Calc(100% - 32px) !important;
-		height: Calc(100% - 32px) !important;
-		margin: 16px;
-	}
-	#backdrop {
-		display: block;
-	}
-	#min-dialog {
-		display: block !important;
-	}
-}
+/* ********** HERE STARTS general.css ****** */

+

+html, body {

+	margin: 0;

+	width: 100%;

+	height: 100%;

+	background-color: #060606;

+	color: white;

+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

+	user-select: none !important;

+	font-family: 'Roboto';

+}

+/* ********** HERE STARTS graf.css ****** */

+

+#graf {

+	width: 100%;

+	height: 100%;

+}

+

+span {

+	position: relative;

+	z-index: -1;

+}

+/* ********** HERE STARTS dialog.css ****** */

+

+#dialog {

+	position: absolute;

+	top: 0px;

+	left: 0px;

+	width: 300px;

+	height: 100%;

+	background-color: white;

+	color: black;

+	z-index: 120;

+	overflow-y: auto;

+}

+

+#backdrop {

+	display: none;

+	position: absolute;

+	top: 0;

+	left: 0;

+	width: 100%;

+	height: 100%;

+	background-color: rgba(0, 0, 0, .5);

+	z-index: 110;

+}

+

+#dialog-vertex, #dialog-edge {

+	padding: 8px;

+	user-select: auto;

+}

+

+#dialog h2 {

+	font-weight: bold;

+	font-size: 20px;

+}

+

+#dialog h3 {

+	font-weight: bold;

+	font-size: 16px;

+	margin-bottom: 0;

+}

+

+#quit-dialog, #quit2-dialog {

+	position: absolute;

+	top: 8px;

+	right: 8px;

+}

+

+#min-dialog, #max-dialog {

+	position: absolute;

+	top: 8px;

+	right: 48px;

+}

+

+#min-dialog {

+	display: none;

+}

+

+#summary-dialog {

+	position: absolute;

+	top: 0px;

+	left: 0px;

+	width: 100%;

+	height: 100px;

+	background-color: white;

+	color: black;

+	z-index: 120;

+}

+

+#summary-vertex {

+	padding: 8px;

+	user-select: auto;

+}

+

+#summary-dialog h2 {

+	font-weight: bold;

+	font-size: 20px;

+	margin: 0;

+}

+/* ********** HERE STARTS search-bar.css ****** */

+#circle-mode {

+	position: absolute;

+	right: 10px;

+	bottom: 210px;

+	z-index: 100;

+}

+

+#settings {

+	position: absolute;

+	right: 10px;

+	bottom: 160px;

+	z-index: 100;

+}

+

+#search {

+	position: absolute;

+	right: 10px;

+	bottom: 110px;

+	z-index: 100;

+}

+

+#zoomin {

+	position: absolute;

+	right: 10px;

+	bottom: 60px;

+	z-index: 100;

+}

+

+#zoomout {

+	position: absolute;

+	right: 10px;

+	bottom: 10px;

+	z-index: 100;

+}

+

+#zoomin.touch {

+	display: none;

+}

+

+#zoomout.touch {

+	display: none;

+}

+/* ********** HERE STARTS year-list.css ****** */

+

+#year-list {

+	padding: 16px;

+	padding-top: 0;

+	position:absolute;

+	right: 0;

+	top: 68px;

+	z-index:10;

+	display:none

+}

+

+#year-list-span {

+	position:relative;

+	z-index:10;

+}

+

+.custom-checkbox .mdl-checkbox__box-outline {

+	border: 2px solid rgba(0,0,0,.8)!important;

+	background-color: white!important;

+}

+/* ********** HERE STARTS search-bar.css ****** */

+.md-google-search__metacontainer {

+	position: absolute;

+	top: 10px;

+	height: 48px;

+	width: 100%;

+	z-index: 100;

+}

+

+.md-google-search__container {

+	display: block;

+	margin-left: auto;

+	margin-right: auto;

+	height: 48px;

+	width: Calc(100% - 66px);

+	max-width: 720px;

+	white-space: nowrap;

+}

+

+.md-google-search {

+	height: 48px;

+	background-color: rgba(245, 245, 245, 1);

+	border: 1px solid rgba(0, 0, 0, 0);

+	-webkit-border-radius: 4px;

+	border-radius: 4px;

+	max-width: 720px;

+	position: relative;

+	-webkit-transition: background-color 100ms ease-in, width 100ms ease-out;

+	transition: background-color 100ms ease-in, width 100ms ease-out;

+}

+

+.md-google-search:focus-within {

+	border: 1px solid rgba(0, 0, 0, 0.45);

+	background-color: rgba(255, 255, 255, 1);

+	-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5);

+	box-shadow: 0 1px 1px rgba(255, 255, 255, .5);

+}

+

+.md-google-search__search-btn {

+	float: left;

+	background: none;

+	border: none;

+	opacity: .54;

+	outline: none;

+	padding: 0 4px;

+	line-height: 0;

+	color: #212121;

+}

+

+.md-google-search__search-btn svg, .md-google-search__empty-btn svg {

+	padding: 7px;

+	margin: 4px;

+}

+

+.md-google-search__field-container {

+	height: 46px;

+	padding: 0 11px;

+	margin-right: 48px;

+}

+

+.md-google-search__field {

+	border: none;

+	font: normal 16px Roboto, sans-serif;

+	height: 24px;

+	outline: none;

+	padding: 11px 0 11px 16px;

+	width: 100%;

+	background: transparent;

+}

+

+.md-google-search__empty-btn {

+	position: absolute;

+	right: 0;

+	top: 0;

+	background: none;

+	border: none;

+	opacity: .54;

+	outline: none;

+	padding: 0 4px;

+	line-height: 0;

+	color: #212121;

+	cursor: pointer;

+}

+

+/**

+  * Search Box Autocomplete

+  */

+.autocomplete-container {

+	z-index: 110;

+	position: absolute;

+	top: 60px;

+	width: 100%;

+}

+

+.autocomplete-items {

+	display: block;

+	margin-left: auto;

+	margin-right: auto;

+	width: Calc(100% - 66px);

+	max-width: 720px;

+	background-color: white;

+	color: black;

+	box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0

+		rgba(255, 255, 255, 0.156863) !important;

+	max-height: 510px;

+  overflow-y: auto;

+}

+

+.autocomplete-item {

+	font-size: 16px;

+	padding: 12px 14px;

+	cursor: pointer;

+}

+

+.autocomplete-item:hover, .autocomplete-active {

+	background: #eee;

+}

+

+.autocomplete-year {

+	position: relative;

+	z-index: 120;

+

+	color: #222;

+}

+

+@media ( max-width : 700px) {

+	#dialog {

+		width: Calc(100% - 32px) !important;

+		height: Calc(100% - 32px) !important;

+		margin: 16px;

+	}

+	#backdrop {

+		display: block;

+	}

+	#min-dialog {

+		display: block !important;

+	}

+}

diff --git a/css/year-list.css b/css/year-list.css
index 45993b2..d30f7d8 100644
--- a/css/year-list.css
+++ b/css/year-list.css
@@ -1,9 +1,11 @@
 /* ********** HERE STARTS year-list.css ****** */

+

 #year-list {

-	padding: 10px;

-	padding-top: 0px;

-	float: right;

-	position:relative;

+	padding: 16px;

+	padding-top: 0;

+	position:absolute;

+	right: 0;

+	top: 68px;

 	z-index:10;

 	display:none

 }

@@ -11,4 +13,9 @@
 #year-list-span {

 	position:relative;

 	z-index:10;

-}
\ No newline at end of file
+}

+

+.custom-checkbox .mdl-checkbox__box-outline {

+	border: 2px solid rgba(0,0,0,.8)!important;

+	background-color: white!important;

+}

diff --git a/js/autocomplete.js b/js/autocomplete.js
index 107b03a..36bfa8c 100644
--- a/js/autocomplete.js
+++ b/js/autocomplete.js
@@ -1,152 +1,152 @@
 // *********** HERE STARTS autocomplete.js *************

 

 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());

-				

-				/*create a DIV element for each matching element:*/

-				b = document.createElement("div");

-				b.setAttribute("class", "autocomplete-item");

+      if (nomNode.toUpperCase().includes(val.toUpperCase())) {

+        is_empty = false;

+        var parts = nomNode.toUpperCase().split(val.toUpperCase());

 

-				/*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>";

+        /*create a DIV element for each matching element:*/

+        b = document.createElement("div");

+        b.setAttribute("class", "autocomplete-item");

 

-				/*include node id to keep track of which is it*/

-				b.dataset.id = node;

+        /*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>";

 

-				/*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;

+        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>";

 

-					var node = null;

-					

-					s.graph.nodes().forEach( function(nnode) {

-						if(nnode.id == n) node = nnode;

-					});

-					

+        /*include node id to keep track of which is it*/

+        b.dataset.id = node;

 

-					switch (act) {

-						case "search":

-							// Move camera to desired node

-							cameraGoto(node.x, node.y);

-							break;

-						case "addEdge":

-							// @TODO: Add an edge between A and B

-							alert(obj[n].name);

-							break;

-					}

+        /*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;

 

-					/*close the list of autocompleted values,

-					(or any other open lists of autocompleted values:*/

-					clearLists();

-				});

+          var node = null;

 

-				// Set "data-edges" attribute and compare with others

-				var nEdges = Object.keys(s.graph.neighbors(node)).length;

-				b.dataset.edges = nEdges;

-				var inserted = false;

+          s.graph.nodes().forEach( function(nnode) {

+            if(nnode.id == n) node = nnode;

+          });

 

-				// 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);

-				}

-			}

-		}

+          switch (act) {

+            case "search":

+            // Move camera to desired node

+            cameraGoto(node.x, node.y);

+            break;

+            case "addEdge":

+            // @TODO: Add an edge between A and B

+            alert(obj[n].name);

+            break;

+          }

 

-		document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");

-	});

+          /*close the list of autocompleted values,

+          (or any other open lists of autocompleted values:*/

+          clearLists();

+        });

 

-	document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {

-		document.querySelector("#search-input").value = "";

-		this.style.display = "none";

-	});

+        // Set "data-edges" attribute and compare with others

+        var nEdges = Object.keys(s.graph.neighbors(node)).length;

+        b.dataset.edges = nEdges;

+        var inserted = false;

 

-	/*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();

-	});

+        // 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);

+        }

+      }

+    }

+

+    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";

+  });

+

+  /*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
index 44e9f5d..6c70643 100644
--- a/js/camera.js
+++ b/js/camera.js
@@ -1,8 +1,5 @@
 // *********** HERE STARTS camera.js *************

 

-

-window.addEventListener('load', initCamera);

-

 function cameraGoto(nodeX, nodeY) {

 	sigma.misc.animation.camera( s.camera,

 		{ x: nodeX, y: nodeY, ratio: 1 },

@@ -11,41 +8,38 @@
 }

 

 function is_touch_device() {

-	  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

-	  var mq = function(query) {

-	    return window.matchMedia(query).matches;

-	  }

+	var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

+	var mq = function(query) {

+		return window.matchMedia(query).matches;

+	}

 

-	  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {

-	    return true;

-	  }

+	if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {

+		return true;

+	}

 

-	  // include the 'heartz' as a way to have a non matching MQ to help terminate the join

-	  // https://git.io/vznFH

-	  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');

-	  return mq(query);

+	// include the 'heartz' as a way to have a non matching MQ to help terminate the join

+	// https://git.io/vznFH

+	var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');

+	return mq(query);

 }

 

 function initCamera() {

-	

 	if(!is_touch_device()) {

-		

 		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))

 			});

 		});

-	}

-	else{

+	} else {

 		document.querySelector("#zoomin").style.display = "none";

 		document.querySelector("#zoomout").style.display = "none";

-		

+

 		document.querySelector("#circle-mode").style.bottom = "110px";

 		document.querySelector("#settings").style.bottom = "60px";

 		document.querySelector("#search").style.bottom = "10px";

diff --git a/js/circle-mode.js b/js/circle-mode.js
index d5ecff3..492c6c6 100644
--- a/js/circle-mode.js
+++ b/js/circle-mode.js
@@ -1,52 +1,48 @@
 // *********** HERE STARTS circle-mode.js *************

 

-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";

+  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();

-		}

-	});

+      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 = "scatter_plot";

+

+      s.graph.nodes().forEach(function(n) {

+        n.x = n.circleX;

+        n.y = n.circleY;

+      });

+

+      s.refresh();

+    }

+  });

 }

 

-function isInRect (x, y, rect) {

-	if (x < -10000 || x > 10000) return true;

-	if (y < -10000 || y > 10000) return true;

-	

-	var ans = true;

-	var c = crossProd (rect[0], rect[1], x, y);

-	

-	for(var i=1; i<4; i++) {	

-		var temp = crossProd (rect[i], rect[(i+1)%4], x, y);

-		if (c*temp < 0) ans = false;

-	}

-	return ans;

+function isInRect(x, y, rect) {

+  if (x < -10000 || x > 10000) return true;

+  if (y < -10000 || y > 10000) return true;

+

+  var ans = true;

+  var c = crossProd (rect[0], rect[1], x, y);

+

+  for(var i = 1; i < 4; i++) {

+    var temp = crossProd (rect[i], rect[(i+1)%4], x, y);

+    if (c*temp < 0) ans = false;

+  }

+  return ans;

 }

 

 function crossProd(r1, r2, x, y) {

-	return r1[0]*r2[1] + r2[0]*y + x*r1[1] - r1[0]*y - r2[0]*r1[1] - x*r2[1]; 

-}
\ No newline at end of file
+  return r1[0]*r2[1] + r2[0]*y + x*r1[1] - r1[0]*y - r2[0]*r1[1] - x*r2[1];

+}

diff --git a/js/dialog.js b/js/dialog.js
index ff3268f..6e1c3f8 100644
--- a/js/dialog.js
+++ b/js/dialog.js
@@ -1,7 +1,5 @@
 // *********** HERE STARTS dialog.js *************

 

-window.addEventListener("load", initDialog);

-

 var dialog = {

 	fill: function(data, text, html=false) {

 		var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");

diff --git a/js/graf.js b/js/graf.js
index 155ce2d..16f8645 100644
--- a/js/graf.js
+++ b/js/graf.js
@@ -1,203 +1,202 @@
 // *********** HERE STARTS graf.js *************

 

-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();

-	}

+  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: 30,

-			// enableEdgeHovering: true,

-			font: "Roboto",

-			labelThreshold: 5

-		}

-	});

+  // create new methods for sigma library

+  updateSigma();

 

-	

-	// 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 rectBorrar = [[0,0], [0,0], [0,0], [0,0]];

-		for (var i in graf.nodes) {

-			if (graf.nodes[i].name == "Erase")    rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];

-			if (graf.nodes[i].name == "Borrar")   rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];

-			if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];

-			if (graf.nodes[i].name == "Delete")   rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];

-		}

-		

-		var sizegraf = 0;

-		for (var i in graf.nodes) {

-			if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;	

-			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 );	

-			

-			if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;	

-			

-			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) {

-			if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;	

-			if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;	

-			

-			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) {

-				s.graph.nodes().forEach(function (n) {

-					n.x = n.circleX;

-					n.y = n.circleY;

-					n.size = 10;

-				});

-				

-				e.data.node.x = 0;

-				e.data.node.y = 0;

-				e.data.node.size = 30;

-			}

-			

-			s.refresh();

-

-			dialog.show(nodeId, toKeep);

-		});

+  // 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: 30,

+      // enableEdgeHovering: true,

+      font: "Roboto",

+      labelThreshold: 5

+    }

+  });

 

 

-		s.refresh();

-		initSearchBar();

+  // query for JSON for graph data

+  xhr("GET", "api.php", "action=getgraf", function(responseText, status) {

+    // graf is the JSON data

+    graf = JSON.parse(responseText);

 

-		autocomplete(document.querySelector("#search-input"), graf.nodes, "search");

-	});

+    // does graf.nodes have a size attribute?

+    var rectBorrar = [[0,0], [0,0], [0,0], [0,0]];

+    for (var i in graf.nodes) {

+      if (graf.nodes[i].name == "Erase")    rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];

+      if (graf.nodes[i].name == "Borrar")   rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];

+      if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];

+      if (graf.nodes[i].name == "Delete")   rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];

+    }

+

+    var sizegraf = 0;

+    for (var i in graf.nodes) {

+      if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;

+      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 );

+

+      if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;

+

+      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) {

+      if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;

+      if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;

+

+      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) {

+        s.graph.nodes().forEach(function (n) {

+          n.x = n.circleX;

+          n.y = n.circleY;

+          n.size = 10;

+        });

+

+        e.data.node.x = 0;

+        e.data.node.y = 0;

+        e.data.node.size = 30;

+      }

+

+      s.refresh();

+

+      dialog.show(nodeId, toKeep);

+    });

+

+    initDialog();

+    initCamera();

+    initSearchBar();

+

+    s.refresh();

+    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] || [];

+  // 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];

-		}

+    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] || [];

+    return neighbors;

+  });

 

-		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
+  // 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;

+  });

+}

diff --git a/js/init.js b/js/init.js
new file mode 100644
index 0000000..a07389c
--- /dev/null
+++ b/js/init.js
@@ -0,0 +1,10 @@
+// *********** HERE STARTS init.js *************
+
+function init() {
+  initGraf();
+  addYearList();
+  initCircleMode();
+  initJustDoIt();
+}
+
+window.addEventListener("load", init);
diff --git a/js/easter-egg.js b/js/just-do-it.js
similarity index 83%
rename from js/easter-egg.js
rename to js/just-do-it.js
index 35dce24..cba9600 100644
--- a/js/easter-egg.js
+++ b/js/just-do-it.js
@@ -1,6 +1,4 @@
-// *********** HERE STARTS easter-egg.js *************

-

-window.addEventListener("load", initEasterEgg);

+// *********** HERE STARTS just-do-it.js *************

 

 var seq = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66, 13];

 var cur = 0;

@@ -27,7 +25,7 @@
 }

 

 

-function initEasterEgg() {

+function initJustDoIt() {

 	document.addEventListener("keydown", function() {

 		if (event.key == "f" && event.target.getAttribute("id") != "search-input") altSearchBar();

 		if (event.which == seq[cur]) {

diff --git a/js/limit-years.js b/js/limit-years.js
index cbbef95..41647f7 100644
--- a/js/limit-years.js
+++ b/js/limit-years.js
@@ -1,7 +1,5 @@
 // *********** HERE STARTS limit-years.js *************

 

-window.addEventListener("load", addYearList);

-

 var limitYears = false;

 var showYears = new Set();

 

@@ -9,10 +7,10 @@
 	//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) )) {

@@ -23,19 +21,19 @@
 				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;

 		});

@@ -44,7 +42,7 @@
 

 function altYearList() {

 	var yearlist = document.querySelector("#year-list");

-	

+

 	if(yearlist.style.display == "none"){

 		yearlist.style.display = "block";

 		document.querySelector("#settings i").innerText = "close";

@@ -57,37 +55,42 @@
 	}

 }

 

-function addYearList() {	

+function addYearList() {

 	var ylistspan = document.querySelector("#year-list-span")

-	for(var year=2006; year<2019; year++) {

+	for(var year = 2006; year < 2019; year++) {

+		var lab = document.createElement("label");

+		lab.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect custom-checkbox");

+		lab.setAttribute("for", "checkbox-"+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(){ 

+		yin.setAttribute("class", "mdl-checkbox__input");

+		yin.name = year;

+		yin.id = "checkbox-"+year;

+		yin.addEventListener("change", function() {

 			limitYears = true;

-			

+

 			if(this.checked) {

 				showYears.add(this.name);

-			}

-			else {

+			} else {

 				showYears.delete(this.name);

 			}

-			

-			if(showYears.size == 0) limitYears = false;

-			

+

+			if (showYears.size == 0) limitYears = false;

+

 			repaint();

-			

+

 			s.refresh();

 		});

-		

-		var lab = document.createElement("label");

-		lab.innerHTML = "" + year + "<br>";

-		

-		ylistspan.appendChild(yin);

+

+		var span = document.createElement("span");

+		span.innerText = year;

+		span.setAttribute("class", "mdl-checkbox__label");

+

+		lab.appendChild(yin);

+		lab.appendChild(span);

 		ylistspan.appendChild(lab);

+		ylistspan.insertAdjacentHTML("beforeend", "<br>");

 	}

-	

+

 	document.querySelector("#settings").addEventListener("click", altYearList);

 }

-

diff --git a/js/script.js b/js/script.js
index 1493ae1..3548234 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,266 +1,255 @@
 // *********** HERE STARTS circle-mode.js *************

 

-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";

+  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();

-		}

-	});

+      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 = "scatter_plot";

+

+      s.graph.nodes().forEach(function(n) {

+        n.x = n.circleX;

+        n.y = n.circleY;

+      });

+

+      s.refresh();

+    }

+  });

 }

 

-function isInRect (x, y, rect) {

-	if (x < -10000 || x > 10000) return true;

-	if (y < -10000 || y > 10000) return true;

-	

-	var ans = true;

-	var c = crossProd (rect[0], rect[1], x, y);

-	

-	for(var i=1; i<4; i++) {	

-		var temp = crossProd (rect[i], rect[(i+1)%4], x, y);

-		if (c*temp < 0) ans = false;

-	}

-	return ans;

+function isInRect(x, y, rect) {

+  if (x < -10000 || x > 10000) return true;

+  if (y < -10000 || y > 10000) return true;

+

+  var ans = true;

+  var c = crossProd (rect[0], rect[1], x, y);

+

+  for(var i = 1; i < 4; i++) {

+    var temp = crossProd (rect[i], rect[(i+1)%4], x, y);

+    if (c*temp < 0) ans = false;

+  }

+  return ans;

 }

 

 function crossProd(r1, r2, x, y) {

-	return r1[0]*r2[1] + r2[0]*y + x*r1[1] - r1[0]*y - r2[0]*r1[1] - x*r2[1]; 

+  return r1[0]*r2[1] + r2[0]*y + x*r1[1] - r1[0]*y - r2[0]*r1[1] - x*r2[1];

 }

-

-

 // *********** HERE STARTS graf.js *************

 

-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();

-	}

+  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: 30,

-			// enableEdgeHovering: true,

-			font: "Roboto",

-			labelThreshold: 5

-		}

-	});

+  // create new methods for sigma library

+  updateSigma();

 

-	

-	// 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 rectBorrar = [[0,0], [0,0], [0,0], [0,0]];

-		for (var i in graf.nodes) {

-			if (graf.nodes[i].name == "Erase")    rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];

-			if (graf.nodes[i].name == "Borrar")   rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];

-			if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];

-			if (graf.nodes[i].name == "Delete")   rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];

-		}

-		

-		var sizegraf = 0;

-		for (var i in graf.nodes) {

-			if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;	

-			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 );	

-			

-			if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;	

-			

-			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) {

-			if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;	

-			if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;	

-			

-			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) {

-				s.graph.nodes().forEach(function (n) {

-					n.x = n.circleX;

-					n.y = n.circleY;

-					n.size = 10;

-				});

-				

-				e.data.node.x = 0;

-				e.data.node.y = 0;

-				e.data.node.size = 30;

-			}

-			

-			s.refresh();

-

-			dialog.show(nodeId, toKeep);

-		});

+  // 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: 30,

+      // enableEdgeHovering: true,

+      font: "Roboto",

+      labelThreshold: 5

+    }

+  });

 

 

-		s.refresh();

-		initSearchBar();

+  // query for JSON for graph data

+  xhr("GET", "api.php", "action=getgraf", function(responseText, status) {

+    // graf is the JSON data

+    graf = JSON.parse(responseText);

 

-		autocomplete(document.querySelector("#search-input"), graf.nodes, "search");

-	});

+    // does graf.nodes have a size attribute?

+    var rectBorrar = [[0,0], [0,0], [0,0], [0,0]];

+    for (var i in graf.nodes) {

+      if (graf.nodes[i].name == "Erase")    rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];

+      if (graf.nodes[i].name == "Borrar")   rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];

+      if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];

+      if (graf.nodes[i].name == "Delete")   rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];

+    }

+

+    var sizegraf = 0;

+    for (var i in graf.nodes) {

+      if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;

+      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 );

+

+      if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;

+

+      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) {

+      if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;

+      if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;

+

+      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) {

+        s.graph.nodes().forEach(function (n) {

+          n.x = n.circleX;

+          n.y = n.circleY;

+          n.size = 10;

+        });

+

+        e.data.node.x = 0;

+        e.data.node.y = 0;

+        e.data.node.size = 30;

+      }

+

+      s.refresh();

+

+      dialog.show(nodeId, toKeep);

+    });

+

+    initDialog();

+    initCamera();

+    initSearchBar();

+

+    s.refresh();

+    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] || [];

+  // 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];

-		}

+    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] || [];

+    return neighbors;

+  });

 

-		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;

-	});

+  // 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;

+  });

 }

-

-

 // *********** HERE STARTS limit-years.js *************

 

-window.addEventListener("load", addYearList);

-

 var limitYears = false;

 var showYears = new Set();

 

@@ -268,10 +257,10 @@
 	//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) )) {

@@ -282,19 +271,19 @@
 				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;

 		});

@@ -303,7 +292,7 @@
 

 function altYearList() {

 	var yearlist = document.querySelector("#year-list");

-	

+

 	if(yearlist.style.display == "none"){

 		yearlist.style.display = "block";

 		document.querySelector("#settings i").innerText = "close";

@@ -316,43 +305,47 @@
 	}

 }

 

-function addYearList() {	

+function addYearList() {

 	var ylistspan = document.querySelector("#year-list-span")

-	for(var year=2006; year<2019; year++) {

+	for(var year = 2006; year < 2019; year++) {

+		var lab = document.createElement("label");

+		lab.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect custom-checkbox");

+		lab.setAttribute("for", "checkbox-"+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(){ 

+		yin.setAttribute("class", "mdl-checkbox__input");

+		yin.name = year;

+		yin.id = "checkbox-"+year;

+		yin.addEventListener("change", function() {

 			limitYears = true;

-			

+

 			if(this.checked) {

 				showYears.add(this.name);

-			}

-			else {

+			} else {

 				showYears.delete(this.name);

 			}

-			

-			if(showYears.size == 0) limitYears = false;

-			

+

+			if (showYears.size == 0) limitYears = false;

+

 			repaint();

-			

+

 			s.refresh();

 		});

-		

-		var lab = document.createElement("label");

-		lab.innerHTML = "" + year + "<br>";

-		

-		ylistspan.appendChild(yin);

+

+		var span = document.createElement("span");

+		span.innerText = year;

+		span.setAttribute("class", "mdl-checkbox__label");

+

+		lab.appendChild(yin);

+		lab.appendChild(span);

 		ylistspan.appendChild(lab);

+		ylistspan.insertAdjacentHTML("beforeend", "<br>");

 	}

-	

+

 	document.querySelector("#settings").addEventListener("click", altYearList);

 }

-

 // *********** HERE STARTS search-bar.js *************

 

-

 function altSearchBar() {

 	if (document.querySelector(".md-google-search__metacontainer").style.display == "none") {

 		document.querySelector(".md-google-search__metacontainer").style.display = "block";

@@ -370,8 +363,6 @@
 }

 // *********** HERE STARTS dialog.js *************

 

-window.addEventListener("load", initDialog);

-

 var dialog = {

 	fill: function(data, text, html=false) {

 		var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");

@@ -452,12 +443,8 @@
 	document.querySelector("#max-dialog").addEventListener("click", dialog.max);

 	document.querySelector("#min-dialog").addEventListener("click", dialog.min);

 }

-

 // *********** HERE STARTS camera.js *************

 

-

-window.addEventListener('load', initCamera);

-

 function cameraGoto(nodeX, nodeY) {

 	sigma.misc.animation.camera( s.camera,

 		{ x: nodeX, y: nodeY, ratio: 1 },

@@ -466,50 +453,44 @@
 }

 

 function is_touch_device() {

-	  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

-	  var mq = function(query) {

-	    return window.matchMedia(query).matches;

-	  }

+	var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

+	var mq = function(query) {

+		return window.matchMedia(query).matches;

+	}

 

-	  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {

-	    return true;

-	  }

+	if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {

+		return true;

+	}

 

-	  // include the 'heartz' as a way to have a non matching MQ to help terminate the join

-	  // https://git.io/vznFH

-	  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');

-	  return mq(query);

+	// include the 'heartz' as a way to have a non matching MQ to help terminate the join

+	// https://git.io/vznFH

+	var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');

+	return mq(query);

 }

 

 function initCamera() {

-	

 	if(!is_touch_device()) {

-		

 		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))

 			});

 		});

-	}

-	else{

+	} else {

 		document.querySelector("#zoomin").style.display = "none";

 		document.querySelector("#zoomout").style.display = "none";

-		

+

 		document.querySelector("#circle-mode").style.bottom = "110px";

 		document.querySelector("#settings").style.bottom = "60px";

 		document.querySelector("#search").style.bottom = "10px";

 	}

 }

-

-// *********** HERE STARTS easter-egg.js *************

-

-window.addEventListener("load", initEasterEgg);

+// *********** HERE STARTS just-do-it.js *************

 

 var seq = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66, 13];

 var cur = 0;

@@ -536,7 +517,7 @@
 }

 

 

-function initEasterEgg() {

+function initJustDoIt() {

 	document.addEventListener("keydown", function() {

 		if (event.key == "f" && event.target.getAttribute("id") != "search-input") altSearchBar();

 		if (event.which == seq[cur]) {

@@ -549,3 +530,13 @@
 		} else cur = 0;

 	});

 }

+// *********** HERE STARTS init.js *************
+
+function init() {
+  initGraf();
+  addYearList();
+  initCircleMode();
+  initJustDoIt();
+}
+
+window.addEventListener("load", init);
diff --git a/js/search-bar.js b/js/search-bar.js
index e5c8846..ef32e5e 100644
--- a/js/search-bar.js
+++ b/js/search-bar.js
@@ -1,6 +1,5 @@
 // *********** HERE STARTS search-bar.js *************

 

-

 function altSearchBar() {

 	if (document.querySelector(".md-google-search__metacontainer").style.display == "none") {

 		document.querySelector(".md-google-search__metacontainer").style.display = "block";