var List = {
    empty: false,
    page: 0,
    can_fit: document.querySelectorAll("#wrapper").length > 0 ? Math.round(Helper.computedStyle("#wrapper", "height") / 71) : 0,
    element_height: document.querySelectorAll("#wrapper").length > 0 ? (Helper.computedStyle("#wrapper", "height") / Math.round(Helper.computedStyle("#wrapper", "height") / 71)) - 25 : 0,
    uris: [],
    not_found: [],
    num_songs: 0,
    found: [],
    channel_function: function(msg) {
        if(Helper.mobilecheck()) socket_connected = true;
        if(user_auth_started) {
            user_auth_started = false;
            M.Modal.getInstance(document.getElementById("user_password")).close();
        }
        switch(msg.type)
        {
            case "list":
                //if(full_playlist == undefined || !offline){
                if((!offline || (offline && !msg.shuffled)) && !(offline && prev_chan_list == chan)){
                    prev_chan_list = chan;
                    List.populate_list(msg.playlist);
                    if(full_playlist.length > 0) {
                        Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
                    }
                } else if(offline && prev_chan_list == chan && full_playlist != undefined && !msg.shuffled){
                    List.populate_list(full_playlist, true);
                    if(full_playlist.length > 0) {
                        Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
                    }
                }
                break;
            case "added":
                List.added_song(msg.value);
                if(full_playlist.length > 0) {
                    Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
                }
                found_array = [];
                found_array_index = 0;
                break;
            case "deleted":
                List.deleted_song(msg.value, msg.removed);
                found_array = [];
                found_array_index = 0;
                break;
            case "vote":
                if(!offline){
                    List.voted_song(msg.value, msg.time);
                    if(full_playlist.length > 0) {
                        Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
                    }
                }
                found_array = [];
                found_array_index = 0;
                break;
            case "song_change":
                if((offline && msg.offline_change) || !offline) {
                    if(window.location.pathname != "/") List.song_change(msg.time, msg.remove);
                    if(full_playlist.length > 0) {
                        Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
                    }
                    found_array = [];
                    found_array_index = 0;
                }
                break;
            case "changed_values":
                List.changedValues(msg.value);
                break;
            case "song_change_prev":
                if((offline && msg.offline_change) || !offline) {
                    if(window.location.pathname != "/") List.song_change_prev(msg.time);
                    if(full_playlist.length > 0) {
                        Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
                    }
                    found_array = [];
                    found_array_index = 0;
                }
                break;
        }
    },
    changedValues: function(song) {
        if(song.type == "suggested") {
            try {
                document.getElementById("#suggested-" + song.id).querySelector(".vote-container").setAttribute("title", song.title);
                document.getElementById("#suggested-" + song.id).querySelector(".list-title").setAttribute("title", song.title);
                document.getElementById("#suggested-" + song.id).querySelector(".list-title").innerText =  song.title;
                var _temp_duration = Helper.secondsToOther(song.duration);
                document.getElementById("#suggested-" + song.id).querySelector(".card-duration").innerText =  Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]);
                document.getElementById("#suggested-" + song.id).querySelector(".list-image").setAttribute("style", "background-image:url('//img.youtube.com/vi/"+song.new_id+"/mqdefault.jpg');");
                document.getElementById("#suggested-" + song.id).setAttribute("id", song.new_id);
            } catch(e) {}
            return;
        }
        var i = List.getIndexOfSong(song.id);
        if(i >= 0 && window.location.pathname != "/") {
            full_playlist[i].title = song.title;
            full_playlist[i].duration = song.duration;
            full_playlist[i].start = song.start;
            full_playlist[i].end = song.end;
            full_playlist[i].id = song.new_id;
            try {
                document.getElementById("#" + song.id).querySelector(".vote-container").setAttribute("title", song.title);
                document.getElementById("#" + song.id).querySelector(".list-title").setAttribute("title", song.title);
                document.getElementById("#" + song.id).querySelector(".list-title").innerText = song.title;
                var _temp_duration = Helper.secondsToOther(song.duration);
                document.getElementById("#" + song.id).querySelector(".card-duration").innerText = Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]);
                document.getElementById("#" + song.id).querySelector(".list-image").setAttribute("style", "background-image:url('//img.youtube.com/vi/"+song.new_id+"/mqdefault.jpg');");
                document.getElementById("#" + song.id).setAttribute("id", song.new_id);
            } catch(e) {}
        }
    },
    insertAtBeginning: function(song_info, transition) {
        if(document.querySelector("#wrapper") == null) return;
        var display = List.page == 0 ? "" : "none";
        var add = List.generateSong(song_info, transition, false, true, false, display, false);
        document.querySelector("#wrapper").insertAdjacentHTML("beforeend", add);
    },
    insertAtIndex: function(song_info, transition, change) {
        if(document.querySelector("#wrapper") == null) return;
        var i = List.getIndexOfSong(song_info.id);
        if(i == -1) return;
        if(!song_info.now_playing){
            var display = "none";
            if(i >= List.page && i < List.page + (List.can_fit)) display = "inline-flex"
            var add = List.generateSong(song_info, transition, false, true, false, display, false);
            if(i === 0) {
                document.querySelector("#wrapper").insertAdjacentHTML("afterbegin", add);
            } else {
                document.querySelector("#wrapper > div:nth-child(" + (i) + ")").insertAdjacentHTML("afterend", add);
            }
            var added = document.querySelector("#wrapper").children[i];
            Helper.css(added, "display", display);
            if(display == "inline-flex" && document.querySelector("#wrapper").children.length >= List.page + List.can_fit + 1){
                Helper.css(document.querySelector("#wrapper").children[List.page + List.can_fit], "display", "none");
            } else if(i < List.page && document.querySelector("#wrapper").children.length - (List.page + 1) >= 0){
                Helper.css(document.querySelector("#wrapper").children[List.page], "display", "inline-flex");
            } else if(document.querySelector("#wrapper").children.length > List.page + List.can_fit){
                Helper.css(document.querySelector("#wrapper").children[List.page + List.can_fit - 1], "display", "inline-flex");
            }
            if(change && List.page > 0){
                Helper.css(document.querySelector("#wrapper").children[List.page - 1], "display", "none");
            }
            if(transition){
                setTimeout(function(){
                    Helper.css(added, "transform", "translateX(0%)");
                    setTimeout(function() {
                        Helper.removeClass(added, "side_away");
                    }, 300);
                },5);
            }
        }
    },
    calculate_song_heights: function(){
        if(!Helper.mobilecheck() && !embed && !client){
            List.can_fit = Math.round(Helper.computedStyle("#wrapper", "height") / 71);
            List.element_height = (Helper.computedStyle("#wrapper", "height") / List.can_fit)-5.3;
        } else if(embed) {
            List.can_fit = Math.round(Helper.computedStyle("#wrapper", "height") / 91) + 1;
            List.element_height = (Helper.computedStyle("#wrapper", "height") / List.can_fit)-4;
        } else if(!client){
            List.can_fit = Math.round((Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / 71)+1;
            List.element_height = ((window.innerHeight - Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / List.can_fit)-5;
        } else {
            List.can_fit = Math.round(Helper.computedStyle("#wrapper", "height") / 71)+1;
            List.element_height = (Helper.computedStyle("#wrapper", "height") / List.can_fit)-5.3;
        }
        if(List.element_height < 55.2 && !client && !embed){
            List.can_fit = List.can_fit - 1;
            List.element_height = 55.2;
            List.can_fit = Math.round((window.innerHeight - Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / 71);
            List.element_height = ((window.innerHeight - Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / List.can_fit)-5;
        } else if(List.element_height < 55.2 && embed) {
            //List.can_fit = List.can_fit - 1;
            List.can_fit = Math.round((window.innerHeight - Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / 71);
            List.element_height = ((window.innerHeight - Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / List.can_fit)-5;
            List.can_fit = List.can_fit - 2;
        }
    },
    populate_list: function(msg, no_reset) {
        if(document.querySelector("#wrapper") == null) return;
        // This math is fucked and I don't know how it works. Should be fixed sometime
        if(list_html === undefined) list_html = Helper.html("#list-song-html");
        full_playlist = msg;
        if(offline && !no_reset){
            for(var x = 0; x < full_playlist.length; x++){
                full_playlist[x].votes = 0;
            }
        }
        List.sortList();
        Helper.setHtml("#wrapper", "");
        Helper.log([
            "FULL PLAYLIST",
            full_playlist
        ]);
        if(full_playlist.length > 1){
            for(var j = 0; j < full_playlist.length; j++) {
                var _current_song = full_playlist[j];
                if(!_current_song.hasOwnProperty("start")) full_playlist[j].start = 0;
                if(!_current_song.hasOwnProperty("end")) full_playlist[j].end = full_playlist[j].duration;
                if(!_current_song.now_playing && _current_song.type != "suggested"){ //check that the song isnt playing
                    var generated = List.generateSong(_current_song, false, lazy_load, true, false, "inline-flex", true)
                    document.querySelector("#wrapper").insertAdjacentHTML("beforeend", generated);
                }
            }
            if(document.querySelector("#wrapper").children.length > List.can_fit && !document.querySelectorAll("#pageButtons").length){
                Helper.css(".prev_page", "display", "none");
                Helper.css(".first_page", "display", "none");
                Helper.css(".next_page_hide", "display","none");
                Helper.css(".last_page_hide", "display","none");
            } else if(!document.querySelectorAll("#pageButtons").length){
                Helper.css(".prev_page", "display", "none");
                Helper.css(".next_page", "display", "none");
                Helper.css(".last_page", "display", "none");
                Helper.css(".first_page", "display", "none");
                Helper.css(".next_page_hide", "display","inline-flex");
                Helper.css(".prev_page_hide", "display","inline-flex");
            } else {
                Helper.css(".next_page", "display", "none");
                Helper.css(".last_page", "display", "none");
            }
            List.dynamicContentPage(-10);
        } else {
            List.empty = true;
            Helper.setHtml("#wrapper", "The playlist is empty.");
            Helper.css(".prev_page","display", "none");
            Helper.css(".next_page","display", "none");
            Helper.css(".last_page","display", "none");
            Helper.css(".last_page_hide","display", "inline-flex");
            Helper.css(".first_page","display", "none");
            Helper.css(".next_page_hide", "display","inline-flex");
            Helper.css(".prev_page_hide","display","inline-flex");
        }
        Helper.css("#settings","visibility", "visible");
        Helper.css("#settings","opacity", "1");
        Helper.css("#wrapper","opacity", "1");
        Helper.removeClass("#pageButtons", "hide");
        if(!embed) {
            Helper.log(["Starting empty-checker"]);
            clearTimeout(timed_remove_check);
            timed_remove_check = setTimeout(function() {
                if(full_playlist.length > 0) {
                    List.check_error_videos(0);
                }
            }, 1500);
        }
    },
    check_error_videos: function(i) {
        //Helper.log("Empty-checker at " + i);
        if(full_playlist.length == 0) return;
        else if(full_playlist[i].source == "soundcloud" && full_playlist.length > i + 1 && window.location.pathname != "/") List.check_error_videos(i + 1);
        else {
            Helper.ajax({
                method: "get",
                url: 'https://www.googleapis.com/youtube/v3/videos?id=' + full_playlist[i].id
                       + "&key=" + api_key.youtube + "&part=snippet",
                success:  function (data) {
                    data = JSON.parse(data);
                      //Helper.log("Empty-checker items " + data.items.length);
                    if (data.items.length == 0) {
                        Helper.log(["Emtpy-checker error at " + full_playlist[i].id + " " + full_playlist[i].title]);
                        socket.emit("error_video", {channel: chan.toLowerCase(), id: full_playlist[i].id, title: full_playlist[i].title, source: full_playlist[i].source});
                    }
                    if(full_playlist.length > i + 1 && window.location.pathname != "/") {
                        List.check_error_videos(i + 1);
                    }
                }
            });
        }
    },
    dynamicContentPageJumpTo: function(page) {
        if(document.querySelector("#wrapper") == null) return
        page = page * List.can_fit;
        var wrapperChildren = [].slice.call(document.querySelector("#wrapper").children);
        if(page > List.page || page < List.page){
            Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "none");
            List.page = page;
            Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "inline-flex");
            if(List.page > 0 && document.querySelector(".prev_page").style.display == "none"){
                Helper.css(".prev_page", "display", "inline-flex");
                Helper.css(".prev_page_hide", "display", "none");
                Helper.css(".first_page", "display", "inline-flex");
                Helper.css(".first_page_hide", "display", "none");
            }
            if(List.page + List.can_fit >= wrapperChildren.length){
                Helper.css(".next_page_hide", "display", "inline-flex");
                Helper.css(".next_page", "display", "none");
                Helper.css(".last_page_hide", "display", "inline-flex");
                Helper.css(".last_page", "display", "none");
            }
            Helper.setHtml("#pageNumber", (List.page / List.can_fit) + 1);
        }
    },
    dynamicContentPage: function(way) {
        if(document.querySelector("#wrapper") == null) return
        var wrapperChildren = [].slice.call(document.querySelector("#wrapper").children);
        if(way == 1 || way == 10) {
            Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "none");
            if(way == 1){
                List.page = List.page + List.can_fit;
            } else if(way == 10) {
                List.page = (Math.floor((document.querySelector("#wrapper").children.length - 1)/ List.can_fit) * List.can_fit);
            }
            Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "inline-flex");
            if(List.page > 0 && document.querySelector(".prev_page").style.display  == "none"){
                Helper.css(".prev_page", "display", "inline-flex");
                Helper.css(".prev_page_hide", "display", "none");
                Helper.css(".first_page", "display", "inline-flex");
                Helper.css(".first_page_hide", "display", "none");
            }
            if(List.page + List.can_fit >= document.querySelector("#wrapper").children.length){
                Helper.css(".next_page_hide", "display", "inline-flex");
                Helper.css(".next_page", "display", "none");
                Helper.css(".last_page_hide", "display", "inline-flex");
                Helper.css(".last_page", "display", "none");
            }
        } else {
            if(way==-10) {
                Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "none");
                List.page = 0;
                Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "inline-flex");
            } else {
                Helper.css(wrapperChildren.slice(List.page - List.can_fit, List.page), "display", "inline-flex");
                Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "none");
                List.page = List.page - List.can_fit < 0 ? 0 : List.page - List.can_fit;
            }
            if(List.page == 0 && document.querySelector(".prev_page").style.display  != "none"){
                Helper.css(".prev_page", "display", "none");
                Helper.css(".prev_page_hide", "display", "inline-flex");
                Helper.css(".first_page", "display", "none");
                Helper.css(".first_page_hide", "display", "inline-flex");
            } else if(document.querySelector(".prev_page").style.display == "none"){
                Helper.css(".prev_page_hide", "display", "inline-flex");
                Helper.css(".first_page_hide", "display", "inline-flex");
            } else {
                Helper.css(".prev_page_hide", "display", "none");
                Helper.css(".first_page_hide", "display", "none");
            }
            if(List.page + List.can_fit < document.querySelector("#wrapper").children.length){
                Helper.css(".next_page_hide", "display", "none");
                Helper.css(".next_page", "display", "inline-flex");
                Helper.css(".last_page_hide", "display", "none");
                Helper.css(".last_page", "display", "inline-flex");
            }
        }
        document.querySelector("#pageNumber").innerText = (List.page / List.can_fit) + 1;
    },
    added_song: function(added) {
        var now_playing;
        if(added != undefined){
            if(full_playlist.length !== 0){
                now_playing = full_playlist.pop();
            }
            full_playlist.push(added);
            List.sortList();
            if(now_playing){
                full_playlist.push(now_playing);
            }
            if(hostMode) {
                M.toast({html: "

New song added
" + added.title + "