<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="lodash.js@*" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
    <script src="react-masonry-mixin.js"></script>
    <script src="data.js"></script>
    <script src="script.js" type="text/jsx"></script>
  </head>

  <body>
    <br><br><br><br><br><br><br><br>
    <button class="btn btn-primary btn-lg center-block">PLAY</button>
    <br>
    <p class="text-center">It takes few seconds after click to load all images.</p>
  </body>

</html>
var TransitionGroup = React.addons.TransitionGroup;

var App = React.createClass({
  render: function() {
    return (
      <div className="container-fluid">
        <h1>All members:</h1>
        <List></List>
      </div>
    );
  }
});

/******************************************************* LIST */

var List = React.createClass({
  getInitialState: function() {
    return {
      listMembers: allMyDatas
    };
  },
  //mixins: [MasonryMixin('masonryContainer', {transitionDuration: 0})],
  removeMember: function(member) {
    _.remove(this.state.listMembers, function(m) { return m._id == member._id; });
    this.setState(this.state);
  },
  componentDidMount: function () {
    var tl = new TimelineMax();
    for (var prop in this.refs['trans'].refs) {
      var el = this.refs['trans'].refs[prop].getDOMNode();
      tl.from(el, .6, {rotationX: 20, rotationY: -90, rotationZ: -10, opacity: 0}, '-=.4');
    }
    tl.pause();
    
    var images = $('img', this.getDOMNode());
    var nbImages = images.length;
    
    console.time('waitImages');
    images.load(function() {
        nbImages--;
        if (!nbImages) {
          console.timeEnd('waitImages');
          tl.play();
        }
    }).filter(function() { return this.complete; }).load();
    
  },
  render: function() {
    var rows = [];
    
    for (var i=0; i < this.state.listMembers.length; i++) {
      var member = this.state.listMembers[i];
      
      rows.push(<Member ref={"member"+i} key={member._id} member={member} remove={this.removeMember}></Member>);
      //if((i+1) % 3 == 0) rows.push(<div className="clearfix"></div>);
    }
    
    return (
        <div className="row">
          <TransitionGroup ref="trans">
            {rows}
          </TransitionGroup>
        </div>
    );
  }
});

/******************************************************* MEMBER */

var Member = React.createClass({
  getInitialState: function() {
    return {
      member: this.props.member
    };
  },
  removeMe: function() {
    this.props.remove(this.state.member);
  },
  removeFriend: function(friendName) {
    _.remove(this.state.member.friends, function(m) { return m.name == friendName; });
    this.setState(this.state);
  },
  componentWillLeave: function(callback) {
    var tl = new TimelineMax({onComplete: callback});
    
    TweenMax.set(this.getDOMNode(), {perspective: 500});
    
    tl.add( TweenMax.to(this.getDOMNode(), .8, {scale: .6, rotationZ: 18, opacity: 0}) );
    //tl.add( TweenMax.to(this.getDOMNode(), .4, {scale: .6, opacity:0}) );
    tl.add( TweenMax.to(this.getDOMNode(), .2, {width: 1}) );
  },
  render: function() {
    var that = this;
    return (
        <div className="col-xs-4">
          <div className="thumbnail">
            <img src={this.state.member.picture}/>
            <Keywords kw={this.state.member.tags}></Keywords>
            <div className="caption">
              <h5>{this.state.member.name.first} {this.state.member.name.last}<br/><span className="badge">{this.state.member.balance}</span></h5>
              <p className="about">{this.state.member.about}</p>
              <ul className="list-group">
                <TransitionGroup>
                  {this.state.member.friends.map(function(friend, i) {
                    return (
                      <Friend ref={"friend"+i} key={friend.id} name={friend.name} picture={friend.picture} balance={friend.balance} remove={that.removeFriend}></Friend>
                    );
                  })}
                </TransitionGroup>
              </ul>
              <button onClick={this.removeMe} className="btn btn-danger">Remove</button>
            </div>
          </div>
        </div>
    );
  }
});

/******************************************************* FRIEND */

var Friend = React.createClass({
  removeMe: function() {
    this.props.remove(this.props.name);
  },
  componentWillLeave: function(callback) {
    var tl = new TimelineMax({onComplete: callback});
    
    tl.add( TweenMax.to(this.getDOMNode(), .4, {x: -100, opacity:0}) );
    tl.add( TweenMax.to(this.getDOMNode(), .1, {height:1}) );
  },
  render: function() {
    return (
      <li className="list-group-item clearfix">
        <img src={this.props.picture} className="img-circle"/>
        <label>&nbsp;{this.props.name}&nbsp;</label>
        <button onClick={this.removeMe} className="btn btn-danger btn-xs">X</button>
      </li>
    );
  }
});

/******************************************************* KEYWORDS */

var Keywords = React.createClass({
  render: function() {
    return (
      <div className="keywords-container">
        {this.props.kw.map(function(keyword) {
          return (
            <span className="label label-primary">{keyword}</span>
          );
        })}
      </div>
    );
  }
});

/******************************************************* Init */

$(document).ready(function() {
  $('button').one('click', function(event) {
    React.render(<App/>, document.body);
  });
});

