index.html

<html>

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script language="javascript" src="lib/sha1.js"></script>
    <!--The next two lines are part of the code that adds the loading screen.  The other part is the div tag marked 'loader' -->
    <script src="javascript/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
            $(".loader").fadeOut("slow");
        })
    </script>
</head>


<body onload="setup()">
    <div class="loader" style=" position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('interface/page-loader.gif') 50% 50% no-repeat rgb(249,249,249); "></div>
    <!--Used to put in the loading graphic-->
    <!--START THE FOUR CONTROLS AT THE TOP OF THE PAGE-->
    <table border=0px>
        <tr>
            <td>
                <form name="myform">
                    <textarea id="messagewindow" name="outputtext" style="font-size: 18pt; height:123px; width:345px ;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position:absolute; left:194px; top:128px;"></textarea>
                </form>
            </td>
            <td>
                <img onclick="makeWav()" src="interface/speak.png" height=100>
                <img onclick="image()" src="interface/google.jpg" height=100>
                <img onclick="tube()" src="interface/youtube.jpg" height=100>
                <img onclick="tweet()" src="interface/twitter.png" height=100>
            </td>
        </tr>
    </table>
    <!--END THE FOUR CONTROLS AT THE TOP OF THE PAGE-->

    <!--START THE MAIN MAP -->
    <img name="main" id="main" src="images/CK15+.001.png" height=540 width=720  />

<script>


function setup(){
my_width=720/grid_size_columns*(Math.ceil(grid_size_columns/2))-15;
my_height=520/grid_size_rows;
area=document.getElementById('messagewindow')
$(area).css('width', my_width);
$(area).css('left', (520/grid_size_columns)+55);
$(area).css('height', my_height);
top_page()
}
</script>

    <script type="text/javascript" src="javascript/ck20.js"></script>
    <script language="javascript" src="javascript/read_js.js" type="text/javascript">
    </script>
    <!--START THE PRELOADING OF THE IMAGES-->
    <div class="hidden">
        <script type="text/javascript">
            var images = new Array()

            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
