var palettes, paletteCount = 0;
$(function() {
  $.getJSON("http://www.colourlovers.com/api/palettes/top?jsonCallback=?",
    { numResults: 100 },
    function(allPalettes) {
      palettes = allPalettes;
      showNextPalette();
    }
  );
});

function showNextPalette(palette) {

  var palette = palettes[paletteCount++ % palettes.length];
  var strips = $("<div class='strips'></div>");
  var colorWidth = ($("#palette").width())/palette.colors.length;

  for (var i in palette.colors) {
      $(strips).append($("<div></div>")
        .addClass("colorStrip")
        .html("&nbsp;")
        .css("background", "#" + palette.colors[i])
        .css("width", colorWidth)
      );
  }

  // start next palette as hidden and gradually show it; once fully shown,
  // start fading out the existing palette
  $(strips)
    .hide()
    .fadeIn({
      queue: false, 
      duration: 1000, 
      easing: "swing",
      complete: function() {
        setTimeout(showNextPalette, 3000);
        $(this).fadeOut({ queue: false, duration: 4000 });
      }
     })
     .appendTo($("#palette"));

  $("#name a")
    .attr("href", "http://www.colourlovers.com/palette/"+palette.id+"/")
    .html(palette.title);

}