blue-searchpage/scripts/scripts.js

var eng = {},
  current = {},
  fadeDur = 200,
  titlePrefix = "Search ",

  idxWidth = 700,
  idxLogoFull = [225, 80],
  idxLogoSmall = [157, 56],
  idxMargin = 24,
  idxFadedOpacity = 0.3,

  idxHeight = 0;


$(function() {
  // Create Engine Index

  indexCreate();

  // Behavior

  $("#i").keyup(function(ev) {
    fetchSuggestions(ev.which);
  });
  $(document).click(function(ev) {
    closeSugBox(ev.srcElement)
  });

  $("#toggleInfo").click(function() {
    $("#infoBox").toggle(400);
  });

  // Set up first engine

  build(firstProp(eng), false);
});

function doSearch() {
  var url = eng[current.engine].places[current.place][0];
  url = url.replace("%query%", encodeURIComponent($("#i").val()));
  if (typeof eng[current.engine].languages == "object")
    url = url.replace("%lang%", eng[current.engine].languages[current.language]);

  window.location.href = url;
  return false;
}


/*	ENGINE INDEX
	-----------------------------------------------------  */

function indexCreate() {
  var row = 0,
    i = 0, // Reset every row
    j = 0, // Total
    offset = 0,
    cols = Math.floor(idxWidth / idxLogoSmall[0]);

  for (e in eng) {
    // If the offset hasn't been set yet
    // And the number of engines left to draw is <= items in the final row
    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 + "'><img src='engines/" + eng[e].logo + "'></a>");

    if (i == cols) {
      i = 0;
      row++;
    };
    eng[e].idxPos = [
      (idxLogoSmall[0] + idxMargin) * i - idxWidth / 2 + offset,
      (idxLogoSmall[1] + idxMargin) * row
    ];
    i++;
    j++;
  }
  idxHeight = (row + 1) * (idxLogoSmall[1] + idxMargin) - idxMargin;
  idxHeight = Math.max(idxHeight, idxLogoFull[1]);

  $("#engines a").click(function() {
    build($(this).attr("ref"), true);
  })

  $("#engines a").css({
    "left": "50%",
    "bottom": "0",
    "marginLeft": -idxLogoFull[0] / 2 + "px"
  });

  $("#engines").mouseenter(function() {
    indexOpen();
  });
  $("#engines").mouseleave(function() {
    indexClose();
  });
}

var idxState = false,
  idxClear = undefined;

function indexOpen() {
  idxState = true;
  clearTimeout(idxClear);

  $("#engines").css({
    "height": idxHeight
  });

  for (e in eng) {
    var op = $("#" + e + "_logo").hasClass("active");
    $("#" + e + "_logo").stop().queue("fx", []).animate({
      "marginLeft": eng[e].idxPos[0] + "px",
      "marginBottom": eng[e].idxPos[1] + "px",
      "opacity": (op) ? 1 : idxFadedOpacity,
      "width": idxLogoSmall[0],
      "height": idxLogoSmall[1],
    }, fadeDur);
  }
}

function indexClose() {
  idxState = false;

  $("#engines").css({
    "height": idxLogoFull[1]
  });

  $("#engines a").each(function() {
    var op = $(this).hasClass("active");
    $(this).stop().queue("fx", []).animate({
      "marginLeft": -idxLogoFull[0] / 2 + "px",
      "marginBottom": 0,
      "opacity": (op) ? 1 : 0,
      "width": idxLogoFull[0],
      "height": idxLogoFull[1]
    }, fadeDur);
  });

  // Because jQuery doesn't like me
  idxClear = setTimeout(function() {
    $("#engines a:not(.active)").css("opacity", 0)
  }, fadeDur);
}



/*	GENERATING THE SEARCH ENGINE PAGE
	-----------------------------------------------------  */

function build(e, animate) {
  var methodFade = (animate) ? fadeDur : 0;

  current.engine = e; // Just the engine's ID for reference
  e = eng[e]; // Engine object

  $("#title").html(titlePrefix + e.pageTitle);

  $("#method").stop().queue("fx", []).animate({
    "opacity": 0
  }, methodFade);

  op = (idxState) ? idxFadedOpacity : 0;
  $("#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", "com.infinise.go." + 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);
  }, methodFade);
}

