<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="New Judge Form">
    <meta name="author" content="Team Summer 2015">
    <title>Mobile Judge: Invitation Rejected</title>
    <!-- Bootstrap core CSS -->
    <link href="/thirdparty/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/thirdparty/font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="/css/custom.css" rel="stylesheet">
    <script src="/scripts/console-polyfill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-sham.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://fb.me/react-with-addons-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
    <script src="/scripts/bootstrap.js"></script>
    <script src="/modelsjs/users.js"></script>
    <noscript>Mobile Judge requires javascript enabled for each one of its functions, please use a browser capable of executing javascript.</noscript>
</head>

<body>
<script type="text/jsx">

    //Header used in all of the pages
    var Header = React.createClass({
        render: function () {
            console.log("handleClick HEADER", this);
            return (
                <header>
                    <nav className="navbar navbar-default navbar-fixed-top custom-navbar no-border-radius" role="navigation">
                        <div className="container">
                            <div className="navbar-brand-center">
                                <span className="bar-title">Mobile Judge</span>
                            </div>
                        </div>
                    </nav>
                </header>
            );
        }
    });

    var Alert = React.createClass({
        getInitialState: function () {
            return ({
                show: false,
                type: "info",
                messages: []
            })
        },
        render: function (){
            if(this.props.show != true)
            {
                return (false);
            }
            return(
                <div className={'alert alert-' + this.props.type}>
                    {
                        this.props.messages.map(function(m){
                            return (<p>{m}</p>)
                        })
                    }
                </div>
            )
        }
    })

    var UserConfirmation = React.createClass({
        handleClick: function (event) {
                //move to main App
        },

        render: function () {
            console.log("JUDGEDATA", this.props.judgeData);
            return (
                <div className='row'>
                    <div className="page-header">
                        <h1>We are sorry you have decided to stop judging in FIU Senior Projects, we wish you the best.</h1>
                    </div>
                    <div className="alert alert-info">
                        Hopefully we will see you next term.
                    </div>
                </div>

            )
        }
    })


    var Footer = React.createClass({
        render: function () {
            return (
                <nav className='navbar navbar-default navbar-fixed-bottom'>
                    <div className='container-fluid no-padding text-center' style={{padding:"15px"}}>
                        <b>Mobile Judge: Summer 2015</b>
                    </div>
                </nav>
            )
        }
    })

    var Content = React.createClass({
        render: function () {
            {console.log(this,"You got here Reder Content")}
            return this.props.view
        }
    });

    var App = React.createClass({
        getInitialState: function () {
            return ({
                currView: "UserForm",
                judge: {
                    Email: '',
                    termid: '',
                    judgeid: ''
                }
            })

        },
        changeView: function (view) {
            this.setState({currView: view});
        },

        componentWillMount: function () {
            console.log("COMPONENT WILL MOUNT APP");
            $(UserEntity).on('JudgesHasChanged', function () {
                this.setState({judge: UserEntity.getJudge()});
            }.bind(this))
        },

        render: function() {
            {console.log("You got here Reder APP")};
            var result = '';
            return (
                <div className="container">
                    <Header onViewChange={this.changeView}/>
                    <UserConfirmation />
                    <Footer />
                </div>
            )
        }
    })

    React.render(<App />, document.body);
    UserEntity.loadJudgeInvite(<?=$userid;?>);
</script>

<!-- JavaScript -->
</body>
</html>

