pgchamberlin/hungryKid2.htm

## hungryKid2.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Hungry Kid!</title>
<style type="text/css">

body {
	font-family: arial, helvetica, sans;
	/* background: rgb(155, 170, 101);*/
}

#container, #footer {
	width: 1000px;
	height: 560px;
	margin: 50px auto;
	padding: 25px;
	background: #fff;
	position:relative;
}

#items li {
	list-style: none;
	display: inline;
	cursor: pointer;
}

#trashcan {
	width: 150px;
	height: 150px;
	position: absolute;
	left:0;
	top:240px;
	background: url('http://t1.gstatic.com/images?q=tbn:yt3FWBFZ-Trm5M:http://images.buycostumes.com/mgen/merchandiser/21259.jpg') center no-repeat;
	text-indent: 105px;
}

#footer {
	position: absolute;
	top: 450px;
}

#footer p {
	text-align: center;
	font-size: 8pt;
}

.nom {
	font-size: 26pt;
	font-weight: bold;
	line-height: 26pt;
	padding: 0;
	margin: 0;
}

#dialog {
	display: none;
	font-size: 32pt;
	text-align: center;
}

#drops {
	display: none;
}

</style>
</head>
<body>
<div id="container">
	<img src="http://pgch.co.uk/hungrykid/hungrykid.png" alt="Hungry Kid!" />
	<div id="trashcan"></div>
	<ul id="items">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<div id="dialog"></div>
	<div id="drops">0</div>
	<div id="footer">
		<p>This page was brought to you by the letters Y, U, I and <a href="http://twitter.com/pgchamberlin">pgchamberlin</a>.</p>
		<p>Apologies to the &copy; holders for borrowing all the images, please send take-down requests to the address <a href="http://pgch.co.uk">found here</a>.</p>
	</div>
</div>
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
//<![CDATA[

YUI().use('node','io','dd-delegate','dd-drop','anim',function(Y){

	var junkUrls = new Array(
		'http://t2.gstatic.com/images?q=tbn:HiN2JMRoDJ-h8M:http://www.naturalhealthhoodia.com/blog/wp-content/junk-food.jpg',
		'http://t2.gstatic.com/images?q=tbn:4PJ2bJkrhWGL1M:http://www.thegreenhead.com/imgs/junk-food-puzzle-1.jpg',
		'http://t3.gstatic.com/images?q=tbn:m_6X1-di0Gw6JM:http://www.watchingcriminalminds.com/wp-content/uploads/2008/09/junk-food.jpg',
		'http://t2.gstatic.com/images?q=tbn:0cSS_hIr4Z2xjM:http://wwwdelivery.superstock.com/WI/223/1555/PreviewComp/SuperStock_1555R-24034.jpg',
		'http://t3.gstatic.com/images?q=tbn:UhdHhjbv1zX1SM:http://www.fotosearch.com/bthumb/csk/CSK151/KS2701.jpg',
		'http://t0.gstatic.com/images?q=tbn:wZBAHSN_q-0IHM:http://www.dietsinreview.com/diet_column/wp-content/uploads/2008/10/junk-food-bouquet.jpg',
		'http://t3.gstatic.com/images?q=tbn:QEKn0vSz3qTMhM:http://topnews.in/health/files/junk-food.jpg',
		'http://t0.gstatic.com/images?q=tbn:MGPodrlUPPtcuM:http://cache.gawker.com/assets/images/gawker/2009/09/reeses-puffs-cereal-box.jpg',
		'http://t1.gstatic.com/images?q=tbn:dfyli60XqvnWmM:http://www.blackholeunicorn.com/wp-content/uploads/2009/10/hot_dog.jpg'
	);
	var numJunkUrls = junkUrls.length;

	var items = Y.all('#items li');
	items.each(function(e){
		e.insert('<img src="'+junkUrls[Math.floor(Math.random()*numJunkUrls)]+'" alt="Junk food" />', 1);
	});

	var moveKid = new Y.Anim({
		node: '#trashcan',
		to: {
				left: '900px'
		},
		duration: 6
	});

	moveKid.on('end', function() {

		Y.all('#items li').setStyle('display', 'none');

		var d = Y.one('#dialog');
		d.setStyle('display', 'block');

		var fed = 'You fed the kid... ';
		var numDrops = parseInt(Y.one('#drops').get('innerHTML'));
		var feedings = (numDrops > 1) ? fed + numDrops + ' times' : (numDrops > 0) ? fed + ' once!' : 'You didn\'t feed the kid!';

		d.setStyle('color', '#'+Math.floor(Math.random()*16777215).toString(16));

		d.set('innerHTML', feedings);

	});

	var del = new Y.DD.Delegate({
		cont: '#items',
		nodes: '#items li'
	});

	del.on('drag:end', function(e) {
		e.preventDefault();
		del.get('currentNode').setStyles({
			top: 0,
			left: 0
		});
	});

	var drop = Y.one('#trashcan').plug(Y.Plugin.Drop);

	drop.drop.on('drop:hit', function(e) {
		e.preventDefault();
		e.drag.get('node').setStyle('display', 'none');
		Y.one('#trashcan').insert('<p class="nom" style="color:#' + Math.floor(Math.random()*16777215).toString(16) + '">Nom! </p>');
		Y.one('#drops').set('innerHTML', parseInt(Y.one('#drops').get('innerHTML'))+1);
	});

	moveKid.run();

});

