Untitled

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet">
    <title>Complete the puzzle!</title>
    <style>
        .show {
            visibility: visible;
        }
        .hide {
            visibility: hidden;
        }
        .merge {
            position: absolute;
            left: 496px;
            top: 5px;
        }
        .merge0 {
            position: absolute;
            left: 300px;
            top: 4px;
        }
        .merge1 {
            position: absolute;
            top: 218px;
            left: 530px;
        }
        .merge2 {
            position: absolute;
            top: 218px;
            left: 688px;
        }
        .row1 {
            position: absolute;
            left: 301px;
            top: 208px;
        }
        .row2 {
            position: absolute;
            top: 476px;
            left: 301px;
            margin: 0;
        }
        .row3 {
            position: absolute;
            top: 495px;
            left: 716px;
            margin: 0;
        }
        .row4 {
            position: absolute;
            top: 691px;
            left: 300px;
            margin: 0;
        }
    </style>

    <body style="
        ">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
        <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
        <script src="routie.js"></script>
        <script>
            window.location = "http://192.99.246.90/hunt/index.html#hide";
        </script>
        <script>
            window.onload = function() {
                localStorage.removeItem("alerted");
                localStorage.removeItem("alerted2");
                localStorage.removeItem("alerted3");
                localStorage.removeItem("alerted4");
                localStorage.removeItem("alerted5");
                localStorage.removeItem("alerted6");
                localStorage.removeItem("alerted7");
                localStorage.removeItem("alerted8");
            }
        </script>
        <script>
            window.onhashchange = function() {
                var hashArray = location.hash.substr(1).split('/');
                if (hashArray.indexOf('hide') != -1) {
                    if (hashArray.indexOf('one') != -1) {
                        var alerted = localStorage.getItem('alerted') || '';
                        if (alerted != 'yes') {
                            alert("You found piece number one ");
                            localStorage.setItem('alerted', 'yes');
                        }
                    }
                    if (hashArray.indexOf('two') != -1) {
                        var alerted2 = localStorage.getItem('alerted2') || '';
                        if (alerted2 != 'yes') {
                            alert("You found piece number two ");
                            localStorage.setItem('alerted2', 'yes');
                        }
                    }
                    if (hashArray.indexOf('three') != -1) {
                        var alerted3 = localStorage.getItem('alerted3') || '';
                        if (alerted3 != 'yes') {
                            alert("You found piece number three ");
                            localStorage.setItem('alerted3', 'yes');
                        }
                    }
                    if (hashArray.indexOf('four') != -1) {
                        var alerted4 = localStorage.getItem('alerted4') || '';
                        if (alerted4 != 'yes') {
                            alert("You found piece number four ");
                            localStorage.setItem('alerted4', 'yes');
                        }
                    }
                    if (hashArray.indexOf('five') != -1) {
                        var alerted5 = localStorage.getItem('alerted5') || '';
                        if (alerted5 != 'yes') {
                            alert("You found piece number five ");
                            localStorage.setItem('alerted5', 'yes');
                        }
                    }
                    if (hashArray.indexOf('six') != -1) {
                        var alerted6 = localStorage.getItem('alerted6') || '';
                        if (alerted6 != 'yes') {
                            alert("You found piece number six ");
                            localStorage.setItem('alerted6', 'yes');
                        }
                    }
                    if (hashArray.indexOf('seven') != -1) {
                        var alerted7 = localStorage.getItem('alerted7') || '';
                        if (alerted7 != 'yes') {
                            alert("You found piece number seven ");
                            localStorage.setItem('alerted7', 'yes');
                        }
                    }
                    if (hashArray.indexOf('eight') != -1) {
                        var alerted8 = localStorage.getItem('alerted8') || '';
                        if (alerted8 != 'yes') {
                            alert("You found piece number eight ");
                            localStorage.setItem('alerted8', 'yes');
                        }
                    }
                    if (hashArray.indexOf('eight') != -1) {
                        var alerted8 = localStorage.getItem('alerted8') || '';
                        if (alerted8 != 'yes') {
                            alert("You found piece number eight ");
                            localStorage.setItem('alerted8', 'yes');
                        }
                    }
                }
            }
        </script>
        <div>
            <table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
                <tr>
                    <td id="one">
                        <img src="1.png" class="merge0">
                    </td>
                    <td id="two">
                        <img id="2" src="6.png" class="merge">
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td id="three">
                        <img src="4.png" class="row1">
                    </td>
                    <td id="four">
                        <img src="2.png" class="merge1">
                    </td>
                    <td id="five">
                        <img src="7.png" class="merge2">
                    </td>
                </tr>
                <tr>
                    <td id="six">
                        <img src="8.png" class="row2">
                    </td>
                    <td id="seven">
                        <img src="5.png" class="row3">
                    </td>
                    <td id="eight">
                        <img src="3.png" class="row4">
                    </td>
                </tr>
            </table>
        </div>
        <script src="js/bootstrap.js"></script>
        <br/>
        <a onclick="myFunction1()">Delete local data</a>
        <br/>
        <script>
            function myFunction1() {
                localStorage.removeItem("alerted");
                localStorage.removeItem("alerted2");
                localStorage.removeItem("alerted3");
                localStorage.removeItem("alerted4");
                localStorage.removeItem("alerted5");
                localStorage.removeItem("alerted6");
                localStorage.removeItem("alerted7");
                localStorage.removeItem("alerted8");
            }
        </script>
        <a href="index.html">Reload</a>
        <br/>
        <br/>
        <a onclick="addHash('/one');">One</a>
        <br/>
        <a onclick="addHash('/two');">Two</a>
        <br/>
        <a onclick="addHash('/three');">Three</a>
        <br/>
        <a onclick="addHash('/four');">Four</a>
        <br/>
        <a onclick="addHash('/five');">Five</a>
        <br/>
        <a onclick="addHash('/six');">Six</a>
        <br/>
        <a onclick="addHash('/seven');">Seven</a>
        <br/>
        <a onclick="addHash('/eight');">Eight</a>
        <script>
            function addHash(hash) {
                window.location.hash = window.location.hash + hash;
            }
        </script>
        <script>
            function hideone() {
                var elem = document.getElementById("one");
                elem.className = "hide";
            }
        </script>
        <script>
            function showone() {
                var elem = document.getElementById("one");
                if (elem.className = "hide") {
                    elem.className = "show"
                }
            }
        </script>
        <script>
            function hidetwo() {
                var elem = document.getElementById("two");
                elem.className = "hide";
            }
        </script>
        <script>
            function showtwo() {
                var elem = document.getElementById("two");
                if (elem.className = "hide") {
                    elem.className = "show"
                }
            }
        </script>
        <script>
            function hidethree() {
                var elem = document.getElementById("three");
                elem.className = "hide";
            }
        </script>
        <script>
            function showthree() {
                var elem = document.getElementById("three");
                if (elem.className = "hide") {
                    elem.className = "show"
                }
            }
        </script>
        <script>
            function hidefour() {
                var elem = document.getElementById("four");
                elem.className = "hide";
            }
        </script>
        <script>
            function showfour() {
                var elem = document.getElementById("four");
                if (elem.className = "hide") {
                    elem.className = "show"
                }
            }
        </script>
        <script>
            function hidefive() {
                var elem = document.getElementById("five");
                elem.className = "hide";
            }
        </script>
        <script>
            function showfive() {
                var elem = document.getElementById("five");
                if (elem.className = "hide") {
                    elem.className = "show"
                }
            }
        </script>
        <script>
            function hidesix() {
                var elem = document.getElementById("six");
                elem.className = "hide";
            }
        </script>
        <script>
            function showsix() {
                var elem = document.getElementById("six");
                if (elem.className = "hide") {
                    elem.className = "show"
                }
            }
        </script>
        <script>
            function hideseven() {
                var elem = document.getElementById("seven");
                elem.className = "hide";
            }
        </script>
        <script>
            function showseven() {
                var elem = document.getElementById("seven");
                if (elem.className = "hide") {
                    elem.className = "show"
                }
            }
        </script>
        <script>
            function hideeight() {
                var elem = document.getElementById("eight");
                elem.className = "hide";
            }
        </script>
        <script>
            function showeight() {
                var elem = document.getElementById("eight");
                if (elem.className = "hide") {
                    elem.className = "show"
                }
            }
        </script>
        <script>
            $(function() {
                var hideMany = function() {
                    var toHide = [].slice.call(arguments);
                    toHide.forEach(function(id) {
                        if (id === null) {
                            return
                        }
                        var elem = document.getElementById(id);
                        if (elem) {
                            elem.className = "hide";
                        }
                    });
                };

                var Workspace = Backbone.Router.extend({
                    routes: {
                        "hide(/:a)(/:b)(/:c)(/:d)(/:e)(/:f)(/:g)(/:h)": "test"
                    },
                    test: hideMany
                });

                var router = new Workspace();
                Backbone.history.start();

            });
        </script>
    </body>
</head>

</html>