Fire JS Bin - SearchEasy

var eng = {},
    current = {},
    fadeDur = 200,
    titlePrefix = "Search ",
    idxWidth = 700,
    idxLogoFull = [225, 80],
    idxLogoSmall = [157, 56],
    idxMargin = 24,
    idxFadedOpacity = 0.3,
    idxHeight = 0;
$(function () {
  indexCreate();
  $("#i").keyup(function (a) {
    fetchSuggestions(a.which)
  });
  $(document).click(function (a) {
    closeSugBox(a.srcElement)
  });
  $("#toggleInfo").click(function () {
    $("#infoBox").toggle(400)
  });
  build(firstProp(eng), false)
});

function doSearch() {
  var a = eng[current.engine].places[current.place][0];
  a = a.replace("%query%", encodeURIComponent($("#i").val()));
  if (typeof eng[current.engine].languages == "object") a = a.replace("%lang%", eng[current.engine].languages[current.language]);
  $('<div id="main"></div>').appendTo('body');
  $('<div id="data"></div>').appendTo('#main');
  $('<iframe src="' + a + '" id="datain" name="datain" border="0" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="auto" noresize>').appendTo('#data');
  $('<a id="backlink" href="javascript: goBack()">« Go Back!</a>').appendTo('#data');
  return false
}
function goBack() {
  $('#main').remove()
}
function indexCreate() {
  var a = 0,
      i = 0,
      j = 0,
      offset = 0,
      cols = Math.floor(idxWidth / idxLogoSmall[0]);
  for (e in eng) {
    if (offset == 0 && (numKeys(eng) - j) <= (numKeys(eng) % cols)) {
      offset = cols - numKeys(eng) % cols;
      offset = offset * (idxLogoSmall[0] + idxMargin) / 2
    }
    $("#engines").prepend("<a id='" + e + "_logo' ref='" + e + "'>" + eng[e].pageTitle + "</a>");
    if (i == cols) {
      i = 0;
      a++
    };
    eng[e].idxPos = [(idxLogoSmall[0] + idxMargin) * i - idxWidth / 2 + offset, (idxLogoSmall[1] + idxMargin) * a];
    i++;
    j++
  }
  idxHeight = (a + 1) * (idxLogoSmall[1] + idxMargin) - idxMargin;
  idxHeight = Math.max(idxHeight, idxLogoFull[1]);
  $("#engines a").click(function () {
    build($(this).attr("ref"), true)
  })
}
var idxState = false,
    idxClear = undefined;

