Merge branch 'busqueda' into master
diff --git a/api.php b/api.php
index 5bdbb00..26b655a 100644
--- a/api.php
+++ b/api.php
@@ -2,13 +2,13 @@
 require_once("config.php");
 
 class write {
-  public static function do($json) {
+  public static function funct($json) {
     print_r(json_encode($json));
     exit();
   }
 
   public static function error($n, $msg) {
-    self::do(["error" => $n, "msg" => $msg]);
+    self::funct(["error" => $n, "msg" => $msg]);
   }
 }
 
diff --git a/css/autocomplete.css b/css/autocomplete.css
new file mode 100644
index 0000000..148b882
--- /dev/null
+++ b/css/autocomplete.css
@@ -0,0 +1,54 @@
+* {

+  box-sizing: border-box;

+}

+

+.autocomplete {

+  /*the container must be positioned relative:*/

+  position: relative;

+  display: inline-block;

+}

+input {

+  border: 1px solid transparent;

+  background-color: #f1f1f1;

+  padding: 10px;

+  font-size: 16px;

+}

+input[type=text] {

+  background-color: #f1f1f1;

+  width: 100%;

+}

+input[type=submit] {

+  background-color: DodgerBlue;

+  color: #fff;

+  cursor: pointer;

+}

+.autocomplete-items {

+  position: absolute;

+  border: 1px solid #d4d4d4;

+  border-bottom: none;

+  border-top: none;

+  z-index: 99;

+  /*position the autocomplete items to be the same width as the container:*/

+  top: auto;

+  left: 0;

+  right: 0;

+  color: black;

+}

+.autocomplete-items div {

+  padding: 10px;

+  cursor: pointer;

+  background-color: #fff; 

+  border-bottom: 1px solid #d4d4d4; 

+}

+.autocomplete-items div:hover {

+  /*when hovering an item:*/

+  background-color: #e9e9e9; 

+}

+.autocomplete-active {

+  /*when navigating through the items using the arrow keys:*/

+  background-color: DodgerBlue !important; 

+  color: #ffffff; 

+}

+.autocomplete-year {

+	color: #ccc;

+}
\ No newline at end of file
diff --git a/css/dialog.css b/css/dialog.css
new file mode 100644
index 0000000..3f2b73b
--- /dev/null
+++ b/css/dialog.css
@@ -0,0 +1,53 @@
+#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;

+}
\ No newline at end of file
diff --git a/css/modal.css b/css/modal.css
new file mode 100644
index 0000000..cdcba8c
--- /dev/null
+++ b/css/modal.css
@@ -0,0 +1,38 @@
+/* The Modal (background) */

+.modal {

+    display: none; /* Hidden by default */

+    position: fixed; /* Stay in place */

+    z-index: 1; /* Sit on top */

+    padding-top: 100px; /* Location of the box */

+    left: 0;

+    top: 0;

+    width: 100%; /* Full width */

+    height: 100%; /* Full height */

+    overflow: auto; /* Enable scroll if needed */

+    background-color: rgb(0,0,0); /* Fallback color */

+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

+}

+

+/* Modal Content */

+.modal-content {

+    background-color: #fefefe;

+    margin: auto;

+    padding: 20px;

+    border: 1px solid #888;

+    width: 80%;

+}

+

+/* The Close Button */

+.closeBox {

+    color: #aaaaaa;

+    float: right;

+    font-size: 28px;

+    font-weight: bold;

+}

+

+.closeBox:hover,

+.closeBox:focus {

+    color: #000;

+    text-decoration: none;

+    cursor: pointer;

+}
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index 5c6b812..0343114 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -37,58 +37,26 @@
   z-index: 110;
 }
 
-#dialog-vertex, #dialog-edge{
-  padding: 8px;
-  user-select: auto;
+.addegde-button {
+	line-height: 20px;
+	font-size: 20px;
+	width: 100%;
+	background-color: rgba(200,0,0,0.4);
 }
 
-#dialog h2 {
-  font-weight: bold;
-  font-size: 20px;
+.addegde-msg {
+	display: none;
+	line-height: 20px;
+	font-size: 20px;
+	width: 100%;
+	background-color: rgba(0,200,0,0.4);
 }
 
