window.elementsByColor = {};
window.onload = function() {
  loadScript("http://www.colourlovers.com/api/palettes/top?" +
    "hueOption=blue,violet&numResults=10&orderCol=numVotes&sortBy:DESC&" +
    "jsonCallback=showPalettes");
}

function showPalettes(palettes) {
  console.log("pal", palettes);
  var palettesEl = document.getElementById("palettes");
  palettesEl.innerHTML = "";
  for (var i=0; i<palettes.length; i++) {
    var palette = palettes[i];
    var paletteEl = document.createElement("div");
    paletteEl.className = "palette";
    paletteEl.innerHTML = "<a href='http://colourlovers.com/palette/"+palette.id+"/'>"
      + palette.title+"</a> "+ palette.numVotes + " votes";
    for (var j=0; j<palette.colors.length; j++) {
      var color = palette.colors[j];
      var colorEl = document.createElement("div");
      colorEl.innerHTML = "&nbsp;";
      colorEl.style.backgroundColor = "#" + color;
      paletteEl.appendChild(colorEl);

      if (!window.elementsByColor["color"+color]) { window.elementsByColor["color"+color] = []; }
      window.elementsByColor["color"+color] = [];
      window.elementsByColor["color"+color].push(colorEl);
      colorEl.onclick = function() {
        loadScript("http://www.colourlovers.com/api/color/" + color + 
                   "&jsonCallback=loadColor");
      };
    }
    palettesEl.appendChild(paletteEl);
  }
}

function loadColor(color) {
  var color = color[0];
  elements = window.elementsByColor["color"+color.hex];
}

function loadScript(url) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}