<!DOCTYPE html>
<html  dir="ltr" lang="en-US">
<head>
    <meta charset="utf-8" />
    <title>{{object.title|safe}}</title>
    <style>
        body {
            background: #222;
        }
        
        .overlay {
            background-color: #000;
            opacity: .9;
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 10;
        }
        .btn {
            position: absolute;
            z-index: 11;
            left: 35%;
            top: 40%;
        }
        @media only screen and (max-device-width: 1024px) {
            img#giffy {
                width: 100%;
            }
        }
    </style>
    <script src="http://luxagraf.net/media/js/jquery.js" type="text/javascript"></script>
    <script>
        var isiPad = false;
        var playing = true;
        if (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i)) { 
                isiPad = true; 
            }
        $(function() { 
            function togglebtn() {
                    if (playing) {
                        document.getElementById('snd').pause();
                        playing = false
                    } else {
                        document.getElementById('snd').play();
                        playing = true
                    }
                }
            document.body.onclick=togglebtn
            if (isiPad) { 
                var overlay = document.createElement("div");
                overlay.setAttribute("id","overlay");
                overlay.setAttribute("class", "overlay");
                document.body.appendChild(overlay);

                // create image and append to page
                var img = document.createElement("img");
                img.setAttribute("id","img");
                img.src = "btn.png";
                img.setAttribute("class","btn");

                // click to restore page
                img.onclick=restore;
                document.body.appendChild(img);

                function restore() {
                  document.body.removeChild(document.getElementById("overlay"));
                  document.body.removeChild(document.getElementById("img"));
                  playing = false;
                  document.getElementById('snd').play();
              }
                
            }
        });

    </script>
</head>
<body id="home">
{%if object.music_ogg %}<audio id="snd" preload="auto" loop autoplay autobuffer> 
    <source src="{{object.music_ogg.url}}" type="video/ogg"/>
    <source src="{{object.music_mp3.url}}" />
</audio>{%endif%}
<img id="giffy" src="{{object.gif.url}}" alt="{{object.title}}" />
</body>
</html>