/* global define */
define(['backbone', 'react'], function(Backbone, React) {
    'use strict';
    var TypeOneView = React.createClass({
        mixins: [Backbone.Events],
        getInitialState: function() {
            return {
                status: 'ok',
                headline: '',
                subline: '',
                subtext: '',
                style: {
                    display: 'block'
                }
            };
        },
        getDefaultProps: function() {
            return {
                size: 'col-lg-3 col-md-3 col-sm-3 col-xs-3',
                classId: 'typeOne',
                icon: 'fa-heart',
                title: 'Unconfigured'
            };
        },
        propTypes: {
            size: React.PropTypes.string,
            classId: React.PropTypes.string,
            icon: React.PropTypes.string,
            title: React.PropTypes.string
        },
        componentDidMount: function() {
            if (this.props.vent) {
                this.listenTo(this.props.vent, 'gauges:disappear', this.disappear);
                this.listenTo(this.props.vent, 'gauges:reappear', this.reappear);
                this.listenTo(this, 'status:ok', this.ok);
                this.listenTo(this, 'status:warn', this.warn);
                this.listenTo(this, 'status:fail', this.fail);
            }
        },
        ok: function() {
            this.setState({
                status: 'ok'
            });
        },
        warn: function() {
            this.setState({
                status: 'warn'
            });
        },
        fail: function() {
            this.setState({
                status: 'fail'
            });
        },
        disappear: function() {
            this.setState({
                style: {
                    display: 'none'
                }
            });
        },
        reappear: function() {
            this.setState({
                style: {
                    display: 'block'
                }
            });
        },
        componentWillUnmount: function() {
            this.stopListening();
        },
        render: function() {
            var stateIcon = 'fa-check';
            var stateColor = 'ok';
            if (this.state.status === 'warn') {
                stateIcon = 'fa-warning';
                stateColor = 'warn';
            } else if (this.state.status === 'fail') {
                stateIcon = 'fa-exclamation-circle';
                stateColor = 'fail';
            }
            return React.DOM.div({
                style: this.state.style
            }, [
                React.DOM.div({
                    className: this.props.size + ' custom-gutter '
                }, [
                    React.DOM.div({
                        className: 'gauge card ' + this.props.classId
                    }, [
                        React.DOM.span({
                            className: 'card-title',
                        }, [
                            React.DOM.i({
                                className: 'fa ' + this.props.icon + ' fa-lg'
                            }),
                                ' ' + this.props.title
                        ]),
                        React.DOM.div({
                            className: 'content'
                        }, [
                            React.DOM.div({
                                className: 'headline',
                                ref: 'headline'
                            },
                                this.state.headline),
                            React.DOM.div({
                                className: 'subline',
                                ref: 'subline'
                            },
                                this.state.subline),
                            React.DOM.div({
                                className: 'subtext',
                                ref: 'subtext'
                            },
                                this.state.subtext)
                        ]),
                        React.DOM.div({
                            className: 'card-icon ' + stateColor
                        }, [
                            React.DOM.span({
                                className: 'fa-stack fa-lg fa-2x'
                            }, [
                                React.DOM.i({
                                    className: 'fa fa-square-o fa-stack-2x'
                                }),
                                React.DOM.i({
                                    className: 'fa ' + stateIcon + ' fa-stack-1x'
                                })
                            ])
                        ])
                    ])
                ])
            ]);

        }
    });
    return TypeOneView;
});

@@ -2161,66 +2161,151 @@
 var 
-stateIcon = 'fa-check';%0A            var stateColor 
+cardIconStateClasses = %7B%0A                fa: true,%0A                'fa-stack-1x': true,%0A                'fa-check': this.state.status ==
 = 'ok'
-;
+,
 %0A   
@@ -2309,28 +2309,42 @@
             
-if (
+    'fa-warning': 
 this.state.s
@@ -2359,20 +2359,19 @@
 = 'warn'
-) %7B%0A
+,%0A 
         
@@ -2381,70 +2381,250 @@
     
- stateIcon = 'fa-warning';%0A                stateColor 
+'fa-exclamation-circle': this.state.status === 'fail'%0A            %7D;%0A            var cardIconClasses = %7B%0A                'card-icon': true,%0A                'ok': this.state.status === 'ok',%0A                'warn': this.state.status ==
 = 'warn'
 ;%0A  
@@ -2619,17 +2619,17 @@
 = 'warn'
-;
+,
 %0A       
@@ -2637,19 +2637,20 @@
     
-%7D else if (
+    'fail': 
 this
@@ -2677,115 +2677,512 @@
 ail'
-) %7B%0A                stateIcon = 'fa-exclamation-circle';%0A                stateColor = 'fail';%0A            %7D
+%0A            %7D;%0A            var iconClasses = %7B%0A                fa: true,%0A                'fa-lg': true,%0A            %7D;%0A            iconClasses%5Bthis.props.icon%5D = true;%0A            var cx = React.addons.classSet;%0A%0A            var sizeClasses = %7B%0A                'custom-gutter': true%0A            %7D;%0A            sizeClasses%5Bthis.props.size%5D = true;%0A%0A            var cardClasses = %7B%0A                gauge: true,%0A                card: true%0A            %7D;%0A            cardClasses%5Bthis.props.classId%5D = true;%0A
 %0A   
@@ -3337,43 +3337,23 @@
 me: 
-this.props.size + ' custom-gutter '
+cx(sizeClasses)
 %0A   
@@ -3445,42 +3445,23 @@
 me: 
-'gauge card ' + this.props.c
+cx(cardC
 lass
-Id
+es)
 %0A   
@@ -3694,42 +3694,23 @@
 me: 
-'fa ' + this.props.icon + ' fa-lg'
+cx(iconClasses)
 %0A   
@@ -4739,33 +4739,27 @@
 me: 
-'
+cx(
 card
--icon ' + stateColor
+IconClasses)
 %0A   
@@ -5183,42 +5183,32 @@
 me: 
-'fa ' + stateIcon + ' fa-stack-1x'
+cx(cardIconStateClasses)
 %0A   

Use the classSet addon from react for classes