gpiancastelli/google-fade.js

## google-fade.js
/*
Functions used for the fade-in effect on Google's home page.

To reuse it, link this JavaScript file from your HTML source in a <script>
element; then, set the onmousemove attribute of the chosen element (e.g. <p>,
or <html> as Google did) to call the google.fade function.

<html onmousemove="google.fade()">

(Actually, Google setting is "google&&google.fade&&google.fade()". YMMV.)

You also need to change the i and h variables in the google.fade function to
the id and the [element, class] pairs of the elements you want to fade in,
respectively. Those elements must be initially styled with "opacity: 0;" in
your CSS file.

(C) 2009 Google, I guess. I still don't know anything about licensing terms.
*/

window.google = {};
google.time = function() { return (new Date).getTime() };

(function() {

var a = window.google.f = {};
a.f = 1; a.s = 1; a.a = (new Date).getTime();

function m(b, g, e, f) {
  var d, c = [], i = [];
  for (var h = 0, k; k = b[h++];) {
    var l = document.getElementById(k);
    if (l)
      c.push(l)
  }
  for (var h = 0, j; j = g[h++];) {
    var o = n(j[0], j[1]);
    while (d = o.pop())
      c.push(d)
  }
  while (d = c.pop())
    i.push([d, "opacity", e, f, 0, ""]);
  return i
};

function n(b, g) {
  var e = [];
  for (var f = document.getElementsByTagName(b), d = 0, c = f[d]; c = f[d++];)
    if (c.className == g)
      e.push(c);
  return e
};

google.fade = function(b) {
  b = b || window.event;
  var g = 1;
  // if you decide to associate the fade effect with a different event,
  // just change the expected string value corresponding to b.type
  if (b && b.type == "mousemove") {
    var e = b.clientX, f = b.clientY;
    g = a.x || a.y ? Math.abs(a.x - e) + Math.abs(a.y - f) : 0;
    a.x = e;
    a.y = f
  }
  var d = (new Date).getTime(), c = d - a.a;
  if (google.fx && g && c > 602)
    if (a.f) {
      a.f = 0;
      // i contains the ids of elements you want to fade-in
      // h contains [element, class] pairs for elements you want to fade-in
      var i = ["fctr", "ghead", "pmocntr", "sbl", "tba", "tbe"], h = [["span", "fade"], ["div", "gbh"]];
      google.fx.animate(602, m(i, h, 0, 1))
    }
};

// Now suppose you also want a corresponding fade-out effect. A possible
// google.unfade function is very similar to google.fade, except the last 'if'
// statement. There, the logic must be inverted; also, m needs to be called
// with inverted opacity extremes.
//
// For example:
//
// google.unfade = function(b) {
//   // ...
//   if (...)
//     if (!a.f) {
//       a.f = 1;
//       var i = ..., h = ...;
//       google.fx.animate(602, m(i, h, 1, 0))
//     }
//  };
//
// Of course, you may want to modify google.fade in order to avoid code
// duplication. This example is just intended to help you understand a
// little how things work.

})();

