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

function insertSwiper(s) {
    // Create an empty swiper-instance and append the swiper-container to
    // 'grid-element' s.

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

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

    var paginationWrapper = document.createElement('div');
    paginationWrapper.setAttribute("class", "swiper-pagination");
    container.appendChild(paginationWrapper);

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

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

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

    if (!isTouchDevice()) {
        // Add swiper-button.
        swiper.params.noSwipingClass = "swiper-slide-main";
        container.appendChild(buttonPrev);
        container.appendChild(buttonNext);
    }

    return swiper;
}

function findSlide(s, type) {
    var i;
    for (i = 0; i < swiper[s].slides.length; i++) {
        if (swiper[s].slides[i].getAttribute("slide-type") === type) {
            return swiper[s].slides[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.

    var slide = findSlide(s, type);
    if (slide) { // slide already exists
        replaceSlideContent(slide, title, content);
        return
    }
    var panel = document.createElement('div');
    panel.setAttribute("class", "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.setAttribute("class", "swiper-slide swiper-slide-main");
    // Store type so it can be found easiely later.
    slide.setAttribute("slide-type", type);
    slide.appendChild(panel);
    slide.appendChild(content);
    // Graphics-slide is put at mostleft position.
    if (type == "graphics" || type == "_overview") {
     // Remove old graphics-slide.
        /* see above
        if(swiper[0].slides[0].getAttribute("slide-type") === "graphics"){
            swiper[0].removeSlide(0);
        }
        */
        swiper[s].prependSlide(slide);
        swiper[s].slideTo(0);
    } else if (type == "console") {
        swiper[s].appendSlide(slide);
        if (s === 3) {
            // Slide mostright swiper-instance to last position (console)
            swiper[3].slideNext();
        }
    } else {
        swiper[s].appendSlide(slide);
        if (swiper[s].slides.length > 1) {
            var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
            if (consoleslide.getAttribute["slide-type"] == "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
                swiper[s].slideTo(swiper[s].slides.length - 2);
            } else {
                swiper[s].slideTo(swiper[s].slides.length - 1);
            }
        }
    }
}

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.setAttribute("class","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)) {
      name = sw.slides[sw.activeIndex].getAttribute("slide-type");
    }
    names.push();
  }
  for (var s=MAXBLOCK-1; s>=0; s--) {
    if (names[s] != "") break;
    names.pop();
  }
  return names;
}