# Source: multiscan.js

    /**
     * @description
     * This class contains functions to load data of all the spectrums ms1, ms2 with multiple scans.
     * This calss generates navigation elements to navigate between different spectrums
     */
    class MultiScan{
        constructor(){
        }
        /**
         * @function
         * @description - This function waits till all the data of multiple spectrums are
         * loaded and then generates navigation tabs to switch between spectrums
         * @param {Array} specidList - Contains all the spec ids
         * @param {Array} scanIdList - Contains all the scan ids
         * @param {String} ms1_ms2_json - Contains the folder name
         */
        promiseLoadDataJS(specidList,scanIdList,ms1_ms2_json){
            let len = specidList.length;
            let scanListWithData = [];
            let count = 0;
            // get the list of lists with scan Id and value
            specidList.forEach(function(element,i){
                let temp_filename = "../../topfd/"+ms1_ms2_json+"/spectrum"+element+".js";
                let temp_script= document.createElement('script');
                temp_script.src = temp_filename;
                document.head.appendChild(temp_script);
                temp_script.onload = function(){
                    let temp_scanid ;
                    let temp_value ;
                    if(ms1_ms2_json == "ms1_json")
                    {
                        temp_scanid = ms1_data.scan;
                        temp_value = ms1_data;
                    }else{
                        temp_scanid = ms2_data.scan;
                        temp_value = ms2_data;
                    }
                    let temp_ms2DataObj = {"scanId":temp_scanid,"specId":element,"value":temp_value};
                    scanListWithData.push(temp_ms2DataObj);
                    count++;
                    // This comparison help to call the generate graph function after loading the data completely
                    // As data loading is an asynchronous process, we need to wait till all the data is loaded to execute the below functions
                    if(count == len)
                    {
                        let MultiScanObj = new MultiScan();
                        let current_data ;
                        let specId;
                        if(ms1_ms2_json == "ms1_json")
                        {
                            // Setting data to MS1 global variable
                            ms1_ScansWithData = scanListWithData;
                            MultiScanObj.createMs1NavEements(scanIdList,"popupspectrum");
                            let prec_mz = prsm_data.prsm.ms.ms_header.precursor_mz;
                            document.getElementById("popup_dataLoading").remove();
                            generateCorrespondingGraph(ms1_ScansWithData[0].value,"popupspectrum",prec_mz,specId);
                        }
                        else{
                            [current_data,specId] = getCurrentData(scanListWithData,scanIdList[0]);
                            // Setting data to MS2 global variable
                            ms2_ScansWithData = scanListWithData;
                            MultiScanObj.createMs2NavEements(scanIdList,"ms2_graph_nav");
                            document.getElementById("dataLoading").remove();
                            createMultipleSvgs("ms2svg_div","ms2svg_","ms2_svg_graph_class",ms2_ScansWithData);
                        }
                        // Set on click actions once tabs to naviage between spectrums are created
                        graphOnClickActions();
                    }
                }
            });
        }
        /**
         * Function to get unique list of scan Ids
         * @param {Array} MultiScanList - Contains list of scan ids
         */
        getUniqueScanIdList(MultiScanList){
            let uniqueList = [];
            let uniqueIdSet = new Set();
            MultiScanList.forEach(function(element){
                uniqueIdSet.add(element);
            });
            //spread operator converts array to list
            uniqueList = [...uniqueIdSet];
            return uniqueList ;
        }
        /**
         * Function to Create Navigation buttons to navigate between spectrums
         * @param {Array} scanidList - Contains scan Id List
         * @param {String} id - Contains Id of the avg on which spectrum to be drawn
         */
        createMs2NavEements(scanidList,id){
            let _ul = document.getElementById(id);
            scanidList.forEach(function(element,i){
                let li = document.createElement("li");
                li.setAttribute("class","nav-item");
                let li_id = id+"_"+element;
                li.setAttribute("id",li_id);
                let a = document.createElement("a");
                a.setAttribute("class","nav-link ms2_scanIds");
                if(i == 0)
                {
                    a.setAttribute("class","nav-link ms2_scanIds active");
                }
                a.setAttribute("href","#!");
                a.setAttribute("value",element);
                a.innerHTML = "Scan "+ element;
                li.appendChild(a);
                _ul.appendChild(li);
             })
        }
        // /**
        //  *
        //  * @param {*} scanidList
        //  * @param {*} id
        //  */
        // createMs2PopUpNavEements(scanidList,id){
        //     let _ul = document.getElementById(id);
        //     scanidList.forEach(function(element,i){
        //         let li = document.createElement("li");
        //         li.setAttribute("class","nav-item");
        //         let li_id = id+"_"+element;
        //         li.setAttribute("id",li_id);
        //         let a = document.createElement("a");
        //         a.setAttribute("class","nav-link ms2_popup_scanIds");
        //         let a_id = "ms2_popup_scanIds_"+element;
        //         a.setAttribute("id",a_id);
        //         if(i == 0)
        //         {
        //             a.setAttribute("class","nav-link ms2_popup_scanIds active");
        //         }
        //         a.setAttribute("href","#!");
        //         a.setAttribute("value",element);
        //         a.innerHTML = "Scan "+ element;
        //         li.appendChild(a);
        //         _ul.appendChild(li);
        //      })
        // }
        /**
         * Function to Create Navigation buttons for Ms1 Spectrum with spec Id information
         * @param {Array} element - Contains Scan Id List
         * @param {String} id - Contains SVG id of the MS1 spectrum to be drawn
         */
        createMs1NavEements(element,id){
            let _ul = document.getElementById("ms1_graph_nav");
            let li = document.createElement("li");
            li.setAttribute("class","nav-item");
            let a = document.createElement("a");
            a.setAttribute("class","nav-link ms1_scanIds active");
            a.setAttribute("href","#!");
            a.setAttribute("value",element);
            a.innerHTML = "Scan "+ element;
            li.appendChild(a);
            _ul.appendChild(li);
        }
        /**
         * Function to Create Navigation buttons for MonoMass Spectrum for multiple spec Id information
         * @param {Array} scanidList - List with Scan Ids
         * @param {String} id - Contians SVG tag id on which the monomass spectrum graph needs to be drawn
         */
        createMonoMassNavEements(scanidList,id){
            let _ul = document.getElementById(id);
            scanidList.forEach(function(element,i){
                let li = document.createElement("li");
                li.setAttribute("class","nav-item");
                let li_id = id+"_"+element;
                li.setAttribute("id",li_id);
                let a = document.createElement("a");
                a.setAttribute("class","nav-link monoMass_scanIds");
                if(i == 0)
                {
                    a.setAttribute("class","nav-link monoMass_scanIds active");
                }
                a.setAttribute("href","#!");
                a.setAttribute("value",element);
                a.innerHTML = "Scan "+ element;
                li.appendChild(a);
                _ul.appendChild(li);
             })
        }
    }
    /**
     * Function return data of particular Scan number
     * @param {Array} dataList - Contains data of all the scans
     * @param {int} scanId - Contains scan id of the spectrum
     */
    function getCurrentData(dataList,scanId){
        let current_data;
        let len = dataList.length;
        let specId;
        for(let i=0;i<len;i++)
        {
            if(dataList[i].scanId == parseInt(scanId))
            {
                current_data = dataList[i].value;
                specId = dataList[i].specId;
                break;
            }
        }
        return [current_data,specId];
    }
    /**
     * Function highlights the active spectrum on clcik of the scan number
     * @param {String} id - Contains id of the SVG tag
     * @param {int} currentValue - Contains scan number
     */
    function activateCurrentnavbar(id,currentValue){
        let childs = $("#"+id).children();
        let len = childs.length;
        for(let i=0;i<len;i++)
        {
            let grandchildValue = $(childs[i]).children().attr('value');
            if(grandchildValue == currentValue)
            {
                $("#"+id+" .active").removeClass("active");
                $(childs[i]).children().addClass("active");
                break;
            }
        }
    }