vh = window.innerHeight / 100;
vw = window.innerWidth / 100;;
function search() {
  value = document.getElementsByClassName("sin")[0].value;
  if (value == "") return;
  window.location.href = "https://cn.bing.com/search?q=" + value;
}
function changeBack() {
  simg = document.getElementsByClassName("simg")[0];
  simg.style.filter = "blur(2px)";
  sin = document.getElementsByClassName("sin")[0];
  sin.value = "";
}
function backBack() {
  simg = document.getElementsByClassName("simg")[0];
  simg.style.filter = "none";
  sin = document.getElementsByClassName("sin")[0];
  sin.value = "Search what I want";
}
function drawCanvas(img) {
  c = document.getElementsByClassName("ret")[0];
  ctx = c.getContext("2d");
  ctx.drawImage(img, 35 * vw, 30 * vh, 30 * vw, 36 * vh, 0, 0, 25 * vw, 30 * vh);
  // ctx.drawImage(img, 25 * vw, 12 * vh, 30 * vw, 36 * vh, 1*vw, 1*vh, 16 * vw, 16 * vh);
  ctx.clearRect(1 * vw, 1 * vw, 15.4 * vw, 14 * vh);
}
tick = 0; cs = -1;
pid = -1; p = [], d = [];
function runHorse() {
  if (tick == 99999) tick = 0;
  p[0] = document.getElementsByClassName("p1")[0];
  p[1] = document.getElementsByClassName("p2")[0];
  p[2] = document.getElementsByClassName("p3")[0];
  d[0] = document.getElementsByClassName("d1")[0];
  d[1] = document.getElementsByClassName("d2")[0];
  d[2] = document.getElementsByClassName("d3")[0];
  tb = document.getElementsByClassName("timebar")[0];
  cb = document.getElementsByClassName("cbar")[0];
  ret = document.getElementsByClassName("ret")[0];
  tick += 1;
  if (tick == 1) drawCanvas(p[0]);
  if (cs != -1) {
    tick += 9;
    if (tick % 10 < 10 && tick / 10 > 1) tick -= tick % 10;
  }
  m = tick / 100;
  pid = parseInt((m / 5) % 3);
  pid = (pid + 2) % 3;
  cb.style.width = m % 5 / 5 * 6 * vw + "px";
  if (m % 5 > 0 && m % 5 <= 1 && m / 5 >= 1) {
    p[pid].style.width = (1 - m % 5) * 70 + "vw";
    ret.style.opacity = 1 - m % 5;
    ret.style.transform = "rotate(" + 20 * (m % 5) + "deg)";
  }
  if (m % 5 == 1 && m > 5) {
    drawCanvas(p[parseInt(m / 5) % 3]);
    p[0].style["z-index"] = (getComputedStyle(p[0])["z-index"] + 1) % 3;
    p[1].style["z-index"] = (getComputedStyle(p[1])["z-index"] + 1) % 3;
    p[2].style["z-index"] = (getComputedStyle(p[2])["z-index"] + 1) % 3;
  }
  if (m % 5 > 1 && m % 5 <= 2 && m / 5 >= 1) {
    ret.style.opacity = m % 5 - 1;
    ret.style.transform = "rotate(-" + 20 * (2 - m % 5) + "deg)";
  }
  if (m % 5 == 0) {
    if (pid != -1) p[(pid + 1) % 3].style.width = "70vw";
    if (pid == cs) cs = -1;
    tb.style.left = (m / 5) % 3 * 6 + "vw";
    // d[pid].style["background-color"] = "#dbdac9";
    // d[(m / 5) % 3].style["background-color"] = "#fce26b";
  }
}
setInterval(runHorse, 10);
function chorse(id) {
  if (pid == id) return;
  cs = id;
}
window.onload = function () {
  sin = document.getElementsByClassName("sin")[0];
  sin.onkeydown = function (event) {
    if (event.keyCode == 13) {
      search();
    }
  };
};
window.onscroll = function () {
  sbar = document.getElementsByClassName("sbar")[0];
  simg = document.getElementsByClassName("simg")[0];
  horse = document.getElementsByClassName("horse")[0];
  sbarTop = sbar.getBoundingClientRect().top;
  simgTop = simg.getBoundingClientRect().top;
  horseTop = horse.getBoundingClientRect().top;
  if (simgTop > - 30 * vh) {
    sbar.style.top = "unset";
    sbar.style.position = "absolute";
    sbar.style["z-index"] = "unset";
  }
  else if (sbarTop < 10 * vh) {
    sbar.style.top = "10vh";
    sbar.style.position = "fixed";
    sbar.style["z-index"] = 99;
  }
  if (horseTop > 23 * vh) {
    simg.style.top = "unset";
    simg.style.position = "relative";
    simg.style["z-index"] = "unset";
    horse.style["margin-top"] = "unset";
  }
  else if (simgTop < -70 * vh) {
    simg.style.top = "-70vh";
    simg.style.position = "fixed";
    simg.style["z-index"] = 99;
    horse.style["margin-top"] = "93vh";
  }
  test = document.getElementsByClassName("test")[0];
  cart = 20;
  //console.log(parseInt(test.getBoundingClientRect().top)/vh);
  if (test.getBoundingClientRect().top < cart * vh) {
    delta_top = 1 - (cart - parseInt(test.getBoundingClientRect().top) / vh) / (cart + 20);
    console.log(delta_top);
    if (delta_top < 0) delta_top = 0;
    s1 = document.getElementsByClassName("s1")[0];
    s2 = document.getElementsByClassName("s2")[0];
    s3 = document.getElementsByClassName("s3")[0];
    s3.style.transform = "translate(" + (25 - 39 * delta_top) + "vw," + 16 * delta_top + "vh) rotateY(" + 50 * delta_top + "deg)";
    s2.style.transform = "translate(" + 3 * delta_top + "vw," + -14 * delta_top + "vh) rotateY(" + -5 * delta_top + "deg)";
    s1.style.transform = "translate(" + (-25 + 46 * delta_top) + "vw," + 1 * delta_top + "vh) rotateY(" + -45 * delta_top + "deg)";
  }
}