/*Canopy - The next generation of stoner streaming software
Copyright (C) 2024-2026 Rainbownapkin and the TTN Community

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.*/

/**
 * Class representing Queue Panel UX
 */
class queuePanel extends panelObj{
    /**
     * Instantiates a new Queue Panel object
     * @param {channel} client - Parent Client Management Object
     * @param {Document} panelDocument - Panel Document
     */
    constructor(client, panelDocument){
        //Call derived constructor
        super(client, "Media Schedule", "/panel/queue", panelDocument);

        /**
         * Current day, zero'd out to midnight
         */
        this.day = new Date();
        //Zero out day to midnight
        this.day.setHours(0,0,0,0);

        /**
         * Schedule time scale in seconds, defaults to 30 minutes
         */
        this.scale = 30 * 60;

        /**
         * Re-scale timer, counts down after re-sizing to clear re-size UI and show schedule again
         */
        this.rescaleTimer = null;

        /**
         * Enables auto-scroll on schedule UX
         */
        this.autoscroll = true;

        /**
         * Child Playlist Manager Object
         */
        this.playlistManager = new playlistManager(client, panelDocument, this);

        //Define non-input event listeners
        this.defineListeners();
    }

    docSwitch(){
        //Clear timetips
        this.killTimetips();

        //Call derived doc switch function
        super.docSwitch();

        //Get queue div
        this.queue = this.panelDocument.querySelector('#queue');
        //Get queue container
        this.queueContainer = this.queue.querySelector("#queue-container");
        //Get queue marker contianer
        this.queueMarkerContainer = this.queue.querySelector('#queue-marker-container');
        //Get queue layout controller
        this.queueLayoutController = this.panelDocument.querySelector('#queue-panel-layout-controller');
        //Get queue control offset
        this.queueControlOffset = this.panelDocument.querySelector('#queue-control-offset');
        //Re-acquire time marker
        this.timeMarker = this.panelDocument.querySelector('#time-marker');
        //Dragscroll timer
        this.dragScrollTimer = null;

        //Get main control buttons
        this.addMediaButton = this.panelDocument.querySelector('#queue-add-media');
        this.goLiveButton = this.panelDocument.querySelector('#queue-go-live');
        this.scrollLockButton = this.panelDocument.querySelector('#queue-scroll-lock');
        this.queueDateButton = this.panelDocument.querySelector('#queue-date');
        this.playlistMenuButton = this.panelDocument.querySelector("#queue-playlists");
        this.clearMediaButton = this.panelDocument.querySelector('#queue-clear');
        this.queueLockButton = this.panelDocument.querySelector('#queue-lock');

        //Get control divs
        this.addMediaDiv = this.panelDocument.querySelector('#queue-media-prompts');
        this.goLiveDiv = this.panelDocument.querySelector('#queue-live-prompts');
        this.queueDateDiv = this.panelDocument.querySelector('#queue-control-date');
        this.playlistDiv = this.panelDocument.querySelector('#queue-playlist-prompts');

        //Get control div elements
        //Add Media
        this.addMediaLinkPrompt = this.panelDocument.querySelector('#media-link-input');
        this.addMediaNamePrompt = this.panelDocument.querySelector('#media-name-input');
        this.queueLastButton = this.panelDocument.querySelector('#queue-last-button');
        this.queueAtButton = this.panelDocument.querySelector('#queue-at-button');
        //Go Live
        this.goLiveNamePrompt = this.panelDocument.querySelector("#queue-live-prompts-name-input");
        this.goLiveOverwriteButton = this.panelDocument.querySelector("#queue-live-prompts-overwrite-button");
        this.goLivePushbackButton = this.panelDocument.querySelector("#queue-live-prompts-pushback-button");
        //Date Queue date
        this.queueDateDecrement = this.panelDocument.querySelector('#queue-control-date-decrement');
        this.queueDateIncrement = this.panelDocument.querySelector('#queue-control-date-increment');
        this.queueDatePrompt = this.panelDocument.querySelector('#queue-control-date-prompt');

        //Display lock status
        this.handleScheduleLock();

        //Render out the queue
        this.fullRender();

        //Setup panel input
        this.setupInput();

        //Pass the new panelDoc and docSwitch() call down to child classes
        this.playlistManager.panelDocument = this.panelDocument;
        this.playlistManager.docSwitch();
    }

    closer(){
        //Clear any remaining timers
        clearTimeout(this.renderIntervalTimer);
        //Clear timetips
        this.killTimetips();
    }

    /**
     * Handles Network-Related Event Listeners
     */
    defineListeners(){
        //Render queue when we receive a new copy of the queue data from the server
        //Render queue should be called within an arrow function so that it's called with default parameters, and not handed an event as a date
        this.client.queueBroadcastSocket.on("queue", () => {this.renderQueue();});
        this.client.socket.on("start", this.handleStart.bind(this));
        this.client.socket.on("end", this.handleEnd.bind(this));
        this.client.socket.on("lock", this.handleScheduleLock.bind(this));
        this.client.socket.on("error", this.handleQueueError.bind(this));
    }

    /**
     * Handles Input-Related Event Listeners
     */
    setupInput(){
        //Re-render queue and time-marker on window resize as time-relative absolute positioning will be absolutely thrown
        this.ownerDoc.defaultView.addEventListener('resize', this.resizeRender.bind(this));

        //queue
        this.queue.addEventListener('wheel', this.scaleScroll.bind(this));

        //control bar controls
        this.addMediaButton.addEventListener('click', this.toggleAddMedia.bind(this));
        this.goLiveButton.addEventListener('click', this.toggleGoLive.bind(this));
        this.scrollLockButton.addEventListener('click', this.lockScroll.bind(this));
        this.queueDateButton.addEventListener('click', this.toggleDateControl.bind(this));
        this.playlistMenuButton.addEventListener('click', this.togglePlaylistDiv.bind(this));
        this.clearMediaButton.addEventListener('click', this.clearMedia.bind(this));
        this.queueLockButton.addEventListener('click', this.lockSchedule.bind(this));

        //control bar divs
        //Add Media
        this.queueLastButton.addEventListener('click', this.queueLast.bind(this))
        this.queueAtButton.addEventListener('click', this.queueAt.bind(this))
        //Go Live
        this.goLiveOverwriteButton.addEventListener('click', this.goLive.bind(this));
        this.goLivePushbackButton.addEventListener('click', this.goLive.bind(this));
        //Queue Date
        this.queueDateDecrement.addEventListener('click', this.decrementDate.bind(this));
        this.queueDateIncrement.addEventListener('click', this.incrementDate.bind(this));
        this.queueDatePrompt.addEventListener('change', this.setQueueDate.bind(this));
    }

    /* socket.io listeners */
    /**
     * Handles call from server to start media
     * @param {Object} data - Data from server
     */
    handleStart(data){
        //If we're starting an HLS Livestream
        if(data.media != null && data.media.type == 'livehls'){
            //Hide the 'goLive' controls
            this.goLiveDiv.style.display = 'none';
        }

        this.renderQueue();
    }