function indexOpen() {
  idxState = true;
  clearTimeout(idxClear)
}
function indexClose() {
  idxState = false
}
function build(e, a) {
  var b = (a) ? fadeDur : 0;
  current.engine = e;
  e = eng[e];
  $("#title").html(titlePrefix + e.pageTitle);
  op = (idxState) ? idxFadedOpacity : 0.3;
  $("#engines a").stop().queue("fx", []).removeClass("active");
  $("#" + current.engine + "_logo").addClass("active").animate({
    "opacity": 1
  }, fadeDur);
  $("#engines a:not(.active)").animate({
    "opacity": op
  }, fadeDur);
  if (typeof e.languages == "object") setLang(firstProp(e.languages));
  else $("#lang").fadeOut(fadeDur);
  closeSugBox(false);
  $("#i").attr("autosave", current.engine);
  $("#input input").focus();
  setTimeout(function () {
    $("#method").html("");
    for (place in e.places) $("#method").append("<a onclick='setPlace(this)'>" + place + "</a>");
    setPlace("#method a:first");
    $("#method").animate({
      "opacity": 1
    }, fadeDur)
  }, b)
}
function setPlace(a) {
  current.place = $(a).html();
  $("#method a").removeClass("active");
  $(a).addClass("active");
  $("#input input").focus();
  if (eng[current.engine].places[current.place][1] !== false) {
    fetchSuggestions();
    $("#i").attr("autocomplete", "off")
  } else {
    closeSugBox(false);
    $("#i").attr("autocomplete", "on")
  }
}
function setLang(a) {
  current.language = a;
  $("#lang").fadeIn(fadeDur).html(a);
  $("#input input").focus()
}
function nextEngine() {
  build(findNext(eng, current.engine), true)
}
function a() {
  var a = findNext(eng[current.engine].places, current.place);
  $("#method a").each(function () {
    if ($(this).html() == a) setPlace($(this))
  })
}
function nextLanguage() {
  setLang(findNext(eng[current.engine].languages, current.language))
}
function closeSugBox(a) {
  if (a == false || a == undefined || (a.id != "i" && a.id != "sugs")) $("#sugs").html("").css({
    "display": "none"
  })
}
function safeName(s) {
  return s.toLowerCase().replace(/[^a-z0-9_]/gi, '')
}
function firstProp(a) {
  var b = true;
  for (prop in a) {
    if (b) {
      return (prop)
    }
    b = false
  }
}
function findNext(a, b) {
  var c = false;
  var d = null;
  for (item in a) {
    if (c) {
      d = item;
      c = false
    }
    if (item == b) c = true
  }
  if (d == null) d = firstProp(a);
  return d
}
function inArray(a, b) {
  return ((',' + b.toString() + ',').indexOf(',' + a + ',') !== -1)
}
function numKeys(a) {
  var b = 0;
  for (var c in a) {
    b++
  }
  return b
}
eng.google = {
  pageTitle: "Google",
  places: {
    'Web': ["http://www.google.com/search?q=%query%&hl=en"],
    'Images': ["http://images.google.com/images?q=%query%&hl=en"],
    'Maps': ["http://maps.google.com/maps?q=%query%"]
  }
};
eng.wikipedia = {
  pageTitle: "Wikipedia",
  places: {
    'Go to Article': ["http://%lang%.wikipedia.org/wiki/Special:Search?search=%query%&go=Go"],
    'Search': ["http://%lang%.wikipedia.org/wiki/Special:Search?search=%query%&fulltext=Search"],
  },
  languages: {
    'EN': 'en',
    'DE': 'de',
    'FR': 'fr'
  }
};
eng.youtube = {
  pageTitle: "YouTube",
  places: {
    'Videos': ["http://www.youtube.com/results?search_query=%query%"]
  },
};
eng.twitter = {
  pageTitle: "Twitter",
  places: {
    'Search Twitter': ["http://search.twitter.com/search?q=%query%"]
  }
};

* { margin:0; padding:0; text-decoration:none }
body { -webkit-text-size-adjust:none; -webkit-user-select:none; font:16px Helvetica, Arial, sans-serif }
#container, #lang, #main { position:absolute }
#container, #main, #datain, #backlink { width:100% }
#container { color:#888; top:200px; height:250px }
#container, #engines a, #method { text-align:center }
#engines { width:640px; margin:0 auto }
#engines a { width:160px; display:block; font-size:26px; opacity:0.3; text-shadow:1px 1px 1px #ccc; padding-top:145px; padding-bottom:10px }
#engines a, #lang, #method a { cursor:pointer }
#engines a, #backlink { float:right }
#engines a.active { border-bottom:15px solid #eee }
#engines a:active, #lang:active { margin-top:1px }
#box, #lang:hover, #lang:active { background:#eee }
#box { padding:25px 40px 30px 40px; position:relative }
#input { margin-top:25px; padding:1px }
#input input { outline:0; border:1px solid #dae2e9; background:white url(/assets/field.png) left top no-repeat; -webkit-appearance:textfield; font:19px 'HelveticaNeue-Light', "Helvetica Neue Light", "Helvetica Neue", "Helvetica", Arial, sans-serif; font-weight:300; color:#363d42; width:543px; padding:6px 38px 6px 35px }
#lang { left:50%; margin-left:274px; top:77px; font-size:13px; font-weight:bold; padding:3px 5px }
#lang, #method a { color:#999 }
#lang:hover { color:#666 }
#method a { padding:3px 6px; margin:0 2px; margin-left:4px; margin-right:4px }
#method a:hover, #method a.active { background:#ddd; color:#333 }
#method a:active { padding:4px 6px }
#main, #data { background:#fff }
#main, #datain { height:100% }
#main { filter:alpha(opacity=90); -khtml-opacity:0.9; -moz-opacity:0.9; opacity:0.9 }
#data { margin:15px 15px 0 15px; height:90% }
#datain { border:1px dashed #bbb; overflow:visible }
#backlink { float:right; margin:2px; padding:2px; text-align:right; font-size:20px; font-weight:800; color: #444 }