<!DOCTYPE html>
<html lang="ru" dir="$TextDirection$">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title></title>
    <style>
        !tooltip_centered_styles.css!
        #protection-confirmation-section {
            margin-left: 20px;
            display: none;
            position: relative;
			top: -4px;
        }
    </style>
</head>
<body class="$TextDirection$ safe">
    <div class="content">
	    <div class="module">
		    <div class="module-header__logo">
			    <img src="#logo.png#"/>
		    </div>
            <div id="protection-confirmation-section">
                <span class="module-header__text">$PassProtectionEnabled$</span>
            </div>

            <div id="protection-important-header">
                <div class="module-header">
                    <span class="module-header__text">$PassProtectionHeaderSpecialSite$</span>
                </div>
                <div class="module-buttons">
                    <a href="#" class="module-button_stub"></a>
                </div>
            </div>
        </div>
	    <div id="protection-important-content" class="module">
			<p>$PassProtectionDescriptionSpecialSite_part1$</p>
		    <div class="buttons">
			    <a class="button" onclick="refuseProtection(); return false;" href="#">$PassProtectionRefuse$</a>
			    <a class="confirm-button" onclick="enableProtection(); return false;" href="#">$PassProtectionConfirm$</a>
			    <a class="toggle-button" onclick="toggleDescription(this); return false;" href="#">$LearnMoreButtonName$</a>
		    </div>
            <p id="description-text" class="description-text">$PassProtectionDescriptionSpecialSite_part2$</p>
	    </div>
    </div>
    <a class="close" href="#" onclick="closeTooltip(); return false;">&times;</a>
</body>
<script type="text/javascript">
    function getRealDisplay(elem) {
        if (elem.currentStyle) {
            return elem.currentStyle.display;
        } else if (window.getComputedStyle) {
            var computedStyle = window.getComputedStyle(elem, null);
            return computedStyle.getPropertyValue('display');
        }
    }
    function isHidden(el) {
        var width = el.offsetWidth,
	        height = el.offsetHeight,
	        tr = el.nodeName.toLowerCase() === "tr";
        return width === 0 && height === 0 && !tr ?
	        true : width > 0 && height > 0 && !tr ? false : getRealDisplay(el);
    }
    function show(el) {
        el.style.display = "block";
    }

    function hide(el) {
        el.style.display = "none";
    }
	
	function updateWindowHeightFromHtml() {
		var userAgent = navigator.userAgent.toLowerCase();
		var isOldIe = false;
		if(userAgent.indexOf('msie') != -1) {
			var ieVersion = parseInt(userAgent.split('msie')[1]);
			isOldIe = ieVersion < 11;
		}
		var windowHeight = isOldIe ? document.body.scrollHeight : document.body.offsetHeight;
		window.external.setHeight({ height: windowHeight | 0 });
	}

    function toggleDescription(link) {
        var el = document.getElementById("description-text");
        if (isHidden(el)) {
            show(el);
            link.className += " toggle-button_opened";
        }
        else {
            hide(el);
            link.className = "toggle-button";
        }
		updateWindowHeightFromHtml();
    }
    function switchToConfirmationView() {
        document.getElementById("protection-confirmation-section").style.display = "inline";
        document.getElementById("protection-important-header").style.display = "none";
        document.getElementById("protection-important-content").style.display = "none";
        updateWindowHeightFromHtml();
    }

    function enableProtection() {
        window.external.enableCredentialsProtection();
        switchToConfirmationView();

        var PasswordProtectionConfirmationTimeoutMs = 4000;
        setTimeout(function() {
            window.external.close();
        }, PasswordProtectionConfirmationTimeoutMs);
    }

    function refuseProtection() {
        window.external.disableCredentialsProtection();
        window.external.close();
    }

    function closeTooltip() {
        window.external.close();
    }

    window.external.initializeTooltip({
        width: 600,
        opaque: 1,
        position: "center",
		useShadow: true
    });
	updateWindowHeightFromHtml();
</script>
</html>