var dbase = {
//https://is.muni.cz/do/sci/UChem/um/dchp
    basepic: "../pics/pomucky/"
}


function loadSource() {
    console.log("Nahravam data")
   var config = {
		apiKey: "AIzaSyCFXA0TUH6NNPM_5bnJAaUzc9pmTcM1ChY",
		authDomain: "chemicke-priklady.firebaseapp.com",
		databaseURL: "https://chemicke-priklady.firebaseio.com/"
	};

	var app = firebase.initializeApp(config);
	dbase.base = app.database();

	var ref = dbase.base.ref("/pomucky");
    
	ref.once("value", function(data) {
     
		var dataAll = data.val();
		dbase.items = dataAll.items;
        dbase.cats = [];
        
        for (var item in dataAll.cats) {
            dbase.cats.push(item);
          
        }        	
		
		initState();
  
    });
	
   // actSource.items = [];
    //loadHTML("https://is.muni.cz/auth/elearning/warp?qurl=" + encodeURIComponent(actSource.url) + ";rozbalit_vse=1;prejit=;pro_tisk=1", action, actSource);
}

function initState() {
    
    dbase.cats = labutils.cathegories;
    dbase.items = labutils.items;
        
    dbase.infoTitle = document.getElementById("info-title");
    dbase.infoContent = document.getElementById("info-content");
    
    dbase.tocTitle = document.getElementById("toc-title");
    dbase.tocContent = document.getElementById("toc-content");
    
    
    dbase.resultTitle = document.getElementById("results-title");
    dbase.resultList = document.getElementById("results-list");
    
    dbase.searchName = document.getElementById("search-name");
    dbase.searchName.addEventListener("input", searchByName); 
    
    //generateAllThumbs();
    generateToc();
}

function generateToc() {
 var toc = document.getElementById("toc-bar");
 for (var i = 0; i <dbase.cats.length; i++) {
    var cat = dbase.cats[i];
    var item = addChild(toc, "span", "maincat");
    item.textContent = capitalize(cat.title);
    item.setAttribute("data-index", i);
    item.addEventListener("click", showTocSection);
 }
}

function nameSorter(cas1, cas2) {
   var i1 = dbase.items[cas1].name; 
   var i2 = dbase.items[cas2].name; 
    
    return i1.localeCompare(i2);
}

function searchByName(evt) {
    var name = evt.target.value.trim().toLowerCase();
    if (name.length < 2) { clearResults(); return};
    
    dbase.results = [];
    dbase.phrase = name;
    
    for (var iid in dbase.items) {
        
        var item = dbase.items[iid];
        
        if (item.title.search(dbase.phrase) > -1) {
            dbase.results.push(iid);
        }
    }
    
    showResultList("Název obsahuje \"" + name + "\" (" + dbase.results.length + ")");
    
}


function clearResults() {
    dbase.resultList.innerHTML = "";
    dbase.resultTitle.textContent = "";
}

function showResultList(title) {
    dbase.resultList.innerHTML = "";
    dbase.resultTitle.textContent = title;
    
    for (var i = 0; i < dbase.results.length; i++) {
        var iid = dbase.results[i];
        var item = dbase.items[iid];
        var rItem = document.createElement("div");
        rItem.className = "result-item";
        rItem.textContent = item.titleBrowse;
        
        rItem.setAttribute("data-id", iid);
        rItem.addEventListener("click", showItemInfo);
        
        dbase.resultList.appendChild(rItem);
    }
}

function showItemInfo(evt) {
    var div = evt.currentTarget;
    var iid = div.getAttribute("data-id");
    
    var item = dbase.items[iid];
    
    var name = item.title;
    name = name.charAt(0).toUpperCase() + name.substring(1);
    dbase.infoTitle.textContent = name;
    
    
    var out = []
    if (item.isPic){
    out.push("<figure class='pic'><div class='content'>")
     var img ="<img src='" + dbase.basepic + "/" + iid + ".jpg' alt='pomucka'>"     
     out.push(img);
     out.push("</div>");
    
    var caption = "";
     if (item.source) {
     }
     else {
        caption = "Obrázek poskytla společnost <a href='https://www.verkon.cz/' target='_blank'><img class='logo-verkon' src='" + dbase.basepic + "verkon-logo.svg' ></a>" 
     }
     
        out.push("<figcaption>" + caption + "</figcaption>")
     
     
     out.push("</figure>")
    }
   

    dbase.infoContent.innerHTML = out.join("");
    $("#show_info").foundation("open")
}

function generateAllThumbs() {
    dbase.infoTitle.textContent = ""
    dbase.infoContent.innerHTML = "";

   

 //generateThumbSection(0, dbase.infoContent);
  /*  
   for (var i = 0; i < dbase.cats.length; i++) {
        generateThumbSection(i, dbase.infoContent);
    }
    
     */
}

function showTocSection(evt) {
 let btn = evt.currentTarget;

 let active = document.querySelector(".maincat.active");
 if (active && active != btn) {
 active.classList.remove("active"); }

    btn.classList.add("active");
 let index = btn.getAttribute("data-index");
dbase.tocContent.innerHTML = "";
 generateThumbSection(index, dbase.tocContent);
}

function generateThumbSection(index, frag) {
var sect = dbase.cats[index];

    let section = addChild(frag, "section")

    let head = addChild(section, "h2");
    head.textContent = capitalize(sect.title);

    var thumbs = addChild(section, "div", "thumbs");

    for (var i = 0; i < sect.items.length; i++) {
        let iid = sect.items[i];
        let item = dbase.items[iid];
        if (!item) {
            console.log("Item " + iid + " not found.")
            continue;}

        let fig = addChild(thumbs, "figure", "thumb");
        let img = addChild(fig, "img", "thumb-img");
        if (item.isPic) {
            img.src = dbase.basepic + "mini/" + iid + ".jpg";
        }
        else {img.src = dbase.basepic + "mini/blank.jpg";}

        let caption = addChild(fig, "figcaption", "thumb-desc");
        caption.textContent = item.titleBrowse;

        fig.addEventListener("click", showItemInfo);
        fig.setAttribute("data-id", iid)
    }
}

function addChild(parent,childName, childClass) {
    if (!parent) return;
    
    var child = parent.appendChild(document.createElement(childName));
    if (childClass != undefined) {
        child.className = childClass;
    }
    
    return child;
}
function addText(parent,text) {
    if (!parent) return;
    
    parent.appendChild(document.createTextNode(text));
}

function addListener(cssRule, evtType, evtListener) {
    var node = document.querySelector(cssRule);

    if (node) {
        node.addEventListener(evtType, evtListener);
    }
    return node;
}

function capitalize(text) {
return text.charAt(0).toUpperCase() + text.substring(1);
}

window.addEventListener("load", initState)