var hsde = {
    create_element : function(elem, content, attrs){
    const element = document.createElement(elem);
    if(content != undefined && content.length > 0){
    element.innerHTML = content;
    }
    for (var key in attrs) {
    if(key == 'class'){
    attrs[key].forEach(cname => {
    element.classList.add(cname);

    });
    } else {
    element.setAttribute(key, attrs[key]);
    }
    }
    return element;
    },

    create_jobs : function(sector){
    var div = this.create_element("div");
    var cnt = 0;
    for (var jid in this.jobs['job']){
    if(this.jobs['job'][jid]['category'] == sector){
    cnt++;
    var sub_div = this.create_element("div",
    '<img src="' + this.jobs['job'][jid]['company_logo'] + '" />' +
    '<div>' +
    '<div>' +
        '<a href="' + this.jobs['job'][jid]['link'] + '" target="_blank">' + this.jobs['job'][jid]['title'] + '</a>' +
        '<div class="ht-company-info">' +
            '<span>' + this.jobs['job'][jid]['info'] + '</span>' +
            '<a target="_blank" href="' + this.jobs['job'][jid]['company_url'] + '">' + this.jobs['job'][jid]['company'] + '</a>' +
            '<i>'+ this.jobs['job'][jid]['company_feature'] + '</i>' +
            '<span>'+ this.jobs['job'][jid]['company_region'] + '</span>' +
            '</div>' +
        '</div>' +
    '<b>' + this.jobs['job'][jid]['istamp'] + '</b>' +
    '</div>',
    {'class' : ['job-line']});
    div.appendChild(sub_div);
    }
    }
    if(cnt == 0){
    var initiative = "";
    this.jobs.company.forEach(comp => {
    initiative += '<a href="' + comp.initiative + '" target="_blank">Initiativbewerbung an ' + comp.name + '</a>';
    });

    var sub_div = this.create_element("div",
    '<b class="ht-no-jobs">' +
    '<b>Keine Jobs vorhanden!</b>' +
    initiative +
    '</b>'
    );
    div.appendChild(sub_div);
    }
    this.insertContent(div);
    this.opacity('job-line');
    },

    opacity : function(css){
    lines =  document.querySelectorAll('div[class="'+css+'"]');
    var timer = 100;
    lines.forEach(line => {
    setTimeout(function(){
    console.log(line);
    line.classList.add('ht-show');
    }, timer);
    timer = timer + 100;
    });

    },

    create_home : function(){
    var o_div = hsde.create_element("div");
    for (var key in hsde.jobs['company']) {
    var c_div = hsde.create_element("div",
    '<a href="' + hsde.jobs['company'][key]['url'] + '" target="_blank"><img src="' + hsde.jobs['company'][key]['logo'] + '" /></a>' +
    '<div>' +
    '<div>' +
        '<span><a class="ht-company-link" href="' + hsde.jobs['company'][key]['url'] + '" target="_blank">'+ hsde.jobs['company'][key]['name'] + '</a></span>' +
        '<i>'+ hsde.jobs['company'][key]['region'] + '</i>' +
        '<i>'+ hsde.jobs['company'][key]['feature'] + '</i>' +

        '</div>' +
    '<a href="' + hsde.jobs['company'][key]['url'] + '" target="_blank">' + hsde.jobs['company'][key]['cnt']+ '</a>' +
    '</div>',
    {'class' : ['company-line']});
    o_div.appendChild(c_div);
    }
    this.insertContent(o_div);
    this.opacity('company-line');

    },

    addEvent : function(elem){
    var $this = this;
    elem.addEventListener("click", function(e){
    var links = document.querySelectorAll('a[class^="ht-jobs-menu-link"]');
    links.forEach(link => {
    link.classList.remove('active');
    });
    elem.classList.add('active');
    var cat = elem.getAttribute('data-category');
    $this.addContent(cat);
    });
    },

    addContent : function(cat){
    if(cat == 'home'){
    this.create_home();
    } else {
    this.create_jobs(cat);
    }
    },

    insertContent : function(node){
    console.log(node);
    var div_main = document.getElementById("ht-content");
    div_main.innerHTML = "";
    div_main.appendChild(node);
    },



    jobs : {"category":{"all":{"label":"Alle Bereiche","cnt":0},"kitchen":{"label":"K\u00fcche","cnt":0},"service":{"label":"Service","cnt":0},"bar":{"label":"Bar","cnt":0},"reception":{"label":"Rezeption","cnt":0},"etage":{"label":"Etage","cnt":0}},"company":[{"name":"Hotel Restaurant National Frutigen","cnt":"Akt. Jobs [ 0 ]","logo":"https:\/\/hoteljob-schweiz.de\/images\/u\/5061\/hotel-restaurant-national-frutigen-Bild-2.jpeg?q=1689147366","url":"https:\/\/hoteljob-schweiz.de\/hotel-restaurant-national-frutigen-jobs-5061.htm","feature":"<span title=\"Hotel\" class=\"pe-1\" style=\"color:#cc0000\">Hotel<\/span>\n<span title=\" Gilde\" class=\"pe-1\" style=\"color:#0000cc\"> Gilde<\/span>\n","region":"Adelboden \/ Frutigen","initiative":"https:\/\/hoteljob-schweiz.de\/bsystem.php?uid=5061"},{"name":"Ferien- und Familienhotel Alpina","cnt":"Akt. Jobs [ 0 ]","logo":"https:\/\/hoteljob-schweiz.de\/images\/u\/5059\/hotel-alpina-adelboden-Bild-1.jpeg?q=1657349506","url":"https:\/\/hoteljob-schweiz.de\/ferien-und-familienhotel-alpina-jobs-5059.htm","feature":"<span title=\"Hotel\" class=\"pe-1\" style=\"color:#cc0000\">Hotel<\/span>\n","region":"Adelboden \/ Adelboden","initiative":"https:\/\/hoteljob-schweiz.de\/bsystem.php?uid=5059"},{"name":"Seiler's Vintage Hotel ","cnt":"Akt. Jobs [ 0 ]","logo":"https:\/\/hoteljob-schweiz.de\/images\/u\/5063\/seiler-s-vintage-hotel--Logo-2.png?q=1700038093","url":"https:\/\/hoteljob-schweiz.de\/seiler-s-vintage-hotel-jobs-5063.htm","feature":"<span title=\"3 Sterne Betrieb Superior\" class=\"pe-1\" style=\"color:#cc0000\">3*S<\/span>\n<span title=\" Gilde\" class=\"pe-1\" style=\"color:#0000cc\"> Gilde<\/span>\n","region":"Kandersteg \/ Kandersteg","initiative":"https:\/\/hoteljob-schweiz.de\/bsystem.php?uid=5063"},{"name":"Hotel Des Alpes Adelboden","cnt":"Akt. Jobs [ 0 ]","logo":"https:\/\/hoteljob-schweiz.de\/images\/u\/5062\/hotel-des-alpes-adelboden-Bild-1.jpeg?q=1657567844","url":"https:\/\/hoteljob-schweiz.de\/hotel-des-alpes-adelboden-jobs-5062.htm","feature":"<span title=\"Hotel\" class=\"pe-1\" style=\"color:#cc0000\">Hotel<\/span>\n","region":"Adelboden \/ Adelboden","initiative":"https:\/\/hoteljob-schweiz.de\/bsystem.php?uid=5062"}]}    };






    var div_main = document.getElementById("ht-jobs");
    const ul = hsde.create_element("ul", "", { 'class' : ['ht-main-menu'] });
    const li_home = document.createElement("li");
    const home = hsde.create_element("a", "Home", {'class' : ['ht-jobs-menu-link', 'active'], 'href' : '#', 'data-category' : 'home'});
    hsde.addEvent(home);

    li_home.appendChild(home);
    ul.appendChild(li_home);

    for (var key in hsde.jobs['category']) {
    var li = document.createElement("li");
    var content = hsde.jobs['category'][key]['label'] + " ("+hsde.jobs['category'][key]['cnt']+")";
    var a = hsde.create_element("a", content, {"data-category" : key, "class" : ["ht-jobs-menu-link"], "href" : "#"});
    hsde.addEvent(a);
    li.appendChild(a);
    ul.appendChild(li);
    }
    div_main.appendChild(ul);
    const div_content = hsde.create_element("div", "", { 'id' : ['ht-content'] });
    div_main.appendChild(div_content);
    hsde.addContent('home');