<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title></title>
    <style>
    !tooltip_centered_styles.css!
    </style>
</head>
<body onclick="hideTooltip(); return false;" class="$TextDirection$ unsafe">
    <div onclick="DontPropagate(); return false;" id="linksTooltip">
	    <div class="tooltip-content">
		    <div id="linksTooltip-arrow-top" class="linksTooltip-arrow-top"></div>
		    <div id="tooltip-links-list"></div>
	    </div>
	</div>
<div class="content">
	<div class="module">
		<div class="module-header__logo">
			<img src="#logo.png#"/>
		</div>
		<div id="protection-disabled-section">
			<span class="module-header__text">$PassProtectionDisabled$</span>
		</div>

		<div id="protection-reuse-header">
			<div class="module-header">
				<span class="module-header__text">
                        <span id="plural"></span><b id="stored-domains-list"></b>
                        <a id="duplicatesTooltip" onclick="showLinksTooltip(); return false;" href="#">...</a>
                        <span>$PassProtectionHeaderUsualSite2$</span>
                </span>
			</div>
			<div class="module-buttons">
				<a href="#" class="module-button_stub"></a>
			</div>
		</div>
	</div>
	<div id="protection-reuse-content" class="module">
			<p>$PassProtectionDescriptionUsualSite_part1$</p>
			<p>$PassProtectionDescriptionUsualSite_part2$</p>
			<div class="buttons">
				<a class="button" href="#" onclick="notifyProtectionDisabledAndClose(); return false;">$PassProtectionDisable$</a>
				<a class="confirm-button" href="#" onclick="closeTooltip(); return false;">$PassProtectionClose$</a>
			</div>
	</div>
</div>
<a class="close" href="#" onclick="closeTooltip(); return false;">&times;</a>
</body>
<script>
    var storedDomains = %StoredDomains%;

    function generateDomainListNode(domainsArray) {
        var span = document.createElement("span");
        var dots = document.getElementById('duplicatesTooltip');
        for (var v in domainsArray) {
            var anchor = document.createElement("a");
            var span2 = document.createElement("span");
            span2.innerHTML = ", ";
            anchor.innerHTML = domainsArray[v];
            anchor.href = "#";
            anchor.onclick = function (idx) {
                return function() {
                    window.external.openAdditionalLink({ url: domainsArray[idx] });
                }
            }(v);
            if (domainsArray.length > 4) {
                dots.style.display = "inline";
            }
            else {
                dots.style.display = "none";
            }
            makePunctuation(domainsArray,v,span2);
            span.appendChild(anchor);
            span.appendChild(span2);
        }
        return span;
    }
	
    function makePunctuation(list,i,el) {
        if (list.length < 5 && i == list.length - 1) {
            el.innerHTML = ", ";
        }
        if (list.length < 5 && i == list.length - 1 && storedDomains.length < 5) {
            el.innerHTML = " ";
        }
        if (list.length > 4 && i == list.length - 1) {
            el.innerHTML = " ";
        }
    }

    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 switchToConfirmationView() {
        document.getElementById("protection-disabled-section").style.display = "inline";
        document.getElementById("protection-reuse-header").style.display = "none";
        document.getElementById("protection-reuse-content").style.display = "none";
        document.body.style.borderColor = "#ED3A46";
        updateWindowHeightFromHtml();
    }

    function openAdditionalLink() {
        window.external.openAdditionalLink({ url: "%PassProtectionAdditionalUrl%" });
        window.external.close();
    }

    function notifyProtectionDisabledAndClose() {
        window.external.disableCredentialsProtection();
        var PasswordProtectionConfirmationTimeoutMs = 4000;

        switchToConfirmationView();
        setTimeout(function() {
            closeTooltip();
        }, PasswordProtectionConfirmationTimeoutMs);
    }

    function closeTooltip() {
        window.external.close();
    }
    if (storedDomains.length > 4) {
        document.getElementById("stored-domains-list").appendChild(generateDomainListNode(storedDomains.slice(0,3)));
    }
    else {
        document.getElementById("stored-domains-list").appendChild(generateDomainListNode(storedDomains));
    }
    document.getElementById("tooltip-links-list").appendChild(generateDomainListNode(storedDomains));

    var pluralDescription = document.getElementById("plural");
    if (storedDomains.length > 1) {
        pluralDescription.innerHTML = "$PassProtectionHeaderUsualSite$"; }
    else {
        pluralDescription.innerHTML = "$PassProtectionHeaderUsualSiteSingular$"; }

	
    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 toggle(el) {
        isHidden(el) ? show(el) : hide(el);
    }


    function showLinksTooltip(event) {
        var tooltip = document.getElementById('linksTooltip');
        var dots = document.getElementById('duplicatesTooltip');
        var tooltipArrowTop = document.getElementById('linksTooltip-arrow-top');
        var dotsWidth = dots.offsetWidth;
        var dotsHeight = dots.offsetHeight;
        var rect = dots.getBoundingClientRect();
        var dotsOffsetLeft = rect.left;
        var dotsOffsetTop = rect.top;
        toggle(tooltip);
        show(tooltipArrowTop);
        tooltip.style.top = dotsOffsetTop + dotsHeight + 8 + 'px';
        if (dotsOffsetLeft > tooltip.offsetWidth) {
            tooltip.style.left = dotsOffsetLeft - tooltip.offsetWidth + dotsWidth*2 + 'px';
            tooltipArrowTop.style.right = 10 + 'px';
        }
        else {
            tooltip.style.left = dotsOffsetLeft - dotsWidth*2 + 'px';
            tooltipArrowTop.style.left = 10 + 'px';
        }
        event = event || window.event;
        event.preventDefault ? event.preventDefault() : (event.returnValue = false);
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
    }

    function DontPropagate(event) {
        event = event || window.event;
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
    };

    function hideTooltip() {
        var tooltipArrowTop = document.getElementById('linksTooltip-arrow-top');
        var tooltip = document.getElementById('linksTooltip');
        hide(tooltip);
        hide(tooltipArrowTop);
    }

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