var mainlist;
var rmspan = ["<span class='remove' id='delete-", "'>–</span>"]
document.addEventListener("DOMContentLoaded", function() {
  chrome.storage.sync.get(
    {"lists": [
      [
        ["Github", "https://github.com"],
        ["Wikipedia", "https://en.wikipedia.org"],
        ["Gmail", "https://mail.google.com"]
      ],
      [
        ["Desmos", "https://www.desmos.com/calculator"],
        ["Wolfram", "https://wolframalpha.com"],
        ["Hacker News", "https://news.ycombinator.com"]
      ],
      [
        ["Reddit", "https://www.reddit.com"],
        ["YouTube", "https://youtube.com"],
        ["Instagram", "https://instagram.com"]
      ]
    ],
"l1name": "General",
"l2name": "Productivity",
"l3name": "Social"},
    userListsCallback);
});

function columnToArray(list) {
  var l = [];
  var elem = list.getElementsByClassName("item");
  for (var i = 0; i < elem.length; ++i) {
    l[i] = [elem[i].innerText, elem[i].getAttribute("href")];
  }
  return l;
}

function listToArray(list) {
  var l = [];
  var elem = list.getElementsByTagName("li");
  for (var i = 0; i < elem.length; ++i) {
    l[i] = [elem[i].getElementsByTagName("a")[0].innerText, elem[i].getElementsByTagName("a")[0].getAttribute("href")];
  }
  return l;
}

var userListsCallback = function(lists) {
  mainlist = [lists["l1name"],lists["l2name"],lists["l3name"]]
  for(var i=0;i<lists["lists"].length;i++) {
    var ul = document.createElement("ul");
    ul.setAttribute("id", mainlist[i]);
    document.getElementById("links").appendChild(ul);

    var title = document.createElement("div");
    title.setAttribute("class", "title");
    ul.appendChild(title);

    var p = document.createElement("p");
    p.innerText = mainlist[i];
    title.appendChild(p);

    title.insertAdjacentHTML("beforeend", "<span class='add' id='add-"+mainlist[i]+"'>+</span>");

    var list = lists["lists"][i];
    for(var j=0;j<lists["lists"][i].length;j++) {
      var li = document.createElement("li");
      li.setAttribute("id", mainlist[i]+"-"+j);
      var siteurl = list[j][1];
      var name = list[j][0];
      var img = document.createElement("img");
      img.className = "icon";
      img.src = "http://www.google.com/s2/favicons?domain="+siteurl+"";
      li.insertAdjacentHTML("beforeend", "<a class='item' href="+siteurl+"><img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+name+"</a>");
      li.insertAdjacentHTML("beforeend", rmspan[0] + j + "-" + mainlist[i] + rmspan[1]);
      ul.appendChild(li);
    }

    var sortable = Sortable.create(ul, {
      group: "userlists",
      onUpdate: function (evt) {
        save();
      }
    });
  }

  menu();

};

document.onkeyup=function(e){
  var e = e || window.event; // for IE to cover IEs window event-object
  fields = document.getElementsByClassName("new");
  if(e.which == 27 && fields != null) {
    fields[fields.length-1].remove();
    return false;
  }
  if(e.which == 27 && fields != null) {
    fields[fields.length-1].remove();
    return false;
  }
}

function listen(li) {
  li.addEventListener('click', function(event){
    var r = event.target.id.split("-");
    if (r[0] == "delete") {
      var el = document.getElementById(r[2]+"-"+r[1]);
      el.outerHTML = "";
      delete el;
      save();
    } else {
      var ul = document.getElementById(r[1]);
      var li = document.createElement("li");
      li.setAttribute("class", "new");
      li.insertAdjacentHTML("beforeend", "<span class='save' tabindex='3' id='input-"+columnToArray(li).length.toString()+"'>&#x2714;</span><input type='text' class='name' value='' placeholder='name' tabindex='1'><br /><input type='text' class='url' value='' placeholder='url' tabindex='2' id='form-"+columnToArray(li).length.toString()+"'>");
      ul.appendChild(li);
      var span = document.getElementById("input-"+columnToArray(li).length.toString());
      var form = document.getElementById("form-"+columnToArray(li).length.toString());
      var name = document.getElementsByClassName("name")[0].focus();
      span.addEventListener('click', function(event){
        var li = document.getElementsByClassName("new")[0]
        var ul = li.parentNode;
        if (li.getElementsByClassName("name")[0].value != "" || li.getElementsByClassName("url")[0].value != "") {
          var newli = document.createElement("li");
          newli.setAttribute("id",r[1]+"-"+columnToArray(ul).length.toString());
          var siteurl = addhttp(li.getElementsByClassName("url")[0].value);
          var name = li.getElementsByClassName("name")[0].value;
          li.remove()
          delete li;

          newli.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+name+"</a>");
          newli.insertAdjacentHTML("beforeend", rmspan[0]+columnToArray(ul).length.toString()+"-"+r[1]+rmspan[1]);
          document.getElementById(r[1]).appendChild(newli);
          save();
          listen(newli);
        }
      });
      span.addEventListener('keypress', function(e) {
        if (e.keyCode == 13) {
          span.click();
        }
      });
    }
  }, false);
}

function menu() {
  var allUserLi = document.querySelectorAll('.remove, .add');

  allUserLi.forEach(function(li, p_index){
    listen(li);
  });
}

function save(l) {
  var set = l || JSON.parse(JSON.stringify(mainlist));
  d = []
  d = set;
  console.log("Saving settings");
  for (var i = 0; i < set.length; ++i) {
    d[i] = listToArray(document.getElementById(set[i]));
  }
  chrome.storage.sync.set( {"lists": d} );
}