var allMyDatas = [
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Lauren! You have 9 unread messages.",
    "friends": [
      {
        "balance": "$2,429.92",
        "picture": "//lorempixel.com/38/38/?ad55a57a-29da-49ba-b957-6374613e8c01",
        "name": "Gould",
        "id": 0
      },
      {
        "balance": "$1,322.27",
        "picture": "//lorempixel.com/38/38/?b30f36c7-2e52-48ae-88c8-58e74a96100b",
        "name": "Newman",
        "id": 1
      },
      {
        "balance": "$1,118.54",
        "picture": "//lorempixel.com/38/38/?0c057a83-7593-439b-b364-eb2551b7afb5",
        "name": "Foley",
        "id": 2
      },
      {
        "balance": "$2,878.25",
        "picture": "//lorempixel.com/38/38/?e2fc8b14-7a73-4d3f-986b-62626414a71d",
        "name": "Lily",
        "id": 3
      },
      {
        "balance": "$3,622.55",
        "picture": "//lorempixel.com/38/38/?b8dfc5f4-0818-4857-abb7-cd8c802403b7",
        "name": "Spears",
        "id": 4
      },
      {
        "balance": "$2,811.69",
        "picture": "//lorempixel.com/38/38/?c8717cb1-a08e-44c9-8f6a-63ad5122c997",
        "name": "Baird",
        "id": 5
      },
      {
        "balance": "$3,031.45",
        "picture": "//lorempixel.com/38/38/?c0414c2f-d298-41a9-aaf7-dfbc78e71fc1",
        "name": "Torres",
        "id": 6
      },
      {
        "balance": "$1,438.70",
        "picture": "//lorempixel.com/38/38/?3b4c5729-c28d-40d2-a7c7-f695c3776f3d",
        "name": "Bowman",
        "id": 7
      },
      {
        "balance": "$3,111.92",
        "picture": "//lorempixel.com/38/38/?c452a967-3029-48da-84b6-3c67412ab6df",
        "name": "Warner",
        "id": 8
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "eiusmod",
      "duis",
      "elit",
      "duis",
      "ullamco",
      "ullamco",
      "mollit"
    ],
    "longitude": -23.758411,
    "latitude": -33.14375,
    "registered": "Thursday, July 3, 2014 7:41 AM",
    "about": "Ad sint consequat ullamco exercitation. Tempor proident nostrud nulla aliquip.",
    "address": "812 Kingston Avenue, Lafferty, American Samoa, 5526",
    "phone": "+1 (985) 445-3210",
    "email": "lauren.knowles@zenthall.me",
    "company": "ZENTHALL",
    "name": {
      "last": "Knowles",
      "first": "Lauren"
    },
    "eyeColor": "brown",
    "age": 39,
    "picture": "//lorempixel.com/680/280/?25ecb070-0dfc-4573-a0d5-a91b2f738a12",
    "balance": "$1,625.76",
    "isActive": true,
    "guid": "68133ffc-cd03-4a0e-8226-b4babc5acb8b",
    "index": 0,
    "_id": "5565c7f11b6d4aceb7d5e91b"
  },
  {
    "favoriteFruit": "banana",
    "greeting": "Hello, Ellen! You have 5 unread messages.",
    "friends": [
      {
        "balance": "$2,518.90",
        "picture": "//lorempixel.com/38/38/?0a9878f1-7bbe-465d-b213-9be87a688360",
        "name": "Hillary",
        "id": 0
      },
      {
        "balance": "$1,063.77",
        "picture": "//lorempixel.com/38/38/?ba07f3d9-225b-4b0e-8263-a75e76538b88",
        "name": "Lindsay",
        "id": 1
      },
      {
        "balance": "$1,533.70",
        "picture": "//lorempixel.com/38/38/?db7ccb51-f659-4d60-a765-483a440eab57",
        "name": "Becker",
        "id": 2
      },
      {
        "balance": "$1,429.28",
        "picture": "//lorempixel.com/38/38/?ffed1017-20e4-43f8-9ac7-40e823f5412c",
        "name": "Gordon",
        "id": 3
      },
      {
        "balance": "$1,587.97",
        "picture": "//lorempixel.com/38/38/?4741bb5d-338b-4df0-8889-9fe41d6f2507",
        "name": "Mathews",
        "id": 4
      },
      {
        "balance": "$2,466.98",
        "picture": "//lorempixel.com/38/38/?75b53f30-b982-4b10-b805-8a61bb0e1fd1",
        "name": "Dorothy",
        "id": 5
      },
      {
        "balance": "$2,157.54",
        "picture": "//lorempixel.com/38/38/?581e60d1-208d-4ce6-b7e6-7b7e20668b35",
        "name": "Esther",
        "id": 6
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "nulla",
      "est",
      "deserunt",
      "non",
      "exercitation",
      "ea",
      "culpa"
    ],
    "longitude": -26.407731,
    "latitude": 87.460366,
    "registered": "Thursday, June 12, 2014 6:25 PM",
    "about": "Eu duis anim consequat commodo deserunt cupidatat cillum consequat deserunt nisi sunt. Aliquip minim voluptate est id ea commodo.",
    "address": "709 Coyle Street, Groveville, Alaska, 1696",
    "phone": "+1 (867) 553-2173",
    "email": "ellen.frazier@keeg.biz",
    "company": "KEEG",
    "name": {
      "last": "Frazier",
      "first": "Ellen"
    },
    "eyeColor": "green",
    "age": 34,
    "picture": "//lorempixel.com/680/280/?e4bb0bad-03b3-4ec9-97ce-8a5e135d725f",
    "balance": "$1,267.36",
    "isActive": false,
    "guid": "42b1f6d6-7740-4d4f-afc7-611500f35237",
    "index": 1,
    "_id": "5565c7f1a53de66b20d9c4f7"
  },
  {
    "favoriteFruit": "banana",
    "greeting": "Hello, Wilcox! You have 7 unread messages.",
    "friends": [
      {
        "balance": "$3,662.05",
        "picture": "//lorempixel.com/38/38/?ea21914e-c299-4bbc-bfbe-61b9c41a428b",
        "name": "Evangeline",
        "id": 0
      },
      {
        "balance": "$1,425.63",
        "picture": "//lorempixel.com/38/38/?c1a57526-ab50-4221-bb92-9ec7ce7a4687",
        "name": "Albert",
        "id": 1
      },
      {
        "balance": "$2,489.94",
        "picture": "//lorempixel.com/38/38/?848d7b5a-5d54-4d00-9011-a1cbfd97cce9",
        "name": "Lourdes",
        "id": 2
      },
      {
        "balance": "$1,726.84",
        "picture": "//lorempixel.com/38/38/?e8d429ea-6aaa-4d99-b5f6-3cce4e2df074",
        "name": "Hurst",
        "id": 3
      },
      {
        "balance": "$3,419.16",
        "picture": "//lorempixel.com/38/38/?a0b1b7ae-9d38-4613-96aa-868da1858468",
        "name": "May",
        "id": 4
      },
      {
        "balance": "$2,655.60",
        "picture": "//lorempixel.com/38/38/?deb3caea-5075-402d-9f1b-c18d584f0df4",
        "name": "Tillman",
        "id": 5
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "ullamco",
      "eu",
      "laborum",
      "ad",
      "veniam",
      "proident",
      "ullamco"
    ],
    "longitude": 127.159491,
    "latitude": -19.981037,
    "registered": "Tuesday, February 11, 2014 12:24 PM",
    "about": "Occaecat elit officia irure sunt veniam magna adipisicing nulla velit veniam sit aliquip. Enim veniam sit adipisicing culpa officia cupidatat aliqua irure aliquip elit quis labore.",
    "address": "536 Halsey Street, Shepardsville, New Hampshire, 1462",
    "phone": "+1 (988) 545-2178",
    "email": "wilcox.sandoval@vantage.com",
    "company": "VANTAGE",
    "name": {
      "last": "Sandoval",
      "first": "Wilcox"
    },
    "eyeColor": "blue",
    "age": 35,
    "picture": "//lorempixel.com/680/280/?31c65376-0685-40ce-852a-70e83db1f565",
    "balance": "$2,427.87",
    "isActive": false,
    "guid": "3272eba7-e5e2-4e4a-a531-e1a951b54623",
    "index": 2,
    "_id": "5565c7f1e0164a529b39cbc4"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Johns! You have 6 unread messages.",
    "friends": [
      {
        "balance": "$3,029.67",
        "picture": "//lorempixel.com/38/38/?a86471bc-6543-47c9-a3e5-5111baf0797e",
        "name": "Britt",
        "id": 0
      },
      {
        "balance": "$3,085.47",
        "picture": "//lorempixel.com/38/38/?1df17f77-1c71-46a7-b079-d3e623ff5ac5",
        "name": "Hilda",
        "id": 1
      },
      {
        "balance": "$2,150.99",
        "picture": "//lorempixel.com/38/38/?25d7761f-9815-460f-a0fe-fa8c558087ed",
        "name": "Giles",
        "id": 2
      },
      {
        "balance": "$3,618.31",
        "picture": "//lorempixel.com/38/38/?6d8a175e-125f-4a2f-9444-447857f90ddb",
        "name": "Mckee",
        "id": 3
      },
      {
        "balance": "$1,919.60",
        "picture": "//lorempixel.com/38/38/?31925bff-8a5a-4d30-9784-c60b33d6644f",
        "name": "Claudia",
        "id": 4
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "sunt",
      "reprehenderit",
      "mollit",
      "magna",
      "mollit",
      "laborum",
      "excepteur"
    ],
    "longitude": -126.866161,
    "latitude": 26.588598,
    "registered": "Wednesday, April 1, 2015 12:29 AM",
    "about": "Sit amet nulla cillum tempor est. Aute mollit non deserunt esse non commodo eu officia pariatur anim velit proident dolor cillum.",
    "address": "875 Miami Court, Columbus, Montana, 9512",
    "phone": "+1 (980) 432-2175",
    "email": "johns.conley@medifax.co.uk",
    "company": "MEDIFAX",
    "name": {
      "last": "Conley",
      "first": "Johns"
    },
    "eyeColor": "brown",
    "age": 22,
    "picture": "//lorempixel.com/680/280/?bfc037a8-45e1-4ce7-a631-3b5c9e6fcc90",
    "balance": "$2,425.56",
    "isActive": true,
    "guid": "deaec509-9250-4650-9214-ac0f15ea6e68",
    "index": 3,
    "_id": "5565c7f1c68e8dfafa5f7e0e"
  },
  {
    "favoriteFruit": "apple",
    "greeting": "Hello, Wilda! You have 8 unread messages.",
    "friends": [
      {
        "balance": "$1,768.87",
        "picture": "//lorempixel.com/38/38/?536e6717-77f7-4abe-a544-f8357fa37e78",
        "name": "Amanda",
        "id": 0
      },
      {
        "balance": "$1,245.14",
        "picture": "//lorempixel.com/38/38/?0493a947-29b3-468a-b3db-c59f3cbaaad5",
        "name": "Kirkland",
        "id": 1
      },
      {
        "balance": "$1,134.14",
        "picture": "//lorempixel.com/38/38/?ece0019e-5dbc-4493-b4ab-18227b4f2dd8",
        "name": "Barlow",
        "id": 2
      },
      {
        "balance": "$2,014.57",
        "picture": "//lorempixel.com/38/38/?9a92dd6c-9678-4ca7-a6a1-40e8cc483fc7",
        "name": "Lorena",
        "id": 3
      },
      {
        "balance": "$3,203.55",
        "picture": "//lorempixel.com/38/38/?a29c3552-9097-4419-a233-94f324ffefca",
        "name": "Bridgett",
        "id": 4
      },
      {
        "balance": "$1,872.97",
        "picture": "//lorempixel.com/38/38/?23feefcd-7b97-4dc5-a213-5563c3ec19bb",
        "name": "Eula",
        "id": 5
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "nulla",
      "minim",
      "aliqua",
      "velit",
      "aliqua",
      "ad",
      "ut"
    ],
    "longitude": -31.201931,
    "latitude": -16.031426,
    "registered": "Wednesday, May 21, 2014 2:23 AM",
    "about": "Irure Lorem occaecat labore velit sint aliqua excepteur est nisi aliqua duis. Aliquip duis sint non dolore minim laborum proident nulla occaecat non ea ullamco aute.",
    "address": "925 Columbus Place, Foscoe, Tennessee, 6437",
    "phone": "+1 (966) 455-2933",
    "email": "wilda.ramirez@oceanica.net",
    "company": "OCEANICA",
    "name": {
      "last": "Ramirez",
      "first": "Wilda"
    },
    "eyeColor": "green",
    "age": 31,
    "picture": "//lorempixel.com/680/280/?0966abe7-5452-4d71-a113-641e3799326d",
    "balance": "$3,537.65",
    "isActive": true,
    "guid": "a6a764d5-4ec4-4241-9ba9-cf74946b170d",
    "index": 4,
    "_id": "5565c7f111c00f6b7f921031"
  },
  {
    "favoriteFruit": "apple",
    "greeting": "Hello, Gardner! You have 6 unread messages.",
    "friends": [
      {
        "balance": "$3,411.47",
        "picture": "//lorempixel.com/38/38/?a097573d-bac1-4c40-a765-3bdfddd5f978",
        "name": "Garrison",
        "id": 0
      },
      {
        "balance": "$3,420.10",
        "picture": "//lorempixel.com/38/38/?2ce2cc07-a4cf-4bb7-b454-586bc79caf87",
        "name": "Patty",
        "id": 1
      },
      {
        "balance": "$2,902.88",
        "picture": "//lorempixel.com/38/38/?76638164-8707-49a8-8a6d-62b522a59d5f",
        "name": "Levy",
        "id": 2
      },
      {
        "balance": "$2,000.89",
        "picture": "//lorempixel.com/38/38/?157f9c60-aa72-4e52-84f2-2240ac078483",
        "name": "Anna",
        "id": 3
      },
      {
        "balance": "$3,469.46",
        "picture": "//lorempixel.com/38/38/?5e020b2e-ce8f-4745-80a6-a32c6b15dc60",
        "name": "Cleo",
        "id": 4
      },
      {
        "balance": "$2,463.34",
        "picture": "//lorempixel.com/38/38/?d732dd15-7685-4af1-9bfb-5f48e3182868",
        "name": "Robbins",
        "id": 5
      },
      {
        "balance": "$1,498.53",
        "picture": "//lorempixel.com/38/38/?5652ec3e-b9a4-4465-9897-03c825c34ef9",
        "name": "Brown",
        "id": 6
      },
      {
        "balance": "$2,442.54",
        "picture": "//lorempixel.com/38/38/?16266368-261f-4602-b974-046598e2eac3",
        "name": "Mara",
        "id": 7
      },
      {
        "balance": "$2,455.47",
        "picture": "//lorempixel.com/38/38/?0ac1296f-2226-48cb-9f2f-e4d44d201eff",
        "name": "Alexis",
        "id": 8
      },
      {
        "balance": "$1,833.03",
        "picture": "//lorempixel.com/38/38/?6d0df5c1-c51d-4d04-b377-bf7a8adb73ca",
        "name": "Greene",
        "id": 9
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "in",
      "velit",
      "voluptate",
      "ipsum",
      "voluptate",
      "magna",
      "nisi"
    ],
    "longitude": 7.196831,
    "latitude": 56.357374,
    "registered": "Tuesday, September 16, 2014 3:41 PM",
    "about": "Elit veniam non exercitation nulla aliquip ut nostrud Lorem nostrud laborum id ex incididunt. Tempor ad officia commodo duis sint laboris mollit et.",
    "address": "693 Linden Street, Baker, Minnesota, 6841",
    "phone": "+1 (865) 501-3123",
    "email": "gardner.rios@medicroix.tv",
    "company": "MEDICROIX",
    "name": {
      "last": "Rios",
      "first": "Gardner"
    },
    "eyeColor": "green",
    "age": 24,
    "picture": "//lorempixel.com/680/280/?55f80335-0471-4fcc-8c87-70ae2c5f6d62",
    "balance": "$1,861.47",
    "isActive": false,
    "guid": "97209704-dc08-439d-82df-2b33b29989ac",
    "index": 5,
    "_id": "5565c7f1dad1b72b3f2c01b3"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Campbell! You have 6 unread messages.",
    "friends": [
      {
        "balance": "$1,311.98",
        "picture": "//lorempixel.com/38/38/?41069029-1c83-40a5-9859-966c0a36d0c0",
        "name": "Jaime",
        "id": 0
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "incididunt",
      "culpa",
      "occaecat",
      "do",
      "ullamco",
      "exercitation",
      "dolor"
    ],
    "longitude": -38.560278,
    "latitude": -26.531589,
    "registered": "Tuesday, May 26, 2015 4:08 PM",
    "about": "Non occaecat commodo Lorem Lorem fugiat non excepteur nulla voluptate incididunt eu adipisicing excepteur labore. Nisi tempor elit id quis eu est ut aute.",
    "address": "430 Rewe Street, Dola, Pennsylvania, 2991",
    "phone": "+1 (959) 586-2344",
    "email": "campbell.rodgers@geekfarm.info",
    "company": "GEEKFARM",
    "name": {
      "last": "Rodgers",
      "first": "Campbell"
    },
    "eyeColor": "green",
    "age": 33,
    "picture": "//lorempixel.com/680/280/?51eea064-2f04-4884-9817-73379fba8a7f",
    "balance": "$2,313.66",
    "isActive": false,
    "guid": "f66d50e3-936c-44f4-9117-8e3c863b1469",
    "index": 6,
    "_id": "5565c7f18a3157ced0cba073"
  },
  {
    "favoriteFruit": "apple",
    "greeting": "Hello, Althea! You have 8 unread messages.",
    "friends": [
      {
        "balance": "$2,444.93",
        "picture": "//lorempixel.com/38/38/?a226bb7f-4a04-4637-a390-90920a7a1791",
        "name": "Velma",
        "id": 0
      },
      {
        "balance": "$2,713.42",
        "picture": "//lorempixel.com/38/38/?8f5baaf7-1e3f-4834-8903-1a31711c5eef",
        "name": "Berta",
        "id": 1
      },
      {
        "balance": "$2,429.75",
        "picture": "//lorempixel.com/38/38/?a0bd0ffa-4828-4142-81e7-a576b3899df1",
        "name": "Maude",
        "id": 2
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "deserunt",
      "elit",
      "id",
      "cillum",
      "adipisicing",
      "cillum",
      "duis"
    ],
    "longitude": -109.518286,
    "latitude": 27.730335,
    "registered": "Tuesday, February 18, 2014 8:34 PM",
    "about": "Culpa est reprehenderit aliquip sint magna id eu. Est culpa quis tempor nostrud est laboris ut nisi.",
    "address": "875 Suydam Place, Kohatk, New Mexico, 4173",
    "phone": "+1 (981) 426-2519",
    "email": "althea.johnston@earthplex.io",
    "company": "EARTHPLEX",
    "name": {
      "last": "Johnston",
      "first": "Althea"
    },
    "eyeColor": "brown",
    "age": 23,
    "picture": "//lorempixel.com/680/280/?d78e0b43-6aa2-496a-922b-c903af9ca95f",
    "balance": "$1,537.12",
    "isActive": false,
    "guid": "c87fdd45-1941-48e9-8f96-0c6437392432",
    "index": 7,
    "_id": "5565c7f1a8f5199c1834e26f"
  },
  {
    "favoriteFruit": "banana",
    "greeting": "Hello, Conley! You have 5 unread messages.",
    "friends": [
      {
        "balance": "$2,626.38",
        "picture": "//lorempixel.com/38/38/?ef311924-bfec-4053-836f-4b237a5124f7",
        "name": "Maxine",
        "id": 0
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "fugiat",
      "laborum",
      "sunt",
      "culpa",
      "magna",
      "id",
      "incididunt"
    ],
    "longitude": 79.005703,
    "latitude": 34.086995,
    "registered": "Friday, September 19, 2014 10:43 PM",
    "about": "Adipisicing eu tempor quis nisi dolor enim dolore dolor aliquip nostrud. Sunt officia non adipisicing aliquip aliquip ex tempor eu.",
    "address": "212 Lacon Court, Taycheedah, Hawaii, 507",
    "phone": "+1 (896) 473-2361",
    "email": "conley.prince@talendula.us",
    "company": "TALENDULA",
    "name": {
      "last": "Prince",
      "first": "Conley"
    },
    "eyeColor": "blue",
    "age": 37,
    "picture": "//lorempixel.com/680/280/?7a8b5d07-3bc2-4984-9f9b-f97d3e0e3ce9",
    "balance": "$3,515.73",
    "isActive": true,
    "guid": "d55a9b34-26a2-4d8e-8b2a-e15876189413",
    "index": 8,
    "_id": "5565c7f1a06781d9ebb6ca5f"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Lyons! You have 5 unread messages.",
    "friends": [
      {
        "balance": "$2,685.94",
        "picture": "//lorempixel.com/38/38/?1a98cc95-e7a8-4ffe-9479-2e32c8945260",
        "name": "Roseann",
        "id": 0
      },
      {
        "balance": "$1,430.58",
        "picture": "//lorempixel.com/38/38/?f3888599-2f33-44f1-9796-d88f2814618c",
        "name": "Howard",
        "id": 1
      },
      {
        "balance": "$2,974.58",
        "picture": "//lorempixel.com/38/38/?cdb3ab68-abf7-4a92-b01f-1bd86a88cf23",
        "name": "Dickerson",
        "id": 2
      },
      {
        "balance": "$1,676.12",
        "picture": "//lorempixel.com/38/38/?c995edb2-310a-464c-b9b3-8f068a882cff",
        "name": "Bishop",
        "id": 3
      },
      {
        "balance": "$1,026.42",
        "picture": "//lorempixel.com/38/38/?04ff2781-e8fe-4fa1-a7e1-2f05e6706e3e",
        "name": "Russell",
        "id": 4
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "commodo",
      "amet",
      "velit",
      "culpa",
      "elit",
      "non",
      "velit"
    ],
    "longitude": -109.519318,
    "latitude": 63.669429,
    "registered": "Wednesday, September 24, 2014 3:45 PM",
    "about": "Enim nostrud nisi magna sunt ut veniam sit id officia. Sunt occaecat aute anim cupidatat ipsum.",
    "address": "655 Branton Street, Oley, West Virginia, 5508",
    "phone": "+1 (876) 426-3341",
    "email": "lyons.newman@xoggle.org",
    "company": "XOGGLE",
    "name": {
      "last": "Newman",
      "first": "Lyons"
    },
    "eyeColor": "brown",
    "age": 35,
    "picture": "//lorempixel.com/680/280/?21dee526-a775-4399-a193-8e9287c5cc83",
    "balance": "$2,049.94",
    "isActive": false,
    "guid": "979f0fde-4773-4edd-b61f-b730343313fb",
    "index": 9,
    "_id": "5565c7f1fb432ebf13c068b3"
  },
  {
    "favoriteFruit": "apple",
    "greeting": "Hello, Carmela! You have 9 unread messages.",
    "friends": [
      {
        "balance": "$2,197.05",
        "picture": "//lorempixel.com/38/38/?5add31dc-6edb-42ac-80b1-e864c627c8ad",
        "name": "Carolina",
        "id": 0
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "laborum",
      "laboris",
      "ea",
      "reprehenderit",
      "eiusmod",
      "enim",
      "velit"
    ],
    "longitude": 65.814285,
    "latitude": -35.140616,
    "registered": "Friday, August 15, 2014 11:14 AM",
    "about": "Sit elit et labore proident sunt occaecat pariatur incididunt aliquip Lorem incididunt voluptate. Commodo commodo magna aliquip magna cillum aliquip.",
    "address": "561 Mill Road, Brady, Nebraska, 2342",
    "phone": "+1 (930) 441-2200",
    "email": "carmela.ross@cedward.name",
    "company": "CEDWARD",
    "name": {
      "last": "Ross",
      "first": "Carmela"
    },
    "eyeColor": "blue",
    "age": 30,
    "picture": "//lorempixel.com/680/280/?009e877a-8b25-4e12-b689-2bf1fd4d7859",
    "balance": "$3,111.69",
    "isActive": false,
    "guid": "f46922fa-4faa-4f88-a6b5-bf08a85f1149",
    "index": 10,
    "_id": "5565c7f137679c61ef0207bd"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Vargas! You have 7 unread messages.",
    "friends": [
      {
        "balance": "$3,832.01",
        "picture": "//lorempixel.com/38/38/?d838b3e8-62d1-4fff-a096-8c0d24255a71",
        "name": "Ashley",
        "id": 0
      },
      {
        "balance": "$1,123.16",
        "picture": "//lorempixel.com/38/38/?3246d762-5247-4533-a7ab-ff16cccb9b03",
        "name": "Whitehead",
        "id": 1
      },
      {
        "balance": "$3,412.40",
        "picture": "//lorempixel.com/38/38/?10804649-a917-43ca-9c41-a8842137c492",
        "name": "Velez",
        "id": 2
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "laboris",
      "id",
      "exercitation",
      "adipisicing",
      "sunt",
      "occaecat",
      "aliqua"
    ],
    "longitude": 168.516123,
    "latitude": -5.46758,
    "registered": "Tuesday, May 19, 2015 7:26 PM",
    "about": "Aute Lorem minim officia consequat do. Duis consectetur consectetur aliquip pariatur dolor.",
    "address": "111 Marconi Place, Shawmut, New Jersey, 4784",
    "phone": "+1 (925) 421-3392",
    "email": "vargas.edwards@confrenzy.ca",
    "company": "CONFRENZY",
    "name": {
      "last": "Edwards",
      "first": "Vargas"
    },
    "eyeColor": "brown",
    "age": 31,
    "picture": "//lorempixel.com/680/280/?eb4f1ec9-ce24-4580-aba8-690cf4b38c8b",
    "balance": "$2,165.24",
    "isActive": true,
    "guid": "1611768e-d296-405f-b2f7-e3912dfcec53",
    "index": 11,
    "_id": "5565c7f1524711c0ba91ce3b"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Regina! You have 8 unread messages.",
    "friends": [],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "aliquip",
      "deserunt",
      "id",
      "consectetur",
      "dolore",
      "excepteur",
      "eu"
    ],
    "longitude": -27.258032,
    "latitude": -23.815024,
    "registered": "Friday, September 5, 2014 3:43 AM",
    "about": "Qui amet veniam labore anim. Ad commodo pariatur elit sint tempor magna esse minim et qui mollit non excepteur non.",
    "address": "387 Bokee Court, Naomi, Maine, 3865",
    "phone": "+1 (817) 581-2633",
    "email": "regina.snyder@entroflex.me",
    "company": "ENTROFLEX",
    "name": {
      "last": "Snyder",
      "first": "Regina"
    },
    "eyeColor": "green",
    "age": 20,
    "picture": "//lorempixel.com/680/280/?8089f062-680d-45c1-84a6-4e40232548b6",
    "balance": "$3,054.12",
    "isActive": true,
    "guid": "fde49aab-55d7-4be4-b84a-3fd8a991678f",
    "index": 12,
    "_id": "5565c7f11fec33b3fcc84a4a"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Suzanne! You have 8 unread messages.",
    "friends": [
      {
        "balance": "$2,267.38",
        "picture": "//lorempixel.com/38/38/?771959fb-9be2-4cdc-9932-712aa9d6baf2",
        "name": "Mccray",
        "id": 0
      },
      {
        "balance": "$1,763.85",
        "picture": "//lorempixel.com/38/38/?413bffe8-fb9b-4c35-9d6e-4344bea31e2c",
        "name": "Barbara",
        "id": 1
      },
      {
        "balance": "$3,040.29",
        "picture": "//lorempixel.com/38/38/?6e178acc-0938-4546-8949-ccb23e70d83b",
        "name": "Allison",
        "id": 2
      },
      {
        "balance": "$3,667.24",
        "picture": "//lorempixel.com/38/38/?c01496a0-703a-46e8-8162-f30851170e5d",
        "name": "Neal",
        "id": 3
      },
      {
        "balance": "$2,132.70",
        "picture": "//lorempixel.com/38/38/?cd8049a2-77c6-4339-b6b2-0bd1cf6a5602",
        "name": "Hale",
        "id": 4
      },
      {
        "balance": "$1,791.54",
        "picture": "//lorempixel.com/38/38/?1c061e92-06c3-4719-8c17-9bcd3b1f3fd1",
        "name": "Sharpe",
        "id": 5
      },
      {
        "balance": "$2,128.78",
        "picture": "//lorempixel.com/38/38/?284b93dc-5df6-411b-bc35-6493fc0719bf",
        "name": "Lessie",
        "id": 6
      },
      {
        "balance": "$2,558.28",
        "picture": "//lorempixel.com/38/38/?aa1234d6-3d39-4dfd-8145-76ca50e70176",
        "name": "Keisha",
        "id": 7
      },
      {
        "balance": "$1,125.11",
        "picture": "//lorempixel.com/38/38/?38119f88-0ece-459d-ac91-fb020d58d12c",
        "name": "Mari",
        "id": 8
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "aliquip",
      "sint",
      "ut",
      "aute",
      "occaecat",
      "incididunt",
      "ea"
    ],
    "longitude": -119.293609,
    "latitude": -13.529612,
    "registered": "Tuesday, November 11, 2014 11:51 PM",
    "about": "Occaecat occaecat velit occaecat cupidatat do amet. In nulla sit dolore aliquip est Lorem.",
    "address": "792 Knapp Street, Homestead, South Dakota, 8711",
    "phone": "+1 (929) 426-3285",
    "email": "suzanne.davenport@unia.biz",
    "company": "UNIA",
    "name": {
      "last": "Davenport",
      "first": "Suzanne"
    },
    "eyeColor": "brown",
    "age": 27,
    "picture": "//lorempixel.com/680/280/?165d3e10-9281-44ad-96d6-176e4dd53c61",
    "balance": "$1,194.37",
    "isActive": true,
    "guid": "2f18a889-7739-4caa-ae44-a5d3116b36c5",
    "index": 13,
    "_id": "5565c7f1b3065f24c64c762f"
  },
  {
    "favoriteFruit": "apple",
    "greeting": "Hello, Farmer! You have 9 unread messages.",
    "friends": [
      {
        "balance": "$3,710.16",
        "picture": "//lorempixel.com/38/38/?322d050b-aa92-4ed4-bd23-b393db78dca3",
        "name": "Candace",
        "id": 0
      },
      {
        "balance": "$2,435.90",
        "picture": "//lorempixel.com/38/38/?5b6140c4-9c31-43f6-8243-b8ba614acef6",
        "name": "Kathie",
        "id": 1
      },
      {
        "balance": "$2,472.15",
        "picture": "//lorempixel.com/38/38/?c0218faa-15be-4242-96de-5e9781b1a925",
        "name": "Bennett",
        "id": 2
      },
      {
        "balance": "$2,078.57",
        "picture": "//lorempixel.com/38/38/?3370d5c4-56b9-42e3-bf4c-c2d23ef39add",
        "name": "Huff",
        "id": 3
      },
      {
        "balance": "$2,536.24",
        "picture": "//lorempixel.com/38/38/?921e06fd-d014-4f3d-9c3b-870a65a9b61f",
        "name": "Solomon",
        "id": 4
      },
      {
        "balance": "$1,299.27",
        "picture": "//lorempixel.com/38/38/?6d6f77b1-170d-4f0f-a65a-85844e5af529",
        "name": "Araceli",
        "id": 5
      },
      {
        "balance": "$3,179.87",
        "picture": "//lorempixel.com/38/38/?c5ebbe40-3108-421c-a7f6-871c82711791",
        "name": "Pitts",
        "id": 6
      },
      {
        "balance": "$3,250.63",
        "picture": "//lorempixel.com/38/38/?cef0495d-ce6c-405d-a34d-a568a9246591",
        "name": "Bonnie",
        "id": 7
      },
      {
        "balance": "$3,075.62",
        "picture": "//lorempixel.com/38/38/?2587e0e9-3b9f-4d48-b45e-51ebdf983d22",
        "name": "Lorrie",
        "id": 8
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "do",
      "elit",
      "cillum",
      "velit",
      "nulla",
      "mollit",
      "do"
    ],
    "longitude": -15.922712,
    "latitude": -7.295271,
    "registered": "Tuesday, July 22, 2014 1:50 PM",
    "about": "Adipisicing amet ex in anim quis velit minim fugiat consequat cupidatat. Pariatur labore ex cillum nisi Lorem mollit in elit.",
    "address": "983 Guider Avenue, Barstow, Wyoming, 5378",
    "phone": "+1 (930) 434-3464",
    "email": "farmer.burnett@niquent.com",
    "company": "NIQUENT",
    "name": {
      "last": "Burnett",
      "first": "Farmer"
    },
    "eyeColor": "brown",
    "age": 30,
    "picture": "//lorempixel.com/680/280/?e93ab5b9-cc3a-443d-8635-9e82f4244a2b",
    "balance": "$1,003.19",
    "isActive": true,
    "guid": "58c00cc3-a719-4954-a9fe-42c43a919b1c",
    "index": 14,
    "_id": "5565c7f1d15e57419132530e"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Alta! You have 7 unread messages.",
    "friends": [
      {
        "balance": "$3,830.40",
        "picture": "//lorempixel.com/38/38/?a66b1672-7872-49ca-a603-3851cc649bc3",
        "name": "Rosalyn",
        "id": 0
      },
      {
        "balance": "$3,037.55",
        "picture": "//lorempixel.com/38/38/?97a86616-83ca-4db2-aef2-d639f69ce0a6",
        "name": "Gladys",
        "id": 1
      },
      {
        "balance": "$3,136.13",
        "picture": "//lorempixel.com/38/38/?bcde5519-9577-4fc2-9c10-4571a5adcc99",
        "name": "Erika",
        "id": 2
      },
      {
        "balance": "$2,914.49",
        "picture": "//lorempixel.com/38/38/?bec32781-f1ff-4962-ae71-cb52ad8cb655",
        "name": "Lowery",
        "id": 3
      },
      {
        "balance": "$1,166.82",
        "picture": "//lorempixel.com/38/38/?9a53e7eb-286a-4b10-9b89-23bf770de867",
        "name": "Eileen",
        "id": 4
      },
      {
        "balance": "$2,771.41",
        "picture": "//lorempixel.com/38/38/?edc01f22-ad36-4c1f-adf5-13cb40f82619",
        "name": "Lavonne",
        "id": 5
      },
      {
        "balance": "$2,279.82",
        "picture": "//lorempixel.com/38/38/?fd5e1d45-9c54-469b-ae02-8c0b704207d0",
        "name": "Lee",
        "id": 6
      },
      {
        "balance": "$2,310.77",
        "picture": "//lorempixel.com/38/38/?7b4732da-756c-43cc-9b85-87d8fc18d429",
        "name": "Julianne",
        "id": 7
      },
      {
        "balance": "$3,420.82",
        "picture": "//lorempixel.com/38/38/?fc325283-87bf-47ac-b830-0a82109b9b8b",
        "name": "Sylvia",
        "id": 8
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "id",
      "aliquip",
      "non",
      "cillum",
      "et",
      "pariatur",
      "amet"
    ],
    "longitude": -107.264264,
    "latitude": 73.484748,
    "registered": "Thursday, May 29, 2014 2:27 AM",
    "about": "Sunt mollit velit magna amet enim ut ea est. Velit ad incididunt ut enim elit do esse enim ea duis esse fugiat nisi cillum.",
    "address": "967 Bergen Place, Fairforest, Washington, 4487",
    "phone": "+1 (830) 593-3078",
    "email": "alta.watkins@goko.co.uk",
    "company": "GOKO",
    "name": {
      "last": "Watkins",
      "first": "Alta"
    },
    "eyeColor": "green",
    "age": 30,
    "picture": "//lorempixel.com/680/280/?dd31bb0d-ea65-4cbd-8ee6-f144bd638bab",
    "balance": "$2,203.15",
    "isActive": true,
    "guid": "9e8cd270-2019-47f6-85e5-472ae4546196",
    "index": 15,
    "_id": "5565c7f13223c242dd5fcdeb"
  },
  {
    "favoriteFruit": "banana",
    "greeting": "Hello, Singleton! You have 5 unread messages.",
    "friends": [
      {
        "balance": "$1,171.76",
        "picture": "//lorempixel.com/38/38/?45416642-9b13-47eb-995f-08d8a88ecfe4",
        "name": "Haley",
        "id": 0
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "anim",
      "velit",
      "velit",
      "consequat",
      "duis",
      "nulla",
      "occaecat"
    ],
    "longitude": -10.248688,
    "latitude": -59.556616,
    "registered": "Sunday, March 22, 2015 5:26 AM",
    "about": "Pariatur aute enim ullamco dolore non magna ullamco cillum duis ea pariatur. Irure anim duis laborum esse ipsum ipsum quis nulla ullamco nisi labore commodo nostrud.",
    "address": "451 Brighton Court, Needmore, Delaware, 3946",
    "phone": "+1 (928) 590-3635",
    "email": "singleton.horn@escenta.net",
    "company": "ESCENTA",
    "name": {
      "last": "Horn",
      "first": "Singleton"
    },
    "eyeColor": "brown",
    "age": 23,
    "picture": "//lorempixel.com/680/280/?5659c7d4-6030-498e-ba0b-90f4ca5331d6",
    "balance": "$1,266.01",
    "isActive": false,
    "guid": "1636b06c-473a-4389-9666-8b34ca7eed60",
    "index": 16,
    "_id": "5565c7f136eb85b0abe0c812"
  },
  {
    "favoriteFruit": "banana",
    "greeting": "Hello, Rodriquez! You have 6 unread messages.",
    "friends": [
      {
        "balance": "$2,293.82",
        "picture": "//lorempixel.com/38/38/?9bb4ac78-911f-4217-99a5-3d727bf51e13",
        "name": "Cecile",
        "id": 0
      },
      {
        "balance": "$1,302.30",
        "picture": "//lorempixel.com/38/38/?18b1f5ef-3388-4fa8-95e4-0bf443179d5d",
        "name": "Mcgee",
        "id": 1
      },
      {
        "balance": "$1,525.17",
        "picture": "//lorempixel.com/38/38/?67882ffc-ffd6-44fb-a2ca-c2a2894499b5",
        "name": "Strong",
        "id": 2
      },
      {
        "balance": "$1,102.61",
        "picture": "//lorempixel.com/38/38/?b3260b55-05b2-4242-8212-2fc5c7dba8d3",
        "name": "Alvarez",
        "id": 3
      },
      {
        "balance": "$1,311.91",
        "picture": "//lorempixel.com/38/38/?08452dd7-f7c2-420a-ae8e-e46db468356b",
        "name": "Cummings",
        "id": 4
      },
      {
        "balance": "$2,937.36",
        "picture": "//lorempixel.com/38/38/?894878a2-1e4a-4762-aac2-85c1a1379e58",
        "name": "Valencia",
        "id": 5
      },
      {
        "balance": "$3,013.85",
        "picture": "//lorempixel.com/38/38/?0f97fd3f-9abe-4a2e-aa7c-31bfcc55e6a1",
        "name": "Dominguez",
        "id": 6
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "voluptate",
      "ut",
      "nostrud",
      "laboris",
      "ad",
      "id",
      "sunt"
    ],
    "longitude": 84.801159,
    "latitude": -47.973474,
    "registered": "Wednesday, October 1, 2014 1:38 AM",
    "about": "Veniam laboris officia veniam consequat eu ut Lorem pariatur. Est ipsum enim pariatur est enim cupidatat.",
    "address": "651 Harbor Lane, Cleary, Palau, 3079",
    "phone": "+1 (900) 507-2494",
    "email": "rodriquez.sexton@boink.tv",
    "company": "BOINK",
    "name": {
      "last": "Sexton",
      "first": "Rodriquez"
    },
    "eyeColor": "green",
    "age": 23,
    "picture": "//lorempixel.com/680/280/?d559fd6e-3284-4679-99da-c1284afdf34c",
    "balance": "$1,878.34",
    "isActive": true,
    "guid": "94bb48d4-0b49-46d4-885b-a88422cdfac4",
    "index": 17,
    "_id": "5565c7f1c05f7ce94c507273"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Pace! You have 6 unread messages.",
    "friends": [
      {
        "balance": "$3,612.45",
        "picture": "//lorempixel.com/38/38/?3572747a-67d9-4b42-b4a6-34885fa86063",
        "name": "Dora",
        "id": 0
      }
    ],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "laboris",
      "incididunt",
      "deserunt",
      "ad",
      "anim",
      "qui",
      "velit"
    ],
    "longitude": -173.808024,
    "latitude": 79.329157,
    "registered": "Tuesday, September 9, 2014 7:53 PM",
    "about": "Pariatur sit Lorem officia exercitation. Dolore pariatur quis laborum labore aliqua nostrud aliquip aute exercitation sint.",
    "address": "845 Powers Street, Snowville, Mississippi, 1517",
    "phone": "+1 (935) 444-2187",
    "email": "pace.washington@plasmox.info",
    "company": "PLASMOX",
    "name": {
      "last": "Washington",
      "first": "Pace"
    },
    "eyeColor": "green",
    "age": 23,
    "picture": "//lorempixel.com/680/280/?ca4d0fc7-d89a-4703-bf1c-6ece27a1b0ac",
    "balance": "$1,907.89",
    "isActive": false,
    "guid": "d0b3dc9e-bc08-4f70-a246-33e9743b5200",
    "index": 18,
    "_id": "5565c7f103268b2064a28ab9"
  },
  {
    "favoriteFruit": "strawberry",
    "greeting": "Hello, Leola! You have 10 unread messages.",
    "friends": [],
    "range": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9
    ],
    "tags": [
      "incididunt",
      "fugiat",
      "quis",
      "commodo",
      "do",
      "id",
      "adipisicing"
    ],
    "longitude": 112.301095,
    "latitude": 78.492262,
    "registered": "Monday, December 1, 2014 3:39 PM",
    "about": "Elit irure dolor officia exercitation nulla consectetur deserunt commodo ullamco. Reprehenderit et minim duis ex.",
    "address": "642 Bennet Court, Jacumba, Illinois, 2366",
    "phone": "+1 (888) 401-2685",
    "email": "leola.compton@opticall.io",
    "company": "OPTICALL",
    "name": {
      "last": "Compton",
      "first": "Leola"
    },
    "eyeColor": "blue",
    "age": 22,
    "picture": "//lorempixel.com/680/280/?5a591b26-c3c5-411a-a44d-85b68b9ee883",
    "balance": "$3,873.08",
    "isActive": true,
    "guid": "695ad41a-41b6-4100-8668-f6fdec0f9144",
    "index": 19,
    "_id": "5565c7f16f6c31f23f93a2dd"
  }
];
/*
.col-xs-4 {
  &:nth-child(2n+1) {
    &:after {
      //content: '<div class="clearfix"></div>';
      display: block;
      width: 10px;
      height: 10px;
      background-color: red;
    }
  }
}
*/

body {
  background-color: #f9f9f9;
  overflow-x: hidden;
}

h1 {
  margin: 0;
}

.col-xs-4 {
  padding-left: 5px;
  padding-right: 5px;
}

.thumbnail {
  position: relative;
  overflow: hidden;
  
  h5 {
    margin-top: 0;
  }
  
  p.about {
    height: 70px;
    overflow-y: auto;
    line-height: 13px;
    font-size: 11px;
  }
  
  .keywords-container {
    position: absolute;
    top: 10px;
    max-width: 100%;
    
    .label-primary {
      float: left;
      margin: 0 0 5px 5px;
    }
  }
  
  .caption {
    
    & > .btn-danger {
      width: 100%;
    }
  }
  
  .list-group {
    margin-bottom: 10px;
    height: 160px;
    overflow-y: auto;
  }
  
  .list-group-item {
    padding: 5px;
    
    label {
      font-size: 10px;
    }
    
    .btn-danger {
      //margin-top: 8px;
    }
  }
}
// https://raw.githubusercontent.com/eiriklv/react-masonry-mixin/master/lib/index.js

var isBrowser = (typeof window !== 'undefined');
var Masonry = window.Masonry;//isBrowser ? window.Masonry || require('masonry') : null;
var imagesloaded = null;//isBrowser ? require('imagesloaded') : null;

function MasonryMixin/*() {
    return function*/(reference, options) {
        return {
            masonry: false,

            domChildren: [],

            initializeMasonry: function(force) {
                if (!this.masonry || force) {
                    this.masonry = new Masonry(this.refs[reference].getDOMNode(), options);
                    this.domChildren = this.getNewDomChildren();
                }
            },

            getNewDomChildren: function () {
                var node = this.refs[reference].getDOMNode();
                var children = options.itemSelector ? node.querySelectorAll(options.itemSelector) : node.children;

                return Array.prototype.slice.call(children);
            },

            diffDomChildren: function() {
                var oldChildren = this.domChildren;
                var newChildren = this.getNewDomChildren();

                var removed = oldChildren.filter(function(oldChild) {
                    return !~newChildren.indexOf(oldChild);
                });

                var added = newChildren.filter(function(newChild) {
                    return !~oldChildren.indexOf(newChild);
                });

                var moved = [];

                if (removed.length === 0) {
                    moved = oldChildren.filter(function(child, index) {
                        return index !== newChildren.indexOf(child);
                    });
                }

                this.domChildren = newChildren;

                return {
                    old: oldChildren,
                    'new': newChildren, // fix for ie8
                    removed: removed,
                    added: added,
                    moved: moved
                };
            },

            performLayout: function() {
                var diff = this.diffDomChildren();

                if (diff.removed.length > 0) {
                    this.masonry.remove(diff.removed);
                    this.masonry.reloadItems();
                }

                if (diff.added.length > 0) {
                    this.masonry.appended(diff.added);
                }

                if (diff.moved.length > 0) {
                    this.masonry.reloadItems();
                }

                this.masonry.layout();
            },

            imagesLoaded: function() {
                imagesloaded(this.refs[reference].getDOMNode(), function(instance) {
                    this.masonry.layout();
                }.bind(this));
            },

            componentDidMount: function() {
                if (!isBrowser) return;

                this.initializeMasonry();
                this.performLayout();
                this.imagesLoaded();
            },

            componentDidUpdate: function() {
                if (!isBrowser) return;

                this.performLayout();
                this.imagesLoaded();
            },

            componentWillReceiveProps: function() {
                this._timer = setTimeout(function() {
                    this.masonry.reloadItems();
                    this.forceUpdate();
                }.bind(this), 0);
            },

            componentWillUnmount: function() {
                clearTimeout(this._timer);
            }
        };
    };
//}

//module.exports = MasonryMixin();