const updateTime = () => {
  const n = (new Date()).getHours()
  var imgName = "goodnight"
  if ( n == 23 || n == 0) {
    imgName = "goodnight"
  } else if ( n >= 1 && n <= 4 ) {
    imgName = "goodnight"
  } else if ( n >= 5 && n <= 11 ) {
    imgName = "goodmorning"
  } else if ( n >= 12 && n <= 17 ) {
    imgName = "goodafternoon"
  } else if ( n >= 18 && n <= 22 ) {
    imgName = "goodevening"
  }
  //$("#message").html(imgName)
  $("#message").html(`<image src="res/${imgName}.png" />`)
}

const renderCategoryLink = (link, first) => {
  if(first) {
    return `<a style="padding-left:10px" href="${link.href}">${link.label}</a>
`
  }
  return `<a href="${link.href}">${link.label}</a>
`
}
const renderCategoryLinks = (links) => {
  let out  = ""
  for(let i = 0; i < links.length; i++) {
    out = out + renderCategoryLink(links[i], i==0)
  }
  return out
}

const renderCategory =(obj) => {
  return `<span> <img src="${obj.image}"></span>
${renderCategoryLinks(obj.links)}</br>
`
}
const renderCategories =(objs) => {
 let out = ""
  for(let i = 0; i < objs.length; i++) {
    out = out + renderCategory(objs[i])
  }
  return out
}

const renderCategoriesBox = (data) => {
  return `${renderCategories(data.categories)}
<form method="get" action="${data.search_engine}"> <input type="text" placeholder="" value="" name="q">
`
}

const loadUI = () => {
  $.getJSON("config/config.json", (data)=>{
    let drawn = renderCategoriesBox(data)
    console.log(drawn)
    $("#categories").html(drawn)
  })
}

$(()=>{
  loadUI();
  updateTime();
  setInterval(updateTime, 1000 * 60)
})
$(window).scroll(function() {
  $('#animatedElement').each(function(){
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+400) {
      $(this).addClass("slideUp");
    }
  });
});