diff --git a/website/css/style.css b/website/css/style.css
index 22bb04cb..0510c689 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -63,6 +63,7 @@ img
 {
   display:none;
 }
+
 .atom_number_detail
 {
   position:absolute;
@@ -76,11 +77,13 @@ img
   margin:0 0 20px 20px;
   padding:4px;
 }
+
 .relative_position
 {
   position: relative;
   left: 30px;
 }
+
 .detail_position
 {
   position:absolute;
@@ -88,6 +91,7 @@ img
   top:107px;
   left:426px;
 }
+
 .detail_av
 {
   position:absolute;
@@ -95,6 +99,7 @@ img
   top:107px;
   left:426px;
 }
+
 .detail
 {
   content:none;
@@ -141,6 +146,7 @@ img
   -o-box-sizing:border-box;
   box-sizing:border-box;
 }
+
 .detail .element
 {
   font-size:26px;
@@ -148,6 +154,7 @@ img
   line-height:1;
   text-align:center;
 }
+
 .detail .l_top
 {
   margin-top:3px;
@@ -156,6 +163,7 @@ img
   line-height:1;
   text-align:left;
 }
+
 .detail .r_top
 {
   margin-top:26px;
@@ -164,6 +172,7 @@ img
   line-height:1;
   text-align:right;
 }
+
 .detail .l_follow
 {
   margin-top:4px;
@@ -171,6 +180,7 @@ img
   line-height:1;
   text-align:left;
 }
+
 .detail .r_follow
 {
   margin-top:4px;
@@ -178,6 +188,7 @@ img
   line-height:1;
   text-align:right;
 }
+
 .detail .valence
 {
   margin-top:-102px;
@@ -185,6 +196,7 @@ img
   line-height:1;
   text-align:right;
 }
+
 .plugin
 {
   position:relative;
@@ -231,60 +243,74 @@ img
   box-sizing:border-box;
   counter-increment:plugins;
 }
+
 .plugin.bg_hydrogen
 {
   background:#d16969; /*rgb(209,105,105)*/
 }
+
 .plugin.bg_alkali
 {
   background:#d19292; /*rgb(209,146,146)*/
 }
+
 .plugin.bg_alkaline
 {
   background:#d1bd92; /*rgb(209,196,212)*/
 }
+
 .plugin.bg_transition_metal
 {
   background:#a9c4d4; /*rgb(169,196,212)*/
 }
+
 .plugin.bg_post_transition_metal
 {
   background:#a3b2d6; /*rgb(163,178,214)*/
 }
+
 .plugin.bg_metalloid
 {
   background:#bdd6a3; /*rgb(189,214,163)*/
 }
+
 .plugin.bg_nonmetal
 {
   background:#d6a3be; /*rgb(214,163,190)*/
 }
+
 .plugin.bg_halogen
 {
   background:#d2d6a3; /*rgb(210,214,163)*/
 }
+
 .plugin.bg_noble_gas
 {
   background:#c4cdff; /*rgb(196,205,255)*/
 }
+
 .plugin.bg_lanthanoid
 {
   background:#edb8ff; /*rgb(237,184,255)*/
 }
+
 .plugin.bg_actinoid
 {
   background:#bf96ff; /*rgb(191,150,255)*/
 }
+
 .plugin.bg_unknown
 {
   background:#dcdcdc; /*rgb(220,220,220)*/
 }
+
 .plugin .element
 {
   font-size:18px;
   line-height:1;
   text-align:center;
 }
+
 .plugin .valence
 {
   margin-top:-48px;
@@ -293,6 +319,7 @@ img
   text-align:right;
 
 }
+
 .plugin .l_top
 {
   margin-top:-6px;
@@ -301,6 +328,7 @@ img
   text-align:left;
 
 }
+
 .plugin .l_follow
 {
   margin-top:0px;
@@ -309,6 +337,7 @@ img
   text-align:left;
 
 }
+
 .plugin .r_top
 {
   margin-top:11px;
@@ -317,14 +346,15 @@ img
   text-align:right;
 
 }
+
 .plugin .r_follow
 {
   margin-top:0px;
   font-size:8px;
   line-height:1;
   text-align:right;
-
 }
+
 .plugin .name-wrap
 {
   display:table;
@@ -332,6 +362,7 @@ img
   height:44px;
   margin-top:-15px;
 }
+
 .plugin .name-wrap-double
 {
   display:table;
@@ -339,10 +370,12 @@ img
   height:44px;
   margin-top:-17px;
 }
+
 .plugin .empty
 {
   margin-top:10px;
 }
+
 .plugin .name-wrap .name
 {
   font-size:9px;
@@ -351,6 +384,7 @@ img
   display:table-cell;
   vertical-align:middle;
 }
+
 .plugin .name-wrap-double .name
 {
   font-size:9px;
@@ -364,11 +398,13 @@ img
 {
   cursor:pointer;
 }
+
 .plugin.detail_l
 {
   z-index:5;
   counter-increment:none;
 }
+
 .plugin:before
 {
   content:counter(plugins);
@@ -377,19 +413,23 @@ img
   line-height:1;
   margin-left:1px;
 }
+
 .plugin.nth-of-type-float,.plugin:nth-of-type(2)
 {
   float:right;
 }
+
 .plugin.nth-of-type-margin,.plugin:nth-of-type(5),.plugin:nth-of-type(13)
 {
   margin-left:660px;
 }
+
 .plugin:nth-of-type(57)
 {
   margin-left:75px;
   margin-top:150px;
 }
+
 .plugin:nth-of-type(58),.plugin:nth-of-type(59),.plugin:nth-of-type(60),.plugin:nth-of-type(61),
 .plugin:nth-of-type(62),.plugin:nth-of-type(63),.plugin:nth-of-type(64),.plugin:nth-of-type(65),
 .plugin:nth-of-type(66),.plugin:nth-of-type(67),.plugin:nth-of-type(68),.plugin:nth-of-type(69),
@@ -397,6 +437,7 @@ img
 {
   margin-top:150px;
 }
+
 .plugin:nth-of-type(72){margin-left:195px;margin-top:-225px;}
 .plugin:nth-of-type(73){margin-left:260px;margin-top:-225px;}
 .plugin:nth-of-type(74){margin-left:325px;margin-top:-225px;}
@@ -446,6 +487,7 @@ img
   top:-80px;
   height:180px;
 }
+
 .infobox .logo
 {
   position:relative;
@@ -456,11 +498,13 @@ img
   background:transparent url(../logo/logo.svg) 0 0 no-repeat;
   text-indent:-9999px;
 }
+
 .infobox .logo a
 {
   display:block;
   height:100%;
 }
+
 .infobox .version
 {
   position: absolute;
@@ -511,16 +555,19 @@ img
   -webkit-border-bottom-left-radius:2px;
   -webkit-border-top-left-radius:2px;
 }
+
 .menubar p
 {
   width:382px;
   margin:0px 10px 7px 10px;
   cursor:pointer;
 }
+
 .menubar .menutext span
 {
   font-weight:bold;
 }
+
 .menubar .menutext a
 {
   width:382px;
@@ -530,6 +577,7 @@ img
   font-size:16px;
   text-decoration:none;
 }
+
 .menubar .menutext a:hover
 {
   text-decoration:underline;
@@ -682,19 +730,23 @@ img
   box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
   
 }
+
 .tooltip.right
 {
   left:60px;
 }
+
 .tooltip.bottomtop
 {
   top:-286px;
 }
+
 .tooltip.bottomtop:after,.tooltip.bottomtop:before
 {
   top:auto;
   bottom:30px;
 }
+
 .tooltip:after,.tooltip:before
 {
   left:100%;
@@ -705,11 +757,13 @@ img
   position:absolute;
   pointer-events:none;
 }
+
 .tooltip.right:after,.tooltip.right:before
 {
   left:auto;
   right:100%;
 }
+
 .tooltip:after
 {
   border-color:rgba(255, 255, 255, 0);
@@ -717,11 +771,13 @@ img
   top:30px;
   
 }
+
 .tooltip.right:after
 {
   border-left-color:rgba(255, 255, 255, 0);
   border-right-color:#fffeb8;
 }
+
 .tooltip:before
 {
   border-color:rgba(204, 204, 204, 0);
@@ -729,11 +785,13 @@ img
   border-width:11px;
   top:30px;
 }
+
 .tooltip.right:before
 {
   border-left-color:rgba(204, 204, 204, 0);
   border-right-color:#333;
 }
+
 .tooltip .tooltip-inner
 {
   position:relative;
@@ -741,30 +799,36 @@ img
   height:100%;
   color:#fff;
 }
