window.instagramClientId = '02d26cb819954ba7b5c3c072a885759f';


var AppComponent = React.createClass({
  getInitialState: function(){
    return {
      inputValue : '',
      inFocus: false,
      results: []
    };

  },
  loadResultsFromServer: function (query) {
    var appcomponent = this;
    $.ajax({
      url: this.props.endpoint,
      data: {
        client_id: this.props.clientId,
        q: query,
        count: this.props.limit
      },
      dataType: 'jsonp',
      success: function(data) {
        var renamedData = _.map(data.data, function (result) {
          result.image = result.profile_picture;
          return result;
        });
        appcomponent.setState({results: renamedData});
      }
    });
  },
  componentDidMount: function () {
    this.loadResultsFromServer();
  },
  render: function(){
    return (
      <div>
          <InputComponent handleChange={this.handleChange} handleFocus={this.handleFocus} handleBlur={this.handleBlur} value={this.state.inputValue}/>
          <ResultsComponent data={this.state.results} visible={this.state.inFocus} handleSelect={this.handleSelect} />
      </div>
    );
  },
  handleSelect: function(selectedResult) {
    this.props.onSelect(selectedResult);
    this.setState({results : [], inputValue : ''});
  },
  handleChange: function(query) {

    var self = this;

    clearTimeout(window.loadResultsTimeout);
    
    this.setState( { inputValue : query } );

    window.loadResultsTimeout = setTimeout(function(){
      self.loadResultsFromServer(query);
    }, 200);
      
  },
  handleFocus: function() {
      this.setState( { inFocus : true } );
  },
  handleBlur: function(event) {
      var self = this;
      window.blurTimeout = setTimeout(function(){
          self.setState( { inFocus : false } );
      }, 200);
  }
});


var ResultsComponent = React.createClass({

  handleResultsClick: function(event){
    clearTimeout(window.blurTimeout);
  },

  render: function(){
    self = this;
      var resultNodes = this.props.data.map(function(result){
        return (
          <Result image={result.image} handleSelect={self.props.handleSelect} data={result}>
              {result.username}
          </Result>
        );
      });

      var resultsClass = (this.props.visible === true ? 'results show' : 'results hide');

      // If no results give .empty class
      if (resultNodes.length === 0)
        resultsClass += ' empty';

      return (
        <ul className={resultsClass} onClick={this.handleResultsClick}>
            {resultNodes}
        </ul>
      );
    }
});


var Result = React.createClass({
  handleSelect: function (event) {
    console.log('clicked');
    this.props.handleSelect(this.props.data);
  },
  render: function(){
    return (
      <li className="clearfix" onClick={this.handleSelect}>
          <img src={this.props.image}/>
          <div>{this.props.children}</div>
      </li>
    );
  }
});


var InputComponent = React.createClass({
    handleChange: function(event){
      this.props.handleChange(event.target.value);
    },
    handleFocus: function(event){
      this.props.handleFocus(event);
    },
    handleBlur: function(event){
      this.props.handleBlur(event);
    },
    render: function(){
      return (
          <input type="text" className="input-typeahead" value={this.props.value} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur}/>
      );
    }
});

var GridComponent = React.createClass({

  render: function(){
    var resultNodes = this.props.data.map(function(result){
        return (<img src={result.image} />);
    });

    return (
        <div>
            {resultNodes}
        </div>
    );
  }
});

function processResult(result) {

  var endpoint = "https://api.instagram.com/v1/users/" + result.id + "/media/recent";

  $.ajax({
    url: endpoint,
    data: {
      client_id: window.instagramClientId,
      count: 20
    },
    dataType: 'jsonp',
    success: function(data) {
      var imageUrls = _.map(data.data, function (result) {
        result.image = result.images.low_resolution.url;
        return result;
      });
      React.render(
        <GridComponent data={imageUrls} />,
        document.getElementById('grid')
      );
    }
  });
}

React.render(
  <AppComponent endpoint="https://api.instagram.com/v1/users/search" clientId={window.instagramClientId} onSelect={processResult} limit={6}/>,
  document.getElementById('app')
);

@@ -141,16 +141,61 @@
 eturn %7B%0A
+      placeholder: 'Search instagram users',%0A
       in
@@ -230,16 +230,17 @@
 : false,
+ 
 %0A      r
@@ -547,24 +547,183 @@
 ion(data) %7B%0A
+        // Set image and name values%0A        // TODO: Allow passing in location of values in server data (such as result.profile_picture) as prop of component%0A
         var 
@@ -822,16 +822,57 @@
 icture;%0A
+          result.name = result.username;%0A
         
@@ -1122,16 +1122,53 @@
 omponent
+ placeholder=%7Bthis.state.placeholder%7D
  handleC
@@ -2454,28 +2454,24 @@
     %7Bresult.
-user
 name%7D%0A      
@@ -3566,16 +3566,53 @@
 e=%22text%22
+ placeholder=%7Bthis.props.placeholder%7D
  classNa
@@ -4021,16 +4021,71 @@
  %7D%0A%7D);%0A%0A
+/* Callback function when dropdown item is selected */%0A
 function
@@ -4368,24 +4368,24 @@
     var 
-imageUrl
+gridItem
 s = _.ma
@@ -4560,16 +4560,16 @@
 ta=%7B
-imageUrl
+gridItem
 s%7D /

Set input placeholder in getInitialState