jeremyckahn/gist:948381

## gistfile1.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>kapi</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Jeremy Kahn">
	<!-- Date: 2010-12-07 -->

	<script src="../js/kapi.js"></script>
	<script src="../js/jquery.js"></script>
	<script src="../js/shapes.js"></script>

	<style type="text/css">
		canvas{
			float: left;
		}

		ul{
			float: left;
		}
	</style>
</head>
<body>

	<canvas id="myCanvas">Plz stop using IE.</canvas>

	<ul>
		<li id="currentFrame">Current frame <span></span></li>
		<li><a id="play" href="javascript:void(0);">Play</a></li>
		<li><a id="pause" href="javascript:void(0);">Pause</a></li>
		<li><a id="stop" href="javascript:void(0);">Stop</a></li>
	</ul>

	<script>
		/*function image()
		{
		    var ctx = document.getElementById('myCanvas').getContext('2d');
		    var img = new Image();
		    img.onload = function()
			{
		      ctx.drawImage
			  (
				img,
				img.x || 0,
				img.y || 0,
				153,
				140
			   );
		    }
		    img.src = 'http://www.cchangeinc.com/dna/images/placeholder.jpg';
		  }*/

		var image = {
			setup: function () {
				this.img = new Image();
				this.img.src = 'http://www.cchangeinc.com/dna/images/placeholder.jpg';
			},

			draw: function (ctx, kapi) {
				if (!this.prototype.img.complete) {
					return;
				}

				ctx.drawImage
				  (
					this.prototype.img,
					this.x || 0,
					this.y || 0,
					153,
					140
				   );
			}
		}
	</script>
	<script type="text/javascript">

		// Note:  jQuery is here just to make the demo quicker to make.
		// Kapi does not use jQuery.
		$('#play').click(function(ev){
			ev.preventDefault();
			demo.play();
		});

		$('#pause').click(function(ev){
			ev.preventDefault();
			demo.pause();
		});

		$('#stop').click(function(ev){
			ev.preventDefault();
			demo.stop();
		});

		var demo = kapi(document.getElementById('myCanvas'),
			// params
			{
				fps : 20,
				styles : {
					'height': '300px',
					'width': 500,
					'background': '#000'
				},
				autoclear: true,
				clearOnStop: true
			},
			// events
			{
				enterFrame: function() {
					currFrameOutput.html(this._currentFrame);
				}
			}),
			image1 = demo.add(image, {
				name : 'myImage',
				/*x : 0,
				y : 0,*/
				radius : 50,
				color : '#0f0',
				easing : 'easeInOutSine'
			}),

			currFrameOutput = $('#currentFrame span');


		image1.keyframe('0.5', {
				x : 15
			}).keyframe('2s', {
				x : 300,
				y : 30
			}).keyframe('3500ms', {
				y : 250,
				color: '#654321'
			});

		demo.play();

		console.log('Logging the kapi instance object');
		console.dir(demo);
		console.log('Logging the kapi debug data');
		console.dir(demo._debug());

	</script>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>kapi</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Jeremy Kahn">
	<!-- Date: 2010-12-07 -->

	<script src="../js/kapi.js"></script>
	<script src="../js/jquery.js"></script>
	<script src="../js/shapes.js"></script>

	<style type="text/css">
	canvas{
	float: left;
	}

	ul{
	float: left;
	}
	</style>
	</head>
	<body>

	<canvas id="myCanvas">Plz stop using IE.</canvas>

	<ul>
	<li id="currentFrame">Current frame <span></span></li>
	<li><a id="play" href="javascript:void(0);">Play</a></li>
	<li><a id="pause" href="javascript:void(0);">Pause</a></li>
	<li><a id="stop" href="javascript:void(0);">Stop</a></li>
	</ul>

	<script>
	/*function image()
	{
	var ctx = document.getElementById('myCanvas').getContext('2d');
	var img = new Image();
	img.onload = function()
	{
	ctx.drawImage
	(
	img,
	img.x \|\| 0,
	img.y \|\| 0,
	153,
	140
	);
	}
	img.src = 'http://www.cchangeinc.com/dna/images/placeholder.jpg';
	}*/

	var image = {
	setup: function () {
	this.img = new Image();
	this.img.src = 'http://www.cchangeinc.com/dna/images/placeholder.jpg';
	},

	draw: function (ctx, kapi) {
	if (!this.prototype.img.complete) {
	return;
	}

	ctx.drawImage
	(
	this.prototype.img,
	this.x \|\| 0,
	this.y \|\| 0,
	153,
	140
	);
	}
	}
	</script>
	<script type="text/javascript">

	// Note: jQuery is here just to make the demo quicker to make.
	// Kapi does not use jQuery.
	$('#play').click(function(ev){
	ev.preventDefault();
	demo.play();
	});

	$('#pause').click(function(ev){
	ev.preventDefault();
	demo.pause();
	});

	$('#stop').click(function(ev){
	ev.preventDefault();
	demo.stop();
	});

	var demo = kapi(document.getElementById('myCanvas'),
	// params
	{
	fps : 20,
	styles : {
	'height': '300px',
	'width': 500,
	'background': '#000'
	},
	autoclear: true,
	clearOnStop: true
	},
	// events
	{
	enterFrame: function() {
	currFrameOutput.html(this._currentFrame);
	}
	}),
	image1 = demo.add(image, {
	name : 'myImage',
	/*x : 0,
	y : 0,*/
	radius : 50,
	color : '#0f0',
	easing : 'easeInOutSine'
	}),

	currFrameOutput = $('#currentFrame span');


	image1.keyframe('0.5', {
	x : 15
	}).keyframe('2s', {
	x : 300,
	y : 30
	}).keyframe('3500ms', {
	y : 250,
	color: '#654321'
	});

	demo.play();

	console.log('Logging the kapi instance object');
	console.dir(demo);
	console.log('Logging the kapi debug data');
	console.dir(demo._debug());

	</script>

	</body>
	</html>