var DJ = DJ || {};

DJ.animation = [
	{type: 'text', text: 'Hello', css: {fontSize: 240, display: 'none', position: 'absolute', top: 30, left: 585}, effects: [{time: 1000, type: 'fadeIn', duration: 500}]},
	{type: 'group', css: {top: 260, left: 468, position: 'absolute'}, effects: [{time: 5000, type: 'animate', css: {left: 40}, duration: 500}, {time: 7000, type: 'animate', css: {left: -395}, duration: 500}], contents: [
		{type: 'text', text: 'I\'m David Johnstone.', css: {display: 'none', float: 'left'}, effects: [{time: 3000, type: 'fadeIn', duration: 500}]},
		{type: 'text', text: 'This is my website.', css: {display: 'none', float: 'left', marginLeft: 12}, effects: [{time: 5000, type: 'fadeIn', duration: 500}]},
		{type: 'text', text: 'I do lots of things…', css: {display: 'none', float: 'left', marginLeft: 12}, effects: [{time: 7000, type: 'fadeIn', duration: 500}]}
	]},
	{type: 'camera', effects: [{time: 8500, type: 'animate', css: {top: -400}, duration: 500}]},
	{type: 'zerotime', time: 9000},
	{type: 'text', text: 'I make nice things out of ones and zeroes', css: {position: 'absolute', top: 500, left: 20}},
	{type: 'group', css: {position: 'absolute', top: 650, textAlign: 'center', width: 960, fontSize: 60}, contents: [
		{type: 'text', text: '(Like this website)', css: {display: 'none'}, effects: [{time: 500, type: 'fadeIn', duration: 500}, {time: 2000, type: 'fadeOut', duration: 500}]},
		{type: 'text', text: '(And this "video")', css: {display: 'none'}, effects: [{time: 2500, type: 'fadeIn', duration: 500}, {time: 4000, type: 'fadeOut', duration: 500}]},
		{type: 'text', text: '(See more <a href="/things-i-have-made" target="_blank">things I\'ve made</a>)', css: {display: 'none'}, effects: [{time: 4500, type: 'fadeIn', duration: 500}]}
	]},
	{type: 'camera', effects: [{time: 8500, type: 'animate', css: {left: 960}, duration: 500}]},
	{type: 'zerotime', time: 9000},
	{type: 'image', source: '/static/front-page-image-1.jpg', css: {top: 400, left: -960, position: 'absolute', display: 'block'}, effects: []},
	{type: 'image', source: '/static/front-page-image-2.jpg', css: {top: 800, left: -960, position: 'absolute', display: 'block'}, effects: []},
	{type: 'image', source: '/static/front-page-image-3.jpg', css: {top: 1200, left: -960, position: 'absolute', display: 'block'}, effects: []},
	{type: 'image', source: '/static/front-page-image-4.jpg', css: {top: 1600, left: -960, position: 'absolute', display: 'block'}, effects: []},
	{type: 'image', source: '/static/front-page-image-5.jpg', css: {top: 2000, left: -960, position: 'absolute', display: 'block'}, effects: []},
	{type: 'image', source: '/static/front-page-image-6.jpg', css: {top: 2400, left: -960, position: 'absolute', display: 'block'}, effects: []},
	{type: 'text', text: 'I take photos', css: {position: 'absolute', top: 698, left: -947}, effects: [{time: 16000, type: 'fadeOut', duration: 500}]},
	{type: 'camera', effects: [{time: 3000, type: 'animate', css: {top: -800}, duration: 500}]},
	{type: 'camera', effects: [{time: 6000, type: 'animate', css: {top: -1200}, duration: 500}]},
	{type: 'camera', effects: [{time: 9000, type: 'animate', css: {top: -1600}, duration: 500}]},
	{type: 'camera', effects: [{time: 12000, type: 'animate', css: {top: -2000}, duration: 500}]},
	{type: 'camera', effects: [{time: 15000, type: 'animate', css: {top: -2400}, duration: 500}]},
	{type: 'camera', effects: [{time: 18000, type: 'animate', css: {left: 0}, duration: 500}]},
	{type: 'text', text: 'Find more photos on <a href="http://www.facebook.com/davidjohnstone" target="_blank">Facebook</a>', css: {position: 'absolute', top: 2500, left: 100}},
	{type: 'text', text: '(Some day I might add photo galleries here)', css: {position: 'absolute', top: 2650, left: 190, fontSize: 60, display: 'none'}, effects: [{time: 19500, type: 'fadeIn', duration: 500}]},
	{type: 'camera', effects: [{time: 23000, type: 'animate', css: {top: -2000}, duration: 500}]},
	{type: 'zerotime', time: 23500},
	{type: 'text', text: 'I also&hellip;', css: {position: 'absolute', top: 2155, left: 377}},
	{type: 'text', text: 'find too many things interesting', css: {position: 'absolute', top: 2330, left: 272, display: 'none', fontSize: 60}, effects: [{time: 1500, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'ride bikes', css: {position: 'absolute', top: 2070, left: 713, display: 'none', fontSize: 60}, effects: [{time: 1750, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'write blog posts about random things', css: {position: 'absolute', top: 2070, left: 31, display: 'none', fontSize: 60}, effects: [{time: 2000, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'juggle', css: {position: 'absolute', top: 2135, left: 817, display: 'none', fontSize: 60}, effects: [{time: 2250, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'ride a unicycle', css: {position: 'absolute', top: 2135, left: 73, display: 'none', fontSize: 60}, effects: [{time: 2500, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'am Christian', css: {position: 'absolute', top: 2135, left: 553, display: 'none', fontSize: 60}, effects: [{time: 2750, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'love exercise', css: {position: 'absolute', top: 2200, left: 111, display: 'none', fontSize: 60}, effects: [{time: 3000, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'have too many ideas for things I want to make', css: {position: 'absolute', top: 2265, left: 132, display: 'none', fontSize: 60}, effects: [{time: 3250, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'like nice typography', css: {position: 'absolute', top: 2200, left: 596, display: 'none', fontSize: 60}, effects: [{time: 3500, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'appreciate good design', css: {position: 'absolute', top: 2005, left: 116, display: 'none', fontSize: 60}, effects: [{time: 3750, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'like JavaScript', css: {position: 'absolute', top: 2005, left: 547, display: 'none', fontSize: 60}, effects: [{time: 4000, type: 'fadeIn', duration: 500}]},
	{type: 'zerotime', time: 6000},
	{type: 'text', text: '', css: {position: 'absolute', top: 2000, left: 0, width: 960, height: 400, display: 'none', backgroundColor: '#000'}, effects: [{time: 0, type: 'fadeIn', duration: 1000}]},
	{type: 'text', text: 'I don\'t have anything else to say here', css: {position: 'absolute', top: 2100, left: 90, display: 'none', fontSize: 60, color: '#fff'}, effects: [{time: 1500, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'but the technology I\'m using to make this is pretty neat', css: {position: 'absolute', top: 2165, left: 22, display: 'none', fontSize: 60, color: '#fff'}, effects: [{time: 3000, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: 'so you can watch this again&hellip;', css: {position: 'absolute', top: 2230, left: 390, display: 'none', fontSize: 60, color: '#fff'}, effects: [{time: 4500, type: 'fadeIn', duration: 500}]},
	{type: 'text', text: '', css: {position: 'absolute', top: 2000, left: 0, width: 960, height: 400, display: 'none', backgroundColor: '#fff'}, effects: [{time: 7000, type: 'fadeIn', duration: 1000}]},
	{type: 'restart', time: 9000}
	
];

DJ.addRules = function(canvas, animation, timeoffset) {
	if (timeoffset === undefined) {
		timeoffset = 0;
	}
	for (var i = 0, length = animation.length; i < length; i++) {
		var rule = animation[i];
		var element;
		if (rule.type == 'text') {
			element = $('<div>' + rule.text + '</div>').css(rule.css).appendTo(canvas);
		} else if (rule.type == 'image') {
			element = $('<img src="' + rule.source + '"/>').css(rule.css).appendTo(canvas);
		} else if (rule.type == 'group') {
			element = $('<div></div>').css(rule.css).appendTo(canvas);
			DJ.addRules(element, rule.contents, timeoffset);
		} else if (rule.type == 'camera') {
			element = canvas;
		} else if (rule.type == 'zerotime') {
			timeoffset += rule.time;
		} else if (rule.type == 'restart') {
			return {restart: true, time: timeoffset + rule.time};
		}
		if (rule.effects) {
			for (var j = 0, jlen = rule.effects.length; j < jlen; j++) {
				var effect = rule.effects[j];
				var fn = function(el, ef) { // This is needed for the timeout to work (want to use current element).
					return function() {
						if (ef.type == 'fadeIn') {
							el.fadeIn(ef.duration);
						} else if (ef.type == 'fadeOut') {
							el.fadeOut(ef.duration);
						} else if (ef.type == 'animate') {
							el.animate(ef.css, ef.duration);
						} else if (ef.type == 'css') {
							el.css(ef.css);
						}
					}
				}(element, effect);
				setTimeout(fn, timeoffset + effect.time);
			}
		}
	}
	return {restart: false};
};

DJ.playerInner = function(canvas, animation) {
	canvas.empty();
	canvas.css({top: 0, left: 0});
	var result = DJ.addRules(canvas, animation, 0);
	if (result.restart) {
		setTimeout(function() { DJ.playerInner(canvas, animation); }, result.time);
	}
}

DJ.player = function(frame, css) {
	frame.css(css).css({position: 'relative', overflow: 'hidden'});
	DJ.playerInner($('<div></div>').css({position: 'absolute', width: 2000}).appendTo(frame), DJ.animation);
}