/* @jsx React.DOM */
window.Components = {};

window.Components.MyAwesomeWidget = React.createClass({
    getInitialState: function() {
        return {
            color: '#000000'
        };
    },
    render: function() {
        console.log(this.props.caseSensitivePropertyName);

        var renderItem = function (item) {
            return <li key={item.text}>{item.text}</li>;
        };

        if (this.props.items === undefined) {
            return <div></div>;
        }

    return (React.DOM.div(null,
        "<my-reactive-element>",
            React.DOM.ul( {style: this.state}),
                this.props.items.map(renderItem)
            ),
        "</my-reactive-element>"
    ));
    },
    changeColor: function(color) {
        this.setState({
            color: color
        });
    }
});

document.registerReact('my-reactive-element', window.Components.MyAwesomeWidget);