window.Code = React.createClass({ propTypes: { code: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]) }, componentDidMount: function () { // hljs.highlightBlock($(React.findDOMNode(this.refs.code))[0]); }, render: function () { return (


			{Array.isArray(this.props.code) ? this.props.code.join('\n') : this.props.code}

); } }); window.Example = React.createClass({ statics: { DEFAULT_WIDTH: 3 }, propTypes: { id: React.PropTypes.string, title: React.PropTypes.string, desc: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element, React.PropTypes.arrayOf(React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.element])) ]), xml: React.PropTypes.oneOfType([ React.PropTypes.element, React.PropTypes.shape({ width: React.PropTypes.number, xml: React.PropTypes.element }), React.PropTypes.arrayOf(React.PropTypes.oneOfType([ React.PropTypes.element, React.PropTypes.shape({ width: React.PropTypes.number, xml: React.PropTypes.element }) ])) ]), code: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]) }, getInitialState: function () { return { showCode: false } }, componentWillUpdate: function () { this.state.showCode = false; }, renderXML: function (xml) { if (xml == null) { return null; } if (Array.isArray(xml)) { return xml.map(this.renderXML); } else { var css = {}; css['col-sm-' + (xml.width ? xml.width : Example.DEFAULT_WIDTH)] = true; css['col-md-' + (xml.width ? xml.width : Example.DEFAULT_WIDTH)] = true; css['col-lg-' + (xml.width ? xml.width : Example.DEFAULT_WIDTH)] = true; return (

{xml.xml ? xml.xml : xml}

); } }, onCodeLinkClicked: function () { $(':focus').blur(); this.setState({ showCode: !this.state.showCode }); }, renderCodeLinkBlock: function () { if (!this.props.code) { return null; } return ( Code); }, renderUIBlock: function () { return (

Example {this.renderCodeLinkBlock()}

{this.renderXML(this.props.xml)}

); }, renderCodeBlock: function () { if (!this.props.code || !this.state.showCode) { return null; } return (

);
	},
	renderExampleBlock: function () {
		if (!this.props.xml && !this.props.code) {
			return null;
		}
		return (
			{this.renderUIBlock()}
			{this.renderCodeBlock()}
		);
	},
	render: function () {
		return (
			
				
				

					
					{this.props.title}
				

				{this.props.desc}
			

			{this.renderExampleBlock()}
		
);
	}
});

window.ExampleList = React.createClass({
	propTypes: {
		title: React.PropTypes.string,
		formType: React.PropTypes.string,
		items: React.PropTypes.arrayOf(React.PropTypes.shape({
			id: React.PropTypes.string,
			title: React.PropTypes.string,
			desc: React.PropTypes.oneOfType([React.PropTypes.string,
				React.PropTypes.element,
				React.PropTypes.arrayOf(React.PropTypes.oneOfType([
					React.PropTypes.string,
					React.PropTypes.element]))
			]),
			xml: React.PropTypes.oneOfType([
				React.PropTypes.element,
				React.PropTypes.shape({
					width: React.PropTypes.number,
					xml: React.PropTypes.element
				}),
				React.PropTypes.arrayOf(React.PropTypes.oneOfType([
					React.PropTypes.element,
					React.PropTypes.shape({
						width: React.PropTypes.number,
						xml: React.PropTypes.element
					})
				]))
			]),
			code: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)])
		}))
	},
	getInitialState: function () {
		return {}
	},
	componentDidMount: function () {
		$('body').scrollspy({target: '#scrollspy'})
	},
	renderItem: function (item) {
		if (item.children) {
			return (
				
					
					
						
						{item.title}
					

					{item.desc}
				

				
					{item.children.map(this.renderItem)}
				
			
);
		} else {
			return ();
		}
	},
	renderNavItem: function (item) {
		if (item.children) {
			return (
				{item.title}
				
					{item.children.map(this.renderNavItem)}
				
			);
		} else {
			return {item.title};
		}
	},
	renderFormType: function () {
		if (this.props.formType) {
			return type: {this.props.formType};
		} else {
			return null;
		}
	},
	render: function () {
		return (
			
				
					
						{this.props.title}
						{this.renderFormType()}
						
					
					
						{this.props.items.map(this.renderItem)}
					
				
			
			
				
					{this.props.items.map(this.renderNavItem)}
				
			
		);
	}
});

