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

function insertSwiper(s) {
    // 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) {
    var i;
    for (i = 0; i < swiper[s].slides.length; i++) {
        if (swiper[s].slides[i].slideType === type) {
            return i;
        }
    }
    return null;
}

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

function insertSlide(s, title, type, content) {
    // Inserts new group to instance s of Swiper. return inserted position

    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));
    }*/

    slide = document.createElement('div');
    slide.classList.add("swiper-slide", "swiper-slide-main");
    // Store type so it can be found easiely later.
    slide.slideType = type;
    slide.appendChild(panel);
    slide.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;
    }
    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) {
    // 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){
    // 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) {
  return s < 3 ? 0 : swiper[s].slides.length-1;
}

function getSlideNames() {
  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;
}