    /**
     * Handles call from server to end media
     */
    handleEnd(){
        //Reset Go Live button
        this.goLiveButton.classList.replace('critical-danger-button', 'danger-button');
        this.goLiveButton.classList.replace('bi-record', 'bi-record2');
        this.goLiveButton.title = "Go Live";

        this.renderQueue();
    }

    /**
     * Handles call from server to lock schedule
     */
    handleScheduleLock(){
        //Get queue lock button icon
        const icon = this.queueLockButton.querySelector('i');

        if(this.client.queueLock){
            this.queueLockButton.classList.remove('positive-button', 'bi-unlock-fill');
            this.queueLockButton.classList.add('danger-button', 'bi-lock-fill');
        }else{
            this.queueLockButton.classList.remove('danger-button', 'bi-lock-fill');
            this.queueLockButton.classList.add('positive-button', 'bi-unlock-fill');
        }
    }

    /**
     * Handles queue-related error from the server
     * @param {Object} data - Data from server
     */
    handleQueueError(data){
        //Create a flag to reload the queue
        let reloadQueue = false;
        
        //Check errors
        for(let error of data.errors){
            //If we have a queue error
            if(error.type == "queue"){
                //Throw the reload flag
                reloadQueue = true;
            }
        }

        //If we need to reload the queue
        if(reloadQueue){
            //Do so
            this.renderQueue();
        }
    }

    /* queue control button functions */

    /**
     * Toggles add media UX
     * @param {Event} event - Event passed down from Event Listener
     */
    toggleAddMedia(event){
        //If the div is hidden
        if(this.addMediaDiv.style.display == 'none'){
            //Light up the button
            this.addMediaButton.classList.add('positive-button');
            //Show the div
            this.addMediaDiv.style.display = '';
        }else{
            //Unlight the button
            this.addMediaButton.classList.remove('positive-button');
            //Hide the div
            this.addMediaDiv.style.display = 'none';
        }
    }

    /**
     * Toggles Go-Live UX
     * @param {Event} event - Event passed down from Event Listener
     */
    toggleGoLive(event){
        //If we're not livestreaming
        if(client.player.mediaHandler.type != "livehls"){
            //If the div is hidden
            if(this.goLiveDiv.style.display == 'none'){
                //Show the div
                this.goLiveDiv.style.display = '';
            }else{
                //Hide the div
                this.goLiveDiv.style.display = 'none';
            }
        //Otherwise
        }else{
            //Hide the div, if it isn't already
            this.goLiveDiv.style.display = 'none';

            //Stop the livestream
            client.socket.emit('stop');
        }

    }

    /**
     * Handles sending request to server to start a live stream
     * @param {Event} event - Event passed down from Event Listener
     */
    goLive(event){
        //Start a livestream
        client.socket.emit('goLive',{title: this.goLiveNamePrompt.value, mode: event.target.dataset['mode']});
    }

    /**
     * Locks schedule scroll to current time marker
     * @param {Event} event - Event passed down from Event Listener
     * @param {Boolean} jumpToDay - whether or not to jump schedule to the current day
     */
    lockScroll(event, jumpToDay = true){
        //If we're supposed to jump to the current day
        if(jumpToDay){
            //Set schedule to current day
            this.setDay();
        }

        //Enable scroll lock
        this.autoscroll = true;

        //If we have a time marker
        if(this.timeMarker != null){
            //Light the indicator
            this.scrollLockButton.classList.add('positive-button');
            //Render the marker early to insta-jump
            this.renderTimeMarker();
        }else{
            //Unlight the indicator
            this.scrollLockButton.classList.remove('positive-button');
        }
    }

    /**
     * Toggles schedule date control
     * @param {Event} event - Event passed down from Event Listener
     */
    toggleDateControl(event){
        //If the div is hidden
        if(this.queueDateDiv.style.display == 'none'){
            //Light up the button
            this.queueDateButton.classList.add('positive-button');

            //Set date text
            this.queueDatePrompt.valueAsDate = utils.ux.localizeDate(this.day);

            //Show the div
            this.queueDateDiv.style.display = '';
        }else{
            //Unlight the button
            this.queueDateButton.classList.remove('positive-button');
            //Hide the div
            this.queueDateDiv.style.display = 'none';
        }
    }

    /**
     * Toggles playlist management UX
     * @param {Event} event - Event passed down from Event Listener
     */
    togglePlaylistDiv(event){
        //If the div is hidden
        if(this.playlistDiv.style.display == 'none'){
            //Query playlists
            client.socket.emit('getChannelPlaylists');

            //Light up the button
            this.playlistMenuButton.classList.add('positive-button');
            //Show the div
            this.playlistDiv.style.display = '';
        }else{
            //Unlight the button
            this.playlistMenuButton.classList.remove('positive-button');
            //Hide the div
            this.playlistDiv.style.display = 'none';
        }
    }

    /**
     * Sends request to server to clear media between a range of two dates
     * @param {Event} event - Event passed down from Event Listener
     */
    clearMedia(event){
        //Call up the popup
        new clearPopup(event, this.client, null, this.ownerDoc);
    }

    /**
     * Sends request to lock the schedule
     * @param {Event} event - Event passed down from Event Listener
     */
    lockSchedule(event){
        client.socket.emit('lock');
    }

    /* add queue controls */
    /**
     * Sends request to queue current URL after the last item
     * @param {Event} event - Event passed down from Event Listener
     */
    queueLast(event){
        //Send off the request
        this.client.socket.emit("queue",{url:this.addMediaLinkPrompt.value, title:this.addMediaNamePrompt.value});

        //Clear out prompts
        this.addMediaLinkPrompt.value = '';
        this.addMediaNamePrompt.value = '';
    } 

    /**
     * Sends request to queue current URL at the current time
     * @param {Event} event - Event passed down from Event Listener
     */
    queueAt(event){
        //Call up the popup
        new schedulePopup(event, this.client, this.addMediaLinkPrompt.value, this.addMediaNamePrompt.value, null, this.ownerDoc);

        //Clear out prompts
        this.addMediaLinkPrompt.value = '';
        this.addMediaNamePrompt.value = '';
    }

    /* set date controls */
    /**
     * Increments displayed schedule date
     * @param {Event} event - Event passed down from Event Listener
     */
    incrementDate(event){
        //Increment day
        this.day.setDate(this.day.getDate() + 1);
        //Set day
        this.setDay(this.day);
    }

    /**
     * Decrements displayed schedule date
     * @param {Event} event - Event passed down from Event Listener
     */
    decrementDate(event){
        //Decrement day
        this.day.setDate(this.day.getDate() - 1);

        //Set day
        this.setDay(this.day);
    }

    /**
     * Validates and  sets display schedule date from user input
     * @param {Event} event - Event passed down from Event Listener
     */
    setQueueDate(event){
        //If we have a valid date
        if(this.queueDatePrompt.valueAsDate != null){
            //Set the day
            this.setDay(utils.ux.normalizeDate(this.queueDatePrompt.valueAsDate));

        }
    }

