ekashida/home update

## home update
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Eugene Kashida</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css">

<style type="text/css">
body {
  overflow:hidden;
  text-align:center;
}
h1 {
  font-weight:bold;
  font-size:197%;
  margin-top:100px;
}
h1 span {
  padding:0 3px;
}

.yui3-js-enabled h1,
.yui3-js-enabled h6 {
  text-indent:-9999em;
}
.yui3-js-enabled.show h1,
.yui3-js-enabled.show h6 {
  text-indent:0;
}

/* default color scheme */
html { background:#635B73; }
h1   { color:#F18FB6;      }
h6   { color:#FFF;         }
</style>

</head>

<body>

<h1>hello world</h1>
<h6>(click anywhere)</h6>

<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use('anim','node-base', function (Y) {

    var html = Y.one('html'),
        h1   = Y.one('h1'),
        h6   = Y.one('h6');

    var chars = h1.get('innerHTML').split(''),
        frag  = document.createDocumentFragment(),
        span  = document.createElement('span');

    // document fragment prevents reflow
    for (var i = 0, len = chars.length; i < len; i++) {
        span.innerHTML = chars[i];
        frag.appendChild(span.cloneNode(true));
    }

    // replace h1 content
    h1.set('innerHTML','');
    h1.appendChild(frag);

    // show when finished to avoid any flicker
    html.addClass('show');

    html.on('click', colorize); // repaint colorscheme on click

    Y.all('h1 span').each(function (node) {
        var anim = new Y.Anim({
            node: node,
            duration: 1.5,
            easing: Y.Easing.easeOut
        });

        html.on('click', function (e) {
            var x = e.pageX + node.getX() - Y.one('span:first-child').getX(), // relative x coordinate
                y = e.pageY;

            anim.set('to', {
                curve: random_curve([x, y], node)
            });
            anim.run();

            if (h6.inDoc()) { h6.remove(); }
        });
    });


    // FUNCTION DEFINITIONS

    // alternates output between (generally) light/dark colors
    function rgb_alternator () {
        var shift  = arguments.callee.shift,
            middle = arguments.callee.middle,
            range  = middle + shift, // rgb range: 0-255
            floor  = Math.floor,
            random = Math.random;

        arguments.callee.shift = shift ? 0 : middle; // toggle

        return [
            floor(random() * range),
            floor(random() * range),
            floor(random() * range)
        ];
    }
    rgb_alternator.shift  = 0;       // init toggle state
    rgb_alternator.middle = 255 / 2; // rgb range midpoint

    // non-scientific check for sufficient contrast
    function has_enough_contrast (c1, c2) {
        var threshold = 250, // arbitrary
            abs = Math.abs,
            r = abs(c1[0] - c2[0]),
            g = abs(c1[1] - c2[1]),
            b = abs(c1[2] - c2[2]),
            distance = r + g + b;

        return distance < threshold;
    }

    // repaint a new colorscheme
    function colorize () {
        var bg = rgb_alternator(),
            fg = rgb_alternator();

        while (!has_enough_contrast(bg, fg)) {
            fg = rgb_alternator();
        }

        var bg_rgb = 'rgb(' + bg.join(',') + ')',
            fg_rgb = 'rgb(' + fg.join(',') + ')';

        html.setStyle('backgroundColor', bg_rgb);
        h1.setStyle('color', fg_rgb);
    }

    // generate random points
    function random_curve (end, node) {
        var num_points = 2,
            points     = [end],
            winWidth   = node.get('winWidth'),
            winHeight  = node.get('winHeight'),
            floor      = Math.floor,
            random     = Math.random;

        for (var i = 0; i < num_points; i++) {
            points.unshift([
                floor(random() * winWidth),
                floor(random() * winHeight)
            ]);
        }

        return points;
    };

});

</script>

</body>

</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en-US">

	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Eugene Kashida</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css">

	<style type="text/css">
	body {
	overflow:hidden;
	text-align:center;
	}
	h1 {
	font-weight:bold;
	font-size:197%;
	margin-top:100px;
	}
	h1 span {
	padding:0 3px;
	}

	.yui3-js-enabled h1,
	.yui3-js-enabled h6 {
	text-indent:-9999em;
	}
	.yui3-js-enabled.show h1,
	.yui3-js-enabled.show h6 {
	text-indent:0;
	}

	/* default color scheme */
	html { background:#635B73; }
	h1 { color:#F18FB6; }
	h6 { color:#FFF; }
	</style>

	</head>

	<body>

	<h1>hello world</h1>
	<h6>(click anywhere)</h6>

	<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
	<script type="text/javascript">
	YUI().use('anim','node-base', function (Y) {

	var html = Y.one('html'),
	h1 = Y.one('h1'),
	h6 = Y.one('h6');

	var chars = h1.get('innerHTML').split(''),
	frag = document.createDocumentFragment(),
	span = document.createElement('span');

	// document fragment prevents reflow
	for (var i = 0, len = chars.length; i < len; i++) {
	span.innerHTML = chars[i];
	frag.appendChild(span.cloneNode(true));
	}

	// replace h1 content
	h1.set('innerHTML','');
	h1.appendChild(frag);

	// show when finished to avoid any flicker
	html.addClass('show');

	html.on('click', colorize); // repaint colorscheme on click

	Y.all('h1 span').each(function (node) {
	var anim = new Y.Anim({
	node: node,
	duration: 1.5,
	easing: Y.Easing.easeOut
	});

	html.on('click', function (e) {
	var x = e.pageX + node.getX() - Y.one('span:first-child').getX(), // relative x coordinate
	y = e.pageY;

	anim.set('to', {
	curve: random_curve([x, y], node)
	});
	anim.run();

	if (h6.inDoc()) { h6.remove(); }
	});
	});


	// FUNCTION DEFINITIONS

	// alternates output between (generally) light/dark colors
	function rgb_alternator () {
	var shift = arguments.callee.shift,
	middle = arguments.callee.middle,
	range = middle + shift, // rgb range: 0-255
	floor = Math.floor,
	random = Math.random;

	arguments.callee.shift = shift ? 0 : middle; // toggle

	return [
	floor(random() * range),
	floor(random() * range),
	floor(random() * range)
	];
	}
	rgb_alternator.shift = 0; // init toggle state
	rgb_alternator.middle = 255 / 2; // rgb range midpoint

	// non-scientific check for sufficient contrast
	function has_enough_contrast (c1, c2) {
	var threshold = 250, // arbitrary
	abs = Math.abs,
	r = abs(c1[0] - c2[0]),
	g = abs(c1[1] - c2[1]),
	b = abs(c1[2] - c2[2]),
	distance = r + g + b;

	return distance < threshold;
	}

	// repaint a new colorscheme
	function colorize () {
	var bg = rgb_alternator(),
	fg = rgb_alternator();

	while (!has_enough_contrast(bg, fg)) {
	fg = rgb_alternator();
	}

	var bg_rgb = 'rgb(' + bg.join(',') + ')',
	fg_rgb = 'rgb(' + fg.join(',') + ')';

	html.setStyle('backgroundColor', bg_rgb);
	h1.setStyle('color', fg_rgb);
	}

	// generate random points
	function random_curve (end, node) {
	var num_points = 2,
	points = [end],
	winWidth = node.get('winWidth'),
	winHeight = node.get('winHeight'),
	floor = Math.floor,
	random = Math.random;

	for (var i = 0; i < num_points; i++) {
	points.unshift([
	floor(random() * winWidth),
	floor(random() * winHeight)
	]);
	}

	return points;
	};

	});

	</script>

	</body>

	</html>