"./ck12/CK12+.001.png", "./ck12/CK12+.002.png", "./ck12/CK12+.003.png", "./ck12/CK12+.004.png", "./ck12/CK12+.005.png", "./ck12/CK12+.006.png", "./ck12/CK12+.007.png", "./ck12/CK12+.008.png", "./ck12/CK12+.009.png", "./ck12/CK12+.010.png", "./ck12/CK12+.011.png", "./ck12/CK12+.012.png", "./ck12/CK12+.013.png", "./ck12/CK12+.014.png", "./ck12/CK12+.015.png", "./ck12/CK12+.016.png", "./ck12/CK12+.017.png", "./ck12/CK12+.018.png", "./ck12/CK12+.019.png", "./ck12/CK12+.020.png", "./ck12/CK12+.021.png", "./ck12/CK12+.022.png", "./ck12/CK12+.023.png", "./ck12/CK12+.024.png", "./ck12/CK12+.025.png", "./ck12/CK12+.026.png", "./ck12/CK12+.027.png", "./ck12/CK12+.028.png", "./ck12/CK12+.029.png", "./ck12/CK12+.030.png", "./ck12/CK12+.031.png", "./ck12/CK12+.032.png", "./ck12/CK12+.033.png", "./ck12/CK12+.034.png", "./ck12/CK12+.035.png", "./ck12/CK12+.036.png", "./ck12/CK12+.037.png", "./ck12/CK12+.038.png", "./ck12/CK12+.039.png", "./ck12/CK12+.040.png", "./ck12/CK12+.041.png", "./ck12/CK12+.042.png", "./ck12/CK12+.043.png", "./ck12/CK12+.044.png", "./ck12/CK12+.045.png", "./ck12/CK12+.046.png", "./ck12/CK12+.047.png", "./ck12/CK12+.048.png", "./ck12/CK12+.049.png", "./ck12/CK12+.050.png", "./ck12/CK12+.051.png", "./ck12/CK12+.052.png", "./ck12/CK12+.053.png", "./ck12/CK12+.054.png", "./ck12/CK12+.055.png", "./ck12/CK12+.056.png", "./ck12/CK12+.057.png", "./ck12/CK12+.058.png", "./ck12/CK12+.059.png", "./ck12/CK12+.060.png", "./ck12/CK12+.061.png", "./ck12/CK12+.062.png", "./ck12/CK12+.063.png", "./ck12/CK12+.064.png", "./ck12/CK12+.065.png", "./ck12/CK12+.066.png", "./ck12/CK12+.067.png", "./ck12/CK12+.068.png", "./ck12/CK12+.069.png", "./ck12/CK12+.070.png", "./ck12/CK12+.071.png", "./ck12/CK12+.072.png", "./ck12/CK12+.073.png", "./ck12/CK12+.074.png", "./ck12/CK12+.075.png", "./ck12/CK12+.076.png", "./ck12/CK12+.077.png", "./ck12/CK12+.078.png", "./ck12/CK12+.079.png", "./ck12/CK12+.080.png", "./ck12/CK12+.081.png", "./ck12/CK12+.082.png", "./ck12/CK12+.083.png", "./ck20/CK20.001.png", "./ck20/CK20.002.png", "./ck20/CK20.003.png", "./ck20/CK20.004.png", "./ck20/CK20.005.png", "./ck20/CK20.006.png", "./ck20/CK20.007.png", "./ck20/CK20.008.png", "./ck20/CK20.009.png", "./ck20/CK20.010.png", "./ck20/CK20.011.png", "./ck20/CK20.012.png", "./ck20/CK20.013.png", "./ck20/CK20.014.png", "./ck20/CK20.015.png", "./ck20/CK20.016.png", "./ck20/CK20.017.png", "./ck20/CK20.018.png", "./ck20/CK20.019.png", "./ck20/CK20.020.png", "./ck20/CK20.021.png", "./ck20/CK20.022.png", "./ck20/CK20.023.png", "./ck20/CK20.024.png", "./ck20/CK20.025.png", "./ck20/CK20.026.png", "./ck20/CK20.027.png", "./ck20/CK20.028.png", "./ck20/CK20.029.png", "./ck20/CK20.030.png", "./ck20/CK20.031.png", "./ck20/CK20.032.png", "./ck20/CK20.033.png", "./ck20/CK20.034.png", "./ck20/CK20.035.png", "./ck20/CK20.036.png", "./ck20/CK20.037.png", "./ck20/CK20.038.png", "./ck20/CK20.039.png", "./ck20/CK20.040.png", "./ck20/CK20.041.png", "./ck20/CK20.042.png", "./ck20/CK20.043.png", "./ck20/CK20.044.png", "./ck20/CK20.045.png", "./ck20/CK20.046.png", "./ck20/CK20.047.png", "./ck20/CK20.048.png", "./ck20/CK20.049.png", "./ck20/CK20.050.png", "./ck20/CK20.051.png", "./ck20/CK20.052.png", "./ck20/CK20.053.png", "./ck20/CK20.054.png", "./ck20/CK20.055.png", "./ck20/CK20.056.png", "./ck20/CK20.057.png", "./ck20/CK20.058.png", "./ck20/CK20.059.png", "./ck20/CK20.060.png", "./ck20/CK20.061.png", "./ck20/CK20.062.png", "./ck20/CK20.063.png", "./ck20/CK20.064.png", "./ck20/CK20.065.png", "./ck20/CK20.066.png", "./ck20/CK20.067.png", "./ck20/CK20.068.png", "./ck20/CK20.069.png", "./ck20/CK20.070.png", "./ck20/CK20.071.png", "./ck20/CK20.072.png", "./ck20/CK20.073.png", "./ck20/CK20.074.png", "./ck20/CK20.075.png", "./ck20/CK20.076.png", "./ck20/CK20.077.png", "./ck20/CK20.078.png", "./ck20/CK20.079.png", "./ck20/CK20.080.png", "./ck20/CK20.081.png", "./ck20/CK20.082.png", "./ck20/CK20.083.png", "./ck20/CK20.084.png", "./ck20/CK20.085.png", "./ck20/CK20.086.png", "./ck20/CK20.087.png", "./ck20/CK20.088.png", "./ck20/CK20.089.png", "./ck20/CK20.090.png", "./ck20/CK20.091.png", "./ck20/CK20.092.png", "./ck20/CK20.093.png", "./ck20/CK20.094.png", "./ck20/CK20.095.png", "./ck20/CK20.096.png", "./ck20/CK20.097.png", "./ck20/CK20.098.png"

)
        </script>
    </div>

    <!--END THE PRELOADING OF THE IMAGES-->


    <!--START THE GOOGLE ANALYTICS -->
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-43886525-1', 'auto');
        ga('send', 'pageview');
    </script>
<div id="box"></div>

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

 <button onClick="toggleScanning()">Toggle Scanning</button>
</body>

</html>