+
 .tooltip .tooltip-inner a
 {
   color:#fff;
 }
+
 .tooltip .tooltip-inner .upper-wrap
 {
   position:absolute;
   top:15px;
   left:15px;
 }
+
 .tooltip .tooltip-inner .name
 {
   font-size:24px;
 }
+
 .tooltip .tooltip-inner .author,.tooltip .tooltip-inner .version
 {
   font-size:12px;font-style:italic;
 }
+
 .tooltip .tooltip-inner .description
 {
   position:absolute;
   bottom:100px;
   left:15px;
 }
+
 .tooltip .tooltip-inner .downloaded
 {
   position:absolute;
@@ -783,25 +847,32 @@ img
   margin-top:5px;
   font-size:11px;
 }
+
 .footer p
 {
   margin:0;
 }
+
 .footer a
 {
   text-decoration:none;
 }
+
 .footer .copyright
 {
   float:left;
 }
-.footer .info{
+
+.footer .info
+{
   float:right;
 }
+
 .glow{
   display: inline-block;
   animation: glow  0.8s 5;
 }
+
 .introjs-helperLayer {
     background-color: rgba(255, 255, 255, 0.3);
 }
@@ -809,6 +880,7 @@ img
 .introjs-tooltip {
   font-size: 16px;
 }
+
 .help_button
 {
   background:#FFFFFF;
diff --git a/website/index.html b/website/index.html
index 630c21d2..e65846ac 100644
--- a/website/index.html
+++ b/website/index.html
@@ -117,7 +117,7 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
 <tr>
 <td>
 <div class="styled-longselect" onchange="load_set_info();">
-  <select id="TYP" onchange="dynamicdropdown(this.options[this.selectedIndex].value);";>
+  <select id="TYP" onchange="dynamicdropdown(this.options[this.selectedIndex].value);">
     <!--  <option value="name">this is were you add a new table, also add the option to the dynamicdropdown funtion in dojo-tools.js</option> -->
     <option value="nc-sr-04" selected>NC SR (ONCVPSP v0.4)</option>
     <option value="nc-fr-04" >NC FR (ONCVPSP v0.4)</option>
@@ -158,7 +158,7 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
   if (typ === null){
     typ = document.getElementById('TYP').value;
   }
-  var options = document.getElementById('TYP').options
+  var options = document.getElementById('TYP').options;
   for (i in options){
     if (options[i].value == typ){
          options[i].selected = true;
@@ -166,8 +166,7 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
   }
   dynamicdropdown(typ);
 
-  <!-- if  XCF ACC and FMT have been changed previously set them back to those selections-->
-
+  // if  XCF ACC and FMT have been changed previously set them back to those selections 
 
   if (localStorage.getItem('selectedXCF')) {
     var options = document.getElementById('XCF').options
@@ -1587,6 +1586,7 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
     $(".plugin:nth-of-type(5), .plugin:nth-of-type(13)").addClass('nth-of-type-margin');
     $(".plugin:nth-of-type(1), .plugin:nth-of-type(3), .plugin:nth-of-type(11), .plugin:nth-of-type(19), .plugin:nth-of-type(37), .plugin:nth-of-type(55)").addClass('nth-of-type-clear');
 
+    // .hover( handlerIn, handlerOut)
     $('.plugin').hover(function(){
       var str = $(this).attr("class");
       var res = str.split(" ");
@@ -1594,14 +1594,15 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
       var n = parseInt(dum.split("_")[0]);
       var color = colors[res[1]];
       var res = dum.split("_");
-      var trunk = "pseudos/"
+      var trunk = "pseudos/";
       var elm = res[1];
+      // update the X_n box.
       set_X(elm, color, n);
       var typ = $("#TYP").val();
       var xcf = $("#XCF").val();
       var acc = $("#ACC").val();
       var fmt = $("#FMT").val();
-      var url = trunk.concat(typ,"_",xcf,"_",acc,"/",elm,".",fmt)
+      var url = trunk.concat(typ,"_",xcf,"_",acc,"/",elm,".",fmt);
       var mythis = $(this);
       if (localStorage.getItem('files').indexOf(url) >= 0) {
           bgcheck="#44AA44";
@@ -1614,7 +1615,7 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
           mythis.css("color", "#FFFFFF");
       }
       }, function(){
-      reset_X()
+      reset_X();
       var str = $(this).attr("class");
       var res = str.split(" ");
       var bgori = "";
@@ -1627,9 +1628,9 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
     $('.plugin').on('click', function() {
       var str = $(this).attr("class");
       var res = str.split(" ");
-      var dum = res[2]
+      var dum = res[2];
       var res = dum.split("_");
-      var trunk = "pseudos/"
+      var trunk = "pseudos/";
       var elm = res[1];
       var typ = $("#TYP").val();
       var xcf = $("#XCF").val();
@@ -1640,12 +1641,12 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
         $.get(url)
           .done(function() {
             // exists code
-            window.location.href = url
+            window.location.href = url;
           }).fail(function() {
             // not exists code
           })}
       else {
-        var url = trunk.concat(typ,"_",xcf,"_",acc,"/",elm,".",fmt,'.gz')
+        var url = trunk.concat(typ,"_",xcf,"_",acc,"/",elm,".",fmt,'.gz');
         $.get(url)
           .done(function() {
             // exists code
@@ -1655,13 +1656,15 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
           })}
     });
 
+    // .hover( handlerIn, handlerOut)
     $('.download_button').hover(function(){
-      var trunk = "pseudos/"
+      // Download the targz file with the full table.
+      var trunk = "pseudos/";
       var typ = $("#TYP").val();
       var xcf = $("#XCF").val();
       var acc = $("#ACC").val();
       var fmt = $("#FMT").val();
-      var url = trunk.concat(typ,"_",xcf,"_",acc,"_",fmt,".tgz")
+      var url = trunk.concat(typ,"_",xcf,"_",acc,"_",fmt,".tgz");
       var mythis = $(this);
       if (localStorage.getItem('files').indexOf(url) >= 0) {
           bgcheck="#44AA44";
@@ -1669,6 +1672,7 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
           mythis.css("color", "#FFFFFF");
       }
       else {
+          // tgz not available.
           bgcheck="#CC4444";
           mythis.css("background-color", bgcheck);
           mythis.css("color", "#FFFFFF");
@@ -1684,12 +1688,13 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
     });
 
     $('.download_button').on('click', function(e) {
-      var trunk = "pseudos/"
+      // Download the targz file with the full table.
+      var trunk = "pseudos/";
       var typ = $("#TYP").val();
       var xcf = $("#XCF").val();
       var acc = $("#ACC").val();
       var fmt = $("#FMT").val();
-      var url = trunk.concat(typ,"_",xcf,"_",acc,"_",fmt,".tgz")
+      var url = trunk.concat(typ,"_",xcf,"_",acc,"_",fmt,".tgz");
       $.get(url)
         .done(function() {
             // exists code
@@ -1739,6 +1744,7 @@ <h1 class="logo hide"><a href="https://youtu.be/j9z4AJIx40M" target="_blank" tit
 
   });
 </script>
+
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/website/js/dojo-tools.js b/website/js/dojo-tools.js
index 1e6b51ba..857d4504 100644
--- a/website/js/dojo-tools.js
+++ b/website/js/dojo-tools.js
@@ -6,7 +6,16 @@ function.prototype.method = function (name func) {
 */
 
 var keys = ['hh', 'hl', 'hn', 'nv', 'd', 'dp', 'gb'];
-var els = ['H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne','Na', 'Mg', "Al", "Si", 'P', 'S', 'Cl', 'Ar','K', 'Ca', 'Sc', 'Ti', 'V', 'Cr', 'Mn', 'Fe','Co','Ni','Cu','Zn','Ga','Ge','As','Se','Br','Kr','Rb','Sr','Y','Zr','Nb','Mo','Tc','Ru','Rh','Pd','Ag','Cd','In','Sn','Sb','Te','I','Xe','Cs','Ba','La','Ce','Pr','Nd','Pm','Sm','Eu','Gd','Tb','Dy','Ho','Er','Tm','Yb','Lu','Hf','Ta','W','Re','Os','Ir','Pt','Au','Hg','Tl','Pb','Bi','Po','At','Rn'];
+
+var els = [
+  'H', 'He', 
+  'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne','Na', 'Mg', "Al", "Si", 'P', 'S', 'Cl', 'Ar', 
+  'K', 'Ca', 'Sc', 'Ti', 'V', 'Cr', 'Mn', 'Fe','Co','Ni','Cu','Zn','Ga','Ge','As','Se','Br','Kr',
+  'Rb','Sr','Y','Zr','Nb','Mo','Tc','Ru','Rh','Pd','Ag','Cd','In','Sn','Sb','Te','I','Xe',
+  'Cs','Ba',
+  'La','Ce','Pr','Nd','Pm','Sm','Eu','Gd','Tb','Dy','Ho','Er','Tm','Yb','Lu',
+  'Hf','Ta','W','Re','Os','Ir','Pt','Au','Hg','Tl','Pb','Bi','Po','At','Rn'
+];
 
 function getParameterByName(name) {
     var url = window.location.href;
@@ -20,6 +29,7 @@ function getParameterByName(name) {
 }
 
 function set_warning(txt) {
+  // Set the text in the warning box
   var warningbox = document.getElementById('warning_box');
   warningbox.innerHTML = "<div class='alert warning'><span id='cbn' class='closebtn'>&times;</span><strong>Warning!</strong> ".concat(txt, "</div>");
   var close = document.getElementById("cbn");
@@ -61,7 +71,7 @@ function make_light() {
 function set_info(info, animate) {
     var averages = [0,0,0,0,0,0,0];
     var sums = [0,0,0,0,0,0,0];
-    if (animate*localStorage.getItem('animate') === 1){
+    if (animate * localStorage.getItem('animate') === 1){
         console.log('added animating');
         $('.plugin').removeClass('anim');
         $('.plugin').removeClass('chaos');
@@ -108,11 +118,12 @@ function set_info(info, animate) {
 }
 
 function loadJSON(file, callback) {
+    // Helper function to load a json file.
     var xobj = new XMLHttpRequest();
     xobj.overrideMimeType("application/json");
     xobj.open('GET', file, true);
     xobj.onreadystatechange = function () {
-          if (xobj.readyState == 4 && xobj.status == 200) {
+        if (xobj.readyState == 4 && xobj.status == 200) {
             // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
             callback(xobj.responseText);
           }
@@ -121,9 +132,10 @@ function loadJSON(file, callback) {
  }
 
 function store_available_files() {
+    // Get list of files from files.json and store it in the localStorage.
     loadJSON('files.json', function(response) {
-    var info = JSON.parse(response);
-    localStorage.setItem('files', info);
+        var info = JSON.parse(response);
+        localStorage.setItem('files', info);
     });
 }
 
@@ -134,12 +146,13 @@ function load_set_info(animate) {
     set_info({}, 0);
     var file = type + '_' + xcf + '_' + acc + '.json';
     loadJSON(file, function(response) {
-    var info = JSON.parse(response);
-    set_info(info, animate);
+        var info = JSON.parse(response);
+        set_info(info, animate);
     });
 }
 
 function set_X(elm, color, n){
+    // Update params shown in the X_n box.
     if (els.indexOf(elm) >= 0){
         document.getElementById('N').innerHTML = n;
         var x = document.getElementById('X_n');
@@ -149,6 +162,7 @@ function set_X(elm, color, n){
         for (key in keys){
             var id_key = 'X_' + keys[key];
             var id_key_in = elm + '_' + keys[key];
+            // Get the params from the pseudo associated to this element and copy to the X box.
             var x = document.getElementById(id_key_in);
             var y = document.getElementById(id_key);
             var val = x.innerHTML;
@@ -158,6 +172,7 @@ function set_X(elm, color, n){
 }
 
 function reset_X(){
+    // Reset the params shown in the X_n box.
     document.getElementById('X_el').innerHTML = 'Mean'
     document.getElementById('N').innerHTML = '';
     document.getElementById('X_n').style.backgroundColor = "#ffffff";
@@ -174,10 +189,12 @@ function set_av(val){
 }
 
 function show_X(){
+    // Show the X_n box.
     document.getElementById('X_n').style.visibility = "visible";
 }
 
 function hide_X(){
+    // Hide the X_n box.
     document.getElementById('X_n').style.visibility = "hidden";
 }
 
@@ -283,7 +300,7 @@ function dojoTour_guidedtour() {
 }
 
 function dynamicdropdown(listindex){
-  // Set the values of the XC/Accuracy/Format widgets given the value of Type.
+  // Set the values of the XC/Accuracy/Format widgets given the pseudo type.
   console.log('dynamic dropdown: setting', listindex)
   document.getElementById("ACC").length = 0;
   document.getElementById("XCF").length = 0;