Fire JS Bin - Mosaicsta

var fsrc = "";
var tname, ctx;
var tpindex;
var twitterDs;
var ttw = 20;
var tth = 20;
var ftw = 60;
var fth = 60;
var currTWpage = 1;
var thumbsDict;
var dctx;
var bctx;
var fdata, t, finw, finh, dispw = 300,
    disph = 300,
    mdctx, mdcan, tlog, _l = "loading ",
    _n = "Now ";
var _T = "Twitter ";
var _F = "Flickr ",
    _D = "...",
    _tot = 5,
    _Y = "YQL",
    _a = " done. ";

function clearF(a) {
  if (a.cleared) {
    return
  }
  a.cleared = true;
  a.value = "";
  a.style.color = "#000"
}
function showSearch() {
  $("#soption").toggle("slow")
}
$(init);

function init() {
  finw = ttw * ftw;
  finh = tth * fth;
  thumbsDict = new Object();
  dctx = $("<canvas/>").attr({
    width: ttw,
    height: tth
  })[0].getContext("2d");
  searchF($("#fv").val())
}
function searchF(a) {
  var b = "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + a + "&tagmode=any&format=json&jsoncallback=onFR";
  $.ajax({
    url: b,
    dataType: "jsonp"
  })
}
function onFR(a) {
  $("#fimages")[0].innerHTML = "";
  $.each(a.items, function (b, c) {
    if (b >= 6) {
      return
    }
    $("<img/>").attr({
      src: c.media.m,
      height: 100
    }).appendTo("#fimages").click(function (d) {
      $("#fimages img").fadeTo(0, 1);
      $(this).fadeTo("slow", 0.5);
      fsrc = (c.media.m).replace("_m.jpg", "_s.jpg");
      d.preventDefault()
    }).wrap("<a href='#'/>")
  })
}
function fSub() {
  tname = $("#tz").val();
  if (tname == "" || fsrc == "") {
    return
  } else {
    $("#mc").hide("slow", onFormSubmit)
  }
}
function onFormSubmit() {
  $("#mc")[0].innerHTML = "";
  $("#mc").show(0);
  $("<div/>").attr({
    id: "trc"
  }).appendTo("#mc");
  LFI()
}
function LFI() {
  tg(_l + "from " + _F + "via " + _Y + _D);
  var a = "http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent('select * from data.uri where url="' + fsrc + '"') + "&format=json&diagnostics=true&callback=onFTR";
  $.ajax({
    url: a,
    dataType: "jsonp"
  })
}
function onFTR(b) {
  var a = b.query.results.url;
  if (!a) {
    alert("Ouch! Refresh and select a different source image!");
    return
  }
  $("<img/>").load(function () {
    var c = $("<canvas/>").attr({
      width: ftw,
      height: fth
    })[0].getContext("2d");
    c.drawImage(this, 0, 0, ftw, fth);
    fdata = c.getImageData(0, 0, ftw, fth).data;
    tg(_gp(1) + _a + _n + _l + "from" + _T + _D);
    LT()
  }).attr("src", a)
}
function LT() {
  var a = "http://api.twitter.com/1/statuses/followers.json?screen_name=" + tname + "&cursor=-1&callback=onRTD";
  $.ajax({
    url: a,
    dataType: "jsonp"
  })
}
function onRTD(a) {
  tpindex = (a.next_cursor);
  tg(_gp(2) + _a + _n + _l + "from " + _T + "via " + _Y);
  pTYQL(-1)
}
function pTYQL(b) {
  var a = "http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent('select * from data.uri where url in (select users.user.profile_image_url from xml where url="http://api.twitter.com/1/statuses/followers.xml?cursor=' + b + "&screen_name=" + tname + '")') + "&format=json&diagnostics=true&callback=onTTR";
  $.ajax({
    url: a,
    dataType: "jsonp"
  })
}
function onTTR(a) {
  twitterDs = a.query.results.url;
  for (m in twitterDs) {
    $("<img/>").load(function () {
      dctx.clearRect(0, 0, ttw, tth);
      dctx.drawImage(this, 0, 0, ttw, tth);
      thumb2RGB(dctx.getImageData(0, 0, ttw, tth).data, ttw, tth, this)
    }).attr("src", twitterDs[m])
  }
  currTWpage += 1;
  if (currTWpage <= 2 && tpindex != 0) {
    tg(_gp(3) + _a + _n + _l + "from " + _T + "via " + _Y);
    pTYQL(tpindex)
  } else {
    initM()
  }
}
function thumb2RGB(k, e, l, n) {
  var a = 0;
  var f = 0;
  var j = 0;
  var h = k.length;
  for (var i = 0; i < h; i += 4) {
    a = a + k[i];
    f = f + k[i + 1];
    j = j + k[i + 2]
  }
  h = h / 4;
  var d = new Object();
  d.r = Math.round(a / h);
  d.g = Math.round(f / h);
  d.b = Math.round(j / h);
  d.d = n;
  var c = "" + d.r + d.g + d.b;
  if (thumbsDict[c]) {} else {
    thumbsDict[c] = d
  }
}
function initM() {
  mdctx = $("<canvas/>").attr({
    width: finw,
    height: finh,
    id: "dum"
  })[0].getContext("2d");
  mdcan = mdctx.canvas;
  tg(_gp(4) + _a + "Brewing mosaic" + _D);
  buildMo()
}
var ci;
var ri;
var gi;
var bi;
var rC = 0;