    /** 
     * Directly sets schedule display date
     * @param {Date} date - Date to set schedule to
     */
    setDay(date = new Date()){
        //Set day
        this.day = date;
        //Zero out to midnight
        this.day.setHours(0,0,0,0);

        //Set prompt to current day
        this.queueDatePrompt.valueAsDate = utils.ux.localizeDate(this.day);

        //Re-render the queue
        this.renderQueue();
        //Re-render/hide the time marker
        this.renderTimeMarker();

        //If autoscroll is enabled
        if(this.autoscroll){
            //Simulate a button click to un/re-light the button and trigger a scroll when the date is set to today
            this.lockScroll(null, false);
        }
    }

    /**
     * Handles time-scale changes on crtl+scroll
     * @param {Event} event - Event passed down from Event Listener
     */
    scaleScroll(event){
        if(event.ctrlKey){
            //I could sit here and work out why timetips break everything on scalescroll
            //Then again you wouldn't want phantom timetips surviving the re-scale so you might as well get two birds stoned at once :P
            this.killTimetips();

            //Capture inverse scroll wheel direction
            const scrollDirection = event.wheelDeltaY / Math.abs(event.wheelDeltaY) * -1;

            //Default scale factor to 5 seconds
            let scaleFactor = 5;

            //Tried to do this with math but couldnt because im bad at math so heres the if statement of shame :(
            if(this.scale >= 7200){
                scaleFactor = 3600
            }else if(this.scale >= 3600){
                scaleFactor = scrollDirection > 0 ? 3600 : 1800;
            }else if(this.scale >= 1800){
                scaleFactor = scrollDirection > 0 ? 1800 : 900;
            }else if(this.scale == 900){
                scaleFactor = scrollDirection > 0 ? 900 : 300;
            }else if(this.scale > 300){
                //If we're above five minutes use five minutes
                scaleFactor = 300;
            }else if(this.scale == 300){
                //If we're at five minutes scroll up by five minutes or scroll down to one minute
                scaleFactor = scrollDirection > 0 ? 300 : 240;
            }else if(this.scale == 60){
                //If we're at one minutes scroll up by four minutes or scroll down by 10 seconds
                scaleFactor = scrollDirection > 0 ? 240 : 10;
            }else if(this.scale > 10){
                scaleFactor = 10;
            }else if(this.scale == 10){
                scaleFactor = scrollDirection > 0 ? 10 : 5;
            }

            //Prevent page-wide zoom in/out
            event.preventDefault();

            //Clear out the queue UI
            this.clearQueue();

            //Calculate new scale
            const newScale = this.scale + (scaleFactor * scrollDirection);

            //Clamp scale between 10 seconds and half a day
            this.scale = Math.max(5, Math.min(43200, newScale));

            //If we have no scale label
            if(this.scaleLabel == null){
                //Make it
                this.scaleLabel = document.createElement('p');
                this.scaleLabel.id = 'queue-marker-scale-label';
                this.queue.appendChild(this.scaleLabel);
            }

            //Set scale label text to humie readable time scale
            this.scaleLabel.innerHTML = `Time Scale:<br>${utils.ux.humieFriendlyDuration(this.scale)}`

            //Clear any previous rescale timer
            clearTimeout(this.rescaleTimer);
            //Set timeout to re-render after input stops
            this.rescaleTimer = setTimeout(this.fullRender.bind(this), 500);
        //Otherwise, if we're just scrolling
        }else{
            //If we're looking at today
            if(utils.isSameDate(new Date(), this.day)){
                //Unlock auto scroll
                this.unlockScroll();
            }
        }
    }

    /**
     * Un-locks scroll from curren time marker
     */
    unlockScroll(){
        //Disable scroll lock
        this.autoscroll = false;
        //Unlight the indicator
        this.scrollLockButton.classList.remove('positive-button');
    } 

    /**
     * Handles re-rendering schedule upon window re-size
     * @param {Event} event - Event passed down from Event Listener
     */
    resizeRender(event){
        const date = new Date();
        this.renderQueue(date);
        this.renderTimeMarker(date);
    }

    /**
     * Clears out queue container for re-render
     */
    clearQueue(){
        //If we have no body
        if(this.ownerDoc.body == null){
            //We have bigger issues
            return;
        }

        //Clear out queue container
        this.queueContainer.innerHTML = '';;
        //Clear out queue marker container
        this.queueMarkerContainer.innerHTML = '';
        
        //Grab all related tooltips
        const tooltips = this.ownerDoc.body.querySelectorAll('.media-tooltip');

        //clear them out since we're clearing out the elements with the event to remove them
        //These should clear out on their own on mousemove but this makes things look a *little* prettier :)
        for(let tooltip of tooltips){
            tooltip.parentNode.remove();
        }

        //Clear any marker timers
        clearTimeout(this.renderIntervalTimer);

        //If we have an existing time marker
        if(this.timeMarker != null){
            //Clear it out
            this.timeMarker.remove();
            this.timeMarker = null;
        }
    }

    /**
     * 
     * @param {Date} date - Current time, 
     */
    async fullRender(date = new Date()){
        //Clear the queue
        this.clearQueue();

        //If we have a scale label
        if(this.scaleLabel != null){
            //Take it out
            this.scaleLabel.remove();
            this.scaleLabel = null;
        }

        //Render out time scale
        this.renderQueueScale(date);

        //Grab the first marker
        let firstMarker = this.panelDocument.querySelector('.queue-marker-first');

        //Loop until first marker is properly positioned
        while(firstMarker.offsetTop > 0){
            //wait a few frames so the scale can finish rendering, because dom function aren't async for some fucking reason
            await utils.ux.awaitNextFrame();
        }

        //render the time marker w/ force scroll
        this.renderTimeMarker(date, true);

        //Kick off render interval
        this.renderInterval(date);

        //render out the queue
        this.renderQueue(date);
    }

