var Photo =  React.createClass({
    getTagDetail: function (tag){
      return (
        <li>{tag.name} ({tag.taglevel})</li>
      );
    },

  sortTags: function (tagA, tagB) {
    return tagA.taglevel - tagB.taglevel;
  },

    render: function(){
        return (
        <ListGroup data-title={this.props.title}>
    <ListGroupItem key={this.props.id}>{this.props.title}</ListGroupItem>
    <ListGroupItem key={this.props.title}>{this.props.tags.sort(this.sortTags).map(this.getTagDetail)}</ListGroupItem>
        </ListGroup>
        );
    }
})

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {
      isClicked: false
    }
  },
  onClick: function (e) {
    this.setState({
      isClicked: !this.state.isClicked
    })
    this.props.selectTag(this.props.tag);
  },
  render: function () {
    return (
      <a className={this.state.isClicked ? 'filter-panel-1' : ''} onClick={this.onClick}>{this.props.tag.name}</a>
    );
  }
});