/* global define */
define([
...
], function($, _, P, Maybe, Player, bacon) {
  'use strict';
  io.extendFn()

  // HELPERS ///////////////////////////////////////////////////////////////////////////
  var compose = P.compose;
  var map = P.map;
  var log = function(x) { console.log(x); return x; }
  var fork = _.curry(function(f, future) { return future.fork(log, f); })
  var setHtml = _.curry(function(sel, x) { return $(sel).html(x); });


  // PURE //////////////////////////////////////////////////////////////////////////////
  var listen = _.curry(function (type, elt) {
    return Bacon.fromEventTarget(elt, type)
  })
  
  var getDom = $.toIO()
  
  var keypressStream = listen('keyup')
  
  // **** 1. just get the current value of the input target value
  //  valueStream :: Dom -> EventStream String
  var valueStream = compose(map(_.get('value')), map(_.get('target')), keypressStream)
  //  **** 3. change the above line using the "laws" (composes, can change the order):
  // this is more efficient than above ↴
  var valueStream = compose(map(compose(_.get('value')), _.get('target'))), keypressStream)
  
  // IMPURE ////////////////////////////////////////////////////////////////////////////
  //  **** 2. change this ↴
  // getDom('#search').map(keypressStream).runIO().onValue
  getDom('#search').map(valueStream).runIO().onValue(log)

});

Now we're able to get the value typed into the search box. Now, he wants to map each typed string to an API call. So wants to build up a stream of url API calls...

  
/* global define */
define([
...
], function($, _, P, Maybe, Player, bacon) {
  'use strict';
  io.extendFn()

  // HELPERS ///////////////////////////////////////////////////////////////////////////
  var compose = P.compose;
  ..


  // PURE //////////////////////////////////////////////////////////////////////////////
  var listen = _.curry(function (type, elt) {
    return Bacon.fromEventTarget(elt, type)
  })
  
  var getDom = $.toIO()
  
  var keypressStream = listen('keyup')
  
  //  valueStream :: Dom -> EventStream String
  //  **** 0. refactor this ↴
  // var valueStream = compose(map(compose(_.get('value')), _.get('target'))), keypressStream)
  
  // eventValue :: DomEvent -> String
  var eventValue = compose(_.get('value')), _.get('target'))  
  var valueStream = compose(map(eventValue), keypressStream)
  // **** 0. END refactor
  
  // **** 2. 
  // termUrl :: String -> URL
  var termUrl = function (term) {
    // return "http://gdata.youtube.com/feeds/api/videos?q=[TERM_HERE]&alt=json"
    return "http://gdata.youtube.com/feeds/api/videos?" + 
      $.param({q:term, alt: 'json'})
  }
  
  // **** 1. 
  // urlStream :: Dom -> EventStream URL (String)
  var urlStream = compose(map(termUrl), valueStream)
  
  // IMPURE ////////////////////////////////////////////////////////////////////////////
  // **** 3. use urlStream
  getDom('#search').map(urlStream).runIO().onValue(log)

});