    /**
     * Renders out schedule
     * @param {Date} date - Date representing current time, defaults to new date object
     */
    renderQueue(date = new Date()){
        //Clear out queue container
        this.queueContainer.innerHTML = '';

        //for every entry in the queue
        for(let entry of this.client.queue){
            //Check if item starts today
            const startsToday = utils.isSameDate(this.day, new Date(entry[1].startTime));
            //Check if item ends today
            const endsToday = utils.isSameDate(this.day, new Date(entry[1].startTime + (entry[1].duration * 1000)));

            //If the item either starts or ends today
            var playsToday = (startsToday || endsToday);

            //If the media neither starts nor ends today
            if(!playsToday){
                //set playsToday based on whether or not we're playing something fucking huge and it's covering all of today
                playsToday = utils.dateWithinRange(new Date(entry[1].startTime), new Date(entry[1].startTime + (entry[1].duration * 1000)), this.day);
            }

            //If part of the current item plays today
            if(playsToday){
                //Create entry div
                const entryDiv = document.createElement('div');
                entryDiv.classList.add('queue-entry');

                //For each property of the media object
                for(let key of Object.keys(entry[1])){
                    //add it to its given dataset
                    entryDiv.dataset[key] = entry[1][key];
                }

                //If this item starts today
                if(startsToday){
                    //Place the top of the entry div based on time
                    entryDiv.style.top = `${this.offsetByDate(new Date(entry[1].startTime))}px`;
                }else{
                    //Get dawn
                    const dawn = new Date();
                    dawn.setHours(0,0,0,0);

                    //Place item beginning at dawn
                    entryDiv.style.top = `${this.offsetByDate(dawn)}px`;

                    //Apply style rules for items that starrted yesterday
                    entryDiv.classList.add('started-yesterday');
                }

                //If the item ends today
                if(endsToday){
                    //Place the bottom of the entry div based on time
                    entryDiv.style.bottom = `${this.offsetByDate(new Date(this.getMediaEnd(entry[1])), true)}px`;
                }else{
                    //Get midnight
                    const dusk = new Date();
                    dusk.setHours(23,59,59,999);

                    //Place item beginning at dawn
                    entryDiv.style.bottom = `${this.offsetByDate(dusk, true)}px`;

                    //Run apply the rest of the styling rules
                    entryDiv.classList.add('ends-tomorrow');
                }

                //If we started in the middle of the video
                if(entry[1].startTimeStamp > 0){
                    entryDiv.classList.add('started-late');
                }

                //If we ended early
                if(entry[1].earlyEnd != null){
                    entryDiv.classList.add('ended-early');
                }

                //Create entry title
                const entryTitle = document.createElement('p');
                entryTitle.textContent = utils.unescapeEntities(entry[1].title);

                //Tooltip generation
                //tooltip div
                const tooltipDiv = document.createElement('div');
                tooltipDiv.classList.add('media-tooltip');

                //tooltip components
                //For each string
                for(let string of [
                    `Title: ${entry[1].title}`,
                    `File Name: ${entry[1].fileName}`,
                    `Source: ${entry[1].type}`,
                    `Duration: ${utils.ux.humieFriendlyDuration(entry[1].duration)}`,
                    `Start Time: ${new Date(entry[1].startTime).toLocaleString()}${entry[1].startTimeStamp == 0 ? '' : ' (Started Late)'}`,
                    `End Time: ${new Date(this.getMediaEnd(entry[1])).toLocaleString()}${entry[1].earlyEnd == null ? '' : ' (Ended Early)'}`
                ]){
                    //Create a 'p' node
                    const component = document.createElement('p');
                    //Fill it with the string
                    component.textContent = utils.unescapeEntities(string);
                    //Append it to the tooltip div
                    tooltipDiv.append(component);
                }

                //Setup media tooltip
                entryDiv.addEventListener('mouseenter',(event)=>{
                    //If we're not dragging
                    if(event.target.dataset['drag'] != 'true'){
                        //Display tooltip
                        utils.ux.displayTooltip(event, tooltipDiv, false, null, true, this.ownerDoc);
                    }
                });

                //Create context menu map
                const menuMap = new Map();
                const now = new Date();

                //If the item hasn't started yet
                if(entry[1].startTime > now.getTime()){
                    //Add 'Play' option to context menu
                    menuMap.set("Play now", ()=>{this.client.socket.emit('move', {uuid: entry[1].uuid})});
                    //Add 'Move To...' option to context menu
                    menuMap.set("Move To...", (event)=>{new reschedulePopup(event, this.client, entry[1], null, this.ownerDoc)});
                //Otherwise, if the item is currently playing (confirm with UUID since time might not always be reliable, such as during livestreams)
                }else if(entry[1].uuid == this.client.player.mediaHandler.nowPlaying.uuid){
                    //Add 'Stop' option to context menu
                    menuMap.set("Stop", ()=>{this.client.socket.emit('stop')});
                    //Add the Now Playing glow, not the prettiest place to add this, but why let a good conditional go to waste?
                    entryDiv.classList.add('now-playing');
                //Otherwise, if the item has been archived
                }else{
                    entryDiv.classList.add('archived');
                }

                //Add 'Delete' option to context menu
                menuMap.set("Delete", ()=>{this.client.socket.emit('delete', {uuid: entry[1].uuid})})
                //Add 'New Tab' option to context menu
                menuMap.set("Open in New Tab", ()=>{window.open(entry[1].url, '_blank').focus();})
                //Add 'Copy URL' option to context menu
                menuMap.set("Copy URL", ()=>{navigator.clipboard.writeText(entry[1].url);})

                //If the item hasn't yet ended
                if(this.getMediaEnd(entry[1]) > now.getTime()){
                    //Setup drag n drop
                    entryDiv.addEventListener('mousedown', clickEntry.bind(this));
                }

                //Setup context menu
                entryDiv.addEventListener('contextmenu', (event)=>{
                    //If we're not dragging
                    if(event.target.dataset['drag'] != 'true'){
                        //Display context menu
                        utils.ux.displayContextMenu(event, '', menuMap, this.ownerDoc);
                    }
                });
                
                //Append entry elements
                entryDiv.append(entryTitle);

                //Append entry
                this.queueContainer.append(entryDiv);
            }

        }

        //Render out any playing livestreams
        this.renderLiveStream(date);

        function clickEntry(event){
            //If it's not a left click
            if(event.buttons != 1){
                //fuck off
                return;
            }

            //Grab existing height
            let height = event.target.offsetHeight;
            let cutoffOffset = 0;

            //If the item got cut-off at the bottom
            if(event.target.classList.contains("ends-tomorrow") || event.target.classList.contains("ended-early")){
                //Calculate height from duration
                height = this.offsetByMilliseconds(Number(event.target.dataset['duration']) * 1000);
            //If the item got cut-off at the top
            }else if(event.target.classList.contains('started-yesterday') || event.target.classList.contains("started-late")){
                //Keep old height for now
                const oldHeight = height;

                //Calculate height from duration
                height = this.offsetByMilliseconds(Number(event.target.dataset['duration']) * 1000);

                //Calculate the mouse offset needed to keep it properly placed relative to the original click point
                cutoffOffset = height - oldHeight;
            }

            //Remove any cut-off borders
            event.target.classList.remove('ends-tomorrow', 'started-yesterday', 'ended-early', 'started-late');


            //If we havent set height or width
            if(event.target.style.height == ""){
                //Preserve calculated entry height
                event.target.style.height = `${height}px`;
            }

            //Add set dragging CSS class to target
            event.target.classList.add('dragging-queue-entry');

            //enable drag on target dataset
            event.target.dataset['drag'] = true;

            //Kill existing timetips
            this.killTimetips();

            //Create a tooltip to show the time we're dragging to
            const timetip = new canopyUXUtils.tooltip('', false, null, this.ownerDoc);
            timetip.tooltip.classList.add('media-tooltip','media-timetip');
            timetip.tooltip.addEventListener('mousemove', this.killTimetips.bind(this));


            //Drag entry with mouse
            this.ownerDoc.body.addEventListener('mousemove', (nestedEvent)=>{(dragEntry.bind(this))(nestedEvent, event.target, timetip)});

            //Drop on mouse up
            this.ownerDoc.body.addEventListener('mouseup', (nestedEvent)=>{(dropEntry.bind(this))(nestedEvent, event.target)});

            //Disable selection on body
            this.ownerDoc.body.style.userSelect = 'none';

            //Save top of target relative to window minus the mouse position as our drag offset
            event.target.dataset['dragoffset'] = (event.target.offsetTop + this.ownerDoc.defaultView.scrollY) - event.clientY - cutoffOffset;

            //Call the drag entry function to move the entry on click without re-writing the wheel
            (dragEntry.bind(this))(event, event.target, timetip);
            
            //Start dragscroll loop
            this.dragScrollTimer = setInterval(()=>{(dragScroll.bind(this))(event.target)}, 10);
        }

        function dragScroll(target){
            //Stop timeout loop
            if(!target.isConnected || target.dataset['drag'] != "true"){
                //Clear the interval
                clearInterval(this.dragScrollTimer);
                //Fuck off and die!
                return;
            }

            //Set minimum distance to detect
            const detectionDistance = 70;
            //Set value to devide distance from edge during scroll speed calculation
            const speedDevider = 6;

            //Get top boundaries distance from the top relative to the scroll top and set as top input
            let topInput = target.offsetTop - this.queueLayoutController.scrollTop;
            //Get bottom boundaries distance from the top relative to the scroll top and set as bottom input
            let bottomInput = this.queueContainer.offsetHeight - ((target.offsetTop + target.offsetHeight) + (this.queueLayoutController.scrollTopMax - this.queueLayoutController.scrollTop));

            //If the item we're dragging is fackin uge'
            if(target.offsetHeight > (this.queueLayoutController.offsetHeight - ((detectionDistance * 2) + 20))){
                //AND THEY FUCKING SAID YOU COULDN'T GET MOUSE POS OUTSIDE OF AN EVENT WITHOUT :HOVER TRICKS EAT MY FUCKING ASS
                topInput = Math.round(target.offsetTop - Number(target.dataset['dragoffset']) - (this.queueLayoutController.getBoundingClientRect().top + this.queueControlOffset.offsetHeight));
                bottomInput = this.queueLayoutController.offsetHeight - (topInput + this.queueControlOffset.offsetHeight);
            }

            //If the top of the entry is within five pixels of the top of the parent and we have room to scroll up
            if(topInput < detectionDistance && this.queueLayoutController.scrollTop > 0){
                //Unlock auto scroll
                this.unlockScroll();

                //Filter out less than 0 from relative entry top to calculate speed
                const speed = Math.round(((detectionDistance) - (topInput < 0 ? 0 : topInput)) / speedDevider);

                //Scroll queue by distance to top
                this.queueLayoutController.scrollBy(0, -speed);

                //Add scroll amount to drag offset to keep entry aligned with mouse
                target.dataset['dragoffset'] = Number(target.dataset['dragoffset']) - speed
                //Move entry by speed to match new drag offset
                target.style.top = `${target.offsetTop - speed}px`
            //Otherwise if the bottom of the entry is within five pixels the bottom of the parent and we have room to scroll down
            }else if(bottomInput < (detectionDistance) && this.queueLayoutController.scrollTop < this.queueLayoutController.scrollTopMax){
                //Unlock auto scroll
                this.unlockScroll();

                //Calculate speed by distance to bottom
                const offsetBottom = bottomInput;
                //Filter out less than 0, reverse the range, and apply scroll dampen to avoid scrolling off the edge
                const speed = Math.round((detectionDistance - (offsetBottom < 0 ? 0 : offsetBottom)) / speedDevider)

                //Scroll queue by calculated speed
                this.queueLayoutController.scrollBy(0, speed);

                //Subtract speed from drag offset to keep aligned with mouse
                target.dataset['dragoffset'] = Number(target.dataset['dragoffset']) + speed;
                //Move entry by speed to match new drag offset
                target.style.top = `${target.offsetTop + speed}px`
            }
        }

        function dragEntry(event, target, timetip){
                //Gross but works :P
                if(!target.isConnected || target.dataset['drag'] != "true"){
                    return;
                }

                //Get current start time
                const start = this.dateByOffset(target.offsetTop);
                const end = new Date(start.getTime() + (target.dataset['duration'] * 1000));

                //Position timetip
                timetip.moveToMouse(event);

                //Normally wouldn't do innerHTML but these values are calculated serverside and it saves us making a <br> dom node
                let timetipContents = [
                    `Start Time: ${utils.ux.timeStringFromDate(start, true)}`,
                    `End Time: ${utils.ux.timeStringFromDate(end, true)}`
                ];

                //If the current time is after the start date, but before the end (we're scheduling to start now)
                if(start.getTime() < date.getTime() && end.getTime() > date.getTime()){
                    //Add start timestamp to item
                    timetipContents.push(`Start Timestamp: ${utils.ux.humieFriendlyDuration((date.getTime() - start.getTime()) / 1000, true)}`);
                }

                //Inject timetip label
                timetip.tooltip.innerHTML = timetipContents.join('<br>')

                //Calculate offset from rest of window
                const windowOffset = this.queueContainer.offsetTop + this.ownerDoc.defaultView.scrollY;

                //Move the entry to the mouse offset by the target nodes height and the queue layouts scroll
                const entryTop = event.clientY + Number(target.dataset['dragoffset']) - windowOffset;
                
                //Set target vertical position
                target.style.top = `${entryTop}px`;
        }

        function dropEntry(event, target){
            //Gross but works :P
            if(!target.isConnected || target.dataset['drag'] != "true"){
                return;
            }

            //Asynchronously send move command item by calculated time to server
            this.client.socket.emit('move', {uuid: target.dataset['uuid'], start: this.dateByOffset(target.offsetTop).getTime()});

            //allow selection on body
            this.ownerDoc.body.style.userSelect = 'none';

            //kill timetips
            this.killTimetips();

            //Finish dragging
            target.dataset['drag'] = false;
        }

    }

