diff --git a/templates/layout_cristina.html b/templates/layout_cristina.html
index 9f42576..6e7d22b 100644
--- a/templates/layout_cristina.html
+++ b/templates/layout_cristina.html
@@ -6,95 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Library</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
-
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
 
-
-     <!-- <script type="text/javascript">
-     $(document).ready(function() {
-       $(".librarian-names").click(function(event){
-         var thename = $(this).text();
-         $(".name-elements").empty();
-
-         $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
-           // iterate in test[i].librarian to find where the name is present to get the test[i].debris that goes with it
-           var alldocs = [];
-           for (var i = 0; i < test.length; ++i) {
-             var item = test[i];
-             if(item.librarian.includes(thename)){
-               ledocument = item.debrispath;
-               lelibrarian = item.librarian;
-               //put ledocument into li and nest inside ul
-               var extension = ledocument.replace(/^.*\./, '');
-               console.log(ledocument);
-               if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
-                 $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'>Librarians: "+lelibrarian+"</li>");
-               }
-               else if (extension=="pdf") {
-                 $(".name-elements").append("<li><embed class='listed-pdf' src='files/"+ledocument+"'/>Librarians: "+lelibrarian+"</li>");
-               }
-               else if (extension=="epub") {
-                 $(".name-elements").append("<li>"+ledocument+lelibrarian+"</li>");
-               }
-               else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
-                 $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio>Librarians: "+lelibrarian+"</li>");
-               }
-               else if ((extension=="mov") || (extension=="mp4")) {
-                 $(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video>Librarians: "+lelibrarian+"</li>");
-               }
-               else if ((extension=="odt") || (extension=="docx")) {
-               // something for odt and docx
-                 $(".name-elements").append("<li>"+ledocument+lelibrarian+"</li>");
-             };
-           };
-         };
-       });
-     });
-
-       $(".file-names").click(function(event){
-         var thefile = $(this).text();
-         $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
-           $(".name-elements").empty();
-           // iterate in test[i].librarian to find where the name is present
-           //to get the test[i].debris that goes with it
-           var allpeeps = [];
-           var category = null;
-           for (var i = 0; i < test.length; ++i) {
-             var item = test[i];
-             if(item.debrisname.includes(thefile)){
-               ledocument = item.debrispath;
-               // allpeeps.push(ledocument);
-               var extension = ledocument.replace(/^.*\./, '');
-               console.log(ledocument);
-               if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
-                 $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
-               }
-               else if (extension=="pdf") {
-                 $(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/></li>");
-               }
-               else if (extension=="epub") {
-                 $(".name-elements").append("<li>"+ledocument+"</li>");
-               }
-               else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
-                 $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio></li>");
-               }
-               else if ((extension=="mov") || (extension=="mp4")) {
-                 $(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video></li>");
-               }
-               else if ((extension=="odt") || (extension=="docx")) {
-               // something for odt and docx
-                 $(".name-elements").append("<li>"+ledocument+"</li>");
-               };
-             };
-             category = item.method;
-           };
-
-         });
-       });
-
-     });
-     </script> -->
-
   </head>
   <body>
     <div class="nav-top">
