<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" type="text/css" href="/styles/index.css">

    <script src="scripts/Helpers.js"></script>
    <script src="scripts/SoundPlayer.js"></script>
    <script src="scripts/ArrayVisualizer.js"></script>
</head>
<body>
    <div id="view-container">
        <h1 class="view-header" id="view-header-main">MAIN MENU</h1>
        <canvas id="view-canvas"></canvas>
        <div id="view-menu">
            <select class="custom-select" id="view-menu-select">
                <option value="bubble">Bubble Sort</option>
                <option value="selection">Selection Sort</option>
                <option value="insertion">Insertion Sort</option>
                <option value="merge">Merge Sort</option>
                <option value="quick">Quick Sort</option>
                <option value="heap">Heap Sort</option>
                <option value="shell">Shell Sort</option>
                <option value="comb">Comb Sort</option>
                <option value="counting">Counting Sort</option>
                <option value="radix">Radix Sort</option>
                <option value="bucket">Bucket Sort</option>
            </select>

            <button class="view-menu-button" id="view-menu-resume-button">
                <span>Resume</span>
            </button>

            <button class="view-menu-button" id="view-menu-exit-button">
                <span>Exit</span>
            </button>

            <button class="view-menu-button" id="view-menu-pause-button">
                <span>Pause</span>
            </button>

            <button class="view-menu-button" id="view-menu-restart-button">
                <span>Restart</span>
            </button>
        </div>

    </div>
    <div id="cookieConsent" style="display:block;">
       This web page uses Web Audio API 
        <button id="allowCookiesButton" onclick="allowAudio(event)">Accept</button>
    </div>

    <script>
        //ArrayVisualizer Object 
        let visualizer;
        let curr_algorithm;
        let curr_mode="default";
        

        //Jquery Objects of HTML elements 
        let 
        $view_menu_element,
        $view_canvas_element,
        $view_container_element,
        $view_header_main_element,
        $view_menu_select_element,
        $view_menu_exit_button_element,
        $view_menu_resume_button_element,
        $view_menu_pause_button_element,
        $view_menu_restart_button_element ;

        //Event Objects 
        const 
        view_menu_close_event=new Event('view_menu_close'),
        view_menu_resume_event = new Event('view_menu_resume'),
        view_menu_pause_event = new Event('view_menu_pause'),
        view_menu_restart_event = new Event('view_menu_restart'),
        view_menu_open_event = new Event('view_menu_open'),
        view_canvas_open_event= new Event('view_canvas_open'),
        view_canvas_close_event = new Event('view_canvas_close') ;
    


        //On Document Loaded
        $(function (e){ 

            /*Initializing GLOBALs*/
            //Jquery Objects
            $view_menu_element                =$('#view-menu'); 
            $view_canvas_element              =$('#view-canvas');
            $view_container_element           =$('#view-container');
            $view_header_main_element         =$('#view-header-main');
            $view_menu_exit_button_element    =$('#view-menu-exit-button');
            $view_menu_resume_button_element  =$('#view-menu-resume-button');
            $view_menu_pause_button_element   =$('#view-menu-pause-button');
            $view_menu_restart_button_element =$('#view-menu-restart-button');
            $view_menu_select_element = $('#view-menu-select');
            
            //Visualizer Object
            visualizer=new ArrayVisualizer();

         
            //DOM Event Handling Through Jquery Events

            //mouseenter:when mouse enter into the visible canvas elementarea 
            $view_canvas_element.on("mouseenter",(e)=>{
                document.dispatchEvent(view_canvas_close_event);
            });
            
            //mouseleave: when mouse leave from the visible canvas element area
            $view_canvas_element.on("mouseleave", (e) => {
                document.dispatchEvent(view_canvas_open_event);
            });


            //Main Menu Open Event
            $view_canvas_element.on("click",(e)=>{
                document.dispatchEvent(view_menu_open_event);
                document.dispatchEvent(view_canvas_open_event);
                curr_mode="main_menu";
            });
            

            //Main Menu Close Event 
            $view_menu_exit_button_element.on("click", (e) => {
                document.dispatchEvent(view_menu_close_event);
            });
            
            //Resume Event 
            $view_menu_resume_button_element.on("click", (e) => { 
                document.dispatchEvent(view_canvas_close_event);
                document.dispatchEvent(view_menu_resume_event);
                document.dispatchEvent(view_menu_close_event);
                curr_mode="resume";
            });

            //Pause Event
            $view_menu_pause_button_element.on("click", (e) => 
            {
                document.dispatchEvent(view_canvas_close_event); 
                document.dispatchEvent(view_menu_pause_event);
                document.dispatchEvent(view_menu_close_event);
                curr_mode="pause";
            });

            //Restart Event
            $view_menu_restart_button_element.on("click", (e) => { 
                
                document.dispatchEvent(view_canvas_close_event); 
                document.dispatchEvent(view_menu_restart_event);
                document.dispatchEvent(view_menu_close_event);
                curr_mode="restart";
            });

            //Select Algorithm Event
            $view_menu_select_element.change(()=>{
                var curr_value=$("#view-menu-select option:selected").val();
                curr_algorithm=curr_value;
            })

            //Update scale of view 
            window.dispatchEvent(new Event("resize"));
            $view_menu_element.css("display", "none");
        });
        
        //Updating canvas size when window size changed 
        window.addEventListener("resize", (e)=>{
            visualizer.onReSize();
            reSizeElementCss($view_menu_element,visualizer.view_canvas.style.width,visualizer.view_canvas.style.height); 
            
        });


        /*Custom Event Handling Through vanilla js*/ 
   
        //Resume Event 
        document.addEventListener("view_menu_resume", (e) => {
            console.log("View Menu Resume Event Fired!");
            
            //Main Header Mode Changing Animation
            slideToggleTextFromTo($view_header_main_element, "RESUME");
        
        });
        
        //Pause Event 
        document.addEventListener("view_menu_pause", (e) => {
            console.log("View Menu Pause Event Fired!");
            

           

            //Main Header Mode Changing Animation
            slideToggleTextFromTo($view_header_main_element, "PAUSE");
        });

        //Restart Event
        document.addEventListener("view_menu_restart", (e) => {
            console.log("View Menu Restart Event Fired!");

            
            //Main Header Mode Changing Animation
            slideToggleTextFromTo($view_header_main_element,"RESTART");
        
        });


        //Main Menu Open Event 
        document.addEventListener("view_menu_open", (e) => {

            console.log("View Menu Open Event Fired!");

            document.dispatchEvent(view_canvas_open_event);
            $($view_menu_element).slideDown();
            $view_menu_element.css("display", "flex");
            

        });
             
        //Main Menu Close Event
        document.addEventListener("view_menu_close", (e) => {
            console.log("View Menu Close Event Fired!");

            $view_menu_element.css("display", "none")
            $view_header_main_element.css("opacity", 1)
        });
           
        //Canvas Open Event Event 
        document.addEventListener("view_canvas_open", (e) => {
            console.log("View Canvas Open Event Fired!");
            $view_canvas_element.css("opacity",1);
            $view_header_main_element.css("opacity", 0);
        });

        //Canvas Close Event Event 
        document.addEventListener("view_canvas_close", (e) => {
            console.log("View Canvas Close Event Fired!");
            $view_canvas_element.css("opacity", 0.25);
            $view_header_main_element.css("opacity", 1);
        });

        
        function reSizeElementCss(el, w, h) {
            el.css("width",w);
            el.css("height", h);
        }


        async function viBubbleSort(arr, each_elem_ms,delay_ms, callback = async (arr, color_obj, each_elem_ms, delay_ms) => { },compare_callback=async (arr,color_obj,each_elem_ms,delay_ms)=>{}, swap_callback = async (arr, color_obj, each_elem_ms, delay_ms) => { }){
           
            const n=arr.length;
            for(var i=0;i<n;i++){
                
                for(var j=0;j<n-1-i;j++){
                    
                    await compare_callback(arr,{[j]:"red",[j+1]:"red"},each_elem_ms,delay_ms);      

                    if(arr[j]>arr[j+1]) {
                        
                        swap(arr,j,j+1);
                    
                        await swap_callback(arr, { [j]: "white", [j + 1]: "white" }, each_elem_ms, delay_ms);
                    }
                    
                
                }
                
                
            }
            scanAllArrayElements(arr,2);
        }
    
        async function viInsertionSort(arr, each_elem_ms, delay_ms,callback=async (arr, color_obj, each_elem_ms, delay_ms)=>{}, compare_callback = async (arr, color_obj, each_elem_ms, delay_ms) => { }, swap_callback = async (arr, color_obj, each_elem_ms, delay_ms) => { }) {
            const n=arr.length;
            for (let i = 1; i <n; i++) {
                let j = i;
                
                await callback(arr, { [j]: "white", [j - 1]: "white" },0,0);
                 
                while (j > 0 && arr[j - 1] > arr[j]) {
                    await compare_callback(arr, { [j]: "red", [j-1]: "red" }, each_elem_ms, delay_ms);
                    // Swap elements in-place
                    swap(arr,j,j-1);
                    await swap_callback(arr, { [j]: "white", [j - 1]: "white" }, each_elem_ms, delay_ms);
                    
                    j--;
                }
                
            }
            
            
            scanAllArrayElements(arr, 2);
        }
        async function viSelectionSort(arr, each_elem_ms, delay_ms, callback = async (arr, color_obj, each_elem_ms, delay_ms) => { }, compare_callback = async (arr, color_obj, each_elem_ms, delay_ms) => { }, swap_callback = async (arr, color_obj, each_elem_ms, delay_ms) => { }){
            const n = arr.length;

            for (let i = 0; i < n ; i++) {
                var minIndex=i;
                
                for(let j=i;j<n;j++){
                    await compare_callback(arr,{[minIndex]:"red",[j]:"red"},each_elem_ms,delay_ms);
                    if(arr[j]<arr[minIndex]){
                        minIndex=j;
                    }
                    
                    await callback(arr, { [i]:"white",[j]: "white" },each_elem_ms,delay_ms);
                }
                swap(arr,i,minIndex);
                await swap_callback(arr, { [minIndex]: "lime" }, each_elem_ms, delay_ms);
                
                
            }
            scanAllArrayElements(arr,2);
        }
        async function scanAllArrayElements(arr,seconds){
            for(var i=0;i<arr.length;i++)
            await visualizer.updateView(arr,{[i]:"lime"},0,seconds*1000/arr.length);
            
            await visualizer.updateView(arr, {}, 0, seconds*125/arr.length);
            
            await visualizer.updateView(arr, {[all_array_elements]:"lime"}, 0, seconds * 125 / arr.length);
        }
        function swap(arr,i,j){
            var temp=arr[i];
            arr[i]=arr[j];
            arr[j]=temp;
        }

        //Jquery animation helper functions
        function slideToggleTextFromTo(jqueryObj,from="PAUSE",to="MAIN MENU"){
            jqueryObj
                .text(from);
            setTimeout(() => jqueryObj
                .slideToggle(250), 500);

            setTimeout(() =>
                jqueryObj
                    .text(to)
                    .slideToggle(125)
                , 1000); 
        }
    </script>
</body>
</html>
