<!DOCTYPE html>

<head>

    <meta charset="utf-8">
    <title>HTML5 GSAP Ad</title>
    <meta name="ad.size" content="width=970,height=250">

    <script type="text/javascript">
            
        // IAB source: modified to allow link testing
        var clickTag = "https://huntsvillehospitalfoundation.ca";
        function getParameterByName(name)
        {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            if (match == null || match == ""){
                return clickTag;
            } else{
                return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
            }
        }
        clickTag = getParameterByName('clickTag');
    </script>

    <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
        rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 970px;
            height: 250px;
            line-height: 1.7;
            font-size: 29px;
            letter-spacing: 0;
            font-family: 'Libre Caslon Text', serif;
            font-style: normal;
            background: #F2F2F2;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        #border {
            position: absolute;
            width: 970px;
            height: 250px;
            background: #F2F2F2;
            overflow: hidden;
            cursor: pointer;
            box-sizing: border-box;
        }

        #txt-panel {
            position: absolute;
            top: 0px;
            left: 44px;
            width: 530px;
        }

        #txt-panel p {
            opacity: 0;
            color: #fff;
            font-weight: 200;
        }


        #txt-panel p strong {
            opacity: 0;
            font-weight: 700;
        }

        #circles-panel {
            position: absolute;
            top: 140px;
            left: 344px;
        }

        #circles-panel svg {
            height: 39px;
            width: 267px;
        }

        #selfie-panel {
            position: absolute;
            top: 90px;
            left: 570px;
            opacity: 0;
        }

        #button-panel {
            position: absolute;
            top: 70px;
            left: 720px;
            opacity: 0;
        }

        .img2 {
            opacity: 0;
            position: absolute;
            top: 40px;
            left: 55px;
        }

        .txt3 {
            position: absolute;
            top: 75px;
            left: 55px;
        }
    </style>

</head>

<body>
    <a id="click-tag" href="javascript:window.open(window.clickTag)">
    <div id="border">

        <div id="txt-panel">
            <p>If you catch a Northern pike in Mary Lake
                and then the pike catches you.<strong> Count On Us.</strong></p>
        </div>
        <div id="circles-panel">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
                <path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
                    transform="translate(0.03 0)"
                    style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
                <path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
                    style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
                <circle id="inner" cx="20.79" cy="20.76" r="5.05"
                    style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
                <line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
                    style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
            </svg>
        </div>
        <div id="selfie-panel">
            <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
        </div>
        <div id="button-panel">
            <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
        </div>
        <img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">

    </div>
</a>

    <!-- GREENSOCK-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

    <script>


        function ready(fn) {
            if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
                fn();
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }

        var
            pulse2 = document.getElementById("outer"),
            pulse1 = document.getElementById("mid"),
            tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });

        tl.fromTo(pulse1, 1,
            { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
            { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
        )
            .fromTo(pulse2, 1,
                { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
                { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
            )
            ;



        function stage1() {
            var line = document.getElementById("line");
            var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });

            tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
            tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
            tl2.fromTo(line, 3,
                { transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
                { transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
            )
            tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
            tl2.fromTo("#button-panel", 1,
                { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
                { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
            )


        }

        ready(stage1());

    </script>

</body>

</html>