<!DOCTYPE html>
<html>
<head>
    <title>JSXGraph example</title>

    <!-- JSXGraph -->
    <link rel="stylesheet" type="text/css" href="../../distrib/jsxgraph.css" />
    <link rel="stylesheet" type="text/css" href="css/dark.css" />
    <script type="text/javascript" src="../../distrib/jsxgraphcore.js"></script>

    <!-- jQuery -->
    <script type="text/javascript" src="../jquery-3.5.1.min.js"></script>

    <!-- Syntax Highlighting -->
    <link rel="stylesheet" type="text/css" href="css/shCore.css" />
    <link rel="stylesheet" type="text/css" href="css/shThemeDark.css" />
    <script type="text/javascript" src="js/shCore.js"></script>
    <script type="text/javascript" src="js/shBrushJScript.js"></script>
</head>

<body>

<img src="img/logo-darker.png" id="watermark" />

<div id="header">
    <!--powered by<br /-->
    <span id="jsxgraph-head"><a href="http://jsxgraph.org/"><img src="img/logo-grayscale.png" alt="JSXGraph" /></a></span>
</div>

<div id="title">
    <ul id="menu">
        <li id="menu-title"><h2><a href="javascript:void(0);" id="head-construction">Enter title here</a></h2></li>
        <li id="menu-info"><h2><a href="javascript:void(0);" id="head-explanation">Info</a></h2></li>
        <li id="menu-source"><h2><a href="javascript:void(0);" id="head-source">Source</a></h2></li>
    </ul>
</div>

<div id="container" class="content-block">
    <center>
    <div id="construction">
        <div id="jxgbox" class="jxgbox" style="width: 800px; height: 500px;"></div>
    </div>
    </center>

<script type="text/javascript" src="js/dark.js">
</script>

<script id="jxg" type="text/javascript">

    (function() {

        var board = JXG.JSXGraph.initBoard('jxgbox', {
                boundingbox: [-5, 5, 5, -5],
                keepaspectreatio: true,
                axis: true,
                grid: false
            });

        // construction
        var p1 = board.create('point', [1, 1]),
            p2 = board.create('point', [-1, 1]),
            l = board.create('line', [p1, p2]),
            g = board.create('functiongraph', [function(x) {
                return x*2*Math.sin(x*5);
            }]),
            i = board.create('integral', [[-3, 3], g]);

    })();
</script>
</div>

<div id="explanation" class="content-block">
    Explanation goes here.
</div>


<div id="source" class="content-block">
    <script id="jxgsource" type="syntaxhighlighter" class="brush: js"></script>
</div>

<div id="footer">
    JSXGraph is licensed under <a href="http://www.gnu.org/licenses/lgpl.txt">LGPL</a>; &copy; 2008-2011 <a href="http://jsxgraph.uni-bayreuth.de/wp/documentation/the-team/">JSXGraph Team</a>
</div>

</div> <!-- #container -->


<script type="text/javascript">
    // <![CDATA[

    $(document).ready(function() {
        var parts = {
                construction: 'show',
                source: 'hide',
                explanation: 'hide'
            },
            part;

        $('#jxgsource').text($('#jxg').text());
        SyntaxHighlighter.all();

        for(part in parts) {
            $('#' + part)[parts[part]]();

            $('#head-'+part).click(function(_part) {
                return function() {
                    var p;
                    for(p in parts) {
                        $('#' + p).hide();
                    }

                    $('#'+_part).show();
                }
            }(part));
        }
    });

    // ]]>
</script>
</body>
</html>
