define(
    [
        'react',
        'jquery',
    ],
    function (React, $) {
        var NavigationMenu = React.createClass({
            componentDidMount: function () {
                $(document).off('click', '.sidebar li a')
                    .on('click', '.sidebar li a', function (e) {
                        var animationSpeed = 500;
                        //Get the clicked link and the next element
                        var $this = $(this);
                        var checkElement = $this.next();

                        //Check if the next element is a menu and is visible
                        if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
                            //Close the menu
                            checkElement.slideUp(animationSpeed, function () {
                                checkElement.removeClass('menu-open');
                                //Fix the layout in case the sidebar stretches over the height of the window
                                //_this.layout.fix();
                            });
                            checkElement.parent("li").removeClass("active");
                        }
                        //If the menu is not visible
                        else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
                            //Get the parent menu
                            var parent = $this.parents('ul').first();
                            //Close all open menus within the parent
                            var ul = parent.find('ul:visible').slideUp(animationSpeed);
                            //Remove the menu-open class from the parent
                            ul.removeClass('menu-open');
                            //Get the parent li
                            var parent_li = $this.parent("li");

                            //Open the target menu and add the menu-open class
                            checkElement.slideDown(animationSpeed, function () {
                                //Add the class active to the parent li
                                checkElement.addClass('menu-open');
                                parent.find('li.active').removeClass('active');
                                parent_li.addClass('active');
                                //Fix the layout in case the sidebar stretches over the height of the window
                                //_this.layout.fix();
                            });
                        }
                        //if this isn't a link, prevent the page from being redirected
                        if (checkElement.is('.treeview-menu')) {
                            e.preventDefault();
                        }
                    });
            },
            render: function () {
                return (
                    <aside className="main-sidebar">
                        {/* sidebar: style can be found in sidebar.less */}
                        <section className="sidebar">
                            {/* Sidebar user panel */}
                            <div className="user-panel">
                                <div className="pull-left image">
                                    <img src="dist/img/user2-160x160.jpg" className="img-circle" alt="User Image"/>
                                </div>
                                <div className="pull-left info">
                                    <p>Carnegie</p>
                                    <a href="#"><i className="fa fa-circle text-success"></i> Online</a>
                                </div>
                            </div>
                            {/* search form */}
                            <form action="#" method="get" className="sidebar-form">
                                <div className="input-group">
                                    <input type="text" name="q" className="form-control" placeholder="Search..."/>
                                    <span className="input-group-btn">
                                    <button type="submit" name="search" id="search-btn" className="btn btn-flat"><i
                                        className="fa fa-search"></i></button>
                                  </span>
                                </div>
                            </form>
                            {/* /.search form */}
                            {/* sidebar menu: : style can be found in sidebar.less */}
                            <ul className="sidebar-menu">
                                <li className="header">导航</li>
                                <li className="active treeview">
                                    <a href="#">
                                        <i className="fa fa-dashboard"></i>
                                        <span>
                                            深大课表
                                        </span>
                                        <i className="fa fa-angle-left pull-right"></i>
                                    </a>
                                    {/*<ul className="treeview-menu">
                                     <li className="active"><a href="index.html"><i className="fa fa-circle-o"></i> 课表</a></li>
                                     <li><a href="index2.html"><i className="fa fa-circle-o"></i> 活动</a></li>
                                     </ul>*/}
                                </li>
                                <li class="treeview">
                                    <a href="#">
                                        <i class="fa fa-laptop"></i>
                                        <span>UI Elements</span>
                                        <span class="pull-right-container">
                                            <i class="fa fa-angle-left pull-right"></i>
                                        </span>
                                    </a>
                                    <ul class="treeview-menu">
                                        <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a>
                                        </li>
                                        <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
                                        <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a>
                                        </li>
                                        <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a>
                                        </li>
                                        <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a>
                                        </li>
                                        <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a>
                                        </li>
                                    </ul>
                                </li>
                                <li className="treeview">
                                    <a href="#">
                                        <i className="fa fa-files-o"></i>
                                        <span>功能2</span>
                                        <span className="label label-primary pull-right">4</span>
                                    </a>
                                    <ul className="treeview-menu">
                                        <li><a href="pages/layout/top-nav.html"><i className="fa fa-circle-o"></i> Top
                                            Navigation</a></li>
                                        <li><a href="pages/layout/boxed.html"><i className="fa fa-circle-o"></i>
                                            Boxed</a></li>
                                        <li><a href="pages/layout/fixed.html"><i className="fa fa-circle-o"></i>
                                            Fixed</a></li>
                                        <li><a href="pages/layout/collapsed-sidebar.html"><i
                                            className="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="pages/widgets.html">
                                        <i className="fa fa-th"></i>
                                        <span>功能3</span>
                                        <small className="label pull-right bg-green">new</small>
                                    </a>
                                </li>
                                <li className="treeview">
                                    <a href="#">
                                        <i className="fa fa-pie-chart"></i>
                                        <span>功能4</span>
                                        <i className="fa fa-angle-left pull-right"></i>
                                    </a>
                                    <ul className="treeview-menu">
                                        <li><a href="pages/charts/chartjs.html"><i className="fa fa-circle-o"></i>
                                            ChartJS</a></li>
                                        <li><a href="pages/charts/morris.html"><i className="fa fa-circle-o"></i> Morris</a>
                                        </li>
                                        <li><a href="pages/charts/flot.html"><i className="fa fa-circle-o"></i> Flot</a>
                                        </li>
                                        <li><a href="pages/charts/inline.html"><i className="fa fa-circle-o"></i> Inline
                                            charts</a></li>
                                    </ul>
                                </li>
                                <li className="treeview">
                                    <a href="#">
                                        <i className="fa fa-laptop"></i>
                                        <span>功能5</span>
                                        <i className="fa fa-angle-left pull-right"></i>
                                    </a>
                                    <ul className="treeview-menu">
                                        <li><a href="pages/UI/general.html"><i className="fa fa-circle-o"></i>
                                            General</a></li>
                                        <li><a href="pages/UI/icons.html"><i className="fa fa-circle-o"></i> Icons</a>
                                        </li>
                                        <li><a href="pages/UI/buttons.html"><i className="fa fa-circle-o"></i>
                                            Buttons</a></li>
                                        <li><a href="pages/UI/sliders.html"><i className="fa fa-circle-o"></i>
                                            Sliders</a></li>
                                        <li><a href="pages/UI/timeline.html"><i className="fa fa-circle-o"></i> Timeline</a>
                                        </li>
                                        <li><a href="pages/UI/modals.html"><i className="fa fa-circle-o"></i> Modals</a>
                                        </li>
                                    </ul>
                                </li>
                                <li className="treeview">
                                    <a href="#">
                                        <i className="fa fa-edit"></i> <span>功能6</span>
                                        <i className="fa fa-angle-left pull-right"></i>
                                    </a>
                                    <ul className="treeview-menu">
                                        <li><a href="pages/forms/general.html"><i className="fa fa-circle-o"></i>
                                            General Elements</a></li>
                                        <li><a href="pages/forms/advanced.html"><i className="fa fa-circle-o"></i>
                                            Advanced Elements</a></li>
                                        <li><a href="pages/forms/editors.html"><i className="fa fa-circle-o"></i>
                                            Editors</a></li>
                                    </ul>
                                </li>
                                <li className="treeview">
                                    <a href="#">
                                        <i className="fa fa-table"></i> <span>功能7</span>
                                        <i className="fa fa-angle-left pull-right"></i>
                                    </a>
                                    <ul className="treeview-menu">
                                        <li><a href="pages/tables/simple.html"><i className="fa fa-circle-o"></i> Simple
                                            tables</a></li>
                                        <li><a href="pages/tables/data.html"><i className="fa fa-circle-o"></i> Data
                                            tables</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="pages/calendar.html">
                                        <i className="fa fa-calendar"></i> <span>功能8</span>
                                        <small className="label pull-right bg-red">3</small>
                                    </a>
                                </li>
                                <li>
                                    <a href="pages/mailbox/mailbox.html">
                                        <i className="fa fa-envelope"></i> <span>功能9</span>
                                        <small className="label pull-right bg-yellow">12</small>
                                    </a>
                                </li>
                                <li className="treeview">
                                    <a href="#">
                                        <i className="fa fa-folder"></i> <span>功能10</span>
                                        <i className="fa fa-angle-left pull-right"></i>
                                    </a>
                                    <ul className="treeview-menu">
                                        <li><a href="pages/examples/invoice.html"><i className="fa fa-circle-o"></i>
                                            Invoice</a></li>
                                        <li><a href="pages/examples/profile.html"><i className="fa fa-circle-o"></i>
                                            Profile</a></li>
                                        <li><a href="pages/examples/login.html"><i className="fa fa-circle-o"></i> Login</a>
                                        </li>
                                        <li><a href="pages/examples/register.html"><i className="fa fa-circle-o"></i>
                                            Register</a></li>
                                        <li><a href="pages/examples/lockscreen.html"><i className="fa fa-circle-o"></i>
                                            Lockscreen</a></li>
                                        <li><a href="pages/examples/404.html"><i className="fa fa-circle-o"></i> 404
                                            Error</a></li>
                                        <li><a href="pages/examples/500.html"><i className="fa fa-circle-o"></i> 500
                                            Error</a></li>
                                        <li><a href="pages/examples/blank.html"><i className="fa fa-circle-o"></i> Blank
                                            Page</a></li>
                                    </ul>
                                </li>
                                <li className="treeview">
                                    <a href="#">
                                        <i className="fa fa-share"></i> <span>Multilevel</span>
                                        <i className="fa fa-angle-left pull-right"></i>
                                    </a>
                                    <ul className="treeview-menu">
                                        <li><a href="#"><i className="fa fa-circle-o"></i> Level One</a></li>
                                        <li>
                                            <a href="#"><i className="fa fa-circle-o"></i> Level One <i
                                                className="fa fa-angle-left pull-right"></i></a>
                                            <ul className="treeview-menu">
                                                <li><a href="#"><i className="fa fa-circle-o"></i> Level Two</a></li>
                                                <li>
                                                    <a href="#"><i className="fa fa-circle-o"></i> Level Two <i
                                                        className="fa fa-angle-left pull-right"></i></a>
                                                    <ul className="treeview-menu">
                                                        <li><a href="#"><i className="fa fa-circle-o"></i> Level
                                                            Three</a></li>
                                                        <li><a href="#"><i className="fa fa-circle-o"></i> Level
                                                            Three</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="#"><i className="fa fa-circle-o"></i> Level One</a></li>
                                    </ul>
                                </li>
                                <li><a href="documentation/index.html"><i className="fa fa-book"></i> <span>Documentation</span></a>
                                </li>
                                <li className="header">LABELS</li>
                                <li><a href="#"><i className="fa fa-circle-o text-red"></i> <span>Important</span></a>
                                </li>
                                <li><a href="#"><i className="fa fa-circle-o text-yellow"></i> <span>Warning</span></a>
                                </li>
                                <li><a href="#"><i className="fa fa-circle-o text-aqua"></i>
                                    <span>Information</span></a></li>
                            </ul>
                        </section>
                        {/* /.sidebar */}
                    </aside>
                )
            }
        });

        return NavigationMenu
    }
)