// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % SWIPER

// local debugging: print the name of every executed funtion to the console
var debug_swiper_daniel = 0;

function insertSwiper(s) {
    if (debug_swiper_daniel) {
        console.log("%cfunction: insertSwiper", "color:white;background:lightblue");
    }

    // Create an empty swiper-instance and append the swiper-container to
    // 'grid-element' s.

    var container = document.createElement('div');
    container.classList.add("swiper", "swiper-container-main");
    elements[s].appendChild(container);

    var swiperwrapper = document.createElement('div');
    swiperwrapper.classList.add("swiper-wrapper", "swiper-wrapper-main");
    swiperwrapper.s = s;
    container.appendChild(swiperwrapper);

    var paginationWrapper = document.createElement('div');
    paginationWrapper.classList.add("swiper-pagination");
    container.appendChild(paginationWrapper);

    var buttonPrev = document.createElement("div");
    buttonPrev.classList.add("swiper-button-prev", "swiper-button-black");

    var buttonNext = document.createElement("div");
    buttonNext.classList.add("swiper-button-next", "swiper-button-black");

    var swiper = new Swiper(container, {
        direction : 'horizontal',
        pagination: {
            el: paginationWrapper,
            clickable: true,
        },
        watchOverflow: true,
        spaceBetween : 0,
        navigation:{
            prevEl: buttonPrev,
            nextEl: buttonNext
        },
        noSwiping: true, // this activates the noSwipingClass functionality
    });
    //console.log(swiper);

    // the graphics slide will disable swiping (use hide box instead)
    if (isTouchDevice) {
        function enableSwiping(allow) {
            swiper.params.noSwipingClass = allow ? null : "swiper-slide-main";
        }
    } else {
        function enableSwiping(allow) {
            buttonPrev.style.display = allow ? 'block' : 'none';
            buttonNext.style.display = allow ? 'block' : 'none';
        }
        swiper.params.noSwipingClass = "swiper-slide-main";
        container.appendChild(buttonPrev);
        container.appendChild(buttonNext);
    }
    swiper.enableSwiping = enableSwiping;
    return swiper;
}

function findSlide(s, type) {
    if (debug_swiper_daniel) {
        console.log("%cfunction: findSlide" , "color:white;background:lightblue");
        console.log (s, type);
    }

    var i;
    for (i = 0; i < swiper[s].slides.length; i++) {
        if (swiper[s].slides[i].slideType === type) {
            if (debug_swiper_daniel) {
                console.log ('found slide ',i);
            }
            return i;
        }
    }
    if (debug_swiper_daniel) {
        console.log ('found no slide ');
    }
    return null;
}

function replaceSlideContent(slide, title, content) {
    if (debug_swiper_daniel) {
        console.log("%cfunction: replaceSlideContent", "color:white;background:lightblue");
    }

    titlewrapper = slide.childNodes[0].childNodes[0];
    titlewrapper.innerHTML = title;
    slide.replaceChild(content, slide.childNodes[1])
}

function insertSlide(s, title, type, content) {
    if (debug_swiper_daniel) {
        console.log("%cfunction: insertSlide", "color:white;background:lightblue");
    }

    // console.log("title: ",title," s: ",s);

    // Inserts new group to instance s of Swiper. return inserted position

    // Removed, Swiper will be removed, so there´s no need to look for swiper slides. 
    // Instead content will be replaced 
    // var isl = findSlide(s, type);
    // var slide = swiper[s].slides[isl];
    // if (slide) { // slide already exists
    //     replaceSlideContent(slide, title, content);
    //     return isl;
    // }
    var panel = document.createElement('div');
    panel.classList.add("panel");

    titlewrapper = document.createElement('span');
    titlewrapper.innerHTML = title;
    panel.appendChild(titlewrapper);
    /*
    if (type == "_overview" || type == "main") {
        //panel.appendChild(createHomeButton(s));
    } else if (type != "graphics" && type != "_inst_select" && type != "console") {
        panel.appendChild(createCloseButton(s));
    }
    */
    
    /*if (type === "graphics") {
        panel.appendChild(createUpdateButton(s));
    }*/

    var gridContainer = document.createElement('div');
    // gridContainer.classList.add("swiper-slide", "swiper-slide-main");
    gridContainer.classList.add("grid-container");
    // Store type so it can be found easiely later.
    gridContainer.slideType = type;
    gridContainer.appendChild(panel);
    gridContainer.appendChild(content);

    // Graphics-slide is put at mostleft position.
    // if (type == "graphics" || type == "_overview") {
    //     swiper[s].prependSlide(slide);
    //     swiper[s].slideTo(0);
    //     return 0;
    // }
    // swiper[s].appendSlide(slide);
    // if (type == "console") {
    //     if (s === 3) {
    //         // Slide mostright swiper-instance to last position (console)
    //         swiper[3].slideNext();
    //     }
    //     return swiper[s].slides.length - 1;
    // }

    var gridelements = document.getElementsByClassName('grid-element');
                    gridelements[s].innerHTML = "";
                    gridelements[s].appendChild(gridContainer);

    let pos = 0;
    
    // if (swiper[s].slides.length > 1) {
    //     var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
    //     if (consoleslide.slideType == "console") {
    //         // shift Console-slide to mostright position.
    //         swiper[s].removeSlide(swiper[s].slides.length - 2);
    //         swiper[s].appendSlide(consoleslide);
    //         // Slide to position of new slide
    //         pos = swiper[s].slides.length - 2;
    //     } else {
    //         pos = swiper[s].slides.length - 1;
    //     }
    // }
    // swiper[s].slideTo(pos);
    return pos;
}

function createCloseButton(s) {
    if (debug_swiper_daniel) {
        console.log("%cfunction: createCloseButton", "color:white;background:lightblue");
    }

    // Creates 'span'-element containing close-button.
    var wrapper = document.createElement('span');
    wrapper.onclick = function () {
        swiper[s].removeSlide(swiper[s].activeIndex);
        swiper[s].slidePrev();
    };
    var closeButton = '<svg class="interactive icon slide-close-icon" fill="#000000" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>';
    wrapper.innerHTML = closeButton;
    return wrapper;
}

function createUpdateButton(s){
    if (debug_swiper_daniel) {
        console.log("%cfunction: createUpdateButton", "color:white;background:lightblue");
    }

    // Creates 'span'-element containing update-button (Should be removed later!)
    var button = document.createElement('span');
    button.classList.add("interactive", "toggle-updates-graphics")
    button.onclick = function () {
        getUpdatesGraphics = ! getUpdatesGraphics;
        button.innerHTML = "updates = "+getUpdatesGraphics;
    };
    button.innerHTML = "updates: "+getUpdatesGraphics;
    return button;
}

function defaultSlidePos(s) {
    if (debug_swiper_daniel) {
        console.log("%cfunction: defaultSlidePos", "color:white;background:lightblue");
    }

  return s < 3 ? 0 : swiper[s].slides.length-1;
}

function getSlideNames() {
    if (debug_swiper_daniel) {
        console.log("%cfunction: getSlideNames", "color:white;background:lightblue");
    }

    var names = []
    for (var s=0; s<MAXBLOCK; s++) {
        var sw = swiper[s];
        var name = "";
        if (sw.activeIndex != defaultSlidePos(s) && sw.slides.length > 0) {
            name = sw.slides[sw.activeIndex].slideType;
        }
        names.push();
    }
    for (var s=MAXBLOCK-1; s>=0; s--) {
        if (names[s] != "") break;
        names.pop();
    }
    return names;
}