-#dialog h3 {
-  font-weight: bold;
-  font-size: 16px;
-  margin-bottom: 0;
-}
-
-#quit-dialog, #quit2-dialog {
+#searchButton {
   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;
+  right: 10px;
+  bottom: 110px;
+  z-index: 100;
 }
 
 #zoomin {
diff --git a/graf.php b/graf.php
index c0837c0..486afde 100644
--- a/graf.php
+++ b/graf.php
@@ -22,7 +22,13 @@
     <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="manifest" href="manifest.json">
 
-    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/dialog.css">
+	<link rel="stylesheet" href="css/styles.css">
+      
+    <!-- Seach Bar CSS files -->  
+    <link rel="stylesheet" href="./css/modal.css"></link>
+    <link rel="stylesheet" href="./css/autocomplete.css"></link>
+
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
 
@@ -33,9 +39,10 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
   </head>
   <body>
-    <button id="zoomin" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored"><i class="material-icons">zoom_in</i></button>
+	<button id="searchButton"class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored"><i class="material-icons">search</i></button>
+	<button id="zoomin" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored"><i class="material-icons">zoom_in</i></button>
     <button id="zoomout" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored"><i class="material-icons">zoom_out</i></button>
-
+	
     <div id="backdrop-container" style="display: none;">
       <div id="backdrop"></div>
     </div>
@@ -47,11 +54,18 @@
         <ul>
           <li><b>Any:</b> <span data-fill="year"></span></li>
           <li><b>Sexe:</b> <span data-fill="sex"></span></li>
-          <li><b>ID:</b> <span data-fill="id"></span></li>
+          <li><b>ID:</b> <span data-fill="id" id="node-id"></span></li>
         </ul>
-        <h3>Arestes (<span data-fill="n-edges"></span>):</h3>
-        <ul data-fill="edges">
-        </ul>
+		<div id="addedge-box">
+			<div id="addedge-button" class="addegde-button"><h2>Afegir una nova aresta +</h2></div>
+			<div id="addedge-msg" class="addegde-msg"><h2>Aresta afegida!</h2></div>
+			<input id="addedge-input" type="text" style="display:none;">
+		</div>	
+		<div id="edge-list">
+			<h3>Arestes (<span data-fill="n-edges"></span>):</h3>
+			<ul data-fill="edges">
+			</ul>
+		</div>
       </div>
       <div id="dialog-edge" style="display: none;">
       </div>
@@ -64,11 +78,38 @@
         <p><span data-fill="year"></span>, <span data-fill="sex"></span>, <span data-fill="id"></span></p>
       </div>
     </div>
+    <!-- Search Box -->
+    <div id="searchBox" class="modal">
+      <!-- Search Box Content -->
+      <div class="modal-content">
+        <span class="closeBox">&times;</span>
 
+        <div class="in-box-content">
+            <center>
+                <form autocomplete="off">
+                  <div class="autocomplete">
+                    <input id="searchInput" type="text" placeholder="Busca una persona al graf">
+                  </div>
+                </form>
+            </center>
+        </div>
+      </div>
+    </div>
+       
     <div id="graf"></div>
-
+    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.0/sigma.min.js"></script>
-    <script src="js/script.js"></script>
+    <script>
+		// Initialize the graph and the sigma
+		var s, graf;
+	</script>
+	   
+    <!-- Search Bar JS files -->
+    <script src="./js/modal.js"></script>
+    <script src="./js/autocomplete.js" ></script>
+	
+	<script src="js/script.js"></script>
+	
     <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
     <!--<script src="js/service-worker.js"></script>-->
   </body>
diff --git a/js/autocomplete.js b/js/autocomplete.js
new file mode 100644
index 0000000..4c32827
--- /dev/null
+++ b/js/autocomplete.js
@@ -0,0 +1,199 @@
+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*/

+      closeAllLists();

+      if (!val || val.length < 3) return false;

+      currentFocus = -1;

+	  

+      /*create a DIV element that will contain the items (values):*/

+      a = document.createElement("DIV");

+      a.setAttribute("id", this.id + "autocomplete-list");

+      a.setAttribute("class", "autocomplete-items");

+      /*append the DIV element as a child of the autocomplete container:*/

+      this.parentNode.appendChild(a);

+	  