@@ -150,66 +63,132 @@
 
     <script type="text/javascript">
       $(document).ready(function() {
-        var address = '/';
+        // setting up variables that we will use for the url later
+        var existing_path = window.location.href;
+        existing_start = existing_path.indexOf('/?');
+        var address = existing_path.slice(existing_start);
 
+
+        // function to extract the parameters from the url. once we have them we can give them the class 'clicked'
+        function getAllUrlParams(url) {
+          // get query string from url (optional) or window
+          var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
+          // we'll store the parameters here
+          var obj = {};
+          // if query string exists
+          if (queryString) {
+            // stuff after # is not part of query string, so get rid of it
+            queryString = queryString.split('#')[0];
+            // split our query string into its component parts
+            var arr = queryString.split('&');
+            for (var i = 0; i < arr.length; i++) {
+              // separate the keys and the values
+              var a = arr[i].split('=');
+              // set parameter name and value (use 'true' if empty)
+              var paramName = a[0];
+              var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
+              // (optional) keep case consistent
+              paramName = paramName.toLowerCase();
+              if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
+              // if the paramName ends with square brackets, e.g. colors[] or colors[2]
+              if (paramName.match(/\[(\d+)?\]$/)) {
+                // create key if it doesn't exist
+                var key = paramName.replace(/\[(\d+)?\]/, '');
+                if (!obj[key]) obj[key] = [];
+                // if it's an indexed array e.g. colors[2]
+                if (paramName.match(/\[\d+\]$/)) {
+                  // get the index value and add the entry at the appropriate position
+                  var index = /\[(\d+)\]/.exec(paramName)[1];
+                  obj[key][index] = paramValue;
+                } else {
+                  // otherwise add the value to the end of the array
+                  obj[key].push(paramValue);
+                }
+              } else {
+                // we're dealing with a string
+                if (!obj[paramName]) {
+                  // if it doesn't exist, create property
+                  obj[paramName] = paramValue;
+                } else if (obj[paramName] && typeof obj[paramName] === 'string'){
+                  // if property does exist and it's a string, convert it to an array
+                  obj[paramName] = [obj[paramName]];
+                  obj[paramName].push(paramValue);
+                } else {
+                  // otherwise add the property
+                  obj[paramName].push(paramValue);
+                }
+              }
+            }
+          }
+          return obj;
+        };
+        var libList = getAllUrlParams().librarian;
+        var methodList = getAllUrlParams().method;
+        for (i=0; i < libList.length; i++) {
+          var search_id = libList[i].toString(2);
+          var element = document.getElementById(search_id);
+        }
+        // for (i=0; i<methodList.length; i++) {
+        //   var search_id = '#' + methodList[i];
+        //   $( search_id ).addClass('clicked');
+        // }
+
+
+        // generating the url with librarian names
         $(".librarian-names").click(function(event){
           var theid = $(this).attr('id');
-          if($(this).hasClass('clicked')==false){
+          var test = "librarian=" + theid;
+          if(address.includes(test)!=true){
             if(address.slice(address.length - 1)!='/'){
               address = address + "&librarian=" + theid;
-              // location.href = address;
-               $(this).addClass('clicked');
-               $(".librarian-names").addClass('selected');
              } else {
                address = address + "?librarian=" + theid;
-               // location.href = address;
-                $(this).addClass('clicked');
-                $(".librarian-names").addClass('selected');
              }
-             alert(address);
+             location.href = address;
           } else {
-            $(this).removeClass('clicked');
-            $(".librarian-names").removeClass('selected');
-            if(address.slice(address.length - 1)!='/'){
-              var remove = "&librarian=" + theid;
-              address = address.replace(remove, '');
-            } else {
-              var remove2 = "librarian=" + theid;
-              address = address.replace(remove2, '');
-            }
-
-            // address = address - ("librarian=" + theid);
-
-
-            alert(address);
+              var start = "?librarian=" + theid;
+              var addition = "&librarian=" + theid;
+              if(address.includes(start)==true && address.charAt(start.length+1)=='&'){
+                var begin = address.indexOf(start)+1;
+                address = address.replace(address.substr(begin,start.length),'');
+              } else if(address.includes(start)==true) {
+                address = address.replace(start,'');
+              } else {
+                address = address.replace(addition,'');
+              };
+            location.href = address;
           };
-
-          // var thename = $(this).text();
-          // $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
-          //   var alldocs = [];
-          //   for (var i = 0; i < test.length; ++i) {
-          //     var item = test[i];
-          //     if(item.librarian.includes(thename)){
-          //       ledocument = item.debrispath;
-          //       lelibrarian = item.librarian;
-          //     };
-          //   }
-          // });
         });
 
+        // generating the url with method names
         $(".nav-button").click(function(event){
-          var navid = $(this).attr('id');
-          if($(this).hasClass('clicked')==false){
-            address = address + "&method=" + navid;
-             $(this).addClass('clicked');
-             alert(address);
+          var theid = $(this).attr('id');
+          var test = "method=" + theid;
+          if(address.includes(test)!=true){
+            if(address.slice(address.length - 1)!='/'){
+              address = address + "&method=" + theid;
+             } else {
+               address = address + "?method=" + theid;
+             }
+             location.href = address;
           } else {
-            $(this).removeClass('clicked');
-            address = address - ("method=" + navid);
-            alert(address);
+              // $(this).removeClass('clicked');
+              var start = "?method=" + theid;
+              var addition = "&method=" + theid;
+              if(address.includes(start)==true && address.charAt(start.length+1)=='&'){
+                var begin = address.indexOf(start)+1;
+                address = address.replace(address.substr(begin,start.length),'');
+              } else if(address.includes(start)==true) {
+                address = address.replace(start,'');
+              } else {
+                address = address.replace(addition,'');
+              };
+            location.href = address;
           };
         });
 
+
+        //displaying the files when clicked on, based on the kind of files they are
         $(".file-names").click(function(event){
           var thefile = $(this).text();
           $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {