# Source: prsm.js

    /**
     * Code to set width of the monomass tables and sorting the table based on the first column
     */
     $(document).ready(function() {
      $('#spectrum').dataTable( {
        "scrollY":        "400px",
        "scrollCollapse": true,
        "paging":         false,
        "order": [[ 1, "asc" ]],
        "bSortClasses": false
      } );
    } );

    /**
     * Function to show only matched peaks on click of matched peaks button
     */
    function showMatchedPeaks() {
      var elems = document.getElementsByClassName("matched_peak");
      for(var i = 0; elems.length > i; i++) {
        elems[i].style.display = "";
      }
      elems = document.getElementsByClassName("unmatched_peak");
      for(var i = 0; elems.length > i; i++) {
        elems[i].style.display = "none";
      }
      $('div.dataTables_scrollBody').height(400);
    }

    /**
     * Function to show only unmatched peaks on click of unmatched peaks button
     */
    function showNotMatchedPeaks() {
      var elems = document.getElementsByClassName("matched_peak");
      for(var i = 0; elems.length > i; i++) {
        elems[i].style.display = "none";
      }
      elems = document.getElementsByClassName("unmatched_peak");
      for(var i = 0; elems.length > i; i++) {
        elems[i].style.display = "";
      }
      $('div.dataTables_scrollBody').height(400);
    }

    /**
     * Function to show all peaks on click of All peaks button
     */
    function showAllPeaks() {
      var elems = document.getElementsByClassName('matched_peak');
      for(var i = 0; elems.length > i; i++) {
        elems[i].style.display = '';
      }
      elems = document.getElementsByClassName('unmatched_peak');
      for(var i = 0; elems.length > i; i++) {
        elems[i].style.display = '';
      }
      $('div.dataTables_scrollBody').height(400);
    }
    /**
     * This gets invoked on click of annotation in the SVG of sequence at matched positions
     * Function to show only ions matched at a particular position
     * @param {String} ids - contains name of the tag
     */
    function showIonPeaks(ids) {
    	  var elems = document.getElementsByClassName('matched_peak');
    	  for(var i = 0; elems.length > i; i++) {
    	    elems[i].style.display = 'none';
    	  }
    	  elems = document.getElementsByClassName('unmatched_peak');
    	  for(var i = 0; elems.length > i; i++) {
    	    elems[i].style.display = 'none';
    	  }

    	 elems = document.getElementsByName(ids);
    	    for(var j = 0; elems.length > j; j++) {
    	      elems[j].style.display  =  "";
    	      elems[j].style.background  =  "#BEECFF";
    	    }
    }