<?php
    // Print a login-id
    mysql_connect("localhost", "root", "") or die(mysql_error());

    mysql_select_db("db") or die(mysql_error());
    {
        $username = $_COOKIE['ID_my_site'];

        $pass = $_COOKIE['Key_my_site'];

        $check = mysql_query("SELECT * FROM users WHERE username = '$username'")
            or die(mysql_error());

        while($info = mysql_fetch_array( $check ))
        {
            $targetNo = "1";
            if( !empty($_GET) ) {
                $targetNo = $_GET["newT"];
            }

            mysql_connect("localhost", "root", "") or die(mysql_error());
            mysql_select_db("db") or die(mysql_error());
            $data = mysql_query("SELECT * FROM alphabet where id >= $targetNo;")
              or die(mysql_error());
?>

<aside style="font-size:larger;font-style:italic;color:green;float:left;width:100px;">
    <div style="background:pink;height:710px">
        Username: <?php print $username ?>
    <br><br><br><br>
    Score: <?php print $targetNo-1 ?>
</aside>

<aside style="float:left;width:1000px;">
    <div style="background:lightblue;height:710px">
        <svg onload='Init(evt)'>
            <title>Fish Game</title>

            <SCRIPT LANGUAGE='JavaScript'>
                var SVGDocument = null;
                var SVGRoot = null;

                function Init(evt) {
                    SVGDocument = evt.target.ownerDocument;
                    SVGRoot = SVGDocument.documentElement;
                }

                function ToggleOpacity(evt, targetId, targNo) {
                    if( targetId == parseInt(targNo) ) {
                        newTarget = SVGDocument.getElementById(targetId);
                        newTarget.setAttributeNS(null, 'opacity', '0');

                        targetId++;
                        document.location="AtoZ.php?newT=" + targetId;
                    }
                }
            </script>

            <?php
                // status
                $a= mysql_query("SELECT * FROM alphabet where id = $targetNo;")
                or die(mysql_error());
                $targetAlphabet = mysql_fetch_array( $a);

                $target = $targetAlphabet['Alphabet'];
            ?>

            // status
            <text x="10"
                  y="20"
                  style="font-family:Times,serif;fill:#B40404;font-size:20px"
                  >Please find the letter: <?php print $target ?></text>

            //Fish
            <?php
                static $info;
                while ($info = mysql_fetch_array( $data )) {
                    $id = $info['ID'];
                    $al = $info['Alphabet'];
            ?>
                    //fish body
                    <g id='<?php print $id; ?>' onclick='ToggleOpacity(evt, id,"<?php print $targetNo ?>")'>
                        <circle cx="<?php print $info['body_cx']; ?>"cy="<?php print $info['body_cy']; ?>" r="<?php print $info['body_r']; ?>" stroke="black" stroke-width="1" fill="<?php print $info['body_fill']; ?>" />

                        //tail
                        <path d="<?php print $info['tail']; ?>" fill="<?php print $info['tail_fill']; ?>" stroke="<?php print $info['tail_stroke']; ?>" stroke-width="1" />

                        //eye
                        <circle cx="<?php print $info['eye_cx']; ?>" cy="<?php print $info['eye_cy']; ?>" r="<?php print $info['eye_r']; ?>" stroke="black" stroke-width="1" fill="<?php print $info['eye_fill' ];?>" />
                        <circle cx="<?php print $info['pupil_cx']; ?>" cy="<?php print $info['pupil_cy']; ?>" r="<?php print $info['pupil_r']; ?>" stroke="black" stroke-width="1  " />

                        //'Alphabet'
                        <text x="<?php print $info['al_x']; ?>" y="<?php print $info['al_y']; ?>" style="font-family:Times,serif;fill:#B40404;font-size:<?php print $info['size']; ?>"><?php print $al; ?></text>

                        <animateMotion
                          from="<?php print $info['from']; ?>"       to="<?php print $info['to']; ?>"
                          dur=" <?php print $info['duration']; ?>"   repeatCount="indefinite" />
                    </g>
            <?php
                }
        }
            ?>
        </svg>
</aside>
<?php
    }
?>