index.html

<html>
<head>
	<meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/codemirror/codemirror.css">
	<link rel="stylesheet" href="assets/app/site.css">
	<title>Functional Programming in Javascript</title>
	<script type="text/javascript">
		// Adds the implementation for Array.prototype.concatAll()
		function defineConcatAll() {
			Array.prototype.concatAll = function () {
				var results = [];

				this.forEach(function(subArray) {
					results.push.apply(results, subArray);
				});

				return results;
			};
		}

		/**
		 * Add the implementation for Array.prototype.concatMap()
		 */
		function defineConcatMap() {
			Array.prototype.concatMap = function(fnc) {
				return this.
					map(function (e) {
						return fnc(e);
					}).
					// apply the concatAll function to flatten the two-dimensional array
					concatAll();
			};
		}

		/**
		 * This function will be executed at the begining of each verifier function
		 */
		function preVerifierHook() {
			// Add helpers to prevent 'undefined is not a function' like errors
			defineConcatAll();
			defineConcatMap();
		}
	</script>
</head>
<body>
<div class="content">
	<div class="grab-answers">
		<p>This is an interactive learning course with exercises you fill out right in the browser. <b>If you just want to browse the content click the button below</b>:</p>
		<button class="green-button show-answers">Show all the answers so I can just browse.</button>
	</div>
	<h1 class="center">Functional Programming in Javascript</h1>

	<p>This is a series of interactive exercises for learning Microsoft's Reactive Extensions (Rx) Library for Javascript.
		So why is the title "Functional Programming in Javascript"? Well it turns out that the key to learning Rx is
		training yourself to use functional programming to manipulate collections.  Functional programming provides
		developers with the tools to abstract common collection operations into reusable, composable building blocks.
		You'll be surprised to learn that most of the operations you perform on collections can be accomplished with
		<b>five simple functions</b> (some native to JavaScript and some included in the
		<a href="https://github.com/Reactive-Extensions/RxJS">RxJS library</a>):
	</p>
	<ol>
		<li>map</li>
		<li>filter</li>
		<li>concatAll</li>
		<li>reduce</li>
		<li>zip</li>
	</ol>

	<p>Here's my promise to you: if you learn these 5 functions your code will become shorter, more self-descriptive,
		and more durable. Also, for reasons that might not be obvious right now, you'll learn that these five functions
		hold the key to simplifying asynchronous programming. Once you've finished this tutorial you'll also have all
		the tools you need to easily avoid race conditions, propagate and handle asynchronous errors, and sequence
		events and AJAX requests. In short,
		<b>these 5 functions will probably be the most powerful, flexible, and useful functions you'll ever learn.</b>
	</p>

	<h2>Finishing the Interactive Exercises</h2>

	<p>This isn't just a tutorial, it's a
		<b>series of interactive exercises that you can fill out right in your browser!</b> It's easy to finish the
		exercises. Just edit the code and press "Run." If the code works, a new exercise will appear below. Otherwise an
		error will appear.
	</p>
	<p><b>Note:</b> Use the "F4" key to toggle full screen mode for each editor.</p>

	<p>This tutorial may have bugs, so if you get into a weird state or you're sure you've got the right answer but
		can't move on, just refresh your browser. If you're using a modern browser, and if you're here I assume you are,
		the state of your exercises will be saved. If you want, you can also
		<a href="javascript:localStorage.newState = ''; document.location.reload();">restart the lab.</a></p>

	<p>This tutorial is on
		<a href="https://github.com/ReactiveX/learnrx">GitHub</a>, and is asymptotically approaching
		completion. If you'd like to add an exercise, clarify a problem description, or fix a bug feel free to
		<a href="https://github.com/ReactiveX/learnrx/fork">fork</a> and send us a pull request. We'll
		try and fit user-contributed exercises into a narrative.
	</p>
	<div class="grab-answers">
		<p>Your answers will be saved in local storage. Use the buttons below if you want to transfer them to another machine:</p>
		<button class="green-button get-answer">Get Answers as JSON</button>
		<button class="blue-button set-answer">Set JSON Answers</button>
	</div>

	<h2>Working with Arrays</h2>

	<p>The Array is Javascript's only collection type. Arrays are everywhere. We're going to add the five functions to
		the Array type, and in the process make it much more powerful and useful. As a matter of fact, Array already has
		the map, filter, and reduce functions! However we're going to reimplement these functions as a learning
		exercise.</p>

	<p>This section will follow a pattern. First we'll solve problems the way you probably learned in school, or on your
		own by reading other people's code. In other words, we'll transform collections into new collections using loops
		and statements. Then we'll implement one of the five functions, and then use it to solve the same problem again
		<i>without</i> the loop. Once we've learned the five functions, you'll learn how to combine them to solve
		complex problems with very little code. The first two exercises have been completed in advance, but please look
		them over carefully!
	</p>

	<h3>Traversing an Array</h3>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson" style="visibility: visible">
		<h4>Exercise 1: Print all the names in an array</h4>
		<textarea class="code" rows="8" cols="80">
			function(console) {
				var names = ["Ben", "Jafar", "Matt", "Priya", "Brian"],
					counter;

				for(counter = 0; counter < names.length; counter++) {
					console.log(names[counter]);
				}
			}
		</textarea>
		<button class="go">Run</button>
		<span class="aside">&lt;- Click here to try your solution. If it works, you'll move on to the next exercise.</span>

		<div class="output"></div>

		<pre class="verifier">
			// Traverse array with for loop
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")");
				var items = [];
				var got;
				var expected = '["Ben","Brian","Jafar","Matt","Priya"]';
				fun({
					log:function(name) {
						items.push(name);
						console.log(name);
					}
				});

				got = JSON.stringify(items.sort());
				if(got === expected) {
					return "Success!"
				}
				else {
					showLessonErrorMessage(expected, got, 'Note: order does not matter');
				}
			}
		</pre>
		<pre class="answer">
			function(console) {
				var names = ["Ben", "Jafar", "Matt", "Priya", "Brian"],
					counter;

				for(counter = 0; counter < names.length; counter++) {
					console.log(names[counter]);
				}
			}
		</pre>
		<p class="post">Ask yourself this question: <b>did we need to specify the <i>order</i> in which the names were
			printed?</b> If not, why do it?
		</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 2: Use forEach to print all the names in an array</h4>
		<p>Let's repeat the previous exercise using the forEach function.</p>

		<textarea class="code" rows="8" cols="80">
			function(console) {
				var names = ["Ben", "Jafar", "Matt", "Priya", "Brian"];

				names.forEach(function(name) {
					console.log(name);
				});
			}
		</textarea>
		<button class="go">Run</button>

		<div class="output"></div>

		<pre class="verifier">
			// Traverse array with foreach
			function(str) {
				preVerifierHook();
				if (str.indexOf(".forEach") === -1) {
					return "You have to use forEach!"
				}
				var fun = eval("(" + str + ")");
				var items =[];
				fun({
					log:function(name) {
						items.push(name);
						console.log(name);
					}
				});
				if(JSON.stringify(items.sort()) === '["Ben","Brian","Jafar","Matt","Priya"]') {
					return "Success!"
				}
				else {
					throw 'console.log did not receive all of these values: "Ben","Brian","Jafar","Matt","Priya" (note: order does not matter)'
				}
			}
		</pre>

    	<pre class="answer">
			function(console) {
				var names = ["Ben", "Jafar", "Matt", "Priya", "Brian"];

				names.forEach(function(name) {
					console.log(name);
				});
			}
    	</pre>
		<div class="post">
			<p>
				Notice that forEach lets us specify <i>what</i> we want to happen to each item in the array, but hides <i>how</i> the array is traversed.
			</p>
			<h3>Projecting Arrays</h3>
			<p>Applying a function to a value and creating a new value is called a <i>projection</i>. To project one array into
				another, we apply a projection function to each item in the array and collect the results in a new array.
			</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 3: Project an array of videos into an array of {id,title} pairs using forEach()</h4>

		<p>For each video, add a projected {id, title} pair to the videoAndTitlePairs array.</p>

		<textarea class="code" rows="60" cols="80">
			function() {
				var newReleases = [
					{
						"id": 70111470,
						"title": "Die Hard",
						"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": [4.0],
						"bookmark": []
					},
					{
						"id": 654356453,
						"title": "Bad Boys",
						"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": [5.0],
						"bookmark": [{ id: 432534, time: 65876586 }]
					},
					{
						"id": 65432445,
						"title": "The Chamber",
						"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": [4.0],
						"bookmark": []
					},
					{
						"id": 675465,
						"title": "Fracture",
						"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": [5.0],
						"bookmark": [{ id: 432534, time: 65876586 }]
					}
				],
				videoAndTitlePairs = [];

				// ------------ INSERT CODE HERE! -----------------------------------
				// Use forEach function to accumulate {id, title} pairs from each video.
				// Put the results into the videoAndTitlePairs array using the Array's
				// push() method. Example: videoAndTitlePairs.push(newItem);
				// ------------ INSERT CODE HERE! -----------------------------------


				return videoAndTitlePairs;
			}
		</textarea>

		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>

		<div class="output"></div>

		<pre class="verifier">
			// Projection with with forEach
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videoAndTitlePairs = fun(),
					expected = '[{\"id\":675465,\"title\":\"Fracture\"},{\"id\":65432445,\"title\":\"The Chamber\"},{\"id\":70111470,\"title\":\"Die Hard\"},{\"id\":654356453,\"title\":\"Bad Boys\"}]';

				// Sorting by video id
				videoAndTitlePairs = videoAndTitlePairs.sortBy(function(video) { return video.id });
				if (JSON.stringify(videoAndTitlePairs) === expected) {
					return true;
				}
				else {
					showLessonErrorMessage(expected, JSON.stringify(videoAndTitlePairs));
				}
			}
    	</pre>
        <pre class="answer">
			function() {
				var newReleases = [
						{
							"id": 70111470,
							"title": "Die Hard",
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": [4.0],
							"bookmark": []
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": [5.0],
							"bookmark": [{ id: 432534, time: 65876586 }]
						},
						{
							"id": 65432445,
							"title": "The Chamber",
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": [4.0],
							"bookmark": []
						},
						{
							"id": 675465,
							"title": "Fracture",
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": [5.0],
							"bookmark": [{ id: 432534, time: 65876586 }]
						}
					],
					videoAndTitlePairs = [];

				newReleases.forEach(function(video) {
					videoAndTitlePairs.push({ id: video.id, title: video.title });
				});

				return videoAndTitlePairs;
			}
		</pre>
		<div class="post">
			<p>All array projections share two operations in common:</p>
			<ol>
				<li>Traverse the source array</li>
				<li>Add each item's projected value to a new array</li>
			</ol>
			<p>Why not abstract away <i>how</i> these operations are carried out?</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 4: Implement map()</h4>

		<p>To make projections easier, let's add a <b>map()</b> function to the Array type. Map accepts the projection
			function to be applied to each item in the source array, and returns the projected array.
		</p>

		<textarea class="code" rows="20" cols="80">
			Array.prototype.map = function(projectionFunction) {
				var results = [];
				this.forEach(function(itemInArray) {

					// ------------ INSERT CODE HERE! ----------------------------
					// Apply the projectionFunction to each item in the array and add
					// each result to the results array.
					// Note: you can add items to an array with the push() method.
					// ------------ INSERT CODE HERE! ----------------------------

				});

				return results;
			};

			// JSON.stringify([1,2,3].map(function(x) { return x + 1; })) === '[2,3,4]'
		</textarea>

		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>

		<div class="output"></div>

		<pre class="verifier">
			// Implement map()
			function(str) {
				preVerifierHook();
				var fun = eval(str),
					arr = [1,2,3],
					result;

				result = arr.map(function(x) { return x + 1});

				if (JSON.stringify(arr) !== "[1,2,3]") {
					throw "Whoa! You changed the input array. Map never changes the value of the array passed in. It creates a new array with the results of applying the projection function to every value in the old array."
				}
				else if(JSON.stringify(result) !== '[2,3,4]') {
					throw 'Expected that [1,2,3].map(function(x) { return x + 1}) would equal [2,3,4].'
				}
			}
		</pre>
		<pre class="answer">
			Array.prototype.map = function(projectionFunction) {
				var results = [];
				this.forEach(function(itemInArray) {
					results.push(projectionFunction(itemInArray));

				});

				return results;
			};

			// JSON.stringify([1,2,3].map(function(x) { return x + 1; })) === '[2,3,4]'
		</pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 5: Use map() to project an array of videos into an array of {id,title} pairs</h4>

		<p>Let's repeat the exercise of collecting {id, title} pairs for each video in the newReleases array, but <b>this
			time we'll use our map function.</b>
		</p>

		<textarea class="code" rows="60" cols="80">
			function() {
				var newReleases = [
					{
						"id": 70111470,
						"title": "Die Hard",
						"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": [4.0],
						"bookmark": []
					},
					{
						"id": 654356453,
						"title": "Bad Boys",
						"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": [5.0],
						"bookmark": [{ id: 432534, time: 65876586 }]
					},
					{
						"id": 65432445,
						"title": "The Chamber",
						"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": [4.0],
						"bookmark": []
					},
					{
						"id": 675465,
						"title": "Fracture",
						"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": [5.0],
						"bookmark": [{ id: 432534, time: 65876586 }]
					}
				];

				// ------------ INSERT CODE HERE! -----------------------------------
				// Use map function to accumulate {id, title} pairs from each video.
				return newReleases.map // finish this expression!
				// ------------ INSERT CODE HERE! -----------------------------------

			}
		</textarea>

		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>

		<pre class="verifier">
			// Projection with map
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videoAndTitlePairs = fun(),
					expected = '[{\"id\":675465,\"title\":\"Fracture\"},{\"id\":65432445,\"title\":\"The Chamber\"},{\"id\":70111470,\"title\":\"Die Hard\"},{\"id\":654356453,\"title\":\"Bad Boys\"}]';

				// Sorting by video id
				videoAndTitlePairs = videoAndTitlePairs.sortBy(function(video) { return video.id });
				if (JSON.stringify(videoAndTitlePairs) === expected) {
					return true;
				}
				else {
					throw 'Expected: ' + expected;
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var newReleases = [
						{
							"id": 70111470,
							"title": "Die Hard",
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": [4.0],
							"bookmark": []
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": [5.0],
							"bookmark": [{ id: 432534, time: 65876586 }]
						},
						{
							"id": 65432445,
							"title": "The Chamber",
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": [4.0],
							"bookmark": []
						},
						{
							"id": 675465,
							"title": "Fracture",
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": [5.0],
							"bookmark": [{ id: 432534, time: 65876586 }]
						}
					];

			  return newReleases.map(function(video) { return { id: video.id, title: video.title }; });
			}
		</pre>
		<div class="post">
			<p>Notice that map allows us to specify <i>what</i> projection we want to apply to an array, but hides
				<i>how</i> the operation is carried out.
			</p>
			<h3>Filtering Arrays</h3>
			<p>Like projection, filtering an array is also a very common operation. To filter an array we apply a test to each item
				in the array and collect the items that pass into a new array.
			</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 6: Use forEach() to collect only those videos with a rating of 5.0</h4>

		<p>Use forEach() to loop through the videos in the newReleases array and, if a video has a rating of 5.0, add it to
			the videos array.
		</p>

		<textarea class="code" rows="60" cols="80">
			function() {
				var newReleases = [
					{
						"id": 70111470,
						"title": "Die Hard",
						"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": 4.0,
						"bookmark": []
					},
					{
						"id": 654356453,
						"title": "Bad Boys",
						"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": 5.0,
						"bookmark": [{ id: 432534, time: 65876586 }]
					},
					{
						"id": 65432445,
						"title": "The Chamber",
						"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": 4.0,
						"bookmark": []
					},
					{
						"id": 675465,
						"title": "Fracture",
						"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": 5.0,
						"bookmark": [{ id: 432534, time: 65876586 }]
					}
				],
				videos = [];

				// ------------ INSERT CODE HERE! -----------------------------------
				// Use forEach function to accumulate every video with a rating of 5.0
				// ------------ INSERT CODE HERE! -----------------------------------

				return videos;
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>

		<pre class="verifier">
			// Filter with forEach
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videos = fun(),
					expected = '[{"id":675465,"title":"Fracture","boxart":"http://cdn-0.nflximg.com/images/2891/Fracture.jpg","uri":"http://api.netflix.com/catalog/titles/movies/70111470","rating":5,"bookmark":[{"id":432534,"time":65876586}]},{"id":654356453,"title":"Bad Boys","boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys.jpg","uri":"http://api.netflix.com/catalog/titles/movies/70111470","rating":5,"bookmark":[{"id":432534,"time":65876586}]}]';

				// Sorting by video id
				videos = videos.sortBy(function(v) { return v.id; });
				if (JSON.stringify(videos) === expected) {
					return true;
				}
				else {
					throw 'Expected: ' + expected;
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var newReleases = [
						{
							"id": 70111470,
							"title": "Die Hard",
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
							"bookmark": []
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
							"bookmark": [{ id: 432534, time: 65876586 }]
						},
						{
							"id": 65432445,
							"title": "The Chamber",
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
							"bookmark": []
						},
						{
							"id": 675465,
							"title": "Fracture",
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
							"bookmark": [{ id: 432534, time: 65876586 }]
						}
					],
					videos = [];

				newReleases.forEach(function(video) {
					if (video.rating === 5.0) {
						videos.push(video);
					}
				});

				return videos;
			}
		</pre>

		<div class="post">
			<p>Notice that, like map(), <b>every filter() operation shares some operations in common</b>:</p>
			<ol>
				<li>Traverse the array</li>
				<li>Add objects that pass the test to a new array</li>
			</ol>
			<p>Why not abstract away how these operations are carried out?</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 7: Implement filter()</h4>

		<p>To make filtering easier, let's add a filter() function to the Array type. The filter() function accepts a <i>predicate</i>.
			A predicate is a function that accepts an item in the array, and returns a boolean indicating whether the item
			should be retained in the new array.</p>

		<textarea class="code" rows="20" cols="80">
			Array.prototype.filter = function(predicateFunction) {
				var results = [];
				this.forEach(function(itemInArray) {
					// ------------ INSERT CODE HERE! ----------------------------
					// Apply the predicateFunction to each item in the array.
					// If the result is truthy, add the item to the results array.
					// Note: remember you can add items to the array using the array's
					// push() method.
					// ------------ INSERT CODE HERE! ----------------------------
				});

				return results;
			};

			// JSON.stringify([1,2,3].filter(function(x) { return x > 2})) === "[3]"
		</textarea>

		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>

		<pre class="verifier">
			// Implement filter()
			function(str) {
				preVerifierHook();
				var fun = eval(str),
					arr = [1,2,3],
					result;

				result = arr.filter(function(x) { return x > 2});

				if (JSON.stringify(arr) !== "[1,2,3]") {
					throw "Whoa! You changed the input array. Filter never changes the value of the array passed in. It creates a new array that includes only those items in the old array that pass the predicate function."
				}
				else if(JSON.stringify(result) !== '[3]') {
					throw 'Expected that [1,2,3].filter(function(x) { return x > 2}) would equal [3].'
				}
			}
		</pre>
		<pre class="answer">
			Array.prototype.filter = function(predicateFunction) {
				var results = [];
				this.forEach(function(itemInArray) {
				  if (predicateFunction(itemInArray)) {
					results.push(itemInArray);
				  }
				});

				return results;
			};

			// JSON.stringify([1,2,3].filter(function(x) { return x > 2})) === "[3]"
		</pre>
		<p class="post">Like map(), filter() lets us express <i>what</i> data we want without requiring us to specify <i>how</i>
			we want to collect the data.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h3>Query Data by Chaining Method Calls</h3>
		<h4>Exercise 8: Chain filter and map to collect the ids of videos that have a rating of 5.0</h4>
		<textarea class="code" rows="60" cols="80">
			function() {
				var newReleases = [
					{
						"id": 70111470,
						"title": "Die Hard",
						"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": 4.0,
						"bookmark": []
					},
					{
						"id": 654356453,
						"title": "Bad Boys",
						"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": 5.0,
						"bookmark": [{ id: 432534, time: 65876586 }]
					},
					{
						"id": 65432445,
						"title": "The Chamber",
						"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": 4.0,
						"bookmark": []
					},
					{
						"id": 675465,
						"title": "Fracture",
						"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
						"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
						"rating": 5.0,
						"bookmark": [{ id: 432534, time: 65876586 }]
					}
				];

				// ------------ INSERT CODE HERE! -----------------------------------
				// Chain the filter and map functions to select the id of all videos
				// with a rating of 5.0.

				return newReleases // Complete this expression
				// ------------ INSERT CODE HERE! -----------------------------------
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>

		<pre class="verifier">
			// Filter with filter()
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videoids = fun(),
					expected = '[675465,654356453]';

				// Sorting by video id
				videoids = videoids.sortBy(function(v) { return v; });
				if (JSON.stringify(videoids) === expected) {
					return true;
				}
				else {
					throw 'Expected: ' + expected;
				}
			}
			</pre>
		<pre class="answer">
			function() {
				var newReleases = [
						{
							"id": 70111470,
							"title": "Die Hard",
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
							"bookmark": []
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
							"bookmark": [{ id: 432534, time: 65876586 }]
						},
						{
							"id": 65432445,
							"title": "The Chamber",
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
							"bookmark": []
						},
						{
							"id": 675465,
							"title": "Fracture",
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
							"bookmark": [{ id: 432534, time: 65876586 }]
						}
					];

				return newReleases.
					filter(function(video) {
						return video.rating === 5.0;
					}).
					map(function(video) {
						return video.id;
					});
			}
		</pre>

		<p class="post">Chaining together map() and filter() gives us a lot of expressive power. These high level functions
			let us express <i>what</i> data we want, but leave the underlying libraries a great deal of flexibility in terms
			of <i>how</i> our queries are executed.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h3>Querying Trees</h3>
		<p>Sometimes, in addition to flat arrays, we need to query trees. Trees pose a challenge because we need to flatten them
			into arrays in order to apply filter() and map() operations on them. In this section we'll define a concatAll()
			function that we can combine with map() and filter() to query trees.</p>

		<h4>Exercise 9: Flatten the movieLists array into an array of video ids</h4>

		<p>Let's start by using two nested forEach loops to collect the id of every video in the two-dimensional movieLists
			array.</p>

		<textarea class="code" rows="60" cols="80">
			function() {
				var movieLists = [
					{
						name: "New Releases",
						videos: [
							{
								"id": 70111470,
								"title": "Die Hard",
								"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
								"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 4.0,
								"bookmark": []
							},
							{
								"id": 654356453,
								"title": "Bad Boys",
								"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
								"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 5.0,
								"bookmark": [{ id: 432534, time: 65876586 }]
							}
						]
					},
					{
						name: "Dramas",
						videos: [
							{
								"id": 65432445,
								"title": "The Chamber",
								"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
								"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 4.0,
								"bookmark": []
							},
							{
								"id": 675465,
								"title": "Fracture",
								"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
								"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 5.0,
								"bookmark": [{ id: 432534, time: 65876586 }]
							}
						]
					}
				],
				allVideoIdsInMovieLists = [];

				// ------------   INSERT CODE HERE!  -----------------------------------
				// Use two nested forEach loops to flatten the movieLists into a list of
				// video ids.
				// ------------   INSERT CODE HERE!  -----------------------------------

				return allVideoIdsInMovieLists;

			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>

		<pre class="verifier">
			// Use filter and map to collect video ids with rating of 5.0
			function(str) {
				var fun = eval("(" + str + ")"),
					videos = fun(),
					expected = '[675465,65432445,70111470,654356453]';

				videos = videos.sortBy(function(v) { return v });
				if (JSON.stringify(videos) !== expected) {
					throw "Expected " + expected;
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var movieLists = [
						{
							name: "New Releases",
							videos: [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						},
						{
							name: "Dramas",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						}
					],
					allVideoIdsInMovieLists = [];

				movieLists.forEach(function(movieList) {
					movieList.videos.forEach(function(video) {
						allVideoIdsInMovieLists.push(video.id);
					});
				});

				return allVideoIdsInMovieLists;

			}
		</pre>

		<p class="post">Flattening trees with nested forEach expressions is easy because we can explicitly add items to the
			array. Unfortunately it's <i>exactly</i> this type of low-level operation that we've been trying to abstract
			away with functions like map() and filter(). Can we define a function that's abstract enough to express our <i>intent</i>
			to flatten a tree, without specifying too much information about <i>how</i> to carry out the operation?</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 10: Implement concatAll()</h4>

		<p>Let's add a concatAll() function to the Array type. The concatAll() function iterates over each sub-array in the
			array and collects the results in a new, flat array. Notice that <b>the concatAll() function expects each item in
				the array to be another array.</b>
		</p>

		<textarea class="code" rows="20" cols="80">
			Array.prototype.concatAll = function() {
				var results = [];
				this.forEach(function(subArray) {
					// ------------ INSERT CODE HERE! ----------------------------
					// Add all the items in each subArray to the results array.
					// ------------ INSERT CODE HERE! ----------------------------
				});

				return results;
			};

			// JSON.stringify([ [1,2,3], [4,5,6], [7,8,9] ].concatAll()) === "[1,2,3,4,5,6,7,8,9]"
			// [1,2,3].concatAll(); // throws an error because this is a one-dimensional array
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>

		<pre class="verifier">
			// Flatten movieLists into an array of video ids
			function(str) {
				preVerifierHook();
				var fun = eval(str),
					arr = [[1,2,3],[4,5,6],[7,8,9]],
					result,
					expected = "[1,2,3,4,5,6,7,8,9]";

				result = arr.concatAll();
				result = result.sortBy(function(x) { return x; });
				if (JSON.stringify(result) !== expected) {
					throw 'Expected that [[1,2,3],[4,5,6],[7,8,9]].concatAll() would equal [1,2,3,4,5,6,7,8,9].'
				}
			}
		</pre>
		<pre class="answer">
			Array.prototype.concatAll = function() {
				var results = [];
				this.forEach(function(subArray) {
					results.push.apply(results, subArray);
				});

				return results;
			};

			// JSON.stringify([ [1,2,3], [4,5,6], [7,8,9] ].concatAll()) === "[1,2,3,4,5,6,7,8,9]"
			// [1,2,3].concatAll(); // throws an error because this is a one-dimensional array
		</pre>
		<p class="post">concatAll is a very simple function, so much so that it may not be obvious yet how it can be combined
			with map() to query a tree. Let's try an example...</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 11: Use map() and concatAll() to project and flatten the movieLists into an array of video ids</h4>

		<p>Hint: use two nested calls to map() and one call to concatAll().</p>
		<textarea class="code" rows="60" cols="80">
			function() {
				var movieLists = [
						{
							name: "New Releases",
							videos: [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						},
						{
							name: "Dramas",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						}
					];

				// ------------   INSERT CODE HERE!  -----------------------------------
				// Use map and concatAll to flatten the movieLists in a list of video ids.
				// ------------   INSERT CODE HERE!  -----------------------------------

				return movieLists // Complete this expression!

			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>

		<pre class="verifier">
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videos = fun(),
					expected = '[675465,65432445,70111470,654356453]';

				videos = videos.sortBy(function(v) { return v });
				if (JSON.stringify(videos) !== expected) {
					throw "Expected " + expected + "\n\nReceived " + JSON.stringify(videos);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var movieLists = [
						{
							name: "New Releases",
							videos: [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						},
						{
							name: "Dramas",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
									"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						}
					];

				return movieLists.
				  map(function(movieList) {
					return movieList.videos.map(function(video) {
						return video.id;
					  });
				  }).
				  concatAll();

			}
		</pre>

		<p class="post">Wow! <b>Great work.</b> Mastering the combination of map() and concatAll() is key to effective
			functional programming. You're half way there! Let's try a more complicated example...</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 12: Retrieve id, title, and a 150x200 box art url for every video</h4>

		<p>You've managed to flatten a tree that's two levels deep, let's try for three! Let's say that instead of a single
			boxart url on each video, we had a collection of boxart objects, each with a different size and url. Create a
			query that selects {id, title, boxart} for every video in the movieLists. This time though, the boxart property
			in the result will be the url of the boxart object with dimensions of 150x200px. Let's see if you can solve this
			problem with map(), concatAll(), and filter().</p>
		<a name="indexers"></a>

		<p><b>There's just more one thing: you <u>can't</u> use indexers.</b> In other words, this is
			<span style="color:red">illegal</span>:</p>
			<pre>
				var itemInArray = movieLists<span style="color:red">[0]</span>;
			</pre>

		<p>Furthermore, <b>you're not allowed to use indexers in any of the remaining exercises</b> unless you're
			implementing one of the five functions. There is a very good reason for this restriction, and that reason will
			eventually be explained. For now, you'll simply have to accept it on faith that this restriction serves a
			purpose. :-)</p>

		<textarea class="code" rows="60" cols="80">
			function() {
				var movieLists = [
						{
							name: "Instant Queue",
							videos : [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxarts": [
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxarts": [
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" }

									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						},
						{
							name: "New Releases",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxarts": [
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxarts": [
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
										{ width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						}
					];


				// Use one or more map, concatAll, and filter calls to create an array with the following items
				// [
				//	 {"id": 675465,"title": "Fracture","boxart":"http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
				//	 {"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
				//	 {"id": 654356453,"title": "Bad Boys","boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" },
				//	 {"id": 70111470,"title": "Die Hard","boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }
				// ];

				return movieLists // Complete this expression!

			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output">
		</div>

		<pre class="verifier">
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videos = fun(),
					got,
					expected = JSON.stringify([
						{"id": 675465,"title": "Fracture","boxart":"http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
						{"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
						{"id": 654356453,"title": "Bad Boys","boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" },
						{"id": 70111470,"title": "Die Hard","boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }
					].sortBy(function(v) { return v.id }));

				if (str.indexOf('[0]') !== -1) {
					throw "You're not allowed to index into the array. You might be creating the object too early. Instead of using an indexer to get the boxart out of the array, try adding a call to map() and creating the object inside the projection function.";
				}

				videos = videos.sortBy(function(v) { return v.id });
				got = JSON.stringify(videos);
				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var movieLists = [
						{
							name: "Instant Queue",
							videos : [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxarts": [
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxarts": [
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" }

									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						},
						{
							name: "New Releases",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxarts": [
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxarts": [
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
										{ width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						}
					];

				return movieLists.
				  map(function(movieList) {
					return movieList.videos.
					  map(function(video) {
						return video.boxarts.
						  filter(function(boxart) {
							return boxart.width === 150;
						  }).
						  map(function(boxart) {
							return {id: video.id, title: video.title, boxart: boxart.url};
						  });
					  }).
					  concatAll();
				  }).
				  concatAll();

			}
		</pre>
		<p class="post">Fantastic job! Now you've learned to use concatAll() alongside map() and filter() to query trees.
			Notice that <b>map() and concatAll() are very commonly chained together.</b> Let's create a small helper function
			to help us with this common pattern.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 13: Implement concatMap()</h4>

		<p>Nearly every time we flatten a tree we chain map() and concatAll(). Sometimes, if we're dealing with a tree
			several levels deep, we'll repeat this combination many times in our code. To save on typing, let's create a
			concatMap function that's just a map operation, followed by a concatAll.</p>
		<textarea class="code" rows="20" cols="80">
			Array.prototype.concatMap = function(projectionFunctionThatReturnsArray) {
				return this.
					map(function(item) {
						// ------------   INSERT CODE HERE!  ----------------------------
						// Apply the projection function to each item. The projection
						// function will return an new child array. This will create a
						// two-dimensional array.
						// ------------   INSERT CODE HERE!  ----------------------------
					}).
					// apply the concatAll function to flatten the two-dimensional array
					concatAll();
			};

			/*
				var spanishFrenchEnglishWords = [ ["cero","rien","zero"], ["uno","un","one"], ["dos","deux","two"] ];
				// collect all the words for each number, in every language, in a single, flat list
				var allWords = [0,1,2].
					concatMap(function(index) {
						return spanishFrenchEnglishWords[index];
					});

				return JSON.stringify(allWords) === '["cero","rien","zero","uno","un","one","dos","deux","two"]';
			*/
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			// Implement concatAll
			function(str) {
				preVerifierHook();
				var fun = eval(str),
					spanishFrenchEnglishWords = [ ["cero","rien","zero"], ["uno","un","one"], ["dos","deux","two"] ],
					allWords = [0,1,2],
					result,
					expected = '["cero","rien","zero","uno","un","one","dos","deux","two"]';


				var allWords = [0,1,2].
					concatMap(function(index) {
						return spanishFrenchEnglishWords[index];
					});

				if (JSON.stringify(allWords) !== expected) {
					throw "Expected " + expected;
				}
			}
		</pre>
		<pre class="answer">
			Array.prototype.concatMap = function(projectionFunctionThatReturnsArray) {
				return this.
					map(function(item) {
						return projectionFunctionThatReturnsArray(item);
					}).
					// apply the concatAll function to flatten the two-dimensional array
					concatAll();
			};

			/*
				var spanishFrenchEnglishWords = [ ["cero","rien","zero"], ["uno","un","one"], ["dos","deux","two"] ];
				// collect all the words for each number, in every language, in a single, flat list
				var allWords = [0,1,2].
					concatMap(function(index) {
						return spanishFrenchEnglishWords[index];
					});

				return JSON.stringify(allWords) === '["cero","rien","zero","uno","un","one","dos","deux","two"]';
			*/
		</pre>


		<p class="post">Now, instead of using map().concatAll() to flatten a tree, we can just use concatMap helper
			function.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 14: Use concatMap() to retrieve id, title, and 150x200 box art url for every video</h4>

		<p>Let's repeat the exercise we just performed. However this time we'll simplify the code by replacing the
			map().concatAll() calls with concatMap().</p>
		<textarea class="code" rows="60" cols="80">
			function() {
				var movieLists = [
						{
							name: "Instant Queue",
							videos : [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxarts": [
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxarts": [
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" }

									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						},
						{
							name: "New Releases",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxarts": [
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxarts": [
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
										{ width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						}
					];


				// Use one or more concatMap, map, and filter calls to create an array with the following items
				// [
				//	 {"id": 675465, "title": "Fracture", "boxart": "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
				//	 {"id": 65432445, "title": "The Chamber", "boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
				//	 {"id": 654356453, "title": "Bad Boys", "boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" },
				//	 {"id": 70111470, "title": "Die Hard", "boxart": "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }
				// ];

				return movieLists // Complete this expression!

			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>

		<pre class="verifier">
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videos = fun(),
					got,
					expected = JSON.stringify([
						{"id": 675465,"title": "Fracture","boxart":"http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
						{"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
						{"id": 654356453,"title": "Bad Boys","boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" },
						{"id": 70111470,"title": "Die Hard","boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }
					].sortBy(function(v) { return v.id }));

				videos = videos.sortBy(function(v) { return v.id });
				got = JSON.stringify(videos);
				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var movieLists = [
						{
							name: "Instant Queue",
							videos : [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxarts": [
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxarts": [
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" }

									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						},
						{
							name: "New Releases",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxarts": [
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"bookmark": []
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxarts": [
										{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
										{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
										{ width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"bookmark": [{ id: 432534, time: 65876586 }]
								}
							]
						}
					];

				return movieLists.concatMap(function(movieList) {
					return movieList.videos.concatMap(function(video) {
						return video.boxarts.
							filter(function(boxart) {
								return boxart.width === 150;
						  	}).
						  	map(function(boxart) {
								return {id: video.id, title: video.title, boxart: boxart.url};
							});
					  });
				  });
			}
		</pre>
		<p class="post">It's a very common pattern to see several nested concatMap operations, with the last operation being a
			map. You can think of this pattern as the functional version of a nested forEach.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h3>Reducing Arrays</h3>
		<p>Sometimes we need to perform an operation on more than one item in the array <i>at the same time</i>. For example,
			let's say we need to find the largest integer in an array. We can't use a filter() operation, because it only
			examines one item at a time. To find the largest integer we need to compare items in the array to each other.
		</p>
		<p>One approach could be to select an item in the array as the <i>assumed</i> largest number (perhaps the first item),
			and then compare that value to every other item in the array. Each time we come across a number that was larger than
			our assumed largest number, we'd replace it with the larger value, and continue the process until the entire array
			was traversed.</p>
		<p>If we replaced the specific size comparison with a closure, we could write a function that handled the array
			traversal process for us. At each step our function would apply the closure to the last value and the current value
			and use the result as the last value the next time. Finally we'd be left with only one value. This process is known
			as <i>reducing</i> because we reduce many values to a single value.</p>

		<h4>Exercise 15: Use forEach to find the largest box art</h4>

		<p>In this example we use forEach to find the largest box art. Each time we examine a new boxart we update a
			variable with the currently known maximumSize. If the boxart is smaller than the maximum size, we discard it. If
			it's larger, we keep track of it. Finally we're left with a single boxart which must necessarily be the
			largest.</p>
		<textarea class="code" rows="15" cols="80">
			function() {
				var boxarts = [
						{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
						{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
						{ width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
						{ width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
					],
					currentSize,
					maxSize = -1,
					largestBoxart;

				boxarts.forEach(function(boxart) {
					currentSize = boxart.width * boxart.height;
					if (currentSize > maxSize) {
						largestBoxart = boxart;
						maxSize = currentSize;
					}
				});

				return largestBoxart;
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			// Find largest box art
			function(str){
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					boxart = fun(),
					got = JSON.stringify(boxart),
					expected = JSON.stringify({ width: 425, height:150, url:"http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" });

				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var boxarts = [
						{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
						{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
						{ width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
						{ width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
					],
					currentSize,
					maxSize = -1,
					largestBoxart;

				boxarts.forEach(function(boxart) {
					currentSize = boxart.width * boxart.height;
					if (currentSize > maxSize) {
						largestBoxart = boxart;
						maxSize = currentSize;
					}
				});

				return largestBoxart;
			}
		</pre>
		<p class="post">This process is a reduction because we're using the information we derived from the last computation
			to calculate the current value. However in the example above, we still have to specify the method of traversal.
			Wouldn't it be nice if we could just specify what operation we wanted to perform on the last and current value?
			Let's create a helper function to perform reductions on arrays.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 16: Implement reduce()</h4>

		<p>Let's add a reduce() function to the Array type. Like map. Take note this is <b>different from the reduce in ES5</b>, which returns an value instead of an Array! </p>
		<textarea class="code" rows="40" cols="80">
			// [1,2,3].reduce(function(accumulatedValue, currentValue) { return accumulatedValue + currentValue; }); === [6];
			// [1,2,3].reduce(function(accumulatedValue, currentValue) { return accumulatedValue + currentValue; }, 10); === [16];

			Array.prototype.reduce = function(combiner, initialValue) {
				var counter,
					accumulatedValue;

				// If the array is empty, do nothing
				if (this.length === 0) {
					return this;
				}
				else {
					// If the user didn't pass an initial value, use the first item.
					if (arguments.length === 1) {
						counter = 1;
						accumulatedValue = this[0];
					}
					else if (arguments.length >= 2) {
						counter = 0;
						accumulatedValue = initialValue;
					}
					else {
						throw "Invalid arguments.";
					}

					// Loop through the array, feeding the current value and the result of
					// the previous computation back into the combiner function until
					// we've exhausted the entire array and are left with only one value.
					while(counter < this.length) {
						accumulatedValue = combiner(accumulatedValue, this[counter])
						counter++;
					}

					return [accumulatedValue];
				}
			};
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			// Implement reduce
			function(str) {
				preVerifierHook();
				var fun = eval(str),
					numbers = [1,2,3],
					sum = numbers.reduce(function(acc,curr) { return acc + curr }),
					expected = JSON.stringify([6]),
					sum2 = numbers.reduce(function(acc,curr) { return acc + curr },10),
					expected2 = JSON.stringify([16]);

				if (JSON.stringify(sum) !== expected) {
					throw "Expected that [1,2,3].reduce(function(accumulated,current) { return accumulated + current; }) === [6]. Instead got " + JSON.stringify(sum);
				}
				if (JSON.stringify(sum2) !== expected2) {
					throw "Expected that [1,2,3].reduce(function(accumulated,current) { return accumulated + current; }, 10) === [16]. Instead got " + JSON.stringify(sum2);
				}
			}
		</pre>
		<pre class="answer">
			// [1,2,3].reduce(function(accumulatedValue, currentValue) { return accumulatedValue + currentValue; }); === [6];
			// [1,2,3].reduce(function(accumulatedValue, currentValue) { return accumulatedValue + currentValue; }, 10); === [16];

			Array.prototype.reduce = function(combiner, initialValue) {
				var counter,
					accumulatedValue;

				// If the array is empty, do nothing
				if (this.length === 0) {
					return this;
				}
				else {
					// If the user didn't pass an initial value, use the first item.
					if (arguments.length === 1) {
						counter = 1;
						accumulatedValue = this[0];
					}
					else if (arguments.length >= 2) {
						counter = 0;
						accumulatedValue = initialValue;
					}
					else {
						throw "Invalid arguments.";
					}

					// Loop through the array, feeding the current value and the result of
					// the previous computation back into the combiner function until
					// we've exhausted the entire array and are left with only one function.
					while(counter < this.length) {
						accumulatedValue = combiner(accumulatedValue, this[counter])
						counter++;
					}

					return [accumulatedValue];
				}
			};
		</pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson"><h4>Exercise 17: Retrieve the largest rating.</h4>

		<p>Let's use our new reduce function to isolate the largest value in an array of ratings.</p>
		<textarea class="code" rows="15" cols="80">
			function() {
				var ratings = [2,3,1,4,5];

				// You should return an array containing only the largest rating. Remember that reduce always
				// returns an array with one item.
				return ratings.
					reduce   // Complete this expression
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			 // Find largest rating
			function(str){
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					boxarts = fun(),
					got = JSON.stringify(boxarts),
					expected = JSON.stringify([5]);


				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var ratings = [2,3,1,4,5];

				return ratings.
				  reduce(function(acc, curr) {
					if(acc > curr) {
					  return acc;
					}
					else {
					  return curr;
					}
				  });
			}
		</pre>
		<p class="post">Nice work. Now let's try combining reduce() with our other functions to build more complex
			queries.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 18: Retrieve url of the largest boxart</h4>

		<p>Let's try combining reduce() with map() to reduce multiple boxart objects to a single value: the url of the
			largest box art.</p>
		<textarea class="code" rows="15" cols="80">
			function() {
				var boxarts = [
						{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
						{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
						{ width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
						{ width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
					];

				// You should return an array containing only the URL of the largest box art. Remember that reduce always
				// returns an array with one item.
				return boxarts.
					reduce   // Complete this expression
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			// Find largest box art with reduce
			function(str){
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					boxarts = fun(),
					got = JSON.stringify(boxarts),
					expected = JSON.stringify(["http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"]);


				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var boxarts = [
						{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
						{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
						{ width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
						{ width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
					];

				return boxarts.
				  reduce(function(acc,curr) {
					if (acc.width * acc.height > curr.width * curr.height) {
					  return acc;
					}
					else {
					  return curr;
					}
				  }).
				  map(function(boxart) {
					return boxart.url;
				  });
			}
		</pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 19: Reducing with an initial value</h4>

		<p>Sometimes when we reduce an array, we want the reduced value to be a different type than the items stored in the
			array. Let's say we have an array of videos and we want to reduce them to a single map where the key is the
			video id and the value is the video's title.</p>

		<textarea id="q18" class="code" rows="15" cols="80">
			function() {
				var videos = [
					{
						"id": 65432445,
						"title": "The Chamber"
					},
					{
						"id": 675465,
						"title": "Fracture"
					},
					{
						"id": 70111470,
						"title": "Die Hard"
					},
					{
						"id": 654356453,
						"title": "Bad Boys"
					}
				];

				// Expecting this output...
				// [
				//	 {
				//		 "65432445": "The Chamber",
				//		 "675465": "Fracture",
				//		 "70111470": "Die Hard",
				//		 "654356453": "Bad Boys"
				//	 }
				// ]
				return videos.
					reduce(function(accumulatedMap, video) {
					var obj = {};

					// ----- INSERT CODE TO ADD THE VIDEO TITLE TO THE ----
					// ----- NEW MAP USING THE VIDEO ID AS THE KEY	 ----

					// Object.assign() takes all of the enumerable properties from
					// the object listed in its second argument (obj) and assigns them
					// to the object listed in its first argument (accumulatedMap).
					return Object.assign(accumulatedMap, obj);
					},
					// Use an empty map as the initial value instead of the first item in
					// the list.
					{});
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			// Reducing with an initial value
			function(str){
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videoMap = fun()[0],
					expected = [
						{
							"65432445": "The Chamber",
							"675465": "Fracture",
							"70111470": "Die Hard",
							"654356453": "Bad Boys"
						}
					];

				if (!(videoMap["65432445"] === "The Chamber" && videoMap["675465"] === "Fracture" && videoMap["70111470"] === "Die Hard" && videoMap["654356453"] === "Bad Boys")) {
					throw "Expected " + JSON.stringify(expected);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var videos = [
					{
						"id": 65432445,
						"title": "The Chamber"
					},
					{
						"id": 675465,
						"title": "Fracture"
					},
					{
						"id": 70111470,
						"title": "Die Hard"
					},
					{
						"id": 654356453,
						"title": "Bad Boys"
					}
				];

				// Expecting this output...
				// [
				//     {
				//         "65432445": "The Chamber",
				//         "675465": "Fracture",
				//         "70111470": "Die Hard",
				//         "654356453": "Bad Boys"
				//     }
				// ]
				return videos.
					reduce(function(accumulatedMap, video) {
					var obj = {};

					// ----- INSERT CODE TO ADD THE VIDEO TITLE TO THE ----
					// ----- NEW MAP USING THE VIDEO ID AS THE KEY	 ----
					obj[video.id] = video.title;

					// Object.assign() takes all of the enumerable properties from
					// the object listed in its second argument (obj) and assigns them
					// to the object listed in its first argument (accumulatedMap).
					return Object.assign(accumulatedMap, obj);
					},
					// Use an empty map as the initial value instead of the first item in
					// the list.
					{});
			}
		</pre>

		<p class="post">Nice work. Now let's try combining reduce() with our other functions to build more complex
			queries.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 20: Retrieve the id, title, and <i>smallest</i> box art url for every video.</h4>

		<p>This is a variation of the problem we solved earlier, where we retrieved the url of the boxart with a width of
			150px. This time we'll use reduce() instead of filter() to retrieve the <i>smallest</i> box art in the boxarts
			array.</p>
		<textarea class="code" rows="60" cols="80">
			function() {
				var movieLists = [
					{
						name: "New Releases",
						videos: [
							{
								"id": 70111470,
								"title": "Die Hard",
								"boxarts": [
									{ width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
									{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }
								],
								"url": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 4.0,
								"bookmark": []
							},
							{
								"id": 654356453,
								"title": "Bad Boys",
								"boxarts": [
									{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
									{ width: 140, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }

								],
								"url": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 5.0,
								"bookmark": [{ id:432534, time:65876586 }]
							}
						]
					},
					{
						name: "Thrillers",
						videos: [
							{
								"id": 65432445,
								"title": "The Chamber",
								"boxarts": [
									{ width: 130, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
									{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
								],
								"url": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 4.0,
								"bookmark": []
							},
							{
								"id": 675465,
								"title": "Fracture",
								"boxarts": [
									{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
									{ width: 120, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
									{ width: 300, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
								],
								"url": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 5.0,
								"bookmark": [{ id:432534, time:65876586 }]
							}
						]
					}
				];


				// Use one or more concatMap, map, and reduce calls to create an array with the following items (order doesn't matter)
				// [
				//	 {"id": 675465,"title": "Fracture","boxart":"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
				//	 {"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
				//	 {"id": 654356453,"title": "Bad Boys","boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" },
				//	 {"id": 70111470,"title": "Die Hard","boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }
				// ];

				return movieLists.
					concatMap(function(movieList) {

					})

			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output">
		</div>
		<pre class="verifier">
			// Find the id, title, and smallest box art.
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videos = fun(),
					got,
					expected = JSON.stringify([
						{"id": 675465,"title": "Fracture","boxart":"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
						{"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
						{"id": 654356453,"title": "Bad Boys","boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" },
						{"id": 70111470,"title": "Die Hard","boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }
					].sortBy(function(v) { return v.id }));

				if (str.indexOf('[0]') !== -1){
					throw "You're not allowed to index into the array. You might be creating the object too early. Instead of using an indexer to get the boxart out of the array, try adding a call to map() and creating the object inside the projection function.";
				}
				videos = videos.sortBy(function(v) { return v.id });
				got = JSON.stringify(videos);
				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var movieLists = [
					{
						name: "New Releases",
						videos: [
							{
								"id": 70111470,
								"title": "Die Hard",
								"boxarts": [
									{ width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
									{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }
								],
								"url": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 4.0,
								"bookmark": []
							},
							{
								"id": 654356453,
								"title": "Bad Boys",
								"boxarts": [
									{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
									{ width: 140, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }

								],
								"url": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 5.0,
								"bookmark": [{ id:432534, time:65876586 }]
							}
						]
					},
					{
						name: "Thrillers",
						videos: [
							{
								"id": 65432445,
								"title": "The Chamber",
								"boxarts": [
									{ width: 130, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
									{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
								],
								"url": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 4.0,
								"bookmark": []
							},
							{
								"id": 675465,
								"title": "Fracture",
								"boxarts": [
									{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
									{ width: 120, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
									{ width: 300, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
								],
								"url": "http://api.netflix.com/catalog/titles/movies/70111470",
								"rating": 5.0,
								"bookmark": [{ id:432534, time:65876586 }]
							}
						]
					}
				];


				// Use one or more concatMap, map, and reduce calls to create an array with the following items (order doesn't matter)
				// [
				//     {"id": 675465,"title": "Fracture","boxart":"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
				//     {"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
				//     {"id": 654356453,"title": "Bad Boys","boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" },
				//     {"id": 70111470,"title": "Die Hard","boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }
				// ];

				return movieLists.concatMap(function(movieList) {
				  return movieList.videos.concatMap(function(video) {
				    return video.boxarts.
					  reduce(function(acc,curr) {
						if (acc.width * acc.height < curr.width * curr.height) {
						  return acc;
						}
						else {
						  return curr;
						}
					  }).
					  map(function(boxart) {
						return {id: video.id, title: video.title, boxart: boxart.url};
					  });
				  });
				});

			}
		</pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h3>Zipping Arrays</h3>
		<p>Sometimes we need to combine two arrays by progressively taking an item from each and combining the pair. If you
			visualize a zipper, where each side is an array, and each tooth is an item, you'll have a good idea of how the zip
			operation works.</p>
		<h4>Exercise 21: Combine videos and bookmarks by index</h4>

		<p>Use a for loop to traverse the videos and bookmarks array at the same time. For each video and bookmark pair,
			create a {videoId, bookmarkId} pair and add it to the videoIdAndBookmarkIdPairs array.</p>
		<textarea class="code" rows="60" cols="80">
			function() {
				var videos = [
						{
							"id": 70111470,
							"title": "Die Hard",
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
						},
						{
							"id": 65432445,
							"title": "The Chamber",
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
						},
						{
							"id": 675465,
							"title": "Fracture",
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
						}
					],
					bookmarks = [
						{id: 470, time: 23432},
						{id: 453, time: 234324},
						{id: 445, time: 987834}
					],
				counter,
				videoIdAndBookmarkIdPairs = [];

				for(counter = 0; counter < Math.min(videos.length, bookmarks.length); counter++) {
					// Insert code here to create a {videoId, bookmarkId} pair and add it to the videoIdAndBookmarkIdPairs array.
				}

				return videoIdAndBookmarkIdPairs;
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			// Zip imperatively
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					pairs = fun(),
					got,
					expected = '[{"videoId":65432445,"bookmarkId":445},{"videoId":70111470,"bookmarkId":470},{"videoId":654356453,"bookmarkId":453}]';

				pairs = pairs.sortBy(function(v) { return v.videoId });
				got = JSON.stringify(pairs);
				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var videos = [
						{
							"id": 70111470,
							"title": "Die Hard",
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
						},
						{
							"id": 65432445,
							"title": "The Chamber",
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
						},
						{
							"id": 675465,
							"title": "Fracture",
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
						}
					],
					bookmarks = [
						{id: 470, time: 23432},
						{id: 453, time: 234324},
						{id: 445, time: 987834}
					],
				counter,
				videoIdAndBookmarkIdPairs = [];

				for(counter = 0; counter < Math.min(videos.length, bookmarks.length); counter++) {
				  videoIdAndBookmarkIdPairs.push({videoId: videos[counter].id, bookmarkId: bookmarks[counter].id});
				}

				return videoIdAndBookmarkIdPairs;
			}
		</pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 22: Implement zip</h4>

		<p>Let's add a static zip() function to the Array type. The zip function accepts a combiner function, traverses each
			array at the same time, and calls the combiner function on the current item on the left-hand-side and
			right-hand-side. The zip function requires an item from each array in order to call the combiner function,
			therefore the array returned by zip will only be as large as the smallest input array.

		<p>
		<textarea class="code" rows="40" cols="80">
			// JSON.stringify(Array.zip([1,2,3],[4,5,6], function(left, right) { return left + right })) === '[5,7,9]'

			Array.zip = function(left, right, combinerFunction) {
				var counter,
					results = [];

				for(counter = 0; counter < Math.min(left.length, right.length); counter++) {
					// Add code here to apply the combinerFunction to the left and right-hand items in the respective arrays
				}

				return results;
			};
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			// Implement zip
			function(str) {
				preVerifierHook();
				var fun = eval(str),
					left = [1,2,3],
					right = [4,5,6],
					sum = Array.zip(left, right, function(left, right){ return left + right; }),
					expected = '[5,7,9]';

				if (JSON.stringify(sum) !== expected) {
					showLessonErrorMessage(expected, JSON.stringify(sum));
				}
			}
		</pre>
		<pre class="answer">
			// JSON.stringify(Array.zip([1,2,3],[4,5,6], function(left, right) { return left + right })) === '[5,7,9]'

			Array.zip = function(left, right, combinerFunction) {
				var counter,
					results = [];

				for(counter = 0; counter < Math.min(left.length, right.length); counter++) {
					results.push(combinerFunction(left[counter],right[counter]));
				}

				return results;
			};
        </pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 23: Combine videos and bookmarks by index</h4>

		<p>Let's repeat exercise 21, but this time lets use your new zip() function. For each video and bookmark pair,
			create a {videoId, bookmarkId} pair.</p>
		<textarea class="code" rows="60" cols="80">
			function() {
				var videos = [
						{
							"id": 70111470,
							"title": "Die Hard",
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
						},
						{
							"id": 65432445,
							"title": "The Chamber",
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
						},
						{
							"id": 675465,
							"title": "Fracture",
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
						}
					],
					bookmarks = [
						{id: 470, time: 23432},
						{id: 453, time: 234324},
						{id: 445, time: 987834}
					];

				return Array.
					zip( //... finish this expression
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
		<pre class="verifier">
			// Combine videos and bookmarks
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					pairs = fun(),
					got,
					expected = '[{"videoId":65432445,"bookmarkId":445},{"videoId":70111470,"bookmarkId":470},{"videoId":654356453,"bookmarkId":453}]';

				pairs = pairs.sortBy(function(v) { return v.videoId });
				got = JSON.stringify(pairs);
				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var videos = [
						{
							"id": 70111470,
							"title": "Die Hard",
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
						},
						{
							"id": 65432445,
							"title": "The Chamber",
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 4.0,
						},
						{
							"id": 675465,
							"title": "Fracture",
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
							"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
							"rating": 5.0,
						}
					],
					bookmarks = [
						{id: 470, time: 23432},
						{id: 453, time: 234324},
						{id: 445, time: 987834}
					];

				return Array.
					zip(
					  videos,
					  bookmarks,
					  function(video, bookmark) {
						return {videoId: video.id, bookmarkId: bookmark.id};
					  });
			}
        </pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 24: Retrieve each video's id, title, middle interesting moment time, and <i>smallest</i> box art url.</h4>

		<p>This is a variation of the problem we solved earlier. This time each video has an interesting moments collection,
			each representing a time during which a screenshot is interesting or representative of the title as a whole. Notice
			that both the boxarts and interestingMoments arrays are located at the same depth in the tree. Retrieve the time of
			the middle interesting moment and the smallest box art url <i>simultaneously</i> with zip(). Return an {id, title,
			time, url} object for each video.</p>
		<textarea class="code" rows="60" cols="80">
			function() {
				var movieLists = [
						{
							name: "New Releases",
							videos: [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxarts": [
										{ width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
										{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"interestingMoments": [
										{ type: "End", time:213432 },
										{ type: "Start", time: 64534 },
										{ type: "Middle", time: 323133}
									]
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxarts": [
										{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
										{ width: 140, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }

									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"interestingMoments": [
										{ type: "End", time:54654754 },
										{ type: "Start", time: 43524243 },
										{ type: "Middle", time: 6575665}
									]
								}
							]
						},
						{
							name: "Instant Queue",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxarts": [
										{ width: 130, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
										{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"interestingMoments": [
										{ type: "End", time:132423 },
										{ type: "Start", time: 54637425 },
										{ type: "Middle", time: 3452343}
									]
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxarts": [
										{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
										{ width: 120, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
										{ width: 300, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"interestingMoments": [
										{ type: "End", time:45632456 },
										{ type: "Start", time: 234534 },
										{ type: "Middle", time: 3453434}
									]
								}
							]
						}
					];

				//------------ COMPLETE THIS EXPRESSION --------------
				return movieLists.
					concatMap(function(movieList) {

					});

			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<pre class="verifier">
			// Find id, title, smallest box art, and bookmark id
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					videos = fun(),
					got,
					expected = '[{"id":675465,"title":"Fracture","time":3453434,"url":"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg"},{"id":65432445,"title":"The Chamber","time":3452343,"url":"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg"},{"id":70111470,"title":"Die Hard","time":323133,"url":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"},{"id":654356453,"title":"Bad Boys","time":6575665,"url":"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg"}]';

				videos = videos.sortBy(function(v) { return v.id });
				got = JSON.stringify(videos);
				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var movieLists = [
						{
							name: "New Releases",
							videos: [
								{
									"id": 70111470,
									"title": "Die Hard",
									"boxarts": [
										{ width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
										{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"interestingMoments": [
										{ type: "End", time:213432 },
										{ type: "Start", time: 64534 },
										{ type: "Middle", time: 323133}
									]
								},
								{
									"id": 654356453,
									"title": "Bad Boys",
									"boxarts": [
										{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
										{ width: 140, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }

									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"interestingMoments": [
										{ type: "End", time:54654754 },
										{ type: "Start", time: 43524243 },
										{ type: "Middle", time: 6575665}
									]
								}
							]
						},
						{
							name: "Instant Queue",
							videos: [
								{
									"id": 65432445,
									"title": "The Chamber",
									"boxarts": [
										{ width: 130, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
										{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 4.0,
									"interestingMoments": [
										{ type: "End", time:132423 },
										{ type: "Start", time: 54637425 },
										{ type: "Middle", time: 3452343}
									]
								},
								{
									"id": 675465,
									"title": "Fracture",
									"boxarts": [
										{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
										{ width: 120, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
										{ width: 300, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
									],
									"url": "http://api.netflix.com/catalog/titles/movies/70111470",
									"rating": 5.0,
									"interestingMoments": [
										{ type: "End", time:45632456 },
										{ type: "Start", time: 234534 },
										{ type: "Middle", time: 3453434}
									]
								}
							]
						}
					];

				//------------ COMPLETE THIS EXPRESSION --------------
				return movieLists.concatMap(function(movieList) {
					return movieList.videos.concatMap(function(video) {
						return Array.zip(
							video.boxarts.reduce(function(acc,curr) {
								if (acc.width * acc.height < curr.width * curr.height) {
							  	  	return acc;
								}
								else {
							  		return curr;
								}
						  	}),
							video.interestingMoments.filter(function(interestingMoment) {
								return interestingMoment.type === "Middle";
							}),
						  	function(boxart, interestingMoment) {
								return {id: video.id, title: video.title, time: interestingMoment.time, url: boxart.url};
						  	});
					});
				});
			}
		</pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h3>Powerful Queries</h3>

		<p>Now that we've learned the five operators let's flex our muscles and write some powerful queries.</p>

		<h4>Exercise 25: Converting from Arrays to Trees</h4>

		<p>When information is organized in a tree like a JSON expression, relationships point from parent to child. In
			relational systems like databases, relationships point from children to their parents. Both ways of organizing
			information are equivalent, and depending on the circumstances, we might get data organized in one way or
			another. It may surprise you to learn that you can use the 5 query functions you already know to easily convert
			between these representations. In other words, <b>not only can you query arrays from trees, you can query trees
				from arrays</b>.</p>

		<p>We have 2 arrays each containing lists, and videos respectively. Each video has a listId field indicating its
			parent list. We want to build an array of list objects, each with a name and a videos array. The videos array
			will contain the video's id and title. In other words we want to build the following structure:</p>
        <pre>
			[
				{
					"name": "New Releases",
					"videos": [
						{
							"id": 65432445,
							"title": "The Chamber"
						},
						{
							"id": 675465,
							"title": "Fracture"
						}
					]
				},
				{
					"name": "Thrillers",
					"videos": [
						{
							"id": 70111470,
							"title": "Die Hard"
						},
						{
							"id": 654356453,
							"title": "Bad Boys"
						}
					]
				}
			]
        </pre>
		<p><b>Note: please make sure when creating objects (both lists and videos) that you add properties in the same order
			as above. This doesn't impact the correctness of your code, but the verifier expects properties to be created in
			this order.</b></p>
		<textarea class="code" rows="60" cols="80">
			function() {
				var lists = [
						{
							"id": 5434364,
							"name": "New Releases"
						},
						{
							"id": 65456475,
							"name": "Thrillers"
						}
					],
					videos = [
						{
							"listId": 5434364,
							"id": 65432445,
							"title": "The Chamber"
						},
						{
							"listId": 5434364,
							"id": 675465,
							"title": "Fracture"
						},
						{
							"listId": 65456475,
							"id": 70111470,
							"title": "Die Hard"
						},
						{
							"listId": 65456475,
							"id": 654356453,
							"title": "Bad Boys"
						}
					];

				return lists. // complete this expression
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output"></div>
        <pre class="verifier">
			// Combine videos and bookmarks
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					pairs = fun(),
					got,
					expected = '[{"name":"New Releases","videos":[{"id":65432445,"title":"The Chamber"},{"id":675465,"title":"Fracture"}]},{"name":"Thrillers","videos":[{"id":70111470,"title":"Die Hard"},{"id":654356453,"title":"Bad Boys"}]}]';

				got = JSON.stringify(pairs);
				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
		<pre class="answer">
			function() {
				var lists = [
						{
							"id": 5434364,
							"name": "New Releases"
						},
						{
							"id": 65456475,
							name: "Thrillers"
						}
					],
					videos = [
						{
							"listId": 5434364,
							"id": 65432445,
							"title": "The Chamber"
						},
						{
							"listId": 5434364,
							"id": 675465,
							"title": "Fracture"
						},
						{
							"listId": 65456475,
							"id": 70111470,
							"title": "Die Hard"
						},
						{
							"listId": 65456475,
							"id": 654356453,
							"title": "Bad Boys"
						}
					];

				return lists.map(function(list) {
					return {
						name: list.name,
						videos:
							videos.
								filter(function(video) {
									return video.listId === list.id;
								}).
								map(function(video) {
									return {id: video.id, title: video.title};
								})
					};
				});
			}
        </pre>
		<p class="post">Looks like you figured out that you can use map and filter to <i>join</i> two different arrays by a
			key. Now let's try a more complex example...</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 26: Converting from Arrays to <i>Deeper</i> Trees</h4>

		<p>Let's try creating a deeper tree structure. This time we have 4 separate arrays each containing lists, videos,
			boxarts, and bookmarks respectively. Each object has a parent id, indicating its parent. We want to build an
			array of list objects, each with a name and a videos array. The videos array will contain the video's id, title,
			bookmark time, and smallest boxart url. In other words we want to build the following structure:</p>
        <pre>
			[
				{
					"name": "New Releases",
					"videos": [
						{
							"id": 65432445,
							"title": "The Chamber",
							"time": 32432,
							"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg"
						},
						{
							"id": 675465,
							"title": "Fracture",
							"time": 3534543,
							"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture120.jpg"
						}
					]
				},
				{
					"name": "Thrillers",
					"videos": [
						{
							"id": 70111470,
							"title": "Die Hard",
							"time": 645243,
							"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"
						},
						{
							"id": 654356453,
							"title": "Bad Boys",
							"time": 984934,
							"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg"
						}
					]
				}
			]
        </pre>

		<p><b>Note: please make sure when creating objects (both lists and videos) that you add properties in the same order
			as above. This doesn't impact the correctness of your code, but the verifier expects properties to be created in
			this order.</b></p>
		<textarea class="code" rows="60" cols="80">
			function() {
				var lists = [
						{
							"id": 5434364,
							"name": "New Releases"
						},
						{
							"id": 65456475,
							name: "Thrillers"
						}
					],
					videos = [
						{
							"listId": 5434364,
							"id": 65432445,
							"title": "The Chamber"
						},
						{
							"listId": 5434364,
							"id": 675465,
							"title": "Fracture"
						},
						{
							"listId": 65456475,
							"id": 70111470,
							"title": "Die Hard"
						},
						{
							"listId": 65456475,
							"id": 654356453,
							"title": "Bad Boys"
						}
					],
					boxarts = [
						{ videoId: 65432445, width: 130, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
						{ videoId: 65432445, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" },
						{ videoId: 675465, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
						{ videoId: 675465, width: 120, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
						{ videoId: 675465, width: 300, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
						{ videoId: 70111470, width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
						{ videoId: 70111470, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" },
						{ videoId: 654356453, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
						{ videoId: 654356453, width: 140, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }
					],
					bookmarks = [
						{ videoId: 65432445, time: 32432 },
						{ videoId: 675465, time: 3534543 },
						{ videoId: 70111470, time: 645243 },
						{ videoId: 654356453, time: 984934 }
					];

				return lists. // complete this expression

			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output">
		</div>
		<pre class="verifier">
			// Combine videos and bookmarks
			function(str) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					pairs = fun(),
					got,
					expected = '[{"name":"New Releases","videos":[{"id":65432445,"title":"The Chamber","time":32432,"boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg"},{"id":675465,"title":"Fracture","time":3534543,"boxart":"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg"}]},{"name":"Thrillers","videos":[{"id":70111470,"title":"Die Hard","time":645243,"boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"},{"id":654356453,"title":"Bad Boys","time":984934,"boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg"}]}]';

				got = JSON.stringify(pairs);
				if (got !== expected) {
					showLessonErrorMessage(expected, got);
				}
			}
		</pre>
        <pre class="answer">
			function() {
				var lists = [
						{
							"id": 5434364,
							"name": "New Releases"
						},
						{
							"id": 65456475,
							name: "Thrillers"
						}
					],
					videos = [
						{
							"listId": 5434364,
							"id": 65432445,
							"title": "The Chamber"
						},
						{
							"listId": 5434364,
							"id": 675465,
							"title": "Fracture"
						},
						{
							"listId": 65456475,
							"id": 70111470,
							"title": "Die Hard"
						},
						{
							"listId": 65456475,
							"id": 654356453,
							"title": "Bad Boys"
						}
					],
					boxarts = [
						{ videoId: 65432445, width: 130, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
						{ videoId: 65432445, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" },
						{ videoId: 675465, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
						{ videoId: 675465, width: 120, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
						{ videoId: 675465, width: 300, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
						{ videoId: 70111470, width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
						{ videoId: 70111470, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" },
						{ videoId: 654356453, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
						{ videoId: 654356453, width: 140, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }
					],
					bookmarks = [
						{ videoId: 65432445, time: 32432 },
						{ videoId: 675465, time: 3534543 },
						{ videoId: 70111470, time: 645243 },
						{ videoId: 654356453, time: 984934 }
					];

				return lists.map(function(list) {
					return {
						name: list.name,
						videos:
							videos.
								filter(function(video) {
									return video.listId === list.id;
								}).
								concatMap(function(video) {
									return Array.zip(
										bookmarks.filter(function(bookmark) {
											return bookmark.videoId === video.id;
										}),
										boxarts.filter(function(boxart) {
											return boxart.videoId === video.id;
										}).
										reduce(function(acc,curr) {
											return acc.width * acc.height < curr.width * curr.height ? acc : curr;
										}),
										function(bookmark, boxart) {
											return { id: video.id, title: video.title, time: bookmark.time, boxart: boxart.url };
										});
							})
					};
				});

			}
        </pre>
		<p class="post">Wow! That's a large query, but the code is still small relative to the amount of work it's doing. If
			we rewrote this query with a series of loops our code would be much less self-describing. Loops don't give the
			reader any information about the kind of operation being performed. Every time you see a loop, you need to
			carefully read through the code to find out what's being done. Is it a projection? A filter? A reduction? Why
			use loops for querying data when we've demonstrated that the 5 functions can be used to create virtually any
			output we want?</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 27: Stock Ticker</h4>

		<p>Let's try an easier question. Let's say we have a collection of all of the prices for NASDAQ stocks over time.
			Every time the price of a stock changes on the NASDAQ ticker an entry is added to this collection. Let's say
			that ten days ago you bought shares in Microsoft, and now you want to print all of the MSFT share prices since
			then. Filter the collection for MSFT trades starting from ten days ago and print each price record (including
			the time stamp) using the print() function. <b>Note: this is not a trick question. It's as easy as it seems.</b>
		</p>
		<pre>
			// The pricesNASDAQ collection looks something like this...
			var pricesNASDAQ = [
				// ... from the NASDAQ's opening day
				{name: "ANGI", price: 31.22, timeStamp: new Date(2011,11,15) },
				{name: "MSFT", price: 32.32, timeStamp: new Date(2011,11,15) },
				{name: "GOOG", price: 150.43, timeStamp: new Date(2011,11,15)},
				{name: "ANGI", price: 28.44, timeStamp: new Date(2011,11,16)},
				{name: "GOOG", price: 199.33, timeStamp: new Date(2011,11,16)},
				// ...and up to the present.
			];
		</pre>
		<textarea class="code" rows="60" cols="80">
			function(pricesNASDAQ, printRecord) {
				var microsoftPrices,
					now = new Date(),
					tenDaysAgo = new Date( now.getFullYear(), now.getMonth(), now.getDate() - 10);

				// use filter() to filter the trades for MSFT prices recorded any time after 10 days ago
				microsoftPrices =
					pricesNASDAQ.
						filter(function(priceRecord) {	 // finish this expression

				// Print the trades to the output console
				microsoftPrices.
					forEach(function(priceRecord) {
						printRecord(priceRecord);
					});
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<p>Console</p>

		<div class="output" style="height:200px;overflow:scroll">
		</div>
        <pre class="verifier">
			// Combine videos and bookmarks
			function(str, lesson) {
				preVerifierHook();
				var output = $(".output", lesson)[0],
					fun = eval("(" + str + ")"),
					stockSymbols = ["MSFT", "GOOG","NFLX","OSTK"],
					input = [{name: "MSFT", price: 32.32, timeStamp: new Date() }, {name: "GOOG", price: 150.43, timeStamp: new Date(2011,11,15)}],
					expected = [input[0]],
					items = [],
					counter = 0;
					confirmPrint = function(item) {
						items.push(item);
					},
					print = function(item) {
						output.innerHTML += "MSFT " + item.price + " at " + item.timeStamp.toString() + "<" + "br" + ">";
						output.scrollTop = output.scrollHeight;
						counter++;
						if (counter % 100 === 0) {
							output.innerHTML = "";
						}
					},
					stocks =
						Rx.Observable.
							interval(250).
							map(function() {
								var symbol = stockSymbols[Math.floor(Math.random() * stockSymbols.length)];
								return {name: symbol, price: 30 + ((Math.floor(Math.random() * 100))/200), timeStamp: new Date()};
							});

				fun(input, confirmPrint);

				if (JSON.stringify(items) !== JSON.stringify(expected)) {
					throw "Got " + JSON.stringify(items, null, 4) + ", expected " + JSON.stringify(expected, null, 4);
				}

				fun(stocks, print);
			}
		</pre>
        <pre class="answer">
			function(pricesNASDAQ, printRecord) {
				var microsoftPrices,
					now = new Date(),
					tenDaysAgo = new Date( now.getFullYear(), now.getMonth(), now.getDate() - 10);

				// use filter() to filter the trades for MSFT prices recorded any time after 10 days ago
				microsoftPrices =
					pricesNASDAQ.
						filter(function(priceRecord) {
						  return priceRecord.name === 'MSFT' && priceRecord.timeStamp > tenDaysAgo;
						});

				// Print the trades to the output console
				microsoftPrices.
					forEach(function(priceRecord) {
						printRecord(priceRecord);
					});
			}
        </pre>
		<div class="post">
			<p><b>Notice that the console is changing over time.</b> Now look at the time stamps on the stock prices. We're
				displaying stock prices sampled <i>after</i> we ran our program! How could our array have contained stock
				price records from the future? Did we accidentally rip a hole in the space-time continuum?</p>

			<p>The solution to the riddle is that <b>pricesNASDAQ is <u>not</u> an array</b>. Unlike an array, which can
				only store a snapshot of stock prices, this new type can react to changes and update over time.</p>

			<p>In the next section I'll reveal the inner workings of this magical type. You'll learn how you can use it to
				model everything from mouse events to asynchronous JSON requests. Finally I'll show you how <b>you can query
					this type using the 5 query functions you already know.</b> It's about time we gave this magical type a
				name...</p>
			<h2>Working with Observables</h2>

			<p>Microsoft's open-source <a href="http://msdn.microsoft.com/en-us/data/gg577609.aspx">Reactive Extensions</a> library
				introduces a new collection type to Javascript: <b>Observable.</b> An Observable is a lot like an Event. Like an
				Event, <b>an Observable is a sequence of values that a data producer <i>pushes</i> to the consumer.</b> However
				unlike an Event, <b>an Observable can signal to a listener that it has completed,</b> and will send no more data.
			</p>

			<p>Observables can send data to consumers asynchronously. Unlike Array, there's no Javascript literal syntax for
				creating Observable sequences. However we can build a helper method that visually describes the contents of
				sequences as well as the times between each item's arrival. The <b>seq</b> function creates an Observable from an
				array of items, and adds a delay for every empty item encountered. Every ,,, adds up to a second.</p>
			<pre>
				// An array of numbers 1,2,3
				var numbers123Array =      [1,2,3];

				// A sequence that returns 1, and then after 4 seconds returns 2,
				// and then after another second returns 3, and then completes.
				var numbers123Observable = seq([1,,,,,,,,,,,,2,,,3]);

				// Like Arrays, Observables can contain any object - even Arrays.
				var observableOfArrays = seq([ [1,2,3],,,,,,[4,5,6],,,,,,,,,,,[1,2] ]);
			</pre>
			<p>Observables are a sequence of values, delivered one after the other. Therefore it's possible that an Observable can
				go on sending data to a listener forever just like a mouse move event. To create a sequence that doesn't complete,
				you can add a trailing ,,, to the end of the items passed to seq().</p>
			<pre>
				// The trailing ,,, ensures that the sequence will <u>not</u> complete.
				var mouseMovesObservable =
					seq([ {x: 23, y: 55},,,,,,,{x: 44, y: 99},,,{x:55,y:99},,,{x: 54, y:543},,, ]);

				// No trailing ,,, indicates that sequence <u>will</u> complete.
				var numbers123Observable = seq([1,,,2,,,3]);
			</pre>
			<p>Querying Arrays only gives us a snapshot. By contrast, querying Observables allows us to create data sets that react
				and update as the system changes over time. This enables a very powerful type of programming known as <i>reactive
					programming</i>.</p>

			<p>Let's start off by contrasting Observable with Events...</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 28: Subscribing to an event</h4>

		<p>You're probably used to thinking about events as a list of handlers stored in an object. In this example, we
			subscribe to a button click event and then unsubscribe the first time the button is clicked.</p>
		<textarea class="code" rows="60" cols="80">
			function(button) {
				// the button click handler
				var handler = function(ev) {
					// Unsubscribe from the button event.
					button.removeEventListener("click", handler);

					alert("Button was clicked. Unsubscribing from event.");
				};

				// add the button click handler
				button.addEventListener("click", handler);
			}
		</textarea>
		<button class="go">Run</button>
		<div class="output" style="text-align:center">
			<button class="button" id="thisfirstbutton">Click this button after running the program</button>
		</div>
		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					button = $('.button', lesson)[0];

				fun(button);
			}
		</pre>
		<p class="post">Ask yourself this question: <b>How is subscribing to an event different than traversing an
			array?</b> Both operations involve sending a listener a sequence of items by repeatedly invoking a function. So
			why can't we traverse Arrays and Events the same way?</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 29: Traversing an Event</h4>

		<p>Subscribing to an Event and traversing an Array are fundamentally the same operation. The only difference is that
			<b>Array traversal is synchronous and completes, and Event traversal is asynchronous and <u>never completes</u>.</b>
			If we convert a button click Event to an Observable object, we can use forEach() to traverse the Event.</p>
		<textarea class="code" rows="60" cols="80">
			function(button) {
				var buttonClicks = Observable.fromEvent(button, "click");

				// In the case of an Observable, forEach returns a subscription object.
				var subscription =
					buttonClicks.
						forEach(function(clickEvent) {
							alert("Button was clicked. Stopping Traversal.");

							// Stop traversing the button clicks
							subscription.dispose();
						});
			}
		</textarea>
		<button class="go">Run</button>
		<div class="output" style="text-align:center">
			<button class="button">Click this button after running the program</button>
		</div>
		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					button = $('.button', lesson)[0];

				fun(button);
			}
		</pre>
		<div class="post">
			<p>Notice that <b>Observable's forEach() function returns a Subscription object.</b> Disposing of a Subscription
				object unsubscribes from the event and prevents memory leaks. Disposing of a subscription is the
				asynchronous equivalent of stopping half-way through a counting for loop.</p>

			<p>Disposing of a Subscription object is basically the same as calling removeEventListener(). On the surface,
				these two approaches to Event handling don't seem to be very different. Under the circumstances, why should
				we bother converting Events to Observables? The reason is that <b>if we convert Events to Observable
					Objects, we can use powerful functions to transform them.</b> In the next exercise we'll learn how we
				can use one such function to avoid dealing with Subscriptions in many cases...</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 30: Completing Sequences with take()</h4>

		<p><b>Have you ever wished that you could listen for the next occurrence of an event and then immediately
			unsubscribe?</b> For example, developers will often attach an event handler to window.onload, expecting that
			their event handler will only be called once.</p>
		<pre>
			window.addEventListener(
				"load",
				function()
					// do some work here, but expect this function will only be called once.
				})
		</pre>
		<p>In instances such as this, it's good practice to unsubscribe from the event after it's fired. Failing to
			unsubscribe is a <b>memory leak</b>. Depending on the circumstances, memory leaks can seriously destablize your
			application and can be very difficult to track down. Unfortunately unsubscribing from an event after one
			occurrence can be cumbersome:
		</p>
		<pre>
			var handler = function() {
				// do some work here, then unsubscribe from the event
				window.removeEventListener("load", handler)
			};
			window.addEventListener("load", handler);
		</pre>
		<p>Wouldn't it be nice if there was an easier way to code this? That's why Observable has a take() function. The
			take() function works like this...
		</p>
		<pre>
			seq([1,,,2,,,3,,,4,,,5,,,6,,,]).take(3) === seq([1,,,2,,,3]);
		</pre>
		<p>An Observable based on an Event will <u>never</u> complete on its own. The take() function creates a new sequence
			that completes after a discrete number of items arrive. This is important, because unlike an Event, <i>when an
				Observable sequence completes it unsubscribes all of its listeners.</i> That means that <b>if we use take()
				to complete our Event sequence, we don't need to unsubscribe!</b>
		</p>

		<p>Let's repeat the previous exercise, in which we listened for a single button click and then unsubscribed. This
			time let's use the take() function to complete the sequence after the button is clicked.</p>
		<textarea class="code" rows="60" cols="80">
			function(button) {
				var buttonClicks = Observable.fromEvent(button, "click");

				// Use take() to listen for only one button click
				// and unsubscribe.
				buttonClicks.
					// Insert take() call here
					forEach(function(clickEvent) {
						alert("Button was clicked once. Stopping Traversal.");
					});
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<div class="output" style="text-align:center">
			<button class="button">Click this button after pressing the run button</button>
		</div>
		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					button = $('.button', lesson)[0];

				fun(button);
			}
		</pre>
		<pre class="answer">
			function(button) {
				var buttonClicks = Observable.fromEvent(button, "click");

				// Use take() to listen for only one button click
				// and unsubscribe.
				buttonClicks.
					take(1).
					forEach(function() {
						alert("Button was clicked once. Stopping Traversal.");
					});
			}
		</pre>
		<div class="post">
			<p>The take() function is great way of listening for a discrete number of events and then unsubscribing, but
				Observable has an even <i>more</i> flexible function that we can use to complete sequences...</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 31: Completing sequences with takeUntil()</h4>

		<p><b>Have you ever wanted to unsubscribe from one Event when another Event fires?</b> Observable's takeUntil() function
		is a convenient way of completing a sequence when another Event occurs.</b> Here's how takeUntil() works:
		</p>
		<pre>
			var numbersUntilStopButtonPressed =
				seq(              [ 1,,,2,,,3,,,4,,,5,,,6,,,7,,,8,,,9,,, ]).
					takeUntil(seq([  ,,, {eventType: "click"},,, ]) )                    === seq([ 1,,,2 ])
		</pre>
		<p>Earlier we (unknowningly) built a dynamic Microsoft price stock ticker using Observable. The problem with that stock
			ticker was that <i>it kept going on forever</i>. If left unchecked, all the entries in the log could use up all of
			the memory on the page. In the exercise below, filter the Observable sequence of NASDAQ prices for MSFT stock
			prices, use the fromEvent() function to create an Observable .
		</p>
		<textarea class="code" rows="60" cols="80">
			function(pricesNASDAQ, printRecord, stopButton) {
				var stopButtonClicks = // ----- To finish this expression, use Observable.fromEvent to convert the "click" event on the stop button to an Observable
					microsoftPrices =
						pricesNASDAQ.
							filter(function(priceRecord) {
								return priceRecord.name === "MSFT";
							}).
							// ----- To finish this expression, use takeUntil to complete the sequence when stopButtonClicks fires.

				microsoftPrices.
					forEach(function(priceRecord) {
						printRecord(priceRecord);
					});
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<button class="stop">Stop</button>
		&lt;-Press this button to complete the sequence of microsoft stock prices.
		<p>Console</p>

		<div class="output" style="height:200px;overflow:scroll">
		</div>
		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					output = $(".output", lesson)[0],
					stopButton = $('.stop', lesson)[0],
					stockSymbols = ["MSFT", "GOOG","NFLX","OSTK"],
					input = [{name: "MSFT", price: 32.32, timeStamp: new Date() }, {name: "GOOG", price: 150.43, timeStamp: new Date(2011,11,15)}],
					expected = [input[0]],
					items = [],
					counter = 0,
					print = function(item) {
						output.innerHTML += "MSFT " + item.price + " at " + item.timeStamp.toString() + "<" + "br" + ">";
						output.scrollTop = output.scrollHeight;
						counter++;
						if (counter % 100 === 0) {
							output.innerHTML = "";
						}
					},
					stocks =
						Rx.Observable.
							interval(250).
							map(function() {
								var symbol = stockSymbols[Math.floor(Math.random() * stockSymbols.length)];
								return {name: symbol, price: 30 + ((Math.floor(Math.random() * 100))/200), timeStamp: new Date()};
							});

				fun(stocks, print, stopButton);
			}
		</pre>
		<pre class="answer">
			function(pricesNASDAQ, printRecord, stopButton) {
				var stopButtonClicks = Observable.fromEvent(stopButton,"click"),
					microsoftPrices =
						pricesNASDAQ.
							filter(function(priceRecord) {
								return priceRecord.name === "MSFT";
							}).
							takeUntil(stopButtonClicks);

				microsoftPrices.
					forEach(function(priceRecord) {
						printRecord(priceRecord);
					});
			}
		</pre>
		<div class="post">
			<p>We've learned that Observable sequences are much more powerful than raw events, because they can complete. <b>The
				take() and takeUntil() functions are powerful enough to ensure that we never have to unsubscribe from another event
				again!</b> This reduces the risk of memory leaks and makes our code more readable.
			</p>

			<p>Here's what we learned in this section:</p>
			<ul>
				<li>We can traverse Observables using forEach().</li>
				<li>We can use fromEvent() to convert Events into Observables that never complete.</li>
				<li>We can apply take() and takeUntil() to an Observable to create a new sequence which <i>does</i> complete.</li>
			</ul>
			<p>In the next section we'll learn how to combine events to create more complex events. You'll be suprised how easily
				you can solve complex, asynchronous problems!
			</p>

			<h3>Querying Observables</h3>

			<p>What's the difference between these two tasks?</p>
			<ul>
				<li>Creating a flat list of movies with a rating of 5.0 from a bunch of movie lists.</li>
				<li>Creating a sequence of all the mouse drag events from the mouseDown, mouseMove, and mouseUp events.</li>
			</ul>
			<p>You might think of them as different, and might code them very differently, but <b>these tasks are fundamentally the
				same.</b> Both of these tasks are <i>queries</i>, and can be solved using the functions you've learned in these
				exercises.
			</p>

			<p><b>The difference between traversing an Array and traversing an Observable is <i>the direction in which the data
				moves.</i></b> When traversing an Array, the client <i>pulls</i> data from the data source, blocking until it gets a
				result. When traversing Observables, the data source <i>pushes</i> data at the client whenever it arrives.
			</p>

			<p>It turns out that the direction in which data moves is <i>orthogonal</i> to querying that data. In other words, <b>when
				we're querying data it doesn't matter whether we pull data, or data is pushed at us.</b> In either case the query
				methods make the same transformations. The only thing that changes is the input and output type respectively. If we
				filter an Array, we get a new Array. If we filter an Observable, we get a new Observable, and so on.
			</p>

			<p>Take a look at how the query methods transform Observables and Arrays:</p>
			<pre>
				// <b>map()</b>

				[1,2,3].map(function(x) { return x + 1 })                       === [2,3,4]
				seq([1,,,2,,,3]).map(function(x) { return x + 1})               === seq([2,,,3,,,4])
				seq([1,,,2,,,3,,,]).map(function(x) { return x + 1 })           === seq([2,,,3,,,4,,,])

				// <b>filter()</b>

				[1,2,3].filter(function(x) { return x > 1; })                   === [2,3]
				seq([1,,,2,,,3]).filter(function(x) { return x > 1; })          === seq([2,,,3])
				seq([1,,,2,,,3,,,]).filter(function(x) { return x > 1; })       === seq([2,,,3,,,])

				// <b>concatAll()</b>

				[ [1, 2, 3], [4, 5, 6] ].concatAll()                             === [1,2,3,4,5,6]
				seq([ seq([1,,,2,,,3]),,,seq([4,,,5,,,6]) ]).concatAll()         === seq([1,,,2,,,3,,,4,,,5,,,6])

				// If a new sequence arrives before all the items
				// from the previous sequence have arrived, no attempt
				// to retrieve the new sequence's elements is made until
				// the previous sequence has completed. As a result the
				// order of elements in the sequence is preserved.
				seq([
					seq([1,,,, ,2, ,3])
					,,,seq([,,4, ,5, ,,6]) ]).
					concatAll()                                                  === seq([1,,,,,2,,3,,4,,5,,,6])

				// Notice that as long as at least one sequence being
				// concatenated is incomplete, the concatenated sequence is also
				// incomplete.
				seq([
					seq([1,, ,,, ,,,2,,,3])
					,,,seq([4,,,5,,, ,,, ,,6,,,]) ]).
					concatAll()                                                  === seq([1,,,,,,,,2,,,3,4,,,5,,,,,,,,6,,,])

				// <b>reduce()</b>

				[ 1, 2, 3 ].reduce(sumFunction)                                 === [ 6 ]
				seq([ 1,,,2,,,3 ]).reduce(sumFunction)                          === seq([,,,,,,6])

				// Reduced sequences do <u>not</u> complete until the
				// sequence does.
				seq([ 1,,,2,,,3,,, ]).reduce(sumFunction)                       === seq([ ,,,,,,,,,])

				// <b>zip()</b>

				// In both Arrays and Observables, the zipped sequence
				// completes as soon as either the left or right-hand
				// side sequence completes.
				Array.zip([1,2],[3,4,5], sumFunction)                           === [4,6]
				Observable.zip(seq([1,,,2]),seq([3,,,4,,,5]), sumFunction)      === seq([4,,,6])

				// <b>take()</b>
				[1,2,3].take(2)                                                 === [1, 2]
				seq([ 1,,,2,,,3 ]).take(2)                                      === seq([ 1,,,2 ])
				seq([ 1,,,2,,,3,,, ]).take(2)                                   === seq([ 1,,,2 ])

				// <b>takeUntil()</b>

				// takeUntil works for Arrays, but it's not very useful
				// because the result will always be an empty array.
				[1,2,3].takeUntil([1])                                          === []

				seq([1,,,2,,,3,,, ]).takeUntil(
				seq([ ,,, ,,4 , ]))                                             === seq([ 1,,,2 ])

			</pre>
			<p>Remember when I <a href="#indexers">prohibited the use of array indexers?</a> The reason for that restriction should
				now become clearer to you. Whereas the 5 functions can be used on <i>any</i> collection, indexers can only be used
				on collections that support random-access (like Array). If you avoid indexers and stick to the functions you've
				learned in this tutorial, you'll have a unified programming model for transforming <i>any</i> collection. Having a
				unified programming model makes it trivial to convert synchronous code to asynchronous code, a process which would
				otherwise be very difficult. As we've demonstrated, you don't need indexers to perform complex collection
				transformations.</p>

			<p>Now that we've seen that we can query asychronous and synchronous data sources using the same programming model,
				let's use Observable and our query functions to create complex new events.</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 32: Creating a mouse drag event</h4>

		<p>Remember the exercise we solved earlier? The one in which we retrieved all the movies with a rating of 5.0 from
			an array of movie lists? If we were to describe the solution in pseudocode it might read something like
			this...
		</p>

		<p><b>"For every movie list, retrieve only those videos with a rating of 5.0"</b></p>
		<pre>
			var moviesWithHighRatings =
				movieLists.
					concatMap(function(movieList) {
						return movieList.videos.
							filter(function(video) {
								return video.rating === 5.0;
							});
					});
		</pre>
		<p>Now we're going to create a mouseDrag event for a DOM object. If we were to describe <i>this</i> problem as
			pseudocode it might read something like this...
		</p>

		<p><b>"For every
			<del>movie list</del>
			mouse down event on the sprite, retrieve only those
			<del>videos with a rating of 5.0</del>
			mouse move events that occur before the next mouse up event."</b>
		</p>
		</p>
		<textarea class="code" rows="60" cols="80">
			function(sprite, spriteContainer) {
				var spriteMouseDowns = Observable.fromEvent(sprite, "mousedown"),
					spriteContainerMouseMoves = Observable.fromEvent(spriteContainer, "mousemove"),
					spriteContainerMouseUps = Observable.fromEvent(spriteContainer, "mouseup"),
					spriteMouseDrags =
						// For every mouse down event on the sprite...
						spriteMouseDowns.
							// --------------------------------------------------------
							//					  INSERT CODE HERE
							// --------------------------------------------------------
							// Complete this expression...
							// For every mouse down event, return the mouse move event
							// sequence until a mouse up event occurs.

				// For each mouse drag event, move the sprite to the absolute page position.
				spriteMouseDrags.forEach(function(dragPoint) {
					sprite.style.left = dragPoint.pageX + "px";
					sprite.style.top = dragPoint.pageY + "px";
				});
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<button class="resetSprite">Reset Sprite</button>
		<div class="control output container" style="width:100%;height:200px;text-align:center">
            <span class="control sprite" style="position:absolute; border: solid 1px black; background-color: white;z-index:23">
                Sprite
            </span>
			<span style="position:relative; top: 100px;">Sprite Container</span>
		</div>

		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					output = $(".output", lesson)[0],
					container = $(".container", lesson)[0],
					sprite = $(".sprite",lesson)[0],
					moveSprite = function(point) {
						sprite.style.left = point.pageX + "px";
						sprite.style.top = point.pageY + "px";
					}

				fun(sprite, container, moveSprite);
			}
		</pre>
		<pre class="answer">
			function(sprite, spriteContainer) {
				var spriteMouseDowns = Observable.fromEvent(sprite, "mousedown"),
					spriteContainerMouseMoves = Observable.fromEvent(spriteContainer, "mousemove"),
					spriteContainerMouseUps = Observable.fromEvent(spriteContainer, "mouseup"),
					spriteMouseDrags =
						// For every mouse down event on the sprite...
						spriteMouseDowns.
							concatMap(function(contactPoint) {
								// ...retrieve all the mouse move events on the sprite container...
								return spriteContainerMouseMoves.
									// ...until a mouse up event occurs.
									takeUntil(spriteContainerMouseUps);
							});

				// For each mouse drag event, move the sprite to the absolute page position.
				spriteMouseDrags.forEach(function(dragPoint) {
					sprite.style.left = dragPoint.pageX + "px";
					sprite.style.top = dragPoint.pageY + "px";
				});
			}
        </pre>
		<p class="post">Now we're really cooking. We just created a complex event with a few lines of code. We didn't have to
			deal with any subscriptions objects, or write any stateful code whatsoever. Let's try something a little
			harder.</p>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 33: Improving our mouse drag event</h4>

		<p>Our mouse drag event is a little <i>too</i> simple. Notice that when we drag around the sprite, it always
			positions itself at the top-left corner of the mouse. Ideally we'd like our drag event to offset its
			coordinates, based on where the mouse was when the mouse down event occurred. This will make our mouse drag more
			closely resemble moving a real object with our finger.
		</p>

		<p>Let's see if you can adjust the coordinates in the mouse drag event, based on the mousedown location on the
			sprite. The mouse events are sequences, and they look something like this:
		</p>

		<pre>
			spriteContainerMouseMoves =
				seq([ {x: 200, y: 400, offsetX: 10, offsetY: 15},,,{x: 210, y: 410, offsetX: 20, offsetY: 26},,, ])
		</pre>
		<p>
			Each item in the mouse event sequences contains an x, y value that represents that absolute location of the
			mouse event on the page. The moveSprite() function uses these coordinates to position the sprite. Each item in
			the sequence <i>also</i> contains a pair of offsetX and offsetY properties that indicate the position of the
			mouse event relative to the event target.
		</p>

		<textarea class="code" rows="60" cols="80">
			function(sprite, spriteContainer) {
				// All of the mouse event sequences look like this:
				// seq([ {pageX: 22, pageY: 3423, offsetX: 14, offsetY: 22} ,,, ])
				var spriteMouseDowns = Observable.fromEvent(sprite, "mousedown"),
					spriteContainerMouseMoves = Observable.fromEvent(spriteContainer, "mousemove"),
					spriteContainerMouseUps = Observable.fromEvent(spriteContainer, "mouseup"),
					// Create a sequence that looks like this:
					// seq([ {pageX: 22, pageY:4080 },,,{pageX: 24, pageY: 4082},,, ])
					spriteMouseDrags =
						// For every mouse down event on the sprite...
						spriteMouseDowns.
							concatMap(function(contactPoint) {
								// ...retrieve all the mouse move events on the sprite container...
								return spriteContainerMouseMoves.
									// ...until a mouse up event occurs.
									takeUntil(spriteContainerMouseUps).
									// ------------   INSERT CODE HERE  -----------------
									// Project each mouse move object into a new object
									// with adjusted pageX and pageY properties.
									// Translate each page coordinate based on the value
									// of the offsetX and offsetY properties in the
									// contactPoint.
									// -------------------------------------------------
									// Complete expression...
							});

				// For each mouse drag event, move the sprite to the absolute page position.
				spriteMouseDrags.forEach(function(dragPoint) {
					sprite.style.left = dragPoint.pageX + "px";
					sprite.style.top = dragPoint.pageY + "px";
				});
			}
		</textarea>
		<button class="go">Run</button>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>
		<button class="resetSprite">Reset Sprite</button>
		<div class="control output container" style="width:100%;height:200px;text-align:center">
            <span class="control sprite" style="position:absolute; border: solid 1px black; background-color: white;z-index:23">
                Sprite
            </span>
			<span style="position:relative; top: 100px;">Sprite Container</span>
		</div>

		<pre class="verifier">
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					output = $(".output", lesson)[0],
					container = $(".container", lesson)[0],
					sprite = $(".sprite",lesson)[0],
					moveSprite = function(point) {
						sprite.style.left = point.pageX + "px";
						sprite.style.top = point.pageY + "px";
					}

				fun(sprite, container, moveSprite);
			}
		</pre>
		<pre class="answer">
			function(sprite, spriteContainer) {
				// All of the mouse event sequences look like this:
				// seq([ {pageX: 22, pageY: 3423, offsetX: 14, offsetY: 22} ,,, ])
				var spriteMouseDowns = Observable.fromEvent(sprite, "mousedown"),
					spriteContainerMouseMoves = Observable.fromEvent(spriteContainer, "mousemove"),
					spriteContainerMouseUps = Observable.fromEvent(spriteContainer, "mouseup"),
					// Create a sequence that looks like this:
					// seq([ {pageX: 22, pageY:4080 },,,{pageX: 24, pageY: 4082},,, ])
					spriteMouseDrags =
						// For every mouse down event on the sprite...
						spriteMouseDowns.
							concatMap(function(contactPoint) {
								// ...retrieve all the mouse move events on the sprite container...
								return spriteContainerMouseMoves.
									// ...until a mouse up event occurs.
									takeUntil(spriteContainerMouseUps).
									map(function(movePoint) {
										return {
											pageX: movePoint.pageX - contactPoint.offsetX,
											pageY: movePoint.pageY - contactPoint.offsetY
										};
									});
							});

				// For each mouse drag event, move the sprite to the absolute page position.
				spriteMouseDrags.forEach(function(dragPoint) {
					sprite.style.left = dragPoint.pageX + "px";
					sprite.style.top = dragPoint.pageY + "px";
				});
			}
        </pre>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 34: HTTP requests</h4>

		<p>Events aren't the only source of asynchronous data in an application. There's also HTTP requests. Most of the
			time HTTP requests are exposed via a <b>callback-based API</b>. To receive data asynchronously from a
			callback-based API, the client typically passes a success and error handler to the function. When the
			asynchronous operation completes, the appropriate handler is called with the data. In this exercise we'll use
			jQuery's getJSON api to asynchronously retrieve data.
		</p>
		<textarea class="code" rows="60" cols="80">
			function($) {
				$.getJSON(
					"http://api-global.netflix.com/queue",
					{
						success: function(json) {
							alert("Data has arrived.");
						},
						error: function(ex) {
							alert("There was an error.")
						}
					});
			}
		</textarea>
		<button class="go">Run</button>
		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")");
				fun(jQueryMock);
			}
		</pre>
		<div class="post">
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 35: Sequencing HTTP requests with callbacks</h4>

		<p>Let's say that we're writing the startup flow for a web application. On startup, the application must perform the
			following operations:</p>
		<ol>
			<li>Download the URL prefix to use for all subsequent AJAX calls. This URL prefix will vary based on what AB
				test the user is enrolled in.
			</li>
			<li>Use the url prefix to do the following actions in parallel:
				<ul>
					<li>Retrieve a movie list array</li>
					<li>Retrieve configuration information and...
						<ul>
							<li>make a follow up call for an instant queue list if the config property "showInstantQueue" is
								truthy
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>If an instant queue list was retrieved, append it to the end of movie list.</li>
			<li>If all operations were successful then display the movie lists <i>after</i> the window loads. Otherwise
				inform the user that there was a connectivity error.
			</li>
		</ol>
		<textarea class="code" rows="60" cols="80">
			function(window, $, showMovieLists, showError) {
				var error, configDone, movieLists,
					queueList, windowLoaded, outputDisplayed;

				var hostUrl = "http://api-global.netflix.com/";

				function errorHandler() {
					// Otherwise show the error.
					error = "There was a connectivity error:";
					// We may be ready to display out
					tryToDisplayOutput();
				}

				function tryToDisplayOutput() {
					// Wait for window. Output once.
					if (!windowLoaded || outputDisplayed) return;

					// Wait for both parallel requests
					// member's config and movie list. 
					if (!configDone || !movieLists) {
						// Only if something is missing check for an error instead.
						if(!error) return; 
						outputDisplayed = true;
						return showError(error);
					}
					// If queue list has been requested, append it to result
					if (queueList) movieLists.push(queueList);
					outputDisplayed = true;
					showMovieLists(JSON.stringify(movieLists));
				}

				function windowLoadHandler() {
					windowLoaded = true;
					// Remember to unsubscribe from events
					window.removeEventListener("load", windowLoadHandler);
					// This may be the last task we're waiting on
					// so try and display output.
					tryToDisplayOutput();
				}

				// Register for the load event
				window.addEventListener("load", windowLoadHandler);

				// Request the service url prefix for the users AB test
				$.getJSON( hostUrl + "abTestInformation", {
					success: function(abTestInformation) {
						var servicePath = hostUrl + abTestInformation.urlPrefix + '/';
					
						// Request the member's config information to determine 
						// whether their instant queue should be displayed.
						$.getJSON(servicePath + "config", {
							success: function(config) {
								// Parallel retrieval of movie list could've failed,
								// in which case we don't want to issue this call.
								if (error) return

								// If we're not supposed to
								if (!config.showInstantQueue) {
									configDone = true;
									tryToDisplayOutput();
									return              
								}

								$.getJSON(servicePath + "queue", {
									success: function(queueMessage) {
										queueList = queueMessage.list;
										configDone = true;
										tryToDisplayOutput();
									},
									error: errorHandler
								});
							},
							error: errorHandler
						});

						// Retrieve the movie list
						$.getJSON(servicePath + "movieLists", {
							success: function(movieListMessage) {
								movieLists = movieListMessage.list;
								tryToDisplayOutput();
							},
							error: errorHandler
						});
					},
					error: errorHandler
				});
			}
		</textarea>
		<button class="go">Run</button>
		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					NOOP = function() {};

				fun(
					{
						addEventListener: function(event, handler) {
							window.setTimeout(handler, 200)
						},
						removeEventListener: NOOP
					},
					jQueryMock,
					function(output) { alert(output) },
					function(output) { alert(output) });
			}
		</pre>
		<div class="post">
			<p>It's fair to say that <b>sequencing HTTP requests with callbacks is <i>very</i> hard.</b> In order to perform
				two tasks in parallel, we have to introduce a variable to track the status of each task. Every time one of
				the parallel tasks completes it must check whether its sibling task has also completed. If both have
				completed, only then can we move forward. In the example above, every time a task is finished the
				tryToDisplayOutput() function is called to check if the program was ready to display output. This function
				checks the status of all tasks and displays the output if possible.
			</p>

			<p>With a callback-based API, asynchronous error handling is also very complicated. In synchronous programs, a
				unit of work is cancelled when an exception is thrown. By contrast, in our program we had to explicitly
				track whether an error occurred in parallel to prevent an unnecessary call for the instant queue. Javascript
				provides us with special support for synchronous error handling with the keywords try/catch/throw.
				Unfortunately no such support is available for asynchronous programs.
			</p>

			<p>The Observable interface is a much more powerful way of working with asynchronous APIs than callbacks. We'll
				see that Observables can free us from having to track the status of tasks that are run in parallel, just
				as Observables free us from having to track Event Subscriptions. We'll also see that Observable gives us the
				same error propagation semantics in asynchronous programs that we expect in synchronous programs. Finally
				we'll learn that by converting callback-based APIs to Observables, we can query them along with Events to
				build much more expressive programs.
			</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 36: Traversing callback-based Asynchronous APIs</h4>

		<p><b>If a callback API were a sequence, what kind of sequence would it be?</b> We've seen that UI Event sequences
			can contain anywhere from 0 to infinite items, but will never complete on their own.
		</p>
		<pre>
			mouseMoves === seq([ {x: 23, y: 55},,,,,,,{x: 44, y: 99},,,{x:55,y:99},,,{x: 54, y:543},,, ]);
		</pre>
		<p>In contrast, if we were to convert output from the $.getJSON() function we've been using into a sequence it would
			always return a sequence that completes after sending a single item.
		</p>
		<pre>
			getJSONAsObservable("http://api-global.netflix.com/abTestInformation") ===
				seq([ { urlPrefix: "billboardTest" } ])
		</pre>
		<p>It might seem strange to create sequences that contain only one object. We <i>could</i> introduce an
			Observable-like type specifically for scalar values, but that would make callback-based APIs more difficult to
			query with Events. Thankfully, an Observable sequence is flexible enough to model both.
		</p>

		<p><b>So how do we convert a callback API into an Observable sequence?</b> Unfortunately, because callback-based
			APIs vary so much in their interfaces, we can't create a conversion function like we did with fromEvent().
			However there is a more flexible function we can use to build Observable sequences...
		</p>

		<p><b>Observable.create() is powerful enough to convert any asynchronous API into an Observable.</b>
			Observable.create() relies on the fact that all asynchronous APIs have the following semantics:
		</p>
		<ol>
			<li>The client needs to be able to receive data.</li>
			<li>The client needs to be able to receive error information.</li>
			<li>The client needs to be able to be alerted that the operation is complete.</li>
			<li>The client needs to be able to indicate that they're no longer interested in the result of the operation.</li>
		</ol>
		<p>In the following example, we'll use the Observable.create() function to create an Observable that issues a
			request to getJSON when it's traversed.
		</p>
		<textarea class="code" rows="60" cols="80">
			function(window, $) {
				var getJSON = function(url) {
					return Observable.create(function(observer) {
						var subscribed = true;

						$.getJSON(url,
							{
								success:
									function(data) {
										// If client is still interested in the results, send them.
										if (subscribed) {
											// Send data to the client
											observer.onNext(data);
											// Immediately complete the sequence
											observer.onCompleted();
										}
									},
								error: function(ex) {
									// If client is still interested in the results, send them.
									if (subscribed) {
										// Inform the client that an error occurred.
										observer.onError(ex);
									}
								}
							});

						// Definition of the Subscription objects dispose() method.
						return function() {
							subscribed = false;
						}
					});
				};

				var subscription =
					getJSON("http://api-global.netflix.com/abTestInformation").
						forEach(
							// observer.onNext()
							function(data) {
								alert(JSON.stringify(data));
							},
							// observer.onError()
							function(err) {
								alert(err)
							},
							// observer.onCompleted()
							function() {
								alert("The asynchronous operation has completed.")
							});
			}
		</textarea>
		<button class="go">Run</button>
		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					NOOP = function() {};

				fun(
					{
						addEventListener: function(event, handler) {
							window.setTimeout(handler, 200)
						},
						removeEventListener: NOOP
					},
					jQueryMock,
					function(output) { alert(output) },
					function(output) { alert(output) });
			}
		</pre>
		<div class="post">
			<p>Understand that <b>the function passed to Observable.create() is the definition of the forEach() function for
				<i>this</i> Observable.</b> In other words, all we have to do to define an Observable is to define its
				traversal function. Notice that although we pass three functions to the Observable's forEach() function, the
				function we pass to Observable.create() accepts only one value: an Observer. An Observer is just a triple
				containing three handlers:</p>
			<ul>
				<li>The onNext() handler used to send data to the client.</li>
				<li>The onError() handler used to send error information to the client.</li>
				<li>The onCompleted() handler used to inform the client that the sequence has completed.</li>
			</ul>
			<p>The three handlers we pass to forEach() are packaged together into a single Observer object for convenience.
				Finally Observable.create() returns a function that defines the dispose() method of the Subscription object
				during Traversal. Like the Observer, the Observable.create() function creates the Subscription object for us
				and uses our function as the dispose() definition.</p>

			<p>Now that we've built a version of the getJSON function that returns an Observable sequence, let's use it to
				improve our solution to the previous exercise...</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 37: Sequencing HTTP requests with Observable</h4>

		<p>Let's use the getJSON function that returns Observables, and the Observable.fromEvent() to complete the exercise
			we completed earlier.</p>
		<textarea class="code" rows="60" cols="80">
			function(window, getJSON, showMovieLists, showError) {
				var movieListsSequence =
					Observable.zip(
						getJSON("http://api-global.netflix.com/abTestInformation").
							concatMap(function(abTestInformation) {
								return Observable.zip(
									getJSON("http://api-global.netflix.com/" + abTestInformation.urlPrefix + "/config").
										concatMap(function(config) {
											if (config.showInstantQueue) {
												return getJSON("http://api-global.netflix.com/" + abTestInformation.urlPrefix + "/queue").
													map(function(queueMessage) {
														return queueMessage.list;
													});
											}
											else {
												return Observable.returnValue(undefined);
											}
										}),
									getJSON("http://api-global.netflix.com/" + abTestInformation.urlPrefix + "/movieLists"),
									function(queue, movieListsMessage) {
										var copyOfMovieLists = Object.create(movieListsMessage.list);
										if (queue !== undefined) {
											copyOfMovieLists.push(queue);
										}

										return copyOfMovieLists;
									});
							}),
						Observable.fromEvent(window, "load"),
						function(movieLists, loadEvent) {
							return movieLists;
						});

				movieListsSequence.
					forEach(
						function(movieLists) {
							showMovieLists(movieLists);
						},
						function(err) {
							showError(err);
						});
			}
		</textarea>
		<button class="go">Run</button>
		<pre class="verifier">
			// Combine videos and bookmarks 2
			function(str, lesson) {
				preVerifierHook();
				var fun = eval("(" + str + ")"),
					getJSON = function(url) {
						return Observable.create(function(observer) {
							var subscribed = true;

							jQueryMock.getJSON(url,
								{
									success:
										function(data) {
											// If client is still interested in the results, send them.
											if (subscribed) {
												// Send data to the client
												observer.onNext(data);
												// Immediately complete the sequence
												observer.onCompleted();
											}
										},
									error: function(ex) {
										// If client is still interested in the results, send them.
										if (subscribed) {
											// Inform the client that an error occurred.
											observer.onError(ex);
										}
									}
								});

							// Definition of the Subscription objects dispose() method.
							return function() {
								subscribed = false;
							}
						})
					},
					NOOP = function() {};

				fun(
					{
						addEventListener: function(event, handler) {
							window.setTimeout(handler, 200)
						},
						removeEventListener: NOOP
					},
					getJSON,
					function(output) { alert(JSON.stringify(output)) },
					function(output) { alert(output) });
			}
		</pre>
		<div class="post">
			<p>Almost every workflow in a web application starts with an event, continues with an HTTP request, and results
				in a state change. Now we know how to express the first two tasks elegantly.</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 38: Throttle Input</h4>

		<p>When dealing with user input, there will be times when the user's input is too noisy, and will potentially clog
			your servers with extraneous requests. We want the ability to throttle the users's input so that if they
			interacting for one second, then we will get the user input. Let's say for example, the user clicks a button
			once too many times upon saving and we only want to fire after they've stopped for a second.</p>
		<pre>
			seq([1,2,3,,,,,,,4,5,6,,,]).throttle(1000 /* ms */) === seq([,,,,,,,3,,,,,,,,,,6,,,]);
		</pre>

		<textarea class="code" rows="60" cols="80">
			function (clicks, saveData, name) {
				return clicks.
					// TODO: Throttle the clicks so that it only happens every one second
					concatMap(function () {
						return saveData(name);
					});
			}
		</textarea>

		<button class="go">Run</button>
		<label for="inputName">Name</label>
		<input type="text" class="inputName"><strong class="savedValue"></strong>
		<button class="submitInputName">Save</button> <<-- Click this to save your data

		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>

        <pre class="verifier">
			function(str, lesson) {
				preVerifierHook();
				var $inputName = $('.inputName', lesson),
					$savedValue = $('.savedValue', lesson);

				var counter = 0;
				var data = null;
				var clicks = Observable.fromEvent($('.submitInputName', lesson)[0], 'click');

				var code =  eval("(" + str + ")")
				var code = code(clicks, function(name) { return Rx.Observable.returnValue(name.val()); }, $inputName);

				code
					.subscribe(function (data) {
						$savedValue.text('Name Saved: ' + data);
					});
			}
		</pre>
        <pre class="answer">
			function (clicks, saveData, name) {
				return clicks.
					throttle(1000).
					concatMap(function () {
						return saveData(name);
					})
			}
        </pre>
		<div class="post">
			<p>Now that we know how to throttle input, let's take a look at another problem where throttling data is
				important...</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 39: Autocomplete Box</h4>

		<p>One of the most common problems in web development is the autocomplete box. This seems like it should be an easy
			problem, but is actually quite challenging. For example, how do we throttle the input? How do we make sure we're
			not getting out of order requests coming back? For example if I type "react" then type "reactive" I want
			"reactive" to be my result, regardless of which actually returned first from the service.</p>

		<p>In the example below, you will be receiving a sequence of key presses, a textbox, and a function when called
			returns an array of search results.</p>
		<pre>
			getSearchResultSet('react') === seq[,,,["reactive", "reaction","reactor"]]
			keyPresses === seq['r',,,,,'e',,,,,,'a',,,,'c',,,,'t',,,,,]
		</pre>

		<textarea class="code" rows="60" cols="80">
			function (getSearchResultSet, keyPresses, textBox) {

				var getSearchResultSets =
					keyPresses.
					map(function () {
						return textBox.value;
					}).
					// TODO: Ensure that we only trigger a maximum of one search request per second
					concatMap(function (text) {

					// TODO: Ensure this sequence ends as soon as another key press arrives
					return getSearchResultSet(text);
				});

				return getSearchResultSets;
			}
		</textarea>

		<button class="go">Run</button>

		<label for="inputName">Name</label>
		<input type="text" class="inputName">

		<ul class="searchResultsForAutoComplete"></ul>

		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>

        <pre class="verifier">
			function(str, lesson) {
				preVerifierHook();
				var wordlist = window.wordlist;
				wordlist.sort();

				var searchText = function (text) {

					var matched = wordlist.filter(function (x) {
						return x.indexOf(text) === 0;
					});

					return Rx.Observable.returnValue(
						matched.slice(0, 10)
					);
				};

				var $inputName = $('.inputName', lesson)[0],
					$searchResults = $('.searchResultsForAutoComplete', lesson);

				var clicks = Rx.Observable.fromEvent($inputName, 'keyup');

				var code =  eval("(" + str + ")")
				var code = code(searchText, clicks, $inputName);

				code
					.subscribe(function (results) {
						var s = results.map(function (r) {
							return '&lt;li&gt;' + r + '&lt;/li&gt;';
						});
						$searchResults.html(s.join(''));
					});
			}
		</pre>
        <pre class="answer">
			function (getSearchResultSet, keyPresses, textBox) {

				var getSearchResultSets =
					keyPresses.
						map(function () {
							return textBox.value;
						}).
						throttle(1000).
						concatMap(function (text) {
							return getSearchResultSet(text).takeUntil(keyPresses);
						});

				return getSearchResultSets;
			}
        </pre>
		<div class="post">
			<p>Now that we're able to query with our throttled input, you'll still notice one slight problem. If you hit
				your arrow keys or any other non character key, the request will still fire. How do we prevent that?</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 40: Distinct Until Changed Input</h4>

		<p>You'll notice in the previous exercise that if you pressed your arrow keys while inside the textbox, the query
			will still fire, regardless of whether the text actually changed or not. How do we prevent that? The
			distinctUntilChanged filters out successive repetitive values.</p>
		<pre>
			seq([1,,,1,,,3,,,3,,,5,,,1,,,]).distinctUntilChanged() ===
			seq([1,,,,,,,3,,,,,,,5,,,1,,,]);
		</pre>

		<textarea class="code" rows="60" cols="80">
			function (keyPresses, isAlpha) {

				return keyPresses.
					map(function (e) { return String.fromCharCode(e.keyCode); }).

					// Ensure we only have alphabetic characters
					filter(function (character) { return isAlpha(character); }).

					// TODO: Filter out successive repetitive keys

					// Building up a string of all the characters typed.
					scan('', function (stringSoFar, character) {
						return stringSoFar + character;
					});
			}
		</textarea>

		<button class="go">Run</button>

		<label for="inputName">Enter Keys</label>
		<input type="text" class="inputName">
		<div>Keys filtered by distinctUntilChanged: <strong class="filteredKeysByDistinct"></strong></div>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>

        <pre class="verifier">
			function(str, lesson) {
				preVerifierHook();
				var $inputName = $('.inputName', lesson),
					$filtered = $('.filteredKeysByDistinct', lesson);

				var keyups = Rx.Observable.fromEvent($inputName[0], 'keypress');

				var isAlpha = function (x) {
					return 'abcdefghijklmnopqrstuvwxyz'.indexOf(x.toLowerCase()) !== -1;
				};

				var code =  eval("(" + str + ")")
				var code = code(keyups, isAlpha);

				code
					.subscribe(function (text) {
						$filtered.text(text);
					});
			}
		</pre>
        <pre class="answer">
			function (keyPresses, isAlpha) {

				return keyPresses.
					map(function (e) { return String.fromCharCode(e.keyCode); }).
					filter(function (character) { return isAlpha(character); }).
					distinctUntilChanged().
					scan('', function (stringSoFar, character) {
						return stringSoFar + character;
					});
			}
        </pre>
		<div class="post">
			<p>Now that we know how to get only the distinct input, let's see how it applies to our autocomplete
				example...</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 41: Autocomplete Box Part 2: Electric Boogaloo</h4>

		<p>In the previous version of the autocomplete box, there were two bugs</p>
		<ul>
			<li>Multiple successive searches are made for the same string</li>
			<li>Attempts are made to retrieve results for an empty string.</li>
		</ul>

		<p>The example below is the same as above, but this time, fix the bugs!</p>
		<pre>
			getSearchResultSet('react') === seq[,,,["reactive", "reaction","reactor"]]
			keyPresses === seq['r',,,,,'e',,,,,,'a',,,,'c',,,,'t',,,,,]
		</pre>

		<textarea class="code" rows="60" cols="80">
			function (getSearchResultSet, keyPresses, textBox) {

				var getSearchResultSets =
					keyPresses.
						map(function () {
							return textBox.value;
						}).
						throttle(1000).

						// TODO: Make sure we only get distinct values

						// TODO: Make sure the text is not empty

						concatMap(function (text) {
							return getSearchResultSet(text).takeUntil(keyPresses);
						});

				return getSearchResultSets;
			}
		</textarea>

		<button class="go">Run</button>
		<label for="inputName">Name</label>
		<input type="text" class="inputName">

		<ul class="searchResultsForAutoComplete"></ul>
		<button class="showAnswer">Show Answer</button>
		<button class="fullScreen">Enter Fullscreen</button>

        <pre class="verifier">
			function(str, lesson) {
				preVerifierHook();
				var wordlist = window.wordlist;
				wordlist.sort();

				var searchText = function (text) {

					var matched = wordlist.filter(function (x) {
						return x.indexOf(text) === 0;
					});

					return Rx.Observable.returnValue(
						matched.slice(0, 10)
					);
				};

				var $inputName = $('.inputName', lesson),
					$searchResults = $('.searchResultsForAutoComplete', lesson);

				var clicks = Rx.Observable.fromEvent($inputName[0], 'keyup');

				var code =  eval("(" + str + ")")
				var code = code(searchText, clicks, $inputName[0]);

				code
					.subscribe(function (results) {
						var s = results.map(function (r) {
							return '&lt;li&gt;' + r + '&lt;/li&gt;';
						});
						$searchResults.html(s.join(''));
					});
			}
		</pre>
        <pre class="answer">
			function (getSearchResultSet, keyPresses, textBox) {

				var getSearchResultSets =
					keyPresses.
						map(function () {
							return textBox.value;
						}).
						throttle(1000).
						distinctUntilChanged().
						filter(function (s) { return s.length > 0; }).
						concatMap(function (text) {
							return getSearchResultSet(text).takeUntil(keyPresses);
						});

				return getSearchResultSets;
			}
        </pre>
		<div class="post">
			<p>With just this little amount of code, we're able to produce a fully functioning autocomplete scenario. But
				there are other outstanding questions, such as error handling. How can we handle failure and retry if
				necessary?</p>
		</div>
	</div>


	<!-- ************************* LESSON ************************* -->
	<div class="lesson">
		<h4>Exercise 42: Retrying after errors</h4>

		<h1>A Work in Progress</h1>

		<p>Congratulations! You've made it this far, but you're not done. Learning is an on-going process. Go out and start
			using the functions you've learned in your day-to-day coding. Over time, I'll be adding more exercises to this
			tutorial. If you have suggestions for more exercises, send me a pull request!
		</p>
	</div>
    <div class="modal fade" id="modalGetJSON">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Enter your answer JSON below</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <textarea name="answerText" has-value="true" style="height: 165px;  width:100%; resize: none"></textarea>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary save-btn" data-dismiss="modal">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
	<div class="modal fade" id="modalShowJSON">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">Ctrl-C your answer JSON below</h4>
				</div>
				<div class="modal-body">
					<form>
						<textarea name="answerText" readonly="readonly" has-value="true" style="height: 165px; width:100%; resize: none"></textarea>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
</div>

<script src="assets/app/wordlist.js"></script>
<script src="assets/codemirror/codemirror.js"></script>
<script src="assets/codemirror/matchbrackets.js"></script>
<script src="assets/app/javascript.js"></script>

<script src="assets/rx/rx.all.js"></script>

<script src="assets/jquery/jquery-1.10.2.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/app/grab_answers.js"></script>
<script src="assets/app/show_answers.js"></script>

<script src="assets/app/utils.js"></script>
<script src="assets/app/main.js"></script>
<script type="text/javascript">

	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-37739914-1']);
	_gaq.push(['_trackPageview']);

	(function() {
		var ga = document.createElement('script');
		ga.type = 'text/javascript';
		ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
	})();

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