/*

Hierarchy plan:

Mainbox
ImageForm             // Submit new image
Post                  // A post has one or more images and one commentbox
    Image             // Image itself
    Image...
    CommentList       // List of the comments
      Comment         // Individual comment
      Comment         // May have same-level comments
        Comment       // May have children
*/

// Main container
var MainBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="mainBox">
        <ImageForm />
        <Post data={this.state.data}/>
      </div>  
      );
  }
});

// Post has a title, one or more images with captions, and a comment box 
var Post = React.createClass({
  render: function() {
    console.log(this.props.data.images)
    if (this.props.data.images) {
      var images = this.props.data.images.map(function(image) {
        return (
          <Image alt={image.alt} src={image.src} txt={image.txt} />
        )
      })
    } else {
      return (<p>loading...</p>);
    }

    return (
      <div className="post">
        <h2>{this.props.data.title}</h2>
        <p>posted by: {this.props.data.author} </p>
        {images}
        <CommentList comments={this.props.data.comments} />
      </div>
    );
  }
});

// Class for the image posting form
var ImageForm = React.createClass({
  render: function() {
    return (
      <div className="imageForm">
        Placeholder - Image submit form here.
      </div>
    );
  }
});

// Individual image object
var Image = React.createClass({
  render: function() {
    return (
      <figure className="image">
        <img alt={this.props.alt} src={this.props.src} />
        <figcaption>{this.props.txt}</figcaption>
      </figure>
    );
  }
});


// Comments

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.comments.map(function(comment) {
    return (
      <Comment author={comment.author} key={comment.id}>
        {comment.text}
      </Comment>
    )
    });
    return (
      <div className="commentList">
        <h3>Comments</h3>
        {commentNodes}
        <CommentForm />
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Placeholder - Comment submit form here.
      </div>
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <strong className="commentAuthor">
          {this.props.author}:
        </strong>
        {this.props.children}
      </div>
    );
  }
});


// Main render function;
// serve either index page or the page content requested
var main = function() {
  var id = window.location.hash.slice(1);
  // Index page
  if (id.length === 0) {
    ReactDOM.render(
      <div className="index">
        <h1>ReactGIFs</h1>
        <p>ReactGIFs is a React-based image sharing site.</p>
      </div>
      , document.getElementById('content'))
  }
  else {
    id = "api/" + id;
    ReactDOM.render(<MainBox url={id}/>, document.getElementById('content'))
  }
}

// Run main at least once on initial load
main();

// Re-run main if the hash-url changes
$(window).on('hashchange', function() {
  main();
})
@@ -387,34 +387,87 @@
 %0A// 
-Main container%0Avar MainBox
+Post has a title, one or more images with captions, and a comment box %0Avar Post
  = R
@@ -916,275 +916,8 @@
 ) %7B%0A
-    return (%0A      %3Cdiv className=%22mainBox%22%3E%0A        %3CImageForm /%3E%0A        %3CPost data=%7Bthis.state.data%7D/%3E%0A      %3C/div%3E  %0A      );%0A  %7D%0A%7D);%0A%0A// Post has a title, one or more images with captions, and a comment box %0Avar Post = React.createClass(%7B%0A  render: function() %7B%0A
     
@@ -929,29 +929,29 @@
 le.log(this.
-props
+state
 .data.images
@@ -961,29 +961,29 @@
    if (this.
-props
+state
 .data.images
@@ -1006,29 +1006,29 @@
 ages = this.
-props
+state
 .data.images
@@ -1264,29 +1264,29 @@
   %3Ch2%3E%7Bthis.
-props
+state
 .data.title%7D
@@ -1315,29 +1315,29 @@
 d by: %7Bthis.
-props
+state
 .data.author
@@ -1396,21 +1396,21 @@
 s=%7Bthis.
-props
+state
 .data.co
@@ -3117,24 +3117,46 @@
 g site.%3C/p%3E%0A
+        %3CImageForm /%3E%0A
       %3C/div%3E
@@ -3260,15 +3260,12 @@
 er(%3C
-MainBox
+Post
  url

Remove unnecessary MainBox