    /**
     * Kills off hung tooltips
     * @param {Event} event - Event passed down from Event Listener
     */
    killTimetips(event){
        //If we have an event and it's holding any mouse buttons
        if(event != null && event.buttons != 0){
            //Fuck off and die
            return;
        }

        //Find any existing timetips
        for(const timetip of this.ownerDoc.querySelectorAll('.media-timetip')){
            //nukem
            timetip.remove();
        }
    }

    /**
     * Render call called at 1-second intervals, handles time and livestream markers
     * @param {Date} date - Date representing current time, defaults to new date object
     */
    renderInterval(date = new Date()){
        this.renderTimeMarker(date);
        this.renderLiveStream(date, true);


        //Clear update timer
        clearTimeout(this.renderIntervalTimer);

        //Set timer to update marker every second
        this.renderIntervalTimer = setTimeout(this.renderInterval.bind(this), 1000);
    }

    /**
     * Renders current time marker on to the schedule
     * @param {Date} date - Date representing current time, defaults to new date object
     * @param {Boolean} forceScroll - Whether or not to scroll the schedule on increment
     */
    renderTimeMarker(date = new Date(), forceScroll = false){
        //Calculate marker position by date
        const markerPosition = Math.round(this.offsetByDate(date));

        //If markers are null
        if(markerPosition == null){
            //Try again in a second since the user probably just popped the panel or something :P
            return;
        }

        //If we're not looking at today
        if(!utils.isSameDate(this.day, new Date())){
            //If we still have at time marker
            if(this.timeMarker != null){
                this.timeMarker.remove();
                this.timeMarker = null
            }
        
            //Stop here
            return;
        }

        //if we need to make the time marker
        if(this.timeMarker == null){
            //Create the time marker
            this.timeMarker = document.createElement('span');
            //Add time marker class
            this.timeMarker.id = 'time-marker';
            //Append time marker
            this.queue.appendChild(this.timeMarker);
        } 

        //Set time marker position
        this.timeMarker.style.top = `${markerPosition}px`;

        //If the panel document isn't null (we're not actively switching panels)
        if(this.panelDocument != null && (this.autoscroll || forceScroll)){
            //Get height difference between window and queue layout controller
            const docDifference = this.ownerDoc.defaultView.innerHeight - this.queueLayoutController.getBoundingClientRect().height;
            //Calculate scroll target by body difference and marker position
            const scrollTarget = (markerPosition - (this.queueLayoutController.getBoundingClientRect().height - docDifference) / 2) + docDifference;
            //Calculate scroll behavior by distance
            const scrollBehavior = Math.abs(scrollTarget - this.queueLayoutController.scrollTop) > 10 ? "smooth" : "instant";
        

            //Scroll to the marker
            this.queueLayoutController.scroll({
                left: 0, 
                top: scrollTarget,
                behavior: scrollBehavior
            });
        }
    }