(function() {

var fn = 0, g = [];

google.fx = {};

google.fx.linear = function(a) { return a };

google.fx.animate = function(a, d, e) {
  for (var c = 0, b; b = d[c++];) {
    b[5] = b[5] == null ? "px" : b[5];
    b[4] = b[4] || google.fx.linear;
    h(b[0], b[1], b[2] + b[5])
  }
  g.push({b : a, a : e, d : google.time(), c : d});
  fn = fn || window.setInterval(i, 15)
};

function i() {
  for (var a = 0, d; d = g[a++];)
    j(d) || g.splice(--a, 1);
  if (!g.length) {
    window.clearInterval(fn);
    fn = 0
  }
};

function j(a) {
  var d = google.time() - a.d;
  if (d >= a.b) {
    for (var e = 0, c; c = a.c[e++];)
      h(c[0], c[1], c[3] + c[5]);
    a.a && a.a();
    return 0
  } else {
    for (var e = 0, c; c = a.c[e++];) {
      var b = c[2] + (c[3] - c[2]) * c[4](d / a.b);
      if (c[5] == "px")
        b = Math.round(b);
      h(c[0], c[1], b + c[5])
    }
    return 1
  }
};

function h(a) {
  for( var d = 1; d < arguments.length; d += 2) {
    var e = arguments[d], c = arguments[d + 1], b = a.style;
    if (b && e in b)
      b[e] = c;
    else if (e in a)
      a[e] = c;
  }
  return a
};

})();
	/*
	Functions used for the fade-in effect on Google's home page.

	To reuse it, link this JavaScript file from your HTML source in a <script>
	element; then, set the onmousemove attribute of the chosen element (e.g. <p>,
	or <html> as Google did) to call the google.fade function.

	<html onmousemove="google.fade()">

	(Actually, Google setting is "google&&google.fade&&google.fade()". YMMV.)

	You also need to change the i and h variables in the google.fade function to
	the id and the [element, class] pairs of the elements you want to fade in,
	respectively. Those elements must be initially styled with "opacity: 0;" in
	your CSS file.

	(C) 2009 Google, I guess. I still don't know anything about licensing terms.
	*/

	window.google = {};
	google.time = function() { return (new Date).getTime() };

	(function() {

	var a = window.google.f = {};
	a.f = 1; a.s = 1; a.a = (new Date).getTime();

	function m(b, g, e, f) {
	var d, c = [], i = [];
	for (var h = 0, k; k = b[h++];) {
	var l = document.getElementById(k);
	if (l)
	c.push(l)
	}
	for (var h = 0, j; j = g[h++];) {
	var o = n(j[0], j[1]);
	while (d = o.pop())
	c.push(d)
	}
	while (d = c.pop())
	i.push([d, "opacity", e, f, 0, ""]);
	return i
	};

	function n(b, g) {
	var e = [];
	for (var f = document.getElementsByTagName(b), d = 0, c = f[d]; c = f[d++];)
	if (c.className == g)
	e.push(c);
	return e
	};

	google.fade = function(b) {
	b = b \|\| window.event;
	var g = 1;
	// if you decide to associate the fade effect with a different event,
	// just change the expected string value corresponding to b.type
	if (b && b.type == "mousemove") {
	var e = b.clientX, f = b.clientY;
	g = a.x \|\| a.y ? Math.abs(a.x - e) + Math.abs(a.y - f) : 0;
	a.x = e;
	a.y = f
	}
	var d = (new Date).getTime(), c = d - a.a;
	if (google.fx && g && c > 602)
	if (a.f) {
	a.f = 0;
	// i contains the ids of elements you want to fade-in
	// h contains [element, class] pairs for elements you want to fade-in
	var i = ["fctr", "ghead", "pmocntr", "sbl", "tba", "tbe"], h = [["span", "fade"], ["div", "gbh"]];
	google.fx.animate(602, m(i, h, 0, 1))
	}
	};

	// Now suppose you also want a corresponding fade-out effect. A possible
	// google.unfade function is very similar to google.fade, except the last 'if'
	// statement. There, the logic must be inverted; also, m needs to be called
	// with inverted opacity extremes.
	//
	// For example:
	//
	// google.unfade = function(b) {
	// // ...
	// if (...)
	// if (!a.f) {
	// a.f = 1;
	// var i = ..., h = ...;
	// google.fx.animate(602, m(i, h, 1, 0))
	// }
	// };
	//
	// Of course, you may want to modify google.fade in order to avoid code
	// duplication. This example is just intended to help you understand a
	// little how things work.

	})();

	(function() {

	var fn = 0, g = [];

	google.fx = {};

	google.fx.linear = function(a) { return a };

	google.fx.animate = function(a, d, e) {
	for (var c = 0, b; b = d[c++];) {
	b[5] = b[5] == null ? "px" : b[5];
	b[4] = b[4] \|\| google.fx.linear;
	h(b[0], b[1], b[2] + b[5])
	}
	g.push({b : a, a : e, d : google.time(), c : d});
	fn = fn \|\| window.setInterval(i, 15)
	};

	function i() {
	for (var a = 0, d; d = g[a++];)
	j(d) \|\| g.splice(--a, 1);
	if (!g.length) {
	window.clearInterval(fn);
	fn = 0
	}
	};

	function j(a) {
	var d = google.time() - a.d;
	if (d >= a.b) {
	for (var e = 0, c; c = a.c[e++];)
	h(c[0], c[1], c[3] + c[5]);
	a.a && a.a();
	return 0
	} else {
	for (var e = 0, c; c = a.c[e++];) {
	var b = c[2] + (c[3] - c[2]) * c[4](d / a.b);
	if (c[5] == "px")
	b = Math.round(b);
	h(c[0], c[1], b + c[5])
	}
	return 1
	}
	};

	function h(a) {
	for( var d = 1; d < arguments.length; d += 2) {
	var e = arguments[d], c = arguments[d + 1], b = a.style;
	if (b && e in b)
	b[e] = c;
	else if (e in a)
	a[e] = c;
	}
	return a
	};

	})();