+      /*for each item in the object...*/

+      for (node in obj) {

+		var nomNode = obj[node].name;

+				

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

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

+			

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

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

+			  

+			  /*make the matching letters bold:*/

+			  if (parts[0].length == 0) b.innerHTML = "";

+			  else b.innerHTML = nomNode.substr(0, parts[0].length);

+			  b.innerHTML += "<strong>" + nomNode.substr(parts[0].length, val.length) + "</strong>";

+			  b.innerHTML += nomNode.substr(parts[0].length + val.length);

+			  b.innerHTML += " - <span class='autocomplete-year'>" + obj[node].year + "</span>";

+			  /*insert a input field that will hold the current object item's value:*/

+			  b.innerHTML += "<input type='hidden' value='" + 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.getElementsByTagName("input")[0].value;

+				  inp.value = obj[n].name;

+				  

+				  switch (act) {

+					case "search":

+					  // Move camera to desired node

+						cameraGoto(obj[n].x, obj[n].y);

+					  // Close the search box

+					  var searchBox = document.getElementById('searchBox');

+					  searchBox.style.display = "none";

+					  

+					  // Empty the input bar

+					  var searchInput = document.getElementById('searchInput');

+					  searchInput.value = "";

+						break;

+					case "addEdge":					

+					  // Add an edge between A and B

+					  var sourceID = document.getElementById("node-id").innerText.substr(1);

+					  var edgeName = Math.min(sourceID, n) + "_" + Math.max(sourceID, n);

+					  if (!graf.edges[edgeName]) {

+						  graf.edges[edgeName] = {

+							  a: Math.min(sourceID, n),

+							  b: Math.max(sourceID, n),

+							  votes: 1

+						  };

+						  

+						  // Temporary fix, just for testing

+						  s.graph.addEdge({

+							  id: edgeName,

+							  source: sourceID,

+							  target: n,

+							  size: 0.5

+							});

+							

+						  clickNode(s, sourceID, s.graph.neighbors(sourceID));

+						  dialog.max();

+						  

+						  // Give a message of validation

+						  var edgeMSG = document.querySelector("#addedge-msg");

+						  addedEdgeMSG(edgeMSG);

+

+					  } else {

+						  alert("Edge already exists");

+					  }

+									  

+					  // Empty the input bar

+					  var addEdgeInput = document.getElementById('addedge-input');

+					  addEdgeInput.value = "";

+					  

+					  // Return to default view

+					  document.querySelector("#addedge-input").style.display = "none";  

+					  document.querySelector("#edge-list").style.display = "block";

+					  break;

+				  }

+				  

+				  /*close the list of autocompleted values,

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

+				  closeAllLists();

+			  });

+			  

+			  // 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 a.childNodes) {

+				  var child = a.childNodes[i];

+				  if (!child.dataset) break;

+				  if (nEdges > child.dataset.edges) {

+					  a.insertBefore(b, child);

+					  inserted = true;

+					  break;

+				  }

+			  }

+			  

+			  if (!inserted) {

+				  a.appendChild(b);

+				  console.log("inserted");

+			  }

+		  }

+        }

+  });

+  /*execute a function presses a key on the keyboard:*/

+  inp.addEventListener("keydown", function(e) {

+      var x = document.getElementById(this.id + "autocomplete-list");

+      if (x) x = x.getElementsByTagName("div");

+      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 closeAllLists(elmnt) {

+    /*close all autocomplete lists in the document,

+    except the one passed as an argument:*/

+    var x = document.getElementsByClassName("autocomplete-items");

+    for (var i = 0; i < x.length; i++) {

+      if (elmnt != x[i] && elmnt != inp) {

+        x[i].parentNode.removeChild(x[i]);

+      }

+    }

+  }

+  /*execute a function when someone clicks in the document:*/

+  document.addEventListener("click", function (e) {	  

+      closeAllLists(e.target);

+  });

+}

+

+function addedEdgeMSG(edgeMSG) {

+  var opacity = 8;

+  edgeMSG.style.display = "block";

+  

+  var opacityChange = window.setInterval(function() {

+	  edgeMSG.style.color = "rgba(0,0,0, "+ opacity/10 +")";

+	  var edgeList = document.querySelector("#edge-list ul");

+	  edgeList.style.backgroundColor = "rgba(0,200,0, "+ opacity/10 +")";

+	  --opacity;

+	  console.log(opacity);

+	}, 100);

+	

+  var backToDef = window.setTimeout(function() {

+	  edgeMSG.style.display = "none";

+	  edgeMSG.style.color = "black";

+	  window.clearInterval(opacityChange);

+	}, 1000);

+}
\ No newline at end of file
diff --git a/js/modal.js b/js/modal.js
new file mode 100644
index 0000000..179e936
--- /dev/null
+++ b/js/modal.js
@@ -0,0 +1,34 @@
+// Get the box

+var searchBox = document.getElementById('searchBox');

+

+// Get the button that opens the box

+var searchButton = document.getElementById("searchButton");

+

+// Get the <span> element that closes the box

+var closeBox = document.getElementsByClassName("closeBox")[0];

+

+// When the user clicks the button, open the box 

+searchButton.onclick = function() {

+	dialog.close();

+    searchBox.style.display = "block";

+	// Focus on the search input bar

+	document.getElementById("searchInput").focus();

+}

+

+// When the user clicks on <span> (x), close the box

+closeBox.onclick = function() {

+    searchBox.style.display = "none";

+	// Empty the input bar

+	var searchInput = document.getElementById('searchInput');

+	searchInput.value = "";

+}

+

+// When the user clicks anywhere outside of the box, close it

+window.onclick = function(event) {

+    if (event.target == searchBox) {

+        searchBox.style.display = "none";

+		// Empty the input bar

+		var searchInput = document.getElementById('searchInput');

+		searchInput.value = "";

+    }

+}
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 4e74231..6fcf868 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,5 +1,3 @@
-var s, graf;
-
 function xhr(method, url, params, callback) {
   var http = new XMLHttpRequest();
   if (method == "POST") {
@@ -65,6 +63,7 @@
 
     s.graph.nodes().forEach(function(n) {
       n.color = n.originalColor;
+	  n.label = n.originalLabel;
     });
 
     s.graph.edges().forEach(function(e) {
@@ -80,6 +79,13 @@
   min: function() {
     document.querySelector("#dialog").style.display = "none";
     document.querySelector("#summary-dialog").style.display = "block";
+  },
+  addEdge: function() {
+	document.querySelector("#addedge-input").style.display = "block";  
+	document.querySelector("#edge-list").style.display = "none";
+	autocomplete(document.getElementById("addedge-input"), graf.nodes, "addEdge");
+	// Focus on the addEdge input bar
+	document.getElementById("addedge-input").focus();
   }
 };
 
@@ -124,6 +130,7 @@
         s.graph.addNode({
           id: graf.nodes[i].id,
           label: graf.nodes[i].name,
+		  originalLabel: graf.nodes[i].name,
           x: graf.nodes[i].x,
           y: graf.nodes[i].y,
           size: 10,
@@ -145,32 +152,14 @@
         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';
-          }
-        });
-
-        s.refresh();
-
-        dialog.show(nodeId, toKeep);
+		clickNode(s, nodeId, toKeep);
       });
 
       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);
+	  document.querySelector("#addedge-button").addEventListener("click", dialog.addEdge);
 
       document.querySelector("#zoomin").addEventListener("click", function() {
         s.camera.goTo({
@@ -185,7 +174,40 @@
       });
 
       s.refresh();
+	  autocomplete(document.getElementById("searchInput"), graf.nodes, "search");
     });
 }
 
+function cameraGoto(nodeX, nodeY) {
+	sigma.misc.animation.camera( s.camera,
+	  { x: nodeX, y: nodeY, ratio: 1 },
+	  { duration: s.settings('animationsTime') || 300 }
+	);
+}
+
+function clickNode(s, nodeId, toKeep) {
+	s.graph.nodes().forEach(function(n) {
+          if (toKeep[n.id] || n.id == nodeId) {
+            n.color = n.originalColor;
+			n.label = n.originalLabel;
+			console.log("Hola");
+          } else {
+            n.color = '#333';
+			n.label = '';
+          }
+        });
+
+        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';
+          }
+        });
+
+        s.refresh();
+
+        dialog.show(nodeId, toKeep);
+}
+
 window.addEventListener("load", init);