    /**
     * Renders queue scale markers
     * @param {Date} inputDate - Date representing current time, defaults to new date object
     */
    renderQueueScale(inputDate = new Date()){
        //Clear out queue marker container
        this.queueMarkerContainer.innerHTML = '';       

        //Make sure we don't modify the date we're handed
        const date = structuredClone(inputDate);

        //Zero out time to midnight on the morning of the input date
        date.setHours(0,0,0,0);

        //Store epoch of current date at midnight for later user
        const dateEpoch = date.getTime();

        //Create array to hold entries for post processing
        const entries = [];

        //while we've counted less than the amount of time in the day, count up by scale
        for(let time = 0; time <= 86400; time += this.scale){
            //Get index of current chunk by dividing time by scale
            const index = time / this.scale;

            //Set time by scale, we could do this against this.scale and date.getTime(), but this seemed cleaner :P
            date.setTime(dateEpoch + (time * 1000))

            //Create marker span
            const markerDiv = document.createElement('div');
            markerDiv.classList.add('queue-marker');

            //Create marker line (unfortunately <hr> tags don't seem to play nice with parents who have display:flex)
            const marker = document.createElement('span');
            marker.classList.add('queue-marker');

            //If it's even/zero
            if(index % 2 == 0){
                //Create marker label
                const markerLabel = document.createElement('p');

                //If scale is over a minute then we don't need to display seconds
                markerLabel.textContent = utils.ux.timeStringFromDate(date, this.scale < 60) 

                //Add marker label to marker span    
                markerDiv.appendChild(markerLabel);
            }

            //Append marker to marker span
            markerDiv.appendChild(marker);

            //Append marker span to queue container
            this.queueMarkerContainer.appendChild(markerDiv);
            //Add it to our postprocessing list
            entries.push(markerDiv);
        }

        //If we made anything (should always be true :P)
        if(entries.length > 0){
            //Set the margin for the first queue marker
            entries[0].classList.add('queue-marker-first');

            //Set the margin for the last queue marker
            entries[entries.length - 1].classList.add('queue-marker-last');
        }
    }

