require('./main.scss');

var Rx = require('rx');
require('rx-dom');
var $ = require('jquery');
var videojs = require('videojs');

var GIPHY = {
  searchUri: 'http://api.giphy.com/v1/gifs/search?q=',
  apiKey: 'dc6zaTOxFJmzC'
};


var $adjective = $('#adjective'),
    $noun = $('#noun');

var adjectiveUp = observableFromInput($adjective);
var nounUp = observableFromInput($noun);

var comboUp = Rx.Observable.combineLatest(
  adjectiveUp,
  nounUp
);

comboUp.subscribe(function(x) {
  Rx.DOM.ajax({
    url: GIPHY.searchUri + x.join('+') + '&api_key=' + GIPHY.apiKey,
    responseType: 'json'
  })
  .subscribe(
    function giphySuccess(results) {
      console.log(results);

      var view = $('#view').html('');

      results.response.data.forEach(function(item) {
        var video = $('<video/>');
        videojs(video[0], {
            'preload': 'auto',
            'controls': true,
            'loop': true
          }, function() {
            var player = this;

            player.bigPlayButton.show();

            player.on('pause', function() {
              player.bigPlayButton.show();
            });

            player.on('play', function() {
              player.bigPlayButton.hide();
            });

            player.src(item.images.fixed_width.mp4);
            video.addClass('gif')
              .addClass('video-js')
              .addClass('vjs-big-play-centered')
              .addClass('vjs-default-skin');
            view.append(video);
        });
      });
    },
    function giphyError(error) {
      console.log(error);
    });
});

function observableFromInput(inputElement){
  return Rx.Observable.fromEvent(inputElement, 'keyup')
      .map(function (e) {
        return e.target.value;
      })
      .filter(function (text) {
        return text.length > 2;
      })
      .debounce(750);
}

// var subscription;
// subscription = Rxhr.subscribe(
//   function (data) {
//     data.response.forEach(function (twt) {
//       console.log(twt);
//     });
//   },
//   function (err) {
//     console.log(err);
//     useTestData();
//   }
// );

// function useTestData(){
//     var p = Promise.resolve(window.testData);
//     subscription = Rx.Observable.fromPromise(p).subscribe(
//         function (data) {
//             data.response.forEach(function (twt) {
//                 console.log(twt);
//             });
//         }
//     );
// }

@@ -222,17 +222,16 @@
 zC'%0A%7D;%0A%0A
-%0A
 var $adj
@@ -647,37 +647,8 @@
 ) %7B%0A
-      console.log(results);%0A%0A
     
@@ -768,18 +768,34 @@
 ideo/%3E')
+.appendTo(view)
 ;%0A
+%0A
         
@@ -957,17 +957,16 @@
 = this;%0A
-%0A
         
@@ -1222,143 +1222,92 @@
     
-player.src(item.images.fixed_width.mp4);%0A            video.addClass('gif')%0A              .addClass('video-js')%0A              .addClass(
+video%5B0%5D%0A              .parentNode%0A              .classList.add('vjs-default-skin', 
 'vjs
@@ -1326,16 +1326,18 @@
 ntered')
+;%0A
 %0A       
@@ -1345,70 +1345,46 @@
     
-  .addClass('vjs-default-skin');%0A            view.append(video
+player.src(item.images.fixed_width.mp4
 );%0A 

Add player classes to the container element.