//]]>
</script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<title>Hungry Kid!</title>
	<style type="text/css">

	body {
	font-family: arial, helvetica, sans;
	/* background: rgb(155, 170, 101);*/
	}

	#container, #footer {
	width: 1000px;
	height: 560px;
	margin: 50px auto;
	padding: 25px;
	background: #fff;
	position:relative;
	}

	#items li {
	list-style: none;
	display: inline;
	cursor: pointer;
	}

	#trashcan {
	width: 150px;
	height: 150px;
	position: absolute;
	left:0;
	top:240px;
	background: url('http://t1.gstatic.com/images?q=tbn:yt3FWBFZ-Trm5M:http://images.buycostumes.com/mgen/merchandiser/21259.jpg') center no-repeat;
	text-indent: 105px;
	}

	#footer {
	position: absolute;
	top: 450px;
	}

	#footer p {
	text-align: center;
	font-size: 8pt;
	}

	.nom {
	font-size: 26pt;
	font-weight: bold;
	line-height: 26pt;
	padding: 0;
	margin: 0;
	}

	#dialog {
	display: none;
	font-size: 32pt;
	text-align: center;
	}

	#drops {
	display: none;
	}

	</style>
	</head>
	<body>
	<div id="container">
	<img src="http://pgch.co.uk/hungrykid/hungrykid.png" alt="Hungry Kid!" />
	<div id="trashcan"></div>
	<ul id="items">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
	<div id="dialog"></div>
	<div id="drops">0</div>
	<div id="footer">
	<p>This page was brought to you by the letters Y, U, I and <a href="http://twitter.com/pgchamberlin">pgchamberlin</a>.</p>
	<p>Apologies to the © holders for borrowing all the images, please send take-down requests to the address <a href="http://pgch.co.uk">found here</a>.</p>
	</div>
	</div>
	<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
	<script type="text/javascript">
	//<![CDATA[

	YUI().use('node','io','dd-delegate','dd-drop','anim',function(Y){

	var junkUrls = new Array(
	'http://t2.gstatic.com/images?q=tbn:HiN2JMRoDJ-h8M:http://www.naturalhealthhoodia.com/blog/wp-content/junk-food.jpg',
	'http://t2.gstatic.com/images?q=tbn:4PJ2bJkrhWGL1M:http://www.thegreenhead.com/imgs/junk-food-puzzle-1.jpg',
	'http://t3.gstatic.com/images?q=tbn:m_6X1-di0Gw6JM:http://www.watchingcriminalminds.com/wp-content/uploads/2008/09/junk-food.jpg',
	'http://t2.gstatic.com/images?q=tbn:0cSS_hIr4Z2xjM:http://wwwdelivery.superstock.com/WI/223/1555/PreviewComp/SuperStock_1555R-24034.jpg',
	'http://t3.gstatic.com/images?q=tbn:UhdHhjbv1zX1SM:http://www.fotosearch.com/bthumb/csk/CSK151/KS2701.jpg',
	'http://t0.gstatic.com/images?q=tbn:wZBAHSN_q-0IHM:http://www.dietsinreview.com/diet_column/wp-content/uploads/2008/10/junk-food-bouquet.jpg',
	'http://t3.gstatic.com/images?q=tbn:QEKn0vSz3qTMhM:http://topnews.in/health/files/junk-food.jpg',
	'http://t0.gstatic.com/images?q=tbn:MGPodrlUPPtcuM:http://cache.gawker.com/assets/images/gawker/2009/09/reeses-puffs-cereal-box.jpg',
	'http://t1.gstatic.com/images?q=tbn:dfyli60XqvnWmM:http://www.blackholeunicorn.com/wp-content/uploads/2009/10/hot_dog.jpg'
	);
	var numJunkUrls = junkUrls.length;

	var items = Y.all('#items li');
	items.each(function(e){
	e.insert('<img src="'+junkUrls[Math.floor(Math.random()*numJunkUrls)]+'" alt="Junk food" />', 1);
	});

	var moveKid = new Y.Anim({
	node: '#trashcan',
	to: {
	left: '900px'
	},
	duration: 6
	});

	moveKid.on('end', function() {

	Y.all('#items li').setStyle('display', 'none');

	var d = Y.one('#dialog');
	d.setStyle('display', 'block');

	var fed = 'You fed the kid... ';
	var numDrops = parseInt(Y.one('#drops').get('innerHTML'));
	var feedings = (numDrops > 1) ? fed + numDrops + ' times' : (numDrops > 0) ? fed + ' once!' : 'You didn\'t feed the kid!';

	d.setStyle('color', '#'+Math.floor(Math.random()*16777215).toString(16));

	d.set('innerHTML', feedings);

	});

	var del = new Y.DD.Delegate({
	cont: '#items',
	nodes: '#items li'
	});

	del.on('drag:end', function(e) {
	e.preventDefault();
	del.get('currentNode').setStyles({
	top: 0,
	left: 0
	});
	});

	var drop = Y.one('#trashcan').plug(Y.Plugin.Drop);

	drop.drop.on('drop:hit', function(e) {
	e.preventDefault();
	e.drag.get('node').setStyle('display', 'none');
	Y.one('#trashcan').insert('<p class="nom" style="color:#' + Math.floor(Math.random()*16777215).toString(16) + '">Nom! </p>');
	Y.one('#drops').set('innerHTML', parseInt(Y.one('#drops').get('innerHTML'))+1);
	});

	moveKid.run();

	});

	//]]>
	</script>
	</body>
	</html>