function setPlace(place) {
  current.place = $(place).html();

  $("#method a").removeClass("active");
  $(place).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(language) {
  current.language = language;

  $("#lang").fadeIn(fadeDur).html(language);
  $("#input input").focus();
}


/*	KEYBOARD SHORTCUTS
	-----------------------------------------------------  */

var isCtrl = false;
var isCmd = false;

$(document).keyup(function(e) {
  if (e.which == 17) isCtrl = false;
  if (e.which == 91) isCmd = false;
}).keydown(function(e) {
  if (e.which == 17) isCtrl = true;
  if (e.which == 91) isCmd = true;

  if (e.which == 49 && isCtrl == true) {
    /* Key "1" */
    nextEngine();
    return false;
  }
  if (e.which == 50 && isCtrl == true) {
    /* Key "2" */
    nextPlace();
    return false;
  }
  if (e.which == 51 && isCtrl == true) {
    /* Key "3" */
    nextLanguage();
    return false;
  }

  if (e.which == 38) {
    /* Arrow Up */
    prevSugResult();
  }
  if (e.which == 40) {
    /* Arrow Down */
    nextSugResult();
  }
  if (e.which == 27) {
    /* ESC */
    closeSugBox(false);
  }
  if (e.which == 13) {
    /* Enter */
    applySugResult();
  }
});

function nextEngine() {
  build(findNext(eng, current.engine), true);
}

function nextPlace() {
  var nextPlace = findNext(eng[current.engine].places, current.place);
  $("#method a").each(function() {
    if ($(this).html() == nextPlace) setPlace($(this));
  })
}

function nextLanguage() {
  setLang(findNext(eng[current.engine].languages, current.language));
}


/*	SUGGESTIONS
	-----------------------------------------------------  */

function fetchSuggestions(key) {
  if (key == undefined || (!inArray(key, new Array(13, 16, 20, 27, 37, 38, 39, 40)) && !isCtrl && !isCmd)) {
    if ($("#i").val() != "" && eng[current.engine].places[current.place][1] !== false) {
      current.suggestionsTimestamp = new Date().getTime();

      var url = eng[current.engine].places[current.place][1];
      url = url.replace("%query%", encodeURIComponent($("#i").val()));
      url = url.replace("%time%", current.suggestionsTimestamp);
      if (typeof eng[current.engine].languages == "object")
        url = url.replace("%lang%", eng[current.engine].languages[current.language]);

      $.getJSON(url, function(data) {
        buildSuggestions(data);
      })
    } else closeSugBox(false);
  }
}

function buildSuggestions(list) {
  if (list.empty) {
    if (console) console.log("(1) Suggestions for '" + list.query + "' empty.");
    closeSugBox(false);
  } else if (
    list.engine == current.engine &&
    list.timestamp == current.suggestionsTimestamp &&
    list.query == $("#i").val()
  ) {
    if (console) console.log("(2) Suggestions for '" + list.query + "' accepted.");

    $("#sugs").html("");
    for (sug in list.results) {
      sug = list.results[sug];
      $("#sugs").append("<li><a href='" + sug[1] + "'>" + sug[0] + "</a></li>");
    }

    $("#sugs").css({
      "display": "block"
    });
    $("#sugs li").mousemove(function() {
      $("#sugs .active").removeClass("active");
      $(this).addClass("active");
    }).click(function() {
      applySugResult();
    });
  } else {
    if (console) console.log("(3) Suggestions for '" + list.query + "' discarded.");
  }
}

function prevSugResult() {
  if ($("#sugs").css("display") == "none") return;
  if ($("#sugs .active").length == 0) {
    $("#sugs li:last-child").addClass("active");
  } else {
    $("#sugs .active").removeClass("active").prev().addClass("active");
  }
  backupQuery();
}

function nextSugResult() {
  if ($("#sugs").css("display") == "none") return;
  if ($("#sugs .active").length == 0) {
    $("#sugs li:first-child").addClass("active");
  } else {
    $("#sugs .active").removeClass("active").next().addClass("active");
  }
  backupQuery();
}

var originalQuery = false;

function backupQuery() {
  if ($("#sugs .active").length > 0) {
    if (!originalQuery) originalQuery = $("#i").val();
    $("#i").val($("#sugs .active a").html());
  } else {
    $("#i").val(originalQuery);
    originalQuery = false;
  }
}

function closeSugBox(src) {
  if (src == false || src == undefined || (src.id != "i" && src.id != "sugs"))
    $("#sugs").html("").css({
      "display": "none"
    });
}

function applySugResult() {
  if ($("#sugs .active").length > 0) {
    $("#i").val($("#sugs .active a").html());
    closeSugBox(false);
  }
}