Untitled

<!DOCTYPE html>
<html>
<head>
    <!-- Code adapted from ESPL: Dances of the Planets http://ensign.editme.com/t43dances -->
    <meta charset="utf-8" />
    <title>Planets</title>
    <script type="text/javascript">


        function draw_orbits() {

            var p = document.getElementById("ddlPlanet1");
            var p1 = p.options[p.selectedIndex].value;
            p = document.getElementById("ddlPlanet2");
            var p2 = p.options[p.selectedIndex].value;

            var c;
            var pi = Math.PI;

            p = document.getElementById("ddlOrbits");
            var Orbits = p.options[p.selectedIndex].value;
            var p1y = getYear(p1);
            var p2y = getYear(p2);
            var p1r = getOrbit(p1);
            var p2r = getOrbit(p2);
            var Interval = p1y / 75;
            var yBot = 700;
            var yCen = 2 + yBot / 2;
            var xCenter = 50 + yCen;
            var r1 = yCen;
            var r2 = r1 * p2r / p1r;
            var r = 0;
            var rStp = p1y * Orbits;
            var a1 = 0;
            var a1Int = 2 * pi * Interval / p1y;
            var a2 = 0;
            var a2Int = 2 * pi * Interval / p2y;

            var canvas = document.getElementById("my-canvas");
            var context = canvas.getContext("2d");
            clearCanvas(context, canvas);
            // set transparency value
            context.globalAlpha = 1.0;
            // lineWidth 1.0 is the default
            context.lineWidth = 1.0;

            while (r < rStp) {
                context.beginPath();
                i = Math.floor(r / Interval / 75);
                switch (i) {
                    case 0: c = "#000"; break;
                    case 1: c = "#0000ff"; break;
                    case 2: c = "#ff0000"; break;
                    case 3: c = "#008000"; break;
                    case 4: c = "#800080"; break;
                    case 5: c = "#800000"; break;
                    case 6: c = "#000080"; break;
                    case 7: c = "#8b0000"; break;
                        c = "#ffa500";
                }

                a1 = a1 - a1Int;
                a2 = a2 - a2Int;
                x1 = r1 * Math.cos(a1);
                y1 = r1 * Math.sin(a1);
                x2 = r2 * Math.cos(a2);
                y2 = r2 * Math.sin(a2);


                context.moveTo(x1 + xCenter, y1 + yCen);
                context.lineTo(x2 + xCenter, y2 + yCen);
                context.strokeStyle = c;
                context.stroke();
                r = r + Interval;

            }
        }

        function getYear(y) {
            switch (y) {
                case "1": return 88;
                case "2": return 224.7;
                case "3": return 365.2;
                case "4": return 687;
                case "5": return 4331;
                case "6": return 10747;
                case "7": return 30589;
                case "8": return 59800;
                case "9": return 90588;
            }
        }

        function getOrbit(o) {
            switch (o) {
                case "1": return 57.91;
                case "2": return 108.21;
                case "3": return 149.60;
                case "4": return 227.92;
                case "5": return 778.57;
                case "6": return 1433.5;
                case "7": return 2872.46;
                case "8": return 4495.1;
                case "9": return 5869.7;
            }
        }
        //currently unused
        function getName(n) {
            switch (n) {
                case "1": return 'Mercury'; break;
                case "2": return 'Venus'; break;
                case "3": return 'Earth'; break;
                case "4": return 'Mars'; break;
                case "5": return 'Jupiter'; break;
                case "6": return 'Saturn'; break;
                case "7": return 'Uranus'; break;
                case "8": return 'Neptune'; break;
                case "9": return 'Pluto'; break;
            }
        }

        function clearCanvas(context, canvas) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            var w = canvas.width;
            canvas.width = 1;
            canvas.width = w;
        }

    </script>
</head>
<body>
    <form method="post" action="index.html" id="form1">
    <p>
        Planet 1 (outer):
        <select id="ddlPlanet1">
            <option value="1">Mercury</option>
            <option value="2">Venus</option>
            <option value="3">Earth</option>
            <option value="4">Mars</option>
            <option value="5">Jupiter</option>
            <option value="6">Saturn</option>
            <option value="7">Uranus</option>
            <option value="8">Neptune</option>
            <option value="9">Pluto</option>
        </select>
        &nbsp;Planet 2 (inner):
        <select id="ddlPlanet2">
            <option value="1">Mercury</option>
            <option value="2">Venus</option>
            <option value="3">Earth</option>
            <option value="4">Mars</option>
            <option value="5">Jupiter</option>
            <option value="6">Saturn</option>
            <option value="7">Uranus</option>
            <option value="8">Neptune</option>
            <option value="9">Pluto</option>
        </select>
        &nbsp; Orbits:
        <select id="ddlOrbits">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select></p>
    <input id="btn1" type="button" value="button" onclick="draw_orbits();return false" />
    </form>
    <canvas id="my-canvas" style="float: left" width="800" height="800"></canvas>
</body>
</html>