//Require react-skylight
var SkyLight = require('react-skylight').SkyLight;

var App = React.createClass({
  showDialogWithCallBacks: function(){
    this.refs.dialogWithCallBacks.show();
  },
  showSimpleDialog: function(){
    this.refs.simpleDialog.show();
  },
  render:function(){
    return (
      <div>
        <p>
          <button onClick={this.showSimpleDialog}>Modal without callbacks</button>
          <button onClick={this.showDialogWithCallBacks}>Modal with callbacks</button>
        </p>
        <SkyLight ref="dialogWithCallBacks" title="Hello!, I'm a modal with callbacks!"
                  beforeOpen={this._executeBeforeFirstModalOpen}
                  afterOpen={this._executeAfterFirstModalOpen}
                  beforeClose={this._executeBeforeFirstModalClose}
                  afterClose={this._executeAfterFirstModalClose}>I have callbacks!</SkyLight>
        <SkyLight ref="simpleDialog" title="Hi, I'm a simple modal">
          Hello, I dont have any callback.
        </SkyLight>
      </div>
    )
  },
  _executeBeforeFirstModalOpen: function(){
    alert('Executed before open');
  },
  _executeAfterFirstModalOpen: function(){
    alert('Executed after open');
  },
  _executeBeforeFirstModalClose: function(){
    alert('Executed before close');
  },
  _executeAfterFirstModalClose: function(){
    alert('Executed after close');
  }
});

React.render(<App/>, document.getElementById("content"));