/** @jsx React.DOM */

var React = require('react'),
	SetClass = require('classnames'),
	Tappable = require('react-tappable'),
	Navigation = require('touchstonejs').Navigation,
	Link = require('touchstonejs').Link,
	UI = require('touchstonejs').UI;

module.exports = React.createClass({
	mixins: [Navigation],

	getInitialState: function() {
		return {
			alertKey: 'muted'
		}
	},

	handleAlertChange: function(newAlert) {

		this.setState({
			alertKey: newAlert
		});

	},

	render: function() {

		var alertbarClass = SetClass({
			'alertbar': true,
			'primary': this.state.alertKey === 'primary',
			'success': this.state.alertKey === 'success',
			'warning': this.state.alertKey === 'warning',
			'danger': this.state.alertKey === 'danger'
		});

		return (
			<UI.FlexLayout className={this.props.viewClassName}>
				<UI.Headerbar type="default" label="Alert Bar">
					<UI.HeaderbarButton showView="home" viewTransition="reveal-from-right" label="Back" icon="ion-chevron-left" />
				</UI.Headerbar>
				<UI.FlexBlock height="30px" className={alertbarClass}>
					<div className="alertbar-text">When the state is "{this.state.alertKey}"</div>
				</UI.FlexBlock>
				<UI.FlexBlock grow scrollable>
					<div className="panel panel--first">
						<UI.RadioList value={this.state.alertKey} onChange={this.handleAlertChange} options={[
							{ label: 'Muted',  value: 'muted' },
							{ label: 'Primary',  value: 'primary' },
							{ label: 'Success',  value: 'success' },
							{ label: 'Warning',  value: 'warning' },
							{ label: 'Danger',   value: 'danger' }
						]} />
					</div>
				</UI.FlexBlock>
			</UI.FlexLayout>
		);
	}
});
@@ -358,19 +358,22 @@
 lert
-Key: 'muted
+Type: 'default
 '%0A%09%09
@@ -416,16 +416,20 @@
 newAlert
+Type
 ) %7B%0A%0A%09%09t
@@ -451,19 +451,20 @@
 %09%09%09alert
-Key
+Type
 : newAle
@@ -465,16 +465,20 @@
 newAlert
+Type
 %0A%09%09%7D);%0A%0A
@@ -509,262 +509,8 @@
  %7B%0A%0A
-%09%09var alertbarClass = SetClass(%7B%0A%09%09%09'alertbar': true,%0A%09%09%09'primary': this.state.alertKey === 'primary',%0A%09%09%09'success': this.state.alertKey === 'success',%0A%09%09%09'warning': this.state.alertKey === 'warning',%0A%09%09%09'danger': this.state.alertKey === 'danger'%0A%09%09%7D);%0A%0A
 %09%09re
@@ -772,94 +772,44 @@
 %3CUI.
-FlexBlock height=%2230px%22 className=%7BalertbarClass%7D%3E%0A%09%09%09%09%09%3Cdiv className=%22alertbar-text%22
+Alertbar type=%7Bthis.state.alertType%7D
 %3EWhe
@@ -845,38 +845,27 @@
 lert
-Key%7D%22%3C/div%3E%0A%09%09%09%09
+Type%7D%22
 %3C/UI.
-FlexBlock
+Alertbar
 %3E%0A%09%09
@@ -986,11 +986,12 @@
 lert
-Key
+Type
 %7D on
@@ -1054,13 +1054,15 @@
 l: '
-Muted
+Default
 ',  
@@ -1073,13 +1073,15 @@
 e: '
-muted
+default
 ' %7D,

convert illustration of alert-bar to component