<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">
var tab_groups = [];
var recent_page_tabs = false;

function init_sqpl_tabs() {
  tab_groups = [];
  build_tabs();
  var blocks = block_search();
  if (blocks.length > 0) {
    find_tabs(blocks);
    create_tab_wrappers();
    find_tab_heights();
    add_tab_buttons();
    load_first_tabs();
  }
}

function fix_html() {
  $(".sqs-row .sqs-col-12").each(function () {
    $(this).parent().replaceWith($(this).children());
    $(this).remove();
  });
}

function build_tabs() {
  $(".tabs-start").each(function () {
    $(this).closest(".sqs-block").addClass("tabs-start-parent");
  });
  $(".tabs-end").each(function () {
    $(this).closest(".sqs-block").addClass("tabs-end-parent");
  });
  $(".tabs-start-parent").each(function (t) {
    $(this).before(
      '<div id="sqpl-tab-group-' + t + '" class="sqpl-tabs">' +
      '<div class="sqpl-tab-controls"></div>' +
      '<div class="sqpl-tab-content"></div></div>'
    );
  });
  $(".sqpl-tab-content").css({ overflow: "hidden", position: "relative" });
}

function block_search() {
  var groups = [];
  $(".tabs-start-parent").each(function () {
    var blocks = [];
    $(this).nextUntil(".tabs-end-parent").each(function () {
      blocks.push($(this));
    });
    groups.push(blocks);
  });
  $(".tabs-start-parent").remove();
  $(".tabs-end-parent").remove();
  return groups;
}

function is_junk_block($el) {
  if ($el.is("style") || $el.find("style").length > 0) return true;
  var hasText = $.trim($el.text()).length > 0;
  var hasMedia = $el.find("img, iframe, video, svg").length > 0;
  if (!hasText && !hasMedia) return true;
  return false;
}

function find_tabs(groups) {
  for (var g = 0; g < groups.length; g++) {
    var blocks = groups[g];
    var tabs = [];
    var current_elements = [];
    var current_name = "";
    var started = false;

    for (var i = 0; i < blocks.length; i++) {
      if (blocks[i].find(".tab-section").length > 0) {
        // đây là marker của một tab mới
        if (started === false) {
          started = true;
        } else {
          tabs.push({ elements: current_elements, tab_name: current_name });
          current_name = "";
          current_elements = [];
        }
        current_name = blocks[i].text();
        blocks[i].remove();
      } else if (started) {

        if (!is_junk_block(blocks[i])) {
          current_elements.push(blocks[i]);
        } else {
          blocks[i].remove();
        }
      }
    }
    tabs.push({ elements: current_elements, tab_name: current_name });
    tab_groups.push(tabs);
  }
}

function create_tab_wrappers() {
  for (var t = 0; t < tab_groups.length; t++) {
    var content = $("#sqpl-tab-group-" + t).find(".sqpl-tab-content");
    var group = tab_groups[t];
    for (var n = 0; n < group.length; n++) {
      content.append('<div class="sqpl-tab sqpl-tab-' + n + '"></div>');
      group[n].wrapper = $("#sqpl-tab-group-" + t).find(".sqpl-tab-" + n);
      group[n].wrapper.css("opacity", 0);
      for (var s = 0; s < group[n].elements.length; s++) {
        group[n].wrapper.append(group[n].elements[s]);
      }
    }
  }
  $(".sqpl-tab").css({ position: "absolute", width: "100%" });
}