window.APIList = React.createClass({
	getInitialState: function () {
		return {}
	},
	componentDidMount: function () {
		$('body').scrollspy({target: '#scrollspy'})
	},
	renderChildren: function (item) {
		if (item.children) {
			return (
				{item.children.map(this.renderItem)}
			);
		} else {
			return null;
		}
	},
	renderItem: function (item) {
		return (
			
				
				

					
					{item.title}
				

				{item.pattern ? ({item.pattern}) : null}
			

			
				{item.desc}
			
			{this.renderChildren(item)}
		
);
	},
	renderNavItem: function (item) {
		if (item.children) {
			return (
				{item.title}
				
					{item.children.map(this.renderNavItem)}
				
			);
		} else {
			return {item.title};
		}
	},
	render: function () {
		return (
			
				
					
						{this.props.title}
						
					
					
						{this.props.items.map(this.renderItem)}
					
				
			
			
				
					{this.props.items.map(this.renderNavItem)}
				
			
		);
	}
});

(function (context, $pt) {
	var $demo = $pt.getService(context, '$demo');

	var stringify = function (obj, prop) {
		var placeholder = '____PLACEHOLDER____';
		var codetablePlaceholder = '____CODETABLE____';
		var modelPlaceholder = '____MODEL____';
		var fns = [];
		var codetables = [];
		var models = [];
		var json = JSON.stringify(obj, function (key, value) {
			if (typeof value === 'function') {
				fns.push(value);
				return placeholder;
			} else if (value != null && value.__initCodesArray) {
				codetables.push(value.name());
				return codetablePlaceholder;
			} else if (value != null && value.__base) {
				models.push(value.name());
				return modelPlaceholder;
			}
			return value;
		}, '\t');
		json = json.replace(new RegExp('"' + placeholder + '"', 'g'), function (_) {
			return fns.shift();
		}).replace(new RegExp('"' + codetablePlaceholder + '"', 'g'), function (_) {
			return codetables.shift();
		}).replace(new RegExp('"' + modelPlaceholder + '"', 'g'), function (_) {
			return models.shift();
		});
		return json;
	};
	$demo.convertModelCreatorToString = function (def) {
		var variableName = def.variable;
		var template = def.template;
		if (def.validatorVariable) {
			return "var " + def.validatorVariable + " = $pt.createModelValidator(" + stringify(def.validatorTemplate) + ");\n" +
				"var " + variableName + " = $pt.createModel(" + stringify(template) + ", " + def.validatorVariable + ");\n";
		} else {
			return "var " + variableName + " = $pt.createModel(" + stringify(template) + ");\n";
		}
	};

	$demo.convertCellLayoutCreatorToString = function (def) {
		var variableName = def.variable;
		var cellKey = def.cellKey;
		var template = def.template;
		return "var " + variableName + " = $pt.createCellLayout('" + cellKey + "', " + stringify(template) + ");\n";
	};
	$demo.convertFormLayoutCreatorToString = function (def) {
		var variableName = def.variable;
		var template = def.template;
		return "var " + variableName + " = $pt.createFormLayout(" + stringify(template) + ");\n";
	};

	$demo.convertComponentCreatorToString = function (def) {
		var tagName = def.tag;
		var attrNames = Object.keys(def).filter(function (key) {
			return key != 'tag';
		});
		var attrs = attrNames.map(function (key) {
			return key + "={" + def[key] + "}";
		});
		return "<" + tagName + " " + (attrs.join(' ')) + " />";
	};

	$demo.convertJSON = function (def) {
		return 'var ' + def.variable + ' = ' + stringify(def.json) + ';\n';
	};

	$demo.convertCSSJSONToExample = function (def) {
		return {
			id: def.id,
			title: 'CSS',
			desc: 'Customized CSS.',
			code: "var layout = " + stringify({css: def.css}) + ";\n",
			index: def.index
		};
	};

	$demo.convertMockJSONToExample = function (def) {
		var code = null;
		var mocks = def.mock;
		if (Array.isArray(mocks)) {
			code = mocks.map(function (mock) {
				return "$pt.mock(" + stringify(mock) + ");\n";
			});
		} else {
			code = "$pt.mock(" + stringify(mocks) + ");\n";
		}
		return {
			id: def.id,
			title: 'Mock Data',
			desc: 'Mock data which used in examples.',
			code: code,
			index: def.index
		};
	};

	$demo.convertToExampleList = function (def) {
		var examples = Object.keys(def).map(function (key) {
			return def[key].call(this);
		});
		examples.sort(function (e1, e2) {
			return e1.index - e2.index;
		});
		return examples;
	};

	$demo.convertCodeTableCreatorToString = function (def) {
		var variableName = def.variable;
		var codetable = def.codetable;
		codetable.name(variableName);
		var renderer = codetable.getRenderer();
		if (renderer) {
			return "var " + variableName + " = $pt.createCodeTable(" + stringify(codetable.list()) + ", " + renderer + ");\n"
		}
		return "var " + variableName + " = $pt.createCodeTable(" + stringify(codetable.list()) + ");\n";
	};
}(this, $pt));