<!DOCTYPE html>

<html lang="en"> 
    <head>
        <title>Geometric Constructions and Experiments</title>
        <meta charset="utf-8">
        <meta name="title" content="Geometric Constructions" />
        <meta name="description" content="Geometric Constructions Test Page" />

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style type="text/css">
            html, body { overflow: hidden; font-size: 14px; font-family: Helvetica, sans-serif, Arial; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; background-color: white; border: 0; }
            canvas { margin: 0; padding: 0; display: block; }
            td { overflow: hidden; vertical-align: top; }
            .container { overflow: hidden; position: relative; width: 100%; height: 100%; }
            #legend { position: relative; left: 0px; top: 0px; width: 230px; height: 100%; border: 0px solid black; padding: 6px 10px 6px 12px; }
            #drawing { margin: 4px; border: 1px solid grey; position: absolute; left: 248px; top: 0px; width: 230px; height: 100% }
            canvas { cursor: default; }
            form { font-size: 18px; margin-bottom: 20px; }
            h1 { line-height: 0.95em; margin-top: 2px; }
            input[type='radio'] { margin-left: 1px; }
            .footer { position: absolute; font-size: 100%; bottom: 6px; margin-right: 15px; }
            a img {border: none; }
            .textiocontainer { position: relative; font-size: 80%; width: 216px; background-color: #eee; border: 1px solid #eee; margin-top: 20px; padding: 6px; display: none; }
            .constructioncontainer { position: relative; font-size: 80%; width: 216px; background-color: #eee; border: 1px solid #eee; margin-top: -5px; padding: 6px; display: none; padding-bottom: 0px; padding-top: 0; }
            h4 { margin: 0; padding: 0; margin-bottom: 10px; }
            .textio { position: relative; display: none; margin: 0; }
            .textiocontainer input[type='submit'] { display: block; position: relative; width: 100%; padding: 2px; font-size: 110%; margin: 12px 0px 0px -2px; }
            .textio input { width: 85px; float: right; display: block; margin-right: 3px; }
            .textio label { width: 115px; clear: both; text-align: right; display: block; float: left; padding: 2px; padding-top: 5px; }
            label.checkboxtext { font-size: 14px; }
            .readonly { color: #777; }
            input { padding-left: 2px; padding-right: 2px; }
            .arrow-right { margin: 0; display: inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid blue; }
            .arrow-left  { margin: 0; display: inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid blue; }
            #stepnumber { margin: 0px; margin-bottom: 6px; position: relative; top: -5px; display: inline-block; height: 20px; width: 50px; text-align: center; }
        </style>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-35462144-1']);
            _gaq.push(['_setDomainName', 'rectorsquid.com']);
            _gaq.push(['_trackPageview']);

            (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
    </head>
    
    <body id="game">
        <div id="legend">
            <h1>Geometric<br/>Constructions<br/>and<br/>Experiments</h1>
            <!--<p>Select Demonstration</p>-->
            <form>
                <div><input type="radio" id="endcurvebox" name="selectdemo" value="endcurve" onchange="handleCheckbox( this );" checked="yes"/><label for="endcurvebox"> Line to Point</label></div>
                <div><input type="radio" id="linetolinebox" name="selectdemo" value="linetoline" onchange="handleCheckbox( this );" <?php if( isset( $_GET['linetoline'] ) ) { ?> checked="yes" <?php ?>/><label for="linetolinebox"> Line to Line</label></div>
                <div><input type="radio" id="linetocirclebox" name="selectdemo" value="linetocircle" onchange="handleCheckbox( this );"<?php if( isset( $_GET['linetocircle'] ) ) { ?> checked="yes" <?php ?>/><label for="linetocirclebox"> Line to Circle</label></div>
                <div><input type="radio" id="camlobebox" name="selectdemo" value="camlobe" onchange="handleCheckbox( this );"<?php if( isset( $_GET['camlobe'] ) ) { ?> checked="yes" <?php ?>/><label for="camlobebox"> Cam Lobe</label></div>
                <div><input type="radio" id="beziercambox" name="selectdemo" value="beziercam" onchange="handleCheckbox( this );"<?php if( isset( $_GET['beziercam'] ) ) { ?> checked="yes" <?php ?>/><label for="beziercambox"> Bezier Cam</label></div>
                <div><input type="radio" id="chordradiusbox" name="selectdemo" value="chordradius" onchange="handleCheckbox( this );"<?php if( isset( $_GET['chordradius'] ) ) { ?> checked="yes" <?php ?>/><label for="chordradiusbox"> Chord Radius</label></div>
                <div><input type="radio" id="circleintersectbox" name="selectdemo" value="circleintersect" onchange="handleCheckbox( this );"<?php if( isset( $_GET['circleintersect'] ) ) { ?> checked="yes" <?php ?>/><label for="circleintersectbox"> Circle Intersection</label></div>
                <div><input type="radio" id="circletangentbox" name="selectdemo" value="circletangent" onchange="handleCheckbox( this );"<?php if( isset( $_GET['circletangent'] ) ) { ?> checked="yes" <?php ?>/><label for="circletangentbox"> Circle Tangent</label></div>
                <div><input type="radio" id="circletangent2box" name="selectdemo" value="circletangent2" onchange="handleCheckbox( this );"<?php if( isset( $_GET['circletangent2'] ) ) { ?> checked="yes" <?php ?>/><label for="circletangent2box"> Curved Circle Tangent</label></div>
                <div><input type="radio" id="runningcambox" name="selectdemo" value="runningcam" onchange="handleCheckbox( this );"<?php if( isset( $_GET['runningcam'] ) ) { ?> checked="yes" <?php ?>/><label for="runningcambox"> Running Cam Simulation</label></div>
                
                <div class="textiocontainer" id="textiocontainer">
                    <div class="textio" id="endcurveio" >
                        <h4>Line to Point</h4>
                        <p>The dark red arc is being constructed.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="linetolineio" >
                        <h4>Line to Line</h4>
                        <p>The dark red arc is being constructed.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="linetocircleio" >
                        <h4>Line to Circle</h4>
                        <p>The dark red arc is being constructed.</p>
                        <p>Drag the small black dots to see the construction features change interactively. The circle will maintain its radius when the center point is dragged.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="camlobeio" >
                        <h4>Cam Lobe</h4>
                        <p>The dark red nose circle and dark red flank arc are being constructed.</p>
                        <p>Drag the small black dots to see the construction features change interactively. Edit the data to see the drawing use the specified values.</p>
                        <p>The base circle will maintain its radius when the center point is dragged.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                        <h4>Cam Lobe Data</h4>
                        <label>Length:</label><input type="text" name="camlength"/></br>
                        <label>Base Radius:</label><input type="text" name="baseradius"/></br>
                        <label>Flank Radius:</label><input type="text" name="tangentradius"/></br>
                        <label>Flank Angle:</label><input type="text" name="tangentangle"/></br>
                        <label>Nose Radius:</label><input type="text" class="readonly" name="noseradius" readonly="readonly"/></br>
                        <input type="submit" value="Update" onclick="updatedata(); return false;"/>
                    </div>
                    <div class="textio" id="beziercamio" >
                        <h4>Bezier Cam</h4>
                        <p>The cam is being defined by the Bezier curves in the cam profile graph (below the cam).</p>
                        <p>Drag the small blue and black dots to see the Bezier curves of the cam profile change shape. The cam above it is automatically drawn to match the cam profile.</p>
                    </div>
                    <div class="textio" id="chordradiusio" >
                        <h4>Chord to Radius</h4>
                        <p>The dark red arc is being constructed.</p>
                        <p>Compute an arc radius given a chord and the distance from the chord to the arc.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="circleintersectio" >
                        <h4>Circle Intersection</h4>
                        <p>The two red dots are being calculated.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="circletangentio" >
                        <h4>Circle Tangent</h4>
                        <p>The dark red tangent line is being calculated.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="circletangent2io" >
                        <h4>Curved Circle Tangent</h4>
                        <p>The dark red tangent curve is being calculated. The tangent radius is a fixed amount in this construction.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="runningcamio" >
                        <h4>Running Cam Follower Simulation</h4>
                        <p>The red lines and red circle are being computed. The cam is being drawn based on a set of measurements.</p>
                        <p>This is an active simulation and doesn't have interactive elements. The cam follower is simulated by checking for intersections of the follower circle and the various arcs of the cam.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div class="constructioncontainer" id="constructioncontainer"> 
                    <div>Show Construction Step</div>
                    <div style="margin-top: 5px; margin-bottom: 0px; "><div class="arrow-left" onclick="LeftArrow();"></div><div id="stepnumber"></div><div class="arrow-right" onclick="RightArrow();"></div></div>
                </div>
            </form>
            <div><a href="showcircletest.php" target="_blankl">See HTML/PHP for this page.</a><br/></div>
            <div><a href="circletest.js" target="_blank">See the JavaScript code.</a></div>
            <div class="footer" id="footer"> 
                <a href="http://blog.rectorsquid.com"><p style="font-size: 0%; width: 100%; position: relative; background-color: #E5E5E5; padding: 0; margin: 0;"><img src="./bloglink.gif" alt="Blog Link"/></p></a>
            </div>
        </div>
        <div id="drawing">
            <canvas id="canvas">
            </canvas>
        </div>
    </body>
    <script type="text/javascript" src="./circletest.js"></script>
</html>