<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Open Media Library</title>
    <link href="../../../oxjs/min/UI/css/UI.css" rel="stylesheet" type="text/css" />
    <style>
        #logo {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 96px;
            width: 256px;
            height: 256px;
            margin: auto;
            moz-user-select: none;
            ms-user-select: none;
            o-user-select: none;
            webkit-user-select: none;
        }
        #loadingIcon {
            position: absolute;
            left: 16px;
            top: 256px;
            right: 0;
            bottom: 0;
            width: 32px;
            height: 32px;
            margin: auto;
            moz-user-select: none;
            ms-user-select: none;
            o-user-select: none;
            webkit-user-select: none;
        }
        #error {
            position: absolute;
            left: 16px;
            top: 256px;
            right: 0;
            bottom: 0;
            width: 240px;
            height: 32px;
            margin: auto;
            padding-bottom: 16px;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body class="OxThemeOxlight">
    <img id="logo" src="../png/oml.png" style="">
    <img id="loadingIcon" src="../../../oxjs/min/UI/themes/oxlight/svg/symbolLoading.svg">
    <div id="error">Failed to launch Open Media Library</div>
    <script>
        (function() {
            var animationInterval;
            function load() {
                var port = document.location.hash.length
                        ? document.location.hash.slice(1)
                        : '9842',
                    base = '//127.0.0.1:' + port,
                    ws = new WebSocket('ws:' + base + '/ws');
                ws.onopen = function(event) {
                    document.location.href = 'http:' + base;
                };
                ws.onerror = function(event) {
                    ws.close();
                };
                ws.onclose = function(event) {
                    setTimeout(load, 500);
                };
            };
            function startAnimation() {
                var css, deg = 0,
                    loadingIcon = document.getElementById('loadingIcon'),
                    previousTime = +new Date();
                animationInterval = setInterval(function() {
                    var currentTime = +new Date(),
                        delta = (currentTime - previousTime) / 1000;
                    previousTime = currentTime;
                    deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
                    css = 'rotate(' + deg + 'deg)';
                    loadingIcon.style.MozTransform = css;
                    loadingIcon.style.MSTransform = css;
                    loadingIcon.style.OTransform = css;
                    loadingIcon.style.WebkitTransform = css;
                    loadingIcon.style.transform = css;
                }, 83);
            }
            function stopAnimation() {
                clearInterval(animationInterval);
            }
            startAnimation();
            load();
            setTimeout(function() {
                stopAnimation();
                document.getElementById('loadingIcon').style.display = 'none';
                document.getElementById('error').style.display = 'block';
            }, 20000);
        }());
    </script>
</body>
</html>