function buildMo() {
  clearTimeout(t);
  for (x = 0; x < ftw; x += 1) {
    var c;
    var e;
    ci = (x + rC * ftw) * 4;
    ri = fdata[ci];
    gi = fdata[ci + 1];
    bi = fdata[ci + 2];
    for (key in thumbsDict) {
      var b = thumbsDict[key];
      var a = Math.sqrt(Math.pow(Math.abs(ri - b.r), 2) + Math.pow(Math.abs(gi - b.g), 2) + Math.pow(Math.abs(bi - b.b), 2));
      if (c) {
        if (a < c) {
          c = a;
          e = b
        }
      } else {
        c = a;
        e = b
      }
    }
    mdctx.drawImage(e.d, (x * ttw), rC * tth, ttw, tth);
    c = undefined;
    e = undefined
  }
  rC += 1;
  if (rC < fth) {
    t = setTimeout("buildMo()", 300)
  } else {
    $("#pc")[0].innerHTML = "";
    $("#mc")[0].innerHTML = "";
    $("<canvas/>").attr({
      width: dispw,
      height: disph,
      id: "stage"
    }).appendTo("#mc");
    var d = $("#stage");
    ctx = d[0].getContext("2d");
    rdrw();
    $("#stage").mousedown(function (i) {
      var g = $("#stage").offset();
      var j = (i.clientX - g.left);
      var h = (i.clientY - g.top);
      var f = (dispw - finw) + 3 * (dispw - j);
      var k = (disph - finh) + 3 * (disph - h);
      ctx.clearRect(0, 0, dispw, disph);
      ctx.drawImage(mdcan, f, k, finw, finh)
    });
    $("#stage").mouseup(function (f) {
      rdrw()
    });
    $("<div/>").css("font-size", "42.5%").appendTo("#co")[0].innerHTML = 'click anywhere on the mosaic to zoom in.<br><a  href="#" id="sv" onclick="_s(this);">Save!</a>'
  }
}
function _s(a) {
  $("#sv").attr("href", mdcan.toDataURL())
}
function rdrw() {
  ctx.clearRect(0, 0, dispw, disph);
  ctx.drawImage(mdcan, 0, 0, dispw, disph)
}
function tg(a) {
  $("#trc")[0].innerHTML = a
}
function _gp(a) {
  return Math.round(a * 100 / _tot) + "%"
};