function add_tab_buttons() {
  for (var t = 0; t < tab_groups.length; t++) {
    var group = tab_groups[t];
    var controls = $("#sqpl-tab-group-" + t).find(".sqpl-tab-controls");
    for (var n = 0; n < group.length; n++) {
      controls.append(
        '<div class="sqpl-tab-button sqpl-tab-button-' + n +
        '" sqpl-tab="' + n + '" sqpl-group="' + t + '">' +
        group[n].tab_name + "</div>"
      );
      group[n].button = $("#sqpl-tab-group-" + t).find(".sqpl-tab-button-" + n);
      group[n].button.click(function () {
        var tabIndex = parseInt($(this).attr("sqpl-tab"));
        load_tab(parseInt($(this).attr("sqpl-group")), tabIndex);
      });
    }
    tab_groups[t].group_wrapper = $("#sqpl-tab-group-" + t);
    tab_groups[t].content_wrapper = $("#sqpl-tab-group-" + t).find(".sqpl-tab-content");
    tab_groups[t].controls_wrapper = $("#sqpl-tab-group-" + t).find(".sqpl-tab-controls");
    tab_groups[t].current_tab = 0;
  }
}

function load_first_tabs() {
  for (var t = 0; t < tab_groups.length; t++) {
    var group = tab_groups[t];
    var e = group.current_tab;
    group[e].wrapper.toggleClass("clickability").css({ top: "25px", opacity: 1 });
    group.content_wrapper.css({ height: group[e].section_height });
    for (var n = 0; n < group.length; n++) {
      if (n != e) group[n].wrapper.css("top", group[e].section_height + 50);
    }
    group.controls_wrapper.find(".sqpl-tab-button-" + e).toggleClass("sqpl-active-tab");
  }
}

function find_tab_heights() {
  for (var t = 0; t < tab_groups.length; t++) {
    var group = tab_groups[t];
    for (var e = 0; e < group.length; e++) {
      group[e].section_height = group[e].wrapper.outerHeight();
    }
  }
}

function load_tab(t, a) {
  var group = tab_groups[t];
  var n = group.current_tab;
  if (a != n) {
    find_tab_heights();
    group.controls_wrapper.find(".sqpl-tab-button-" + n).toggleClass("sqpl-active-tab");
    group.controls_wrapper.find(".sqpl-tab-button-" + a).toggleClass("sqpl-active-tab");
    group[n].wrapper.toggleClass("clickability").animate(
      { opacity: 0 },
      { duration: 300, complete: function () { $(this).css("top", group[a].section_height + 100); } }
    );
    group[a].wrapper.css("top", "25px");
    group[a].wrapper.toggleClass("clickability").animate({ opacity: 1 }, { duration: 300 });
    group.content_wrapper.css({ height: group[a].section_height + 25 });
    for (var s = 0; s < group.length; s++) {
      if (s != a && s != n) group[s].wrapper.css("top", group[a].section_height + 100);
    }
    group.current_tab = a;
  }
}

function interval(fn, delay, times) {
  var run = (function (d, count) {
    return function () {
      if (count === undefined || count-- > 0) {
        setTimeout(run, d);
        try { fn.call(null); } catch (err) { count = 0; throw err.toString(); }
      }
    };
  })(delay, times);
  setTimeout(run, delay);
}

function watch() {
  MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  new MutationObserver(function (mutations) {
    for (var a = 0; a < mutations.length; a++) {
      if (mutations[a].type === "attributes") {
        document.dispatchEvent(new Event("pageChange"));
      }
    }
  }).observe(document.body, { attributes: true, attributeFilter: ["id"] });
}

$(document).ready(function () {
  if ($(".tabs-start").length > 0) {
    fix_html();
    init_sqpl_tabs();
  }
});

var update_tab_heights = function () {
  find_tab_heights();
  for (var t = 0; t < tab_groups.length; t++) {
    var group = tab_groups[t];
    var h = group[group.current_tab].section_height;
    group.content_wrapper.css({ height: h + 25 });
  }
};

$(window).on("resize", function () {
  window.requestAnimationFrame(update_tab_heights);
});
$(".sqs-block-markdown h1").click(function () {
  setTimeout(function () { update_tab_heights(); }, 500);
});
interval(update_tab_heights, 2000, 5);

document.addEventListener("pageChange", function () {
  if (recent_page_tabs == false) {
    setTimeout(function () { fix_html(); init_sqpl_tabs(); }, 1000);
    recent_page_tabs = true;
    setTimeout(function () { recent_page_tabs = false; }, 200);
  }
});
window.onload = watch;
</script>