
var LegendAndTitles = React.createClass({
    flexPie: null,
    getInitialState: function () {
        return {
            data: Util.getData(),
            positions: Util.getPositions(),
            header: 'Fruit By Value',
            footer: '2014 GrapeCity, inc.',
            legendPosition: 'Right'
        }
    },

    // event handlers
    initialized: function (s, e) {
        this.flexPie = s;
        this.flexPie.legend.position = this.state.legendPosition;
    },
    headerChanged: function (e) {
        this.setState({ header: e.target.value });
    },
    footerChanged: function (e) {
        this.setState({ footer: e.target.value });
    },
    legendPositionChanged: function (s, e) {
        this.setState({ legendPosition: s.text });
        this.flexPie.legend.position = this.state.legendPosition;
    },

    render: function () {
        return <div>
            <h2 id="Legend">Legend and Titles</h2>
            <p>
                The <b>legend</b> properties can be used to customize the appearance of the chart's legend.
                The <b>header</b> and <b>footer</b> properties can be used to add titles to the FlexPie control as well.
            </p>
            <p>
                The following example allows you to change the FlexPie's <b>legend.position</b>, <b>header</b>, and <b>footer</b> properties
                 in real-time.
            </p>

            <div className="row">
                <div className="col-md-6">
                    <div>
                        <ul className="nav nav-tabs" role="tablist">
                            <li className="active"><a href="#ltJsx" role="tab" data-toggle="tab">JSX</a></li>
                            <li><a href="#ltJs" role="tab" data-toggle="tab">JS</a></li>
                        </ul>
                        <div className="tab-content">
                            <div className="tab-pane active pane-content" id="ltJsx">
                                {'  <Wj.FlexPie\n'}
                                {'     itemsSource={ this.state.data } \n'}
                                {'     initialized={this.initialized}\n'}
                                {'     binding="value"\n'}
                                {'     bindingName="name" \n'}
                                {'     header={ this.state.header }\n'}
                                {'     footer={ this.state.footer }/>\n'}
                                {'  <div className="form-horizontal">\n'}
                                {'     <div className="form-group">\n'}
                                {'         <label className="col-md-3 control-label">Header</label>\n'}
                                {'         <div className="col-md-9">\n'}
                                {'              <input className="form-control" value={ this.state.header } onChange={ this.headerChanged }/>\n'}
                                {'           </div>\n'}
                                {'     </div>\n'}
                                {'     <div className="form-group">\n'}
                                {'         <label className="col-md-3 control-label">Footer</label>\n'}
                                {'         <div className="col-md-9">\n'}
                                {'         <input className="form-control" value={ this.state.footer } onChange={ this.footerChanged }/>\n'}
                                {'         </div>\n'}
                                {'     </div>\n'}
                                {'     <div className="form-group">\n'}
                                {'         <label className="col-md-3 control-label">Legend Position</label>\n'}
                                {'         <div className="col-md-9">\n'}
                                {'         <Wj.ComboBox\n'}
                                {'             itemsSource={ this.state.positions }\n'}
                                {'             text={ this.state.legendPosition }\n'}
                                {'             textChanged={ this.legendPositionChanged } />\n'}
                                {'         </div>\n'}
                                {'     </div>\n'}
                                {'  </div>\n'}
                            </div>
                            <div className="tab-pane pane-content" id="ltJs">
                                {'     getInitialState: function () {\n'}
                                {'         return {\n'}
                                {'             data: Util.getData(),\n'}
                                {'             positions: Util.getPositions(),\n'}
                                {'             header: \'Fruit By Value\',\n'}
                                {'             footer: \'2014 GrapeCity, inc.\',\n'}
                                {'             legendPosition: \'Right\'\n'}
                                {'         }\n'}
                                {'     },\n'}
                                {'\n'}
                                {'     // event handlers\n'}
                                {'    initialized: function (s, e) {\n'}
                                {'        this.flexPie = s;\n'}
                                {'        this.flexPie.legend.position = this.state.legendPosition;\n'}
                                {'     },\n'}
                                {'     headerChanged: function(e) {\n'}
                                {'         this.setState({ header: e.target.value });\n'}
                                {'     },\n'}
                                {'     footerChanged: function(e) {\n'}
                                {'         this.setState({ footer: e.target.value });\n'}
                                {'     },\n'}
                                {'     legendPositionChanged: function(s, e) {\n'}
                                {'         this.setState({ legendPosition: s.text });\n'}
                                {'         this.flexPie.legend.position = this.state.legendPosition;\n'}
                                {'     },\n'}
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <h4>Result (live):</h4>
                    <Wj.FlexPie
                        itemsSource={this.state.data}
                        initialized={this.initialized}
                        binding="value"
                        bindingName="name"
                        header={this.state.header}
                        footer={this.state.footer}/>
                    <div className="form-horizontal">
                        <div className="form-group">
                            <label className="col-md-3 control-label">Header</label>
                            <div className="col-md-9">
                                <input className="form-control" value={this.state.header} onChange={this.headerChanged} />
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-md-3 control-label">Footer</label>
                            <div className="col-md-9">
                                <input className="form-control" value={this.state.footer} onChange={this.footerChanged} />
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-md-3 control-label">Legend Position</label>
                            <div className="col-md-9">
                                <Wj.ComboBox
                                    itemsSource={this.state.positions}
                                    text={this.state.legendPosition}
                                    textChanged={this.legendPositionChanged}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>;
    }
});