    /**
     * Renders live-stream marker
     * @param {Date} inputDate - Date representing current time, defaults to new date object
     * @param {Boolean} intervalRun - Whether or not this was run by renderInterval, defaults to false
     */
    renderLiveStream(date = new Date(), intervalRun = false){
        //Grab all live queue entries
        const staleEntry = this.queueContainer.querySelector('.queue-entry.live');

        //If we're not livestreaming
        if(client.player.mediaHandler.type != "livehls"){
            //If we have a stale entry
            if(staleEntry != null){
                //Remove stale entry since we're no longer streaming
                staleEntry.remove();
            }

            //Fuck off and die
            return;
        }

        //If we haven't updated the Go-Live button yet
        //This kinda needs to be done here since this might be opened mid-stream :P
        if(this.goLiveButton.title != "Stop Stream"){
            this.goLiveButton.classList.replace('danger-button', 'critical-danger-button');
            this.goLiveButton.title = "Stop Stream";
        }
        

        //If this was called by the timer function, and not some other queue-rendering related function
        if(intervalRun){
            //Though there is reason to run an if statement here since we dont want the latter over-writing the former every run...
            //If we're showing the regular icon
            if(this.goLiveButton.classList.contains('bi-record2')){
                //Animated it with the other live icon
                this.goLiveButton.classList.replace('bi-record2', 'bi-record');
            //otherwise
            }else{
                //Show the standard one we always do
                this.goLiveButton.classList.replace('bi-record', 'bi-record2');
            }
        }

        //Grab currently playing media
        const nowPlaying = client.player.mediaHandler.nowPlaying;

        //If we don't have a good stale entry to re-use
        if(staleEntry == null || staleEntry.dataset.uuid != nowPlaying.uuid){
            //If it wasn't null but just old
            if(staleEntry != null){
                //Nukem
                staleEntry.remove();
            }

            //Create entry div
            const entryDiv = document.createElement('div');
            entryDiv.classList.add('queue-entry', 'live');

            //Iterate through nowPlaying's properties
            for(let key of Object.keys(nowPlaying)){
                //Add them to the entry div's dataset
                entryDiv.dataset[key] = nowPlaying[key];
            }

            //Convert start epoch to JS date object
            const started = new Date(nowPlaying.startTime);

            //If the date the scheduler is set to isn't within the livestream
            if(!utils.isSameDate(started, this.day) && !utils.dateWithinRange(started, new Date(), this.day)){
                return;
            }

            //If this started today
            if(utils.isSameDate(this.day, started)){
                //Set entryDiv top-border location based on start time
                entryDiv.style.top = `${this.offsetByDate(started)}px`
            }else{
                //Get dawn
                const dawn = new Date();
                dawn.setHours(0,0,0,0)

                //Place item at the beginning of dawn
                entryDiv.style.top = `${this.offsetByDate(dawn)}px`;

                //Apply rest of the styling rules for items that started yestarday
                entryDiv.classList.add('started-yesterday');
            }

            //Create entry title
            const entryTitle = document.createElement('p');
            entryTitle.textContent = utils.unescapeEntities(nowPlaying.title);


            //If we're looking at today
            if(utils.isSameDate(this.day, new Date())){
                //Set entry div bottom-border location based on current time, round to match time marker
                entryDiv.style.bottom = `${Math.round(this.offsetByDate(date, true))}px`;
            }else{
                //Get midnight
                const dusk = new Date();
                dusk.setHours(23,59,59,999);

                //Set stream to continue to run into the next morning
                entryDiv.style.bottom = `${Math.round(this.offsetByDate(dusk, true))}px`;

                //Apply rest of the styling rules for items that end after today
                entryDiv.classList.add('ends-tomorrow');
            }

            //Assembly entryDiv
            entryDiv.appendChild(entryTitle);

            //Setup media tooltip
            entryDiv.addEventListener('mouseenter',(event)=>{
                //Construct tooltip on mouseover to re-calculate duration for live media
                const tooltipDiv = buildTooltip();

                //Display tooltip
                utils.ux.displayTooltip(event, tooltipDiv, false, null, true, this.ownerDoc);
            });

            const menuMap = new Map([
                ["Stop", ()=>{this.client.socket.emit('stop');}],
                ["Delete", ()=>{this.client.socket.emit('delete', {uuid: nowPlaying.uuid});}],
                ["Open in New Tab", ()=>{window.open(nowPlaying.url, '_blank').focus();}],
                ["Copy URL", ()=>{navigator.clipboard.writeText(nowPlaying.url);}],

            ]);

            //Setup context menu
            entryDiv.addEventListener('contextmenu', (event)=>{
                //Display context menu
                utils.ux.displayContextMenu(event, '', menuMap, this.ownerDoc);
            });

            //Append entry div to queue container
            this.queueContainer.appendChild(entryDiv);
        }else{
            //If we're looking at today
            if(utils.isSameDate(this.day, new Date())){
                //Update existing entry, round offset to match time marker
                staleEntry.style.bottom = `${Math.round(this.offsetByDate(date, true))}px`
            }
        }

        //Keep tooltip date seperate so it re-calculates live duration properly
        function buildTooltip(date = new Date()){
            //Tooltip generation
            //tooltip div
            const tooltipDiv = document.createElement('div');
            tooltipDiv.classList.add('media-tooltip');

            //tooltip components
            const tooltipStrings = [
                `Title: ${nowPlaying.title}`,
                `File Name: ${nowPlaying.fileName}`,
                `Source: HLS Livestream (${nowPlaying.url})`,
                `Duration: ${utils.ux.humieFriendlyDuration((date.getTime() - nowPlaying.startTime) / 1000)}`,
                `Start Time: ${new Date(nowPlaying.startTime).toLocaleString()}`,
            ];

            //For each string in the tooltip
            for(const string of tooltipStrings){

                //Create a 'p' node
                const component = document.createElement('p');
                //Fill it with the string
                component.textContent = utils.unescapeEntities(string);

                //Append it to the tooltip div
                tooltipDiv.append(component);
            }

            //Create End Date
            const source = document.createElement('p');
            const liveSpan = document.createElement('span');

            //Fill end date label
            source.textContent = "End Time: "
            liveSpan.textContent = 'LIVE'

            //Set class
            liveSpan.classList.add('critical-danger-text');

            //Assemble end date
            source.appendChild(liveSpan);
            tooltipDiv.appendChild(source);           

            return tooltipDiv;
        }
    }

    /**
     * Calculate schedule offset from top or bottom of div from date
     * @param {Date} date - Date to calculate from, defaults to now
     * @param {Boolean} bottomOffset - Whether or not offset should be calculated from top or bottom
     * @returns {Number} Offset from top/bottom of div in PX relative to time markers, calculated from given date
     */
    offsetByDate(date = new Date(), bottomOffset = false){
        //Pull start of day epoch from given date, make sure to use a new date object so we don't fuck up any date objects passed to us
        const dayEpoch = new Date(date).setHours(0,0,0,0);
        //Get difference between now and day epoch to get time since the start of the current day in milliseconds
        const curTime = date.getTime() - dayEpoch;

        //Calculate the offset from todays milliseconds
        return this.offsetByMilliseconds(curTime, bottomOffset);
    }

    /**
     * Calculates date by offset pixels relative to schedule div top
     * @param {Number} input - Pixels date is away from schedule div top
     * @returns {Date} Date object representing date which was calculated from given pixel offset
     */
    dateByOffset(input = 0){
        //Get markers
        const markers = this.panelDocument.querySelectorAll('span.queue-marker');
        //get range of position from top to bottom marker
        const range = [markers[0].offsetTop, markers[markers.length - 1].offsetTop]
        //get max offset relative to markers
        const offsetMax = range[1] - range[0];

        //input offset + relative difference between top marker and parent devided by offset max
        //save as 'float' between 0 and 1
        const relativeInput = ((input - range[0]) / offsetMax);
        
        //Get the currently viewed day
        const date = new Date(this.day);

        //Convert our 'float' from 0-1 to a time between 0-24
        date.setHours(0,0,0,relativeInput * 86400000);

        //return our date
        return date;
    }

    /**
     * Calculate schedule offset from top or bottom of div from JS Epoch (millis)
     * @param {Number} input - JS Epoch (millis) to calculate from, defaults to 0
     * @param {Boolean} bottomOffset - Whether or not offset should be calculated from top or bottom
     * @returns {Number} Offset from top/bottom of div in PX relative to time markers, calculated from given date
     */
    offsetByMilliseconds(input = 0, bottomOffset = false){
        //Convert amount of milliseconds to a float, 0 representing the start of the day and 1 representing the end.
        //Make sure to reverse it if bottomOffset is set to true
        const timeFloat = bottomOffset ? 1 - (input / 86400000) : input / 86400000;

        //Get queue markers
        const markers = this.panelDocument.querySelectorAll('span.queue-marker');

        //If the marker is null for some reason
        if(markers[0] == null){

            return null;
        }

        //Get marker position range
        const range = [markers[0].offsetTop, markers[markers.length - 1].offsetTop]
        //Get maximum position relative to the range itself
        const offsetMax = range[1] - range[0];
        //return position relative to parent
        return (offsetMax * timeFloat) + range[0];
    }

    /**
     * Returns media end time
     * @param {Object} media - media object to get end time from
     * @returns {Number} Media end time as JS Epoch (millis)
     */
    getMediaEnd(media){
        //If we have an early end
        if(media.earlyEnd != null){
            return media.startTime + (media.earlyEnd * 1000);
        //Otherwise
        }else{
            return media.startTime + ((media.duration - media.startTimeStamp) * 1000);
        }
    }
}

