text: /* 
  * @Author: Administrator
  * @Date:   2015-09-22 15:08:48
  * @Last Modified by:   Administrator
  * @Last Modified time: 2015-09-24 16:32:23
  */
  
  'use strict';
  
  var React = require('react');
  import utils from '../lib/utils.js';
  
  var Comment = React.createClass({
  	rawMarkup: function() {
  		var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
  		return { __html: rawMarkup };
  	},
  
  	render: function() {
  		return (
  			<div className="comment">
  				<h2 className="commentAuthor">
  					{this.props.author}
  				</h2>
  				<span dangerouslySetInnerHTML={this.rawMarkup()} />
  			</div>
  		);
  	}
  });
  
  var CommentBox = React.createClass({
  	loadCommentsFromServer: function() {
  		utils.httpGet(
  			this.props.url, 
  			'', 
  			function(xhr, status, err) {
  					console.error(this.props.url, status, err.toString());
  			}.bind(this),
  			function(data) {
  				this.setState({data: data});
  			}.bind(this)
  		);
  		// $.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)
  		// });
  	},
  	handleCommentSubmit: function(comment) {
  		var comments = this.state.data;
  		var newComments = comments.concat([comment]);
  		this.setState({data: newComments});
  		utils.httpPost(
  			this.props.url, 
  			comment, 
  			function(xhr, status, err) {
  					console.error(this.props.url, status, err.toString());
  			}.bind(this),
  			function(data) {
  				this.setState({data: data});
  			}.bind(this)
  		);
  		// httpPost: function(url, params, callback, complete)
  		// $.ajax({
  		// 	url: this.props.url,
  		// 	dataType: 'json',
  		// 	type: 'POST',
  		// 	data: comment,
  		// 	success: function(data) {
  		// 		this.setState({data: data});
  		// 	}.bind(this),
  		// 	error: function(xhr, status, err) {
  		// 		console.error(this.props.url, status, err.toString());
  		// 	}.bind(this)
  		// });
  	},
  	getInitialState: function() {
  		return {data: []};
  	},
  	componentDidMount: function() {
  		this.loadCommentsFromServer();
  		setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  	},
  	render: function() {
  		return (
  			<div className="commentBox">
  				<h1>Comments</h1>
  				<CommentList data={this.state.data} />
  				<CommentForm onCommentSubmit={this.handleCommentSubmit} />
  			</div>
  		);
  	}
  });
  
  var CommentList = React.createClass({
  	render: function() {
  		var commentNodes = this.props.data.map(function(comment, index) {
  			return (
  				// `key` is a React-specific concept and is not mandatory for the
  				// purpose of this tutorial. if you're curious, see more here:
  				// http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
  				<Comment author={comment.author} key={index}>
  					{comment.text}
  				</Comment>
  			);
  		});
  		return (
  			<div className="commentList">
  				{commentNodes}
  			</div>
  		);
  	}
  });
  
  var CommentForm = React.createClass({
  	handleSubmit: function(e) {
  		e.preventDefault();
  		var author = React.findDOMNode(this.refs.author).value.trim();
  		var text = React.findDOMNode(this.refs.text).value.trim();
  		if (!text || !author) {
  			return;
  		}
  		this.props.onCommentSubmit({author: author, text: text});
  		React.findDOMNode(this.refs.author).value = '';
  		React.findDOMNode(this.refs.text).value = '';
  	},
  	render: function() {
  		return (
  			<form className="commentForm" onSubmit={this.handleSubmit}>
  				<input type="text" placeholder="Your name" ref="author" />
  				<input type="text" placeholder="Say something..." ref="text" />
  				<input type="submit" value="Post" />
  			</form>
  		);
  	}
  });
  
  React.render(
  	<CommentBox url="comments.json" pollInterval={2000} />,
  	document.getElementById('app')
  );