<html dir="$TextDirection$">
<head
	<meta charset="UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=9" />
	<style>
		!tooltip_styles.css!
	</style>
</head>
<body class="unsafe">
    <table class="header">
        <tr>
            <td class="logo"><img src="#klogo.png#" class="header-image" /></td>
            <td>$ProductName_@ProductType@$ $SandboxFrameUntrustedTitle$</td>
            <td>
                <a href="#" class="header-button close-button" onclick="closeTooltip(); return false;">
			        <img src="#close.png#" class="header-image" />
		        </a>
            </td>
        </tr>
    </table>
	
	<div class="tooltip-body">

		<div class="feedback-container">
			<a href="#" class="framed-button feedback-button-overrides" onclick="showUrlFeedback(); return false;">
				<table class="image-text-aligned-table">
					<tr>
						<td class="header-button-section feedback"></td>
						<td>$SendFeedback$</td>
					</tr>
				</table>
			</a>
		</div>
		<div style="clear:both"></div>


		<div class="content">
			<div class="spacer"></div>
			<div style="display:none">
				<p id="more-info-button-name">$MoreInfoButtonName$</p>
				<p id="report-button-name">$ReportButtonName$</p>
				<p id="hide-link-name">$HideLink$</p>
			</div>
			<div id="module-problems">
			</div>
			<div class="bottom-clearance"></div>
		</div>
	</div>

    <script type="text/javascript">?remove_ghost_nodes.js?</script>
    <script>
		var states = %States%;

		function findActiveState()
		{
			for (var i = 0; i < states.length; ++i)
			{
				if (!states[i].isIgnored)
				{
					return states[i];
				}
			}
			return;
		}

		function closeTooltip()
		{
		    var activeState = findActiveState();
		    while (activeState != undefined)
		    {
		        activeState.isIgnored = true;
		        activeState = findActiveState();
		    }
		    window.external.ignoreAllStates();
		    window.external.close();
		}

		function ignoreState(stateToIgnore)
		{
			window.external.ignoreState({ state: stateToIgnore.state });
			stateToIgnore.isIgnored = true;
			updateDisplayedStates();
		}

		function showSettings()
		{
		    window.external.close();
		}
		function showUrlFeedback()
		{
		    window.external.showUrlFeedbackDialog();
		}
		function showDetails(helpLink)
		{
			window.external.details({ url: helpLink });
		}

		function getLocalizedText(elementId)
		{
			return document.getElementById(elementId).innerText;
		}


		function updateDisplayedStates()
		{
		    var container = document.getElementById("module-problems");
            while (container.firstChild)
            {
	            container.removeChild(container.firstChild);
            }
			
			if (findActiveState() == undefined)
			{
				window.external.close();
				return;
			}

			for (var i = 0; i < states.length; ++i)
			{
				if (!states[i].isIgnored)
				{
					var newElement = document.createElement("div");
					newElement.className = "problem";

					if (container.children.length != 0)
					{
						var spacer = document.createElement("div");
						spacer.className = "spacer";
						newElement.appendChild(spacer);
					}

				    var title = document.createElement("p");
					title.innerText = states[i].localizedStringName;
					title.className = "problem-text";
					newElement.appendChild(title);

					if (states[i].helpLink != "")
					{
						var helpLink = document.createElement("a");
						helpLink.setAttribute("href", "#");
						helpLink.onclick = function (index) { return function() { showDetails(states[index].helpLink); } }(i);
						helpLink.innerText = getLocalizedText("more-info-button-name");
						helpLink.className = "framed-button";
						newElement.appendChild(helpLink);
					}

					var hideLink = document.createElement("a");
					hideLink.className = "link hide-link";
				    hideLink.innerText = getLocalizedText("hide-link-name");
				    hideLink.onclick = function (index) { return function() { ignoreState(states[index]); } }(i);
				    hideLink.setAttribute("href", "#");
					newElement.appendChild(hideLink);

					container.appendChild(newElement);
				}
			}
		}

		updateDisplayedStates();

		window.onload = function() {
			window.external.initializeTooltip({
				height: document.body.scrollHeight | 0,
				cornerRadius: 5
			});
		}
    </script>
</body>
</html>