const tabsAction    = browser.tabs;
const searchBar     = document.getElementById("searchBar");
const errHandler    = document.getElementById("errorZone");
const listZone      = document.getElementById("listZone");
const notFoundText  = document.createTextNode("Search not found...");
var oldElm          = "";
var plusTag         = ""

function logTabs(tabs) {
    // tab.url requires the `tabs` permission
    for (let tab of tabs) {
        createContainer(tab);
    }
    addPlusContainer();
    // Set poped-out-window position and 100px up from selected elm
     oldElm.scrollIntoView();
     window.scrollBy(0, -100);
}

function createContainer(tab) {
    var id                = tab.id;
    var spanTag           = document.createElement("SPAN");
    var iconText          = document.createTextNode(tab.title);
    var centerTag         = document.createElement("CENTER");
    var closeImgTag       = document.createElement("IMG");
    var icoImgTag         = document.createElement("IMG");

    spanTag.setAttribute("tabID", tab.id);
    spanTag.title         = tab.title;
    spanTag.id            = "iconElm";
    spanTag.className     = "block";
    closeImgTag.id        = "closeBttn";
    closeImgTag.className = "closeImg";
    closeImgTag.src       = "../icons/x.png";
    icoImgTag.id          = "faveIcon";
    icoImgTag.className   = "thumbImg";
    icoImgTag.onerror     = function() { icoImgTag.src = "../icons/tab.png"; }
    icoImgTag.src         = tab.favIconUrl;

    centerTag.appendChild(icoImgTag);
    spanTag.appendChild(closeImgTag);
    spanTag.appendChild(centerTag);
    spanTag.appendChild(iconText);
    listZone.appendChild(spanTag);

    // Set oldElm so eventListeners.js has starting ref
    if (tab.active == true) {
        spanTag.className     = "block block-focused";
        if (oldElm) {
            oldElm.setAttribute("class", "block");
        }
        oldElm = spanTag;
    }
}

function addPlusContainer() {
    var spanTag           = document.createElement("SPAN");
    var centerTag         = document.createElement("CENTER");
    var icoImgTag         = document.createElement("IMG");

    spanTag .addEventListener("click", createTab);
    spanTag.title         = "Open a new tab...";
    spanTag.className     = "block";
    icoImgTag.style       = "width: 100%; height:auto";
    icoImgTag.src         = "../icons/plus.png";

    centerTag.appendChild(icoImgTag);
    spanTag.appendChild(centerTag);
    listZone.appendChild(spanTag);
    plusTag = spanTag;
}

function createTab() {
  tabsAction.create({})
            .then(function (tab) {
                createContainer(tab);
            }).then(function () {
                listZone.appendChild(plusTag);
            });
}

function onError(error) { console.log(`Error: ${error}`); }

function getTabs(tabs) {
    // Get current tab and then list of tabs
    tabsAction.query({currentWindow: true})
            .then(logTabs, onError);
}
getTabs();