/**
 * Class representing pop-up dialogue to schedule a piece of media
 */
class schedulePopup{
    /**
     * Instantiates a new schedule media Pop-up
     * @param {Event} event - Event passed down from Event Listener
     * @param {channel} client - Parent Client Management Object
     * @param {String} url - URL/link to media to queue
     * @param {String} title - Title of media to queue
     * @param {Function} cb - Callback function, passed upon pop-up creation
     * @param {Document} doc - Current owner documnet of the panel, so we know where to drop our pop-up
     */
    constructor(event, client, url, title, cb, doc){
        /**
         * Parent Client Management Object
         */
        this.client = client;
        
        /**
         * URL/Link to media to queue
         */
        this.url = url;
        
        /**
         * Title of media to queue
         */
        this.title = title;
        
        /**
         * Callback function, passed upon pop-up creation
         */
        this.cb = cb;

        //Create media popup and call async constructor when done
        //unfortunately we cant call constructors asyncronously, and we cant call back to this from super, so we can't extend this as it stands :(
        /**
         * canopyUXUtils.popup() object
         */
        this.popup = new canopyUXUtils.popup('/scheduleMedia', true, this.asyncConstructor.bind(this), doc);
    }

    /**
     * Continuation of object construction, called after child popup object construction
     */
    asyncConstructor(){
        //Grab required UI elements
        this.scheduleButton = this.popup.contentDiv.querySelector('#schedule-media-popup-schedule-button');
        this.datePrompt = this.popup.contentDiv.querySelector('#schedule-media-popup-time-prompt');

        //getCurrentDate
        const curDate = new Date();
        //Zero out time to the nearest minute
        curDate.setSeconds(0,0);
        //Set the date prompt to the next minute, adjusted to display local time
        this.datePrompt.valueAsDate = utils.ux.localizeDate(curDate);

        //Setup input
        this.setupInput();

        //If we have a function
        if(typeof cb == "function"){
            //Call any callbacks we where given
            this.cb();
        }
    }

    /**
     * Defines input-related Event Handlers
     */
    setupInput(){
        //Setup input
        this.scheduleButton.addEventListener('click', this.schedule.bind(this));
        this.popup.popupDiv.addEventListener('keydown', this.schedule.bind(this));
    }

    /**
     * Handles sending request to schedule item to the queue
     * @param {Event} event - Event passed down from Event Listener
     */
    schedule(event){
        //If we clicked or hit enter
        if(event.key == null || event.key == "Enter"){
            //Get localized input date
            const inputDate = utils.ux.normalizeDate(this.datePrompt.valueAsDate);

            //Tell the server to move the media
            this.client.socket.emit("queue",{url: this.url, title: this.title, start: inputDate.getTime()});

            //Close the popup
            this.popup.closePopup();
        }
    }
}

/**
 * Class representing pop-up dialogue for reschedule queue media
 * @extends schedulePopup
 */
class reschedulePopup extends schedulePopup{
    /**
     * Instantiates a new schedule media Pop-up
     * @param {Event} event - Event passed down from Event Listener
     * @param {channel} client - Parent Client Management Object
     * @param {Object} media - Media object to re-schedule
     * @param {Function} cb - Callback function, passed upon pop-up creation
     * @param {Document} doc - Current owner documnet of the panel, so we know where to drop our pop-up
     */
    constructor(event, client, media, cb, doc){
        //Call derived constructor
        super(event, client, null, null, cb, doc);

        /**
         * Media Object to Re-Schedule
         */
        this.media = media;
    }

    schedule(event){
        //If we clicked or hit enter
        if(event.key == null || event.key == "Enter"){
            //Get localized input date
            const inputDate = utils.ux.normalizeDate(this.datePrompt.valueAsDate);

            //Tell the server to move the media
            this.client.socket.emit('move', {uuid: this.media.uuid, start: inputDate.getTime()});

            //Close the popup
            this.popup.closePopup();
        }
    }
}

/**
 * Class represneting pop-up dialogue for clearing queue between a range of two dates
 */
class clearPopup{
    /**
     * Instantiates a new queue Clear Popup
     * @param {Event} event - Event passed down from Event Listener
     * @param {channel} client - Parent Client Management Object
     * @param {Function} cb - Callback function, passed upon pop-up creation
     * @param {Document} doc - Current owner documnet of the panel, so we know where to drop our pop-up
     */
    constructor(event, client, cb, doc){
        /**
         * Parent Client Management Object
         */
        this.client = client;

        /**
         * Callback function, passed upon pop-up creation
         */
        this.cb = cb;

        //Create media popup and call async constructor when done
        //unfortunately we cant call constructors asyncronously, and we cant call back to this from super, so we can't extend this as it stands :(
        /**
         * canopyUXUtils.popup() object
         */
        this.popup = new canopyUXUtils.popup('/clearMedia', true, this.asyncConstructor.bind(this), doc);
    }

    /**
     * Continuation of object construction, called after child popup object construction
     */
    asyncConstructor(){
        //Grab required UI elements
        this.clearButton = this.popup.contentDiv.querySelector('#clear-media-popup-clear-button');
        this.startDatePrompt = this.popup.contentDiv.querySelector('#clear-media-popup-start-time-prompt');
        this.endDatePrompt = this.popup.contentDiv.querySelector('#clear-media-popup-end-time-prompt');

        //getCurrentDate
        const curDate = new Date();
        //Zero out current time to the nearest minute
        curDate.setSeconds(0,0);
        //Set the start date prompt to the next minute, adjusted to display local time
        this.startDatePrompt.valueAsDate = utils.ux.localizeDate(curDate);
        //Add 30 minutes
        curDate.setMinutes(curDate.getMinutes() + 30);
        //Set the end date prompt to 30 minutes in the futre, adjusted to display local time
        this.endDatePrompt.valueAsDate = utils.ux.localizeDate(curDate);

        //Setup input
        this.setupInput();

        //If we have a function
        if(typeof cb == "function"){
            //Call any callbacks we where given
            this.cb();
        }
    }

    /**
     * Defines input-related Event Handlers
     */
    setupInput(){
        //Setup input
        this.clearButton.addEventListener('click', this.clear.bind(this));
        this.popup.popupDiv.addEventListener('keydown', this.clear.bind(this));
    }

    /**
     * Handles sending request to clear playlist between two dates to the server
     * @param {Event} event - Event passed down from Event Listener
     */
    clear(event){
        //If we clicked or hit enter
        if(event.key == null || event.key == "Enter"){
            //Get localized input date
            const inputStartDate = utils.ux.normalizeDate(this.startDatePrompt.valueAsDate);
            const inputEndDate = utils.ux.normalizeDate(this.endDatePrompt.valueAsDate);

            //Tell the server to clear media between the input range
            this.client.socket.emit("clear",{start: inputStartDate.getTime(), end: inputEndDate.getTime()});

            //Close the popup
            this.popup.closePopup();
        }
    }
}